diff --git a/frontend/src/views/MyDiary.vue b/frontend/src/views/MyDiary.vue index 3f5180f..cf82f0c 100644 --- a/frontend/src/views/MyDiary.vue +++ b/frontend/src/views/MyDiary.vue @@ -2,8 +2,8 @@
- - + +
@@ -400,15 +400,16 @@ async function loadBrandSettings() { async function saveBrandSettings() { try { - await api('/api/brand', { + const res = await api('/api/brand', { method: 'PUT', body: JSON.stringify({ brand_name: brandName.value, brand_align: brandAlign.value, }), }) + if (res.ok) ui.showToast('已保存') } catch { - // silent + ui.showToast('保存失败') } } @@ -427,7 +428,7 @@ function readFileAsBase64(file) { }) } -// Compress image if too large +// Compress image if too large (keeps PNG for small images, JPEG for large) function compressImage(base64, maxSize = 500000) { return new Promise((resolve) => { if (base64.length <= maxSize) { resolve(base64); return } @@ -435,8 +436,7 @@ function compressImage(base64, maxSize = 500000) { img.onload = () => { const canvas = document.createElement('canvas') let w = img.width, h = img.height - // Scale down if very large - const maxDim = 800 + const maxDim = 600 if (w > maxDim || h > maxDim) { const ratio = Math.min(maxDim / w, maxDim / h) w = Math.round(w * ratio) @@ -445,14 +445,19 @@ function compressImage(base64, maxSize = 500000) { canvas.width = w canvas.height = h canvas.getContext('2d').drawImage(img, 0, 0, w, h) - let quality = 0.8 - let result = canvas.toDataURL('image/jpeg', quality) - while (result.length > maxSize && quality > 0.2) { - quality -= 0.1 - result = canvas.toDataURL('image/jpeg', quality) + // Try PNG first, then JPEG with decreasing quality + let result = canvas.toDataURL('image/png') + if (result.length > maxSize) { + let quality = 0.85 + while (quality > 0.2) { + result = canvas.toDataURL('image/jpeg', quality) + if (result.length <= maxSize) break + quality -= 0.1 + } } resolve(result) } + img.onerror = () => resolve(base64) // fallback: return original img.src = base64 }) } @@ -467,6 +472,7 @@ async function handleUpload(type, event) { const fieldMap = { logo: 'brand_logo', bg: 'brand_bg', qr: 'qr_code' } const field = fieldMap[type] if (!field) return + ui.showToast('正在上传...') const res = await api('/api/brand', { method: 'PUT', body: JSON.stringify({ [field]: base64 }), @@ -475,13 +481,13 @@ async function handleUpload(type, event) { if (type === 'logo') brandLogo.value = base64 else if (type === 'bg') brandBg.value = base64 else if (type === 'qr') brandQrImage.value = base64 - ui.showToast('上传成功') + ui.showToast('上传成功 ✓') } else { const err = await res.json().catch(() => ({})) - ui.showToast(err.detail || '上传失败') + ui.showToast('上传失败: ' + (err.detail || res.status)) } } catch (e) { - ui.showToast('上传失败: ' + (e.message || '')) + ui.showToast('上传出错: ' + (e.message || '网络错误')) } // Reset input so same file can be re-selected event.target.value = ''