iter(g303): 拖拽行改用抬升投影,不再压正文对比

This commit is contained in:
HIsheR
2026-10-27 00:32:14 +08:00
parent d8e759e649
commit 468b177f4f
5 changed files with 21 additions and 7 deletions
+9
View File
@@ -3113,6 +3113,15 @@
"motivation": "table-core 的 toggleSort 早就支持 action.multi(按 rules 顺序逐列比较),但皮肤层 dispatch 时从不传 multi,用户按住 Shift 点第二个表头毫无反应,多列排序只能靠手写 setSorting;表头标记也只反映单列方向,看不出比较优先级。", "motivation": "table-core 的 toggleSort 早就支持 action.multi(按 rules 顺序逐列比较),但皮肤层 dispatch 时从不传 multi,用户按住 Shift 点第二个表头毫无反应,多列排序只能靠手写 setSorting;表头标记也只反映单列方向,看不出比较优先级。",
"acceptance": "① 表头点击与键盘 Enter / 空格都读 shiftKey 并透传 multi;② 参与排序的列 ≥ 2 时标记追加优先级序号(↑1 / ↓2),单列时保持原箭头;③ manifest 手把手与 demo 描述同步;④ npm run check 全绿。", "acceptance": "① 表头点击与键盘 Enter / 空格都读 shiftKey 并透传 multi;② 参与排序的列 ≥ 2 时标记追加优先级序号(↑1 / ↓2),单列时保持原箭头;③ manifest 手把手与 demo 描述同步;④ npm run check 全绿。",
"notes": "th 的 toggle 收 multi 参数,onClick / onKeydown 都读 shiftKey;sortMark 在 rules ≥ 2 时追加优先级序号(↑1 / ↓2),单列保持原箭头;manifest 步骤与 demo 描述同步" "notes": "th 的 toggle 收 multi 参数,onClick / onKeydown 都读 shiftKey;sortMark 在 rules ≥ 2 时追加优先级序号(↑1 / ↓2),单列保持原箭头;manifest 步骤与 demo 描述同步"
},
{
"id": "g303",
"domain": "visual",
"status": "open",
"title": "拖拽行别用整行透明度:正文对比被压到 4.86",
"motivation": "sortableList 的拖拽态原本整行 opacity: .7,实测把拖拽行正文对比从 12.03 压到 4.86(亮色)——低于项目正文 7:1 的口径,而「正在被拿起」完全可以用虚线边 + 抬升投影表达,不必牺牲可读性。",
"acceptance": "① 拖拽态去掉整行 opacity,改用 --ua-shadow-2 抬升 + 虚线 accent 边 + tint-accent 底;② 静态态对比回到 12+(亮)/ 11+(暗);③ 把手悬停转 accent 色提示可抓,拖拽中 cursor 为 grabbing;④ audit:visual / audit:contrast / audit:motion 全绿,manifest 步骤同步。",
"notes": ""
} }
] ]
} }
+2 -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:30:17.353Z", "generatedAt": "2026-10-26T16:31:56.843Z",
"repoRoot": ".", "repoRoot": ".",
"packages": [ "packages": [
{ {
@@ -4692,7 +4692,7 @@
"items 传全部条目文案、顺序即当前顺序:文案同时是排序键,所以必须唯一(重名会分不清谁被搬动)", "items 传全部条目文案、顺序即当前顺序:文案同时是排序键,所以必须唯一(重名会分不清谁被搬动)",
"鼠标 / 触摸按住任意一行拖动,指针越过邻行中线就换位;松手后写回 value 信号并触发 onChange,拖拽期间不重排避免手势中断", "鼠标 / 触摸按住任意一行拖动,指针越过邻行中线就换位;松手后写回 value 信号并触发 onChange,拖拽期间不重排避免手势中断",
"键盘等价:Tab 聚焦某行后按 Alt+↑ / Alt+↓ 上下搬一格、Alt+Home / Alt+End 搬到首尾(裸 ↑↓ 留给页面滚动)", "键盘等价:Tab 聚焦某行后按 Alt+↑ / Alt+↓ 上下搬一格、Alt+Home / Alt+End 搬到首尾(裸 ↑↓ 留给页面滚动)",
"被拖的行以虚线边框 + 淡色虚影标示,落点由指针位置决定,不会出现「拖了三格只动一格」的错觉", "被拖的行以虚线边 + 抬升投影标示(不用整行降透明度:那会把正文对比压到 4.86,低于正文 7:1 口径),落点由指针位置决定,不会出现「拖了三格只动一格」的错觉",
"外部要按代码调整顺序用句柄 move(from, to),下标越界或禁用时静默忽略;order() 以 DOM 为唯一真相回读当前顺序", "外部要按代码调整顺序用句柄 move(from, to),下标越界或禁用时静默忽略;order() 以 DOM 为唯一真相回读当前顺序",
"什么时候别用:条目超过一屏(拖到边缘不会自动滚动,改用筛选或上下按钮)、需要跨列表搬运(用两个实例并自己管状态)" "什么时候别用:条目超过一屏(拖到边缘不会自动滚动,改用筛选或上下按钮)、需要跨列表搬运(用两个实例并自己管状态)"
] ]
+2 -2
View File
@@ -1,6 +1,6 @@
# @ui-arch 组件库 Agent 文档(无图形版) # @ui-arch 组件库 Agent 文档(无图形版)
> 自动生成于 2026-10-26T16:30:17.353Z,数据源:各包 ua.manifest.json,勿手改。人类版文档站:apps/docs/index.html。 > 自动生成于 2026-10-26T16:31:56.843Z,数据源:各包 ua.manifest.json,勿手改。人类版文档站:apps/docs/index.html。
> 组件 = 普通函数,传 props 返回 DOM;状态用 signal 双向绑定:读 signal() 写 signal(v)。 > 组件 = 普通函数,传 props 返回 DOM;状态用 signal 双向绑定:读 signal() 写 signal(v)。
## 快速上手 ## 快速上手
@@ -2518,7 +2518,7 @@ container.append(sort.el);
1. items 传全部条目文案、顺序即当前顺序:文案同时是排序键,所以必须唯一(重名会分不清谁被搬动) 1. items 传全部条目文案、顺序即当前顺序:文案同时是排序键,所以必须唯一(重名会分不清谁被搬动)
2. 鼠标 / 触摸按住任意一行拖动,指针越过邻行中线就换位;松手后写回 value 信号并触发 onChange,拖拽期间不重排避免手势中断 2. 鼠标 / 触摸按住任意一行拖动,指针越过邻行中线就换位;松手后写回 value 信号并触发 onChange,拖拽期间不重排避免手势中断
3. 键盘等价:Tab 聚焦某行后按 Alt+↑ / Alt+↓ 上下搬一格、Alt+Home / Alt+End 搬到首尾(裸 ↑↓ 留给页面滚动) 3. 键盘等价:Tab 聚焦某行后按 Alt+↑ / Alt+↓ 上下搬一格、Alt+Home / Alt+End 搬到首尾(裸 ↑↓ 留给页面滚动)
4. 被拖的行以虚线边框 + 淡色虚影标示,落点由指针位置决定,不会出现「拖了三格只动一格」的错觉 4. 被拖的行以虚线边 + 抬升投影标示(不用整行降透明度:那会把正文对比压到 4.86,低于正文 7:1 口径),落点由指针位置决定,不会出现「拖了三格只动一格」的错觉
5. 外部要按代码调整顺序用句柄 move(from, to),下标越界或禁用时静默忽略;order() 以 DOM 为唯一真相回读当前顺序 5. 外部要按代码调整顺序用句柄 move(from, to),下标越界或禁用时静默忽略;order() 以 DOM 为唯一真相回读当前顺序
6. 什么时候别用:条目超过一屏(拖到边缘不会自动滚动,改用筛选或上下按钮)、需要跨列表搬运(用两个实例并自己管状态) 6. 什么时候别用:条目超过一屏(拖到边缘不会自动滚动,改用筛选或上下按钮)、需要跨列表搬运(用两个实例并自己管状态)
+1 -1
View File
@@ -4563,7 +4563,7 @@
"items 传全部条目文案、顺序即当前顺序:文案同时是排序键,所以必须唯一(重名会分不清谁被搬动)", "items 传全部条目文案、顺序即当前顺序:文案同时是排序键,所以必须唯一(重名会分不清谁被搬动)",
"鼠标 / 触摸按住任意一行拖动,指针越过邻行中线就换位;松手后写回 value 信号并触发 onChange,拖拽期间不重排避免手势中断", "鼠标 / 触摸按住任意一行拖动,指针越过邻行中线就换位;松手后写回 value 信号并触发 onChange,拖拽期间不重排避免手势中断",
"键盘等价:Tab 聚焦某行后按 Alt+↑ / Alt+↓ 上下搬一格、Alt+Home / Alt+End 搬到首尾(裸 ↑↓ 留给页面滚动)", "键盘等价:Tab 聚焦某行后按 Alt+↑ / Alt+↓ 上下搬一格、Alt+Home / Alt+End 搬到首尾(裸 ↑↓ 留给页面滚动)",
"被拖的行以虚线边框 + 淡色虚影标示,落点由指针位置决定,不会出现「拖了三格只动一格」的错觉", "被拖的行以虚线边 + 抬升投影标示(不用整行降透明度:那会把正文对比压到 4.86,低于正文 7:1 口径),落点由指针位置决定,不会出现「拖了三格只动一格」的错觉",
"外部要按代码调整顺序用句柄 move(from, to),下标越界或禁用时静默忽略;order() 以 DOM 为唯一真相回读当前顺序", "外部要按代码调整顺序用句柄 move(from, to),下标越界或禁用时静默忽略;order() 以 DOM 为唯一真相回读当前顺序",
"什么时候别用:条目超过一屏(拖到边缘不会自动滚动,改用筛选或上下按钮)、需要跨列表搬运(用两个实例并自己管状态)" "什么时候别用:条目超过一屏(拖到边缘不会自动滚动,改用筛选或上下按钮)、需要跨列表搬运(用两个实例并自己管状态)"
] ]
+7 -2
View File
@@ -2716,7 +2716,7 @@ button.ua-step-dot:hover {
color: var(--ua-color-text); color: var(--ua-color-text);
font-size: var(--ua-font-size-md); font-size: var(--ua-font-size-md);
cursor: grab; cursor: grab;
transition: background var(--ua-duration-fast) var(--ua-ease), border-color var(--ua-duration-fast) var(--ua-ease); transition: background var(--ua-duration-fast) var(--ua-ease), border-color var(--ua-duration-fast) var(--ua-ease), box-shadow var(--ua-duration-fast) var(--ua-ease);
} }
.ua-sortable-item:hover { .ua-sortable-item:hover {
background: var(--ua-color-tint-accent-weak); /* 低视觉比重的悬停底色 */ background: var(--ua-color-tint-accent-weak); /* 低视觉比重的悬停底色 */
@@ -2733,13 +2733,18 @@ button.ua-step-dot:hover {
border-style: dashed; border-style: dashed;
border-color: var(--ua-color-accent); border-color: var(--ua-color-accent);
background: var(--ua-color-tint-accent); background: var(--ua-color-tint-accent);
opacity: 0.7; /* 拖拽中的虚影:本体留在原地随指针走,稍淡以示「正在被搬」 */ box-shadow: var(--ua-shadow-2); /* 用抬升投影表达「被拿起」:整行降不透明度会把正文对比压到 4.86(低于正文 7:1 口径) */
cursor: grabbing;
}
.ua-sortable-item:hover .ua-sortable-grip {
color: var(--ua-color-accent); /* 悬停时把手转强调色:提示「这一行可以抓」 */
} }
.ua-sortable-grip { .ua-sortable-grip {
flex: none; flex: none;
color: var(--ua-color-text-faint); color: var(--ua-color-text-faint);
font-size: var(--ua-font-size-sm); font-size: var(--ua-font-size-sm);
line-height: var(--ua-leading-none); line-height: var(--ua-leading-none);
transition: color var(--ua-duration-fast) var(--ua-ease);
} }
/* —— 轮播 —— */ /* —— 轮播 —— */