1 Commits

Author SHA1 Message Date
846058fa0f Raise LoginModal z-index above recipe overlay
Some checks failed
Test / unit-test (push) Successful in 4s
Test / build-check (push) Successful in 4s
Test / e2e-test (push) Failing after 1m5s
Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
2026-04-07 22:19:48 +00:00
10 changed files with 60 additions and 325 deletions

View File

@@ -15,9 +15,7 @@
@click="toggleUserMenu"
>
<template v-if="auth.isLoggedIn">
👤 {{ 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>
👤 {{ auth.user.display_name || auth.user.username }}
</template>
<template v-else>
<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" />
<!-- 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 === 'manage' }" @click="requireLogin('manage')">📋 管理配方</div>
<div class="nav-tab" :class="{ active: ui.currentSection === 'inventory' }" @click="requireLogin('inventory')">📦 个人库存</div>
@@ -66,11 +64,11 @@
<CustomDialog />
<!-- 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>
<script setup>
import { ref, computed, onMounted, watch } from 'vue'
import { ref, onMounted, watch } from 'vue'
import { useRouter, useRoute } from 'vue-router'
import { useAuthStore } from './stores/auth'
import { useOilsStore } from './stores/oils'
@@ -88,11 +86,6 @@ const router = useRouter()
const route = useRoute()
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
const routeToSection = { '/': 'search', '/manage': 'manage', '/inventory': 'inventory', '/oils': 'oils', '/projects': 'projects', '/mydiary': 'mydiary', '/audit': 'audit', '/bugs': 'bugs', '/users': 'users' }
watch(() => route.path, (path) => {

View File

@@ -445,7 +445,7 @@ body {
.toast {
position: fixed; bottom: 80px; left: 50%; transform: translateX(-50%);
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;
}

View File

@@ -11,8 +11,8 @@
ref="promptInput"
/>
<div class="dialog-btn-row">
<button v-if="dialogState.type !== 'alert'" class="dialog-btn-outline" @click="cancel">{{ dialogState.cancelText || '取消' }}</button>
<button class="dialog-btn-primary" @click="ok">{{ dialogState.okText || '确定' }}</button>
<button v-if="dialogState.type !== 'alert'" class="dialog-btn-outline" @click="cancel">取消</button>
<button class="dialog-btn-primary" @click="ok">确定</button>
</div>
</div>
</div>

View File

@@ -104,11 +104,8 @@ async function submit() {
ui.showToast('注册成功')
}
emit('close')
if (ui.pendingAction) {
ui.runPendingAction()
} else {
window.location.reload()
}
// Reload page data after auth change
window.location.reload()
} catch (e) {
errorMsg.value = e?.message || (mode.value === 'login' ? '登录失败,请检查用户名和密码' : '注册失败,请重试')
} finally {

View File

@@ -39,19 +39,18 @@
<!-- Card image (rendered by html2canvas) -->
<div v-show="!cardImageUrl" ref="cardRef" class="export-card">
<!-- Brand overlay layers -->
<div
<img
v-if="brand.brand_bg"
:src="brand.brand_bg"
class="card-brand-bg"
:style="{ backgroundImage: `url('${brand.brand_bg}')` }"
crossorigin="anonymous"
/>
<img
v-if="brand.qr_code"
:src="brand.qr_code"
class="card-qr"
crossorigin="anonymous"
/>
<div v-if="brand.qr_code" class="card-qr-wrapper">
<img
:src="brand.qr_code"
class="card-qr"
crossorigin="anonymous"
/>
<div v-if="brand.brand_name" class="card-qr-name">{{ brand.brand_name }}</div>
</div>
<img
v-if="brand.brand_logo"
:src="brand.brand_logo"
@@ -127,11 +126,6 @@
class="action-btn"
@click="showTranslationEditor = true"
> 修改翻译</button>
<button
v-if="showBrandHint"
class="action-btn action-btn-qr"
@click="goUploadQr"
>📲 上传我的二维码</button>
</div>
<!-- Translation editor (inline) -->
@@ -348,7 +342,6 @@
<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'
@@ -356,7 +349,6 @@ import { useAuthStore } from '../stores/auth'
import { useUiStore } from '../stores/ui'
import { useDiaryStore } from '../stores/diary'
import { api } from '../composables/useApi'
import { showConfirm, showPrompt } from '../composables/useDialog'
import { oilEn, recipeNameEn } from '../composables/useOilTranslation'
// TagPicker replaced with inline tag editing
@@ -371,14 +363,12 @@ const recipesStore = useRecipesStore()
const authStore = useAuthStore()
const ui = useUiStore()
const diaryStore = useDiaryStore()
const router = useRouter()
// ---- View state ----
const viewMode = ref('card')
const cardRef = ref(null)
const cardImageUrl = ref(null)
const cardLang = ref('zh')
const selectedCardVolume = ref('单次')
const showTranslationEditor = ref(false)
const customRecipeNameEn = ref('')
const customOilNameEn = ref({})
@@ -397,30 +387,14 @@ const canEditThisRecipe = computed(() => {
const isFav = computed(() => recipesStore.isFavorite(recipe.value))
// Scale ingredients proportionally to target volume; '单次' = no scaling
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)
)
// Card ingredients: exclude coconut oil
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 coco = scaledCardIngredients.value.find(ing => ing.oil === '椰子油')
const coco = recipe.value.ingredients.find(ing => ing.oil === '椰子油')
return coco ? coco.drops : 0
})
@@ -446,7 +420,7 @@ const dilutionDesc = computed(() => {
: `该配方适用于单次用量(共${totalDrops}滴),其中纯精油 ${totalEoDrops.value} 滴,椰子油 ${coconutDrops.value} 滴,稀释比例为 1:${ratio}`
})
const priceInfo = computed(() => oilsStore.fmtCostWithRetail(scaledCardIngredients.value))
const priceInfo = computed(() => oilsStore.fmtCostWithRetail(recipe.value.ingredients))
// Today string
const todayStr = computed(() => {
@@ -477,30 +451,6 @@ async function loadBrand() {
} catch {
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 ----
@@ -533,12 +483,6 @@ function switchLang(lang) {
nextTick(() => generateCardImage())
}
function onCardVolumeChange(ml) {
selectedCardVolume.value = ml
cardImageUrl.value = null
nextTick(() => generateCardImage())
}
async function saveImage() {
if (!cardImageUrl.value) {
await generateCardImage()
@@ -568,7 +512,7 @@ function copyText() {
].filter(Boolean).join('\n')
navigator.clipboard.writeText(text).then(() => {
ui.showToast('已复制')
ui.showToast('已复制到剪贴板')
}).catch(() => {
ui.showToast('复制失败')
})
@@ -610,7 +554,7 @@ function getCardRecipeName() {
// ---- Favorite ----
async function handleToggleFavorite() {
if (!authStore.isLoggedIn) {
ui.openLogin(() => handleToggleFavorite())
ui.openLogin()
return
}
if (!recipe.value._id) {
@@ -629,10 +573,10 @@ async function handleToggleFavorite() {
// ---- Save to diary ----
async function saveToDiary() {
if (!authStore.isLoggedIn) {
ui.openLogin(() => saveToDiary())
ui.openLogin()
return
}
const name = await showPrompt('保存为我的配方,名称:', recipe.value.name)
const name = prompt('保存为我的配方,名称:', recipe.value.name)
if (!name) return
try {
await api.post('/api/diary', {
@@ -857,7 +801,6 @@ 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')
@@ -998,52 +941,32 @@ async function saveRecipe() {
inset: 0;
width: 100%;
height: 100%;
background-size: cover;
background-position: center;
background-repeat: no-repeat;
opacity: 0.12;
object-fit: cover;
opacity: 0.06;
z-index: 0;
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 {
width: 54px;
height: 54px;
object-fit: cover;
border-radius: 6px;
box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
}
.card-qr-name {
font-size: 7px;
color: var(--text-light, #8a7a6a);
text-align: center;
line-height: 1.3;
max-width: 68px;
white-space: pre-line;
position: absolute;
top: 16px;
right: 16px;
width: 64px;
height: 64px;
object-fit: contain;
z-index: 3;
opacity: 0.85;
}
.card-logo {
position: absolute;
bottom: 60px;
bottom: 16px;
left: 50%;
transform: translateX(-50%);
height: 60px;
height: 28px;
object-fit: contain;
z-index: 1;
opacity: 0.2;
pointer-events: none;
z-index: 3;
opacity: 0.3;
}
.card-brand-text {
@@ -1223,42 +1146,6 @@ 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;
@@ -1516,10 +1403,6 @@ async function saveRecipe() {
margin-bottom: 10px;
}
.card-volume-controls {
margin: 8px 0 12px;
}
.volume-btn {
padding: 7px 16px;
border: 1.5px solid var(--border, #e0d4c0);

View File

@@ -5,8 +5,6 @@ export const dialogState = reactive({
type: 'alert', // 'alert', 'confirm', 'prompt'
message: '',
defaultValue: '',
okText: '',
cancelText: '',
resolve: null
})
@@ -15,19 +13,15 @@ export function showAlert(msg) {
dialogState.visible = true
dialogState.type = 'alert'
dialogState.message = msg
dialogState.okText = ''
dialogState.cancelText = ''
dialogState.resolve = resolve
})
}
export function showConfirm(msg, opts = {}) {
export function showConfirm(msg) {
return new Promise(resolve => {
dialogState.visible = true
dialogState.type = 'confirm'
dialogState.message = msg
dialogState.okText = opts.okText || ''
dialogState.cancelText = opts.cancelText || ''
dialogState.resolve = resolve
})
}

View File

@@ -5,7 +5,6 @@ import { api } from '../composables/useApi'
export const DROPS_PER_ML = 18.6
export const VOLUME_DROPS = {
'单次': null,
'2.5': 46,
'5': 93,
'10': 186,

View File

@@ -5,7 +5,6 @@ export const useUiStore = defineStore('ui', () => {
const currentSection = ref('search')
const showLoginModal = ref(false)
const toasts = ref([])
const pendingAction = ref(null)
let toastId = 0
@@ -21,10 +20,7 @@ export const useUiStore = defineStore('ui', () => {
}, duration)
}
function openLogin(afterLogin) {
if (afterLogin) {
pendingAction.value = afterLogin
}
function openLogin() {
showLoginModal.value = true
}
@@ -32,23 +28,13 @@ export const useUiStore = defineStore('ui', () => {
showLoginModal.value = false
}
function runPendingAction() {
if (pendingAction.value) {
const action = pendingAction.value
pendingAction.value = null
action()
}
}
return {
currentSection,
showLoginModal,
toasts,
pendingAction,
showSection,
showToast,
openLogin,
closeLogin,
runPendingAction,
}
})

View File

@@ -107,11 +107,6 @@
<!-- Brand Tab -->
<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">
<h4>🏷 品牌设置</h4>
@@ -128,18 +123,6 @@
</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">
<label>品牌Logo</label>
<div class="upload-area" @click="triggerUpload('logo')">
@@ -178,7 +161,7 @@
<div class="form-group">
<label>角色</label>
<div class="role-badge-display">{{ roleLabel }}</div>
<div class="form-static role-badge">{{ roleLabel }}</div>
</div>
</div>
@@ -219,7 +202,6 @@
<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'
@@ -232,24 +214,20 @@ const auth = useAuthStore()
const oils = useOilsStore()
const diaryStore = useDiaryStore()
const ui = useUiStore()
const router = useRouter()
const activeTab = ref('brand')
const pasteText = ref('')
const selectedDiaryId = ref(null)
const returnRecipeId = ref(null)
const selectedDiary = ref(null)
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('')
@@ -272,16 +250,8 @@ onMounted(async () => {
await diaryStore.loadDiary()
displayName.value = auth.user.display_name || ''
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) {
const id = d._id || d.id
selectedDiaryId.value = id
@@ -375,9 +345,8 @@ async function loadBrandSettings() {
const data = await res.json()
brandName.value = data.brand_name || ''
brandQrUrl.value = data.qr_url || ''
brandQrImage.value = data.qr_code || ''
brandLogo.value = data.brand_logo || ''
brandBg.value = data.brand_bg || ''
brandLogo.value = data.logo_url || ''
brandBg.value = data.bg_url || ''
}
} catch {
// no brand settings yet
@@ -400,35 +369,26 @@ async function saveBrandSettings() {
function triggerUpload(type) {
if (type === 'logo') logoInput.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)
})
else bgInput.value?.click()
}
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 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 }),
const token = localStorage.getItem('oil_auth_token') || ''
const res = await fetch('/api/brand-upload', {
method: 'POST',
headers: token ? { Authorization: 'Bearer ' + token } : {},
body: formData,
})
if (res.ok) {
if (type === 'logo') brandLogo.value = base64
else if (type === 'bg') brandBg.value = base64
else if (type === 'qr') brandQrImage.value = base64
const data = await res.json()
if (type === 'logo') brandLogo.value = data.url
else brandBg.value = data.url
ui.showToast('上传成功')
}
} catch {
@@ -758,39 +718,6 @@ async function applyBusiness() {
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 */
.form-group {
margin-bottom: 14px;
@@ -812,14 +739,8 @@ async function applyBusiness() {
color: #6b6375;
}
.role-badge-display {
.role-badge {
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 {
@@ -862,20 +783,6 @@ async function applyBusiness() {
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 {
font-size: 13px;
color: #b0aab5;

View File

@@ -123,8 +123,7 @@
</template>
<script setup>
import { ref, computed, onMounted, nextTick, watch } from 'vue'
import { useRoute, useRouter } from 'vue-router'
import { ref, computed, onMounted, nextTick } from 'vue'
import { useAuthStore } from '../stores/auth'
import { useOilsStore } from '../stores/oils'
import { useRecipesStore } from '../stores/recipes'
@@ -137,8 +136,6 @@ 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)
@@ -157,27 +154,6 @@ 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) {