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>

frontend/src/stores/recipes.js

@@ -0,0 +1,105 @@
+import { defineStore } from 'pinia'
+import { ref } from 'vue'
+import { api } from '../composables/useApi'
+
+export const useRecipesStore = defineStore('recipes', () => {
+  const recipes = ref([])
+  const allTags = ref([])
+  const userFavorites = ref([])
+
+  // Actions
+  async function loadRecipes() {
+    const data = await api.get('/api/recipes')
+    recipes.value = data.map((r) => ({
+      _id: r._id ?? r.id,
+      _owner_id: r._owner_id ?? r.owner_id,
+      _owner_name: r._owner_name ?? r.owner_name ?? '',
+      _version: r._version ?? r.version ?? 1,
+      name: r.name,
+      note: r.note ?? '',
+      tags: r.tags ?? [],
+      ingredients: (r.ingredients ?? []).map((ing) => ({
+        oil: ing.oil ?? ing.name,
+        drops: ing.drops,
+      })),
+    }))
+  }
+
+  async function loadTags() {
+    const data = await api.get('/api/tags')
+    const apiTags = data.map((t) => (typeof t === 'string' ? t : t.name))
+    const recipeTags = recipes.value.flatMap((r) => r.tags)
+    const tagSet = new Set([...apiTags, ...recipeTags])
+    allTags.value = [...tagSet].sort((a, b) => a.localeCompare(b, 'zh'))
+  }
+
+  async function loadFavorites() {
+    try {
+      const data = await api.get('/api/favorites')
+      userFavorites.value = data.map((f) => f._id ?? f.id ?? f.recipe_id ?? f)
+    } catch {
+      userFavorites.value = []
+    }
+  }
+
+  async function saveRecipe(recipe) {
+    if (recipe._id) {
+      const data = await api.put(`/api/recipes/${recipe._id}`, recipe)
+      const idx = recipes.value.findIndex((r) => r._id === recipe._id)
+      if (idx !== -1) {
+        recipes.value[idx] = { ...recipes.value[idx], ...recipe, _version: data._version ?? data.version ?? recipe._version }
+      }
+      return data
+    } else {
+      const data = await api.post('/api/recipes', recipe)
+      await loadRecipes()
+      return data
+    }
+  }
+
+  async function deleteRecipe(id) {
+    await api.delete(`/api/recipes/${id}`)
+    recipes.value = recipes.value.filter((r) => r._id !== id)
+  }
+
+  async function toggleFavorite(recipeId) {
+    if (userFavorites.value.includes(recipeId)) {
+      await api.delete(`/api/favorites/${recipeId}`)
+      userFavorites.value = userFavorites.value.filter((id) => id !== recipeId)
+    } else {
+      await api.post(`/api/favorites/${recipeId}`)
+      userFavorites.value.push(recipeId)
+    }
+  }
+
+  function isFavorite(recipe) {
+    return userFavorites.value.includes(recipe._id)
+  }
+
+  async function createTag(name) {
+    await api.post('/api/tags', { name })
+    if (!allTags.value.includes(name)) {
+      allTags.value = [...allTags.value, name].sort((a, b) => a.localeCompare(b, 'zh'))
+    }
+  }
+
+  async function deleteTag(name) {
+    await api.delete(`/api/tags/${encodeURIComponent(name)}`)
+    allTags.value = allTags.value.filter((t) => t !== name)
+  }
+
+  return {
+    recipes,
+    allTags,
+    userFavorites,
+    loadRecipes,
+    loadTags,
+    loadFavorites,
+    saveRecipe,
+    deleteRecipe,
+    toggleFavorite,
+    isFavorite,
+    createTag,
+    deleteTag,
+  }
+})