♻️ 新 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-19T02:27:54Z

9e80ae2 Editor侧栏隐藏后，能以hover方式展开

screen-capture.3.-00.00.15.265-00.00.43.778.mp4

cyfung1031 · 2026-06-19T02:35:42Z

1addb76 ui adjust - BatchActionsBar / FilterBar

screen-capture.4.-00.00.01.876-00.00.26.497.mp4

cyfung1031 · 2026-06-19T02:46:44Z

4aadf3b 统一 Icon (Update / Sync)

cyfung1031 · 2026-06-19T06:45:34Z

@CodFrm 用AI做了这个 preloadable-query.ts 的工具 f8cfabd
它解决了我们一直以来面对的问题：用 useEffect 异步载入然后搞一大堆 mounted 什么。但开启页面时会有空白时间。
我用这个 createPreloadableQuery 做了一个例子

ResourcePane 未使用 createPreloadableQuery

screen-capture.6.-00.00.05.193-00.00.15.282.mp4

ResourcePane 使用了 createPreloadableQuery

screen-capture.5.-00.00.08.695-00.00.20.990.mp4

在按进脚本页时先做 preload
在 tab 确认进入，React开始构建做 query (自动搞 useEffect )
最后会清回 cache

key传 function, 回传 string 即可。简单例是 uuid.
这样 React 就能用 string key 判断要不要改state

CodFrm · 2026-06-19T08:12:29Z

@CodFrm 用AI做了这个 preloadable-query.ts 的工具 f8cfabd

它解决了我们一直以来面对的问题：用 useEffect 异步载入然后搞一大堆 mounted 什么。但开启页面时会有空白时间。

我用这个 createPreloadableQuery 做了一个例子

ResourcePane 未使用 createPreloadableQuery

screen-capture.6.-00.00.05.193-00.00.15.282.mp4

ResourcePane 使用了 createPreloadableQuery

screen-capture.5.-00.00.08.695-00.00.20.990.mp4

在按进脚本页时先做 preload

在 tab 确认进入，React开始构建做 query (自动搞 useEffect )

最后会清回 cache

key传 function, 回传 string 即可。简单例是 uuid.

这样 React 就能用 string key 判断要不要改state

可以考虑状态管理库，比如 zustand

前后色都是浅色，导致字好难看。

我感觉还好，看你有什么更好的想法

cyfung1031 · 2026-06-19T08:23:18Z

zustand

之前研究过但不适合ScriptCat所以一直都没提这方面的PR
(ScriptCat 的 data 不是什么 state 管理问题。本质就是用 extension api 存取。完全不一样）

用这个 createPreloadableQuery 就好。符合 ScriptCat 设计
又不用引入一堆库

For new (unsaved) scripts, scriptClient.info(uuid) via doThrow throws when the UUID is not in storage yet. This propagated to toast.error in usePreloadResourcePane/SettingsPane/StoragePane, whose error toast was misread by saveCurrentEditor's any-toast heuristic as a save success, causing installScriptByCode to exit before the script was actually saved. GM API e2e tests then found failed=-1 because the test script never ran. Fix: add .catch(() => null/[]) at the fetchScript and permissionClient.getScriptPermissions callsites so unsaved scripts return empty results instead of throwing. Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>

cyfung1031 · 2026-06-19T09:54:47Z

33e514c
6d5c403

之前 ArcoDesign 内部一直使用 dayjs，去除不了
现在可以直接用 Intl.RelativeTimeFormat 做 semTime 了

https://developer.mozilla.org/en/docs/Web/JavaScript/Reference/Global_Objects/Intl/RelativeTimeFormat

- Replace Arco Design + UnoCSS with the current shadcn/ui + Tailwind CSS v4 stack - Replace all `translation.json` references with the actual per-namespace file structure (common.json, popup.json, etc.) Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>

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

e2e speed up `7ca40dd`

Before

After

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

统一 Icon (Update / Sync)

4aadf3b

cyfung1031 added 2 commits June 19, 2026 15:08

Implement ResourcePane with preloadable-query

f8cfabd

🐛 修复资源面板预加载生命周期

2f9c23e

cyfung1031 added 3 commits June 19, 2026 16:45

⚡️ preload editor settings and storage panes

f171308

⚡️ preload script list dialogs

003c1e6

⚡️ preload skill detail and configuration

1e8335f

cyfung1031 added 2 commits June 19, 2026 17:14

fix AI Code

2a3faf8

fix AI code

6a5ee91

cyfung1031 and others added 7 commits June 19, 2026 17:49

update react libraries

48f0aa0

update tailwind-merge

0fa99e6

vitest fix

60489b1

logic.ts: drop dayjs

33e514c

整理 logic.test.ts, 加入更多测试

47109ce

drop dayjs

6d5c403

cyfung1031 and others added 5 commits June 19, 2026 19:00

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 2 commits June 19, 2026 21:11

⚡️ optimize Playwright launch overhead

16a26d3

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

e0e87b4

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 123 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 19, 2026

Uh oh!

cyfung1031 commented Jun 19, 2026 •

edited

Loading

Uh oh!

CodFrm commented Jun 19, 2026

ResourcePane 未使用 createPreloadableQuery

ResourcePane 使用了 createPreloadableQuery

Uh oh!

cyfung1031 commented Jun 19, 2026 •

edited

Loading

Uh oh!

cyfung1031 commented Jun 19, 2026 •

edited

Loading

Uh oh!

cyfung1031 commented Jun 19, 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!

cyfung1031 commented Jun 19, 2026

Uh oh!

cyfung1031 commented Jun 19, 2026

Uh oh!

cyfung1031 commented Jun 19, 2026

Uh oh!

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

Uh oh!

ResourcePane 未使用 createPreloadableQuery

ResourcePane 使用了 createPreloadableQuery

Uh oh!

CodFrm commented Jun 19, 2026

ResourcePane 未使用 createPreloadableQuery

ResourcePane 使用了 createPreloadableQuery

Uh oh!

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

Uh oh!

Uh oh!

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

Uh oh!

Uh oh!

cyfung1031 commented Jun 19, 2026

e2e speed up 7ca40dd

Before

After

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants

CodFrm commented Jun 17, 2026 •

edited

Loading

cyfung1031 commented Jun 19, 2026 •

edited

Loading

cyfung1031 commented Jun 19, 2026 •

edited

Loading

cyfung1031 commented Jun 19, 2026 •

edited

Loading

e2e speed up `7ca40dd`