Merge branch 'dev' into feature/qr-upload-hint

# Conflicts: # frontend/src/components/RecipeDetailOverlay.vue
Raise LoginModal z-index above recipe overlay
2026-04-07 22:25:15 +00:00 · 2026-04-07 22:19:48 +00:00 · 2026-04-07 22:13:42 +00:00 · 2026-04-07 21:58:17 +00:00
13 changed files with 134 additions and 206 deletions
--- a/backend/database.py
+++ b/backend/database.py
@@ -240,8 +240,6 @@ def init_db():
        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 ''")
-    if "en_oils" not in cols:
-        c.execute("ALTER TABLE recipes ADD COLUMN en_oils TEXT DEFAULT '{}'")

    # Seed admin user if no users exist
    count = c.execute("SELECT COUNT(*) FROM users").fetchone()[0]
--- a/backend/main.py
+++ b/backend/main.py
@@ -96,7 +96,6 @@ class RecipeIn(BaseModel):
 class RecipeUpdate(BaseModel):
    name: Optional[str] = None
    en_name: Optional[str] = None
-    en_oils: Optional[str] = None
    note: Optional[str] = None
    ingredients: Optional[list[IngredientIn]] = None
    tags: Optional[list[str]] = None
@@ -310,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, en_name, en_oils FROM recipes ORDER BY id"
+        "SELECT id, name, note, owner_id, version, en_name FROM recipes ORDER BY id"
    ).fetchall()
    exact = []
    related = []
@@ -699,7 +698,6 @@ def _recipe_to_dict(conn, row):
        "id": rid,
        "name": row["name"],
        "en_name": row["en_name"] if "en_name" in row.keys() else "",
-        "en_oils": row["en_oils"] if "en_oils" in row.keys() else "{}",
        "note": row["note"],
        "owner_id": row["owner_id"],
        "owner_name": (owner["display_name"] or owner["username"]) if owner else None,
@@ -714,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, en_name, en_oils 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, en_name, en_oils 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, en_name, en_oils 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]
@@ -737,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, en_name, en_oils 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")
@@ -810,8 +808,6 @@ def update_recipe(recipe_id: int, update: RecipeUpdate, user=Depends(get_current
        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.en_oils is not None:
-        c.execute("UPDATE recipes SET en_oils = ? WHERE id = ?", (update.en_oils, recipe_id))
    if update.ingredients is not None:
        c.execute("DELETE FROM recipe_ingredients WHERE recipe_id = ?", (recipe_id,))
        for ing in update.ingredients:
@@ -841,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, en_name, en_oils 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))
@@ -1344,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, en_name, en_oils 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)
--- a/frontend/src/App.vue
+++ b/frontend/src/App.vue
@@ -15,8 +15,7 @@
            @click="toggleUserMenu"
          >
            <template v-if="auth.isLoggedIn">
-              👤 {{ auth.user.display_name || auth.user.username }}
-              ▾
+              👤 {{ auth.user.display_name || auth.user.username }} ▾
            </template>
            <template v-else>
              <span style="background:rgba(255,255,255,0.2);padding:4px 12px;border-radius:12px">登录</span>
@@ -42,7 +41,7 @@
  <UserMenu v-if="showUserMenu" @close="showUserMenu = false" />

  <!-- Nav tabs -->
-  <div class="nav-tabs" :style="isPreview ? { top: '36px' } : {}">
+  <div class="nav-tabs">
    <div class="nav-tab" :class="{ active: ui.currentSection === 'search' }" @click="goSection('search')">🔍 配方查询</div>
    <div class="nav-tab" :class="{ active: ui.currentSection === 'manage' }" @click="requireLogin('manage')">📋 管理配方</div>
    <div class="nav-tab" :class="{ active: ui.currentSection === 'inventory' }" @click="requireLogin('inventory')">📦 个人库存</div>
@@ -65,7 +64,7 @@
  <CustomDialog />

  <!-- Toast messages -->
