feat: 配方卡片加入上传个人二维码功能

- RecipeDetailOverlay: 未上传二维码/背景图时,卡片上方显示提示横幅,下方出现「上传我的二维码」按钮,点击跳转到 MyDiary 品牌设置页并记录来源配方
- MyDiary: 新增二维码图片上传区域(直接上传图片文件,存为 base64 → PUT /api/brand qr_code 字段);上传成功后若有待返回配方则自动跳回配方卡片;修复 loadBrandSettings 字段名与后端不一致的问题
- RecipeSearch: 支持 ?openRecipe= 查询参数,页面挂载时自动打开指定配方卡片,实现从 MyDiary 上传后无缝返回

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
2026-04-07 21:58:17 +00:00
parent 70413971e3
commit 81ec5987b3
3 changed files with 148 additions and 15 deletions

View File

@@ -123,6 +123,16 @@
</div>
</div>
<div class="form-group">
<label>我的二维码图片</label>
<div class="upload-area" @click="triggerUpload('qr')">
<img v-if="brandQrImage" :src="brandQrImage" class="upload-preview qr-upload-preview" />
<span v-else class="upload-hint">📲 点击上传二维码图片</span>
</div>
<input ref="qrInput" type="file" accept="image/*" style="display:none" @change="handleUpload('qr', $event)" />
<div class="field-hint">上传后将显示在配方卡片右下角</div>
</div>
<div class="form-group">
<label>品牌Logo</label>
<div class="upload-area" @click="triggerUpload('logo')">
@@ -202,6 +212,7 @@
<script setup>
import { ref, computed, onMounted, watch } from 'vue'
import { useRouter } from 'vue-router'
import { useAuthStore } from '../stores/auth'
import { useOilsStore } from '../stores/oils'
import { useDiaryStore } from '../stores/diary'
@@ -214,6 +225,7 @@ const auth = useAuthStore()
const oils = useOilsStore()
const diaryStore = useDiaryStore()
const ui = useUiStore()
const router = useRouter()
const activeTab = ref('brand')
const pasteText = ref('')
@@ -224,10 +236,12 @@ const newEntryText = ref('')
// Brand settings
const brandName = ref('')
const brandQrUrl = ref('')
const brandQrImage = ref('')
const brandLogo = ref('')
const brandBg = ref('')
const logoInput = ref(null)
const bgInput = ref(null)
const qrInput = ref(null)
// Account settings
const displayName = ref('')
@@ -345,8 +359,9 @@ async function loadBrandSettings() {
const data = await res.json()
brandName.value = data.brand_name || ''
brandQrUrl.value = data.qr_url || ''
brandLogo.value = data.logo_url || ''
brandBg.value = data.bg_url || ''
brandQrImage.value = data.qr_code || ''
brandLogo.value = data.brand_logo || ''
brandBg.value = data.brand_bg || ''
}
} catch {
// no brand settings yet
@@ -369,26 +384,46 @@ async function saveBrandSettings() {
function triggerUpload(type) {
if (type === 'logo') logoInput.value?.click()
else bgInput.value?.click()
else if (type === 'bg') bgInput.value?.click()
else if (type === 'qr') qrInput.value?.click()
}
function readFileAsBase64(file) {
return new Promise((resolve, reject) => {
const reader = new FileReader()
reader.onload = e => resolve(e.target.result)
reader.onerror = reject
reader.readAsDataURL(file)
})
}
async function handleUpload(type, event) {
const file = event.target.files[0]
if (!file) return
const formData = new FormData()
formData.append('file', file)
formData.append('type', type)
try {
const token = localStorage.getItem('oil_auth_token') || ''
const res = await fetch('/api/brand-upload', {
method: 'POST',
headers: token ? { Authorization: 'Bearer ' + token } : {},
body: formData,
const base64 = await readFileAsBase64(file)
const fieldMap = { logo: 'brand_logo', bg: 'brand_bg', qr: 'qr_code' }
const field = fieldMap[type]
if (!field) return
const res = await api('/api/brand', {
method: 'PUT',
body: JSON.stringify({ [field]: base64 }),
})
if (res.ok) {
const data = await res.json()
if (type === 'logo') brandLogo.value = data.url
else brandBg.value = data.url
if (type === 'logo') brandLogo.value = base64
else if (type === 'bg') brandBg.value = base64
else if (type === 'qr') {
brandQrImage.value = base64
// If user came here from a recipe card, navigate back
const returnRecipeId = localStorage.getItem('oil_return_recipe_id')
if (returnRecipeId) {
localStorage.removeItem('oil_return_recipe_id')
ui.showToast('二维码已上传,返回配方卡片 ✨')
await new Promise(r => setTimeout(r, 800))
router.push('/?openRecipe=' + encodeURIComponent(returnRecipeId))
return
}
}
ui.showToast('上传成功')
}
} catch {
@@ -783,6 +818,18 @@ async function applyBusiness() {
max-height: 100px;
}
.qr-upload-preview {
max-width: 120px;
max-height: 120px;
}
.field-hint {
font-size: 12px;
color: #9b94a3;
margin-top: 4px;
padding-left: 2px;
}
.upload-hint {
font-size: 13px;
color: #b0aab5;