diff --git a/.ua/backlog.json b/.ua/backlog.json index ca328b1..7172422 100644 --- a/.ua/backlog.json +++ b/.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 持有展开集合,受控模式只认 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;为真时表体渲染骨架行(行数随 pageSize,列数含选择列)、筛选输入与上下页按钮禁用、容器 aria-busy=true;demo 加开关演示;manifest/文档/llms-full.txt 同步;npm run check 全绿", + "status": "done", + "notes": "busy() 读取器兼顾布尔与信号(信号在 renderList 内调用可被依赖收集);骨架行数量 Math.min(pageSize,6) 防过长;加载态优先于数据判断,避免闪出旧行;disabled 仍走 props 透传,零新增辅助组件" } ] } diff --git a/.ua/index.json b/.ua/index.json index 8cb044a..d59473b 100644 --- a/.ua/index.json +++ b/.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", "d": "受控页码信号:与内核分页双向同步,传同一个信号给独立 pagination 组件即可联动" + }, + { + "n": "loading", + "t": "boolean | Signal", + "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 }) 共用" ] } diff --git a/.ua/iterations.log b/.ua/iterations.log index de4bc1f..2b78f10 100644 --- a/.ua/iterations.log +++ b/.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 全绿"} diff --git a/apps/demo/main.ts b/apps/demo/main.ts index fd310d1..8dface7 100644 --- a/apps/demo/main.ts +++ b/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({ diff --git a/llms-full.txt b/llms-full.txt index 4831808..cc34e06 100644 --- a/llms-full.txt +++ b/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 —— 受控页码信号:与内核分页双向同步,传同一个信号给独立 pagination 组件即可联动 +- loading:boolean | Signal —— 加载态:为真时数据行换成骨架行(行数随 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 一行用法: diff --git a/llms.txt b/llms.txt index 2d3a2d8..1f2bac2 100644 --- a/llms.txt +++ b/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 为回调 diff --git a/packages/skin/ui/src/dataTable.ts b/packages/skin/ui/src/dataTable.ts index b5c4077..230bba5 100644 --- a/packages/skin/ui/src/dataTable.ts +++ b/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(props: DataTableProps): 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(props: DataTableProps): 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(props: DataTableProps): 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(props: DataTableProps): 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(props: DataTableProps): 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 }) }), ), ); } diff --git a/packages/skin/ui/src/types.ts b/packages/skin/ui/src/types.ts index 3a4534f..3b7d040 100644 --- a/packages/skin/ui/src/types.ts +++ b/packages/skin/ui/src/types.ts @@ -37,6 +37,7 @@ export interface DataTableProps { pageSize?: number; // 每页行数;缺省 5 selectable?: boolean; // 是否启用行选择列(含全选三态与已选计数);缺省 false page?: Signal; // 受控页码信号:与内核分页双向同步,可接独立 pagination 组件联动 + loading?: boolean | Signal; // 加载态:为真时数据行换成骨架行,筛选与翻页禁用 } /*** 选项条目:select / radioGroup / tabs 共用的选项形状 ***/ diff --git a/packages/skin/ui/ua.manifest.json b/packages/skin/ui/ua.manifest.json index 696df86..a8d0a16 100644 --- a/packages/skin/ui/ua.manifest.json +++ b/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", "d": "受控页码信号:与内核分页双向同步,传同一个信号给独立 pagination 组件即可联动" + }, + { + "n": "loading", + "t": "boolean | Signal", + "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 }) 共用" ] }