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

.github/copilot-instructions.md

@@ -72,8 +72,8 @@ User scripts are compiled with sandbox context isolation:
 ## Technology Stack
 
 - **React 18** - Component framework with automatic runtime
-- **Arco Design** - UI component library (`@arco-design/web-react`)
-- **UnoCSS** - Atomic CSS framework for styling
+- **shadcn/ui** - UI component library built on Radix UI
+- **Tailwind CSS** - Utility-first CSS framework for styling
 - **Rspack** - Fast bundler (Webpack alternative) with SWC
 - **TypeScript** - Type-safe development
 
@@ -95,7 +95,7 @@ pnpm run coverage      # Generate coverage reports
 ```
 
 **Testing Patterns:**
-- Uses Vitest with jsdom environment
+- Uses Vitest with jsdom/happy-dom environment
 - Chrome extension APIs mocked via `@Packages/chrome-extension-mock`
 - Message system testing with `MockMessage` classes
 - Sandbox testing validates script isolation

.github/workflows/build.yaml

@@ -5,7 +5,7 @@ on:
     branches:
       - main
       - release/*
-      - dev
+      - develop/*
     paths-ignore:
       - ".github/**"
       - ".gitignore"

.github/workflows/test.yaml

@@ -5,7 +5,6 @@ on:
     branches:
       - main
       - release/*
-      - dev
       - develop/*
   pull_request:
 

.husky/pre-commit

@@ -6,7 +6,23 @@ if [ "$SKIP_PRE_COMMIT" = "1" ]; then
   exit 0
 fi
 
-pnpm run lint || exit 1
+lint_files=$(mktemp)
+git diff --cached --name-only -z --diff-filter=ACMR -- "*.js" "*.jsx" "*.ts" "*.tsx" "*.mjs" "*.cjs" > "$lint_files"
+
+if [ -s "$lint_files" ]; then
+  pnpm run typecheck || {
+    rm -f "$lint_files"
+    exit 1
+  }
+  xargs -0 pnpm exec eslint < "$lint_files" || {
+    rm -f "$lint_files"
+    exit 1
+  }
+else
+  echo "No staged JS/TS files, skipping lint checks"
+fi
+
+rm -f "$lint_files"
 
 # 在 main 或 release/* 分支上提交时额外跑测试
 branch=$(git rev-parse --abbrev-ref HEAD)

AGENTS.md

@@ -14,8 +14,8 @@ This file provides guidance to AI coding agents (Claude Code, etc.) when working
 
 > **Before any translation/localization work, read [`docs/translation/README.md`](docs/translation/README.md)** —
 > the single source of truth for translation. Whenever you add or change localized content
-> (`src/locales/<locale>/translation.json`, per-language docs, UI copy, or test snapshots), you must first read
-> that guide and follow the matching `docs/translation/terminology-<locale>.md` if it exists.
+> (`src/locales/<locale>/*.json` namespace files, per-language docs, UI copy, or test snapshots), you must first
+> read that guide and follow the matching `docs/translation/terminology-<locale>.md` if it exists.
 
 > **Before adding, editing, reorganizing, or reviewing any contributor doc (this file or `docs/*`), read
 > [`docs/DOC-MAINTENANCE.md`](docs/DOC-MAINTENANCE.md)** — keep the doc set organized (links resolve, index
@@ -27,7 +27,12 @@ This file provides guidance to AI coding agents (Claude Code, etc.) when working
 
 ## Project Overview
 
-ScriptCat — Manifest V3 browser extension that runs Tampermonkey-compatible user scripts. TypeScript + React 18 + Rspack. Package manager is **pnpm** (preinstall enforces).
+ScriptCat — Manifest V3 browser extension that runs Tampermonkey-compatible user scripts. TypeScript + React 19 + Rspack. Package manager is **pnpm** (preinstall enforces).
+
+> **UI stack.** The presentation layer (`src/pages/`) is built with **shadcn/ui + Tailwind CSS v4** on
+> **React 19** (migrated from Arco Design + UnoCSS). The concrete UI/theme rules live in
+> [`docs/DEVELOP.md`](docs/DEVELOP.md); the design system (color tokens, components, layout/motion/state
+> patterns, new-page recipe) lives in [`docs/DESIGN.md`](docs/DESIGN.md) — read it before building any page.
 
 ## Engineering Principles
 

components.json

@@ -0,0 +1,21 @@
+{
+  "$schema": "https://ui.shadcn.com/schema.json",
+  "style": "new-york",
+  "rsc": false,
+  "tsx": true,
+  "tailwind": {
+    "config": "",
+    "css": "src/index.css",
+    "baseColor": "neutral",
+    "cssVariables": true,
+    "prefix": ""
+  },
+  "aliases": {
+    "components": "@App/pages/components",
+    "utils": "@App/pkg/utils/cn",
+    "ui": "@App/pages/components/ui",
+    "lib": "@App/pkg",
+    "hooks": "@App/pages/hooks"
+  },
+  "iconLibrary": "lucide"
+}

docs/ARCHITECTURE.md

@@ -481,7 +481,7 @@ Output goes to `dist/ext/src/[name].js` (cleaned each build). Notable behavior:
   test-only — defined in `vitest.config.ts` / `tsconfig.json`, not in the Rspack build).
 - **Dev vs prod** via `NODE_ENV`: dev enables watch + inline source maps (skipped when `NO_MAP=true`, needed
   for incognito); prod minifies with SWC + Lightning CSS and drops debug.
-- **Code splitting** pulls big libs into named `lib_*` chunks (react, monaco, arco, dnd-kit, eslint, message),
+- **Code splitting** pulls big libs into named `lib_*` chunks (react, monaco, radix-ui, dnd-kit, eslint, message),
   but **never splits** `service_worker`, `content`, `inject`, `scripting`, or the workers — MV3 requires those
   to be single self-contained files.
 - **`CopyRspackPlugin`** copies [`src/manifest.json`](../src/manifest.json) — its `transform` rewrites the beta
@@ -565,7 +565,7 @@ premature abstraction.
 
 ## 11. Testing the Internals
 
-- **Unit (Vitest + jsdom).** Co-locate `*.test.ts` next to source. `chrome.*` is mocked via
+- **Unit (Vitest + jsdom/happy-dom).** Co-locate `*.test.ts` next to source. `chrome.*` is mocked via
   [`@Packages/chrome-extension-mock`](../packages/chrome-extension-mock) (`tests/vitest.setup.ts`); message-bus
   behavior uses `MockMessage`. Run one file: `pnpm test -- --run path/to/file.test.ts`.
 - **TDD first.** Write the failing test before the implementation. When a test fails, fix the code — don't edit

docs/CONTRIBUTING_RU.md

@@ -69,9 +69,9 @@ pnpm start
 
 Файлы перевода ScriptCat размещены на GitHub. Мы приветствуем вклад через Pull Request.
 
-- Файлы перевода находятся в каталоге [`src/locales`](https://github.com/scriptscat/scriptcat/tree/main/src/locales); для каждого языка есть отдельный файл `<язык>/translation.json`
-- **Улучшение существующего перевода**: отредактируйте соответствующий `translation.json` напрямую
-- **Добавление нового языка**: создайте каталог в `src/locales/` (например, `fr-FR`), скопируйте `en-US/translation.json` в качестве шаблона и переведите строки, затем зарегистрируйте локаль в `src/locales/locales.ts`
+- Файлы перевода находятся в каталоге [`src/locales`](https://github.com/scriptscat/scriptcat/tree/main/src/locales); для каждого языка есть каталог `<язык>/`, разделённый по пространствам имён на несколько файлов `*.json` (например, `common.json`, `popup.json`, `script.json`)
+- **Улучшение существующего перевода**: отредактируйте нужный файл `*.json` соответствующего пространства имён напрямую
+- **Добавление нового языка**: создайте каталог в `src/locales/` (например, `fr-FR`), скопируйте файлы `*.json` каждого пространства имён и `index.ts` из `en-US/` в качестве шаблона и переведите строки, затем зарегистрируйте локаль в `src/locales/locales.ts`
 - По завершении создайте Pull Request в ветку `main`
 
 ## Участие в разработке
@@ -86,8 +86,8 @@ pnpm run lint
 Для разработки страниц ScriptCat используются следующие технологии:
 
 - [React](https://reactjs.org/)
-- UI-фреймворк [arco](https://arco.design)
-- CSS-фреймворк [unocss](https://unocss.dev/interactive/)
+- UI-фреймворк [shadcn/ui](https://ui.shadcn.com/) (на основе [Radix UI](https://www.radix-ui.com/))
+- CSS-фреймворк [Tailwind CSS](https://tailwindcss.com/)
 - Инструмент сборки RsPack [rspack](https://rspack.dev/)
 
 Если вы хотите запустить ScriptCat локально, вы можете использовать следующую команду:

docs/CONTRIBUTING_ZH.md

@@ -71,9 +71,9 @@ pnpm start
 
 ScriptCat 的翻译文件托管在 GitHub 上，欢迎通过 Pull Request 贡献翻译。
 
-- 翻译文件位于 [`src/locales`](https://github.com/scriptscat/scriptcat/tree/main/src/locales)，每种语言对应一个 `<语言代码>/translation.json`
-- **改进已有翻译**：直接编辑对应语言的 `translation.json`
-- **新增语言**：在 `src/locales/` 下新建对应语言代码目录（如 `fr-FR`），复制 `en-US/translation.json` 作为模板进行翻译，并在 `src/locales/locales.ts` 中注册
+- 翻译文件位于 [`src/locales`](https://github.com/scriptscat/scriptcat/tree/main/src/locales)，每种语言对应一个 `<语言代码>/` 目录，按命名空间拆分为多个 `*.json` 文件（如 `common.json`、`popup.json`、`script.json`）
+- **改进已有翻译**：直接编辑对应语言目录下相应命名空间的 `*.json` 文件
+- **新增语言**：在 `src/locales/` 下新建对应语言代码目录（如 `fr-FR`），复制 `en-US/` 下的各命名空间 `*.json` 与 `index.ts` 作为模板进行翻译，并在 `src/locales/locales.ts` 中注册
 - 完成后向 `main` 分支提交 Pull Request 即可
 
 ## 参与开发
@@ -88,8 +88,8 @@ pnpm run lint
 ScriptCat 的页面开发使用了以下技术：
 
 - [React](https://reactjs.org/)
-- UI 框架 [arco](https://arco.design)
-- CSS 框架 [unocss](https://unocss.dev/interactive/)
+- UI 框架 [shadcn/ui](https://ui.shadcn.com/)（基于 [Radix UI](https://www.radix-ui.com/)）
+- CSS 框架 [Tailwind CSS](https://tailwindcss.com/)
 - RsPack 打包工具 [rspack](https://rspack.dev/)
 
 如果你想在本地运行 ScriptCat，可以使用以下命令：