From 812da98abc5e39c63ad7d3e42b7b2289a962b1f2 Mon Sep 17 00:00:00 2001
From: Hera Zhao <hera@euphon.net>
Date: Fri, 10 Apr 2026 17:32:36 +0000
Subject: [PATCH] =?UTF-8?q?fix:=20HEIC=E5=8F=8C=E9=87=8D=E5=9B=9E=E9=80=80?=
 =?UTF-8?q?+=E6=A0=87=E7=AD=BE=E6=96=87=E6=A1=88=E7=BB=9F=E4=B8=80+accept?=
 =?UTF-8?q?=E6=A0=BC=E5=BC=8F?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- HEIC转换：heic2any失败后用createImageBitmap回退
- accept限定具体格式让iOS自动转HEIC
- 品牌名称标签改为"显示在卡片右上角二维码下方"

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

diff --git a/frontend/src/views/MyDiary.vue b/frontend/src/views/MyDiary.vue
index 81b1599..2a7081f 100644
--- a/frontend/src/views/MyDiary.vue
+++ b/frontend/src/views/MyDiary.vue
@@ -125,7 +125,7 @@
               <img v-if="brandQrImage" :src="brandQrImage" class="upload-box-img" />
               <span v-else class="upload-box-hint">点击上传</span>
             </div>
-            <input ref="qrInput" type="file" accept="image/*" style="display:none" @change="handleUpload('qr', $event)" />
+            <input ref="qrInput" type="file" accept="image/jpeg,image/png,image/webp,image/heic,image/heif" style="display:none" @change="handleUpload('qr', $event)" />
             <button v-if="brandQrImage" class="btn-clear" @click="clearBrandImage('qr')">清除</button>
           </div>
 
@@ -137,7 +137,7 @@
               <img v-if="brandBg" :src="brandBg" class="upload-box-img" />
               <span v-else class="upload-box-hint">点击上传</span>
             </div>
-            <input ref="bgInput" type="file" accept="image/*" style="display:none" @change="handleUpload('bg', $event)" />
+            <input ref="bgInput" type="file" accept="image/jpeg,image/png,image/webp,image/heic,image/heif" style="display:none" @change="handleUpload('bg', $event)" />
             <button v-if="brandBg" class="btn-clear" @click="clearBrandImage('bg')">清除</button>
           </div>
 
@@ -149,14 +149,14 @@
               <img v-if="brandLogo" :src="brandLogo" class="upload-box-img" />
               <span v-else class="upload-box-hint">点击上传</span>
             </div>
-            <input ref="logoInput" type="file" accept="image/*" style="display:none" @change="handleUpload('logo', $event)" />
+            <input ref="logoInput" type="file" accept="image/jpeg,image/png,image/webp,image/heic,image/heif" style="display:none" @change="handleUpload('logo', $event)" />
             <button v-if="brandLogo" class="btn-clear" @click="clearBrandImage('logo')">清除</button>
           </div>
         </div>
 
         <!-- Brand name -->
         <div class="form-group">
-          <label class="form-label">品牌名称或标语（显示在二维码下方）</label>
+          <label class="form-label">品牌名称或标语（显示在卡片右上角二维码下方）</label>
           <textarea v-model="brandName" class="form-control" rows="2" placeholder="扫码申请成为优惠顾客&#10;我的精油小屋" style="max-width:350px;font-size:13px" @blur="saveBrandSettings"></textarea>
           <div style="display:flex;gap:6px;margin-top:6px">
             <button class="btn-align" :class="{ active: brandAlign === 'left' }" @click="brandAlign='left'; saveBrandSettings()">靠左</button>
@@ -580,15 +580,26 @@ async function handleUpload(type, event) {
     const isHeic = file.name.toLowerCase().match(/\.hei[cf]$/) ||
       file.type === 'image/heic' || file.type === 'image/heif'
     if (isHeic) {
-      ui.showToast('正在转换HEIC格式...')
+      ui.showToast('正在转换格式...')
       try {
         const heic2any = (await import('heic2any')).default
         let blob = await heic2any({ blob: file, toType: 'image/jpeg', quality: 0.8 })
         if (Array.isArray(blob)) blob = blob[0]
         file = new File([blob], 'photo.jpg', { type: 'image/jpeg' })
-      } catch (e) {
-        ui.showToast('HEIC转换失败，请手动转为JPG后上传')
-        return
+      } catch {
+        // Fallback: try createImageBitmap (works on some browsers)
+        try {
+          const bmp = await createImageBitmap(file)
+          const canvas = document.createElement('canvas')
+          canvas.width = bmp.width
+          canvas.height = bmp.height
+          canvas.getContext('2d').drawImage(bmp, 0, 0)
+          const jpegBlob = await new Promise(r => canvas.toBlob(r, 'image/jpeg', 0.8))
+          file = new File([jpegBlob], 'photo.jpg', { type: 'image/jpeg' })
+        } catch {
+          ui.showToast('该格式暂不支持，请在相册中选择"自动"格式或转为JPG后上传')
+          return
+        }
       }
     }
     let base64 = await readFileAsBase64(file)