Skip to content

💄 排序激活时明确提示排序状态,拖拽手柄改为锁定并给出切回默认顺序的入口 - #1768

Open
CodFrm wants to merge 6 commits into
mainfrom
feat/sort-state-feedback
Open

CodFrm wants to merge 6 commits into
mainfrom
feat/sort-state-feedback

Conversation

@CodFrm

@CodFrm CodFrm commented Sep 22, 2026

Copy link
Copy Markdown
Member

Checklist / 检查清单

  • Fixes mentioned issues / 修复已提及的问题
  • Code reviewed by human / 代码通过人工检查
  • Changes tested / 已完成测试

Description / 描述

close #1751

背景

脚本列表的排序状态会跨会话持久化,但排序按钮在「默认」和「已排序」两种状态下外观相同。排序时拖拽手柄又被 collapse 直接隐藏。结果就是用户忘了排序开着,看到手柄没了,以为拖拽功能坏了(见 issue 讨论)。排序规则本身要保留,所以这次只让两种模式的状态和切换方式更清楚,排序时仍然不允许拖拽。

本次改动

两个提交,可以分开审:

  1. 💄 排序按钮(SortMenu:排序时按钮变成主色浅底加主色描边,文字后面直接显示 ↑/↓ 方向;右侧加一个 ✕(重置排序),一步回到默认顺序。未排序时外观不变。回收站和订阅页用的也是 SortMenu,会一起得到这个激活态。
  2. ✨ 脚本列表(ScriptTable
    • 排序时手柄不再隐藏,改为锁定手柄:悬停行时以 30% 不透明度显示,tooltip「按「{field}」排序时不能拖拽」。按下手柄、尝试拖动,或者用键盘按 Enter/空格,都会弹出 info toast「当前按「{field}」排序,拖拽调整需切回默认顺序」,带「切回默认顺序」按钮。toast 用固定 id,连按不会堆叠。
    • 按「最后更新」排序时,时间列改为前景色加粗,让排序依据在行内可见。这里特意不用主色,因为主色在这一列表示可点击(旁边的「存在新版本」入口就是主色)。
    • 排序维度的显示名抽成 sort.tsscriptSortOptions(t),工具栏和提示文案共用一份。
    • 新增 4 个 i18n key(sort_resetdrag_locked_by_sortdrag_locked_toastdrag_locked_action),10 个语言都补齐了。措辞沿用已有 network_rules_drag_handle 的「调整顺序 / reorder」说法。

建议审查重点

  • ScriptRow 的 memo 比较新增了 emphasizeUpdateTime。脚本对象不变、只切换排序时,行必须重新渲染;对应的测试在把比较改回旧写法时会失败,我验证过。
  • 锁定手柄用 aria-disabled 而不是 disabled,这样按下时仍能收到事件并给出反馈。

已知限制

  • 排序时仍然会挂载 DndContext / SortableContext(这是既有行为,与仓库里「拖拽禁用时渲染普通行」的约定不一致),本 PR 没有处理,留作后续。
  • 按「名称」「状态」排序时,行内没有对应的可强调列,只有按钮激活态和锁定手柄起提示作用。

Screenshots / 截图

pnpm run build 后的扩展里(装了 3 个脚本)用 e2e/session.mjs 会话实际操作并截图确认过,截图存在本地,没有上传:

  • 浅色和深色:排序按钮显示「排序:最后更新 ↓ | ✕」;点 ✕ 后回到「排序:默认」。
  • 浅色和深色:按最后更新排序时,每行都有锁定手柄(aria-label「按「最后更新」排序时不能拖拽」);键盘聚焦后按 Enter/空格,出现 tooltip 和带「切回默认顺序」的 toast;时间列加粗。
  • 点 toast 里的按钮后,排序变为「默认」,锁定手柄 0 个,可拖拽手柄 3 个。
  • 通过 CDP 用真实鼠标对锁定手柄做「按下 → 移动 → 松开」,toast 出现,列表顺序不变。

验证

分支 head 3204421a,base origin/main d6cc48ba

  • 按 TDD:SortMenu.test.tsx 新增 3 条(2 条实现前失败),ScriptTable.test.tsx 新增 5 条(实现前全部失败),实现后全部通过。
  • pnpm run lint:通过(prettier、tsc、check:i18n、check:issue-templates、eslint)。
  • pnpm exec vitest run --no-coverage src/pages/options/routes/ScriptList src/pages/options/routes/SubscribeList src/locales:207/207 通过,连跑 2 次。
  • pnpm run test:ci:第 1 次 4860/4862,i18n-usage.test.tstrash_event_partition.test.ts 各有 1 条超出 340ms 预算,当时机器负载均值是 12–20。两个文件单独运行 3 次,本分支耗时 24–69ms,main 耗时 24–39ms,都通过。在较低负载下重跑,第 2 次 4862/4862 通过。据此判断是负载导致的超时,不是本改动引起的。
  • 本地跑时,ScriptTable.test.tsx 里既有的「未排序时保持拖拽得到的自然顺序」和新增的「按下锁定手柄…」偶尔会超出 850ms 的 ui 预算。对比测过,前者在分支和 main 上耗时分布相同(138–470ms 对 118–427ms),后者正常耗时 47–680ms。都只在机器高负载时出现,CI 上如果复现需要另行处理。
  • 范围:git diff --stat origin/main...HEAD 共 17 个文件,全部在 src/locales/*/script.jsonsrc/pages/options/routes/ScriptList/ 下。

CodFrm and others added 5 commits September 22, 2026 17:00
排序状态会跨会话持久化,原按钮在排序与未排序时外观相同,用户忘了排序开着时会误以为拖拽手柄消失是功能损坏。

Refs #1751
排序激活时手柄原本直接隐藏,看起来像拖拽功能失效。现在手柄保留为锁定态:悬停说明原因,按下(或键盘回车/空格)弹出带「切回默认顺序」操作的提示。按最后更新排序时时间列加粗,让排序依据在行内可见。

Refs #1751
行级 memo 改用 React 默认浅比较,避免配置或父级依赖变化后继续调用旧的 onDelete/onEnable/onRunStop 等闭包,并补回归测试覆盖同一脚本对象下回调更新。

Refs #1751
排序状态下改渲染普通行,只保留锁定手柄及切回默认顺序的反馈;DndContext、SortableContext 和 useSortable 仅在默认顺序下挂载,对齐仓库的拖拽性能约定。

Refs #1751
回收站用 null 表示默认排序,并在该状态稳定按删除时间倒序展示,避免共享 SortMenu 的重置按钮把默认顺序切成接口原始顺序;补回归测试覆盖名称排序后重置。

Refs #1751
@CodFrm

CodFrm commented Sep 22, 2026

Copy link
Copy Markdown
Member Author
QQ_1790069008395

改用行复选框直接观察 ScriptRow 的 onSelect prop,避免此前通过 EnableSwitch 内部路径间接断言 updateScripts 而没有触发目标回调;同时保持其它回调引用稳定,让测试确实能拒绝旧的自定义 memo 比较。

Refs #1751

Copy link
Copy Markdown
Collaborator

pr-rework-audit 以原始 head 3204421a 为基线复查后,追加了 4 个修正 commit;每个 commit 都是单独 fast-forward push,并在 push 后重新核对了 PR head 和实际 commit diff:

  • 0f76fce8 🐛 修复 ScriptRow memo 忽略最新交互回调:改回 React 默认浅比较,避免行继续持有旧的交互闭包,并补回归覆盖。
  • e25eda9e ⚡️ 排序时跳过脚本列表拖拽上下文:排序状态渲染普通行,只保留锁定手柄反馈;DndContext / SortableContext / useSortable 只在默认顺序挂载。PR 描述里原先列出的第一条“已知限制”已由这个 commit 解决。
  • a5933a43 🐛 让回收站重置排序恢复页面默认顺序:回收站的“默认”现在稳定表示删除时间倒序,避免共享 SortMenu 的重置按钮切回接口原始顺序。
  • 2bf993c4 ✅ 修正 ScriptRow 最新回调的回归测试:上一版测试误走了 EnableSwitch 内部路径;改用行复选框直接观察 onSelect prop,并保持其它回调引用稳定。

最终核对:

  • 当前 PR head:2bf993c4ea79898c290bde109a628ad4940724c4
  • 3204421a..2bf993c4 正好是上述 4 个 commit,净新增修改只涉及 ScriptTable.tsx / ScriptTable.test.tsx / TrashTable.tsx / TrashViews.test.tsx
  • Lint:通过
  • unit test 两个 shard + 聚合 Run tests:通过
  • E2E 4/4:通过
  • License Compliance:通过
  • codecov/project 仍为 72.65%(相对 base -0.08%)而失败;这个数值与原始 head 3204421a 上的 Codecov 结果完全相同,本轮 rework 没有进一步降低 project coverage

本执行环境无法直接 DNS clone GitHub 仓库,因此没有把“本地命令运行”作为验证证据;上面的执行结果来自当前最终 head 的 GitHub CI。

@cyfung1031 cyfung1031 added the P2 🐌 非重要也不紧急的内容 label Sep 22, 2026
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

P2 🐌 非重要也不紧急的内容

Projects

None yet

Development

Successfully merging this pull request may close these issues.

[UX] 选择排序规则后拖拽手柄消失,手动排序状态缺乏明确反馈

2 participants