更新表格组件，新增过滤功能，调整数据获取逻辑，优化界面布局

src/components/table/table-base.vue

@@ -1,12 +1,25 @@
 <script lang="ts" setup>
 import { onMounted, ref } from 'vue';
-import type { PaginationProps } from 'naive-ui';
-import { type TableBaseColumns, type TableFetchData, transformColumns, transformHeaderColumns } from '.';
+import { useRoute } from 'vue-router';
+import type { DataTableColumns, PaginationProps } from 'naive-ui';
+import { useI18n } from 'vue-i18n';
+import {
+  type TableBaseColumns,
+  type TableFetchData,
+  type TableFilterColumns,
+  transformColumns,
+  transformHeaderColumns
+} from '.';
+import type { TableColumnCheck } from '~/packages/hooks/src';
 
+const route = useRoute();
+const { t } = useI18n();
+const title = t(route.meta.i18nKey as string);
 const props = defineProps<{
   fetchData: TableFetchData;
   columns: TableBaseColumns;
   showHeaderOperation?: boolean;
+  filterColumns?: TableFilterColumns;
 }>();
 const emit = defineEmits<{
   (e: 'add'): void;
@@ -15,8 +28,8 @@ const emit = defineEmits<{
 }>();
 
 const tableData = ref<any[]>([]);
-const dataTableColumns = transformColumns(props.columns);
-const headerTableColumns = transformHeaderColumns(props.columns);
+const dataTableColumns = ref<DataTableColumns>(transformColumns(props.columns));
+const headerTableColumns = ref<NaiveUI.TableColumnCheck[]>(transformHeaderColumns(props.columns));
 const pagination = ref<PaginationProps>({
   page: 1,
   pageSize: 10,
@@ -25,12 +38,15 @@ const pagination = ref<PaginationProps>({
   pageSizes: [10, 20, 50, 100]
 });
 
-async function loadData() {
+async function loadData(query?: Record<string, any>) {
   const page = pagination.value.page || 1;
   const pageSize = pagination.value.pageSize || 10;
   const { data } = await props.fetchData({
-    pageIndex: page,
-    pageSize
+    pagination: {
+      pageIndex: page,
+      pageSize
+    },
+    filter: query
   });
 
   tableData.value = (data.value as any).data;
@@ -45,6 +61,19 @@ function handlePageSizeChange(curPageSize: number) {
   pagination.value.pageSize = curPageSize;
   loadData();
 }
+function handleSearch(form: Record<string, any>) {
+  pagination.value.page = 1;
+  loadData(form);
+}
+function handleUpdateColumns(columns: TableColumnCheck[]) {
+  headerTableColumns.value = columns;
+  const sortKeys = columns.map(col => col.key);
+
+  const currentColumns: DataTableColumns = [...dataTableColumns.value];
+  const sortedColumns = sortKeys.map(key => currentColumns.find(col => (col as any).key === key)).filter(Boolean);
+
+  dataTableColumns.value = sortedColumns as DataTableColumns;
+}
 
 onMounted(() => {
   loadData();
@@ -57,21 +86,32 @@ defineExpose({
 
 <template>
   <div class="space-y-5">
-    <TableHeaderOperation
-      v-if="showHeaderOperation"
-      :columns="headerTableColumns"
-      @add="emit('add')"
-      @refresh="emit('refresh')"
-      @delete="emit('delete')"
-    />
-    <NDataTable
-      :columns="dataTableColumns"
-      :data="tableData"
-      :pagination="pagination"
-      :bordered="false"
-      :on-update:page="handlePageChange"
-      :on-update:page-size="handlePageSizeChange"
-    />
+    <TableFilter :columns="filterColumns" @confirm="handleSearch" />
+
+    <div class="rounded-lg bg-white p-5 space-y-5">
+      <TableHeaderOperation
+        v-if="showHeaderOperation"
+        :columns="headerTableColumns"
+        @update:columns="handleUpdateColumns"
+        @add="emit('add')"
+        @refresh="loadData()"
+        @delete="emit('delete')"
+      >
+        <template #prefix>
+          <div class="text-lg font-bold">{{ title }}</div>
+        </template>
+      </TableHeaderOperation>
+
+      <NDataTable
+        :scroll-x="2000"
+        :columns="dataTableColumns"
+        :data="tableData"
+        :pagination="pagination"
+        :bordered="false"
+        :on-update:page="handlePageChange"
+        :on-update:page-size="handlePageSizeChange"
+      />
+    </div>
   </div>
 </template>