fix: 预览图布局匹配实际卡片、QR对齐、返回按钮

预览图(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>

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;

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" />
+            <!-- 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" />
-            <div class="card-preview-cost">💰 ¥12.50</div>
+              <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>
 
+        <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;
 }