perf: 优化部分显示效果

pull/119/head
xingyu4j 2025-05-28 11:36:52 +08:00
parent 77ccb9a5d8
commit 6236f59473
13 changed files with 72 additions and 130 deletions

View File

@ -3,7 +3,7 @@ import type { InfraApiAccessLogApi } from '#/api/infra/api-access-log';
import { ref } from 'vue';
import { useVbenModal } from '@vben/common-ui';
import { JsonViewer, useVbenModal } from '@vben/common-ui';
import { formatDateTime } from '@vben/utils';
import { Descriptions } from 'ant-design-vue';
@ -71,7 +71,7 @@ const [Modal, modalApi] = useVbenModal({
{{ formData?.requestMethod }} {{ formData?.requestUrl }}
</Descriptions.Item>
<Descriptions.Item label="请求参数">
{{ formData?.requestParams }}
<JsonViewer :value="formData?.requestParams" preview-mode />
</Descriptions.Item>
<Descriptions.Item label="请求结果">
{{ formData?.responseBody }}

View File

@ -3,10 +3,10 @@ import type { InfraApiErrorLogApi } from '#/api/infra/api-error-log';
import { ref } from 'vue';
import { useVbenModal } from '@vben/common-ui';
import { JsonViewer, useVbenModal } from '@vben/common-ui';
import { formatDateTime } from '@vben/utils';
import { Descriptions, Input } from 'ant-design-vue';
import { Descriptions } from 'ant-design-vue';
import { DictTag } from '#/components/dict-tag';
import { DICT_TYPE } from '#/utils';
@ -71,7 +71,7 @@ const [Modal, modalApi] = useVbenModal({
{{ formData?.requestMethod }} {{ formData?.requestUrl }}
</Descriptions.Item>
<Descriptions.Item label="请求参数">
{{ formData?.requestParams }}
<JsonViewer :value="formData?.requestParams" preview-mode />
</Descriptions.Item>
<Descriptions.Item label="异常时间">
{{ formatDateTime(formData?.exceptionTime || '') }}
@ -80,11 +80,7 @@ const [Modal, modalApi] = useVbenModal({
{{ formData?.exceptionName }}
</Descriptions.Item>
<Descriptions.Item v-if="formData?.exceptionStackTrace" label="异常堆栈">
<Input.TextArea
:value="formData?.exceptionStackTrace"
:auto-size="{ maxRows: 20 }"
readonly
/>
<JsonViewer :value="formData?.exceptionStackTrace" preview-mode />
</Descriptions.Item>
<Descriptions.Item label="处理状态">
<DictTag

View File

@ -83,7 +83,7 @@ const [Modal, modalApi] = useVbenModal({
</script>
<template>
<Modal :title="getTitle">
<Modal class="w-[40%]" :title="getTitle">
<Form class="mx-4" />
</Modal>
</template>

View File

@ -116,7 +116,6 @@ export function useGridColumns(): VxeTableGridOptions['columns'] {
{
title: '支付时间',
field: 'successTime',
minWidth: 180,
formatter: 'formatDateTime',
},
{
@ -129,7 +128,7 @@ export function useGridColumns(): VxeTableGridOptions['columns'] {
},
{
title: '操作',
width: 80,
width: 100,
fixed: 'right',
slots: { default: 'actions' },
},

View File

@ -31,8 +31,12 @@ function handleDetail(row: PayOrderApi.Order) {
const [Grid, gridApi] = useVbenVxeGrid({
formOptions: {
schema: useGridFormSchema(),
collapsed: false,
},
gridOptions: {
cellConfig: {
height: 80,
},
columns: useGridColumns(),
height: 'auto',
keepSource: true,
@ -49,6 +53,9 @@ const [Grid, gridApi] = useVbenVxeGrid({
},
rowConfig: {
keyField: 'id',
isCurrent: true,
isHover: true,
resizable: true,
},
toolbarConfig: {
refresh: { code: 'query' },
@ -90,16 +97,18 @@ const [Grid, gridApi] = useVbenVxeGrid({
/>
</template>
<template #no="{ row }">
<p class="order-font">
<Tag size="small" color="blue"> 商户</Tag> {{ row.merchantOrderId }}
</p>
<p class="order-font" v-if="row.no">
<Tag size="small" color="orange">支付</Tag> {{ row.no }}
</p>
<p class="order-font" v-if="row.channelOrderNo">
<Tag size="small" color="green">渠道</Tag>
{{ row.channelOrderNo }}
</p>
<div class="flex flex-col gap-1 text-left">
<p class="text-sm">
<Tag size="small" color="blue"> 商户</Tag> {{ row.merchantOrderId }}
</p>
<p class="text-sm" v-if="row.no">
<Tag size="small" color="orange">支付</Tag> {{ row.no }}
</p>
<p class="text-sm" v-if="row.channelOrderNo">
<Tag size="small" color="green">渠道</Tag>
{{ row.channelOrderNo }}
</p>
</div>
</template>
</Grid>
</Page>

View File

@ -80,76 +80,41 @@ export function useGridColumns(): VxeTableGridOptions['columns'] {
{
field: 'id',
title: '编号',
minWidth: 100,
},
{
field: 'createTime',
title: '创建时间',
minWidth: 180,
formatter: 'formatDateTime',
},
{
field: 'payPrice',
title: '支付金额',
minWidth: 120,
cellRender: {
name: 'CellTag',
props: {
type: 'success',
content: '¥{payPrice}',
formatter: (value: number) => (value / 100).toFixed(2),
},
},
},
{
field: 'refundPrice',
title: '退款金额',
minWidth: 120,
cellRender: {
name: 'CellTag',
props: {
type: 'danger',
content: '¥{refundPrice}',
formatter: (value: number) => (value / 100).toFixed(2),
},
},
},
{
field: 'merchantRefundId',
title: '退款订单号',
minWidth: 300,
cellRender: {
name: 'CellTag',
props: {
type: 'info',
content: '商户 {merchantRefundId}',
},
},
},
{
field: 'channelRefundNo',
title: '渠道退款单号',
minWidth: 200,
cellRender: {
name: 'CellTag',
props: {
type: 'success',
content: '{channelRefundNo}',
},
},
},
{
field: 'payPrice',
title: '支付金额',
formatter: 'formatFraction',
},
{
field: 'refundPrice',
title: '退款金额',
formatter: 'formatFraction',
},
{
field: 'status',
title: '退款状态',
minWidth: 120,
cellRender: {
name: 'CellDict',
props: { type: DICT_TYPE.PAY_REFUND_STATUS },
},
},
{
field: 'createTime',
title: '创建时间',
formatter: 'formatDateTime',
},
{
title: '操作',
width: 80,
width: 100,
fixed: 'right',
slots: { default: 'actions' },
},

View File

@ -31,7 +31,7 @@ const [Form, formApi] = useVbenForm({
class: 'w-full',
},
formItemClass: 'col-span-2',
labelWidth: 80,
labelWidth: 140,
},
layout: 'horizontal',
schema: useFormSchema(),
@ -83,7 +83,7 @@ const [Modal, modalApi] = useVbenModal({
</script>
<template>
<Modal :title="getTitle">
<Modal class="w-[40%]" :title="getTitle">
<Form class="mx-4" />
</Modal>
</template>

View File

@ -50,14 +50,6 @@ export function useFormSchema(): VbenFormSchema[] {
},
rules: z.number().default(CommonStatusEnum.ENABLE),
},
{
fieldName: 'remark',
label: '备注',
component: 'Textarea',
componentProps: {
placeholder: '请输入备注',
},
},
{
fieldName: 'apiKey',
label: '短信 API 的账号',
@ -83,6 +75,14 @@ export function useFormSchema(): VbenFormSchema[] {
placeholder: '请输入短信发送回调 URL',
},
},
{
fieldName: 'remark',
label: '备注',
component: 'Textarea',
componentProps: {
placeholder: '请输入备注',
},
},
];
}
@ -135,17 +135,14 @@ export function useGridColumns(): VxeTableGridOptions['columns'] {
{
field: 'id',
title: '编号',
minWidth: 100,
},
{
field: 'signature',
title: '短信签名',
minWidth: 120,
},
{
field: 'code',
title: '渠道编码',
minWidth: 120,
cellRender: {
name: 'CellDict',
props: { type: DICT_TYPE.SYSTEM_SMS_CHANNEL_CODE },
@ -154,38 +151,32 @@ export function useGridColumns(): VxeTableGridOptions['columns'] {
{
field: 'status',
title: '启用状态',
minWidth: 100,
cellRender: {
name: 'CellDict',
props: { type: DICT_TYPE.COMMON_STATUS },
},
},
{
field: 'remark',
title: '备注',
minWidth: 120,
},
{
field: 'apiKey',
title: '短信 API 的账号',
minWidth: 180,
},
{
field: 'apiSecret',
title: '短信 API 的密钥',
minWidth: 180,
},
{
field: 'callbackUrl',
title: '短信发送回调 URL',
minWidth: 180,
},
{
field: 'createTime',
title: '创建时间',
minWidth: 180,
formatter: 'formatDateTime',
},
{
field: 'remark',
title: '备注',
},
{
title: '操作',
width: 130,

View File

@ -31,7 +31,7 @@ const [Form, formApi] = useVbenForm({
class: 'w-full',
},
formItemClass: 'col-span-2',
labelWidth: 80,
labelWidth: 120,
},
layout: 'horizontal',
schema: useFormSchema(),
@ -82,7 +82,7 @@ const [Modal, modalApi] = useVbenModal({
</script>
<template>
<Modal :title="getTitle">
<Modal class="w-[40%]" :title="getTitle">
<Form class="mx-4" />
</Modal>
</template>

View File

@ -84,18 +84,10 @@ export function useGridColumns(): VxeTableGridOptions['columns'] {
{
field: 'id',
title: '编号',
minWidth: 100,
},
{
field: 'createTime',
title: '创建时间',
minWidth: 180,
formatter: 'formatDateTime',
},
{
field: 'mobile',
title: '手机号',
minWidth: 120,
},
{
field: 'templateContent',
@ -105,7 +97,6 @@ export function useGridColumns(): VxeTableGridOptions['columns'] {
{
field: 'sendStatus',
title: '发送状态',
minWidth: 120,
cellRender: {
name: 'CellDict',
props: { type: DICT_TYPE.SYSTEM_SMS_SEND_STATUS },
@ -114,13 +105,11 @@ export function useGridColumns(): VxeTableGridOptions['columns'] {
{
field: 'sendTime',
title: '发送时间',
minWidth: 180,
formatter: 'formatDateTime',
},
{
field: 'receiveStatus',
title: '接收状态',
minWidth: 120,
cellRender: {
name: 'CellDict',
props: { type: DICT_TYPE.SYSTEM_SMS_RECEIVE_STATUS },
@ -129,13 +118,11 @@ export function useGridColumns(): VxeTableGridOptions['columns'] {
{
field: 'receiveTime',
title: '接收时间',
minWidth: 180,
formatter: 'formatDateTime',
},
{
field: 'channelCode',
title: '短信渠道',
minWidth: 120,
cellRender: {
name: 'CellDict',
props: { type: DICT_TYPE.SYSTEM_SMS_CHANNEL_CODE },
@ -144,17 +131,20 @@ export function useGridColumns(): VxeTableGridOptions['columns'] {
{
field: 'templateId',
title: '模板编号',
minWidth: 100,
},
{
field: 'templateType',
title: '短信类型',
minWidth: 100,
cellRender: {
name: 'CellDict',
props: { type: DICT_TYPE.SYSTEM_SMS_TEMPLATE_TYPE },
},
},
{
field: 'createTime',
title: '创建时间',
formatter: 'formatDateTime',
},
{
title: '操作',
width: 80,

View File

@ -78,6 +78,7 @@ export function useFormSchema(): VbenFormSchema[] {
component: 'Textarea',
componentProps: {
placeholder: '请输入模板内容',
rows: 4,
},
rules: 'required',
},
@ -204,12 +205,10 @@ export function useGridColumns(): VxeTableGridOptions['columns'] {
{
field: 'id',
title: '编号',
minWidth: 100,
},
{
field: 'type',
title: '短信类型',
minWidth: 120,
cellRender: {
name: 'CellDict',
props: { type: DICT_TYPE.SYSTEM_SMS_TEMPLATE_TYPE },
@ -218,12 +217,10 @@ export function useGridColumns(): VxeTableGridOptions['columns'] {
{
field: 'name',
title: '模板名称',
minWidth: 120,
},
{
field: 'code',
title: '模板编码',
minWidth: 120,
},
{
field: 'content',
@ -233,26 +230,18 @@ export function useGridColumns(): VxeTableGridOptions['columns'] {
{
field: 'status',
title: '开启状态',
minWidth: 100,
cellRender: {
name: 'CellDict',
props: { type: DICT_TYPE.COMMON_STATUS },
},
},
{
field: 'remark',
title: '备注',
minWidth: 120,
},
{
field: 'apiTemplateId',
title: '短信 API 的模板编号',
minWidth: 180,
},
{
field: 'channelCode',
title: '短信渠道',
minWidth: 100,
cellRender: {
name: 'CellDict',
props: { type: DICT_TYPE.SYSTEM_SMS_CHANNEL_CODE },
@ -261,9 +250,12 @@ export function useGridColumns(): VxeTableGridOptions['columns'] {
{
field: 'createTime',
title: '创建时间',
minWidth: 180,
formatter: 'formatDateTime',
},
{
field: 'remark',
title: '备注',
},
{
title: '操作',
width: 220,

View File

@ -31,7 +31,7 @@ const [Form, formApi] = useVbenForm({
class: 'w-full',
},
formItemClass: 'col-span-2',
labelWidth: 80,
labelWidth: 120,
},
layout: 'horizontal',
schema: useFormSchema(),
@ -83,7 +83,7 @@ const [Modal, modalApi] = useVbenModal({
</script>
<template>
<Modal :title="getTitle">
<Modal class="w-[40%]" :title="getTitle">
<Form class="mx-4" />
</Modal>
</template>

View File

@ -103,7 +103,7 @@ const buildFormSchema = () => {
</script>
<template>
<Modal title="发送短信">
<Modal class="w-[30%]" title="发送短信">
<Form class="mx-4" />
</Modal>
</template>