插件-component统一

[Neo-Neooo]

与frontend-component系统统一，还有global.css也是统一

[linear]

XEN-68 插件-component统一

[Neo-Neooo]

是否要在 extension/ 里复制 UI + CSS？

不需要复制整套代码；应当把设计 Token 和 UI 组件抽到一个 共享包，由 frontend/ 和 extension/ 各自打包时引用。这样才能保证：

目标	复制一份	引用共享包
样式改动一次全局生效	✗ 手动同步，易出错	✓ 自动随包版本更新
体积	✗ 会翻倍	✓ 只有一份
维护成本	✗ 双份 bug 追踪	✓ 单一来源

社区在 Next.js + Chrome Extension 等多端项目里也普遍推荐「monorepo + shared package」做法 (Reddit, Pixelmatters)；Stack Overflow 也确认可行 (Stack Overflow)。

---

推荐目录结构（简化）

root/
├─ packages/
│  └─ ui/               # <== 共享包：Token + 组件 (TS + CSS)
├─ frontend/            # Web 应用
│  └─ src/...
├─ extension/           # Chrome 插件
│  ├─ src/...
│  └─ manifest.json
└─ backend/

• packages/ui
  • globals.css → 只含 @theme inline Token。
  • components/ → React/Vue/Svelte 组件（按你的栈）。
  • index.ts 暴露组件 + 全局样式入口。
• frontend & extension
  • npm install ../packages/ui（或用 pnpm/Yarn workspaces直接依赖）。
  • 各自的构建工具（Vite、Webpack、Turbopack 等）把依赖打进最终产物。

---

Chrome Extension 打包要点

环节	需注意
Manifest	把打包后的 ui.css 或入口 JS 列到 content_scripts / action.default_popup 的 css / js 字段。Manifest V3 不能从磁盘外部 file:// 动态引入，必须打进扩展目录。
Bundler	给扩展独立入口：popup.tsx、content.ts 等；在代码里 import "@myorg/ui/globals.css" or import { Button } from "@myorg/ui". 打包时 CSS/JS 一起产出到 `dist/extension/*.css
权限	UI 层面与 token 无关；仍需最小化 "permissions"、"host_permissions" 以便上架。
热更新	在 dev 模式用 web-ext 或 crxjs 监视 packages/ui 改动，自动重载浏览器。

---

单一 token 文件如何服务多端？

1. 设计 token（@theme inline）：
   • 放在 packages/ui/globals.css。
   • 两端引入同一文件 ⇒ 颜色/间距统一。
2. Tailwind 配置：
   • 在根目录 tailwind.config.mjs 写 content: ["./packages/**/*.{js,ts,tsx}", "./frontend/src/**/*", "./extension/src/**/*"]。
   • 保证扫描到 所有端的 JSX，生成同一套类名。
3. 组件：
   • 组件内部只用 token‑驱动的类，如 bg-primary、focus-ring。
   • 改 token 或 @layer components 定义时，两端 UI 同步更新。

---

小结

• 抽共享包，不复制。
• 以 @theme inline + @layer components 方式集中管理 Token 和语义化类。
• 在 manifest 中引用编译后的资源，确保扩展打包完整。
  这样就能在一个仓库里维护一次设计系统，同时保证网页和 Chrome 插件都保持一致、可持续升级。

[Neo-Neooo]

@cubxxw 我把ui 组件统一抽离出，放到packges目录里，fyi，我来操作吧

root/
├─ packages/
│ └─ ui/ # <== 共享包：Token + 组件 (TS + CSS)
├─ frontend/ # Web 应用
│ └─ src/...
├─ extension/ # Chrome 插件
│ ├─ src/...
│ └─ manifest.json
└─ backend/