diff --git a/.ua/backlog.json b/.ua/backlog.json index 9c7ceec..2b708e1 100644 --- a/.ua/backlog.json +++ b/.ua/backlog.json @@ -1476,6 +1476,14 @@ "acceptance": "position 新增 flipSide(四向判定,水平按宽度算左右空间),tooltip placement 支持 left/right 并复用自动翻转;CSS 四向定位 + 出场位移分离;文档 props/steps 与演示同步;npm run check 全绿", "notes": "自补:既有组件可用性细节", "status": "done" + }, + { + "id": "g140", + "title": "表格支持整行点击", + "motivation": "「点行进详情」是表格最常用交互,dataTable 只能把跳转塞进某一列的按钮:点击区域小、键盘不可达,行本身对读屏也只是文本", + "acceptance": "dataTable 新增 onRowClick:传了则该行 tabindex=0 并响应点击 / Enter / 空格,未传时行为与现在完全一致(不进 Tab 序列);文档 props/steps 与演示同步;单文件仍 ≤200 行;npm run check 全绿", + "notes": "自补:既有组件可用性细节(行数恰好压到 200 行上限,靠合并注释行达标)", + "status": "open" } ] } diff --git a/.ua/index.json b/.ua/index.json index 5674175..79037d7 100644 --- a/.ua/index.json +++ b/.ua/index.json @@ -1,6 +1,6 @@ { "$schema": "ui-arch-registry-index/0.1", - "generatedAt": "2026-10-26T07:32:30.909Z", + "generatedAt": "2026-10-26T07:33:59.912Z", "repoRoot": ".", "packages": [ { @@ -1922,6 +1922,12 @@ "n": "exportName", "t": "string", "d": "导出文件名;缺省 table.csv" + }, + { + "n": "onRowClick", + "t": "(row: T) => void", + "k": 1, + "d": "整行点击 / Enter / 空格的回调;传了行才可聚焦可点(未传时行保持纯展示,不抢 Tab 焦点)" } ], "example": "dataTable({ data: users, selectable: true, columns: [{ key: 'name', header: '姓名', sortable: true }], pageSize: 5 })", @@ -1938,7 +1944,8 @@ "需要独立分页器联动时传 page 信号:const page = signal(1),dataTable({ page }) 与 pagination({ page }) 共用", "需要批量操作时传 selected 信号:内部勾选实时写回,外部置空或赋值即同步整表(跨页保留,按 rowKey 存)", "可排序表头的 aria-sort 跟随排序态同步(ascending / descending / none),读屏能直接播报当前列序,箭头只是视觉补充", - "需要导出时开 exportable:按钮导的是筛选+排序后的全量行,与当前页无关,单元格按 format 输出" + "需要导出时开 exportable:按钮导的是筛选+排序后的全量行,与当前页无关,单元格按 format 输出", + "整行可点(进详情、选中一行做后续操作)传 onRowClick:行会变成可聚焦项,Enter / 空格与点击等价;不传时行不进 Tab 序列,纯展示表不会被读屏当成按钮" ] }, { diff --git a/apps/demo/main.ts b/apps/demo/main.ts index c39b155..35119aa 100644 --- a/apps/demo/main.ts +++ b/apps/demo/main.ts @@ -1214,6 +1214,7 @@ const content = h( ], pageSize: 5, selected: picked, + onRowClick: (row) => toast.info(`打开 ${row.name} 的详情`), // 整行可点:Tab 进入 + Enter 等价 }), h( 'div', { class: 'row' }, diff --git a/llms-full.txt b/llms-full.txt index ebe30bf..a88243e 100644 --- a/llms-full.txt +++ b/llms-full.txt @@ -1,6 +1,6 @@ # @ui-arch 组件库 Agent 文档(无图形版) -> 自动生成于 2026-10-26T07:32:30.909Z,数据源:各包 ua.manifest.json,勿手改。人类版文档站:apps/docs/index.html。 +> 自动生成于 2026-10-26T07:33:59.912Z,数据源:各包 ua.manifest.json,勿手改。人类版文档站:apps/docs/index.html。 > 组件 = 普通函数,传 props 返回 DOM;状态用 signal 双向绑定:读 signal() 写 signal(v)。 ## 快速上手 @@ -975,6 +975,7 @@ const name = signal(''); const f = form({ onSubmit: submit }, [formItem({ label: - selected:Signal —— 受控选中行信号:与内核选择双向同步(内容比较,不来回派发),供批量操作读取/改写 - exportable:boolean —— 工具栏显示「导出 CSV」:导出筛选 + 排序后的全量行(不分页);缺省 false - exportName:string —— 导出文件名;缺省 table.csv +- onRowClick(回调):(row: T) => void —— 整行点击 / Enter / 空格的回调;传了行才可聚焦可点(未传时行保持纯展示,不抢 Tab 焦点) 示例: @@ -997,6 +998,7 @@ dataTable({ data: users, selectable: true, columns: [{ key: 'name', header: '姓 11. 需要批量操作时传 selected 信号:内部勾选实时写回,外部置空或赋值即同步整表(跨页保留,按 rowKey 存) 12. 可排序表头的 aria-sort 跟随排序态同步(ascending / descending / none),读屏能直接播报当前列序,箭头只是视觉补充 13. 需要导出时开 exportable:按钮导的是筛选+排序后的全量行,与当前页无关,单元格按 format 输出 +14. 整行可点(进详情、选中一行做后续操作)传 onRowClick:行会变成可聚焦项,Enter / 空格与点击等价;不传时行不进 Tab 序列,纯展示表不会被读屏当成按钮 现场演示:apps/docs/demo.html#sec-table diff --git a/packages/skin/ui/src/dataTable.ts b/packages/skin/ui/src/dataTable.ts index 9cc2d87..ffb748c 100644 --- a/packages/skin/ui/src/dataTable.ts +++ b/packages/skin/ui/src/dataTable.ts @@ -151,15 +151,17 @@ export function dataTable(props: DataTableProps): H return h('td', col.align ? { class: `ua-align-${col.align}` } : null, text); }); if (selectable) { - const check = h('input', { type: 'checkbox', class: 'ua-checkbox' }) as HTMLInputElement; + const check = h('input', { type: 'checkbox', class: 'ua-checkbox' }) as HTMLInputElement; // 受控:选中态由内核 selection 决定 check.checked = selected; check.addEventListener('change', () => table.dispatch({ type: 'toggleSelect', key })); cells.unshift(h('td', { class: 'ua-cell-check' }, check)); } - return h('tr', selected ? { class: 'ua-row-selected' } : null, ...cells); + const rowProps = props.onRowClick // 传了才把整行做成可聚焦按钮语义(Tab 进入、Enter / 空格触发) + ? { tabindex: '0', class: `ua-row-clickable${selected ? ' ua-row-selected' : ''}`, onclick: () => props.onRowClick?.(row), onkeydown: (e: KeyboardEvent) => { if (e.key === 'Enter' || e.key === ' ') { e.preventDefault(); props.onRowClick?.(row); } } } + : selected ? { class: 'ua-row-selected' } : null; + return h('tr', rowProps, ...cells); }); }); - // —— 列宽:数字落成 固定宽度,'flex' 或未设置交给浏览器自适应 —— const cols = props.columns.map((col) => (typeof col.width === 'number' ? h('col', { style: `width:${col.width}px` }) : h('col'))); // 每个数据列一个 ,拖拽直接改它 const colgroup = h('colgroup', null, selectable ? h('col', { style: 'width:44px' }) : null, ...cols); diff --git a/packages/skin/ui/src/types.ts b/packages/skin/ui/src/types.ts index 862a417..bc54bab 100644 --- a/packages/skin/ui/src/types.ts +++ b/packages/skin/ui/src/types.ts @@ -67,6 +67,7 @@ export interface DataTableProps { selected?: Signal; // 受控选中行信号:与内核选择双向同步,供批量操作读取 exportable?: boolean; // 工具栏显示导出按钮:导出筛选 + 排序后的全量行(不分页);缺省 false exportName?: string; // 导出文件名;缺省 table.csv + onRowClick?: (row: T) => void; // 整行点击 / Enter / 空格的回调;传了行才可聚焦(未传时行不可交互) } /*** 选项条目:select / radioGroup / tabs / segmented 共用的选项形状 ***/ diff --git a/packages/skin/ui/ua.manifest.json b/packages/skin/ui/ua.manifest.json index edeb1a8..fbef8bd 100644 --- a/packages/skin/ui/ua.manifest.json +++ b/packages/skin/ui/ua.manifest.json @@ -1793,6 +1793,12 @@ "n": "exportName", "t": "string", "d": "导出文件名;缺省 table.csv" + }, + { + "n": "onRowClick", + "t": "(row: T) => void", + "k": 1, + "d": "整行点击 / Enter / 空格的回调;传了行才可聚焦可点(未传时行保持纯展示,不抢 Tab 焦点)" } ], "example": "dataTable({ data: users, selectable: true, columns: [{ key: 'name', header: '姓名', sortable: true }], pageSize: 5 })", @@ -1809,7 +1815,8 @@ "需要独立分页器联动时传 page 信号:const page = signal(1),dataTable({ page }) 与 pagination({ page }) 共用", "需要批量操作时传 selected 信号:内部勾选实时写回,外部置空或赋值即同步整表(跨页保留,按 rowKey 存)", "可排序表头的 aria-sort 跟随排序态同步(ascending / descending / none),读屏能直接播报当前列序,箭头只是视觉补充", - "需要导出时开 exportable:按钮导的是筛选+排序后的全量行,与当前页无关,单元格按 format 输出" + "需要导出时开 exportable:按钮导的是筛选+排序后的全量行,与当前页无关,单元格按 format 输出", + "整行可点(进详情、选中一行做后续操作)传 onRowClick:行会变成可聚焦项,Enter / 空格与点击等价;不传时行不进 Tab 序列,纯展示表不会被读屏当成按钮" ] }, { diff --git a/packages/skin/ui/ui.css b/packages/skin/ui/ui.css index 4a77ba6..b110d0b 100644 --- a/packages/skin/ui/ui.css +++ b/packages/skin/ui/ui.css @@ -4387,3 +4387,15 @@ h5.ua-type-title { font-size: var(--ua-font-size-md); } .ua-datepicker-day.is-in-range:hover { background: color-mix(in srgb, var(--ua-color-accent) 20%, transparent); } + +/* —— 可点击行:指针手型 + 键盘聚焦环,与选中行底色叠加不冲突 —— */ +.ua-row-clickable { + cursor: pointer; +} +.ua-row-clickable:hover td { + background: color-mix(in srgb, var(--ua-color-accent) 8%, transparent); +} +.ua-row-clickable:focus-visible { + outline: 2px solid var(--ua-color-accent); + outline-offset: -2px; /* 环画在行内,避免被表格滚动容器裁掉 */ +}