-  <div v-for="toast in ui.toasts" :key="toast.id" class="toast">{{ toast.msg }}</div>
+  <div v-for="(toast, i) in ui.toasts" :key="i" class="toast">{{ toast }}</div>
 </template>

 <script setup>
--- a/frontend/src/assets/styles.css
+++ b/frontend/src/assets/styles.css
@@ -445,7 +445,7 @@ body {
 .toast {
  position: fixed; bottom: 80px; left: 50%; transform: translateX(-50%);
  background: rgba(0,0,0,0.8); color: white; padding: 10px 24px;
-  border-radius: 20px; font-size: 14px; z-index: 9000;
+  border-radius: 20px; font-size: 14px; z-index: 999;
  pointer-events: none; transition: opacity 0.3s;
 }

--- a/frontend/src/components/CustomDialog.vue
+++ b/frontend/src/components/CustomDialog.vue
@@ -11,8 +11,8 @@
        ref="promptInput"
      />
      <div class="dialog-btn-row">
-        <button v-if="dialogState.type !== 'alert'" class="dialog-btn-outline" @click="cancel">{{ dialogState.cancelText || '取消' }}</button>
-        <button class="dialog-btn-primary" @click="ok">{{ dialogState.okText || '确定' }}</button>
+        <button v-if="dialogState.type !== 'alert'" class="dialog-btn-outline" @click="cancel">取消</button>
+        <button class="dialog-btn-primary" @click="ok">确定</button>
      </div>
    </div>
  </div>
--- a/frontend/src/components/LoginModal.vue
+++ b/frontend/src/components/LoginModal.vue
@@ -104,11 +104,8 @@ async function submit() {
      ui.showToast('注册成功')
    }
    emit('close')
-    if (ui.pendingAction) {
-      ui.runPendingAction()
-    } else {
+    // Reload page data after auth change
    window.location.reload()
-    }
  } catch (e) {
    errorMsg.value = e?.message || (mode.value === 'login' ? '登录失败，请检查用户名和密码' : '注册失败，请重试')
  } finally {
--- a/frontend/src/components/RecipeDetailOverlay.vue
+++ b/frontend/src/components/RecipeDetailOverlay.vue
@@ -36,22 +36,38 @@
          >English</button>
        </div>

+        <!-- Volume selector -->
+        <div class="volume-controls card-volume-controls">
+          <button
+            v-for="(drops, ml) in VOLUME_DROPS"
+            :key="ml"
+            class="volume-btn"
+            :class="{ active: selectedCardVolume === ml }"
+            @click="onCardVolumeChange(ml)"
+          >{{ ml === '单次' ? '单次' : ml + 'ml' }}</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 -->
-          <div
-            v-if="brand.brand_bg"
-            class="card-brand-bg"
-            :style="{ backgroundImage: `url('${brand.brand_bg}')` }"
-          />
-          <div v-if="brand.qr_code" class="card-qr-wrapper">
          <img
+            v-if="brand.brand_bg"
+            :src="brand.brand_bg"
+            class="card-brand-bg"
+            crossorigin="anonymous"
+          />
+          <img
+            v-if="brand.qr_code"
            :src="brand.qr_code"
            class="card-qr"
            crossorigin="anonymous"
          />
-            <div v-if="brand.brand_name" class="card-qr-name">{{ brand.brand_name }}</div>
-          </div>
          <img
            v-if="brand.brand_logo"
            :src="brand.brand_logo"
@@ -356,7 +372,6 @@ import { useAuthStore } from '../stores/auth'
 import { useUiStore } from '../stores/ui'
 import { useDiaryStore } from '../stores/diary'
 import { api } from '../composables/useApi'
-import { showConfirm, showPrompt } from '../composables/useDialog'
 import { oilEn, recipeNameEn } from '../composables/useOilTranslation'
 // TagPicker replaced with inline tag editing

@@ -397,30 +412,14 @@ const canEditThisRecipe = computed(() => {

 const isFav = computed(() => recipesStore.isFavorite(recipe.value))

-// Scale ingredients proportionally to target volume; '单次' = no scaling
-function scaleIngredients(ingredients, volume) {
-  const targetDrops = VOLUME_DROPS[volume]
-  if (!targetDrops) return ingredients  // 单次：不缩放
-  const totalDrops = ingredients.reduce((sum, ing) => sum + (ing.drops || 0), 0)
-  if (totalDrops === 0) return ingredients
-  return ingredients.map(ing => ({
-    ...ing,
-    drops: Math.round(ing.drops * targetDrops / totalDrops),
-  }))
-}
-
-// Card ingredients: scaled to selected volume, coconut oil excluded from display
-const scaledCardIngredients = computed(() =>
-  scaleIngredients(recipe.value.ingredients, selectedCardVolume.value)
-)
-
+// Card ingredients: exclude coconut oil
 const cardIngredients = computed(() =>
-  scaledCardIngredients.value.filter(ing => ing.oil !== '椰子油')
+  recipe.value.ingredients.filter(ing => ing.oil !== '椰子油')
 )

-// Coconut oil drops (from scaled set)
+// Coconut oil drops
 const coconutDrops = computed(() => {
-  const coco = scaledCardIngredients.value.find(ing => ing.oil === '椰子油')
+  const coco = recipe.value.ingredients.find(ing => ing.oil === '椰子油')
  return coco ? coco.drops : 0
 })

@@ -446,7 +445,7 @@ const dilutionDesc = computed(() => {
    : `该配方适用于单次用量（共${totalDrops}滴），其中纯精油 ${totalEoDrops.value} 滴，椰子油 ${coconutDrops.value} 滴，稀释比例为 1:${ratio}`
 })

-const priceInfo = computed(() => oilsStore.fmtCostWithRetail(scaledCardIngredients.value))
+const priceInfo = computed(() => oilsStore.fmtCostWithRetail(recipe.value.ingredients))

 // Today string
 const todayStr = computed(() => {
@@ -477,14 +476,6 @@ async function loadBrand() {
  } catch {
    brand.value = {}
  }
-  // Show upload prompt if user hasn't set up brand assets yet
-  if (showBrandHint.value) {
-    const ok = await showConfirm(
-      '上传你的专属二维码，让配方卡片更专业 ✨',
-      { okText: '去上传', cancelText: '取消' }
-    )
-    if (ok) goUploadQr()
-  }
 }

 // Whether to show the brand/QR upload hint (show to all users who haven't set up brand assets)
@@ -494,7 +485,7 @@ const showBrandHint = computed(() =>

 function goUploadQr() {
  if (!authStore.isLoggedIn) {
-    ui.openLogin(() => goUploadQr())
+    ui.openLogin()
    return
  }
  if (recipe.value._id) {
@@ -533,12 +524,6 @@ function switchLang(lang) {
  nextTick(() => generateCardImage())
 }

-function onCardVolumeChange(ml) {
-  selectedCardVolume.value = ml
-  cardImageUrl.value = null
-  nextTick(() => generateCardImage())
-}
-
 async function saveImage() {
  if (!cardImageUrl.value) {
    await generateCardImage()
@@ -568,7 +553,7 @@ function copyText() {
  ].filter(Boolean).join('\n')

  navigator.clipboard.writeText(text).then(() => {
-    ui.showToast('已复制')
+    ui.showToast('已复制到剪贴板')
  }).catch(() => {
    ui.showToast('复制失败')
  })
@@ -576,12 +561,11 @@ function copyText() {

 async function applyTranslation() {
  showTranslationEditor.value = false
-  // Persist en_name and en_oils to backend
-  if (recipe.value._id) {
+  // Persist en_name to backend
+  if (recipe.value._id && customRecipeNameEn.value) {
    try {
      await api.put(`/api/recipes/${recipe.value._id}`, {
        en_name: customRecipeNameEn.value,
-        en_oils: JSON.stringify(customOilNameEn.value),
        version: recipe.value._version,
      })
      ui.showToast('翻译已保存')
@@ -611,7 +595,7 @@ function getCardRecipeName() {
 // ---- Favorite ----
 async function handleToggleFavorite() {
  if (!authStore.isLoggedIn) {
-    ui.openLogin(() => handleToggleFavorite())
+    ui.openLogin()
    return
  }
  if (!recipe.value._id) {
@@ -630,10 +614,10 @@ async function handleToggleFavorite() {
 // ---- Save to diary ----
 async function saveToDiary() {
  if (!authStore.isLoggedIn) {
-    ui.openLogin(() => saveToDiary())
+    ui.openLogin()
    return
  }
-  const name = await showPrompt('保存为我的配方，名称：', recipe.value.name)
+  const name = prompt('保存为我的配方，名称：', recipe.value.name)
  if (!name) return
  try {
    await api.post('/api/diary', {
@@ -709,10 +693,9 @@ onMounted(() => {
  editIngredients.value = (r.ingredients || []).map(i => ({ oil: i.oil, drops: i.drops }))
  // Init translation defaults
  customRecipeNameEn.value = r.en_name || recipeNameEn(r.name)
-  const savedOilMap = r.en_oils ? (() => { try { return JSON.parse(r.en_oils) } catch { return {} } })() : {}
  const enMap = {}
  ;(r.ingredients || []).forEach(ing => {
-    enMap[ing.oil] = savedOilMap[ing.oil] || oilEn(ing.oil) || ing.oil
+    enMap[ing.oil] = oilEn(ing.oil) || ing.oil
  })
  customOilNameEn.value = enMap

@@ -1000,52 +983,32 @@ async function saveRecipe() {
  inset: 0;
  width: 100%;
  height: 100%;
-  background-size: cover;
-  background-position: center;
-  background-repeat: no-repeat;
-  opacity: 0.12;
+  object-fit: cover;
+  opacity: 0.06;
  z-index: 0;
  pointer-events: none;
 }

-.card-qr-wrapper {
-  position: absolute;
-  top: 36px;
-  right: 24px;
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  gap: 3px;
-  z-index: 2;
-}
-
 .card-qr {
-  width: 54px;
-  height: 54px;
-  object-fit: cover;
-  border-radius: 6px;
-  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
-}
-
-.card-qr-name {
-  font-size: 7px;
-  color: var(--text-light, #8a7a6a);
-  text-align: center;
-  line-height: 1.3;
-  max-width: 68px;
-  white-space: pre-line;
+  position: absolute;
+  top: 16px;
+  right: 16px;
+  width: 64px;
+  height: 64px;
+  object-fit: contain;
+  z-index: 3;
+  opacity: 0.85;
 }

 .card-logo {
  position: absolute;
-  bottom: 60px;
+  bottom: 16px;
  left: 50%;
  transform: translateX(-50%);
-  height: 60px;
+  height: 28px;
  object-fit: contain;
-  z-index: 1;
-  opacity: 0.2;
-  pointer-events: none;
+  z-index: 3;
+  opacity: 0.3;
 }

 .card-brand-text {
@@ -1518,10 +1481,6 @@ async function saveRecipe() {
  margin-bottom: 10px;
 }

-.card-volume-controls {
-  margin: 8px 0 12px;
-}
-
 .volume-btn {
  padding: 7px 16px;
  border: 1.5px solid var(--border, #e0d4c0);
--- a/frontend/src/components/UserMenu.vue
+++ b/frontend/src/components/UserMenu.vue
@@ -2,6 +2,9 @@
  <div class="usermenu-overlay" @click.self="$emit('close')">
    <div class="usermenu-card">
      <div class="usermenu-name">{{ auth.user.display_name || auth.user.username }}</div>
+      <div class="usermenu-role">
+        <span class="role-badge">{{ roleLabel }}</span>
+      </div>

      <div class="usermenu-actions">
        <button class="usermenu-btn" @click="goMyDiary">
@@ -68,6 +71,16 @@ const bugContent = ref('')

 const unreadCount = computed(() => notifications.value.filter(n => !n.is_read).length)

+const roleLabel = computed(() => {
+  const map = {
+    admin: '管理员',
+    senior_editor: '高级编辑',
+    editor: '编辑',
+    viewer: '查看者',
+  }
+  return map[auth.user.role] || auth.user.role
+})
+
 function formatTime(d) {
  if (!d) return ''
  return new Date(d + 'Z').toLocaleString('zh-CN', { month: 'short', day: 'numeric', hour: '2-digit', minute: '2-digit' })
@@ -123,7 +136,7 @@ function handleLogout() {
  auth.logout()
  ui.showToast('已退出登录')
  emit('close')
-  router.push('/')
+  window.location.reload()
 }

 onMounted(loadNotifications)
@@ -149,7 +162,13 @@ onMounted(loadNotifications)
  z-index: 4001;
 }

-.usermenu-name { font-size: 16px; font-weight: 600; color: #3e3a44; margin-bottom: 14px; }
+.usermenu-name { font-size: 16px; font-weight: 600; color: #3e3a44; margin-bottom: 4px; }
+.usermenu-role { margin-bottom: 14px; }
+.role-badge {
+  display: inline-block; font-size: 11px; padding: 2px 10px;
+  border-radius: 8px; background: linear-gradient(135deg, #e8f5e9, #c8e6c9);
+  color: #4a9d7e; font-weight: 500;
+}

 .usermenu-actions { display: flex; flex-direction: column; gap: 4px; }
 .usermenu-btn {
--- a/frontend/src/composables/useDialog.js
+++ b/frontend/src/composables/useDialog.js
@@ -5,8 +5,6 @@ export const dialogState = reactive({
  type: 'alert', // 'alert', 'confirm', 'prompt'
  message: '',
  defaultValue: '',
-  okText: '',
-  cancelText: '',
  resolve: null
 })

@@ -15,19 +13,15 @@ export function showAlert(msg) {
    dialogState.visible = true
    dialogState.type = 'alert'
    dialogState.message = msg
-    dialogState.okText = ''
-    dialogState.cancelText = ''
    dialogState.resolve = resolve
  })
 }

-export function showConfirm(msg, opts = {}) {
+export function showConfirm(msg) {
  return new Promise(resolve => {
    dialogState.visible = true
    dialogState.type = 'confirm'
    dialogState.message = msg
-    dialogState.okText = opts.okText || ''
-    dialogState.cancelText = opts.cancelText || ''
    dialogState.resolve = resolve
  })
 }
--- a/frontend/src/stores/oils.js
+++ b/frontend/src/stores/oils.js
@@ -5,7 +5,6 @@ import { api } from '../composables/useApi'
 export const DROPS_PER_ML = 18.6

 export const VOLUME_DROPS = {
-  '单次': null,
  '2.5': 46,
  '5': 93,
  '10': 186,
--- a/frontend/src/stores/recipes.js
+++ b/frontend/src/stores/recipes.js
@@ -17,7 +17,6 @@ export const useRecipesStore = defineStore('recipes', () => {
      _version: r._version ?? r.version ?? 1,
      name: r.name,
      en_name: r.en_name ?? '',
-      en_oils: r.en_oils ?? '{}',
      note: r.note ?? '',
      tags: r.tags ?? [],
      ingredients: (r.ingredients ?? []).map((ing) => ({
--- a/frontend/src/stores/ui.js
+++ b/frontend/src/stores/ui.js
@@ -5,7 +5,6 @@ export const useUiStore = defineStore('ui', () => {
  const currentSection = ref('search')
  const showLoginModal = ref(false)
  const toasts = ref([])
-  const pendingAction = ref(null)

  let toastId = 0

@@ -21,10 +20,7 @@ export const useUiStore = defineStore('ui', () => {
    }, duration)
  }

-  function openLogin(afterLogin) {
-    if (afterLogin) {
-      pendingAction.value = afterLogin
-    }
+  function openLogin() {
    showLoginModal.value = true
  }

@@ -32,23 +28,13 @@ export const useUiStore = defineStore('ui', () => {
    showLoginModal.value = false
  }

-  function runPendingAction() {
-    if (pendingAction.value) {
-      const action = pendingAction.value
-      pendingAction.value = null
-      action()
-    }
-  }
-
  return {
    currentSection,
    showLoginModal,
    toasts,
-    pendingAction,
    showSection,
    showToast,
    openLogin,
    closeLogin,
-    runPendingAction,
  }
 })
--- a/frontend/src/views/MyDiary.vue
+++ b/frontend/src/views/MyDiary.vue
@@ -107,11 +107,6 @@

    <!-- Brand Tab -->
    <div v-if="activeTab === 'brand'" class="tab-content">
-      <!-- Back to recipe card (when navigated from a recipe) -->
-      <div v-if="returnRecipeId" class="return-banner">
-        <span>📋 上传完成后可返回配方卡片</span>
-        <button class="btn-return" @click="goBackToRecipe">← 返回配方卡片</button>
-      </div>
      <div class="section-card">
        <h4>🏷️ 品牌设置</h4>

@@ -174,6 +169,10 @@
          <div class="form-static">{{ auth.user.username }}</div>
        </div>

+        <div class="form-group">
+          <label>角色</label>
+          <div class="form-static role-badge">{{ roleLabel }}</div>
+        </div>
      </div>

      <div class="section-card">
@@ -212,7 +211,7 @@
 </template>

 <script setup>
-import { ref, onMounted, watch } from 'vue'
+import { ref, computed, onMounted, watch } from 'vue'
 import { useRouter } from 'vue-router'
 import { useAuthStore } from '../stores/auth'
 import { useOilsStore } from '../stores/oils'
@@ -231,7 +230,6 @@ const router = useRouter()
 const activeTab = ref('brand')
 const pasteText = ref('')
 const selectedDiaryId = ref(null)
-const returnRecipeId = ref(null)
 const selectedDiary = ref(null)
 const newEntryText = ref('')

@@ -252,20 +250,22 @@ const newPassword = ref('')
 const confirmPassword = ref('')
 const businessReason = ref('')

+const roleLabel = computed(() => {
+  const roles = {
+    admin: '管理员',
+    senior_editor: '高级编辑',
+    editor: '编辑',
+    viewer: '查看者',
+  }
+  return roles[auth.user.role] || auth.user.role
+})
+
 onMounted(async () => {
  await diaryStore.loadDiary()
  displayName.value = auth.user.display_name || ''
  await loadBrandSettings()
-  returnRecipeId.value = localStorage.getItem('oil_return_recipe_id') || null
 })

-function goBackToRecipe() {
-  if (returnRecipeId.value) {
-    localStorage.removeItem('oil_return_recipe_id')
-    router.push('/?openRecipe=' + encodeURIComponent(returnRecipeId.value))
-  }
-}
-
 function selectDiary(d) {
  const id = d._id || d.id
  selectedDiaryId.value = id
@@ -412,7 +412,18 @@ async function handleUpload(type, event) {
    if (res.ok) {
      if (type === 'logo') brandLogo.value = base64
      else if (type === 'bg') brandBg.value = base64
-      else if (type === 'qr') brandQrImage.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
+        }
+      }
      ui.showToast('上传成功')
    }
  } catch {
@@ -742,39 +753,6 @@ async function applyBusiness() {
  border-color: #7ec6a4;
 }

-/* Return banner */
-.return-banner {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  background: #f0faf5;
-  border: 1.5px solid #7ec6a4;
-  border-radius: 12px;
-  padding: 10px 14px;
-  margin-bottom: 14px;
-  font-size: 13px;
-  color: #3e7d5a;
-  gap: 10px;
-}
-
-.btn-return {
-  background: linear-gradient(135deg, #7ec6a4 0%, #4a9d7e 100%);
-  color: #fff;
-  border: none;
-  border-radius: 8px;
-  padding: 6px 14px;
-  font-size: 12px;
-  cursor: pointer;
-  font-family: inherit;
-  font-weight: 500;
-  white-space: nowrap;
-  flex-shrink: 0;
-}
-
-.btn-return:hover {
-  opacity: 0.9;
-}
-
 /* Brand */
 .form-group {
  margin-bottom: 14px;
@@ -796,6 +774,22 @@ async function applyBusiness() {
  color: #6b6375;
 }

+.role-badge {
+  display: inline-block;
+}
+
+.qr-preview {
+  margin-top: 10px;
+  text-align: center;
+}
+
+.qr-img {
+  width: 120px;
+  height: 120px;
+  border-radius: 8px;
+  border: 1.5px solid #e5e4e7;
+}
+
 .upload-area {
  width: 100%;
  min-height: 80px;
@@ -813,18 +807,6 @@ async function applyBusiness() {
  border-color: #7ec6a4;
 }

-.qr-preview {
-  margin-top: 10px;
-  text-align: center;
-}
-
-.qr-img {
-  width: 120px;
-  height: 120px;
-  border-radius: 8px;
-  border: 1.5px solid #e5e4e7;
-}
-
 .upload-preview {
  max-width: 80px;
  max-height: 80px;
Author	SHA1	Message	Date
Hera Zhao	7599599910	Merge branch 'dev' into feature/qr-upload-hint Some checks failed PR Preview / teardown-preview (pull_request) Has been skipped Details Test / e2e-test (push) Has been cancelled Details Test / build-check (push) Has been cancelled Details Test / unit-test (push) Has been cancelled Details PR Preview / test (pull_request) Successful in 4s Details PR Preview / deploy-preview (pull_request) Successful in 14s Details # Conflicts: # frontend/src/components/RecipeDetailOverlay.vue	2026-04-07 22:25:15 +00:00
Hera Zhao	846058fa0f	Raise LoginModal z-index above recipe overlay Some checks failed Test / unit-test (push) Successful in 4s Details Test / build-check (push) Successful in 4s Details Test / e2e-test (push) Failing after 1m5s Details Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>	2026-04-07 22:19:48 +00:00
YoYo	08c2d5bd75	feat: 未登录用户也显示二维码上传提示，点击时引导登录/注册 Some checks failed PR Preview / teardown-preview (pull_request) Has been skipped Details Test / unit-test (push) Successful in 5s Details Test / build-check (push) Successful in 4s Details PR Preview / test (pull_request) Successful in 4s Details PR Preview / deploy-preview (pull_request) Successful in 13s Details Test / e2e-test (push) Failing after 1m7s Details	2026-04-07 22:13:42 +00:00
YoYo	7030dd107c	feat: 配方卡片加入上传个人二维码功能 Some checks failed Test / unit-test (push) Successful in 5s Details Test / build-check (push) Successful in 4s Details PR Preview / teardown-preview (pull_request) Has been skipped Details Test / e2e-test (push) Failing after 1m8s Details PR Preview / test (pull_request) Successful in 5s Details PR Preview / deploy-preview (pull_request) Successful in 13s Details - RecipeDetailOverlay: 未上传二维码/背景图时，卡片上方显示提示横幅，下方出现「上传我的二维码」按钮，点击跳转到 MyDiary 品牌设置页并记录来源配方 - MyDiary: 新增二维码图片上传区域（直接上传图片文件，存为 base64 → PUT /api/brand qr_code 字段）；上传成功后若有待返回配方则自动跳回配方卡片；修复 loadBrandSettings 字段名与后端不一致的问题 - RecipeSearch: 支持 ?openRecipe= 查询参数，页面挂载时自动打开指定配方卡片，实现从 MyDiary 上传后无缝返回 Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>	2026-04-07 21:58:17 +00:00