perf: 优化部分显示效果

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

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