Raise LoginModal z-index above recipe overlay

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>

backend/database.py

@@ -238,6 +238,8 @@ def init_db():
         c.execute("ALTER TABLE recipes ADD COLUMN owner_id INTEGER")
     if "updated_by" not in cols:
         c.execute("ALTER TABLE recipes ADD COLUMN updated_by INTEGER")
+    if "en_name" not in cols:
+        c.execute("ALTER TABLE recipes ADD COLUMN en_name TEXT DEFAULT ''")
 
     # Seed admin user if no users exist
     count = c.execute("SELECT COUNT(*) FROM users").fetchone()[0]

backend/main.py

@@ -95,6 +95,7 @@ class RecipeIn(BaseModel):
 
 class RecipeUpdate(BaseModel):
     name: Optional[str] = None
+    en_name: Optional[str] = None
     note: Optional[str] = None
     ingredients: Optional[list[IngredientIn]] = None
     tags: Optional[list[str]] = None
@@ -308,7 +309,7 @@ def symptom_search(body: dict, user=Depends(get_current_user)):
     conn = get_db()
     # Search in recipe names
     rows = conn.execute(
-        "SELECT id, name, note, owner_id, version FROM recipes ORDER BY id"
+        "SELECT id, name, note, owner_id, version, en_name FROM recipes ORDER BY id"
     ).fetchall()
     exact = []
     related = []
