From 553850a3690e30924046340672bade88fe4be71c Mon Sep 17 00:00:00 2001
From: Hera Zhao <hera@euphon.net>
Date: Tue, 14 Apr 2026 13:36:32 +0000
Subject: [PATCH] =?UTF-8?q?feat:=20=E7=B2=BE=E6=B2=B9=E7=9F=A5=E8=AF=86?=
 =?UTF-8?q?=E5=8D=A1=E7=89=87=E5=8A=A0=E5=93=81=E7=89=8C=E5=85=83=E7=B4=A0?=
 =?UTF-8?q?=20=E2=80=94=20QR=E7=A0=81=E3=80=81=E8=83=8C=E6=99=AF=E5=9B=BE?=
 =?UTF-8?q?=E3=80=81Logo=E3=80=81=E5=93=81=E7=89=8C=E5=90=8D?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

复用配方卡片的品牌逻辑：
- 右上角显示QR码+品牌名
- 背景图半透明覆盖
- 底部显示Logo
- 保存图片时包含品牌元素

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
---
 frontend/src/views/OilReference.vue | 26 ++++++++++++++++++++++----
 1 file changed, 22 insertions(+), 4 deletions(-)

diff --git a/frontend/src/views/OilReference.vue b/frontend/src/views/OilReference.vue
index 5fbb068..fefc25f 100644
--- a/frontend/src/views/OilReference.vue
+++ b/frontend/src/views/OilReference.vue
@@ -181,9 +181,16 @@
 
     <!-- Oil Knowledge Card Modal -->
     <div v-if="activeCard && activeCardName" class="modal-overlay" @mousedown.self="closeOilModal">
-      <div class="oil-card-modal">
-        <div class="oil-card-header">
-          <div class="oil-card-header-content">
+      <div class="oil-card-modal" style="position:relative;overflow:hidden">
+        <!-- Brand background -->
+        <div v-if="brand.brand_bg" style="position:absolute;inset:0;width:100%;height:100%;background-size:cover;background-position:center;opacity:0.08;pointer-events:none;z-index:0" :style="{ backgroundImage: `url('${brand.brand_bg}')` }"></div>
+        <!-- QR code -->
+        <div v-if="brand.qr_code" style="position:absolute;top:16px;right:16px;display:flex;flex-direction:column;gap:3px;z-index:3" :style="{ alignItems: (brand.brand_align === 'left' ? 'flex-start' : brand.brand_align === 'right' ? 'flex-end' : 'center') }">
+          <img :src="brand.qr_code" crossorigin="anonymous" style="width:48px;height:48px;object-fit:cover;border-radius:6px;box-shadow:0 2px 6px rgba(0,0,0,0.1)" />
+          <div v-if="brand.brand_name" style="font-size:7px;color:rgba(255,255,255,0.8);line-height:1.3;max-width:60px;white-space:pre-line;text-align:center">{{ brand.brand_name }}</div>
+        </div>
+        <div class="oil-card-header" style="position:relative;z-index:1">
+          <div class="oil-card-header-content" :style="brand.qr_code ? 'padding-right:70px' : ''">
             <span class="oil-card-emoji">{{ activeCard.emoji }}</span>
             <div>
               <h2 class="oil-card-title">{{ activeCardName }}</h2>
@@ -196,7 +203,7 @@
               </div>
             </div>
           </div>
-          <button class="btn-close btn-close-light" @click="closeOilModal">✕</button>
+          <button class="btn-close btn-close-light" @click="closeOilModal" style="z-index:4">✕</button>
         </div>
         <!-- Method badges -->
         <div class="oil-card-methods">
@@ -227,6 +234,10 @@
             <h4 class="oil-card-caution-title">⚠️ 注意事项</h4>
             <p>{{ activeCard.caution }}</p>
           </div>
+          <!-- Logo -->
+          <div v-if="brand.brand_logo" style="padding-top:8px">
+            <img :src="brand.brand_logo" crossorigin="anonymous" style="height:24px;opacity:0.7" />
+          </div>
           <div style="text-align:center;padding-top:12px">
             <button class="btn btn-outline btn-sm" @click="saveCardImage(activeCardName)">💾 保存图片</button>
           </div>
@@ -414,6 +425,12 @@ const oils = useOilsStore()
 const recipeStore = useRecipesStore()
 const ui = useUiStore()
 
+// Brand data for card
+const brand = ref({})
+async function loadBrand() {
+  try { brand.value = await api.get('/api/brand') } catch {}
+}
+
 // Modal states
 const showDilution = ref(false)
 const showContra = ref(false)
@@ -637,6 +654,7 @@ async function openOilDetail(name) {
     activeCardName.value = name
     activeCard.value = card
     selectedOilName.value = null
+    loadBrand()
     // Pre-generate card image for instant save
     oilCardImageUrl.value = null
     await nextTick()