fix: 手机保存图片使用 navigator.share 直接保存到相册

- 新增 composables/useSaveImage.js
  - saveImageFromUrl: data URL → 手机分享/桌面下载
  - captureAndSave: DOM元素 → html2canvas → 保存
  - saveCanvasImage: canvas → 保存
- RecipeDetailOverlay: saveImage 改用 saveImageFromUrl
- OilReference: saveModalImage 改用 captureAndSave
- 手机端调用 navigator.share({files}) 弹出系统分享面板

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>

frontend/src/views/OilReference.vue

@@ -725,26 +725,18 @@ function exportPDF() {
   setTimeout(() => w.print(), 500)
 }
 
-// Save modal as image using html2canvas
+// 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
   try {
-    const { default: html2canvas } = await import('html2canvas')
-    const overlay = document.querySelector('.modal-overlay')
-    if (!overlay) return
-    const cardEl = overlay.querySelector('[style*="border-radius: 20px"], [style*="border-radius:20px"]') || overlay.children[0]
-    if (!cardEl) return
-    // Hide close buttons during capture
-    const btns = cardEl.querySelectorAll('button')
-    btns.forEach(b => b.style.display = 'none')
-    const canvas = await html2canvas(cardEl, { scale: 2, backgroundColor: '#ffffff', useCORS: true })
-    btns.forEach(b => b.style.display = '')
-    const url = canvas.toDataURL('image/png')
-    const a = document.createElement('a')
-    a.href = url
-    a.download = (name || '精油知识卡') + '.png'
-    a.click()
-    ui.showToast('图片已保存')
-  } catch (e) {
+    const { captureAndSave } = await import('../composables/useSaveImage')
+    const ok = await captureAndSave(cardEl, name || '精油知识卡')
+    if (ok) ui.showToast('图片已保存')
+  } catch {
     ui.showToast('保存失败')
   }
 }