iter(g256): 抽出分页条并加每页条数切换

packages/skin/ui/src/dataTable.ts

@@ -9,10 +9,10 @@ import {
 import { iconSearch } from './icons.js'; import { computed, effect, h, renderList, signal } from '@ui-arch/frame';
 import { attachResize } from './columnResize.js';
 import { exportButton } from './csv.js';
-import { button } from './button.js';
 import { skeleton } from './skeleton.js';
 import { textField } from './textField.js';
 import { emptyRow } from './tableEmpty.js';
+import { tablePager } from './tablePager.js';
 import { attachDataSource, readRows } from './tableDataSource.js';
 import type { DataTableProps, TableApi } from './types.js';
 
@@ -188,12 +188,12 @@ export function dataTable<T extends { id: RowKey }>(props: DataTableProps<T>): H
       props.exportable ? exportButton(table, props.columns, props.exportName ?? 'table.csv') : null, // 导出筛选+排序后的全量行
     ),
     h('div', { class: 'ua-table-scroll' }, h('table', null, colgroup, h('thead', null, h('tr', null, selectable ? headCheck : null, ...props.columns.map(th))), tbody)),
-    h(
-      'div',
-      { class: 'ua-pager', role: 'navigation', 'aria-label': '分页' },
-      button({ label: '上一页', variant: 'ghost', disabled: props.loading, onClick: () => table.dispatch({ type: 'setPage', page: info().page - 1 }) }),
-      h('span', { class: 'ua-page-info', role: 'status', 'aria-live': 'polite' }, () => `第 ${info().page} / ${info().totalPages} 页 · 共 ${visible().total} 行`), // 翻页/筛选后面向读屏播报
-      button({ label: '下一页', variant: 'ghost', disabled: props.loading, onClick: () => table.dispatch({ type: 'setPage', page: info().page + 1 }) }),
-    ),
+    tablePager({
+      info,
+      total: () => visible().total,
+      loading: busy,
+      onPage: (page) => table.dispatch({ type: 'setPage', page }),
+      onPageSize: (pageSize) => table.dispatch({ type: 'setPageSize', pageSize }),
+    }),
   );
 }