iter(g311): 骨架文本行高对齐正文行盒

This commit is contained in:
HIsheR
2026-10-27 00:41:42 +08:00
parent 0c5bf366f4
commit f794475623
5 changed files with 17 additions and 5 deletions
+9
View File
@@ -3185,6 +3185,15 @@
"motivation": "多选下拉只能逐项点或按退格删标签,选项一多就是体力活;transfer 早就有三态全选框,multiSelect 这个更常用的组件反而没有,用户只能「先搜再一个个点」。", "motivation": "多选下拉只能逐项点或按退格删标签,选项一多就是体力活;transfer 早就有三态全选框,multiSelect 这个更常用的组件反而没有,用户只能「先搜再一个个点」。",
"acceptance": "① 新增 selectAll 入参:弹层顶部一行「全选(已选/可选)」,全选 ✓、部分选中显 –、再点即清空这批;② 只作用于当前过滤结果,先搜再全选=按条件批量选;③ 到 max 时补满即停,不静默超选;④ 键盘可达:全选行占 active -1 号位,↑↓ 能走到、Enter 触发;⑤ manifest 参数表与手把手、demo 同步,npm run check 全绿。", "acceptance": "① 新增 selectAll 入参:弹层顶部一行「全选(已选/可选)」,全选 ✓、部分选中显 –、再点即清空这批;② 只作用于当前过滤结果,先搜再全选=按条件批量选;③ 到 max 时补满即停,不静默超选;④ 键盘可达:全选行占 active -1 号位,↑↓ 能走到、Enter 触发;⑤ manifest 参数表与手把手、demo 同步,npm run check 全绿。",
"notes": "" "notes": ""
},
{
"id": "g311",
"domain": "visual",
"status": "open",
"title": "骨架文本行高对齐正文:加载完成时表格不再窜一下",
"motivation": ".ua-skeleton-text 写死 height: 12px,而表格单元格里的正文行盒是「13px 字号 × 1.55 行高 ≈ 20px」——骨架行比真实行矮 8px,五行就差 40px,dataTable 从骨架切到数据时整表高度突跳,比没有加载态更晃眼。",
"acceptance": "① .ua-skeleton-text 的高度改成 calc(正文字号 × 正文档行高),与真实文字行盒等高;② 同时消掉这处 12px 字面值;③ skeleton 手把手补一条说明为什么按行盒算;④ audit:visual / audit:motion 全绿,npm run check 通过。",
"notes": ""
} }
] ]
} }
+3 -2
View File
@@ -1,6 +1,6 @@
{ {
"$schema": "ui-arch-registry-index/0.1", "$schema": "ui-arch-registry-index/0.1",
"generatedAt": "2026-10-26T16:40:39.175Z", "generatedAt": "2026-10-26T16:41:28.122Z",
"repoRoot": ".", "repoRoot": ".",
"packages": [ "packages": [
{ {
@@ -1236,7 +1236,8 @@
"数据加载期间用 skeleton 顶替真实内容,加载完成后整体替换", "数据加载期间用 skeleton 顶替真实内容,加载完成后整体替换",
"文本段落用 variant: 'text' + rows 控制行数,头像用 'circle',卡片/图片区域用 'rect'", "文本段落用 variant: 'text' + rows 控制行数,头像用 'circle',卡片/图片区域用 'rect'",
"占位块自带扫光动画,reduced-motion 用户自动静态化为纯灰块", "占位块自带扫光动画,reduced-motion 用户自动静态化为纯灰块",
"组合布局:skeleton 是普通 DOM,可放进 card / row 等任意容器" "组合布局:skeleton 是普通 DOM,可放进 card / row 等任意容器",
"行高按「正文字号 × 正文档行高」算,与真实文字行盒等高:表格 / 列表的加载态换成数据时不会整体窜一下(历史写死 12px,比正文矮约 8px,五行就差 40px)"
] ]
}, },
{ {
+2 -1
View File
@@ -1,6 +1,6 @@
# @ui-arch 组件库 Agent 文档(无图形版) # @ui-arch 组件库 Agent 文档(无图形版)
> 自动生成于 2026-10-26T16:40:39.175Z,数据源:各包 ua.manifest.json,勿手改。人类版文档站:apps/docs/index.html。 > 自动生成于 2026-10-26T16:41:28.122Z,数据源:各包 ua.manifest.json,勿手改。人类版文档站:apps/docs/index.html。
> 组件 = 普通函数,传 props 返回 DOM;状态用 signal 双向绑定:读 signal() 写 signal(v)。 > 组件 = 普通函数,传 props 返回 DOM;状态用 signal 双向绑定:读 signal() 写 signal(v)。
## 快速上手 ## 快速上手
@@ -578,6 +578,7 @@ skeleton({ variant: 'text', rows: 3 }); skeleton({ variant: 'circle' }); skeleto
2. 文本段落用 variant: 'text' + rows 控制行数,头像用 'circle',卡片/图片区域用 'rect' 2. 文本段落用 variant: 'text' + rows 控制行数,头像用 'circle',卡片/图片区域用 'rect'
3. 占位块自带扫光动画,reduced-motion 用户自动静态化为纯灰块 3. 占位块自带扫光动画,reduced-motion 用户自动静态化为纯灰块
4. 组合布局:skeleton 是普通 DOM,可放进 card / row 等任意容器 4. 组合布局:skeleton 是普通 DOM,可放进 card / row 等任意容器
5. 行高按「正文字号 × 正文档行高」算,与真实文字行盒等高:表格 / 列表的加载态换成数据时不会整体窜一下(历史写死 12px,比正文矮约 8px,五行就差 40px)
现场演示:apps/docs/demo.html#sec-skeleton 现场演示:apps/docs/demo.html#sec-skeleton
+2 -1
View File
@@ -1107,7 +1107,8 @@
"数据加载期间用 skeleton 顶替真实内容,加载完成后整体替换", "数据加载期间用 skeleton 顶替真实内容,加载完成后整体替换",
"文本段落用 variant: 'text' + rows 控制行数,头像用 'circle',卡片/图片区域用 'rect'", "文本段落用 variant: 'text' + rows 控制行数,头像用 'circle',卡片/图片区域用 'rect'",
"占位块自带扫光动画,reduced-motion 用户自动静态化为纯灰块", "占位块自带扫光动画,reduced-motion 用户自动静态化为纯灰块",
"组合布局:skeleton 是普通 DOM,可放进 card / row 等任意容器" "组合布局:skeleton 是普通 DOM,可放进 card / row 等任意容器",
"行高按「正文字号 × 正文档行高」算,与真实文字行盒等高:表格 / 列表的加载态换成数据时不会整体窜一下(历史写死 12px,比正文矮约 8px,五行就差 40px)"
] ]
}, },
{ {
+1 -1
View File
@@ -1499,7 +1499,7 @@ button.ua-step-dot:hover {
} }
} }
.ua-skeleton-text { .ua-skeleton-text {
height: 12px; height: calc(var(--ua-font-size-md) * var(--ua-leading-normal)); /* 与真实正文行盒同高:原先写死 12px,比正文矮约 8px,表格加载完会整体窜一下 */
margin-bottom: var(--ua-space-2); margin-bottom: var(--ua-space-2);
} }
.ua-skeleton-text.ua-last { .ua-skeleton-text.ua-last {