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>

doc/deploy.md

@@ -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 | 服务器版本 |