From fc16436ebd339b322cac9f9a6e400c5e3e476271 Mon Sep 17 00:00:00 2001
From: Hera Zhao <hera@euphon.net>
Date: Thu, 9 Apr 2026 09:04:11 +0000
Subject: [PATCH] =?UTF-8?q?fix:=20=E7=A8=80=E9=87=8A=E6=AF=94=E4=BE=8B/?=
 =?UTF-8?q?=E4=BD=BF=E7=94=A8=E7=A6=81=E5=BF=8C=E4=BF=9D=E5=AD=98=E5=9B=BE?=
 =?UTF-8?q?=E7=89=87=E6=94=B9=E7=94=A8=20ref=20=E7=9B=B4=E6=8E=A5=E5=AE=9A?=
 =?UTF-8?q?=E4=BD=8D=E5=85=83=E7=B4=A0?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

之前用 querySelector 找 modal 内元素，选择器匹配失败导致
手机端没有触发 navigator.share。现在用 Vue ref 直接引用
卡片 DOM 元素，传给 captureAndSave。

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

diff --git a/frontend/src/views/OilReference.vue b/frontend/src/views/OilReference.vue
index f9cbc38..da11898 100644
--- a/frontend/src/views/OilReference.vue
+++ b/frontend/src/views/OilReference.vue
@@ -16,7 +16,7 @@
 
     <!-- Dilution Ratio Modal -->
     <div v-if="showDilution" class="modal-overlay" @click.self="showDilution = false">
-      <div style="position:relative;z-index:1;background:white;border-radius:20px;max-width:420px;width:100%;max-height:88vh;overflow-y:auto;box-shadow:0 16px 56px rgba(0,0,0,0.25)" @click.stop>
+      <div ref="dilutionCardRef" style="position:relative;z-index:1;background:white;border-radius:20px;max-width:420px;width:100%;max-height:88vh;overflow-y:auto;box-shadow:0 16px 56px rgba(0,0,0,0.25)" @click.stop>
         <div style="background:linear-gradient(135deg,#2e7d32,#66bb6a);border-radius:20px 20px 0 0;padding:28px 24px;color:white;text-align:center;position:relative">
           <button @click="showDilution = false" style="position:absolute;top:12px;right:16px;background:rgba(255,255,255,0.2);border:none;color:white;width:30px;height:30px;border-radius:50%;cursor:pointer;font-size:16px">×</button>
           <div style="font-size:48px;margin-bottom:8px">💧</div>
@@ -45,7 +45,7 @@
 
     <!-- Safety Cautions Modal -->
     <div v-if="showContra" class="modal-overlay" @click.self="showContra = false">
-      <div style="position:relative;z-index:1;background:white;border-radius:20px;max-width:420px;width:100%;max-height:88vh;overflow-y:auto;box-shadow:0 16px 56px rgba(0,0,0,0.25)" @click.stop>
+      <div ref="contraCardRef" style="position:relative;z-index:1;background:white;border-radius:20px;max-width:420px;width:100%;max-height:88vh;overflow-y:auto;box-shadow:0 16px 56px rgba(0,0,0,0.25)" @click.stop>
         <div style="background:linear-gradient(135deg,#e65100,#ff9800);border-radius:20px 20px 0 0;padding:28px 24px;color:white;text-align:center;position:relative">
           <button @click="showContra = false" style="position:absolute;top:12px;right:16px;background:rgba(255,255,255,0.2);border:none;color:white;width:30px;height:30px;border-radius:50%;cursor:pointer;font-size:16px">×</button>
           <div style="font-size:48px;margin-bottom:8px">⚠️</div>
@@ -360,6 +360,8 @@ const ui = useUiStore()
 const showDilution = ref(false)
 const showContra = ref(false)
 const showAddForm = ref(false)
+const dilutionCardRef = ref(null)
+const contraCardRef = ref(null)
 
 // Search & view
 const searchQuery = ref('')
@@ -725,25 +727,29 @@ function exportPDF() {
   setTimeout(() => w.print(), 500)
 }
 
-// Save modal as image (mobile: share to photos, desktop: download)
-async function saveModalImage(name) {
-  const overlay = document.querySelector('.modal-overlay')
-  if (!overlay) return
-  const cardEl = overlay.querySelector('[style*="border-radius: 20px"], [style*="border-radius:20px"]') ||
-                 overlay.querySelector('.oil-card-modal') || overlay.children[0]
-  if (!cardEl) return
+// Save a specific element as image (mobile: share, desktop: download)
+async function saveElementAsImage(el, name) {
+  if (!el) { ui.showToast('保存失败'); return }
   try {
     const { captureAndSave } = await import('../composables/useSaveImage')
-    const ok = await captureAndSave(cardEl, name || '精油知识卡')
+    const ok = await captureAndSave(el, name)
     if (ok) ui.showToast('图片已保存')
   } catch {
     ui.showToast('保存失败')
   }
 }
 
-function saveDilutionImage() { saveModalImage('精油稀释比例指南') }
-function saveContraImage() { saveModalImage('精油使用禁忌') }
-function saveCardImage(name) { saveModalImage(name + '_精油知识卡') }
+function saveDilutionImage() {
+  saveElementAsImage(dilutionCardRef.value, '精油稀释比例指南')
+}
+function saveContraImage() {
+  saveElementAsImage(contraCardRef.value, '精油使用禁忌')
+}
+function saveCardImage(name) {
+  // Oil knowledge card modal
+  const el = document.querySelector('.oil-card-modal')
+  saveElementAsImage(el, name + '_精油知识卡')
+}
 </script>
 
 <style scoped>