From 253e968c9df781d2306ab315e98624d4d106806f Mon Sep 17 00:00:00 2001 From: Sakurasan <26715255+Sakurasan@users.noreply.github.com> Date: Sun, 30 Aug 2026 12:12:12 +0800 Subject: [PATCH] chore: restore REFACTOR_PLAN.md (frontend refactoring plan) --- REFACTOR_PLAN.md | 302 +++++++++++++++++++++++++++++++++++++++++++++++ 1 file changed, 302 insertions(+) create mode 100644 REFACTOR_PLAN.md diff --git a/REFACTOR_PLAN.md b/REFACTOR_PLAN.md new file mode 100644 index 0000000..fb02b6b --- /dev/null +++ b/REFACTOR_PLAN.md @@ -0,0 +1,302 @@ +# opencatd-open 重构计划 + +> 本文档是重构过程的唯一进度记录,每完成一个阶段立即更新「阶段状态」与「执行记录」。 +> 前后端同仓库,本期(第一期)只重构前端 + 前端相关的构建脚本;后端代码不在本期范围。 + +- 计划创建时间:2026-08-29 +- 当前分支:`team`(按约定不提交,所有改动留在工作区,由维护者回来后审查) +- 项目根目录:`/Users/cjun/Code/Go/src/opencatd-open` +- 前端目录:`frontend/`(构建产物 `dist/` 由 Go 通过 `//go:embed dist/*` 嵌入 `cmd/openteam`) + +## 一、背景与现状 + +| 项 | 现状 | 问题 | +| --- | --- | --- | +| 技术栈 | Vue 3.5 + Vite 6 + JavaScript,无 TS | 依赖偏旧;无类型约束 | +| UI 库 | Element Plus 与 daisyUI/Tailwind 3 **两套并存** | 9 个视图使用 `el-*` 组件,风格割裂、包体冗余 | +| 目录结构 | components/views 仅按 dashboard 简单分层 | 组件分类不规范,无 api/layouts/types 分层 | +| 构建脚本 | Dockerfile 三阶段,node 阶段未指定 `$BUILDPLATFORM` | 多架构构建时前端被 QEMU 模拟重复编译,极慢 | +| 依赖声明 | pinia、@iconify/vue 误放 devDependencies | 分类错误 | +| Dockerfile 杂项 | 存在无效的 `CMD ["go mod tidy","go mod download"]`;node:20 基础镜像 | 需清理/升级 | +| 杂项 | 根目录 `web/`(仅 dist + node_modules,未跟踪) | 疑似误构建产物,暂不动,仅记录 | + +## 二、已确认的决策(2026-08-29,维护者离开前确认) + +1. **迁移到 TypeScript**(全量,含 vue-tsc 类型检查)。 +2. **UI 统一到 Tailwind/daisyUI**,移除 Element Plus,`el-*` 组件全部重写;接受外观变化。 +3. **不提交**:所有改动留在工作区,按阶段推进,不做 git commit。 + +其余由执行者自行决定的默认约定: + +- 依赖一律升到**当前最新稳定版**(含 Tailwind 4 / daisyUI 5 / Vite 7+ / Pinia 3 等大版本跨越)。 +- Element Plus 在被移除前不再投入升级成本(Phase 4 直接删除)。 +- 每阶段验收标准:`pnpm build`(后期含 `vue-tsc`)通过 + 页面路由/交互逻辑与重构前等价。 +- 计划文档放项目根目录 `REFACTOR_PLAN.md`。 + +## 三、阶段计划 + +| 阶段 | 内容 | 状态 | +| --- | --- | --- | +| Phase 0 | 创建本计划文档 | ✅ 完成 | +| Phase 1 | 依赖全部升级到最新版(Tailwind 4 / daisyUI 5 迁移、pinia 归位 dependencies) | ✅ 完成 | +| Phase 2 | TypeScript 迁移(tsconfig、vue-tsc、全量 .ts/.vue 改写) | ✅ 完成 | +| Phase 3 | 目录结构规范化(api / components / composables / layouts / types / views 分层) | ✅ 完成 | +| Phase 4 | 移除 Element Plus,统一 Tailwind/daisyUI 重写全部组件 | ✅ 完成 | +| Phase 5 | Docker / makefile 构建脚本更新(前端 `$BUILDPLATFORM` 单次编译) | ✅ 完成 | +| Phase 6 | 最终验证(前端 build + Go embed 编译),收尾文档 | ✅ 完成 | + +## 四、各阶段详细方案 + +### Phase 1 — 依赖升级 + +- `vite`、`@vitejs/plugin-vue`、`@vitejs/plugin-basic-ssl`、`vue`、`vue-router`、`axios`、`lucide-vue-next`、`qrcode.vue`、`@simplewebauthn/browser`、`@iconify/vue`、`@iconify-json/*` → 最新。 +- `pinia` → v3 并移入 dependencies;`@iconify/vue` 移入 dependencies。 +- Tailwind 3 → 4:改用 `@tailwindcss/vite` 插件,删除 `postcss.config.js`/`autoprefixer`/`tailwind.config.js`,`style.css` 改为 `@import "tailwindcss"` + `@plugin "daisyui"` + `@theme` 定义原有 daisyUI 主题集合(light/dark/cupcake/emerald/pastel)。 +- `daisyui` → v5。 +- element-plus 保持现状(Phase 4 删除)。 +- 验收:`pnpm build` 通过。 + +### Phase 2 — TypeScript 迁移 + +- 新增 `tsconfig.json`(bundler 解析策略 + `@` 别名路径映射)、`src/vite-env.d.ts`、`env.d.ts`(`import.meta.env` 类型)。 +- `vite.config.js` → `vite.config.ts`;`src/**/*.js`(router/stores/utils/main)→ `.ts`。 +- 全部 `.vue` 改 `