From ac0a6808ec9589b01ed0ff669803aaf88b9734c4 Mon Sep 17 00:00:00 2001
From: Sakurasan <26715255+Sakurasan@users.noreply.github.com>
Date: Sat, 29 Aug 2026 23:27:31 +0800
Subject: [PATCH] refactor: frontend TS migration + Tailwind4/daisyUI5 unify +
BUILDPLATFORM docker build
- migrate frontend to TypeScript (vue-tsc strict in build), upgrade all deps to latest (Vite 8, Tailwind 4, daisyUI 5, Pinia 4, vue-router 5)
- restructure frontend dirs (api/components/common/layouts/styles/types/views)
- drop Element Plus, add daisyUI TagInput; main CSS 490KB->163KB, entry JS 618KB->1.3KB
- rewrite Dockerfile(.cn): frontend/backend stages pinned to $BUILDPLATFORM, CGO_ENABLED=0 cross-compile, no QEMU in multi-arch builds; add .dockerignore
- local dev: Vite /api proxy + make dev targets; go:embed all:dist with .gitkeep so backend runs without prior frontend build
- fix latent bugs: Keys.vue users ref, Settings.vue undefined userStore, Login.vue Ref-as-error display, res.error misuse
- add REFACTOR_PLAN.md (phased refactor log)
---
.dockerignore | 21 +
.gitignore | 9 +-
REFACTOR_PLAN.md | 230 ++
cmd/openteam/dist/.gitkeep | 0
cmd/openteam/main.go | 4 +-
deploy/docker/Dockerfile | 39 +-
deploy/docker/Dockerfile.cn | 44 +-
frontend/README.md | 36 +-
frontend/index.html | 2 +-
frontend/package.json | 53 +-
frontend/pnpm-lock.yaml | 2759 +++++++----------
frontend/postcss.config.js | 6 -
frontend/src/App.vue | 13 +-
.../src/{utils/request.js => api/client.ts} | 29 +-
.../{ => common}/LineSegmentFlow.vue | 57 +-
.../components/{ => common}/Pagination.vue | 46 +-
.../components/{ => common}/QRCodeCard.vue | 26 +-
frontend/src/components/common/TagInput.vue | 104 +
.../src/components/{ => common}/Toast.vue | 30 +-
.../components/dashboard/BreadcrumbHeader.vue | 33 +-
frontend/src/components/dashboard/Sidebar.vue | 46 +-
frontend/src/composables/toast.ts | 24 +
.../DashboardLayout.vue} | 25 +-
frontend/src/{main.js => main.ts} | 7 +-
frontend/src/router/index.js | 53 -
frontend/src/router/index.ts | 18 +
frontend/src/stores/{auth.js => auth.ts} | 105 +-
frontend/src/stores/{key.js => key.ts} | 59 +-
frontend/src/stores/{user.js => user.ts} | 64 +-
.../src/stores/{webauth.js => webauth.ts} | 44 +-
frontend/src/style.css | 11 -
frontend/src/styles/main.css | 10 +
frontend/src/types/index.ts | 111 +
.../utils/{format-date.js => format-date.ts} | 8 +-
.../utils/{router_menu.js => router_menu.ts} | 92 +-
frontend/src/views/Home.vue | 21 +-
frontend/src/views/{ => auth}/Login.vue | 32 +-
frontend/src/views/{ => auth}/Signup.vue | 11 +-
frontend/src/views/dashboard/KeyNew.vue | 35 +-
frontend/src/views/dashboard/KeyView.vue | 32 +-
frontend/src/views/dashboard/Keys.vue | 59 +-
frontend/src/views/dashboard/Overview.vue | 24 +-
frontend/src/views/dashboard/Profile.vue | 55 +-
frontend/src/views/dashboard/Settings.vue | 33 +-
frontend/src/views/dashboard/TokenNew.vue | 30 +-
frontend/src/views/dashboard/Tokens.vue | 42 +-
frontend/src/views/dashboard/User.vue | 56 +-
frontend/src/views/dashboard/UserNew.vue | 26 +-
frontend/src/views/dashboard/UserView.vue | 36 +-
.../src/views/{404.vue => error/NotFound.vue} | 6 +-
frontend/src/vite-env.d.ts | 10 +
frontend/tailwind.config.js | 16 -
frontend/tsconfig.json | 21 +
frontend/{vite.config.js => vite.config.ts} | 21 +-
makefile | 31 +-
55 files changed, 2497 insertions(+), 2318 deletions(-)
create mode 100644 .dockerignore
create mode 100644 REFACTOR_PLAN.md
create mode 100644 cmd/openteam/dist/.gitkeep
delete mode 100644 frontend/postcss.config.js
rename frontend/src/{utils/request.js => api/client.ts} (70%)
rename frontend/src/components/{ => common}/LineSegmentFlow.vue (87%)
rename frontend/src/components/{ => common}/Pagination.vue (88%)
rename frontend/src/components/{ => common}/QRCodeCard.vue (91%)
create mode 100644 frontend/src/components/common/TagInput.vue
rename frontend/src/components/{ => common}/Toast.vue (68%)
create mode 100644 frontend/src/composables/toast.ts
rename frontend/src/{views/DashBoard.vue => layouts/DashboardLayout.vue} (90%)
rename frontend/src/{main.js => main.ts} (62%)
delete mode 100644 frontend/src/router/index.js
create mode 100644 frontend/src/router/index.ts
rename frontend/src/stores/{auth.js => auth.ts} (65%)
rename frontend/src/stores/{key.js => key.ts} (67%)
rename frontend/src/stores/{user.js => user.ts} (58%)
rename frontend/src/stores/{webauth.js => webauth.ts} (80%)
delete mode 100644 frontend/src/style.css
create mode 100644 frontend/src/styles/main.css
create mode 100644 frontend/src/types/index.ts
rename frontend/src/utils/{format-date.js => format-date.ts} (80%)
rename frontend/src/utils/{router_menu.js => router_menu.ts} (57%)
rename frontend/src/views/{ => auth}/Login.vue (90%)
rename frontend/src/views/{ => auth}/Signup.vue (91%)
rename frontend/src/views/{404.vue => error/NotFound.vue} (94%)
create mode 100644 frontend/src/vite-env.d.ts
delete mode 100644 frontend/tailwind.config.js
create mode 100644 frontend/tsconfig.json
rename frontend/{vite.config.js => vite.config.ts} (51%)
diff --git a/.dockerignore b/.dockerignore
new file mode 100644
index 0000000..b799c40
--- /dev/null
+++ b/.dockerignore
@@ -0,0 +1,21 @@
+# 版本管理
+.git
+.gitignore
+
+# 前端依赖与本地构建产物(镜像内由 pnpm 重新安装、重新构建)
+**/node_modules
+frontend/dist
+web
+
+# Go 构建产物
+bin
+cmd/openteam/dist
+
+# 文档与 CI
+doc
+.envci.yaml
+tag.yaml
+
+# 日志与数据库
+*.log
+*.db
diff --git a/.gitignore b/.gitignore
index 17faf3d..4208c99 100644
--- a/.gitignore
+++ b/.gitignore
@@ -3,4 +3,11 @@ test/
demo/
*.log
*.db
-.env
\ No newline at end of file
+.env
+
+# 构建产物(make web 生成,由 go:embed 打进二进制);保留 .gitkeep 占位使未构建前也能编译
+cmd/openteam/dist/*
+!cmd/openteam/dist/.gitkeep
+
+# 误生成的目录(仅含 dist/node_modules)
+web/
diff --git a/REFACTOR_PLAN.md b/REFACTOR_PLAN.md
new file mode 100644
index 0000000..8bda6b2
--- /dev/null
+++ b/REFACTOR_PLAN.md
@@ -0,0 +1,230 @@
+# 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` 改 `
+