iter(g307): 拖拽行补层内抬升 z 令牌

This commit is contained in:
HIsheR
2026-10-27 00:36:36 +08:00
parent 205a204d7e
commit 6dfc2f8b83
4 changed files with 13 additions and 0 deletions
+9
View File
@@ -3149,6 +3149,15 @@
"motivation": "audit:surface 只验表面阶梯(surface 各档),但全站 52 处选中底与悬停底用的是半透明 accent 淡底(tint-accent / -weak)——浓度手写在令牌里,暗色弱档降到 2% 时悬停与静止只差 1.026,界面「看起来没反应」,而现有门禁一声不响。",
"acceptance": "① LADDER 增加两档「表面 → 淡底标准档 / 弱档」,阈值 1.04,用 ratio() 先把半透明淡底压到表面上再算;② 四套主题全绿(亮 1.156 / 1.074,暗 1.232 / 1.118);③ 负向自检:暗色弱档改 2% 时 audit:surface 退出码 1 并点出 dark / contrastDark 两处;④ AGENTS 对该门禁的描述同步。",
"notes": "LADDER 增加「表面 → 淡底标准档 / 弱档」两档(阈值 1.04),复用 contrast-audit 的 ratio():半透明淡底先 over 到表面上再算;四套主题全绿(亮 1.156/1.074,暗 1.232/1.118);负向自检把暗色弱档改 2% 后 1.026 < 1.04,audit:surface 退出码 1 并点出 dark/contrastDark 两处,改回即恢复;AGENTS 描述同步"
},
{
"id": "g307",
"domain": "visual",
"status": "open",
"title": "拖拽行缺少层内抬升:投影被后面的行盖掉",
"motivation": "g303 给拖拽行加了抬升投影,但行仍是静态定位、没有层级——同一容器里后续兄弟元素绘制在后,被拖那一行的投影直接被下一行的底色切掉,「拿起来」看起来像贴纸被压住。层级令牌只有 dropdown 起的五档(100 起),拿它抬一行会污染语义。",
"acceptance": "① 新增 --ua-z-raised: 10 令牌(层内抬升,够压过同容器兄弟即可);② .ua-sortable-item.is-dragging 补 position: relative + z-index: var(--ua-z-raised);③ ua tokens --unused 不报新令牌、audit:visual 的 z-literal 仍为 0;④ npm run check 全绿。",
"notes": ""
}
]
}
+1
View File
@@ -2873,6 +2873,7 @@ node packages/tools/cli/bin/ua.js <index|list|info <包名|组件id> [--json|--m
- --ua-control-h-sm: 28px
- --ua-control-h-md: 34px
- --ua-control-h-lg: 40px
- --ua-z-raised: 10
- --ua-z-dropdown: 100
- --ua-z-sticky: 200
- --ua-z-overlay: 300
+1
View File
@@ -135,6 +135,7 @@
--ua-control-h-lg: 40px; /* 大控件高度:主按钮、搜索框、移动端触控目标 */
/* ---- 层级:五档,数值留出间隙便于中间插入 ---- */
--ua-z-raised: 10; /* 层内抬升:拖拽中的行、临时浮起的卡片——只为压过同容器兄弟,够用即可 */
--ua-z-dropdown: 100; /* 下拉层:菜单 / 选择面板 / 气泡 */
--ua-z-sticky: 200; /* 粘性层:表头、吸顶工具栏 */
--ua-z-overlay: 300; /* 遮罩层:模态背后的半透明遮罩 */
+2
View File
@@ -2730,6 +2730,8 @@ button.ua-step-dot:hover {
outline-offset: 2px;
}
.ua-sortable-item.is-dragging {
position: relative; /* 抬升需要定位:不然 z-index 对静态行无效 */
z-index: var(--ua-z-raised); /* 压过同容器兄弟,投影才不会被后面的行盖掉 */
border-style: dashed;
border-color: var(--ua-color-accent);
background: var(--ua-color-tint-accent);