2 Commits

Author SHA1 Message Date
08c2d5bd75 feat: 未登录用户也显示二维码上传提示,点击时引导登录/注册
Some checks failed
PR Preview / teardown-preview (pull_request) Has been skipped
Test / unit-test (push) Successful in 5s
Test / build-check (push) Successful in 4s
PR Preview / test (pull_request) Successful in 4s
PR Preview / deploy-preview (pull_request) Successful in 13s
Test / e2e-test (push) Failing after 1m7s
2026-04-07 22:13:42 +00:00
7030dd107c feat: 配方卡片加入上传个人二维码功能
Some checks failed
Test / unit-test (push) Successful in 5s
Test / build-check (push) Successful in 4s
PR Preview / teardown-preview (pull_request) Has been skipped
Test / e2e-test (push) Failing after 1m8s
PR Preview / test (pull_request) Successful in 5s
PR Preview / deploy-preview (pull_request) Successful in 13s
- RecipeDetailOverlay: 未上传二维码/背景图时,卡片上方显示提示横幅,下方出现「上传我的二维码」按钮,点击跳转到 MyDiary 品牌设置页并记录来源配方
- MyDiary: 新增二维码图片上传区域(直接上传图片文件,存为 base64 → PUT /api/brand qr_code 字段);上传成功后若有待返回配方则自动跳回配方卡片;修复 loadBrandSettings 字段名与后端不一致的问题
- RecipeSearch: 支持 ?openRecipe= 查询参数,页面挂载时自动打开指定配方卡片,实现从 MyDiary 上传后无缝返回

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
2026-04-07 21:58:17 +00:00
6 changed files with 168 additions and 50 deletions

View File

@@ -238,8 +238,6 @@ def init_db():
c.execute("ALTER TABLE recipes ADD COLUMN owner_id INTEGER")
if "updated_by" not in cols:
c.execute("ALTER TABLE recipes ADD COLUMN updated_by INTEGER")
if "en_name" not in cols:
c.execute("ALTER TABLE recipes ADD COLUMN en_name TEXT DEFAULT ''")
# Seed admin user if no users exist
count = c.execute("SELECT COUNT(*) FROM users").fetchone()[0]

View File

