feat: 增加表头操作功能，支持动态控制操作按钮显示；优化银行卡信息展示

src/views/user/bankcard/index.vue

@@ -1,8 +1,8 @@
 <script lang="ts" setup>
 import { useTemplateRef } from 'vue';
-import { NDatePicker, useDialog, useMessage } from 'naive-ui';
+import { useDialog, useMessage } from 'naive-ui';
 import { client, safeClient } from '@/service/api';
-import type { TableBaseColumns, TableFetchData, TableInst } from '@/components/table';
+import type { TableBaseColumns, TableFetchData, TableFilterColumns, TableInst } from '@/components/table';
 
 const dialog = useDialog();
 const message = useMessage();
@@ -24,29 +24,21 @@ const columns: TableBaseColumns = [
     title: 'ID',
     key: 'userId'
   },
+  {
+    title: '用户名',
+    key: 'accountName'
+  },
   {
     title: '银行卡名称',
     key: 'bankName'
   },
   {
-    title: '银行卡号',
+    title: '银行编号',
     key: 'bankCode'
   },
   {
-    title: '账户名',
-    key: 'accountName'
-  },
-  {
-    title: 'maskAccountNumber',
-    key: 'maskAccountNumber'
-  },
-  {
-    title: 'country',
-    key: 'country'
-  },
-  {
-    title: 'branchName',
-    key: 'branchName'
+    title: '风险等级',
+    key: 'riskStatus'
   },
   {
     title: '操作',
@@ -57,6 +49,7 @@ const columns: TableBaseColumns = [
       {
         contentText: '编辑',
         type: 'primary',
+        ghost: true,
         onClick: () => {
           tableInst.value?.reload();
         }
@@ -65,7 +58,6 @@ const columns: TableBaseColumns = [
         contentText: '删除',
         type: 'error',
         ghost: true,
-        size: 'small',
         onClick: async () => {
           dialog.create({
             title: '提示',
@@ -94,15 +86,20 @@ const filterColumns: TableFilterColumns = [
     key: 'bankName'
   },
   {
-    title: '银行卡号',
-    key: 'bankCode',
-    component: NDatePicker
+    title: '银行编号',
+    key: 'bankCode'
   }
 ];
 </script>
 
 <template>
-  <TableBase ref="tableInst" :columns="columns" :filter-columns="filterColumns" :fetch-data="fetchData" />
+  <TableBase
+    ref="tableInst"
+    show-header-operation
+    :columns="columns"
+    :filter-columns="filterColumns"
+    :fetch-data="fetchData"
+  />
 </template>
 
 <style lang="css" scoped></style>