iter(g330): 表格列支持自定义单元格渲染
This commit is contained in:
@@ -3356,6 +3356,15 @@
|
||||
"motivation": "库里有 textField / textarea,却没有「就地改一段已有文字」的基础件:看板标题改名、表格单元格、详情页字段这类场景只能把输入框常驻在页面上(视觉噪音大),或者自己写一套「点击变输入框 + Enter 提交 + Esc 取消」——每个业务都重写一遍,行为还不一致(多数忘了 Esc 不落值、忘了失焦提交、忘了校验失败要留在编辑态)。",
|
||||
"acceptance": "① 新增 editable 组件:静止态是可点文字按钮(hover 才露虚线暗示),点击 / 回车进编辑态,Enter 提交、Esc 取消(绝不写回)、失焦提交,多行模式 Ctrl/Cmd+Enter 提交、Enter 换行;② validate 返回文案时保持编辑态、控件 aria-invalid + 下方 role=alert 文案(与 form 同口径);③ disabled 支持布尔与信号双口径;外部改值只同步静止态,不打断正在编辑的草稿;④ 样式只消费 --ua-* 令牌(禁新增硬编码阴影 / 时长 / 字号),audit:visual 计数不涨;⑤ 十个落点齐全(实现 / 类型 / 导出 / 样式 / 清单 exports / docs.components 五步 / demo 段 / README 清单与分组 / 计数同步),组件数 89 → 90,npm run check 全绿。",
|
||||
"notes": ""
|
||||
},
|
||||
{
|
||||
"id": "g330",
|
||||
"domain": "tune",
|
||||
"status": "open",
|
||||
"title": "表格单元格支持自定义渲染:标签 / 头像 / 行内编辑塞得进去",
|
||||
"motivation": "dataTable 的单元格只有 format 一条路(纯文本),状态列只能是「已通过」四个字而不是 tag,头像列只能是 URL,editable 刚做出来却放不进表格——写实业务里表格是主战场,这一格塞不进组件,整套组件库在详情页能用、在列表页就退化成纯文本。",
|
||||
"acceptance": "① TableColumn 增可选 render: (row) => unknown:传了即取代 format 决定这一格画什么,排序 / 筛选 / 导出仍按原值走;② 自定义单元格拦下点击冒泡,点格里的按钮不会顺带触发 onRowClick(整行可点时尤其重要);③ 不传 render 的列行为零变化(format 走 textContent,天然免注入);④ manifest 的列定义与步骤同步说明,demo 城市列改成标签渲染并在段落里点明格内点击不触发整行;⑤ npm run check 全绿。",
|
||||
"notes": ""
|
||||
}
|
||||
]
|
||||
}
|
||||
|
||||
+3
-2
@@ -1,6 +1,6 @@
|
||||
{
|
||||
"$schema": "ui-arch-registry-index/0.1",
|
||||
"generatedAt": "2026-10-26T17:59:51.593Z",
|
||||
"generatedAt": "2026-10-26T18:02:35.274Z",
|
||||
"repoRoot": ".",
|
||||
"packages": [
|
||||
{
|
||||
@@ -2067,7 +2067,7 @@
|
||||
"n": "columns",
|
||||
"t": "ColumnDef<T>[]",
|
||||
"r": 1,
|
||||
"d": "列定义:内核字段 { key, header?, sortable?, width? } + 皮肤字段 { align?, format? };width 数字为固定像素,'flex' 自适应"
|
||||
"d": "列定义:内核字段 { key, header?, sortable?, width? } + 皮肤字段 { align?, format?, render? };width 数字为固定像素,'flex' 自适应"
|
||||
},
|
||||
{
|
||||
"n": "filterKey",
|
||||
@@ -4821,6 +4821,7 @@
|
||||
"点文字进编辑态:Enter 提交、Esc 取消、点别处(失焦)提交;多行模式要 Ctrl / Cmd + Enter 才提交,Enter 留给换行——否则多行里连换行都写不了",
|
||||
"validate 返回文案时保留编辑态并标红:控件带 aria-invalid、下方 role=alert 出文案,与 form 的出错口径一致,用户改对再提交即可",
|
||||
"disabled 接受布尔或信号:禁用时静止态是灰字、点了不进编辑,适合权限只读的场景(要完全不给「可改」暗示就直接渲染文字)",
|
||||
"单元格里要塞组件(editable 就地编辑、tag 状态标记、avatar 头像、progress 完成度)时给列传 render: (row) => 节点:它直接取代 format 决定这一格画什么,排序与筛选仍按 dataKey 的原值走;格内的点击会被拦下,不会顺带触发 onRowClick(点单元格里的按钮不该等于点整行)",
|
||||
"什么时候别用:长表单(用 form + textField,editable 没有 label 排版与必填标记)、需要撤销栈的富文本,以及值会被频繁外部改写的地方(编辑中不跟随外部更新,是有意的取舍)"
|
||||
]
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user