feat: 新增提现详情组件，优化提现操作界面，调整操作列宽度

src/typings/components.d.ts

@@ -50,6 +50,8 @@ declare module 'vue' {
     NCol: typeof import('naive-ui')['NCol']
     NColorPicker: typeof import('naive-ui')['NColorPicker']
     NDataTable: typeof import('naive-ui')['NDataTable']
+    NDescriptions: typeof import('naive-ui')['NDescriptions']
+    NDescriptionsItem: typeof import('naive-ui')['NDescriptionsItem']
     NDialogProvider: typeof import('naive-ui')['NDialogProvider']
     NDivider: typeof import('naive-ui')['NDivider']
     NDrawer: typeof import('naive-ui')['NDrawer']
@@ -141,6 +143,8 @@ declare global {
   const NCol: typeof import('naive-ui')['NCol']
   const NColorPicker: typeof import('naive-ui')['NColorPicker']
   const NDataTable: typeof import('naive-ui')['NDataTable']
+  const NDescriptions: typeof import('naive-ui')['NDescriptions']
+  const NDescriptionsItem: typeof import('naive-ui')['NDescriptionsItem']
   const NDialogProvider: typeof import('naive-ui')['NDialogProvider']
   const NDivider: typeof import('naive-ui')['NDivider']
   const NDrawer: typeof import('naive-ui')['NDrawer']

src/views/withdraw/approved/components/info.vue

@@ -0,0 +1,53 @@
+<script lang="ts" setup>
+import { computed } from 'vue';
+import { useDateFormat } from '@vueuse/core';
+import type { Treaty } from '@elysiajs/eden';
+import type { client } from '@/service/api';
+import { WithdrawMethodEnum, WithdrawStatusEnum } from '@/enum';
+
+const props = defineProps<{
+  data: Treaty.Data<typeof client.api.admin.withdraw.approved.get>['data'][number];
+}>();
+const withdrawToWhere = computed(() => {
+  if (props.data.withdrawMethod === 'bank') {
+    return `银行账户: ${props.data.bankAccountId}`;
+  } else if (props.data.withdrawMethod === 'crypto') {
+    return `加密地址: ${props.data.toAddress}`;
+  }
+  return `现金提取码: ${props.data.cashPickupCode}`;
+});
+</script>
+
+<template>
+  <NDescriptions label-placement="top" bordered :column="2" class="my-4">
+    <NDescriptionsItem label="ID">
+      {{ data.id }}
+    </NDescriptionsItem>
+    <NDescriptionsItem label="资产账户">
+      {{ data.assetCode }}
+    </NDescriptionsItem>
+    <NDescriptionsItem label="提现金额">
+      {{ Number(data.amount).toFixed(2) }}
+    </NDescriptionsItem>
+    <NDescriptionsItem label="实际到账金额">
+      {{ Number(data.actualAmount).toFixed(2) }}
+    </NDescriptionsItem>
+    <NDescriptionsItem label="提现方式">
+      {{ WithdrawMethodEnum[data.withdrawMethod as keyof typeof WithdrawMethodEnum] }}
+    </NDescriptionsItem>
+    <NDescriptionsItem label="手续费">
+      {{ Number(data.fee).toFixed(2) }}
+    </NDescriptionsItem>
+    <NDescriptionsItem label="提现去向">
+      {{ withdrawToWhere }}
+    </NDescriptionsItem>
+    <NDescriptionsItem label="状态">
+      {{ WithdrawStatusEnum[data.status as keyof typeof WithdrawStatusEnum] }}
+    </NDescriptionsItem>
+    <NDescriptionsItem label="创建时间">
+      {{ useDateFormat(data.createdAt, 'YYYY-MM-DD HH:mm') }}
+    </NDescriptionsItem>
+  </NDescriptions>
+</template>
+
+<style lang="css" scoped></style>

src/views/withdraw/approved/index.vue

@@ -6,6 +6,7 @@ import { client, safeClient } from '@/service/api';
 import type { TableBaseColumns, TableFetchData, TableFilterColumns, TableInst } from '@/components/table';
 import { WithdrawMethodEnum, WithdrawStatusEnum } from '@/enum';
 import Complete from './components/complete.vue';
+import Info from './components/info.vue';
 
 const dialog = useDialog();
 const message = useMessage();
@@ -77,7 +78,7 @@ const columns: TableBaseColumns = [
     title: '操作',
     fixed: 'right',
     key: 'operation',
-    width: 160,
+    width: 240,
     operations: (row: any) => [
       {
         contentText: '完成',
@@ -119,6 +120,18 @@ const columns: TableBaseColumns = [
             }
           });
         }
+      },
+      {
+        contentText: '详情',
+        type: 'tertiary',
+        ghost: true,
+        onClick: () => {
+          dialog.create({
+            title: '提现详情',
+            style: { width: '800px' },
+            content: () => h(Info, { data: row })
+          });
+        }
       }
     ]
   }