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

.ua/backlog.json

@@ -80,6 +80,14 @@
       "acceptance": "新增 accordion.ts：items（value/title/content/disabled）+ 单开（手风琴）与 multiple 多开，active 信号可选受控，标题为原生 button（aria-expanded/controls + region 关联），内容区 0fr→1fr 过渡且 reduced-motion 静态化；导出 / manifest / 文档 / llms-full.txt / demo 同步；npm run check 全绿",
       "status": "done",
       "notes": "contents 走 appendChild 既有语义，字符串/DOM/响应式函数通吃；未传 active 时内部 signal<string[]> 持有展开集合，受控模式只认 active 单开；CSS 用 grid-template-rows 0fr→1fr 过渡免测量，reduced-motion 列表补 ua-acc-*；demo 新增 sec-accordion（多开 + 禁用面板）"
+    },
+    {
+      "id": "d04",
+      "title": "dataTable 接加载态（骨架行 + 交互禁用）",
+      "motivation": "异步取数时表格直接闪空状态，缺少 loading 反馈；skeleton 已就位但未与表格打通",
+      "acceptance": "DataTableProps 新增 loading?: boolean | Signal<boolean>；为真时表体渲染骨架行（行数随 pageSize，列数含选择列）、筛选输入与上下页按钮禁用、容器 aria-busy=true；demo 加开关演示；manifest/文档/llms-full.txt 同步；npm run check 全绿",
+      "status": "done",
+      "notes": "busy() 读取器兼顾布尔与信号（信号在 renderList 内调用可被依赖收集）；骨架行数量 Math.min(pageSize,6) 防过长；加载态优先于数据判断，避免闪出旧行；disabled 仍走 props 透传，零新增辅助组件"
     }
   ]
 }

.ua/index.json

@@ -1,6 +1,6 @@
 {
   "$schema": "ui-arch-registry-index/0.1",
-  "generatedAt": "2026-10-23T08:47:49.411Z",
+  "generatedAt": "2026-10-23T08:48:29.721Z",
   "repoRoot": ".",
   "packages": [
     {
@@ -164,7 +164,7 @@
           "modal(props, ...children)：弹窗，open 信号驱动显隐，Esc / 遮罩 / × 关闭",
           "form(props, items)：表单容器，布局 + 聚合校验，全部通过才触发 onSubmit",
           "formItem(props, control)：表单字段，label + 必填红星 + 规则校验 + 错误区，返回 { el, validate } 句柄",
-          "dataTable(props)：数据表格，粘性表头 / 行选择（全选三态）/ 排序 / 筛选 / 分页 / 空状态，内核为 table-core"
+          "dataTable(props)：数据表格，粘性表头 / 行选择（全选三态）/ 排序 / 筛选 / 分页 / 空状态；loading 为真时数据行换骨架行且筛选/翻页禁用，内核为 table-core"
         ],
         "keyTypes": [
           "ButtonProps",
@@ -975,6 +975,11 @@
                 "n": "page",
                 "t": "Signal<number>",
                 "d": "受控页码信号：与内核分页双向同步，传同一个信号给独立 pagination 组件即可联动"
+              },
+              {
+                "n": "loading",
+                "t": "boolean | Signal<boolean>",
+                "d": "加载态：为真时数据行换成骨架行（行数随 pageSize），筛选输入与翻页按钮临时禁用，容器带 aria-busy"
               }
             ],
             "example": "dataTable({ data: users, selectable: true, columns: [{ key: 'name', header: '姓名', sortable: true }], pageSize: 5 })",
@@ -985,6 +990,7 @@
               "选中行用低视觉比重样式（淡色底 + 弱化文字），选择状态存 rowKey，跨页不丢失",
               "工具栏输入框即筛选，输入即时过滤并回第 1 页；无匹配时显示空状态行",
               "表头粘性固定（滚动容器 max-height 420px），斑马纹 + 悬停高亮由 CSS 提供",
+              "数据在途时传 loading（布尔或信号）：表格体换成骨架行、筛选与翻页禁用，返回后置回 false 即恢复",
               "需要独立分页器联动时传 page 信号：const page = signal(1)，dataTable({ page }) 与 pagination({ page }) 共用"
             ]
           }

.ua/iterations.log

