perf: 优化部分显示效果

apps/web-antd/src/views/infra/apiAccessLog/modules/detail.vue

@@ -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 }}

apps/web-antd/src/views/infra/apiErrorLog/modules/detail.vue

@@ -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
+        <JsonViewer :value="formData?.exceptionStackTrace" preview-mode />
-          :value="formData?.exceptionStackTrace"
-          :auto-size="{ maxRows: 20 }"
-          readonly
-        />
       </Descriptions.Item>
       <Descriptions.Item label="处理状态">
         <DictTag

apps/web-antd/src/views/infra/dataSourceConfig/modules/form.vue

@@ -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>

apps/web-antd/src/views/pay/order/data.ts

@@ -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' },
     },

apps/web-antd/src/views/pay/order/index.vue

@@ -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">
+        <div class="flex flex-col gap-1 text-left">
-          <Tag size="small" color="blue"> 商户</Tag> {{ row.merchantOrderId }}
+          <p class="text-sm">
-        </p>
+            <Tag size="small" color="blue"> 商户</Tag> {{ row.merchantOrderId }}
-        <p class="order-font" v-if="row.no">
+          </p>
-          <Tag size="small" color="orange">支付</Tag> {{ row.no }}
+          <p class="text-sm" v-if="row.no">
-        </p>
+            <Tag size="small" color="orange">支付</Tag> {{ row.no }}
-        <p class="order-font" v-if="row.channelOrderNo">
+          </p>
-          <Tag size="small" color="green">渠道</Tag>
+          <p class="text-sm" v-if="row.channelOrderNo">
-          {{ row.channelOrderNo }}
+            <Tag size="small" color="green">渠道</Tag>
-        </p>
+            {{ row.channelOrderNo }}
+          </p>
+        </div>
       </template>
     </Grid>
   </Page>

apps/web-antd/src/views/pay/refund/data.ts

@@ -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',
+      field: 'payPrice',
-        props: {
+      title: '支付金额',
-          type: 'success',
+      formatter: 'formatFraction',
-          content: '{channelRefundNo}',
+    },
-        },
+    {
-      },
+      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' },
     },

apps/web-antd/src/views/system/oauth2/client/modules/form.vue

@@ -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>

apps/web-antd/src/views/system/sms/channel/data.ts

@@ -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,

apps/web-antd/src/views/system/sms/channel/modules/form.vue

@@ -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>

apps/web-antd/src/views/system/sms/log/data.ts

@@ -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,

apps/web-antd/src/views/system/sms/template/data.ts

@@ -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,

apps/web-antd/src/views/system/sms/template/modules/form.vue

@@ -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>

apps/web-antd/src/views/system/sms/template/modules/send-form.vue

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