@@ -696,6 +697,7 @@ def _recipe_to_dict(conn, row):
     return {
         "id": rid,
         "name": row["name"],
+        "en_name": row["en_name"] if "en_name" in row.keys() else "",
         "note": row["note"],
         "owner_id": row["owner_id"],
         "owner_name": (owner["display_name"] or owner["username"]) if owner else None,
@@ -710,19 +712,19 @@ def list_recipes(user=Depends(get_current_user)):
     conn = get_db()
     # Admin sees all; others see admin-owned (adopted) + their own
     if user["role"] == "admin":
-        rows = conn.execute("SELECT id, name, note, owner_id, version FROM recipes ORDER BY id").fetchall()
+        rows = conn.execute("SELECT id, name, note, owner_id, version, en_name FROM recipes ORDER BY id").fetchall()
     else:
         admin = conn.execute("SELECT id FROM users WHERE role = 'admin' LIMIT 1").fetchone()
         admin_id = admin["id"] if admin else 1
         user_id = user.get("id")
         if user_id:
             rows = conn.execute(
-                "SELECT id, name, note, owner_id, version FROM recipes WHERE owner_id = ? OR owner_id = ? ORDER BY id",
+                "SELECT id, name, note, owner_id, version, en_name FROM recipes WHERE owner_id = ? OR owner_id = ? ORDER BY id",
                 (admin_id, user_id)
             ).fetchall()
         else:
             rows = conn.execute(
-                "SELECT id, name, note, owner_id, version FROM recipes WHERE owner_id = ? ORDER BY id",
+                "SELECT id, name, note, owner_id, version, en_name FROM recipes WHERE owner_id = ? ORDER BY id",
                 (admin_id,)
             ).fetchall()
     result = [_recipe_to_dict(conn, r) for r in rows]
@@ -733,7 +735,7 @@ def list_recipes(user=Depends(get_current_user)):
 @app.get("/api/recipes/{recipe_id}")
 def get_recipe(recipe_id: int):
     conn = get_db()
-    row = conn.execute("SELECT id, name, note, owner_id, version FROM recipes WHERE id = ?", (recipe_id,)).fetchone()
+    row = conn.execute("SELECT id, name, note, owner_id, version, en_name FROM recipes WHERE id = ?", (recipe_id,)).fetchone()
     if not row:
         conn.close()
         raise HTTPException(404, "Recipe not found")
@@ -804,6 +806,8 @@ def update_recipe(recipe_id: int, update: RecipeUpdate, user=Depends(get_current
         c.execute("UPDATE recipes SET name = ? WHERE id = ?", (update.name, recipe_id))
     if update.note is not None:
         c.execute("UPDATE recipes SET note = ? WHERE id = ?", (update.note, recipe_id))
+    if update.en_name is not None:
+        c.execute("UPDATE recipes SET en_name = ? WHERE id = ?", (update.en_name, recipe_id))
     if update.ingredients is not None:
         c.execute("DELETE FROM recipe_ingredients WHERE recipe_id = ?", (recipe_id,))
         for ing in update.ingredients:
@@ -833,7 +837,7 @@ def delete_recipe(recipe_id: int, user=Depends(get_current_user)):
     conn = get_db()
     row = _check_recipe_permission(conn, recipe_id, user)
     # Save full snapshot for undo
-    full = conn.execute("SELECT id, name, note, owner_id, version FROM recipes WHERE id = ?", (recipe_id,)).fetchone()
+    full = conn.execute("SELECT id, name, note, owner_id, version, en_name FROM recipes WHERE id = ?", (recipe_id,)).fetchone()
     snapshot = _recipe_to_dict(conn, full)
     log_audit(conn, user["id"], "delete_recipe", "recipe", recipe_id, row["name"],
               json.dumps(snapshot, ensure_ascii=False))
@@ -1336,7 +1340,7 @@ def recipes_by_inventory(user=Depends(get_current_user)):
     if not inv:
         conn.close()
         return []
-    rows = conn.execute("SELECT id, name, note, owner_id, version FROM recipes ORDER BY id").fetchall()
+    rows = conn.execute("SELECT id, name, note, owner_id, version, en_name FROM recipes ORDER BY id").fetchall()
     result = []
     for r in rows:
         recipe = _recipe_to_dict(conn, r)

frontend/src/components/LoginModal.vue

@@ -119,7 +119,7 @@ async function submit() {
   position: fixed;
   inset: 0;
   background: rgba(0, 0, 0, 0.35);
-  z-index: 5000;
+  z-index: 6000;
   display: flex;
   align-items: center;
   justify-content: center;

frontend/src/components/RecipeDetailOverlay.vue

@@ -36,12 +36,6 @@
           >English</button>
         </div>
 
-        <!-- QR / brand upload hint -->
-        <div v-if="showBrandHint" class="brand-upload-hint">
-          <span class="hint-icon">✨</span>
-          <span>上传你的专属二维码，生成属于自己的配方卡片</span>
-        </div>
-
         <!-- Card image (rendered by html2canvas) -->
         <div v-show="!cardImageUrl" ref="cardRef" class="export-card">
           <!-- Brand overlay layers -->
@@ -132,11 +126,6 @@
             class="action-btn"
             @click="showTranslationEditor = true"
           >✏️ 修改翻译</button>
-          <button
-            v-if="showBrandHint"
-            class="action-btn action-btn-qr"
-            @click="goUploadQr"
-          >📲 上传我的二维码</button>
         </div>
 
         <!-- Translation editor (inline) -->
@@ -353,7 +342,6 @@
 
 <script setup>
 import { ref, computed, onMounted, nextTick, watch } from 'vue'
-import { useRouter } from 'vue-router'
 import html2canvas from 'html2canvas'
 import { useOilsStore, DROPS_PER_ML, VOLUME_DROPS } from '../stores/oils'
 import { useRecipesStore } from '../stores/recipes'
@@ -375,7 +363,6 @@ const recipesStore = useRecipesStore()
 const authStore = useAuthStore()
 const ui = useUiStore()
 const diaryStore = useDiaryStore()
-const router = useRouter()
 
 // ---- View state ----
 const viewMode = ref('card')
@@ -466,22 +453,6 @@ async function loadBrand() {
   }
 }
 
-// Whether to show the brand/QR upload hint (show to all users who haven't set up brand assets)
-const showBrandHint = computed(() =>
-  !!brand.value && !brand.value.qr_code && !brand.value.brand_bg
-)
-
-function goUploadQr() {
-  if (!authStore.isLoggedIn) {
-    ui.openLogin()
-    return
-  }
-  if (recipe.value._id) {
-    localStorage.setItem('oil_return_recipe_id', recipe.value._id)
-  }
-  router.push('/mydiary')
-}
-
 // ---- Card image generation ----
 async function generateCardImage() {
   if (!cardRef.value || generatingImage.value) return
@@ -547,9 +518,20 @@ function copyText() {
   })
 }
 
-function applyTranslation() {
-  // translations stored in customOilNameEn / customRecipeNameEn
+async function applyTranslation() {
   showTranslationEditor.value = false
+  // Persist en_name to backend
+  if (recipe.value._id && customRecipeNameEn.value) {
+    try {
+      await api.put(`/api/recipes/${recipe.value._id}`, {
+        en_name: customRecipeNameEn.value,
+        version: recipe.value._version,
+      })
+      ui.showToast('翻译已保存')
+    } catch (e) {
+      ui.showToast('翻译保存失败')
+    }
+  }
   cardImageUrl.value = null
   nextTick(() => generateCardImage())
 }
@@ -564,7 +546,7 @@ function getCardOilName(name) {
 
 function getCardRecipeName() {
   if (cardLang.value === 'en') {
-    return customRecipeNameEn.value || recipeNameEn(recipe.value.name)
+    return customRecipeNameEn.value || recipe.value.en_name || recipeNameEn(recipe.value.name)
   }
   return recipe.value.name
 }
@@ -669,7 +651,7 @@ onMounted(() => {
   editTags.value = [...(r.tags || [])]
   editIngredients.value = (r.ingredients || []).map(i => ({ oil: i.oil, drops: i.drops }))
   // Init translation defaults
-  customRecipeNameEn.value = recipeNameEn(r.name)
+  customRecipeNameEn.value = r.en_name || recipeNameEn(r.name)
   const enMap = {}
   ;(r.ingredients || []).forEach(ing => {
     enMap[ing.oil] = oilEn(ing.oil) || ing.oil
@@ -819,7 +801,6 @@ async function saveRecipe() {
       ingredients: ingredients.map(i => ({ oil_name: i.oil, drops: i.drops })),
     }
     await recipesStore.saveRecipe(payload)
-    // Reload recipes so the data is fresh when re-opened
     await recipesStore.loadRecipes()
     ui.showToast('保存成功')
     emit('close')
@@ -1165,42 +1146,6 @@ async function saveRecipe() {
   background: var(--sage-mist, #eef4ee);
 }
 
-/* Brand upload hint banner */
-.brand-upload-hint {
-  display: flex;
-  align-items: center;
-  gap: 8px;
-  background: linear-gradient(135deg, #eef4ee, #f5f0e8);
-  border: 1.5px dashed var(--sage-light, #c8ddc9);
-  border-radius: 10px;
-  padding: 10px 16px;
-  margin-bottom: 14px;
-  font-size: 13px;
-  color: var(--sage-dark, #5a7d5e);
-  font-weight: 500;
-  animation: hint-pop 0.3s ease;
-}
-
-.hint-icon {
-  font-size: 18px;
-  flex-shrink: 0;
-}
-
-@keyframes hint-pop {
-  from { opacity: 0; transform: translateY(-6px); }
-  to   { opacity: 1; transform: translateY(0); }
-}
-
-.action-btn-qr {
-  background: linear-gradient(135deg, #c8ddc9, var(--sage, #7a9e7e));
-  color: #fff;
-  border-color: transparent;
-}
-
-.action-btn-qr:hover {
-  opacity: 0.88;
-}
-
 /* Card bottom actions */
 .card-bottom-actions {
   display: flex;

frontend/src/stores/recipes.js

@@ -16,6 +16,7 @@ export const useRecipesStore = defineStore('recipes', () => {
       _owner_name: r._owner_name ?? r.owner_name ?? '',
       _version: r._version ?? r.version ?? 1,
       name: r.name,
+      en_name: r.en_name ?? '',
       note: r.note ?? '',
       tags: r.tags ?? [],
       ingredients: (r.ingredients ?? []).map((ing) => ({

frontend/src/views/MyDiary.vue

@@ -123,16 +123,6 @@
           </div>
         </div>
 
-        <div class="form-group">
-          <label>我的二维码图片</label>
-          <div class="upload-area" @click="triggerUpload('qr')">
-            <img v-if="brandQrImage" :src="brandQrImage" class="upload-preview qr-upload-preview" />
-            <span v-else class="upload-hint">📲 点击上传二维码图片</span>
-          </div>
-          <input ref="qrInput" type="file" accept="image/*" style="display:none" @change="handleUpload('qr', $event)" />
-          <div class="field-hint">上传后将显示在配方卡片右下角</div>
-        </div>
-
         <div class="form-group">
           <label>品牌Logo</label>
           <div class="upload-area" @click="triggerUpload('logo')">
@@ -212,7 +202,6 @@
 
 <script setup>
 import { ref, computed, onMounted, watch } from 'vue'
-import { useRouter } from 'vue-router'
 import { useAuthStore } from '../stores/auth'
 import { useOilsStore } from '../stores/oils'
 import { useDiaryStore } from '../stores/diary'
@@ -225,7 +214,6 @@ const auth = useAuthStore()
 const oils = useOilsStore()
 const diaryStore = useDiaryStore()
 const ui = useUiStore()
-const router = useRouter()
 
 const activeTab = ref('brand')
 const pasteText = ref('')
@@ -236,12 +224,10 @@ const newEntryText = ref('')
 // Brand settings
 const brandName = ref('')
 const brandQrUrl = ref('')
-const brandQrImage = ref('')
 const brandLogo = ref('')
 const brandBg = ref('')
 const logoInput = ref(null)
 const bgInput = ref(null)
-const qrInput = ref(null)
 
 // Account settings
 const displayName = ref('')
@@ -359,9 +345,8 @@ async function loadBrandSettings() {
       const data = await res.json()
       brandName.value = data.brand_name || ''
       brandQrUrl.value = data.qr_url || ''
-      brandQrImage.value = data.qr_code || ''
-      brandLogo.value = data.brand_logo || ''
-      brandBg.value = data.brand_bg || ''
+      brandLogo.value = data.logo_url || ''
+      brandBg.value = data.bg_url || ''
     }
   } catch {
     // no brand settings yet
@@ -384,46 +369,26 @@ async function saveBrandSettings() {
 
 function triggerUpload(type) {
   if (type === 'logo') logoInput.value?.click()
-  else if (type === 'bg') bgInput.value?.click()
-  else if (type === 'qr') qrInput.value?.click()
-}
-
-function readFileAsBase64(file) {
-  return new Promise((resolve, reject) => {
-    const reader = new FileReader()
-    reader.onload = e => resolve(e.target.result)
-    reader.onerror = reject
-    reader.readAsDataURL(file)
-  })
+  else bgInput.value?.click()
 }
 
 async function handleUpload(type, event) {
   const file = event.target.files[0]
   if (!file) return
+  const formData = new FormData()
+  formData.append('file', file)
+  formData.append('type', type)
   try {
-    const base64 = await readFileAsBase64(file)
-    const fieldMap = { logo: 'brand_logo', bg: 'brand_bg', qr: 'qr_code' }
-    const field = fieldMap[type]
-    if (!field) return
-    const res = await api('/api/brand', {
-      method: 'PUT',
-      body: JSON.stringify({ [field]: base64 }),
+    const token = localStorage.getItem('oil_auth_token') || ''
+    const res = await fetch('/api/brand-upload', {
+      method: 'POST',
+      headers: token ? { Authorization: 'Bearer ' + token } : {},
+      body: formData,
     })
     if (res.ok) {
-      if (type === 'logo') brandLogo.value = base64
-      else if (type === 'bg') brandBg.value = base64
-      else if (type === 'qr') {
-        brandQrImage.value = base64
-        // If user came here from a recipe card, navigate back
-        const returnRecipeId = localStorage.getItem('oil_return_recipe_id')
-        if (returnRecipeId) {
-          localStorage.removeItem('oil_return_recipe_id')
-          ui.showToast('二维码已上传，返回配方卡片 ✨')
-          await new Promise(r => setTimeout(r, 800))
-          router.push('/?openRecipe=' + encodeURIComponent(returnRecipeId))
-          return
-        }
-      }
+      const data = await res.json()
+      if (type === 'logo') brandLogo.value = data.url
+      else brandBg.value = data.url
       ui.showToast('上传成功')
     }
   } catch {
@@ -818,18 +783,6 @@ async function applyBusiness() {
   max-height: 100px;
 }
 
-.qr-upload-preview {
-  max-width: 120px;
-  max-height: 120px;
-}
-
-.field-hint {
-  font-size: 12px;
-  color: #9b94a3;
-  margin-top: 4px;
-  padding-left: 2px;
-}
-
 .upload-hint {
   font-size: 13px;
   color: #b0aab5;

frontend/src/views/RecipeSearch.vue

@@ -123,8 +123,7 @@
 </template>
 
 <script setup>
-import { ref, computed, onMounted, nextTick, watch } from 'vue'
-import { useRoute, useRouter } from 'vue-router'
+import { ref, computed, onMounted, nextTick } from 'vue'
 import { useAuthStore } from '../stores/auth'
 import { useOilsStore } from '../stores/oils'
 import { useRecipesStore } from '../stores/recipes'
@@ -137,8 +136,6 @@ const auth = useAuthStore()
 const oils = useOilsStore()
 const recipeStore = useRecipesStore()
 const ui = useUiStore()
-const route = useRoute()
-const router = useRouter()
 
 const searchQuery = ref('')
 const selectedCategory = ref(null)
@@ -157,27 +154,6 @@ onMounted(async () => {
   } catch {
     // category modules are optional
   }
-
-  // Return to a recipe card after QR upload redirect
-  const openRecipeId = route.query.openRecipe
-  if (openRecipeId) {
-    router.replace({ path: '/', query: {} })
-    const tryOpen = () => {
-      const idx = recipeStore.recipes.findIndex(r => r._id === openRecipeId)
-      if (idx >= 0) {
-        openDetail(idx)
-        return true
-      }
-      return false
-    }
-    if (!tryOpen()) {
-      // Recipes might not be loaded yet, watch until available
-      const stop = watch(
-        () => recipeStore.recipes.length,
-        () => { if (tryOpen()) stop() },
-      )
-    }
-  }
 })
 
 function selectCategory(cat) {