@@ -8,3 +8,4 @@
 {"time": "2026-10-23T16:55:00+08:00", "id": "d01", "result": "done", "summary": "新增下拉菜单 menu：触发器 + 自绘弹层，disabled/danger/divider 条目，↑↓ 环形导航 + Esc 回焦，reduced-motion 兜底；manifest/llms-full/demo 同步，check 全绿"}
 {"time": "2026-10-23T17:02:00+08:00", "id": "d02", "result": "done", "summary": "select/radioGroup 补 disabled（布尔|信号），并修复 select 根节点缺 ua-open 导致箭头不旋转的既有缺陷；CSS :has() 行级弱化；demo/manifest/llms 同步，check 全绿"}
 {"time": "2026-10-23T16:47:56+08:00", "id": "d03", "result": "done", "summary": "新增折叠面板 accordion：单开/多开 + active 受控 + 禁用面板，grid 行高 0fr→1fr 过渡免测量，aria 关联完整；manifest/llms/demo 同步，check 全绿"}
+{"time": "2026-10-23T16:48:36+08:00", "id": "d04", "result": "done", "summary": "dataTable 新增 loading（布尔|信号）：表体换骨架行、筛选与翻页禁用、aria-busy；demo 加开关，manifest/llms 同步，check 全绿"}

apps/demo/main.ts

@@ -73,6 +73,9 @@ const formResult = signal('');
 // —— 分页联动状态：dataTable 与独立 pagination 共用同一页码信号 ——
 const tablePage = signal(1);
 
+// —— 表格加载态：切换后数据行变骨架行，筛选与翻页临时禁用 ——
+const tableLoading = signal(false);
+
 // —— 菜单选中结果：演示 onSelect 回调 ——
 const menuPick = signal('');
 
