iter(g329): 新增 editable 行内编辑

This commit is contained in:
HIsheR
2026-10-27 02:01:04 +08:00
parent 309cb795de
commit 0768a34801
13 changed files with 286 additions and 10 deletions
+9
View File
@@ -3347,6 +3347,15 @@
"motivation": "accent 有 --ua-color-tint-accent(亮 10% / 暗 14%),语义三色却没有对应令牌,15 处淡底全靠手写 color-mix:同一组 toast / tag 里 info 走令牌(透明叠加)、success / warning / danger 走「与页面底混色」(不透明),四种语义档的底其实两套口径;手写浓度也无法被门禁守住——accent 那档被 audit:surface 抓到过暗色几乎看不见,语义三色同样没有栅栏。",
"acceptance": "① tokens.css 新增 --ua-color-tint-danger / -success / -warning(亮色 var(--ua-alpha-soft),暗色 14%,与 accent 分档同构),tokens.json 同步三键(verify 的名字与值双源校验要过);② ui.css 15 处手写语义淡底(含与页面底混色的 6 处)统一换成令牌,四种语义档只剩一套口径;③ audit:surface 阶梯新增「表面 → 危险/成功/警告淡底」三档(阈值 1.04),四套主题全部实测达标;④ audit:visual 混色浓度计数不涨;⑤ npm run check 全绿。",
"notes": ""
},
{
"id": "g329",
"domain": "new",
"status": "open",
"title": "新增 editable 行内编辑:改个标题不必整块塞进输入框",
"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": ""
}
]
}
+58 -2
View File
@@ -1,6 +1,6 @@
{
"$schema": "ui-arch-registry-index/0.1",
"generatedAt": "2026-10-26T17:55:42.939Z",
"generatedAt": "2026-10-26T17:59:51.593Z",
"repoRoot": ".",
"packages": [
{
@@ -233,7 +233,8 @@
"progressRing(props):环形进度,SVG 双圆靠 dasharray 画弧 + 中心百分比,value 可传信号自动重绘",
"noticeBar(props):单行通知条,语义色 + 左侧符号 + 可选跑马灯与关闭,适合页顶常驻播报",
"sortableList(props):拖拽排序列表,整行可拖 + Alt+↑↓ 键盘搬位,返回 { el, move, order } 句柄",
"masonry(props):瀑布流多列布局,列宽自适应或固定列数,卡片不被拆到两列"
"masonry(props):瀑布流多列布局,列宽自适应或固定列数,卡片不被拆到两列",
"editable(props):行内编辑,静止态是文字、点一下就地变输入框,Enter 提交 / Esc 取消 / 失焦提交"
],
"keyTypes": [
"ButtonProps",
@@ -4767,6 +4768,61 @@
"列高不等才是瀑布流的价值所在(图片墙、评论流、看板):等高内容请用 grid,瀑布流会把等高卡片铺成奇怪的错位",
"什么时候别用:需要严格的行对齐(表格化数据)、需要按列独立滚动(用 splitter / 多个 virtualList),以及首屏内容需要按阅读顺序严格横向(多列布局是竖向填充,读屏顺序与视觉列序一致但不等同于行序)"
]
},
{
"id": "editable",
"title": "行内编辑 Editable",
"demo": "sec-editable",
"props": [
{
"n": "value",
"t": "Signal<string>",
"r": 1,
"d": "展示值,双向绑定:只有提交才写回,Esc 取消绝不落值"
},
{
"n": "placeholder",
"t": "string",
"df": "'点击填写'",
"d": "空值时的占位文案,颜色走辅助文字档"
},
{
"n": "label",
"t": "string",
"df": "'编辑'",
"d": "读屏用的字段名,作静止态按钮 aria-label 的前缀(如「标题:季度目标」)"
},
{
"n": "multiline",
"t": "boolean",
"d": "多行模式(textarea):Enter 换行,Ctrl / Cmd + Enter 才提交;缺省单行"
},
{
"n": "disabled",
"t": "boolean | Signal<boolean>",
"d": "禁用只读,布尔与信号双口径;点了也不进编辑态"
},
{
"n": "validate",
"t": "(v: string) => string | null",
"k": 1,
"d": "提交校验:返回文案即拒绝提交、保持编辑态并标红(aria-invalid + role=alert),返回 null 表示通过"
},
{
"n": "onCommit",
"t": "(v: string) => void",
"k": 1,
"d": "提交回调,值已写回信号之后触发;取消不触发"
}
],
"example": "const title = signal('季度目标'); editable({ value: title, label: '标题', validate: (v) => (v ? null : '标题不能为空'), onCommit: (v) => toast.success('已保存:' + v) })",
"steps": [
"传一个 Signal<string> 作唯一数据源:组件只在提交时写回,取消路径一个字都不改,「改了没保存」的中间态不会污染业务状态",
"点文字进编辑态:Enter 提交、Esc 取消、点别处(失焦)提交;多行模式要 Ctrl / Cmd + Enter 才提交,Enter 留给换行——否则多行里连换行都写不了",
"validate 返回文案时保留编辑态并标红:控件带 aria-invalid、下方 role=alert 出文案,与 form 的出错口径一致,用户改对再提交即可",
"disabled 接受布尔或信号:禁用时静止态是灰字、点了不进编辑,适合权限只读的场景(要完全不给「可改」暗示就直接渲染文字)",
"什么时候别用:长表单(用 form + textField,editable 没有 label 排版与必填标记)、需要撤销栈的富文本,以及值会被频繁外部改写的地方(编辑中不跟随外部更新,是有意的取舍)"
]
}
]
},