iter(g301): 新增拖拽排序列表 sortableList

This commit is contained in:
HIsheR
2026-10-27 00:29:01 +08:00
parent b9c592a52a
commit ed3b863923
13 changed files with 324 additions and 10 deletions
+9
View File
@@ -3095,6 +3095,15 @@
"motivation": "toast.ts 里写了 pointerenter 暂停倒计时,但样式只在 .ua-toast.is-closable / .is-action 时才给 pointer-events: auto,默认 toast 全程穿透——最常见的「toast.success(msg)」根本收不到 hover,暂停逻辑成了死代码;键盘用户 Tab 进关闭按钮时也照样被倒计时收走。",
"acceptance": "① .ua-toast 自身接收指针,删掉 is-closable / is-action 两处补丁式 pointer-events(宿主容器仍穿透,只有卡片本体可命中);② 暂停 / 恢复抽成 pause/resume,剩余时长不低于 400ms 且重复进入不二次扣减;③ focusin / focusout 与悬停同口径暂停,焦点在卡片内部移动不恢复;④ manifest 的 closable 说明与手把手步骤同步,npm run check 全绿。",
"notes": "pointer-events: auto 落到 .ua-toast 本体,删掉 is-closable / is-action 两处补丁规则;暂停恢复抽成 pause/resume(剩余不低于 400ms、重复进入不二次扣减),focusin/focusout 与悬停同口径、焦点在卡片内部移动不恢复;manifest 的 closable 说明与手把手步骤同步"
},
{
"id": "g301",
"domain": "new",
"status": "open",
"title": "新增拖拽排序列表 sortableList(88 个组件)",
"motivation": "库里有 list 展示列表、virtualList 长列表,但缺「可调整顺序」的交互件:任务排优先级、字段顺序、看板列这类场景每次都得自己写一遍拖放,dragstart/dragover 的边界(不拦 dragover 就没 drop、拖拽中重建节点会中断手势)反复踩。",
"acceptance": "① 整行可拖,指针越过邻行中线即换位,dragend 落定;② 键盘等价 Alt+↑↓ 上下搬一格、Alt+Home/End 搬首尾,裸 ↑↓ 留给页面滚动;③ 顺序写回 value 信号并触发 onChange,拖拽期间跳过外部重排避免中断手势;④ 句柄 { el, move, order },下标越界与禁用时静默忽略;⑤ 样式只消费 --ua-* 令牌,禁止新增硬编码阴影/时长/字号;⑥ manifest/docs/README/demo/llms-full 同步,npm run check 全绿。",
"notes": ""
}
]
}
+47 -2
View File
@@ -1,6 +1,6 @@
{
"$schema": "ui-arch-registry-index/0.1",
"generatedAt": "2026-10-26T16:25:36.184Z",
"generatedAt": "2026-10-26T16:28:37.124Z",
"repoRoot": ".",
"packages": [
{
@@ -230,7 +230,8 @@
"sparkline(props):迷你趋势线,把数值序列压成折线(可填充 + 末点标记),无坐标轴无交互",
"heatmap(props):日历热力图,按周列 × 星期行铺格子、四档浓度表示当天数量,悬停看明细",
"progressRing(props):环形进度,SVG 双圆靠 dasharray 画弧 + 中心百分比,value 可传信号自动重绘",
"noticeBar(props):单行通知条,语义色 + 左侧符号 + 可选跑马灯与关闭,适合页顶常驻播报"
"noticeBar(props):单行通知条,语义色 + 左侧符号 + 可选跑马灯与关闭,适合页顶常驻播报",
"sortableList(props):拖拽排序列表,整行可拖 + Alt+↑↓ 键盘搬位,返回 { el, move, order } 句柄"
],
"keyTypes": [
"ButtonProps",
@@ -4650,6 +4651,50 @@
"跑马灯在减少动效偏好下自动停成静态首屏——完整原文始终在 title 里,不必为可访问性另写一份",
"点 × 是先淡出再隐藏(200ms,和 alert 同一档),回调 onClose 立刻触发:想同步清理外部状态就在回调里做,别等隐藏"
]
},
{
"id": "sortableList",
"title": "拖拽排序列表 SortableList",
"demo": "sec-sortable",
"props": [
{
"n": "items",
"t": "string[]",
"r": 1,
"d": "全部条目文案;文案即排序键,要求唯一(重名会让顺序回读撞车)"
},
{
"n": "value",
"t": "Signal<string[]>",
"d": "受控顺序信号;传了则内部改动写回,外部改动即重排(拖拽中跳过)"
},
{
"n": "onChange",
"t": "(next: string[]) => void",
"k": 1,
"d": "顺序变化回调,拖放落定 / 键盘搬位 / move 调用后各触发一次"
},
{
"n": "disabled",
"t": "boolean | Signal<boolean>",
"d": "禁用拖拽与键盘搬位;缺省 false",
"df": "false"
},
{
"n": "emptyText",
"t": "string",
"d": "无条目占位文案;缺省「暂无可排序项」"
}
],
"example": "const sort = sortableList({ items: ['需求评审', '接口联调', '灰度发布'], onChange: (next) => console.log(next) });\ncontainer.append(sort.el);",
"steps": [
"items 传全部条目文案、顺序即当前顺序:文案同时是排序键,所以必须唯一(重名会分不清谁被搬动)",
"鼠标 / 触摸按住任意一行拖动,指针越过邻行中线就换位;松手后写回 value 信号并触发 onChange,拖拽期间不重排避免手势中断",
"键盘等价:Tab 聚焦某行后按 Alt+↑ / Alt+↓ 上下搬一格、Alt+Home / Alt+End 搬到首尾(裸 ↑↓ 留给页面滚动)",
"被拖的行以虚线边框 + 淡色虚影标示,落点由指针位置决定,不会出现「拖了三格只动一格」的错觉",
"外部要按代码调整顺序用句柄 move(from, to),下标越界或禁用时静默忽略;order() 以 DOM 为唯一真相回读当前顺序",
"什么时候别用:条目超过一屏(拖到边缘不会自动滚动,改用筛选或上下按钮)、需要跨列表搬运(用两个实例并自己管状态)"
]
}
]
},