fix: 移除所有权限身份显示，QR上传布局还原为initial commit样式

将 handleLogout 里的 window.location.reload() 改为 router.push('/')，
确保在任何需要登录的页面退出后都能回到配方查询页面。

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>

frontend/src/App.vue

@@ -15,7 +15,8 @@
             @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>
@@ -41,7 +42,7 @@
   <UserMenu v-if="showUserMenu" @close="showUserMenu = false" />
 
   <!-- Nav tabs -->
-  <div class="nav-tabs">
+  <div class="nav-tabs" :style="isPreview ? { top: '36px' } : {}">
     <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>
@@ -64,7 +65,7 @@
   <CustomDialog />
 
   <!-- Toast messages -->
-  <div v-for="(toast, i) in ui.toasts" :key="i" class="toast">{{ toast }}</div>
+  <div v-for="toast in ui.toasts" :key="toast.id" class="toast">{{ toast.msg }}</div>
 </template>
 
 <script setup>

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: 999;
+  border-radius: 20px; font-size: 14px; z-index: 9000;
   pointer-events: none; transition: opacity 0.3s;
 }
 

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">取消</button>
+        <button v-if="dialogState.type !== 'alert'" class="dialog-btn-outline" @click="cancel">{{ dialogState.cancelText || '取消' }}</button>
-        <button class="dialog-btn-primary" @click="ok">确定</button>
+        <button class="dialog-btn-primary" @click="ok">{{ dialogState.okText || '确定' }}</button>
       </div>
     </div>
   </div>

frontend/src/components/LoginModal.vue

@@ -104,8 +104,11 @@ async function submit() {
       ui.showToast('注册成功')
     }
     emit('close')
