Refactor frontend to Vue 3 + Vite + Pinia + Cypress E2E
- Replace single-file 8441-line HTML with Vue 3 SPA - Pinia stores: auth, oils, recipes, diary, ui - Composables: useApi, useDialog, useSmartPaste, useOilTranslation - 6 shared components: RecipeCard, RecipeDetailOverlay, TagPicker, etc. - 9 page views: RecipeSearch, RecipeManager, Inventory, OilReference, etc. - 14 Cypress E2E test specs (113 tests), all passing - Multi-stage Dockerfile (Node build + Python runtime) - Demo video generation scripts (TTS + subtitles + screen recording) Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
This commit is contained in:
@@ -2,7 +2,7 @@
|
||||
|
||||
## 架构
|
||||
|
||||
- **前端**: 静态 HTML（由 FastAPI 直接 serve）
|
||||
- **前端**: Vue 3 + Vite + Pinia + Vue Router（构建为静态文件，由 FastAPI serve）
|
||||
- **后端**: FastAPI + SQLite，端口 8000
|
||||
- **部署**: Kubernetes (k3s) on `oci.euphon.net`
|
||||
- **域名**: https://oil.oci.euphon.net
|
||||
@@ -16,20 +16,82 @@
|
||||
│ ├── database.py # SQLite 数据库操作
|
||||
│ ├── defaults.json # 默认精油和配方数据（首次启动时 seed）
|
||||
│ └── requirements.txt
|
||||
├── frontend/
|
||||
│ └── index.html # 前端页面
|
||||
├── frontend/ # Vue 3 + Vite 项目
|
||||
│ ├── package.json
|
||||
│ ├── vite.config.js
|
||||
│ ├── index.html
|
||||
│ ├── public/ # 静态资源（favicon、PWA icons）
|
||||
│ └── src/
|
||||
│ ├── main.js # 入口文件
|
||||
│ ├── App.vue # 根组件
|
||||
│ ├── router/ # Vue Router 路由配置
|
||||
│ ├── stores/ # Pinia 状态管理
|
||||
│ │ ├── auth.js # 认证/用户
|
||||
│ │ ├── oils.js # 精油价格
|
||||
│ │ ├── recipes.js # 配方/标签/收藏
|
||||
│ │ ├── diary.js # 个人配方日记
|
||||
│ │ └── ui.js # UI 状态
|
||||
│ ├── composables/ # 组合式函数
|
||||
│ │ ├── useApi.js # API 请求封装
|
||||
│ │ ├── useDialog.js # 自定义对话框
|
||||
│ │ ├── useSmartPaste.js # 智能粘贴解析
|
||||
│ │ └── useOilTranslation.js # 精油中英翻译
|
||||
│ ├── components/ # 共享组件
|
||||
│ │ ├── RecipeCard.vue
|
||||
│ │ ├── RecipeDetailOverlay.vue
|
||||
│ │ ├── TagPicker.vue
|
||||
│ │ ├── LoginModal.vue
|
||||
│ │ ├── UserMenu.vue
|
||||
│ │ └── CustomDialog.vue
|
||||
│ ├── views/ # 页面组件
|
||||
│ │ ├── RecipeSearch.vue # 配方查询
|
||||
│ │ ├── RecipeManager.vue # 管理配方
|
||||
│ │ ├── Inventory.vue # 个人库存
|
||||
│ │ ├── OilReference.vue # 精油价目
|
||||
│ │ ├── Projects.vue # 商业核算
|
||||
│ │ ├── MyDiary.vue # 我的（日记/品牌/账号）
|
||||
│ │ ├── AuditLog.vue # 操作日志
|
||||
│ │ ├── BugTracker.vue # Bug 追踪
|
||||
│ │ └── UserManagement.vue # 用户管<E688B7><E7AEA1>
|
||||
│ └── assets/
|
||||
│ └── styles.css # 全局样式
|
||||
├── deploy/
|
||||
│ ├── namespace.yaml
|
||||
│ ├── deployment.yaml
|
||||
│ ├── service.yaml
|
||||
│ ├── pvc.yaml # 1Gi 持久卷，存放 SQLite 数据库
|
||||
│ ├── ingress.yaml
|
||||
│ ├── setup-kubeconfig.sh # 生成受限 kubeconfig 的脚本
|
||||
│ └── kubeconfig # 受限 kubeconfig（仅 oil-calculator namespace）
|
||||
├── Dockerfile
|
||||
│ ├── setup-kubeconfig.sh
|
||||
│ └── kubeconfig
|
||||
├── Dockerfile # 多阶段构建（Node → Python）
|
||||
└── doc/deploy.md
|
||||
```
|
||||
|
||||
## 本地开发
|
||||
|
||||
```bash
|
||||
# 前端开发（热更新）
|
||||
cd frontend
|
||||
npm install
|
||||
npm run dev # 默认 http://localhost:5173，自动代理 /api 到 :8000
|
||||
|
||||
# 后端开发
|
||||
cd backend
|
||||
pip install -r requirements.txt
|
||||
uvicorn backend.main:app --reload --port 8000
|
||||
```
|
||||
|
||||
## 构建
|
||||
|
||||
```bash
|
||||
# 前端构建
|
||||
cd frontend
|
||||
npm run build # 输出到 frontend/dist/
|
||||
|
||||
# Docker 构建（多阶段：先构建前端，再打包后端）
|
||||
docker build -t oil-calculator .
|
||||
```
|
||||
|
||||
## 首次部署
|
||||
|
||||
已完成，以下为记录。
|
||||
@@ -63,8 +125,8 @@ kubectl get secret regcred -n guitar -o yaml | sed 's/namespace: guitar/namespac
|
||||
|
||||
```bash
|
||||
# 在本地打包上传
|
||||
cd "/Users/hera/Hera DOCS/Projects/Essential Oil Formula Cost Calculator"
|
||||
tar czf /tmp/oil-calc.tar.gz Dockerfile backend/ frontend/ deploy/
|
||||
cd /path/to/oil
|
||||
tar czf /tmp/oil-calc.tar.gz Dockerfile backend/ frontend/ deploy/ --exclude='frontend/node_modules' --exclude='frontend/dist'
|
||||
scp /tmp/oil-calc.tar.gz fam@oci.euphon.net:/tmp/
|
||||
|
||||
# SSH 到服务器构建并重启
|
||||
@@ -112,3 +174,21 @@ KUBECONFIG=deploy/kubeconfig kubectl rollout restart deploy/oil-calculator
|
||||
| GET | /api/tags | 所有标签 |
|
||||
| POST | /api/tags | 新增标签 |
|
||||
| DELETE | /api/tags/{name} | 删除标签 |
|
||||
| GET | /api/me | 当前用户信息 |
|
||||
| POST | /api/login | 登录 |
|
||||
| POST | /api/register | 注册 |
|
||||
| GET | /api/diary | 个人配方列表 |
|
||||
| POST | /api/diary | 创建个人配方 |
|
||||
| PUT | /api/diary/{id} | 更新个人配方 |
|
||||
| DELETE | /api/diary/{id} | 删除个人配方 |
|
||||
| GET | /api/favorites | 收藏列表 |
|
||||
| POST | /api/favorites/{id} | 添加收藏 |
|
||||
| DELETE | /api/favorites/{id} | 取消收藏 |
|
||||
| GET | /api/inventory | 个人库存 |
|
||||
| POST | /api/inventory | 更新库存 |
|
||||
| GET | /api/projects | 商业项目列表 |
|
||||
| GET | /api/audit-log | 操作日志 |
|
||||
| GET | /api/users | 用户列表（管理员）|
|
||||
| GET | /api/bug-reports | Bug 列表 |
|
||||
| GET | /api/notifications | 通知列表 |
|
||||
| GET | /api/version | 服务器版本 |
|
||||
|
||||
Reference in New Issue
Block a user