From 2469f156563b9c91c30e712337fef67ee3940a3d Mon Sep 17 00:00:00 2001
From: Hera Zhao <hera@euphon.net>
Date: Thu, 9 Apr 2026 09:40:28 +0000
Subject: [PATCH] =?UTF-8?q?rewrite:=20=E7=B2=BE=E6=B2=B9=E4=BB=B7=E7=9B=AE?=
 =?UTF-8?q?=E9=A1=B5=E4=BF=9D=E5=AD=98=E5=9B=BE=E7=89=87=E9=80=BB=E8=BE=91?=
 =?UTF-8?q?=E5=AE=8C=E5=85=A8=E7=85=A7=E6=90=AC=E9=85=8D=E6=96=B9=E5=8D=A1?=
 =?UTF-8?q?=E7=89=87?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

完全复制 RecipeDetailOverlay 的模式:
1. import html2canvas at top level (not dynamic)
2. ref 存预生成的 imageUrl (dilutionImageUrl, contraImageUrl, oilCardImageUrl)
3. generateImageFromRef: html2canvas截图→dataUrl存入ref
   参数: backgroundColor=null, scale=3, useCORS=true, allowTaint=false
4. saveGeneratedImage: 如果没截图先生成，然后调 saveImageFromUrl
5. saveImageFromUrl: navigator.share({files}) → 系统分享面板

跟 RecipeDetailOverlay.saveImage 每一步都一样。

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

diff --git a/frontend/src/views/OilReference.vue b/frontend/src/views/OilReference.vue
index 241a87c..9b32c08 100644
--- a/frontend/src/views/OilReference.vue
+++ b/frontend/src/views/OilReference.vue
@@ -342,7 +342,8 @@
 </template>
 
 <script setup>
-import { ref, computed, watch } from 'vue'
+import { ref, computed, watch, nextTick } from 'vue'
+import html2canvas from 'html2canvas'
 import { useOilsStore, VOLUME_DROPS, DROPS_PER_ML } from '../stores/oils'
 import { useAuthStore } from '../stores/auth'
 import { useUiStore } from '../stores/ui'
@@ -727,45 +728,63 @@ function exportPDF() {
   setTimeout(() => w.print(), 500)
 }
 
-// Save element as image — identical to recipe card flow
-async function saveElementAsImage(el, name) {
-  if (!el) { ui.showToast('找不到卡片'); return }
-  const html2canvas = (await import('html2canvas')).default
-  const { saveImageFromUrl } = await import('../composables/useSaveImage')
+// ──── Save image logic (identical to RecipeDetailOverlay) ────
 
+// Pre-generated image URLs (same pattern as cardImageUrl in recipe card)
+const dilutionImageUrl = ref(null)
+const contraImageUrl = ref(null)
+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 recipe card's generateCardImage
     const canvas = await html2canvas(el, {
       backgroundColor: null,
       scale: 3,
       useCORS: true,
       allowTaint: false,
     })
-    btns.forEach(b => b.style.display = b._d || '')
-
-    const dataUrl = canvas.toDataURL('image/png')
-    await saveImageFromUrl(dataUrl, name)
-    ui.showToast('图片已保存')
+    imageUrlRef.value = canvas.toDataURL('image/png')
   } catch (e) {
+    console.error('generateImage failed:', e)
+  } finally {
     btns.forEach(b => b.style.display = b._d || '')
-    console.error('saveElementAsImage failed:', e)
-    ui.showToast('截图失败: ' + (e.message || '未知错误'))
   }
 }
 
+async function saveGeneratedImage(imageUrlRef, elRef, name) {
+  // Generate if not already done
+  if (!imageUrlRef.value) {
+    await generateImageFromRef(elRef, imageUrlRef)
+  }
+  if (!imageUrlRef.value) {
+    ui.showToast('图片生成失败')
+    return
+  }
+  // Same as RecipeDetailOverlay.saveImage
+  const { saveImageFromUrl } = await import('../composables/useSaveImage')
+  await saveImageFromUrl(imageUrlRef.value, name)
+  ui.showToast('已保存图片')
+}
+
 function saveDilutionImage() {
-  saveElementAsImage(dilutionCardRef.value, '精油稀释比例指南')
+  saveGeneratedImage(dilutionImageUrl, dilutionCardRef, '精油稀释比例指南')
 }
 function saveContraImage() {
-  saveElementAsImage(contraCardRef.value, '精油使用禁忌')
+  saveGeneratedImage(contraImageUrl, contraCardRef, '精油使用禁忌')
 }
 function saveCardImage(name) {
   const el = document.querySelector('.oil-card-modal')
-  saveElementAsImage(el, name + '_精油知识卡')
+  if (!el) { ui.showToast('找不到卡片'); return }
+  // Use a temporary ref-like object
+  const tmpRef = { value: el }
+  saveGeneratedImage(oilCardImageUrl, tmpRef, name + '_精油知识卡')
 }
 </script>