Rewrite recipe search page to match original design
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
Test / e2e-test (push) Has been cancelled
PR Preview / test (pull_request) Successful in 4s
PR Preview / deploy-preview (pull_request) Successful in 13s
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
Test / e2e-test (push) Has been cancelled
PR Preview / test (pull_request) Successful in 4s
PR Preview / deploy-preview (pull_request) Successful in 13s
- RecipeCard: simple card with name, tags, oil names, price (matching original .recipe-card style with hover translateY and warm shadows) - RecipeDetailOverlay: inline panel (not modal) with editable ingredients table, add ingredient row, total cost bar, and card preview section matching the original detail-panel + #recipe-card-export layout - RecipeSearch: simplified layout with search box and grid, detail panel appears inline below grid when a card is clicked - Updated Cypress tests to match new component structure Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
This commit is contained in:
@@ -4,8 +4,8 @@ describe('Price Display Regression', () => {
|
||||
cy.get('.recipe-card', { timeout: 10000 }).should('have.length.gte', 1)
|
||||
cy.wait(2000) // wait for oils store to load and re-render
|
||||
|
||||
// Check via .card-price elements which hold the formatted cost
|
||||
cy.get('.card-price').first().invoke('text').then(text => {
|
||||
// Check via .recipe-card-price elements which hold the formatted cost
|
||||
cy.get('.recipe-card-price').first().invoke('text').then(text => {
|
||||
const match = text.match(/¥\s*(\d+\.?\d*)/)
|
||||
expect(match, 'Card price should contain ¥').to.not.be.null
|
||||
expect(parseFloat(match[1]), 'Price should be > 0').to.be.gt(0)
|
||||
|
||||
@@ -4,18 +4,16 @@ describe('Recipe Detail', () => {
|
||||
cy.get('.recipe-card', { timeout: 10000 }).should('have.length.gte', 1)
|
||||
})
|
||||
|
||||
it('opens detail overlay when clicking a recipe card', () => {
|
||||
it('opens detail panel when clicking a recipe card', () => {
|
||||
cy.get('.recipe-card').first().click()
|
||||
cy.get('[class*="overlay"], [class*="detail"]').should('be.visible')
|
||||
cy.get('[class*="detail"]').should('be.visible')
|
||||
})
|
||||
|
||||
it('shows recipe name in detail view', () => {
|
||||
// Get recipe name from card, however it's structured
|
||||
cy.get('.recipe-card').first().invoke('text').then(cardText => {
|
||||
cy.get('.recipe-card').first().click()
|
||||
cy.wait(500)
|
||||
// The detail view should show some text from the card
|
||||
cy.get('[class*="overlay"], [class*="detail"]').should('be.visible')
|
||||
cy.get('[class*="detail"]').should('be.visible')
|
||||
})
|
||||
})
|
||||
|
||||
@@ -31,24 +29,21 @@ describe('Recipe Detail', () => {
|
||||
cy.contains('¥').should('exist')
|
||||
})
|
||||
|
||||
it('closes detail overlay when clicking close button', () => {
|
||||
it('closes detail panel when clicking close button', () => {
|
||||
cy.get('.recipe-card').first().click()
|
||||
cy.get('[class*="overlay"], [class*="detail"]').should('be.visible')
|
||||
cy.get('button').contains(/✕|关闭|←/).first().click()
|
||||
cy.get('[class*="detail"]').should('be.visible')
|
||||
cy.get('button').contains(/✕|关闭/).first().click()
|
||||
cy.get('.recipe-card').should('be.visible')
|
||||
})
|
||||
|
||||
it('shows action buttons in detail', () => {
|
||||
cy.get('.recipe-card').first().click()
|
||||
cy.wait(500)
|
||||
// Should have at least one action button
|
||||
cy.get('[class*="overlay"] button, [class*="detail"] button').should('have.length.gte', 1)
|
||||
cy.get('[class*="detail"] button').should('have.length.gte', 1)
|
||||
})
|
||||
|
||||
it('shows favorite star', () => {
|
||||
cy.get('.recipe-card').first().click()
|
||||
cy.wait(500)
|
||||
cy.contains(/★|☆|收藏/).should('exist')
|
||||
it('shows favorite star on recipe cards', () => {
|
||||
cy.get('.fav-btn').first().should('exist')
|
||||
})
|
||||
})
|
||||
|
||||
@@ -64,21 +59,21 @@ describe('Recipe Detail - Editor (Admin)', () => {
|
||||
cy.get('.recipe-card', { timeout: 10000 }).should('have.length.gte', 1)
|
||||
})
|
||||
|
||||
it('shows edit button for admin', () => {
|
||||
it('shows editable ingredients table directly', () => {
|
||||
cy.get('.recipe-card').first().click()
|
||||
cy.wait(500)
|
||||
cy.contains(/编辑|✏/).should('exist')
|
||||
cy.get('.oil-select, .drops-input').should('exist')
|
||||
})
|
||||
|
||||
it('can switch to editor view', () => {
|
||||
it('shows add ingredient button', () => {
|
||||
cy.get('.recipe-card').first().click()
|
||||
cy.contains(/编辑|✏/).first().click()
|
||||
cy.get('select, input[type="number"], .oil-select, .drops-input').should('exist')
|
||||
cy.wait(500)
|
||||
cy.contains('加精油').should('exist')
|
||||
})
|
||||
|
||||
it('editor shows save button', () => {
|
||||
it('shows export image button', () => {
|
||||
cy.get('.recipe-card').first().click()
|
||||
cy.contains(/编辑|✏/).first().click()
|
||||
cy.contains(/保存|💾/).should('exist')
|
||||
cy.wait(500)
|
||||
cy.contains('导出图片').should('exist')
|
||||
})
|
||||
})
|
||||
|
||||
@@ -1,36 +1,19 @@
|
||||
<template>
|
||||
<div class="recipe-card" @click="$emit('click', index)">
|
||||
<div class="card-name">{{ recipe.name }}</div>
|
||||
|
||||
<div v-if="recipe.tags && recipe.tags.length" class="card-tags">
|
||||
<span v-for="tag in recipe.tags" :key="tag" class="card-tag">{{ tag }}</span>
|
||||
<div class="recipe-card-name">{{ recipe.name }}</div>
|
||||
<div v-if="recipe.tags && recipe.tags.length" class="recipe-card-tags">
|
||||
<span v-for="tag in recipe.tags" :key="tag" class="tag">{{ tag }}</span>
|
||||
</div>
|
||||
|
||||
<div v-if="recipe.note" class="card-note">{{ recipe.note }}</div>
|
||||
|
||||
<div class="card-ingredients">
|
||||
<div v-for="(ing, i) in recipe.ingredients" :key="i" class="card-ing-row">
|
||||
<span class="card-oil-name">{{ ing.oil }}</span>
|
||||
<span class="card-oil-drops">{{ ing.drops }}滴</span>
|
||||
</div>
|
||||
<div class="recipe-card-oils">{{ oilNames }}</div>
|
||||
<div class="recipe-card-bottom">
|
||||
<div class="recipe-card-price">💰 {{ priceInfo.cost }}</div>
|
||||
<button
|
||||
class="fav-btn"
|
||||
:class="{ favorited: isFav }"
|
||||
@click.stop="$emit('toggle-fav', recipe._id)"
|
||||
:title="isFav ? '取消收藏' : '收藏'"
|
||||
>{{ isFav ? '★' : '☆' }}</button>
|
||||
</div>
|
||||
|
||||
<div class="card-total">
|
||||
<div class="card-total-inner">
|
||||
<span class="card-total-label">成本</span>
|
||||
<span class="card-total-price">{{ priceInfo.cost }}</span>
|
||||
</div>
|
||||
<span v-if="priceInfo.hasRetail" class="card-retail">零售 {{ priceInfo.retail }}</span>
|
||||
</div>
|
||||
|
||||
<button
|
||||
class="card-star"
|
||||
:class="{ favorited: isFav }"
|
||||
@click.stop="$emit('toggle-fav', recipe._id)"
|
||||
:title="isFav ? '取消收藏' : '收藏'"
|
||||
>
|
||||
{{ isFav ? '★' : '☆' }}
|
||||
</button>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
@@ -49,165 +32,88 @@ defineEmits(['click', 'toggle-fav'])
|
||||
const oilsStore = useOilsStore()
|
||||
const recipesStore = useRecipesStore()
|
||||
|
||||
const oilNames = computed(() =>
|
||||
props.recipe.ingredients.map(i => i.oil).join('、')
|
||||
)
|
||||
const priceInfo = computed(() => oilsStore.fmtCostWithRetail(props.recipe.ingredients))
|
||||
const isFav = computed(() => recipesStore.isFavorite(props.recipe))
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.recipe-card {
|
||||
background: linear-gradient(145deg, #faf7f0 0%, #f5ede0 100%);
|
||||
border-radius: 16px;
|
||||
padding: 20px 18px 16px;
|
||||
background: white;
|
||||
border-radius: 14px;
|
||||
padding: 18px;
|
||||
cursor: pointer;
|
||||
box-shadow: 0 4px 20px rgba(90, 60, 30, 0.08);
|
||||
border: 2px solid transparent;
|
||||
transition: all 0.2s;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 6px;
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.recipe-card::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: -30px;
|
||||
right: -30px;
|
||||
width: 120px;
|
||||
height: 120px;
|
||||
background: radial-gradient(circle, rgba(122, 158, 126, 0.12) 0%, transparent 70%);
|
||||
border-radius: 50%;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
.recipe-card:hover {
|
||||
transform: translateY(-3px);
|
||||
box-shadow: 0 6px 24px rgba(0, 0, 0, 0.1);
|
||||
border-color: #b8d4c0;
|
||||
box-shadow: 0 8px 32px rgba(90, 60, 30, 0.15);
|
||||
border-color: #c8ddc9;
|
||||
}
|
||||
|
||||
.card-name {
|
||||
.recipe-card-name {
|
||||
font-family: 'Noto Serif SC', serif;
|
||||
font-size: 17px;
|
||||
font-weight: 700;
|
||||
color: #3e3a44;
|
||||
line-height: 1.3;
|
||||
padding-right: 28px;
|
||||
font-size: 16px;
|
||||
font-weight: 600;
|
||||
color: #2c2416;
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
|
||||
.card-tags {
|
||||
.recipe-card-tags {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 5px;
|
||||
margin-bottom: 2px;
|
||||
margin-bottom: 6px;
|
||||
}
|
||||
|
||||
.card-tag {
|
||||
.tag {
|
||||
font-size: 11px;
|
||||
padding: 2px 9px;
|
||||
padding: 2px 8px;
|
||||
border-radius: 8px;
|
||||
background: rgba(122, 158, 126, 0.15);
|
||||
background: #eef4ee;
|
||||
color: #5a7d5e;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.card-note {
|
||||
.recipe-card-oils {
|
||||
font-size: 12px;
|
||||
color: #8a7e6b;
|
||||
background: rgba(201, 168, 76, 0.1);
|
||||
border-radius: 6px;
|
||||
padding: 4px 8px;
|
||||
line-height: 1.4;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
color: #9a8570;
|
||||
line-height: 1.7;
|
||||
}
|
||||
|
||||
.card-ingredients {
|
||||
.recipe-card-bottom {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 0;
|
||||
margin: 4px 0;
|
||||
}
|
||||
|
||||
.card-ing-row {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding: 6px 0;
|
||||
border-bottom: 1px solid rgba(180, 150, 100, 0.15);
|
||||
font-size: 13px;
|
||||
}
|
||||
|
||||
.card-ing-row:last-child {
|
||||
border-bottom: none;
|
||||
}
|
||||
|
||||
.card-oil-name {
|
||||
flex: 1;
|
||||
color: #3e3a44;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.card-oil-drops {
|
||||
color: #5a7d5e;
|
||||
font-size: 12px;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.card-total {
|
||||
background: linear-gradient(135deg, #7ec6a4, #4a9d7e);
|
||||
border-radius: 10px;
|
||||
padding: 10px 14px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
margin-top: 4px;
|
||||
}
|
||||
|
||||
.card-total-inner {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
margin-top: 8px;
|
||||
}
|
||||
|
||||
.card-total-label {
|
||||
color: rgba(255, 255, 255, 0.8);
|
||||
font-size: 12px;
|
||||
letter-spacing: 0.5px;
|
||||
.recipe-card-price {
|
||||
font-size: 13px;
|
||||
color: #5a7d5e;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.card-total-price {
|
||||
color: #fff;
|
||||
font-size: 17px;
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
.card-retail {
|
||||
font-size: 11px;
|
||||
color: rgba(255, 255, 255, 0.75);
|
||||
}
|
||||
|
||||
.card-star {
|
||||
position: absolute;
|
||||
top: 14px;
|
||||
right: 12px;
|
||||
.fav-btn {
|
||||
background: none;
|
||||
border: none;
|
||||
font-size: 22px;
|
||||
font-size: 20px;
|
||||
cursor: pointer;
|
||||
color: #d4cfc7;
|
||||
padding: 2px;
|
||||
padding: 2px 4px;
|
||||
line-height: 1;
|
||||
transition: color 0.2s, transform 0.15s;
|
||||
z-index: 1;
|
||||
transition: color 0.2s;
|
||||
}
|
||||
|
||||
.card-star.favorited {
|
||||
.fav-btn.favorited {
|
||||
color: #f5a623;
|
||||
}
|
||||
|
||||
.card-star:hover {
|
||||
.fav-btn:hover {
|
||||
color: #f5a623;
|
||||
transform: scale(1.15);
|
||||
}
|
||||
</style>
|
||||
|
||||
File diff suppressed because it is too large
Load Diff
@@ -1,121 +1,43 @@
|
||||
<template>
|
||||
<div class="recipe-search">
|
||||
<!-- Category Carousel (full-width image slides) -->
|
||||
<div class="cat-wrap" v-if="categories.length && !selectedCategory">
|
||||
<div class="cat-track" :style="{ transform: `translateX(-${catIdx * 100}%)` }">
|
||||
<div
|
||||
v-for="cat in categories"
|
||||
:key="cat.name"
|
||||
class="cat-card"
|
||||
:style="{ backgroundImage: cat.bg_image ? `url(${cat.bg_image})` : `linear-gradient(135deg, ${cat.color_from || '#7a9e7e'}, ${cat.color_to || '#5a7d5e'})` }"
|
||||
@click="selectCategory(cat)"
|
||||
>
|
||||
<div class="cat-inner">
|
||||
<div class="cat-icon">{{ cat.icon || '🌿' }}</div>
|
||||
<div class="cat-name">{{ cat.name }}</div>
|
||||
<div v-if="cat.subtitle" class="cat-sub">{{ cat.subtitle }}</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<button class="cat-arrow left" @click="slideCat(-1)">‹</button>
|
||||
<button class="cat-arrow right" @click="slideCat(1)">›</button>
|
||||
</div>
|
||||
<div class="cat-dots" v-if="categories.length > 1 && !selectedCategory">
|
||||
<span
|
||||
v-for="(cat, i) in categories"
|
||||
:key="i"
|
||||
class="cat-dot"
|
||||
:class="{ active: catIdx === i }"
|
||||
@click="catIdx = i"
|
||||
></span>
|
||||
</div>
|
||||
<!-- Category filter active banner -->
|
||||
<div v-if="selectedCategory" class="cat-filter-bar">
|
||||
<span>📂 {{ selectedCategory }}</span>
|
||||
<button @click="selectedCategory = null; catIdx = 0" class="btn-sm btn-outline">✕ 返回全部</button>
|
||||
</div>
|
||||
|
||||
<!-- Search Box -->
|
||||
<div class="search-box">
|
||||
<input
|
||||
class="search-input"
|
||||
v-model="searchQuery"
|
||||
placeholder="搜索配方名、精油、标签..."
|
||||
@input="onSearch"
|
||||
<div class="search-label">搜索配方名称或关键词</div>
|
||||
<div class="search-row">
|
||||
<input
|
||||
class="search-input"
|
||||
v-model="searchQuery"
|
||||
placeholder="输入配方名称，如：白发转黑、痘痘、一夜好眠…"
|
||||
@input="onSearch"
|
||||
/>
|
||||
<button v-if="searchQuery" class="btn btn-outline" @click="clearSearch">清除</button>
|
||||
<button
|
||||
v-if="auth.isLoggedIn"
|
||||
class="btn btn-outline"
|
||||
:class="{ active: favFilter }"
|
||||
@click="favFilter = !favFilter"
|
||||
>{{ favFilter ? '★ 收藏中' : '☆ 收藏' }}</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Recipe Grid -->
|
||||
<div class="recipe-grid">
|
||||
<RecipeCard
|
||||
v-for="r in displayedRecipes"
|
||||
:key="r._id"
|
||||
:recipe="r"
|
||||
:index="findGlobalIndex(r)"
|
||||
:class="{ selected: selectedRecipeIndex === findGlobalIndex(r) }"
|
||||
@click="selectRecipe(findGlobalIndex(r))"
|
||||
@toggle-fav="handleToggleFav(r)"
|
||||
/>
|
||||
<button v-if="searchQuery" class="search-clear-btn" @click="clearSearch">✕</button>
|
||||
<button class="search-btn" @click="onSearch">🔍</button>
|
||||
<div v-if="displayedRecipes.length === 0" class="empty-hint">暂无配方</div>
|
||||
</div>
|
||||
|
||||
<!-- Personal Section (logged in) -->
|
||||
<div v-if="auth.isLoggedIn" class="personal-section">
|
||||
<div class="section-header" @click="showMyRecipes = !showMyRecipes">
|
||||
<span>📖 我的配方</span>
|
||||
<span class="toggle-icon">{{ showMyRecipes ? '▾' : '▸' }}</span>
|
||||
</div>
|
||||
<div v-if="showMyRecipes" class="recipe-grid">
|
||||
<RecipeCard
|
||||
v-for="(r, i) in myRecipesPreview"
|
||||
:key="r._id"
|
||||
:recipe="r"
|
||||
:index="findGlobalIndex(r)"
|
||||
@click="openDetail(findGlobalIndex(r))"
|
||||
@toggle-fav="handleToggleFav(r)"
|
||||
/>
|
||||
<div v-if="myRecipesPreview.length === 0" class="empty-hint">暂无个人配方</div>
|
||||
</div>
|
||||
|
||||
<div class="section-header" @click="showFavorites = !showFavorites">
|
||||
<span>⭐ 收藏配方</span>
|
||||
<span class="toggle-icon">{{ showFavorites ? '▾' : '▸' }}</span>
|
||||
</div>
|
||||
<div v-if="showFavorites" class="recipe-grid">
|
||||
<RecipeCard
|
||||
v-for="(r, i) in favoritesPreview"
|
||||
:key="r._id"
|
||||
:recipe="r"
|
||||
:index="findGlobalIndex(r)"
|
||||
@click="openDetail(findGlobalIndex(r))"
|
||||
@toggle-fav="handleToggleFav(r)"
|
||||
/>
|
||||
<div v-if="favoritesPreview.length === 0" class="empty-hint">暂无收藏配方</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Fuzzy Search Results -->
|
||||
<div v-if="searchQuery && fuzzyResults.length" class="search-results-section">
|
||||
<div class="section-label">🔍 搜索结果 ({{ fuzzyResults.length }})</div>
|
||||
<div class="recipe-grid">
|
||||
<RecipeCard
|
||||
v-for="(r, i) in fuzzyResults"
|
||||
:key="r._id"
|
||||
:recipe="r"
|
||||
:index="findGlobalIndex(r)"
|
||||
@click="openDetail(findGlobalIndex(r))"
|
||||
@toggle-fav="handleToggleFav(r)"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Public Recipe Grid -->
|
||||
<div v-if="!searchQuery || fuzzyResults.length === 0">
|
||||
<div class="section-label">🌿 公共配方库 ({{ filteredRecipes.length }})</div>
|
||||
<div class="recipe-grid">
|
||||
<RecipeCard
|
||||
v-for="(r, i) in filteredRecipes"
|
||||
:key="r._id"
|
||||
:recipe="r"
|
||||
:index="findGlobalIndex(r)"
|
||||
@click="openDetail(findGlobalIndex(r))"
|
||||
@toggle-fav="handleToggleFav(r)"
|
||||
/>
|
||||
<div v-if="filteredRecipes.length === 0" class="empty-hint">暂无配方</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Recipe Detail Overlay -->
|
||||
<!-- Inline Detail Panel -->
|
||||
<RecipeDetailOverlay
|
||||
v-if="selectedRecipeIndex !== null"
|
||||
ref="detailRef"
|
||||
:recipeIndex="selectedRecipeIndex"
|
||||
@close="selectedRecipeIndex = null"
|
||||
/>
|
||||
@@ -123,12 +45,11 @@
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref, computed, onMounted, nextTick } from 'vue'
|
||||
import { ref, computed, nextTick } from 'vue'
|
||||
import { useAuthStore } from '../stores/auth'
|
||||
import { useOilsStore } from '../stores/oils'
|
||||
import { useRecipesStore } from '../stores/recipes'
|
||||
import { useUiStore } from '../stores/ui'
|
||||
import { api } from '../composables/useApi'
|
||||
import RecipeCard from '../components/RecipeCard.vue'
|
||||
import RecipeDetailOverlay from '../components/RecipeDetailOverlay.vue'
|
||||
|
||||
@@ -138,45 +59,18 @@ const recipeStore = useRecipesStore()
|
||||
const ui = useUiStore()
|
||||
|
||||
const searchQuery = ref('')
|
||||
const selectedCategory = ref(null)
|
||||
const categories = ref([])
|
||||
const selectedRecipeIndex = ref(null)
|
||||
const showMyRecipes = ref(true)
|
||||
const showFavorites = ref(true)
|
||||
const catIdx = ref(0)
|
||||
|
||||
onMounted(async () => {
|
||||
try {
|
||||
const res = await api('/api/categories')
|
||||
if (res.ok) {
|
||||
categories.value = await res.json()
|
||||
}
|
||||
} catch {
|
||||
// category modules are optional
|
||||
}
|
||||
})
|
||||
|
||||
function selectCategory(cat) {
|
||||
selectedCategory.value = cat.tag_name || cat.name
|
||||
}
|
||||
|
||||
function slideCat(dir) {
|
||||
const len = categories.value.length
|
||||
catIdx.value = (catIdx.value + dir + len) % len
|
||||
}
|
||||
const favFilter = ref(false)
|
||||
const detailRef = ref(null)
|
||||
|
||||
const filteredRecipes = computed(() => {
|
||||
let list = recipeStore.recipes
|
||||
if (selectedCategory.value) {
|
||||
list = list.filter(r => r.tags && r.tags.includes(selectedCategory.value))
|
||||
if (favFilter.value && auth.isLoggedIn) {
|
||||
list = list.filter(r => recipeStore.isFavorite(r))
|
||||
}
|
||||
return list
|
||||
})
|
||||
|
||||
const fuzzyResults = computed(() => {
|
||||
if (!searchQuery.value.trim()) return []
|
||||
if (!searchQuery.value.trim()) return list
|
||||
const q = searchQuery.value.trim().toLowerCase()
|
||||
return recipeStore.recipes.filter(r => {
|
||||
return list.filter(r => {
|
||||
const nameMatch = r.name.toLowerCase().includes(q)
|
||||
const oilMatch = r.ingredients.some(ing => ing.oil.toLowerCase().includes(q))
|
||||
const tagMatch = r.tags && r.tags.some(t => t.toLowerCase().includes(q))
|
||||
@@ -184,27 +78,19 @@ const fuzzyResults = computed(() => {
|
||||
})
|
||||
})
|
||||
|
||||
const myRecipesPreview = computed(() => {
|
||||
if (!auth.isLoggedIn) return []
|
||||
return recipeStore.recipes
|
||||
.filter(r => r._owner_id === auth.user.id)
|
||||
.slice(0, 6)
|
||||
})
|
||||
|
||||
const favoritesPreview = computed(() => {
|
||||
if (!auth.isLoggedIn) return []
|
||||
return recipeStore.recipes
|
||||
.filter(r => recipeStore.isFavorite(r))
|
||||
.slice(0, 6)
|
||||
})
|
||||
const displayedRecipes = computed(() => filteredRecipes.value)
|
||||
|
||||
function findGlobalIndex(recipe) {
|
||||
return recipeStore.recipes.findIndex(r => r._id === recipe._id)
|
||||
}
|
||||
|
||||
function openDetail(index) {
|
||||
async function selectRecipe(index) {
|
||||
if (index >= 0) {
|
||||
selectedRecipeIndex.value = index
|
||||
await nextTick()
|
||||
// Scroll detail panel into view
|
||||
const el = document.querySelector('.detail-wrapper')
|
||||
if (el) el.scrollIntoView({ behavior: 'smooth', block: 'start' })
|
||||
}
|
||||
}
|
||||
|
||||
@@ -217,12 +103,12 @@ async function handleToggleFav(recipe) {
|
||||
}
|
||||
|
||||
function onSearch() {
|
||||
// fuzzyResults computed handles the filtering reactively
|
||||
// reactive filtering via computed
|
||||
}
|
||||
|
||||
function clearSearch() {
|
||||
searchQuery.value = ''
|
||||
selectedCategory.value = null
|
||||
favFilter.value = false
|
||||
}
|
||||
</script>
|
||||
|
||||
@@ -231,248 +117,101 @@ function clearSearch() {
|
||||
padding: 0 12px 24px;
|
||||
}
|
||||
|
||||
.cat-wrap {
|
||||
position: relative;
|
||||
margin: 0 -12px 20px;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.cat-track {
|
||||
display: flex;
|
||||
transition: transform 0.4s ease;
|
||||
will-change: transform;
|
||||
}
|
||||
|
||||
.cat-card {
|
||||
flex: 0 0 100%;
|
||||
min-height: 200px;
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
cursor: pointer;
|
||||
background-size: cover;
|
||||
background-position: center;
|
||||
}
|
||||
|
||||
.cat-card::after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
background: linear-gradient(135deg, rgba(0,0,0,0.45), rgba(0,0,0,0.25));
|
||||
}
|
||||
|
||||
.cat-inner {
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
height: 100%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
padding: 36px 24px;
|
||||
color: white;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.cat-icon {
|
||||
font-size: 48px;
|
||||
margin-bottom: 10px;
|
||||
filter: drop-shadow(0 2px 6px rgba(0,0,0,0.3));
|
||||
}
|
||||
|
||||
.cat-name {
|
||||
font-family: 'Noto Serif SC', serif;
|
||||
font-size: 24px;
|
||||
font-weight: 700;
|
||||
letter-spacing: 3px;
|
||||
text-shadow: 0 2px 8px rgba(0,0,0,0.5);
|
||||
}
|
||||
|
||||
.cat-sub {
|
||||
font-size: 13px;
|
||||
margin-top: 6px;
|
||||
opacity: 0.9;
|
||||
letter-spacing: 1px;
|
||||
}
|
||||
|
||||
.cat-arrow {
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
transform: translateY(-50%);
|
||||
z-index: 2;
|
||||
width: 36px;
|
||||
height: 36px;
|
||||
border-radius: 50%;
|
||||
background: rgba(255,255,255,0.25);
|
||||
border: none;
|
||||
color: white;
|
||||
font-size: 18px;
|
||||
cursor: pointer;
|
||||
backdrop-filter: blur(4px);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
transition: background 0.2s;
|
||||
}
|
||||
.cat-arrow:hover { background: rgba(255,255,255,0.45); }
|
||||
.cat-arrow.left { left: 12px; }
|
||||
.cat-arrow.right { right: 12px; }
|
||||
|
||||
.cat-dots {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
gap: 8px;
|
||||
margin-bottom: 14px;
|
||||
}
|
||||
.cat-dot {
|
||||
width: 8px;
|
||||
height: 8px;
|
||||
border-radius: 50%;
|
||||
background: var(--border, #e0d4c0);
|
||||
cursor: pointer;
|
||||
transition: all 0.25s;
|
||||
}
|
||||
.cat-dot.active {
|
||||
background: var(--sage, #7a9e7e);
|
||||
width: 22px;
|
||||
border-radius: 4px;
|
||||
}
|
||||
|
||||
.cat-filter-bar {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
background: var(--sage-mist, #eef4ee);
|
||||
border-radius: 10px;
|
||||
padding: 10px 16px;
|
||||
margin-bottom: 16px;
|
||||
font-size: 14px;
|
||||
font-weight: 600;
|
||||
color: var(--sage-dark, #5a7d5e);
|
||||
}
|
||||
|
||||
.cat-label {
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
.cat-arrow {
|
||||
width: 28px;
|
||||
height: 28px;
|
||||
border-radius: 50%;
|
||||
border: 1.5px solid #d4cfc7;
|
||||
background: #fff;
|
||||
cursor: pointer;
|
||||
font-size: 16px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
flex-shrink: 0;
|
||||
color: #6b6375;
|
||||
}
|
||||
|
||||
.cat-arrow:disabled {
|
||||
opacity: 0.3;
|
||||
cursor: default;
|
||||
}
|
||||
|
||||
.search-box {
|
||||
background: white;
|
||||
border-radius: 16px;
|
||||
padding: 20px 24px;
|
||||
box-shadow: 0 4px 20px rgba(90, 60, 30, 0.08);
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
.search-label {
|
||||
font-size: 13px;
|
||||
font-weight: 500;
|
||||
color: #9a8570;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
.search-row {
|
||||
display: flex;
|
||||
gap: 10px;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
margin-bottom: 16px;
|
||||
background: #f8f7f5;
|
||||
border-radius: 12px;
|
||||
padding: 4px 8px;
|
||||
border: 1.5px solid #e5e4e7;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
.search-input {
|
||||
flex: 1;
|
||||
border: none;
|
||||
background: transparent;
|
||||
padding: 10px 8px;
|
||||
font-size: 14px;
|
||||
outline: none;
|
||||
min-width: 200px;
|
||||
padding: 11px 16px;
|
||||
border: 1.5px solid #e0d4c0;
|
||||
border-radius: 10px;
|
||||
font-size: 15px;
|
||||
font-family: inherit;
|
||||
color: #3e3a44;
|
||||
outline: none;
|
||||
color: #2c2416;
|
||||
background: white;
|
||||
transition: border-color 0.2s;
|
||||
}
|
||||
|
||||
.search-input:focus {
|
||||
border-color: #7a9e7e;
|
||||
}
|
||||
|
||||
.search-input::placeholder {
|
||||
color: #b0aab5;
|
||||
}
|
||||
|
||||
.search-btn,
|
||||
.search-clear-btn {
|
||||
border: none;
|
||||
background: transparent;
|
||||
cursor: pointer;
|
||||
font-size: 16px;
|
||||
padding: 6px 8px;
|
||||
border-radius: 8px;
|
||||
color: #6b6375;
|
||||
}
|
||||
|
||||
.search-clear-btn:hover,
|
||||
.search-btn:hover {
|
||||
background: #eae8e5;
|
||||
}
|
||||
|
||||
.personal-section {
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
.section-header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
padding: 10px 12px;
|
||||
background: #f8f7f5;
|
||||
border-radius: 10px;
|
||||
cursor: pointer;
|
||||
margin-bottom: 10px;
|
||||
font-size: 14px;
|
||||
font-weight: 600;
|
||||
color: #3e3a44;
|
||||
}
|
||||
|
||||
.section-header:hover {
|
||||
background: #f0eeeb;
|
||||
}
|
||||
|
||||
.toggle-icon {
|
||||
font-size: 12px;
|
||||
color: #999;
|
||||
}
|
||||
|
||||
.section-label {
|
||||
font-size: 14px;
|
||||
font-weight: 600;
|
||||
color: #3e3a44;
|
||||
padding: 8px 4px;
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
|
||||
.search-results-section {
|
||||
margin-bottom: 20px;
|
||||
color: #c4a882;
|
||||
}
|
||||
|
||||
.recipe-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
|
||||
gap: 12px;
|
||||
margin-bottom: 16px;
|
||||
grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
|
||||
gap: 16px;
|
||||
margin-bottom: 24px;
|
||||
}
|
||||
|
||||
.empty-hint {
|
||||
grid-column: 1 / -1;
|
||||
text-align: center;
|
||||
color: #b0aab5;
|
||||
font-size: 13px;
|
||||
padding: 24px 0;
|
||||
color: #9a8570;
|
||||
font-size: 14px;
|
||||
padding: 40px 0;
|
||||
}
|
||||
|
||||
/* Buttons */
|
||||
.btn {
|
||||
padding: 11px 22px;
|
||||
border-radius: 10px;
|
||||
font-size: 14px;
|
||||
font-family: inherit;
|
||||
cursor: pointer;
|
||||
border: none;
|
||||
transition: all 0.2s;
|
||||
font-weight: 500;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.btn-outline {
|
||||
background: transparent;
|
||||
border: 1.5px solid #7a9e7e;
|
||||
color: #5a7d5e;
|
||||
}
|
||||
|
||||
.btn-outline:hover {
|
||||
background: #eef4ee;
|
||||
}
|
||||
|
||||
.btn-outline.active {
|
||||
background: #eef4ee;
|
||||
border-color: #5a7d5e;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
@media (max-width: 600px) {
|
||||
.recipe-grid {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
|
||||
.search-box {
|
||||
padding: 14px 16px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
Reference in New Issue
Block a user