♻️ 新 UI 重写:shadcn/ui + Tailwind v4 + React 19 全面重构表现层 by CodFrm · Pull Request #1514 · scriptscat/scriptcat

CodFrm · 2026-06-17T14:37:26Z

Checklist / 检查清单

Fixes mentioned issues / 修复已提及的问题
Code reviewed by human / 代码通过人工检查
Changes tested / 已完成测试(单元测试已覆盖,真机可视化验收进行中)

设计稿.pen.zip

Description / 描述

🚧 草稿 PR:整个新 UI 重写的集成 PR,合并目标为 main。目前仍在做各页面的真机可视化验收,完成后再转为正式 PR。

使用 shadcn/ui + Tailwind CSS v4 + React 19 对 src/pages/ 表现层进行从零重写,替换原有的 Arco Design + UnoCSS 技术栈。设计系统(颜色令牌、组件、布局/动效/状态规范)统一沉淀在 docs/DESIGN.md,所有页面同时适配亮色/暗色主题(Tailwind dark: 变体 + src/index.css 设计令牌)。

已完成页面

核心管理页

脚本列表(ScriptList,含表格/卡片、过滤侧栏、批量操作、移动端)
订阅列表(SubscribeList)
脚本编辑器(ScriptEditor,Monaco + 多标签 + 代码/资源/设置/存储面板)
日志(Logger)、设置(Setting)、工具(Tools)
弹出层(popup)

独立页面

安装页(install,身份→权限→代码信任优先布局,脚本/订阅/Skill 安装、本地文件监听、移动端)
数据导入页(import,数据导入/备份恢复)
授权确认页(confirm,时长选择 + 允许/拒绝)
批量更新页(batchupdate,表格勾选 + 风险标签 + 已忽略分组)

Agent 套件(7 页)

会话(AgentChat,三栏可折叠 + 流式 + thinking/工具调用/任务列表/ask_user/附件富块 + 移动导航抽屉)
模型服务(AgentProvider)、Skills、MCP、定时任务(AgentTasks)、OPFS 文件浏览器、设置(AgentSettings)

其它

i18n:7 种语言(zh-CN / zh-TW / en-US / ja-JP / de-DE / ru-RU / vi-VN)同步更新
测试:遵循 TDD,使用 vitest + Testing Library,新页面均有单元/组件测试覆盖
文档:新增 docs/DESIGN.md,更新 docs/DEVELOP.md / docs/README.md 等贡献者文档

待办(转正式 PR 前)

各页面真机可视化验收(亮色/暗色 + 桌面/移动)
页内功能与旧版逐项对账复核

Screenshots / 截图

