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/components/CustomDialog.vue

@@ -0,0 +1,120 @@
+<template>
+  <div v-if="dialogState.visible" class="dialog-overlay">
+    <div class="dialog-box">
+      <div class="dialog-msg">{{ dialogState.message }}</div>
+      <input
+        v-if="dialogState.type === 'prompt'"
+        v-model="inputValue"
+        type="text"
+        style="width:100%;padding:10px 14px;border:1.5px solid #d4cfc7;border-radius:10px;font-size:14px;margin-bottom:16px;outline:none;font-family:inherit;box-sizing:border-box"
+        @keydown.enter="submitPrompt"
+        ref="promptInput"
+      />
+      <div class="dialog-btn-row">
+        <button v-if="dialogState.type !== 'alert'" class="dialog-btn-outline" @click="cancel">取消</button>
+        <button class="dialog-btn-primary" @click="ok">确定</button>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { ref, watch, nextTick } from 'vue'
+import { dialogState, closeDialog } from '../composables/useDialog'
+
+const inputValue = ref('')
+const promptInput = ref(null)
+
+watch(() => dialogState.visible, (v) => {
+  if (v && dialogState.type === 'prompt') {
+    inputValue.value = dialogState.defaultValue || ''
+    nextTick(() => {
+      promptInput.value?.focus()
+      promptInput.value?.select()
+    })
+  }
+})
+
+function ok() {
+  if (dialogState.type === 'alert') closeDialog()
+  else if (dialogState.type === 'confirm') closeDialog(true)
+  else closeDialog(inputValue.value)
+}
+
+function cancel() {
+  if (dialogState.type === 'confirm') closeDialog(false)
+  else closeDialog(null)
+}
+
+function submitPrompt() {
+  closeDialog(inputValue.value)
+}
+</script>
+
+<style scoped>
+.dialog-overlay {
+  position: fixed;
+  inset: 0;
+  background: rgba(0, 0, 0, 0.35);
+  z-index: 9999;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.dialog-box {
+  background: #fff;
+  border-radius: 16px;
+  padding: 28px 24px 20px;
+  min-width: 280px;
+  max-width: 360px;
+  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.18);
+  text-align: center;
+}
+
+.dialog-msg {
+  font-size: 15px;
+  color: #3e3a44;
+  margin-bottom: 18px;
+  line-height: 1.6;
+  white-space: pre-wrap;
+}
+
+.dialog-btn-row {
+  display: flex;
+  gap: 10px;
+  justify-content: center;
+}
+
+.dialog-btn-primary {
+  background: linear-gradient(135deg, #7ec6a4 0%, #4a9d7e 100%);
+  color: #fff;
+  border: none;
+  border-radius: 10px;
+  padding: 9px 28px;
+  font-size: 14px;
+  cursor: pointer;
+  font-family: inherit;
+  font-weight: 500;
+}
+
+.dialog-btn-primary:hover {
+  opacity: 0.9;
+}
+
+.dialog-btn-outline {
+  background: #fff;
+  color: #6b6375;
+  border: 1.5px solid #d4cfc7;
+  border-radius: 10px;
+  padding: 9px 28px;
+  font-size: 14px;
+  cursor: pointer;
+  font-family: inherit;
+  font-weight: 500;
+}
+
+.dialog-btn-outline:hover {
+  background: #f8f7f5;
+}
+</style>