-    // Reload page data after auth change
+    if (ui.pendingAction) {
-    window.location.reload()
+      ui.runPendingAction()
+    } else {
+      window.location.reload()
+    }
   } catch (e) {
     errorMsg.value = e?.message || (mode.value === 'login' ? '登录失败，请检查用户名和密码' : '注册失败，请重试')
   } finally {
@@ -119,7 +122,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

@@ -39,18 +39,19 @@
         <!-- Card image (rendered by html2canvas) -->
         <div v-show="!cardImageUrl" ref="cardRef" class="export-card">
           <!-- Brand overlay layers -->
-          <img
+          <div
             v-if="brand.brand_bg"
-            :src="brand.brand_bg"
             class="card-brand-bg"
-            crossorigin="anonymous"
+            :style="{ backgroundImage: `url('${brand.brand_bg}')` }"
-          />
-          <img
-            v-if="brand.qr_code"
-            :src="brand.qr_code"
-            class="card-qr"
-            crossorigin="anonymous"
           />
+          <div v-if="brand.qr_code" class="card-qr-wrapper">
+            <img
+              :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"
@@ -126,6 +127,11 @@
             class="action-btn"
             @click="showTranslationEditor = true"
           >✏️ 修改翻译</button>
+          <button
+            v-if="showBrandHint"
+            class="action-btn action-btn-qr"
+            @click="goUploadQr"
+          >📲 上传我的二维码</button>
         </div>
 
         <!-- Translation editor (inline) -->
@@ -342,6 +348,7 @@
 
 <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'
@@ -349,6 +356,7 @@ 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
 
@@ -363,12 +371,14 @@ const recipesStore = useRecipesStore()
 const authStore = useAuthStore()
 const ui = useUiStore()
 const diaryStore = useDiaryStore()
+const router = useRouter()
 
 // ---- View state ----
 const viewMode = ref('card')
 const cardRef = ref(null)
 const cardImageUrl = ref(null)
 const cardLang = ref('zh')
+const selectedCardVolume = ref('单次')
 const showTranslationEditor = ref(false)
 const customRecipeNameEn = ref('')
 const customOilNameEn = ref({})
@@ -387,14 +397,30 @@ const canEditThisRecipe = computed(() => {
 
 const isFav = computed(() => recipesStore.isFavorite(recipe.value))
 
-// Card ingredients: exclude coconut oil
+// Scale ingredients proportionally to target volume; '单次' = no scaling
-const cardIngredients = computed(() =>
+function scaleIngredients(ingredients, volume) {
-  recipe.value.ingredients.filter(ing => ing.oil !== '椰子油')
+  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)
 )
 
-// Coconut oil drops
+const cardIngredients = computed(() =>
+  scaledCardIngredients.value.filter(ing => ing.oil !== '椰子油')
+)
+
+// Coconut oil drops (from scaled set)
 const coconutDrops = computed(() => {
-  const coco = recipe.value.ingredients.find(ing => ing.oil === '椰子油')
+  const coco = scaledCardIngredients.value.find(ing => ing.oil === '椰子油')
   return coco ? coco.drops : 0
 })
 
@@ -420,7 +446,7 @@ const dilutionDesc = computed(() => {
     : `该配方适用于单次用量（共${totalDrops}滴），其中纯精油 ${totalEoDrops.value} 滴，椰子油 ${coconutDrops.value} 滴，稀释比例为 1:${ratio}`
 })
 
-const priceInfo = computed(() => oilsStore.fmtCostWithRetail(recipe.value.ingredients))
+const priceInfo = computed(() => oilsStore.fmtCostWithRetail(scaledCardIngredients.value))
 
 // Today string
 const todayStr = computed(() => {
@@ -451,6 +477,30 @@ 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)
+const showBrandHint = computed(() =>
+  !!brand.value && !brand.value.qr_code && !brand.value.brand_bg
+)
+
+function goUploadQr() {
+  if (!authStore.isLoggedIn) {
+    ui.openLogin(() => goUploadQr())
+    return
+  }
+  if (recipe.value._id) {
+    localStorage.setItem('oil_return_recipe_id', recipe.value._id)
+  }
+  router.push('/mydiary')
 }
 
 // ---- Card image generation ----
@@ -483,6 +533,12 @@ function switchLang(lang) {
   nextTick(() => generateCardImage())
 }
 
+function onCardVolumeChange(ml) {
+  selectedCardVolume.value = ml
+  cardImageUrl.value = null
+  nextTick(() => generateCardImage())
+}
+
 async function saveImage() {
   if (!cardImageUrl.value) {
     await generateCardImage()
@@ -512,7 +568,7 @@ function copyText() {
   ].filter(Boolean).join('\n')
 
   navigator.clipboard.writeText(text).then(() => {
-    ui.showToast('已复制到剪贴板')
+    ui.showToast('已复制')
   }).catch(() => {
     ui.showToast('复制失败')
   })
@@ -554,7 +610,7 @@ function getCardRecipeName() {
 // ---- Favorite ----
 async function handleToggleFavorite() {
   if (!authStore.isLoggedIn) {
-    ui.openLogin()
+    ui.openLogin(() => handleToggleFavorite())
     return
   }
   if (!recipe.value._id) {
@@ -573,10 +629,10 @@ async function handleToggleFavorite() {
 // ---- Save to diary ----
 async function saveToDiary() {
   if (!authStore.isLoggedIn) {
-    ui.openLogin()
+    ui.openLogin(() => saveToDiary())
     return
   }
-  const name = prompt('保存为我的配方，名称：', recipe.value.name)
+  const name = await showPrompt('保存为我的配方，名称：', recipe.value.name)
   if (!name) return
   try {
     await api.post('/api/diary', {
@@ -801,6 +857,7 @@ 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')
@@ -941,32 +998,52 @@ async function saveRecipe() {
   inset: 0;
   width: 100%;
   height: 100%;
-  object-fit: cover;
+  background-size: cover;
-  opacity: 0.06;
+  background-position: center;
+  background-repeat: no-repeat;
+  opacity: 0.12;
   z-index: 0;
   pointer-events: none;
 }
 
-.card-qr {
+.card-qr-wrapper {
   position: absolute;
-  top: 16px;
+  top: 36px;
-  right: 16px;
+  right: 24px;
-  width: 64px;
+  display: flex;
-  height: 64px;
+  flex-direction: column;
-  object-fit: contain;
+  align-items: center;
-  z-index: 3;
+  gap: 3px;
-  opacity: 0.85;
+  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;
 }
 
 .card-logo {
   position: absolute;
-  bottom: 16px;
+  bottom: 60px;
   left: 50%;
   transform: translateX(-50%);
-  height: 28px;
+  height: 60px;
   object-fit: contain;
-  z-index: 3;
+  z-index: 1;
-  opacity: 0.3;
+  opacity: 0.2;
+  pointer-events: none;
 }
 
 .card-brand-text {
@@ -1146,6 +1223,42 @@ 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;
@@ -1403,6 +1516,10 @@ 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);

frontend/src/components/UserMenu.vue

@@ -2,9 +2,6 @@
   <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">
@@ -71,16 +68,6 @@ 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' })
@@ -136,7 +123,7 @@ function handleLogout() {
   auth.logout()
   ui.showToast('已退出登录')
   emit('close')
-  window.location.reload()
+  router.push('/')
 }
 
 onMounted(loadNotifications)
@@ -162,13 +149,7 @@ onMounted(loadNotifications)
   z-index: 4001;
 }
 
-.usermenu-name { font-size: 16px; font-weight: 600; color: #3e3a44; margin-bottom: 4px; }
+.usermenu-name { font-size: 16px; font-weight: 600; color: #3e3a44; margin-bottom: 14px; }
-.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 {

frontend/src/composables/useDialog.js

@@ -5,6 +5,8 @@ export const dialogState = reactive({
   type: 'alert', // 'alert', 'confirm', 'prompt'
   message: '',
   defaultValue: '',
+  okText: '',
+  cancelText: '',
   resolve: null
 })
 
@@ -13,15 +15,19 @@ export function showAlert(msg) {
     dialogState.visible = true
     dialogState.type = 'alert'
     dialogState.message = msg
+    dialogState.okText = ''
+    dialogState.cancelText = ''
     dialogState.resolve = resolve
   })
 }
 
-export function showConfirm(msg) {
+export function showConfirm(msg, opts = {}) {
   return new Promise(resolve => {
     dialogState.visible = true
     dialogState.type = 'confirm'
     dialogState.message = msg
+    dialogState.okText = opts.okText || ''
+    dialogState.cancelText = opts.cancelText || ''
     dialogState.resolve = resolve
   })
 }

frontend/src/stores/oils.js

@@ -5,6 +5,7 @@ import { api } from '../composables/useApi'
 export const DROPS_PER_ML = 18.6
 
 export const VOLUME_DROPS = {
+  '单次': null,
   '2.5': 46,
   '5': 93,
   '10': 186,

frontend/src/stores/ui.js

@@ -5,6 +5,7 @@ export const useUiStore = defineStore('ui', () => {
   const currentSection = ref('search')
   const showLoginModal = ref(false)
   const toasts = ref([])
+  const pendingAction = ref(null)
 
   let toastId = 0
 
@@ -20,7 +21,10 @@ export const useUiStore = defineStore('ui', () => {
     }, duration)
   }
 
-  function openLogin() {
+  function openLogin(afterLogin) {
+    if (afterLogin) {
+      pendingAction.value = afterLogin
+    }
     showLoginModal.value = true
   }
 
@@ -28,13 +32,23 @@ 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,
   }
 })

frontend/src/views/MyDiary.vue

@@ -107,6 +107,11 @@
 
     <!-- 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>
 
@@ -123,6 +128,16 @@
           </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')">
@@ -159,10 +174,6 @@
           <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">
@@ -201,7 +212,8 @@
 </template>
 
 <script setup>
-import { ref, computed, onMounted, watch } from 'vue'
+import { ref, onMounted, watch } from 'vue'
+import { useRouter } from 'vue-router'
 import { useAuthStore } from '../stores/auth'
 import { useOilsStore } from '../stores/oils'
 import { useDiaryStore } from '../stores/diary'
@@ -214,20 +226,24 @@ const auth = useAuthStore()
 const oils = useOilsStore()
 const diaryStore = useDiaryStore()
 const ui = useUiStore()
+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('')
 
 // 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('')
@@ -236,22 +252,20 @@ 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
@@ -345,8 +359,9 @@ async function loadBrandSettings() {
       const data = await res.json()
       brandName.value = data.brand_name || ''
       brandQrUrl.value = data.qr_url || ''
-      brandLogo.value = data.logo_url || ''
+      brandQrImage.value = data.qr_code || ''
-      brandBg.value = data.bg_url || ''
+      brandLogo.value = data.brand_logo || ''
+      brandBg.value = data.brand_bg || ''
     }
   } catch {
     // no brand settings yet
@@ -369,26 +384,35 @@ async function saveBrandSettings() {
 
 function triggerUpload(type) {
   if (type === 'logo') logoInput.value?.click()
-  else bgInput.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)
+  })
 }
 
 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 token = localStorage.getItem('oil_auth_token') || ''
+    const base64 = await readFileAsBase64(file)
-    const res = await fetch('/api/brand-upload', {
+    const fieldMap = { logo: 'brand_logo', bg: 'brand_bg', qr: 'qr_code' }
-      method: 'POST',
+    const field = fieldMap[type]
-      headers: token ? { Authorization: 'Bearer ' + token } : {},
+    if (!field) return
-      body: formData,
+    const res = await api('/api/brand', {
+      method: 'PUT',
+      body: JSON.stringify({ [field]: base64 }),
     })
     if (res.ok) {
-      const data = await res.json()
+      if (type === 'logo') brandLogo.value = base64
-      if (type === 'logo') brandLogo.value = data.url
+      else if (type === 'bg') brandBg.value = base64
-      else brandBg.value = data.url
+      else if (type === 'qr') brandQrImage.value = base64
       ui.showToast('上传成功')
     }
   } catch {
@@ -718,6 +742,39 @@ 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;
@@ -739,22 +796,6 @@ 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;
@@ -772,6 +813,18 @@ 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;
@@ -783,6 +836,18 @@ 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,7 +123,8 @@
 </template>
 
 <script setup>
-import { ref, computed, onMounted, nextTick } from 'vue'
+import { ref, computed, onMounted, nextTick, watch } from 'vue'
+import { useRoute, useRouter } from 'vue-router'
 import { useAuthStore } from '../stores/auth'
 import { useOilsStore } from '../stores/oils'
 import { useRecipesStore } from '../stores/recipes'
@@ -136,6 +137,8 @@ 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)
@@ -154,6 +157,27 @@ 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) {