From 4a3fadb0483b01f0f50dcf787c9e05a4cb179c31 Mon Sep 17 00:00:00 2001
From: Hera Zhao <hera@euphon.net>
Date: Thu, 9 Apr 2026 11:48:51 +0000
Subject: [PATCH] =?UTF-8?q?fix:=20=E9=A2=84=E8=A7=88=E5=9B=BE=E5=B8=83?=
 =?UTF-8?q?=E5=B1=80=E5=8C=B9=E9=85=8D=E5=AE=9E=E9=99=85=E5=8D=A1=E7=89=87?=
 =?UTF-8?q?=E3=80=81QR=E5=AF=B9=E9=BD=90=E3=80=81=E8=BF=94=E5=9B=9E?=
 =?UTF-8?q?=E6=8C=89=E9=92=AE?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

预览图(MyDiary):
- QR: top-right与内容区对齐(top:16px right:16px)
- 内容区右侧留出QR空间(padding-right:50px)
- 总成本条: flow layout不再absolute
- Logo左下 + 制作日期右下(flex space-between)
- 品牌名在最底部
- 去掉fixed height，自适应内容

配方卡片(RecipeDetailOverlay):
- QR: top:36px right:36px 精确对齐卡片padding

返回按钮:
- 保存品牌设置右侧加"← 返回配方卡片"按钮
- 从配方卡片点📲上传QR后可返回原配方

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
---
 .../src/components/RecipeDetailOverlay.vue    |  2 +-
 frontend/src/views/MyDiary.vue                | 90 ++++++++++++-------
 2 files changed, 57 insertions(+), 35 deletions(-)

diff --git a/frontend/src/components/RecipeDetailOverlay.vue b/frontend/src/components/RecipeDetailOverlay.vue
index 52d4ee9..34eb920 100644
--- a/frontend/src/components/RecipeDetailOverlay.vue
+++ b/frontend/src/components/RecipeDetailOverlay.vue
@@ -1143,7 +1143,7 @@ async function saveRecipe() {
 
 .card-qr-wrapper {
   position: absolute;
-  top: 34px;
+  top: 36px;
   right: 36px;
   display: flex;
   flex-direction: column;
diff --git a/frontend/src/views/MyDiary.vue b/frontend/src/views/MyDiary.vue
index 6805a5d..ef1ad36 100644
--- a/frontend/src/views/MyDiary.vue
+++ b/frontend/src/views/MyDiary.vue
@@ -170,19 +170,31 @@
           <label class="form-label">📋 配方卡片预览</label>
           <div class="card-preview-mini">
             <div v-if="brandBg" class="card-preview-bg" :style="{ backgroundImage: 'url(' + brandBg + ')' }"></div>
+            <!-- QR: top-right, aligned with content -->
+            <img v-if="brandQrImage" :src="brandQrImage" class="card-preview-qr" />
+            <!-- Content -->
             <div class="card-preview-content">
-              <div style="font-size:8px;letter-spacing:2px;color:var(--sage);margin-bottom:4px">doTERRA · RECIPE CARD</div>
+              <div style="font-size:8px;letter-spacing:2px;color:var(--sage);margin-bottom:4px">doTERRA · 来自大地的礼物</div>
               <div style="font-size:14px;font-weight:700;color:var(--text-dark)">配方名称</div>
               <div style="font-size:10px;color:var(--text-light);margin-top:2px">薰衣草 · 乳香 · 茶树</div>
             </div>
-            <img v-if="brandQrImage" :src="brandQrImage" class="card-preview-qr" />
-            <img v-if="brandLogo" :src="brandLogo" class="card-preview-logo" />
-            <div class="card-preview-cost">💰 ¥12.50</div>
+            <!-- Total cost bar -->
+            <div class="card-preview-cost">配方总成本 &nbsp; ¥12.50</div>
+            <!-- Logo left + date right -->
+            <div class="card-preview-bottom">
+              <img v-if="brandLogo" :src="brandLogo" class="card-preview-logo" />
+              <span v-else></span>
+              <span class="card-preview-date">制作日期：{{ new Date().toLocaleDateString('zh-CN') }}</span>
+            </div>
+            <!-- Brand name -->
             <div v-if="brandName" class="card-preview-brand" :style="{ textAlign: brandAlign }">{{ brandName }}</div>
           </div>
         </div>
 
-        <button class="btn btn-primary" @click="saveBrandSettings">💾 保存品牌设置</button>
+        <div style="display:flex;gap:8px;align-items:center">
+          <button class="btn btn-primary" @click="saveBrandSettings">💾 保存品牌设置</button>
+          <button v-if="returnRecipeId" class="btn btn-outline" @click="goBackToRecipe">← 返回配方卡片</button>
+        </div>
       </div>
     </div>
 
@@ -1031,11 +1043,10 @@ async function applyBusiness() {
   color: var(--sage-dark);
 }
 
-/* Card preview mini */
+/* Card preview mini — matches actual card layout */
 .card-preview-mini {
   position: relative;
   width: 280px;
-  height: 180px;
   background: linear-gradient(145deg, #faf7f0, #f5ede0);
   border-radius: 14px;
   border: 1px solid #e0ccaa;
@@ -1050,49 +1061,60 @@ async function applyBusiness() {
   background-position: center;
   opacity: 0.15;
 }
-.card-preview-content { position: relative; z-index: 1; }
+.card-preview-content {
+  position: relative;
+  z-index: 1;
+  padding-right: 50px; /* leave room for QR */
+}
 .card-preview-qr {
   position: absolute;
-  top: 10px;
-  right: 10px;
+  top: 16px;
+  right: 16px;
   width: 40px;
   height: 40px;
-  object-fit: cover;
-  border-radius: 4px;
-  z-index: 1;
-}
-.card-preview-logo {
-  position: absolute;
-  bottom: 40px;
-  left: 16px;
-  height: 20px;
-  width: auto;
   object-fit: contain;
-  z-index: 1;
+  border-radius: 4px;
+  z-index: 2;
 }
 .card-preview-cost {
-  position: absolute;
-  bottom: 12px;
-  left: 16px;
-  right: 16px;
-  height: 24px;
+  position: relative;
+  z-index: 1;
+  margin-top: 12px;
+  height: 22px;
   background: linear-gradient(135deg, var(--sage), #5a7d5e);
   border-radius: 6px;
   display: flex;
   align-items: center;
-  justify-content: center;
+  justify-content: space-between;
+  padding: 0 10px;
   color: white;
-  font-size: 10px;
+  font-size: 9px;
+}
+.card-preview-bottom {
+  position: relative;
   z-index: 1;
+  display: flex;
+  justify-content: space-between;
+  align-items: flex-end;
+  margin-top: 8px;
+}
+.card-preview-logo {
+  height: 16px;
+  width: auto;
+  object-fit: contain;
+  opacity: 0.6;
+}
+.card-preview-date {
+  font-size: 8px;
+  color: var(--text-light);
+  letter-spacing: 0.5px;
 }
 .card-preview-brand {
-  position: absolute;
-  bottom: 40px;
-  left: 16px;
-  right: 16px;
-  font-size: 9px;
-  color: var(--text-light);
+  position: relative;
   z-index: 1;
+  margin-top: 4px;
+  font-size: 8px;
+  color: var(--text-light);
   white-space: pre-line;
 }