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/oils.js

@@ -0,0 +1,106 @@
+import { defineStore } from 'pinia'
+import { ref, computed } from 'vue'
+import { api } from '../composables/useApi'
+
+export const DROPS_PER_ML = 18.6
+
+export const VOLUME_DROPS = {
+  '2.5': 46,
+  '5': 93,
+  '10': 186,
+  '15': 280,
+  '115': 2146,
+}
+
+export const useOilsStore = defineStore('oils', () => {
+  const oils = ref(new Map())
+  const oilsMeta = ref(new Map())
+
+  // Getters
+  const oilNames = computed(() =>
+    [...oils.value.keys()].sort((a, b) => a.localeCompare(b, 'zh'))
+  )
+
+  function pricePerDrop(name) {
+    return oils.value.get(name) || 0
+  }
+
+  function calcCost(ingredients) {
+    return ingredients.reduce((sum, ing) => {
+      return sum + pricePerDrop(ing.oil) * ing.drops
+    }, 0)
+  }
+
+  function calcRetailCost(ingredients) {
+    return ingredients.reduce((sum, ing) => {
+      const meta = oilsMeta.value.get(ing.oil)
+      if (meta && meta.retailPrice && meta.dropCount) {
+        return sum + (meta.retailPrice / meta.dropCount) * ing.drops
+      }
+      return sum + pricePerDrop(ing.oil) * ing.drops
+    }, 0)
+  }
+
+  function fmtPrice(n) {
+    return '¥ ' + n.toFixed(2)
+  }
+
+  function fmtCostWithRetail(ingredients) {
+    const cost = calcCost(ingredients)
+    const retail = calcRetailCost(ingredients)
+    const costStr = fmtPrice(cost)
+    if (retail > cost) {
+      return { cost: costStr, retail: fmtPrice(retail), hasRetail: true }
+    }
+    return { cost: costStr, retail: null, hasRetail: false }
+  }
+
+  // Actions
+  async function loadOils() {
+    const data = await api.get('/api/oils')
+    const newOils = new Map()
+    const newMeta = new Map()
+    for (const oil of data) {
+      const ppd = oil.drop_count ? oil.bottle_price / oil.drop_count : 0
+      newOils.set(oil.name, ppd)
+      newMeta.set(oil.name, {
+        bottlePrice: oil.bottle_price,
+        dropCount: oil.drop_count,
+        retailPrice: oil.retail_price ?? null,
+        isActive: oil.is_active ?? true,
+      })
+    }
+    oils.value = newOils
+    oilsMeta.value = newMeta
+  }
+
+  async function saveOil(name, bottlePrice, dropCount, retailPrice) {
+    await api.post('/api/oils', {
+      name,
+      bottle_price: bottlePrice,
+      drop_count: dropCount,
+      retail_price: retailPrice,
+    })
+    await loadOils()
+  }
+
+  async function deleteOil(name) {
+    await api.delete(`/api/oils/${encodeURIComponent(name)}`)
+    oils.value.delete(name)
+    oilsMeta.value.delete(name)
+  }
+
+  return {
+    oils,
+    oilsMeta,
+    oilNames,
+    pricePerDrop,
+    calcCost,
+    calcRetailCost,
+    fmtPrice,
+    fmtCostWithRetail,
+    loadOils,
+    saveOil,
+    deleteOil,
+  }
+})