♻️ 新 UI 重写:shadcn/ui + Tailwind v4 + React 19 全面重构表现层#1514
Draft
CodFrm wants to merge 180 commits into
Draft
Conversation
移除基于 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
新增 no-i18n-default-value / no-raw-color-classname 自定义规则及 harness 测试；eslint.config 升级 ecmaVersion、react-hooks recommended-latest，将 exhaustive-deps / jsx-no-literals / no-i18n-default-value 提级为 error，禁止 @radix-ui/react-* 单包导入。按约定全量整改：补 data-slot、改用设计令牌、合并 radix-ui 导入，并同步 AGENTS/DEVELOP/copilot 文档。
This comment was marked as outdated.
This comment was marked as outdated.
- 恢复 data-panel.test.tsx（组件仍被 5 处引用）与 toast.test.ts 的 dismiss/promise 透传用例，断言均已对照当前实现确认 - AGENTS.md 修正 no-restricted-syntax forwardRef 作用域（实为 src/pages/**，非 ui/**），并补充 projectService 类型感知规则（no-floating-promises 等）说明
This comment was marked as outdated.
This comment was marked as outdated.
Collaborator
|
项目已经使用 React 19。当前重点是降低 Options UI 的 initial loading、控制大量 Script 与 Monaco Editor 的资源占用，并修复 Search race condition。
已解决或无需处理
推荐实施顺序
|
Module-level `events` was shared across all SystemConfig instances, causing test-isolation failures: leftover subscriptions from prior tests inflated listenerCount, suppressing the `watch` call and leaving `resolveRead` unassigned in the delayed-read test. Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
EditorTabs, EditorToolbar, ScriptListPanel, MobileEditor all lacked React.memo, causing them to re-render on every parent state change (e.g. cursor-position status updates, markChanged on keypress). Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
- useMemo for activeTab (replaces bare .find on every render) - useCallback for handleSaveActive/As/Run — read active state from stateRef so deps stay minimal (just the doSave/As/Run functions) - Stable dispatch wrappers: onActivateTab, onCloseOthers/Left/RightTab, onNewTab, onOpenScript (dispatch from useReducer is always stable) - onBack stabilised with useCallback([navigate]) - All inline lambda props replaced with the stable versions above, so the four React.memo child components can now actually skip renders Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
editorArea was recreated as inline JSX on every ScriptEditor render, making MobileEditor.children always a new reference and defeating the React.memo added to MobileEditor. Wrap it in useMemo with deps [state.tabs, state.activeUuid, subView, activeTab, doSave, doSaveAs, doRun] so the children reference is stable across unrelated renders (e.g. cursor-position status updates). Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
2 participants
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Checklist / 检查清单
设计稿.pen.zip
Description / 描述
使用 shadcn/ui + Tailwind CSS v4 + React 19 对
src/pages/表现层进行从零重写,替换原有的 Arco Design + UnoCSS 技术栈。设计系统(颜色令牌、组件、布局/动效/状态规范)统一沉淀在docs/DESIGN.md,所有页面同时适配亮色/暗色主题(Tailwinddark:变体 +src/index.css设计令牌)。已完成页面
核心管理页
独立页面
Agent 套件(7 页)
其它
docs/DESIGN.md,更新docs/DEVELOP.md/docs/README.md等贡献者文档待办(转正式 PR 前)
Screenshots / 截图