@@ -95,7 +95,6 @@ class RecipeIn(BaseModel):
class RecipeUpdate(BaseModel):
name: Optional[str] = None
en_name: Optional[str] = None
note: Optional[str] = None
ingredients: Optional[list[IngredientIn]] = None
tags: Optional[list[str]] = None
@@ -309,7 +308,7 @@ def symptom_search(body: dict, user=Depends(get_current_user)):
conn = get_db()
# Search in recipe names
rows = conn.execute(
"SELECT id, name, note, owner_id, version, en_name FROM recipes ORDER BY id"
"SELECT id, name, note, owner_id, version FROM recipes ORDER BY id"
).fetchall()
exact = []
related = []
@@ -697,7 +696,6 @@ def _recipe_to_dict(conn, row):
return {
"id": rid,
"name": row["name"],
"en_name": row["en_name"] if "en_name" in row.keys() else "",
"note": row["note"],
"owner_id": row["owner_id"],
"owner_name": (owner["display_name"] or owner["username"]) if owner else None,
@@ -712,19 +710,19 @@ def list_recipes(user=Depends(get_current_user)):
conn = get_db()
# Admin sees all; others see admin-owned (adopted) + their own
if user["role"] == "admin":
rows = conn.execute("SELECT id, name, note, owner_id, version, en_name FROM recipes ORDER BY id").fetchall()
rows = conn.execute("SELECT id, name, note, owner_id, version FROM recipes ORDER BY id").fetchall()
else:
admin = conn.execute("SELECT id FROM users WHERE role = 'admin' LIMIT 1").fetchone()
admin_id = admin["id"] if admin else 1
user_id = user.get("id")
if user_id:
rows = conn.execute(
"SELECT id, name, note, owner_id, version, en_name FROM recipes WHERE owner_id = ? OR owner_id = ? ORDER BY id",
"SELECT id, name, note, owner_id, version FROM recipes WHERE owner_id = ? OR owner_id = ? ORDER BY id",
(admin_id, user_id)
).fetchall()
else:
rows = conn.execute(
"SELECT id, name, note, owner_id, version, en_name FROM recipes WHERE owner_id = ? ORDER BY id",
"SELECT id, name, note, owner_id, version FROM recipes WHERE owner_id = ? ORDER BY id",
(admin_id,)
).fetchall()
result = [_recipe_to_dict(conn, r) for r in rows]
@@ -735,7 +733,7 @@ def list_recipes(user=Depends(get_current_user)):
@app.get("/api/recipes/{recipe_id}")
def get_recipe(recipe_id: int):
conn = get_db()
row = conn.execute("SELECT id, name, note, owner_id, version, en_name FROM recipes WHERE id = ?", (recipe_id,)).fetchone()
row = conn.execute("SELECT id, name, note, owner_id, version FROM recipes WHERE id = ?", (recipe_id,)).fetchone()
if not row:
conn.close()
raise HTTPException(404, "Recipe not found")
@@ -806,8 +804,6 @@ def update_recipe(recipe_id: int, update: RecipeUpdate, user=Depends(get_current
c.execute("UPDATE recipes SET name = ? WHERE id = ?", (update.name, recipe_id))
if update.note is not None:
c.execute("UPDATE recipes SET note = ? WHERE id = ?", (update.note, recipe_id))
if update.en_name is not None:
c.execute("UPDATE recipes SET en_name = ? WHERE id = ?", (update.en_name, recipe_id))
if update.ingredients is not None:
c.execute("DELETE FROM recipe_ingredients WHERE recipe_id = ?", (recipe_id,))
for ing in update.ingredients:
@@ -837,7 +833,7 @@ def delete_recipe(recipe_id: int, user=Depends(get_current_user)):
conn = get_db()
row = _check_recipe_permission(conn, recipe_id, user)
# Save full snapshot for undo
full = conn.execute("SELECT id, name, note, owner_id, version, en_name FROM recipes WHERE id = ?", (recipe_id,)).fetchone()
full = conn.execute("SELECT id, name, note, owner_id, version FROM recipes WHERE id = ?", (recipe_id,)).fetchone()
snapshot = _recipe_to_dict(conn, full)
log_audit(conn, user["id"], "delete_recipe", "recipe", recipe_id, row["name"],
json.dumps(snapshot, ensure_ascii=False))
@@ -1340,7 +1336,7 @@ def recipes_by_inventory(user=Depends(get_current_user)):
if not inv:
conn.close()
return []
rows = conn.execute("SELECT id, name, note, owner_id, version, en_name FROM recipes ORDER BY id").fetchall()
rows = conn.execute("SELECT id, name, note, owner_id, version FROM recipes ORDER BY id").fetchall()
result = []
for r in rows:
recipe = _recipe_to_dict(conn, r)

View File

@@ -36,6 +36,12 @@
>English</button>
</div>
<!-- QR / brand upload hint -->
<div v-if="showBrandHint" class="brand-upload-hint">
<span class="hint-icon"></span>
<span>上传你的专属二维码生成属于自己的配方卡片</span>
</div>
<!-- Card image (rendered by html2canvas) -->
<div v-show="!cardImageUrl" ref="cardRef" class="export-card">
<!-- Brand overlay layers -->
@@ -126,6 +132,11 @@
class="action-btn"
@click="showTranslationEditor = true"
> 修改翻译</button>
<button
v-if="showBrandHint"
class="action-btn action-btn-qr"
@click="goUploadQr"
>📲 上传我的二维码</button>
</div>
<!-- Translation editor (inline) -->
@@ -342,6 +353,7 @@
<script setup>
import { ref, computed, onMounted, nextTick, watch } from 'vue'
import { useRouter } from 'vue-router'
import html2canvas from 'html2canvas'
import { useOilsStore, DROPS_PER_ML, VOLUME_DROPS } from '../stores/oils'
import { useRecipesStore } from '../stores/recipes'
@@ -350,7 +362,6 @@ import { useUiStore } from '../stores/ui'
import { useDiaryStore } from '../stores/diary'
import { api } from '../composables/useApi'
import { oilEn, recipeNameEn } from '../composables/useOilTranslation'
import { showPrompt } from '../composables/useDialog'
// TagPicker replaced with inline tag editing
const props = defineProps({
@@ -364,6 +375,7 @@ const recipesStore = useRecipesStore()
const authStore = useAuthStore()
const ui = useUiStore()
const diaryStore = useDiaryStore()
const router = useRouter()
// ---- View state ----
const viewMode = ref('card')
@@ -454,6 +466,22 @@ async function loadBrand() {
}
}
// Whether to show the brand/QR upload hint (show to all users who haven't set up brand assets)
const showBrandHint = computed(() =>
!!brand.value && !brand.value.qr_code && !brand.value.brand_bg
)
function goUploadQr() {
if (!authStore.isLoggedIn) {
ui.openLogin()
return
}
if (recipe.value._id) {
localStorage.setItem('oil_return_recipe_id', recipe.value._id)
}
router.push('/mydiary')
}
// ---- Card image generation ----
async function generateCardImage() {
if (!cardRef.value || generatingImage.value) return
@@ -519,20 +547,9 @@ function copyText() {
})
}
async function applyTranslation() {
function applyTranslation() {
// translations stored in customOilNameEn / customRecipeNameEn
showTranslationEditor.value = false
// Persist en_name to backend
if (recipe.value._id && customRecipeNameEn.value) {
try {
await api.put(`/api/recipes/${recipe.value._id}`, {
en_name: customRecipeNameEn.value,
version: recipe.value._version,
})
ui.showToast('翻译已保存')
} catch (e) {
ui.showToast('翻译保存失败')
}
}
cardImageUrl.value = null
nextTick(() => generateCardImage())
}
@@ -547,7 +564,7 @@ function getCardOilName(name) {
function getCardRecipeName() {
if (cardLang.value === 'en') {
return customRecipeNameEn.value || recipe.value.en_name || recipeNameEn(recipe.value.name)
return customRecipeNameEn.value || recipeNameEn(recipe.value.name)
}
return recipe.value.name
}
@@ -577,16 +594,16 @@ async function saveToDiary() {
ui.openLogin()
return
}
const name = await showPrompt('保存为我的配方,名称:', recipe.value.name)
const name = prompt('保存为我的配方,名称:', recipe.value.name)
if (!name) return
try {
await recipesStore.saveRecipe({
await api.post('/api/diary', {
name,
source_recipe_id: recipe.value._id || null,
ingredients: recipe.value.ingredients.map(i => ({ oil: i.oil, drops: i.drops })),
note: recipe.value.note || '',
ingredients: recipe.value.ingredients.map(i => ({ oil_name: i.oil, drops: i.drops })),
tags: recipe.value.tags || [],
})
ui.showToast('已保存到「我的配方」')
ui.showToast('已保存到「我的配方日记」')
} catch (e) {
ui.showToast('保存失败: ' + (e?.message || '未知错误'))
}
@@ -652,7 +669,7 @@ onMounted(() => {
editTags.value = [...(r.tags || [])]
editIngredients.value = (r.ingredients || []).map(i => ({ oil: i.oil, drops: i.drops }))
// Init translation defaults
customRecipeNameEn.value = r.en_name || recipeNameEn(r.name)
customRecipeNameEn.value = recipeNameEn(r.name)
const enMap = {}
;(r.ingredients || []).forEach(ing => {
enMap[ing.oil] = oilEn(ing.oil) || ing.oil
@@ -802,6 +819,7 @@ async function saveRecipe() {
ingredients: ingredients.map(i => ({ oil_name: i.oil, drops: i.drops })),
}
await recipesStore.saveRecipe(payload)
// Reload recipes so the data is fresh when re-opened
await recipesStore.loadRecipes()
ui.showToast('保存成功')
emit('close')
@@ -1147,6 +1165,42 @@ async function saveRecipe() {
background: var(--sage-mist, #eef4ee);
}
/* Brand upload hint banner */
.brand-upload-hint {
display: flex;
align-items: center;
gap: 8px;
background: linear-gradient(135deg, #eef4ee, #f5f0e8);
border: 1.5px dashed var(--sage-light, #c8ddc9);
border-radius: 10px;
padding: 10px 16px;
margin-bottom: 14px;
font-size: 13px;
color: var(--sage-dark, #5a7d5e);
font-weight: 500;
animation: hint-pop 0.3s ease;
}
.hint-icon {
font-size: 18px;
flex-shrink: 0;
}
@keyframes hint-pop {
from { opacity: 0; transform: translateY(-6px); }
to { opacity: 1; transform: translateY(0); }
}
.action-btn-qr {
background: linear-gradient(135deg, #c8ddc9, var(--sage, #7a9e7e));
color: #fff;
border-color: transparent;
}
.action-btn-qr:hover {
opacity: 0.88;
}
/* Card bottom actions */
.card-bottom-actions {
display: flex;

View File

@@ -16,7 +16,6 @@ export const useRecipesStore = defineStore('recipes', () => {
_owner_name: r._owner_name ?? r.owner_name ?? '',
_version: r._version ?? r.version ?? 1,
name: r.name,
en_name: r.en_name ?? '',
note: r.note ?? '',
tags: r.tags ?? [],
ingredients: (r.ingredients ?? []).map((ing) => ({

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;

View File

@@ -123,7 +123,8 @@
</template>
<script setup>
import { ref, computed, onMounted, nextTick } from 'vue'
import { ref, computed, onMounted, nextTick, watch } from 'vue'
import { useRoute, useRouter } from 'vue-router'
import { useAuthStore } from '../stores/auth'
import { useOilsStore } from '../stores/oils'
import { useRecipesStore } from '../stores/recipes'
@@ -136,6 +137,8 @@ const auth = useAuthStore()
const oils = useOilsStore()
const recipeStore = useRecipesStore()
const ui = useUiStore()
const route = useRoute()
const router = useRouter()
const searchQuery = ref('')
const selectedCategory = ref(null)
@@ -154,6 +157,27 @@ onMounted(async () => {
} catch {
// category modules are optional
}
// Return to a recipe card after QR upload redirect
const openRecipeId = route.query.openRecipe
if (openRecipeId) {
router.replace({ path: '/', query: {} })
const tryOpen = () => {
const idx = recipeStore.recipes.findIndex(r => r._id === openRecipeId)
if (idx >= 0) {
openDetail(idx)
return true
}
return false
}
if (!tryOpen()) {
// Recipes might not be loaded yet, watch until available
const stop = watch(
() => recipeStore.recipes.length,
() => { if (tryOpen()) stop() },
)
}
}
})
function selectCategory(cat) {