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

src/components/advanced/table-header-operation.vue

@@ -9,6 +9,12 @@ interface Props {
   itemAlign?: NaiveUI.Align;
   disabledDelete?: boolean;
   loading?: boolean;
+  operations?: {
+    add?: boolean;
+    refresh?: boolean;
+    delete?: boolean;
+    columns?: boolean;
+  };
 }
 
 defineProps<Props>();
@@ -43,27 +49,34 @@ function refresh() {
     <slot name="prefix"></slot>
     <div class="space-x-5">
       <slot name="default">
-        <NButton size="small" ghost type="primary" @click="add">
+        <NButton v-if="operations?.add" size="small" ghost type="primary" @click="add">
           <template #icon>
             <icon-ic-round-plus class="text-icon" />
           </template>
           {{ $t('common.add') }}
         </NButton>
 
-        <NButton size="small" ghost type="error" :disabled="disabledDelete" @click="batchDelete">
+        <NButton
+          v-if="operations?.delete"
+          size="small"
+          ghost
+          type="error"
+          :disabled="disabledDelete"
+          @click="batchDelete"
+        >
           <template #icon>
             <icon-ic-round-delete class="text-icon" />
           </template>
           {{ $t('common.batchDelete') }}
         </NButton>
       </slot>
-      <NButton size="small" @click="refresh">
+      <NButton v-if="operations?.refresh" size="small" @click="refresh">
         <template #icon>
           <icon-mdi-refresh class="text-icon" :class="{ 'animate-spin': loading }" />
         </template>
         {{ $t('common.refresh') }}
       </NButton>
-      <TableColumnSetting v-model:columns="columns" />
+      <TableColumnSetting v-if="operations?.columns" v-model:columns="columns" />
     </div>
     <slot name="suffix"></slot>
   </NSpace>

src/components/table/table-base.vue

@@ -1,7 +1,8 @@
 <script lang="ts" setup>
-import { onMounted, ref } from 'vue';
+import type { ComponentInstance } from 'vue';
+import { getCurrentInstance, onMounted, ref } from 'vue';
 import { useRoute } from 'vue-router';
-import type { DataTableColumns, PaginationProps } from 'naive-ui';
+import type { DataTableColumns, NDataTable, PaginationProps } from 'naive-ui';
 import { useI18n } from 'vue-i18n';
 import {
   type TableBaseColumns,
@@ -22,10 +23,23 @@ const props = withDefaults(
     fetchData: TableFetchData;
     columns: TableBaseColumns;
     showHeaderOperation?: boolean;
+    headerOperations?: {
+      add?: boolean;
+      refresh?: boolean;
+      delete?: boolean;
+      columns?: boolean;
+    };
     filterColumns?: TableFilterColumns;
   }>(),
   {
-    filterColumns: () => []
+    showHeaderOperation: true,
+    filterColumns: () => [],
+    headerOperations: () => ({
+      add: true,
+      refresh: true,
+      delete: false,
+      columns: true
+    })
   }
 );
 const emit = defineEmits<{
@@ -43,6 +57,7 @@ const pagination = ref<PaginationProps>({
   showSizePicker: true,
   pageSizes: [10, 20, 50, 100]
 });
+const vm = getCurrentInstance()!;
 
 async function loadData(query?: Record<string, any>) {
   loading.value = true;
@@ -87,14 +102,22 @@ function handleUpdateColumns(columns: TableColumnCheck[]) {
 
   dataTableColumns.value = sortedColumns as DataTableColumns;
 }
+function tableRef(exposed: any) {
+  vm.exposed = {
+    reload: loadData,
+    ...exposed
+  };
+}
 
 onMounted(() => {
   loadData();
 });
 
-defineExpose({
-  reload: loadData
-});
+interface Expose extends ComponentInstance<typeof NDataTable> {
+  reload: typeof loadData;
+}
+
+defineExpose({} as Expose);
 </script>
 
 <template>
@@ -104,6 +127,7 @@ defineExpose({
     <div class="rounded-lg bg-white p-5 space-y-5 dark:bg-white/10">
       <TableHeaderOperation
         v-if="showHeaderOperation"
+        :operations="headerOperations"
         :columns="headerTableColumns"
         @update:columns="handleUpdateColumns"
         @add="emit('add')"
@@ -116,7 +140,7 @@ defineExpose({
       </TableHeaderOperation>
 
       <NDataTable
-        :row-key="row => (row as any).id"
+        :ref="tableRef"
         :loading="loading"
         :scroll-x="2000"
         :columns="dataTableColumns"
@@ -125,6 +149,7 @@ defineExpose({
         :bordered="false"
         :on-update:page="handlePageChange"
         :on-update:page-size="handlePageSizeChange"
+        v-bind="$attrs"
       />
     </div>
   </div>