iter: d04 dataTable 接加载态（骨架行 + 交互禁用）

packages/skin/ui/src/dataTable.ts

@@ -8,6 +8,7 @@ import {
 import type { PageInfo, RowKey, TableInstance } from '@ui-arch/table-core';
 import { computed, effect, h, renderList, signal } from '@ui-arch/frame';
 import { button } from './button.js';
+import { skeleton } from './skeleton.js';
 import { textField } from './textField.js';
 import type { DataTableProps } from './types.js';
 
@@ -43,6 +44,8 @@ export function dataTable<T extends { id: RowKey }>(props: DataTableProps<T>): H
     return api.getPageInfo();
   });
   const selectedCount = computed(() => state().selection.length);
+  // 加载态读取器：布尔直接读，信号则保持响应性（供 renderList 依赖收集）
+  const busy = (): boolean => (typeof props.loading === 'function' ? props.loading() : props.loading === true);
 
   // —— 受控页码桥接：外部信号 ↔ 内核分页；外部越界先钳制，signal 等值写回不触发，双向同步收敛安全 ——
   if (props.page) {
@@ -96,8 +99,16 @@ export function dataTable<T extends { id: RowKey }>(props: DataTableProps<T>): H
       col.sortable ? sortMark(col.key) : null,
     );
 
+  /*** 骨架行：列宽与表头对齐，行数取当前每页条数（上限 6 行防过长） ***/
+  const skeletonRows = (): Node[] => {
+    const count = Math.min(props.pageSize ?? 5, 6);
+    const cell = () => h('td', null, skeleton({ variant: 'text', rows: 1 }));
+    return Array.from({ length: count }, () => h('tr', { class: 'ua-loading-row' }, ...Array.from({ length: colspan }, cell)));
+  };
+
   const tbody = h('tbody');
   renderList(tbody, () => {
+    if (busy()) return skeletonRows(); // 加载态优先：不看数据，避免闪出旧行
     const sel = state().selection; // 读入依赖：选择变化即整表重绘（行数 = pageSize，代价可控）
     const rows = visible().rows;
     if (!rows.length) {
@@ -119,6 +130,7 @@ export function dataTable<T extends { id: RowKey }>(props: DataTableProps<T>): H
 
   const filterInput = textField({
     placeholder: `筛选 ${filterKey}…`,
+    disabled: props.loading, // 加载中禁止筛选，避免与在途结果竞争
     onInput: (value) => {
       table.dispatch({ type: 'setFilter', key: filterKey, value });
       table.dispatch({ type: 'setPage', page: 1 }); // 筛选变化回第 1 页
@@ -127,7 +139,7 @@ export function dataTable<T extends { id: RowKey }>(props: DataTableProps<T>): H
 
   return h(
     'section',
-    { class: 'ua-table' },
+    { class: 'ua-table', 'aria-busy': () => String(busy()) },
     h(
       'div',
       { class: 'ua-table-toolbar' },
@@ -138,9 +150,9 @@ export function dataTable<T extends { id: RowKey }>(props: DataTableProps<T>): H
     h(
       'div',
       { class: 'ua-pager' },
-      button({ label: '上一页', variant: 'ghost', onClick: () => table.dispatch({ type: 'setPage', page: info().page - 1 }) }),
+      button({ label: '上一页', variant: 'ghost', disabled: props.loading, onClick: () => table.dispatch({ type: 'setPage', page: info().page - 1 }) }),
       h('span', { class: 'ua-page-info' }, () => `第 ${info().page} / ${info().totalPages} 页 · 共 ${visible().total} 行`),
-      button({ label: '下一页', variant: 'ghost', onClick: () => table.dispatch({ type: 'setPage', page: info().page + 1 }) }),
+      button({ label: '下一页', variant: 'ghost', disabled: props.loading, onClick: () => table.dispatch({ type: 'setPage', page: info().page + 1 }) }),
     ),
   );
 }

packages/skin/ui/src/types.ts

@@ -37,6 +37,7 @@ export interface DataTableProps<T> {
   pageSize?: number;       // 每页行数；缺省 5
   selectable?: boolean;    // 是否启用行选择列（含全选三态与已选计数）；缺省 false
   page?: Signal<number>;   // 受控页码信号：与内核分页双向同步，可接独立 pagination 组件联动
+  loading?: boolean | Signal<boolean>; // 加载态：为真时数据行换成骨架行，筛选与翻页禁用
 }
 
 /*** 选项条目：select / radioGroup / tabs 共用的选项形状 ***/