hera/oil-formula-calculator
1
0
Fork 0
Code Issues Pull Requests 1 Actions Packages Projects Releases Wiki Activity

Refactor: 前端重构为 Vue 3 + Vite + Pinia + Cypress E2E #1

Merged
fam merged 1 commits from dev into main 2026-04-06 19:22:20 +00:00
Conversation 0 Commits 1 Files Changed 62 +15035 -8448
hera commented 2026-04-06 18:40:31 +00:00
Owner
Copy Link

Summary

将前端从单文件 HTML (8441行) 重构为现代化 Vue 3 SPA 架构。

主要变更

  • Vue 3 + Vite: Composition API + <script setup>, 热更新开发体验
  • Pinia stores (5): auth, oils, recipes, diary, ui
  • Composables (4): useApi, useDialog, useSmartPaste, useOilTranslation
  • 共享组件 (6): RecipeCard, RecipeDetailOverlay, TagPicker, LoginModal, UserMenu, CustomDialog
  • 页面组件 (9): RecipeSearch, RecipeManager, Inventory, OilReference, Projects, MyDiary, AuditLog, BugTracker, UserManagement
  • Cypress E2E (14 specs, 113 tests): API CRUD, 认证流程, UI交互, 响应式, 性能, 数据完整性
  • Dockerfile: 多阶段构建 (Node构建前端 → Python运行后端)
  • 文档: README.md + 更新 deploy.md
  • 演示视频: 90s 录屏 + TTS语音 + 字幕脚本

技术栈

层 技术
框架 Vue 3 (Composition API)
构建 Vite
状态管理 Pinia
路由 Vue Router
测试 Cypress E2E (113 tests)
导出 html2canvas, ExcelJS

不变

  • 后端 FastAPI + SQLite 完全不变
  • 所有 API 端点不变
  • UI 设计风格不变 (同款配色、字体、布局)
  • 所有业务逻辑保持一致

Test Plan

  • npm run build 零错误
  • 113 个 Cypress E2E 测试全部通过
  • API CRUD 测试覆盖 oils/recipes/tags/diary/favorites/inventory/bugs
  • 认证流程测试 (登录/登出/token/权限)
  • 响应式测试 (手机/平板/宽屏)
  • 性能测试 (加载时间 < 5s, API < 1s)

🤖 Generated with Claude Code

## Summary 将前端从单文件 HTML (8441行) 重构为现代化 Vue 3 SPA 架构。 ### 主要变更 - **Vue 3 + Vite**: Composition API + `<script setup>`, 热更新开发体验 - **Pinia stores (5)**: auth, oils, recipes, diary, ui - **Composables (4)**: useApi, useDialog, useSmartPaste, useOilTranslation - **共享组件 (6)**: RecipeCard, RecipeDetailOverlay, TagPicker, LoginModal, UserMenu, CustomDialog - **页面组件 (9)**: RecipeSearch, RecipeManager, Inventory, OilReference, Projects, MyDiary, AuditLog, BugTracker, UserManagement - **Cypress E2E (14 specs, 113 tests)**: API CRUD, 认证流程, UI交互, 响应式, 性能, 数据完整性 - **Dockerfile**: 多阶段构建 (Node构建前端 → Python运行后端) - **文档**: README.md + 更新 deploy.md - **演示视频**: 90s 录屏 + TTS语音 + 字幕脚本 ### 技术栈 | 层 | 技术 | |---|---| | 框架 | Vue 3 (Composition API) | | 构建 | Vite | | 状态管理 | Pinia | | 路由 | Vue Router | | 测试 | Cypress E2E (113 tests) | | 导出 | html2canvas, ExcelJS | ### 不变 - 后端 FastAPI + SQLite 完全不变 - 所有 API 端点不变 - UI 设计风格不变 (同款配色、字体、布局) - 所有业务逻辑保持一致 ## Test Plan - [x] `npm run build` 零错误 - [x] 113 个 Cypress E2E 测试全部通过 - [x] API CRUD 测试覆盖 oils/recipes/tags/diary/favorites/inventory/bugs - [x] 认证流程测试 (登录/登出/token/权限) - [x] 响应式测试 (手机/平板/宽屏) - [x] 性能测试 (加载时间 < 5s, API < 1s) 🤖 Generated with [Claude Code](https://claude.com/claude-code)
hera added 1 commit 2026-04-06 18:40:32 +00:00
Refactor frontend to Vue 3 + Vite + Pinia + Cypress E2E ee8ec23dc7 
- 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>
fam merged commit 7ba1e28370 into main 2026-04-06 19:22:20 +00:00
Sign in to join this conversation.
Reviewers
No Reviewers
Labels
No items
No Label
Milestone
No items
No Milestone
Projects
Clear projects
No project
Assignees
Clear assignees
yoyo hera
No Assignees
1 Participants
Notifications
Due Date
No due date set.
Dependencies

No dependencies set.

Reference: hera/oil-formula-calculator#1
Delete Branch "dev"

Deleting a branch is permanent. Although the deleted branch may continue to exist for a short time before it actually gets removed, it CANNOT be undone in most cases. Continue?