fix: 品牌设置tab中文化、保存提示、上传压缩优化
Some checks failed
PR Preview / teardown-preview (pull_request) Has been skipped
Test / unit-test (push) Successful in 4s
Test / build-check (push) Successful in 3s
PR Preview / test (pull_request) Successful in 4s
PR Preview / deploy-preview (pull_request) Successful in 15s
Test / e2e-test (push) Failing after 1m23s
Some checks failed
PR Preview / teardown-preview (pull_request) Has been skipped
Test / unit-test (push) Successful in 4s
Test / build-check (push) Successful in 3s
PR Preview / test (pull_request) Successful in 4s
PR Preview / deploy-preview (pull_request) Successful in 15s
Test / e2e-test (push) Failing after 1m23s
- Brand → 我的品牌, Account → 我的账户 - 保存品牌设置时显示"已保存" toast - 图片压缩: 先试PNG,超限再降JPEG质量,缩小到600px - 上传过程中显示"正在上传..." - 失败显示具体错误信息 Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
This commit is contained in:
@@ -2,8 +2,8 @@
|
|||||||
<div class="my-diary">
|
<div class="my-diary">
|
||||||
<!-- Sub Tabs -->
|
<!-- Sub Tabs -->
|
||||||
<div class="sub-tabs">
|
<div class="sub-tabs">
|
||||||
<button class="sub-tab" :class="{ active: activeTab === 'brand' }" @click="activeTab = 'brand'">🏷️ Brand</button>
|
<button class="sub-tab" :class="{ active: activeTab === 'brand' }" @click="activeTab = 'brand'">🏷 我的品牌</button>
|
||||||
<button class="sub-tab" :class="{ active: activeTab === 'account' }" @click="activeTab = 'account'">👤 Account</button>
|
<button class="sub-tab" :class="{ active: activeTab === 'account' }" @click="activeTab = 'account'">👤 我的账户</button>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<!-- Diary Tab -->
|
<!-- Diary Tab -->
|
||||||
@@ -400,15 +400,16 @@ async function loadBrandSettings() {
|
|||||||
|
|
||||||
async function saveBrandSettings() {
|
async function saveBrandSettings() {
|
||||||
try {
|
try {
|
||||||
await api('/api/brand', {
|
const res = await api('/api/brand', {
|
||||||
method: 'PUT',
|
method: 'PUT',
|
||||||
body: JSON.stringify({
|
body: JSON.stringify({
|
||||||
brand_name: brandName.value,
|
brand_name: brandName.value,
|
||||||
brand_align: brandAlign.value,
|
brand_align: brandAlign.value,
|
||||||
}),
|
}),
|
||||||
})
|
})
|
||||||
|
if (res.ok) ui.showToast('已保存')
|
||||||
} catch {
|
} 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) {
|
function compressImage(base64, maxSize = 500000) {
|
||||||
return new Promise((resolve) => {
|
return new Promise((resolve) => {
|
||||||
if (base64.length <= maxSize) { resolve(base64); return }
|
if (base64.length <= maxSize) { resolve(base64); return }
|
||||||
@@ -435,8 +436,7 @@ function compressImage(base64, maxSize = 500000) {
|
|||||||
img.onload = () => {
|
img.onload = () => {
|
||||||
const canvas = document.createElement('canvas')
|
const canvas = document.createElement('canvas')
|
||||||
let w = img.width, h = img.height
|
let w = img.width, h = img.height
|
||||||
// Scale down if very large
|
const maxDim = 600
|
||||||
const maxDim = 800
|
|
||||||
if (w > maxDim || h > maxDim) {
|
if (w > maxDim || h > maxDim) {
|
||||||
const ratio = Math.min(maxDim / w, maxDim / h)
|
const ratio = Math.min(maxDim / w, maxDim / h)
|
||||||
w = Math.round(w * ratio)
|
w = Math.round(w * ratio)
|
||||||
@@ -445,14 +445,19 @@ function compressImage(base64, maxSize = 500000) {
|
|||||||
canvas.width = w
|
canvas.width = w
|
||||||
canvas.height = h
|
canvas.height = h
|
||||||
canvas.getContext('2d').drawImage(img, 0, 0, w, h)
|
canvas.getContext('2d').drawImage(img, 0, 0, w, h)
|
||||||
let quality = 0.8
|
// Try PNG first, then JPEG with decreasing quality
|
||||||
let result = canvas.toDataURL('image/jpeg', quality)
|
let result = canvas.toDataURL('image/png')
|
||||||
while (result.length > maxSize && quality > 0.2) {
|
if (result.length > maxSize) {
|
||||||
quality -= 0.1
|
let quality = 0.85
|
||||||
result = canvas.toDataURL('image/jpeg', quality)
|
while (quality > 0.2) {
|
||||||
|
result = canvas.toDataURL('image/jpeg', quality)
|
||||||
|
if (result.length <= maxSize) break
|
||||||
|
quality -= 0.1
|
||||||
|
}
|
||||||
}
|
}
|
||||||
resolve(result)
|
resolve(result)
|
||||||
}
|
}
|
||||||
|
img.onerror = () => resolve(base64) // fallback: return original
|
||||||
img.src = base64
|
img.src = base64
|
||||||
})
|
})
|
||||||
}
|
}
|
||||||
@@ -467,6 +472,7 @@ async function handleUpload(type, event) {
|
|||||||
const fieldMap = { logo: 'brand_logo', bg: 'brand_bg', qr: 'qr_code' }
|
const fieldMap = { logo: 'brand_logo', bg: 'brand_bg', qr: 'qr_code' }
|
||||||
const field = fieldMap[type]
|
const field = fieldMap[type]
|
||||||
if (!field) return
|
if (!field) return
|
||||||
|
ui.showToast('正在上传...')
|
||||||
const res = await api('/api/brand', {
|
const res = await api('/api/brand', {
|
||||||
method: 'PUT',
|
method: 'PUT',
|
||||||
body: JSON.stringify({ [field]: base64 }),
|
body: JSON.stringify({ [field]: base64 }),
|
||||||
@@ -475,13 +481,13 @@ async function handleUpload(type, event) {
|
|||||||
if (type === 'logo') brandLogo.value = base64
|
if (type === 'logo') brandLogo.value = base64
|
||||||
else if (type === 'bg') brandBg.value = base64
|
else if (type === 'bg') brandBg.value = base64
|
||||||
else if (type === 'qr') brandQrImage.value = base64
|
else if (type === 'qr') brandQrImage.value = base64
|
||||||
ui.showToast('上传成功')
|
ui.showToast('上传成功 ✓')
|
||||||
} else {
|
} else {
|
||||||
const err = await res.json().catch(() => ({}))
|
const err = await res.json().catch(() => ({}))
|
||||||
ui.showToast(err.detail || '上传失败')
|
ui.showToast('上传失败: ' + (err.detail || res.status))
|
||||||
}
|
}
|
||||||
} catch (e) {
|
} catch (e) {
|
||||||
ui.showToast('上传失败: ' + (e.message || ''))
|
ui.showToast('上传出错: ' + (e.message || '网络错误'))
|
||||||
}
|
}
|
||||||
// Reset input so same file can be re-selected
|
// Reset input so same file can be re-selected
|
||||||
event.target.value = ''
|
event.target.value = ''
|
||||||
|
|||||||
Reference in New Issue
Block a user