@@ -255,13 +258,14 @@ const app = h(
     card({ title: '用户表' }, dataTable({
       data: users,
       selectable: true,
+      loading: tableLoading,
       columns: [
         { key: 'name', header: '姓名', sortable: true },
         { key: 'age', header: '年龄', sortable: true },
         { key: 'city', header: '城市' },
       ],
       pageSize: 5,
-    })),
+    }), h('div', { class: 'row' }, switchButton({ label: '加载态', checked: tableLoading }))),
     card(
       { title: '独立分页器联动（pageSize 3，共用页码信号）' },
       dataTable({

llms-full.txt

@@ -1,6 +1,6 @@
 # @ui-arch 组件库 Agent 文档（无图形版）
 
-> 自动生成于 2026-10-23T08:47:49.411Z，数据源：各包 ua.manifest.json，勿手改。人类版文档站：apps/docs/index.html。
+> 自动生成于 2026-10-23T08:48:29.721Z，数据源：各包 ua.manifest.json，勿手改。人类版文档站：apps/docs/index.html。
 > 组件 = 普通函数，传 props 返回 DOM；状态用 signal 双向绑定：读 signal() 写 signal(v)。
 
 ## 快速上手
@@ -544,6 +544,7 @@ const name = signal(''); const f = form({ onSubmit: submit }, [formItem({ label:
 - pageSize（默认 5）：number —— 每页行数；缺省 5
 - selectable（默认 false）：boolean —— 启用行选择列：全选三态（含半选）、行 checkbox、已选计数；缺省 false
 - page：Signal<number> —— 受控页码信号：与内核分页双向同步，传同一个信号给独立 pagination 组件即可联动
+- loading：boolean | Signal<boolean> —— 加载态：为真时数据行换成骨架行（行数随 pageSize），筛选输入与翻页按钮临时禁用，容器带 aria-busy
 
 示例：
 
@@ -559,7 +560,8 @@ dataTable({ data: users, selectable: true, columns: [{ key: 'name', header: '姓
 4. 选中行用低视觉比重样式（淡色底 + 弱化文字），选择状态存 rowKey，跨页不丢失
 5. 工具栏输入框即筛选，输入即时过滤并回第 1 页；无匹配时显示空状态行
 6. 表头粘性固定（滚动容器 max-height 420px），斑马纹 + 悬停高亮由 CSS 提供
-7. 需要独立分页器联动时传 page 信号：const page = signal(1)，dataTable({ page }) 与 pagination({ page }) 共用
+7. 数据在途时传 loading（布尔或信号）：表格体换成骨架行、筛选与翻页禁用，返回后置回 false 即恢复
+8. 需要独立分页器联动时传 page 信号：const page = signal(1)，dataTable({ page }) 与 pagination({ page }) 共用
 
 现场演示：apps/docs/demo.html#sec-table
 
@@ -587,7 +589,7 @@ API 速览：
 - modal(props, ...children)：弹窗，open 信号驱动显隐，Esc / 遮罩 / × 关闭
 - form(props, items)：表单容器，布局 + 聚合校验，全部通过才触发 onSubmit
 - formItem(props, control)：表单字段，label + 必填红星 + 规则校验 + 错误区，返回 { el, validate } 句柄
-- dataTable(props)：数据表格，粘性表头 / 行选择（全选三态）/ 排序 / 筛选 / 分页 / 空状态，内核为 table-core
+- dataTable(props)：数据表格，粘性表头 / 行选择（全选三态）/ 排序 / 筛选 / 分页 / 空状态；loading 为真时数据行换骨架行且筛选/翻页禁用，内核为 table-core
 
 一行用法：
 

llms.txt

@@ -69,7 +69,7 @@
   - modal(props, ...children)：弹窗，open 信号驱动显隐，Esc / 遮罩 / × 关闭
   - form(props, items)：表单容器，布局 + 聚合校验，全部通过才触发 onSubmit
   - formItem(props, control)：表单字段，label + 必填红星 + 规则校验 + 错误区，返回 { el, validate } 句柄
-  - dataTable(props)：数据表格，粘性表头 / 行选择（全选三态）/ 排序 / 筛选 / 分页 / 空状态，内核为 table-core
+  - dataTable(props)：数据表格，粘性表头 / 行选择（全选三态）/ 排序 / 筛选 / 分页 / 空状态；loading 为真时数据行换骨架行且筛选/翻页禁用，内核为 table-core
 - 用法: `const checked = signal(false); checkbox({ label: '同意', checked }); const open = signal(false); modal({ title: '确认', open }, '内容')`
 - 约定: 皮肤不持有业务状态，一律委托 headless 内核或调用方信号
 - 约定: 表单类组件统一约定：*Props.value/checked/active 为 Signal 双向绑定，onChange/onInput 为回调

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 共用的选项形状 ***/

packages/skin/ui/ua.manifest.json

@@ -35,7 +35,7 @@
       "modal(props, ...children)：弹窗，open 信号驱动显隐，Esc / 遮罩 / × 关闭",
       "form(props, items)：表单容器，布局 + 聚合校验，全部通过才触发 onSubmit",
       "formItem(props, control)：表单字段，label + 必填红星 + 规则校验 + 错误区，返回 { el, validate } 句柄",
-      "dataTable(props)：数据表格，粘性表头 / 行选择（全选三态）/ 排序 / 筛选 / 分页 / 空状态，内核为 table-core"
+      "dataTable(props)：数据表格，粘性表头 / 行选择（全选三态）/ 排序 / 筛选 / 分页 / 空状态；loading 为真时数据行换骨架行且筛选/翻页禁用，内核为 table-core"
     ],
     "keyTypes": [
       "ButtonProps",
@@ -846,6 +846,11 @@
             "n": "page",
             "t": "Signal<number>",
             "d": "受控页码信号：与内核分页双向同步，传同一个信号给独立 pagination 组件即可联动"
+          },
+          {
+            "n": "loading",
+            "t": "boolean | Signal<boolean>",
+            "d": "加载态：为真时数据行换成骨架行（行数随 pageSize），筛选输入与翻页按钮临时禁用，容器带 aria-busy"
           }
         ],
         "example": "dataTable({ data: users, selectable: true, columns: [{ key: 'name', header: '姓名', sortable: true }], pageSize: 5 })",
@@ -856,6 +861,7 @@
           "选中行用低视觉比重样式（淡色底 + 弱化文字），选择状态存 rowKey，跨页不丢失",
           "工具栏输入框即筛选，输入即时过滤并回第 1 页；无匹配时显示空状态行",
           "表头粘性固定（滚动容器 max-height 420px），斑马纹 + 悬停高亮由 CSS 提供",
+          "数据在途时传 loading（布尔或信号）：表格体换成骨架行、筛选与翻页禁用，返回后置回 false 即恢复",
           "需要独立分页器联动时传 page 信号：const page = signal(1)，dataTable({ page }) 与 pagination({ page }) 共用"
         ]
       }