From 5d8f1f1e1f987ec59f2679f96dd185c00cf2e68f Mon Sep 17 00:00:00 2001
From: Hera Zhao <hera@euphon.net>
Date: Thu, 9 Apr 2026 09:45:25 +0000
Subject: [PATCH] =?UTF-8?q?fix:=20=E4=BF=9D=E5=AD=98=E6=8C=89=E9=92=AE?=
 =?UTF-8?q?=E7=A7=BB=E5=88=B0=E5=8D=A1=E7=89=87=E5=A4=96=E9=9D=A2=EF=BC=8C?=
 =?UTF-8?q?=E6=88=AA=E5=9B=BE=E6=97=B6=E4=B8=8D=E5=8C=85=E5=90=AB=E6=8C=89?=
 =?UTF-8?q?=E9=92=AE?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

配方卡片能正常弹分享面板是因为按钮不在截图区域内。
现在稀释比例/使用禁忌/知识卡的保存按钮也移到 modal-overlay
层级（卡片 div 外面），html2canvas 截图时不会受按钮影响。
generateImageFromRef 也不再需要隐藏/恢复按钮的逻辑。

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

diff --git a/frontend/src/views/OilReference.vue b/frontend/src/views/OilReference.vue
index 9b32c08..fb60fe2 100644
--- a/frontend/src/views/OilReference.vue
+++ b/frontend/src/views/OilReference.vue
@@ -36,11 +36,9 @@
           <div style="margin-top:16px;padding:12px;background:#e8f5e9;border-radius:10px;font-size:12px;color:#2e7d32;text-align:center">
             💡 稀释比例 = 1滴精油 : N滴椰子油<br>比例越大越温和，新手建议从高稀释比例开始
           </div>
-          <div style="text-align:center;margin-top:12px">
-            <button @click="saveDilutionImage" style="padding:8px 16px;border-radius:10px;border:1.5px solid var(--sage);background:white;color:var(--sage-dark);cursor:pointer;font-size:13px;font-family:inherit">💾 保存图片</button>
-          </div>
         </div>
       </div>
+      <button @click="saveDilutionImage" style="margin-top:12px;padding:8px 20px;border-radius:20px;border:none;background:rgba(255,255,255,0.9);color:#2e7d32;cursor:pointer;font-size:13px;font-family:inherit;font-weight:600;z-index:2">💾 保存图片</button>
     </div>
 
     <!-- Safety Cautions Modal -->
@@ -77,11 +75,9 @@
             <span style="font-size:20px;flex-shrink:0">💧</span>
             <div><div style="font-weight:600;color:var(--text-dark)">少量多次，多喝水</div><div style="font-size:12px;color:var(--text-light);margin-top:2px">使用精油后多补充水分，帮助身体代谢</div></div>
           </div>
-          <div style="text-align:center;margin-top:12px">
-            <button @click="saveContraImage" style="padding:8px 16px;border-radius:10px;border:1.5px solid #e65100;background:white;color:#e65100;cursor:pointer;font-size:13px;font-family:inherit">💾 保存图片</button>
-          </div>
         </div>
       </div>
+      <button @click="saveContraImage" style="margin-top:12px;padding:8px 20px;border-radius:20px;border:none;background:rgba(255,255,255,0.9);color:#e65100;cursor:pointer;font-size:13px;font-family:inherit;font-weight:600;z-index:2">💾 保存图片</button>
     </div>
 
     <!-- Search + View Toggle + Add + PDF -->
@@ -207,11 +203,9 @@
             <h4 class="oil-card-caution-title">⚠️ 注意事项</h4>
             <p>{{ activeCard.caution }}</p>
           </div>
-          <div style="text-align:center;padding-top:12px">
-            <button class="btn btn-outline btn-sm" @click="saveCardImage(activeCardName)">💾 保存图片</button>
-          </div>
         </div>
       </div>
+      <button @click="saveCardImage(activeCardName)" style="margin-top:12px;padding:8px 20px;border-radius:20px;border:none;background:rgba(255,255,255,0.9);color:var(--sage-dark);cursor:pointer;font-size:13px;font-family:inherit;font-weight:600;z-index:2">💾 保存图片</button>
     </div>
 
     <!-- Simple Oil Detail Panel (for oils without a knowledge card) -->
@@ -738,12 +732,10 @@ const oilCardImageUrl = ref(null)
 async function generateImageFromRef(elRef, imageUrlRef) {
   const el = elRef.value || elRef
   if (!el) return
-  // Hide buttons during capture
-  const btns = el.querySelectorAll('button')
-  btns.forEach(b => { b._d = b.style.display; b.style.display = 'none' })
   await nextTick()
   await new Promise(r => setTimeout(r, 100))
   try {
+    // Same params as RecipeDetailOverlay.generateCardImage
     const canvas = await html2canvas(el, {
       backgroundColor: null,
       scale: 3,
@@ -753,8 +745,6 @@ async function generateImageFromRef(elRef, imageUrlRef) {
     imageUrlRef.value = canvas.toDataURL('image/png')
   } catch (e) {
     console.error('generateImage failed:', e)
-  } finally {
-    btns.forEach(b => b.style.display = b._d || '')
   }
 }