Compare commits
1 Commits
533cd2a0bd
...
dev
| Author | SHA1 | Date | |
|---|---|---|---|
| 846058fa0f |
@@ -15,9 +15,7 @@
|
|||||||
@click="toggleUserMenu"
|
@click="toggleUserMenu"
|
||||||
>
|
>
|
||||||
<template v-if="auth.isLoggedIn">
|
<template v-if="auth.isLoggedIn">
|
||||||
👤 {{ auth.user.display_name || auth.user.username }}
|
👤 {{ auth.user.display_name || auth.user.username }} ▾
|
||||||
<span style="font-size:10px;background:rgba(255,255,255,0.2);padding:2px 7px;border-radius:8px;margin:0 3px;vertical-align:middle;font-weight:400;letter-spacing:0">{{ roleLabel }}</span>
|
|
||||||
▾
|
|
||||||
</template>
|
</template>
|
||||||
<template v-else>
|
<template v-else>
|
||||||
<span style="background:rgba(255,255,255,0.2);padding:4px 12px;border-radius:12px">登录</span>
|
<span style="background:rgba(255,255,255,0.2);padding:4px 12px;border-radius:12px">登录</span>
|
||||||
@@ -43,7 +41,7 @@
|
|||||||
<UserMenu v-if="showUserMenu" @close="showUserMenu = false" />
|
<UserMenu v-if="showUserMenu" @close="showUserMenu = false" />
|
||||||
|
|
||||||
<!-- Nav tabs -->
|
<!-- Nav tabs -->
|
||||||
<div class="nav-tabs" :style="isPreview ? { top: '36px' } : {}">
|
<div class="nav-tabs">
|
||||||
<div class="nav-tab" :class="{ active: ui.currentSection === 'search' }" @click="goSection('search')">🔍 配方查询</div>
|
<div class="nav-tab" :class="{ active: ui.currentSection === 'search' }" @click="goSection('search')">🔍 配方查询</div>
|
||||||
<div class="nav-tab" :class="{ active: ui.currentSection === 'manage' }" @click="requireLogin('manage')">📋 管理配方</div>
|
<div class="nav-tab" :class="{ active: ui.currentSection === 'manage' }" @click="requireLogin('manage')">📋 管理配方</div>
|
||||||
<div class="nav-tab" :class="{ active: ui.currentSection === 'inventory' }" @click="requireLogin('inventory')">📦 个人库存</div>
|
<div class="nav-tab" :class="{ active: ui.currentSection === 'inventory' }" @click="requireLogin('inventory')">📦 个人库存</div>
|
||||||
@@ -66,11 +64,11 @@
|
|||||||
<CustomDialog />
|
<CustomDialog />
|
||||||
|
|
||||||
<!-- Toast messages -->
|
<!-- Toast messages -->
|
||||||
<div v-for="toast in ui.toasts" :key="toast.id" class="toast">{{ toast.msg }}</div>
|
<div v-for="(toast, i) in ui.toasts" :key="i" class="toast">{{ toast }}</div>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script setup>
|
<script setup>
|
||||||
import { ref, computed, onMounted, watch } from 'vue'
|
import { ref, onMounted, watch } from 'vue'
|
||||||
import { useRouter, useRoute } from 'vue-router'
|
import { useRouter, useRoute } from 'vue-router'
|
||||||
import { useAuthStore } from './stores/auth'
|
import { useAuthStore } from './stores/auth'
|
||||||
import { useOilsStore } from './stores/oils'
|
import { useOilsStore } from './stores/oils'
|
||||||
@@ -88,11 +86,6 @@ const router = useRouter()
|
|||||||
const route = useRoute()
|
const route = useRoute()
|
||||||
const showUserMenu = ref(false)
|
const showUserMenu = ref(false)
|
||||||
|
|
||||||
const roleLabel = computed(() => {
|
|
||||||
const map = { admin: '管理员', senior_editor: '高级编辑', editor: '编辑', viewer: '查看者' }
|
|
||||||
return map[auth.user.role] || '查看者'
|
|
||||||
})
|
|
||||||
|
|
||||||
// Sync ui.currentSection from route on load and navigation
|
// Sync ui.currentSection from route on load and navigation
|
||||||
const routeToSection = { '/': 'search', '/manage': 'manage', '/inventory': 'inventory', '/oils': 'oils', '/projects': 'projects', '/mydiary': 'mydiary', '/audit': 'audit', '/bugs': 'bugs', '/users': 'users' }
|
const routeToSection = { '/': 'search', '/manage': 'manage', '/inventory': 'inventory', '/oils': 'oils', '/projects': 'projects', '/mydiary': 'mydiary', '/audit': 'audit', '/bugs': 'bugs', '/users': 'users' }
|
||||||
watch(() => route.path, (path) => {
|
watch(() => route.path, (path) => {
|
||||||
|
|||||||
@@ -445,7 +445,7 @@ body {
|
|||||||
.toast {
|
.toast {
|
||||||
position: fixed; bottom: 80px; left: 50%; transform: translateX(-50%);
|
position: fixed; bottom: 80px; left: 50%; transform: translateX(-50%);
|
||||||
background: rgba(0,0,0,0.8); color: white; padding: 10px 24px;
|
background: rgba(0,0,0,0.8); color: white; padding: 10px 24px;
|
||||||
border-radius: 20px; font-size: 14px; z-index: 9000;
|
border-radius: 20px; font-size: 14px; z-index: 999;
|
||||||
pointer-events: none; transition: opacity 0.3s;
|
pointer-events: none; transition: opacity 0.3s;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|||||||
@@ -11,8 +11,8 @@
|
|||||||
ref="promptInput"
|
ref="promptInput"
|
||||||
/>
|
/>
|
||||||
<div class="dialog-btn-row">
|
<div class="dialog-btn-row">
|
||||||
<button v-if="dialogState.type !== 'alert'" class="dialog-btn-outline" @click="cancel">{{ dialogState.cancelText || '取消' }}</button>
|
<button v-if="dialogState.type !== 'alert'" class="dialog-btn-outline" @click="cancel">取消</button>
|
||||||
<button class="dialog-btn-primary" @click="ok">{{ dialogState.okText || '确定' }}</button>
|
<button class="dialog-btn-primary" @click="ok">确定</button>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|||||||
@@ -104,11 +104,8 @@ async function submit() {
|
|||||||
ui.showToast('注册成功')
|
ui.showToast('注册成功')
|
||||||
}
|
}
|
||||||
emit('close')
|
emit('close')
|
||||||
if (ui.pendingAction) {
|
// Reload page data after auth change
|
||||||
ui.runPendingAction()
|
|
||||||
} else {
|
|
||||||
window.location.reload()
|
window.location.reload()
|
||||||
}
|
|
||||||
} catch (e) {
|
} catch (e) {
|
||||||
errorMsg.value = e?.message || (mode.value === 'login' ? '登录失败,请检查用户名和密码' : '注册失败,请重试')
|
errorMsg.value = e?.message || (mode.value === 'login' ? '登录失败,请检查用户名和密码' : '注册失败,请重试')
|
||||||
} finally {
|
} finally {
|
||||||
|
|||||||
@@ -39,19 +39,18 @@
|
|||||||
<!-- Card image (rendered by html2canvas) -->
|
<!-- Card image (rendered by html2canvas) -->
|
||||||
<div v-show="!cardImageUrl" ref="cardRef" class="export-card">
|
<div v-show="!cardImageUrl" ref="cardRef" class="export-card">
|
||||||
<!-- Brand overlay layers -->
|
<!-- Brand overlay layers -->
|
||||||
<div
|
|
||||||
v-if="brand.brand_bg"
|
|
||||||
class="card-brand-bg"
|
|
||||||
:style="{ backgroundImage: `url('${brand.brand_bg}')` }"
|
|
||||||
/>
|
|
||||||
<div v-if="brand.qr_code" class="card-qr-wrapper">
|
|
||||||
<img
|
<img
|
||||||
|
v-if="brand.brand_bg"
|
||||||
|
:src="brand.brand_bg"
|
||||||
|
class="card-brand-bg"
|
||||||
|
crossorigin="anonymous"
|
||||||
|
/>
|
||||||
|
<img
|
||||||
|
v-if="brand.qr_code"
|
||||||
:src="brand.qr_code"
|
:src="brand.qr_code"
|
||||||
class="card-qr"
|
class="card-qr"
|
||||||
crossorigin="anonymous"
|
crossorigin="anonymous"
|
||||||
/>
|
/>
|
||||||
<div v-if="brand.brand_name" class="card-qr-name">{{ brand.brand_name }}</div>
|
|
||||||
</div>
|
|
||||||
<img
|
<img
|
||||||
v-if="brand.brand_logo"
|
v-if="brand.brand_logo"
|
||||||
:src="brand.brand_logo"
|
:src="brand.brand_logo"
|
||||||
@@ -127,11 +126,6 @@
|
|||||||
class="action-btn"
|
class="action-btn"
|
||||||
@click="showTranslationEditor = true"
|
@click="showTranslationEditor = true"
|
||||||
>✏️ 修改翻译</button>
|
>✏️ 修改翻译</button>
|
||||||
<button
|
|
||||||
v-if="showBrandHint"
|
|
||||||
class="action-btn action-btn-qr"
|
|
||||||
@click="goUploadQr"
|
|
||||||
>📲 上传我的二维码</button>
|
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<!-- Translation editor (inline) -->
|
<!-- Translation editor (inline) -->
|
||||||
@@ -348,7 +342,6 @@
|
|||||||
|
|
||||||
<script setup>
|
<script setup>
|
||||||
import { ref, computed, onMounted, nextTick, watch } from 'vue'
|
import { ref, computed, onMounted, nextTick, watch } from 'vue'
|
||||||
import { useRouter } from 'vue-router'
|
|
||||||
import html2canvas from 'html2canvas'
|
import html2canvas from 'html2canvas'
|
||||||
import { useOilsStore, DROPS_PER_ML, VOLUME_DROPS } from '../stores/oils'
|
import { useOilsStore, DROPS_PER_ML, VOLUME_DROPS } from '../stores/oils'
|
||||||
import { useRecipesStore } from '../stores/recipes'
|
import { useRecipesStore } from '../stores/recipes'
|
||||||
@@ -356,7 +349,6 @@ import { useAuthStore } from '../stores/auth'
|
|||||||
import { useUiStore } from '../stores/ui'
|
import { useUiStore } from '../stores/ui'
|
||||||
import { useDiaryStore } from '../stores/diary'
|
import { useDiaryStore } from '../stores/diary'
|
||||||
import { api } from '../composables/useApi'
|
import { api } from '../composables/useApi'
|
||||||
import { showConfirm, showPrompt } from '../composables/useDialog'
|
|
||||||
import { oilEn, recipeNameEn } from '../composables/useOilTranslation'
|
import { oilEn, recipeNameEn } from '../composables/useOilTranslation'
|
||||||
// TagPicker replaced with inline tag editing
|
// TagPicker replaced with inline tag editing
|
||||||
|
|
||||||
@@ -371,14 +363,12 @@ const recipesStore = useRecipesStore()
|
|||||||
const authStore = useAuthStore()
|
const authStore = useAuthStore()
|
||||||
const ui = useUiStore()
|
const ui = useUiStore()
|
||||||
const diaryStore = useDiaryStore()
|
const diaryStore = useDiaryStore()
|
||||||
const router = useRouter()
|
|
||||||
|
|
||||||
// ---- View state ----
|
// ---- View state ----
|
||||||
const viewMode = ref('card')
|
const viewMode = ref('card')
|
||||||
const cardRef = ref(null)
|
const cardRef = ref(null)
|
||||||
const cardImageUrl = ref(null)
|
const cardImageUrl = ref(null)
|
||||||
const cardLang = ref('zh')
|
const cardLang = ref('zh')
|
||||||
const selectedCardVolume = ref('单次')
|
|
||||||
const showTranslationEditor = ref(false)
|
const showTranslationEditor = ref(false)
|
||||||
const customRecipeNameEn = ref('')
|
const customRecipeNameEn = ref('')
|
||||||
const customOilNameEn = ref({})
|
const customOilNameEn = ref({})
|
||||||
@@ -397,30 +387,14 @@ const canEditThisRecipe = computed(() => {
|
|||||||
|
|
||||||
const isFav = computed(() => recipesStore.isFavorite(recipe.value))
|
const isFav = computed(() => recipesStore.isFavorite(recipe.value))
|
||||||
|
|
||||||
// Scale ingredients proportionally to target volume; '单次' = no scaling
|
// Card ingredients: exclude coconut oil
|
||||||
function scaleIngredients(ingredients, volume) {
|
|
||||||
const targetDrops = VOLUME_DROPS[volume]
|
|
||||||
if (!targetDrops) return ingredients // 单次:不缩放
|
|
||||||
const totalDrops = ingredients.reduce((sum, ing) => sum + (ing.drops || 0), 0)
|
|
||||||
if (totalDrops === 0) return ingredients
|
|
||||||
return ingredients.map(ing => ({
|
|
||||||
...ing,
|
|
||||||
drops: Math.round(ing.drops * targetDrops / totalDrops),
|
|
||||||
}))
|
|
||||||
}
|
|
||||||
|
|
||||||
// Card ingredients: scaled to selected volume, coconut oil excluded from display
|
|
||||||
const scaledCardIngredients = computed(() =>
|
|
||||||
scaleIngredients(recipe.value.ingredients, selectedCardVolume.value)
|
|
||||||
)
|
|
||||||
|
|
||||||
const cardIngredients = computed(() =>
|
const cardIngredients = computed(() =>
|
||||||
scaledCardIngredients.value.filter(ing => ing.oil !== '椰子油')
|
recipe.value.ingredients.filter(ing => ing.oil !== '椰子油')
|
||||||
)
|
)
|
||||||
|
|
||||||
// Coconut oil drops (from scaled set)
|
// Coconut oil drops
|
||||||
const coconutDrops = computed(() => {
|
const coconutDrops = computed(() => {
|
||||||
const coco = scaledCardIngredients.value.find(ing => ing.oil === '椰子油')
|
const coco = recipe.value.ingredients.find(ing => ing.oil === '椰子油')
|
||||||
return coco ? coco.drops : 0
|
return coco ? coco.drops : 0
|
||||||
})
|
})
|
||||||
|
|
||||||
@@ -446,7 +420,7 @@ const dilutionDesc = computed(() => {
|
|||||||
: `该配方适用于单次用量(共${totalDrops}滴),其中纯精油 ${totalEoDrops.value} 滴,椰子油 ${coconutDrops.value} 滴,稀释比例为 1:${ratio}`
|
: `该配方适用于单次用量(共${totalDrops}滴),其中纯精油 ${totalEoDrops.value} 滴,椰子油 ${coconutDrops.value} 滴,稀释比例为 1:${ratio}`
|
||||||
})
|
})
|
||||||
|
|
||||||
const priceInfo = computed(() => oilsStore.fmtCostWithRetail(scaledCardIngredients.value))
|
const priceInfo = computed(() => oilsStore.fmtCostWithRetail(recipe.value.ingredients))
|
||||||
|
|
||||||
// Today string
|
// Today string
|
||||||
const todayStr = computed(() => {
|
const todayStr = computed(() => {
|
||||||
@@ -477,30 +451,6 @@ async function loadBrand() {
|
|||||||
} catch {
|
} catch {
|
||||||
brand.value = {}
|
brand.value = {}
|
||||||
}
|
}
|
||||||
// Show upload prompt if user hasn't set up brand assets yet
|
|
||||||
if (showBrandHint.value) {
|
|
||||||
const ok = await showConfirm(
|
|
||||||
'上传你的专属二维码,让配方卡片更专业 ✨',
|
|
||||||
{ okText: '去上传', cancelText: '取消' }
|
|
||||||
)
|
|
||||||
if (ok) goUploadQr()
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
// 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(() => goUploadQr())
|
|
||||||
return
|
|
||||||
}
|
|
||||||
if (recipe.value._id) {
|
|
||||||
localStorage.setItem('oil_return_recipe_id', recipe.value._id)
|
|
||||||
}
|
|
||||||
router.push('/mydiary')
|
|
||||||
}
|
}
|
||||||
|
|
||||||
// ---- Card image generation ----
|
// ---- Card image generation ----
|
||||||
@@ -533,12 +483,6 @@ function switchLang(lang) {
|
|||||||
nextTick(() => generateCardImage())
|
nextTick(() => generateCardImage())
|
||||||
}
|
}
|
||||||
|
|
||||||
function onCardVolumeChange(ml) {
|
|
||||||
selectedCardVolume.value = ml
|
|
||||||
cardImageUrl.value = null
|
|
||||||
nextTick(() => generateCardImage())
|
|
||||||
}
|
|
||||||
|
|
||||||
async function saveImage() {
|
async function saveImage() {
|
||||||
if (!cardImageUrl.value) {
|
if (!cardImageUrl.value) {
|
||||||
await generateCardImage()
|
await generateCardImage()
|
||||||
@@ -568,7 +512,7 @@ function copyText() {
|
|||||||
].filter(Boolean).join('\n')
|
].filter(Boolean).join('\n')
|
||||||
|
|
||||||
navigator.clipboard.writeText(text).then(() => {
|
navigator.clipboard.writeText(text).then(() => {
|
||||||
ui.showToast('已复制')
|
ui.showToast('已复制到剪贴板')
|
||||||
}).catch(() => {
|
}).catch(() => {
|
||||||
ui.showToast('复制失败')
|
ui.showToast('复制失败')
|
||||||
})
|
})
|
||||||
@@ -610,7 +554,7 @@ function getCardRecipeName() {
|
|||||||
// ---- Favorite ----
|
// ---- Favorite ----
|
||||||
async function handleToggleFavorite() {
|
async function handleToggleFavorite() {
|
||||||
if (!authStore.isLoggedIn) {
|
if (!authStore.isLoggedIn) {
|
||||||
ui.openLogin(() => handleToggleFavorite())
|
ui.openLogin()
|
||||||
return
|
return
|
||||||
}
|
}
|
||||||
if (!recipe.value._id) {
|
if (!recipe.value._id) {
|
||||||
@@ -629,10 +573,10 @@ async function handleToggleFavorite() {
|
|||||||
// ---- Save to diary ----
|
// ---- Save to diary ----
|
||||||
async function saveToDiary() {
|
async function saveToDiary() {
|
||||||
if (!authStore.isLoggedIn) {
|
if (!authStore.isLoggedIn) {
|
||||||
ui.openLogin(() => saveToDiary())
|
ui.openLogin()
|
||||||
return
|
return
|
||||||
}
|
}
|
||||||
const name = await showPrompt('保存为我的配方,名称:', recipe.value.name)
|
const name = prompt('保存为我的配方,名称:', recipe.value.name)
|
||||||
if (!name) return
|
if (!name) return
|
||||||
try {
|
try {
|
||||||
await api.post('/api/diary', {
|
await api.post('/api/diary', {
|
||||||
@@ -857,7 +801,6 @@ async function saveRecipe() {
|
|||||||
ingredients: ingredients.map(i => ({ oil_name: i.oil, drops: i.drops })),
|
ingredients: ingredients.map(i => ({ oil_name: i.oil, drops: i.drops })),
|
||||||
}
|
}
|
||||||
await recipesStore.saveRecipe(payload)
|
await recipesStore.saveRecipe(payload)
|
||||||
// Reload recipes so the data is fresh when re-opened
|
|
||||||
await recipesStore.loadRecipes()
|
await recipesStore.loadRecipes()
|
||||||
ui.showToast('保存成功')
|
ui.showToast('保存成功')
|
||||||
emit('close')
|
emit('close')
|
||||||
@@ -998,52 +941,32 @@ async function saveRecipe() {
|
|||||||
inset: 0;
|
inset: 0;
|
||||||
width: 100%;
|
width: 100%;
|
||||||
height: 100%;
|
height: 100%;
|
||||||
background-size: cover;
|
object-fit: cover;
|
||||||
background-position: center;
|
opacity: 0.06;
|
||||||
background-repeat: no-repeat;
|
|
||||||
opacity: 0.12;
|
|
||||||
z-index: 0;
|
z-index: 0;
|
||||||
pointer-events: none;
|
pointer-events: none;
|
||||||
}
|
}
|
||||||
|
|
||||||
.card-qr-wrapper {
|
|
||||||
position: absolute;
|
|
||||||
top: 36px;
|
|
||||||
right: 24px;
|
|
||||||
display: flex;
|
|
||||||
flex-direction: column;
|
|
||||||
align-items: center;
|
|
||||||
gap: 3px;
|
|
||||||
z-index: 2;
|
|
||||||
}
|
|
||||||
|
|
||||||
.card-qr {
|
.card-qr {
|
||||||
width: 54px;
|
position: absolute;
|
||||||
height: 54px;
|
top: 16px;
|
||||||
object-fit: cover;
|
right: 16px;
|
||||||
border-radius: 6px;
|
width: 64px;
|
||||||
box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
|
height: 64px;
|
||||||
}
|
object-fit: contain;
|
||||||
|
z-index: 3;
|
||||||
.card-qr-name {
|
opacity: 0.85;
|
||||||
font-size: 7px;
|
|
||||||
color: var(--text-light, #8a7a6a);
|
|
||||||
text-align: center;
|
|
||||||
line-height: 1.3;
|
|
||||||
max-width: 68px;
|
|
||||||
white-space: pre-line;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.card-logo {
|
.card-logo {
|
||||||
position: absolute;
|
position: absolute;
|
||||||
bottom: 60px;
|
bottom: 16px;
|
||||||
left: 50%;
|
left: 50%;
|
||||||
transform: translateX(-50%);
|
transform: translateX(-50%);
|
||||||
height: 60px;
|
height: 28px;
|
||||||
object-fit: contain;
|
object-fit: contain;
|
||||||
z-index: 1;
|
z-index: 3;
|
||||||
opacity: 0.2;
|
opacity: 0.3;
|
||||||
pointer-events: none;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.card-brand-text {
|
.card-brand-text {
|
||||||
@@ -1223,42 +1146,6 @@ async function saveRecipe() {
|
|||||||
background: var(--sage-mist, #eef4ee);
|
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 */
|
||||||
.card-bottom-actions {
|
.card-bottom-actions {
|
||||||
display: flex;
|
display: flex;
|
||||||
@@ -1516,10 +1403,6 @@ async function saveRecipe() {
|
|||||||
margin-bottom: 10px;
|
margin-bottom: 10px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.card-volume-controls {
|
|
||||||
margin: 8px 0 12px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.volume-btn {
|
.volume-btn {
|
||||||
padding: 7px 16px;
|
padding: 7px 16px;
|
||||||
border: 1.5px solid var(--border, #e0d4c0);
|
border: 1.5px solid var(--border, #e0d4c0);
|
||||||
|
|||||||
@@ -5,8 +5,6 @@ export const dialogState = reactive({
|
|||||||
type: 'alert', // 'alert', 'confirm', 'prompt'
|
type: 'alert', // 'alert', 'confirm', 'prompt'
|
||||||
message: '',
|
message: '',
|
||||||
defaultValue: '',
|
defaultValue: '',
|
||||||
okText: '',
|
|
||||||
cancelText: '',
|
|
||||||
resolve: null
|
resolve: null
|
||||||
})
|
})
|
||||||
|
|
||||||
@@ -15,19 +13,15 @@ export function showAlert(msg) {
|
|||||||
dialogState.visible = true
|
dialogState.visible = true
|
||||||
dialogState.type = 'alert'
|
dialogState.type = 'alert'
|
||||||
dialogState.message = msg
|
dialogState.message = msg
|
||||||
dialogState.okText = ''
|
|
||||||
dialogState.cancelText = ''
|
|
||||||
dialogState.resolve = resolve
|
dialogState.resolve = resolve
|
||||||
})
|
})
|
||||||
}
|
}
|
||||||
|
|
||||||
export function showConfirm(msg, opts = {}) {
|
export function showConfirm(msg) {
|
||||||
return new Promise(resolve => {
|
return new Promise(resolve => {
|
||||||
dialogState.visible = true
|
dialogState.visible = true
|
||||||
dialogState.type = 'confirm'
|
dialogState.type = 'confirm'
|
||||||
dialogState.message = msg
|
dialogState.message = msg
|
||||||
dialogState.okText = opts.okText || ''
|
|
||||||
dialogState.cancelText = opts.cancelText || ''
|
|
||||||
dialogState.resolve = resolve
|
dialogState.resolve = resolve
|
||||||
})
|
})
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -5,7 +5,6 @@ import { api } from '../composables/useApi'
|
|||||||
export const DROPS_PER_ML = 18.6
|
export const DROPS_PER_ML = 18.6
|
||||||
|
|
||||||
export const VOLUME_DROPS = {
|
export const VOLUME_DROPS = {
|
||||||
'单次': null,
|
|
||||||
'2.5': 46,
|
'2.5': 46,
|
||||||
'5': 93,
|
'5': 93,
|
||||||
'10': 186,
|
'10': 186,
|
||||||
|
|||||||
@@ -5,7 +5,6 @@ export const useUiStore = defineStore('ui', () => {
|
|||||||
const currentSection = ref('search')
|
const currentSection = ref('search')
|
||||||
const showLoginModal = ref(false)
|
const showLoginModal = ref(false)
|
||||||
const toasts = ref([])
|
const toasts = ref([])
|
||||||
const pendingAction = ref(null)
|
|
||||||
|
|
||||||
let toastId = 0
|
let toastId = 0
|
||||||
|
|
||||||
@@ -21,10 +20,7 @@ export const useUiStore = defineStore('ui', () => {
|
|||||||
}, duration)
|
}, duration)
|
||||||
}
|
}
|
||||||
|
|
||||||
function openLogin(afterLogin) {
|
function openLogin() {
|
||||||
if (afterLogin) {
|
|
||||||
pendingAction.value = afterLogin
|
|
||||||
}
|
|
||||||
showLoginModal.value = true
|
showLoginModal.value = true
|
||||||
}
|
}
|
||||||
|
|
||||||
@@ -32,23 +28,13 @@ export const useUiStore = defineStore('ui', () => {
|
|||||||
showLoginModal.value = false
|
showLoginModal.value = false
|
||||||
}
|
}
|
||||||
|
|
||||||
function runPendingAction() {
|
|
||||||
if (pendingAction.value) {
|
|
||||||
const action = pendingAction.value
|
|
||||||
pendingAction.value = null
|
|
||||||
action()
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
return {
|
return {
|
||||||
currentSection,
|
currentSection,
|
||||||
showLoginModal,
|
showLoginModal,
|
||||||
toasts,
|
toasts,
|
||||||
pendingAction,
|
|
||||||
showSection,
|
showSection,
|
||||||
showToast,
|
showToast,
|
||||||
openLogin,
|
openLogin,
|
||||||
closeLogin,
|
closeLogin,
|
||||||
runPendingAction,
|
|
||||||
}
|
}
|
||||||
})
|
})
|
||||||
|
|||||||
@@ -107,11 +107,6 @@
|
|||||||
|
|
||||||
<!-- Brand Tab -->
|
<!-- Brand Tab -->
|
||||||
<div v-if="activeTab === 'brand'" class="tab-content">
|
<div v-if="activeTab === 'brand'" class="tab-content">
|
||||||
<!-- Back to recipe card (when navigated from a recipe) -->
|
|
||||||
<div v-if="returnRecipeId" class="return-banner">
|
|
||||||
<span>📋 上传完成后可返回配方卡片</span>
|
|
||||||
<button class="btn-return" @click="goBackToRecipe">← 返回配方卡片</button>
|
|
||||||
</div>
|
|
||||||
<div class="section-card">
|
<div class="section-card">
|
||||||
<h4>🏷️ 品牌设置</h4>
|
<h4>🏷️ 品牌设置</h4>
|
||||||
|
|
||||||
@@ -128,18 +123,6 @@
|
|||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="form-group">
|
|
||||||
<label>我的二维码图片</label>
|
|
||||||
<div class="qr-preview">
|
|
||||||
<div class="upload-area qr-upload-area" @click="triggerUpload('qr')">
|
|
||||||
<img v-if="brandQrImage" :src="brandQrImage" class="qr-img" />
|
|
||||||
<span v-else class="upload-hint">📲 点击上传</span>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<input ref="qrInput" type="file" accept="image/*" style="display:none" @change="handleUpload('qr', $event)" />
|
|
||||||
<div class="field-hint" style="text-align:center">上传后将显示在配方卡片右下角</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="form-group">
|
<div class="form-group">
|
||||||
<label>品牌Logo</label>
|
<label>品牌Logo</label>
|
||||||
<div class="upload-area" @click="triggerUpload('logo')">
|
<div class="upload-area" @click="triggerUpload('logo')">
|
||||||
@@ -178,7 +161,7 @@
|
|||||||
|
|
||||||
<div class="form-group">
|
<div class="form-group">
|
||||||
<label>角色</label>
|
<label>角色</label>
|
||||||
<div class="role-badge-display">{{ roleLabel }}</div>
|
<div class="form-static role-badge">{{ roleLabel }}</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
@@ -219,7 +202,6 @@
|
|||||||
|
|
||||||
<script setup>
|
<script setup>
|
||||||
import { ref, computed, onMounted, watch } from 'vue'
|
import { ref, computed, onMounted, watch } from 'vue'
|
||||||
import { useRouter } from 'vue-router'
|
|
||||||
import { useAuthStore } from '../stores/auth'
|
import { useAuthStore } from '../stores/auth'
|
||||||
import { useOilsStore } from '../stores/oils'
|
import { useOilsStore } from '../stores/oils'
|
||||||
import { useDiaryStore } from '../stores/diary'
|
import { useDiaryStore } from '../stores/diary'
|
||||||
@@ -232,24 +214,20 @@ const auth = useAuthStore()
|
|||||||
const oils = useOilsStore()
|
const oils = useOilsStore()
|
||||||
const diaryStore = useDiaryStore()
|
const diaryStore = useDiaryStore()
|
||||||
const ui = useUiStore()
|
const ui = useUiStore()
|
||||||
const router = useRouter()
|
|
||||||
|
|
||||||
const activeTab = ref('brand')
|
const activeTab = ref('brand')
|
||||||
const pasteText = ref('')
|
const pasteText = ref('')
|
||||||
const selectedDiaryId = ref(null)
|
const selectedDiaryId = ref(null)
|
||||||
const returnRecipeId = ref(null)
|
|
||||||
const selectedDiary = ref(null)
|
const selectedDiary = ref(null)
|
||||||
const newEntryText = ref('')
|
const newEntryText = ref('')
|
||||||
|
|
||||||
// Brand settings
|
// Brand settings
|
||||||
const brandName = ref('')
|
const brandName = ref('')
|
||||||
const brandQrUrl = ref('')
|
const brandQrUrl = ref('')
|
||||||
const brandQrImage = ref('')
|
|
||||||
const brandLogo = ref('')
|
const brandLogo = ref('')
|
||||||
const brandBg = ref('')
|
const brandBg = ref('')
|
||||||
const logoInput = ref(null)
|
const logoInput = ref(null)
|
||||||
const bgInput = ref(null)
|
const bgInput = ref(null)
|
||||||
const qrInput = ref(null)
|
|
||||||
|
|
||||||
// Account settings
|
// Account settings
|
||||||
const displayName = ref('')
|
const displayName = ref('')
|
||||||
@@ -272,16 +250,8 @@ onMounted(async () => {
|
|||||||
await diaryStore.loadDiary()
|
await diaryStore.loadDiary()
|
||||||
displayName.value = auth.user.display_name || ''
|
displayName.value = auth.user.display_name || ''
|
||||||
await loadBrandSettings()
|
await loadBrandSettings()
|
||||||
returnRecipeId.value = localStorage.getItem('oil_return_recipe_id') || null
|
|
||||||
})
|
})
|
||||||
|
|
||||||
function goBackToRecipe() {
|
|
||||||
if (returnRecipeId.value) {
|
|
||||||
localStorage.removeItem('oil_return_recipe_id')
|
|
||||||
router.push('/?openRecipe=' + encodeURIComponent(returnRecipeId.value))
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
function selectDiary(d) {
|
function selectDiary(d) {
|
||||||
const id = d._id || d.id
|
const id = d._id || d.id
|
||||||
selectedDiaryId.value = id
|
selectedDiaryId.value = id
|
||||||
@@ -375,9 +345,8 @@ async function loadBrandSettings() {
|
|||||||
const data = await res.json()
|
const data = await res.json()
|
||||||
brandName.value = data.brand_name || ''
|
brandName.value = data.brand_name || ''
|
||||||
brandQrUrl.value = data.qr_url || ''
|
brandQrUrl.value = data.qr_url || ''
|
||||||
brandQrImage.value = data.qr_code || ''
|
brandLogo.value = data.logo_url || ''
|
||||||
brandLogo.value = data.brand_logo || ''
|
brandBg.value = data.bg_url || ''
|
||||||
brandBg.value = data.brand_bg || ''
|
|
||||||
}
|
}
|
||||||
} catch {
|
} catch {
|
||||||
// no brand settings yet
|
// no brand settings yet
|
||||||
@@ -400,35 +369,26 @@ async function saveBrandSettings() {
|
|||||||
|
|
||||||
function triggerUpload(type) {
|
function triggerUpload(type) {
|
||||||
if (type === 'logo') logoInput.value?.click()
|
if (type === 'logo') logoInput.value?.click()
|
||||||
else if (type === 'bg') bgInput.value?.click()
|
else 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) {
|
async function handleUpload(type, event) {
|
||||||
const file = event.target.files[0]
|
const file = event.target.files[0]
|
||||||
if (!file) return
|
if (!file) return
|
||||||
|
const formData = new FormData()
|
||||||
|
formData.append('file', file)
|
||||||
|
formData.append('type', type)
|
||||||
try {
|
try {
|
||||||
const base64 = await readFileAsBase64(file)
|
const token = localStorage.getItem('oil_auth_token') || ''
|
||||||
const fieldMap = { logo: 'brand_logo', bg: 'brand_bg', qr: 'qr_code' }
|
const res = await fetch('/api/brand-upload', {
|
||||||
const field = fieldMap[type]
|
method: 'POST',
|
||||||
if (!field) return
|
headers: token ? { Authorization: 'Bearer ' + token } : {},
|
||||||
const res = await api('/api/brand', {
|
body: formData,
|
||||||
method: 'PUT',
|
|
||||||
body: JSON.stringify({ [field]: base64 }),
|
|
||||||
})
|
})
|
||||||
if (res.ok) {
|
if (res.ok) {
|
||||||
if (type === 'logo') brandLogo.value = base64
|
const data = await res.json()
|
||||||
else if (type === 'bg') brandBg.value = base64
|
if (type === 'logo') brandLogo.value = data.url
|
||||||
else if (type === 'qr') brandQrImage.value = base64
|
else brandBg.value = data.url
|
||||||
ui.showToast('上传成功')
|
ui.showToast('上传成功')
|
||||||
}
|
}
|
||||||
} catch {
|
} catch {
|
||||||
@@ -758,39 +718,6 @@ async function applyBusiness() {
|
|||||||
border-color: #7ec6a4;
|
border-color: #7ec6a4;
|
||||||
}
|
}
|
||||||
|
|
||||||
/* Return banner */
|
|
||||||
.return-banner {
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
justify-content: space-between;
|
|
||||||
background: #f0faf5;
|
|
||||||
border: 1.5px solid #7ec6a4;
|
|
||||||
border-radius: 12px;
|
|
||||||
padding: 10px 14px;
|
|
||||||
margin-bottom: 14px;
|
|
||||||
font-size: 13px;
|
|
||||||
color: #3e7d5a;
|
|
||||||
gap: 10px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.btn-return {
|
|
||||||
background: linear-gradient(135deg, #7ec6a4 0%, #4a9d7e 100%);
|
|
||||||
color: #fff;
|
|
||||||
border: none;
|
|
||||||
border-radius: 8px;
|
|
||||||
padding: 6px 14px;
|
|
||||||
font-size: 12px;
|
|
||||||
cursor: pointer;
|
|
||||||
font-family: inherit;
|
|
||||||
font-weight: 500;
|
|
||||||
white-space: nowrap;
|
|
||||||
flex-shrink: 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
.btn-return:hover {
|
|
||||||
opacity: 0.9;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Brand */
|
/* Brand */
|
||||||
.form-group {
|
.form-group {
|
||||||
margin-bottom: 14px;
|
margin-bottom: 14px;
|
||||||
@@ -812,14 +739,8 @@ async function applyBusiness() {
|
|||||||
color: #6b6375;
|
color: #6b6375;
|
||||||
}
|
}
|
||||||
|
|
||||||
.role-badge-display {
|
.role-badge {
|
||||||
display: inline-block;
|
display: inline-block;
|
||||||
font-size: 12px;
|
|
||||||
padding: 3px 12px;
|
|
||||||
border-radius: 8px;
|
|
||||||
background: linear-gradient(135deg, #e8f5e9, #c8e6c9);
|
|
||||||
color: #4a9d7e;
|
|
||||||
font-weight: 500;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.qr-preview {
|
.qr-preview {
|
||||||
@@ -862,20 +783,6 @@ async function applyBusiness() {
|
|||||||
max-height: 100px;
|
max-height: 100px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.qr-upload-area {
|
|
||||||
width: 120px;
|
|
||||||
height: 120px;
|
|
||||||
min-height: unset;
|
|
||||||
border-radius: 8px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.field-hint {
|
|
||||||
font-size: 12px;
|
|
||||||
color: #9b94a3;
|
|
||||||
margin-top: 4px;
|
|
||||||
padding-left: 2px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.upload-hint {
|
.upload-hint {
|
||||||
font-size: 13px;
|
font-size: 13px;
|
||||||
color: #b0aab5;
|
color: #b0aab5;
|
||||||
|
|||||||
@@ -123,8 +123,7 @@
|
|||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script setup>
|
<script setup>
|
||||||
import { ref, computed, onMounted, nextTick, watch } from 'vue'
|
import { ref, computed, onMounted, nextTick } from 'vue'
|
||||||
import { useRoute, useRouter } from 'vue-router'
|
|
||||||
import { useAuthStore } from '../stores/auth'
|
import { useAuthStore } from '../stores/auth'
|
||||||
import { useOilsStore } from '../stores/oils'
|
import { useOilsStore } from '../stores/oils'
|
||||||
import { useRecipesStore } from '../stores/recipes'
|
import { useRecipesStore } from '../stores/recipes'
|
||||||
@@ -137,8 +136,6 @@ const auth = useAuthStore()
|
|||||||
const oils = useOilsStore()
|
const oils = useOilsStore()
|
||||||
const recipeStore = useRecipesStore()
|
const recipeStore = useRecipesStore()
|
||||||
const ui = useUiStore()
|
const ui = useUiStore()
|
||||||
const route = useRoute()
|
|
||||||
const router = useRouter()
|
|
||||||
|
|
||||||
const searchQuery = ref('')
|
const searchQuery = ref('')
|
||||||
const selectedCategory = ref(null)
|
const selectedCategory = ref(null)
|
||||||
@@ -157,27 +154,6 @@ onMounted(async () => {
|
|||||||
} catch {
|
} catch {
|
||||||
// category modules are optional
|
// 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) {
|
function selectCategory(cat) {
|
||||||
|
|||||||
Reference in New Issue
Block a user