♻️ 新 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

CodFrm · 2026-06-18T10:03:46Z

混合我觉得不如直接选定 happy-dom

可能页面也加了不少单元测试，毕竟TDD，卡起来了

cyfung1031 · 2026-06-18T10:07:43Z

混合我觉得不如直接选定 happy-dom

可能页面也加了不少单元测试，毕竟TDD，卡起来了

可以。只有三个要加一下支持
不加就这样写个 comment

cyfung1031 · 2026-06-18T10:14:38Z

混合我觉得不如直接选定 happy-dom

可能页面也加了不少单元测试，毕竟TDD，卡起来了

可不可以减少那些 React 页面测试？好无谓
反正它在用 node.js 在模拟
你要做测试也有 e2e
vitest 做 React 页面测试好慢又无用

GitHub 跑要兩分半鐘

CodFrm · 2026-06-18T10:18:50Z

混合我觉得不如直接选定 happy-dom

可能页面也加了不少单元测试，毕竟TDD，卡起来了

可不可以减少那些 React 页面测试？好无谓

反正它在用 node.js 在模拟

你要做测试也有 e2e

React 页面测试好慢又无用

还是保留吧，都是ci自动化跑，也没关系

cyfung1031 · 2026-06-18T10:46:49Z

307b2c6

加速 50秒

cyfung1031 · 2026-06-18T11:46:59Z

快了 7秒

- CodePane: 删除未使用的 useEffect / MarkerSeverity 导入 - 消除 60 处 react/jsx-no-literals warning，裸 JSX 文本统一包成 {} 表达式（渲染结果不变） - eslint --fix 的格式化修正（import 折行、JSX 换行） lint 0 error 0 warning；全量测试 2735 全绿

cyfung1031 · 2026-06-18T13:46:11Z

我直接改了。你看到不好就再改吧

e6eb2fc

CodFrm · 2026-06-18T14:08:58Z

我直接改了。你看到不好就再改吧

e6eb2fc

感觉不好，还是改回去吧，或者其它形式，至少这个形式没有之前好

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 2 commits June 18, 2026 19:07

测试工具版本提升

600bb92

github 测试 timeout

3e16c70

cyfung1031 added 3 commits June 18, 2026 19:23

github 测试 timeout

c36dcd1

@testing-library/dom

51a3e90

vitest页面测试加速

307b2c6

cyfung1031 added 5 commits June 18, 2026 19:55

vitest页面测试加速

c486230

vitest页面测试加速

1e80e27

🔧 scope pre-commit lint to staged files

d8b0e1c

vitest页面测试调整

3478ce9

vitest页面测试调整

294a69c

cyfung1031 and others added 9 commits June 18, 2026 20:57

修復 E2E

9132c08

t("change_theme")

3a4c545

fix import page enabled position

b4344c8

fix version display

b0faea2

Update utils.ts

f384210

tsx fix

f1b70d6

🎨 优化安装页权限风险排序

8f676d0

space alignment fix

e6eb2fc

cyfung1031 added 3 commits June 18, 2026 22:48

fix

f87172e

follow table view

2d478dc

follow table view

f8aeaa9

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 93 commits into
release/v1.4-agentfrom
develop/new-ui

CodFrm commented Jun 17, 2026 •

edited

Loading

Uh oh!

CodFrm commented Jun 18, 2026

Uh oh!

cyfung1031 commented Jun 18, 2026

Uh oh!

cyfung1031 commented Jun 18, 2026 •

edited

Loading

Uh oh!

CodFrm commented Jun 18, 2026

Uh oh!

cyfung1031 commented Jun 18, 2026 •

edited

Loading

Uh oh!

cyfung1031 commented Jun 18, 2026

Uh oh!

cyfung1031 commented Jun 18, 2026

Uh oh!

CodFrm commented Jun 18, 2026

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants

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!

CodFrm commented Jun 18, 2026

Uh oh!

cyfung1031 commented Jun 18, 2026

Uh oh!

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

Uh oh!

Uh oh!

CodFrm commented Jun 18, 2026

Uh oh!

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

Uh oh!

Uh oh!

cyfung1031 commented Jun 18, 2026

Uh oh!

cyfung1031 commented Jun 18, 2026

Uh oh!

CodFrm commented Jun 18, 2026

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants

CodFrm commented Jun 17, 2026 •

edited

Loading

cyfung1031 commented Jun 18, 2026 •

edited

Loading

cyfung1031 commented Jun 18, 2026 •

edited

Loading