iter(g303): 拖拽行改用抬升投影,不再压正文对比
This commit is contained in:
@@ -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
@@ -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
@@ -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. 什么时候别用:条目超过一屏(拖到边缘不会自动滚动,改用筛选或上下按钮)、需要跨列表搬运(用两个实例并自己管状态)
|
||||||
|
|
||||||
|
|||||||
@@ -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 为唯一真相回读当前顺序",
|
||||||
"什么时候别用:条目超过一屏(拖到边缘不会自动滚动,改用筛选或上下按钮)、需要跨列表搬运(用两个实例并自己管状态)"
|
"什么时候别用:条目超过一屏(拖到边缘不会自动滚动,改用筛选或上下按钮)、需要跨列表搬运(用两个实例并自己管状态)"
|
||||||
]
|
]
|
||||||
|
|||||||
@@ -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);
|
||||||
}
|
}
|
||||||
|
|
||||||
/* —— 轮播 —— */
|
/* —— 轮播 —— */
|
||||||
|
|||||||
Reference in New Issue
Block a user