移除基于 Arco Design + UnoCSS 的旧 UI 层与相关依赖，为下一版基于 Tailwind CSS + shadcn/ui 的 UI 重构做准备。 - 删除 6 个页面（options/popup/install/confirm/import/batchupdate）、所有 UI 组件、HTML 模板和 CSS - 卸载 16 个 UI 相关依赖（@arco-design/web-react、unocss、@dnd-kit/*、react-dropzone、react-joyride、react-router-dom、react-icons、react-i18next、@playwright/test 等） - 删除 e2e 测试目录与 Playwright 配置 - 更新 rspack.config.ts 移除 UI entry 和 HtmlRspackPlugin - 更新技术栈文档（CLAUDE.md、copilot-instructions、CONTRIBUTING）保留：非 UI 入口（service_worker/content/inject/offscreen/sandbox）、 monaco-editor、i18next、pages/store/{global,favicons,features/script}.ts

- 使用 Tailwind CSS + shadcn/ui 重构 popup 页面 - 实现完整业务逻辑：脚本列表、启用/禁用、删除、排除、GM 菜单等 - 添加 usePopupData hook 对接 service worker 后端 API 和实时订阅 - 新增 Popconfirm 组件用于删除确认 - 配置设计系统色彩令牌（品牌蓝、状态色、暗色模式） - 搭建 options 页面入口（骨架）

- 新增 Sidebar 组件：导航、帮助中心菜单（hover触发）、主题切换、折叠 - 使用 HashRouter 配置路由（脚本列表/订阅/日志/工具/设置/编辑器） - 提取 GithubIcon 组件替代 popup 和 sidebar 中的 inline SVG - i18n 使用已有翻译 key，与 release/v1.4 保持一致

- 将 translation.json 拆分为 11 个命名空间（common/agent/script/editor/settings/install/popup/logs/guide/tools/permission） - 升级 React 18→19、i18next 23→26，引入 react-i18next - 还原 SW 层 popup 逻辑至 v1.5（不在 SW 中处理 i18n） - 删除 Crowdin 配置、伪语言 ach-UG 及相关文档引用 - 修复 React 19 类型兼容（useRef、cloneElement）

# Conflicts: # package.json # pnpm-lock.yaml # src/app/service/service_worker/gm_api/gm_api.ts # src/app/service/service_worker/index.ts # src/locales/ach-UG/translation.json # src/locales/de-DE/translation.json # src/locales/en-US/translation.json # src/locales/ja-JP/translation.json # src/locales/ru-RU/translation.json # src/locales/vi-VN/translation.json # src/locales/zh-CN/translation.json # src/locales/zh-TW/translation.json # src/pages/components/CodeEditor/index.tsx # src/pages/components/UserConfigPanel/index.tsx # src/pages/components/layout/MainLayout.tsx # src/pages/install/App.tsx # src/pages/options/index.css # src/pages/options/routes/Logger.tsx # src/pages/options/routes/Setting.tsx # src/pages/options/routes/script/ScriptEditor.tsx # src/pages/popup/App.tsx

# Conflicts: # CONTRIBUTING.md # README.md # docs/CONTRIBUTING_EN.md # docs/CONTRIBUTING_RU.md # docs/README_RU.md # docs/README_ja.md # docs/README_zh-CN.md # docs/README_zh-TW.md # e2e/install.spec.ts # e2e/popup.spec.ts # e2e/script-editor.spec.ts # e2e/script-management.spec.ts # e2e/settings.spec.ts # e2e/vscode-connect.spec.ts # package.json # playwright.config.ts # pnpm-lock.yaml # src/app/service/content/scripting.ts # src/app/service/service_worker/gm_api/gm_api.ts # src/app/service/service_worker/index.ts # src/index.css # src/locales/README.md # src/locales/de-DE/translation.json # src/locales/en-US/translation.json # src/locales/ja-JP/translation.json # src/locales/locales.ts # src/locales/ru-RU/translation.json # src/locales/vi-VN/translation.json # src/locales/zh-CN/translation.json # src/locales/zh-TW/translation.json # src/manifest.json # src/pages/components/CodeEditor/index.tsx # src/pages/components/ScriptMenuList/index.tsx # src/pages/components/layout/MainLayout.tsx # src/pages/components/layout/Sider.tsx # src/pages/components/layout/SiderGuide.tsx # src/pages/confirm/App.tsx # src/pages/install/App.tsx # src/pages/install/hooks.tsx # src/pages/install/utils.ts # src/pages/options.html # src/pages/options/routes/AgentChat/ChatArea.tsx # src/pages/options/routes/AgentMcp.tsx # src/pages/options/routes/AgentOPFS.tsx # src/pages/options/routes/AgentProvider.tsx # src/pages/options/routes/AgentSettings.tsx # src/pages/options/routes/AgentSkills.tsx # src/pages/options/routes/AgentTasks.tsx # src/pages/options/routes/ScriptList/components.tsx # src/pages/options/routes/ScriptList/index.tsx # src/pages/options/routes/Setting.tsx # src/pages/options/routes/SubscribeList.tsx # src/pages/options/routes/Tools.tsx # src/pages/options/routes/script/ScriptEditor.tsx # src/pages/options/routes/script/index.css # src/pages/popup.html # src/pages/popup/App.tsx # src/pages/template.html # tests/pages/options/MainLayout.test.tsx

cyfung1031 · 2026-06-19T12:03:26Z

e2e speed up `7ca40dd`

Before

After

cyfung1031 · 2026-06-19T12:52:12Z

@CodFrm 禁用了的脚本的 user config 色没变化

…ugin Switch from eslint-plugin-prettier to a dedicated `prettier --check` step in lint/lint:ci and `prettier --write` in lint-fix. ESLint no longer runs Prettier internally; formatting output is unchanged. Also: add .eslintcache to .gitignore, extend .prettierignore and ESLint ignores to cover coverage/.

- DESIGN.md 补充阴影(elevation)/z-index 分层/可访问性/表单校验/微文案章节 - 新增 --label-* 分类标签令牌族，脚本列表标签 chip 改用令牌（替代裸 green-50 等） - muted-foreground 调为 #767676 满足 WCAG AA 对比度 - 全局 prefers-reduced-motion 重置；自定义可点击元素补 focus-visible ring - 图标按钮补 aria-label；移除内联 i18n defaultValue 兜底并补全 7 语言包 key - 新增 SubscribeList 移动端卡片视图；popup 头部加 logo - 删除废弃 theme-toggle.tsx

cyfung1031 · 2026-06-20T06:27:20Z

这个 PR 的方向是对的：shadcn/ui + Tailwind v4 的基础接入、主题 token、暗色模式、页面重构思路都不错。
但不建议现在合并。需要先修几类会影响真实用户的交互与可访问性问题。

必修问题

移动端“新建脚本”菜单可能卡住
- useHoverMenu 是 hover 触发逻辑，但也被移动端图标按钮使用。
- onOpenChange 只处理打开，不正常处理关闭。
- 外部点击关闭也被拦截，容易出现菜单关不掉的问题。
- 建议：移动端用普通 click/tap 菜单；onOpenChange 必须同时处理 open/close。
Popup 快捷键会误触发
- Popup 注册了全局 keypress。
- 用户在搜索框或菜单输入框里打字时，也可能触发脚本菜单 action。
- 建议：当焦点在 input / textarea / select / contenteditable 中时跳过快捷键处理。
Popconfirm 包装方式不太对
- 现在 PopoverTrigger asChild 外面又包了一层 <div>。
- 会削弱按钮语义、焦点行为、disabled 行为。
- 建议：直接把真实按钮作为 trigger，避免额外 div 包裹交互元素。
批量选择的 indeterminate 状态显示不正确
- 表头 Checkbox 传了 "indeterminate"。
- 但 Checkbox 组件永远显示 check 图标。
- 半选和全选看起来一样。
- 建议：data-state="indeterminate" 时显示 minus 图标。

中优先级问题

全局移除 focus outline 有风险
- CSS 对 button / role=button / a 全局 outline: none。
- 不是所有自定义按钮都有可靠的 focus-visible ring。
- 键盘用户可能看不到当前焦点。
- 建议：不要全局去 outline；逐组件处理 focus 样式。
Monaco 编辑器关闭了辅助功能
- accessibilitySupport: "off" 对代码编辑器/代码预览不友好。
- 建议改成 "auto"。
Diff 编辑器切换主题可能不生效
- 普通 editor 有 setEditor，diff editor 分支没有。
- 主题切换 effect 依赖 monacoEditor，diff 预览可能保留旧主题。
- 建议：统一保存 editor 实例，或主题变更时全局调用 editor.setTheme(...)。
主题系统有实现，但设置页似乎没有入口
- ThemeProvider 支持 light / dark / auto。
- 预渲染脚本也会读取 lightMode。
- 但设置页没看到主题切换 UI。
- 建议：补上“外观/主题：浅色、深色、跟随系统”。
部分可点击元素不是语义化按钮
- 例如 favicon 图片点击、Markdown 图片预览用 <span> 点击。
- 键盘操作和屏幕阅读器体验较差。
- 建议：可点击元素用 <button>；图片预览用 Dialog。
脚本 metadata URL 直接 window.open
- homepage/source/supporturl 等来自脚本 metadata。
- 建议只允许 http: / https:，避免异常协议。
ScriptRow memo comparator 可能导致 UI 旧数据
- comparator 只比较少量字段。
- 但行内显示 name/version/author/tags/source/config/cloud 等。
- 这些字段变了可能不重新渲染。
- 建议：移除自定义 comparator，或补全比较字段。

做得好的地方

Tailwind v4 / PostCSS / Rspack 接入整体清楚。
CSS token 层设计完整，light/dark 变量集中管理。
有 prefers-reduced-motion 支持。
安装页信息架构不错：身份、权限、风险、代码预览顺序合理。
批量更新页的 loading、empty、progress 状态比单纯 spinner 好。

建议合并门槛

合并前至少修：

useHoverMenu 关闭与移动端行为
Popup 输入时快捷键误触发
Popconfirm trigger 语义
Checkbox 半选状态
focus 可见性
Monaco accessibility + diff theme
补 Playwright 覆盖：移动端新建菜单、Popup 搜索输入、批量半选、暗色模式、删除确认

CodFrm · 2026-06-20T15:04:18Z

@@ -1,3 +1,4 @@
+// can be tested with vitest-environment node


@cyfung1031 怎么这么多这个注释？

纯粹说明可以用 // @vitest-environment node 来做测试
只是现在用的是 happy-dom

CodFrm · 2026-06-20T15:04:26Z

@@ -1,3 +1,4 @@
+// @vitest-environment happy-dom


这个注释是用来标记使用 happy-dom.
当然现在 default 就是 happy-dom, 只有少量是 jsdom
和default 一样的都可以删
但这样就只有 jsdom有注释其他没有

CodFrm · 2026-06-20T15:04:50Z

@@ -1,3 +1,4 @@
+// can be tested with vitest-environment node


几乎每个都有

现在的是三个都标了出来。
// can be tested with vitest-environment node 可用 node, happy-dom, jsdom 做测试
// @vitest-environment happy-dom 指定为 happy-dom, 即预设，可用 happy-dom, jsdom 做测试
// @vitest-environment jsdom 指定为 jsdom，必须用 jsdom 做测试

现在只有happy-dom了，我移除了

CodFrm · 2026-06-20T15:23:28Z

感谢非常细致的 review 🙏 已逐条复现确认（先确认 bug 存在 → 补失败测试 → 修复），结论是这些问题基本都属实，已按 TDD 修复。全量单测 2837 通过，tsc / ESLint / Prettier 均通过。

✅ 必修项（合并门槛）—— 已全部修复

✅ useHoverMenu 关闭与移动端：onOpenChange 现同时处理 open/close（关闭信号不再被吞）；移动端图标按钮改为普通点击菜单，不再挂 hover + dismiss 拦截，不会卡住。
✅ Popup 快捷键误触发：焦点在 input / textarea / select / contenteditable 时跳过快捷键处理。
✅ Popconfirm trigger 语义：移除外层 div，直接以真实按钮作为 trigger；并把 ActionButton / BatchBtn / ActionItem 改为 forwardRef + 透传 props，使 aria-haspopup / ref 落到真实按钮上。
✅ Checkbox 半选状态：indeterminate 时渲染 Minus 图标（含对应底色令牌），与全选区分。
✅ focus 可见性：全局 outline:none 收窄为 :focus:not(:focus-visible)，保留键盘导航焦点环。
✅ Monaco：accessibilitySupport 改为 "auto"；新增就绪标志使 diff editor 的主题切换也生效（之前只对普通 editor 生效）。

✅ 中优先级 —— 已修复

✅ metadata URL 安全：脚本主页 / 站点图标统一只放行 http(s)，挡掉 javascript: / data: / file:。
✅ favicon 语义化：可点击元素由 <img> / <Globe> 改为真正的 <button>。
✅ ScriptRow memo 旧数据：确认是真 bug——selfMetadata 等原地更新不会 bump updatetime，而 comparator 只比 updatetime。改为整对象引用比较（store 对任一变更都会生成新行引用，既保留 memo 又不漏字段）。

❌ 暂未处理（需确认 / 后续）

❌ Markdown / 附件图片预览语义化（AgentChat）：问题属实（用 <span> / <div> 点击）。本次只处理了脚本列表的 favicon；AgentChat 这块需要用 Dialog + <button> 做一次较大的改造，且非核心路径，计划后续单独处理。
❌ 主题设置页入口：主题切换其实已在侧边栏 / 移动端抽屉提供，并非缺失。是否在设置页再加一处（外观：浅色 / 深色 / 跟随系统）属产品取舍 + 需补 7 语言 i18n key，暂未添加，待确认是否需要。
❌ Playwright e2e 补充：建议补的场景（移动新建菜单 / Popup 搜索打字 / 批量半选 / 暗色模式 / 删除确认）目前已用单元 / 组件测试覆盖，但尚未补对应 Playwright e2e，可按需补。

再次感谢 🙏

CodFrm added 30 commits April 6, 2026 00:14

✨ 实现 Options 页面脚本列表 UI（筛选、排序、批量操作）

b340b8c

💥 合并 release/v1.5 分支，清理旧 UI 模块和未使用依赖

0bb6454

👷 调整构建ci

8cd00a8

v1.5.0-beta

6c5518c

💄 优化弹窗搜索与按钮交互样式

3d19efc

✨ 新增 useScrollSpy:scroll-spy 监听与平滑滚动 hook

6631f9b

✨ 新增 SettingsLayout:scroll-spy 设置外壳(左导航+右滚动区)

d02b73d

✨ 新增 SettingCard/SettingRow 设置卡片与行原语

e7dc411

✨ 新增 useSystemConfig:配置读写与变更订阅 hook

828441c

🌐 迁移设置页缺失 i18n key 到 settings.json(全语言)

4467d9d

✨ 设置页骨架 + 路由接入 + 通用/界面分区

65f4b08

✨ 设置页更新/运行时/同步(占位)分区

9bb6d8d

✨ 设置页安全/开发者分区(失焦自动保存)

f3111ff

🐛 修复 useSystemConfig 兼容同步 getter,避免 .then 抛错

6882bbd

✨ 新增新 UI 设置与确认页体验

5054745

🌐 补充英文权限确认文案

6dd856d

♻️ 设置分区去除 as never 并修复 Select 受控警告

0e7f3ae

✨ 补齐批量更新与代理聊天工具

cd77225

🌐 文件系统参数标签键迁移 settings→common(共享 factory 裸 key 解析)

c693d13

✨ 移植 FileSystemParams 组件到 new-ui(shadcn 动态参数表单 + 网盘解绑)

a9c7d66

✨ 设置页同步分区完整化:FileSystemParams 接入 + 启用时账号校验

a3151f5

✨ 设置页运行时存储完整化:CAT_fileStorage 配置(保存/重置/打开目录)

f5c43a3

♻️ 同步/运行时分区审查修复:状态色改用 success-fg 令牌、去重描述、补打开目录与同步状态测试

b6cf1df

✨ 工具页 new-ui:5 分类 scroll-spy(本地/云端备份+自动备份+数据迁移+VSCode)

35888cd

cyfung1031 added 4 commits June 19, 2026 19:13

stale file

7233172

apply same fix to installScript

92ac318

bump playwright test to from 1.58.2 to 1.60.0

e80d293

optimize E2E config with agent E2E fixture scopes

7ca40dd

cyfung1031 added 4 commits June 19, 2026 21:11

⚡️ optimize Playwright launch overhead

16a26d3

🐛 修复编辑器面板预加载错误处理

e0e87b4

统一为 findInfo

85dc2ba

⚡️ preload popup queries for faster content rendering

56c17d0

cyfung1031 and others added 13 commits June 19, 2026 22:02

fix test

4d63735

fix dropdownmenu

4992db0

css fix

462e62b

css fix

6b2350a

把部份 vitest 分拆成 isolated ，然后其他全部跑 vmThreads (fast)

464ffdf

concurrently lint

bbeb316

faster tsc --noEmit using cache

c98843e

faster lint and pre-commit

05c22db

fix warnings

4ef1b99

Update vitest.config.ts

0ddb895

💚 fix e2e selectors for localized UI

6af9fa6

CodFrm commented Jun 20, 2026

View reviewed changes

CodFrm added 2 commits June 20, 2026 23:21

🎨 优化新 UI 交互与测试

19dcd8e

📄 修正测试环境文档说明

a8e11ce

CodFrm added 2 commits June 21, 2026 00:39

🎨 统一 toast 反馈样式

7ce2497

🎨 优化新 UI 组件与 Agent 页面结构

c2286f3

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

♻️ 新 UI 重写:shadcn/ui + Tailwind v4 + React 19 全面重构表现层#1514

♻️ 新 UI 重写:shadcn/ui + Tailwind v4 + React 19 全面重构表现层#1514
CodFrm wants to merge 142 commits into
release/v1.4-agentfrom
develop/new-ui

CodFrm commented Jun 17, 2026 •

edited

Loading

Uh oh!

cyfung1031 commented Jun 19, 2026

Uh oh!

cyfung1031 commented Jun 19, 2026

Uh oh!

cyfung1031 commented Jun 20, 2026

Uh oh!

CodFrm Jun 20, 2026

Uh oh!

cyfung1031 Jun 20, 2026

Uh oh!

CodFrm Jun 20, 2026

Uh oh!

cyfung1031 Jun 20, 2026

Uh oh!

CodFrm Jun 20, 2026

Uh oh!

cyfung1031 Jun 20, 2026

Uh oh!

CodFrm Jun 20, 2026

Uh oh!

CodFrm commented Jun 20, 2026 •

edited

Loading

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants

		@@ -1,3 +1,4 @@
		// can be tested with vitest-environment node

Conversation

CodFrm commented Jun 17, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Checklist / 检查清单

Description / 描述

已完成页面

其它

待办(转正式 PR 前)

Screenshots / 截图

Uh oh!

cyfung1031 commented Jun 19, 2026

e2e speed up 7ca40dd

Before

After

Uh oh!

cyfung1031 commented Jun 19, 2026

Uh oh!

cyfung1031 commented Jun 20, 2026

必修问题

中优先级问题

做得好的地方

建议合并门槛

Uh oh!

CodFrm Jun 20, 2026

Choose a reason for hiding this comment

Uh oh!

cyfung1031 Jun 20, 2026

Choose a reason for hiding this comment

Uh oh!

CodFrm Jun 20, 2026

Choose a reason for hiding this comment

Uh oh!

cyfung1031 Jun 20, 2026

Choose a reason for hiding this comment

Uh oh!

CodFrm Jun 20, 2026

Choose a reason for hiding this comment

Uh oh!

cyfung1031 Jun 20, 2026

Choose a reason for hiding this comment

Uh oh!

CodFrm Jun 20, 2026

Choose a reason for hiding this comment

Uh oh!

CodFrm commented Jun 20, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

✅ 必修项（合并门槛）—— 已全部修复

✅ 中优先级 —— 已修复

❌ 暂未处理（需确认 / 后续）

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants

CodFrm commented Jun 17, 2026 •

edited

Loading

e2e speed up `7ca40dd`

CodFrm commented Jun 20, 2026 •

edited

Loading