风险与内控管理优化: 异常账单服务端分页/筛选/收银员搜索/合计, 收银员TOP15按异常账单数排序, 双击跳转明细, MonthPicker靠右, 侧边栏底部间距

client/src/pages/IndicatorsPage.tsx

@@ -1,26 +1,29 @@
 import { useQuery } from '@tanstack/react-query'
 import api from '@/lib/api'
-import { DataTable } from '@/components/DataTable'
-import { Pagination } from '@/components/Pagination'
-import { useState, useMemo } from 'react'
-
-const PAGE_SIZE = 10
+import { FilterableTable } from '@/components/FilterableTable'
 
 export function IndicatorsPage() {
-  const [page, setPage] = useState(1)
   const { data } = useQuery({
     queryKey: ['indicators'],
     queryFn: () => api.get('/tasks/indicators'),
   })
 
   const indicators = (data as any)?.data || []
-  const pagedIndicators = useMemo(() => indicators.slice((page - 1) * PAGE_SIZE, page * PAGE_SIZE), [indicators, page])
 
   return (
     <div className="space-y-4">
       <h1 className="text-xl font-bold">指标字典</h1>
-      <Pagination page={page} pageSize={PAGE_SIZE} total={indicators.length} onPageChange={setPage} />
-      <DataTable
+      <FilterableTable
+        data={indicators}
+        sortOptions={[
+          { key: 'indicator_name', label: '指标名称' },
+          { key: 'update_frequency', label: '更新频率' },
+          { key: 'owner', label: '负责人' },
+        ]}
+        defaultSort="indicator_name"
+        defaultOrder="asc"
+        filterKey="update_frequency"
+        filterLabel="全部频率"
         columns={[
           { key: 'indicator_name', label: '指标名称' },
           { key: 'business_definition', label: '业务定义', render: (r) => <span className="text-xs">{r.business_definition}</span> },
@@ -31,7 +34,6 @@ export function IndicatorsPage() {
           { key: 'red_threshold', label: '红线', align: 'right' },
           { key: 'version_date', label: '版本日期', render: (r) => r.version_date?.substring(0, 10) },
         ]}
-        data={pagedIndicators}
       />
     </div>
   )