From 2bec4a2d2608d355fed4871ea0e102b5e05a13a1 Mon Sep 17 00:00:00 2001
From: Hera Zhao <hera@euphon.net>
Date: Tue, 7 Apr 2026 10:34:01 +0000
Subject: [PATCH] Revert recipe detail to modal overlay with tab switching
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Restore the original modal popup (卡片预览/编辑 tabs) instead of
the inline detail panel, and bring back category carousel, personal
recipes, and favorites sections on the search page.

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
---
 .../src/components/RecipeDetailOverlay.vue    | 935 ++++++++++--------
 frontend/src/views/RecipeSearch.vue           | 465 ++++++---
 2 files changed, 859 insertions(+), 541 deletions(-)

diff --git a/frontend/src/components/RecipeDetailOverlay.vue b/frontend/src/components/RecipeDetailOverlay.vue
index 9437b7c..20a4d26 100644
--- a/frontend/src/components/RecipeDetailOverlay.vue
+++ b/frontend/src/components/RecipeDetailOverlay.vue
@@ -1,94 +1,155 @@
 <template>
-  <div class="detail-wrapper">
-    <!-- Detail Panel -->
+  <div class="detail-overlay" @click.self="$emit('close')">
     <div class="detail-panel">
-      <div class="detail-header">
-        <div>
-          <div class="detail-title">{{ recipe.name }}</div>
-          <div v-if="recipe.note" class="detail-note">📝 {{ recipe.note }}</div>
+      <!-- Mode toggle -->
+      <div class="detail-mode-tabs">
+        <button
+          class="mode-tab"
+          :class="{ active: viewMode === 'card' }"
+          @click="viewMode = 'card'"
+        >卡片预览</button>
+        <button
+          class="mode-tab"
+          :class="{ active: viewMode === 'editor' }"
+          @click="viewMode = 'editor'"
+        >编辑</button>
+        <button class="detail-close-btn" @click="$emit('close')">✕</button>
+      </div>
+
+      <!-- Card View -->
+      <div v-if="viewMode === 'card'" class="detail-card-view">
+        <div ref="cardRef" class="export-card">
+          <div class="export-card-name">{{ recipe.name }}</div>
+          <div v-if="recipe.tags && recipe.tags.length" class="export-card-tags">
+            <span v-for="tag in recipe.tags" :key="tag" class="export-card-tag">{{ tag }}</span>
+          </div>
+          <table class="export-card-table">
+            <thead>
+              <tr>
+                <th>精油</th>
+                <th>滴数</th>
+                <th>成本</th>
+              </tr>
+            </thead>
+            <tbody>
+              <tr v-for="(ing, i) in recipe.ingredients" :key="i">
+                <td>{{ ing.oil }}</td>
+                <td>{{ ing.drops }}</td>
+                <td>{{ oilsStore.fmtPrice(oilsStore.pricePerDrop(ing.oil) * ing.drops) }}</td>
+              </tr>
+            </tbody>
+            <tfoot>
+              <tr>
+                <td colspan="2" style="text-align:right;font-weight:600">总计</td>
+                <td style="font-weight:600">{{ priceInfo.cost }}</td>
+              </tr>
+              <tr v-if="priceInfo.hasRetail">
+                <td colspan="2" style="text-align:right;color:#999">零售价</td>
+                <td style="color:#999">{{ priceInfo.retail }}</td>
+              </tr>
+            </tfoot>
+          </table>
+          <div v-if="recipe.note" class="export-card-note">{{ recipe.note }}</div>
         </div>
-        <div class="detail-actions">
-          <button class="btn btn-primary btn-sm" @click="showAddRow = true">＋ 加精油</button>
-          <button class="btn btn-gold btn-sm" @click="exportCard">📷 导出图片</button>
-          <button class="btn btn-outline btn-sm" @click="$emit('close')">✕ 关闭</button>
+
+        <div class="detail-card-actions">
+          <button class="action-btn" @click="exportImage">📤 导出图片</button>
+          <button class="action-btn" @click="$emit('close')">关闭</button>
         </div>
       </div>
 
-      <!-- Ingredients Table -->
-      <table class="ingredients-table">
-        <thead>
-          <tr>
-            <th>精油</th>
-            <th>滴数</th>
-            <th>单价/滴</th>
-            <th>小计</th>
-            <th></th>
-          </tr>
-        </thead>
-        <tbody>
-          <tr v-for="(ing, i) in editIngredients" :key="i">
-            <td>
-              <select class="oil-select" :value="ing.oil" @change="changeOil(i, $event.target.value)">
-                <option value="">选择精油</option>
-                <option v-for="name in oilsStore.oilNames" :key="name" :value="name">{{ name }}</option>
-              </select>
-            </td>
-            <td>
-              <input
-                type="number"
-                class="drops-input"
-                :value="ing.drops"
-                min="0.5"
-                step="0.5"
-                @change="changeDrops(i, $event.target.value)"
-              />
-            </td>
-            <td class="price-cell">{{ ing.oil ? '¥' + oilsStore.pricePerDrop(ing.oil).toFixed(2) : '—' }}</td>
-            <td class="subtotal-cell">{{ ing.oil ? oilsStore.fmtPrice(oilsStore.pricePerDrop(ing.oil) * (ing.drops || 0)) : '—' }}</td>
-            <td><button class="remove-btn" @click="removeIng(i)">×</button></td>
-          </tr>
-        </tbody>
-      </table>
-
-      <!-- Add Ingredient Row -->
-      <div v-if="showAddRow" class="add-ingredient-row">
-        <select v-model="newOil" class="form-control" style="max-width:180px">
-          <option value="">— 选择精油 —</option>
-          <option v-for="name in oilsStore.oilNames" :key="name" :value="name">{{ name }}</option>
-        </select>
-        <input v-model.number="newDrops" type="number" placeholder="滴数" style="width:90px" class="form-control" min="0.5" step="0.5" />
-        <button class="btn btn-primary btn-sm" @click="confirmAdd">确认添加</button>
-        <button class="btn btn-outline btn-sm" @click="showAddRow = false">取消</button>
-      </div>
-
-      <!-- Total Row -->
-      <div class="total-row">
-        <div class="total-label">配方总成本</div>
-        <div class="total-price">{{ totalCost }}</div>
-      </div>
-    </div>
-
-    <!-- Card Preview -->
-    <div class="card-preview-wrapper">
-      <div class="preview-title">📋 配方卡片预览</div>
-      <div ref="cardRef" class="card-export">
-        <div class="card-brand">DOTERRA · 精油配方</div>
-        <div class="card-title">{{ recipe.name }}</div>
-        <div class="card-divider"></div>
-        <div v-if="recipe.note" class="card-note">{{ recipe.note }}</div>
-        <ul class="card-ingredients">
-          <li v-for="(ing, i) in editIngredients" :key="i">
-            <span class="card-oil-name">{{ ing.oil }}</span>
-            <span class="card-oil-drops">{{ ing.drops }} 滴</span>
-            <span class="card-oil-cost">{{ ing.oil ? oilsStore.fmtPrice(oilsStore.pricePerDrop(ing.oil) * (ing.drops || 0)) : '' }}</span>
-          </li>
-        </ul>
-        <div class="card-total">
-          <div class="card-total-label">配方总成本</div>
-          <div class="card-total-price">{{ totalCost }}</div>
+      <!-- Editor View -->
+      <div v-if="viewMode === 'editor'" class="detail-editor-view">
+        <div class="editor-section">
+          <label class="editor-label">配方名称</label>
+          <input v-model="editName" type="text" class="editor-input" />
+        </div>
+
+        <div class="editor-section">
+          <label class="editor-label">备注</label>
+          <textarea v-model="editNote" class="editor-textarea" rows="2"></textarea>
+        </div>
+
+        <div class="editor-section">
+          <label class="editor-label">标签</label>
+          <div class="editor-tags">
+            <span v-for="tag in editTags" :key="tag" class="editor-tag">
+              {{ tag }}
+              <span class="tag-remove" @click="removeTag(tag)">×</span>
+            </span>
+            <button class="tag-add-btn" @click="showTagPicker = true">+ 标签</button>
+          </div>
+        </div>
+
+        <div class="editor-section">
+          <label class="editor-label">成分</label>
+          <table class="editor-table">
+            <thead>
+              <tr>
+                <th>精油</th>
+                <th>滴数</th>
+                <th>成本</th>
+                <th></th>
+              </tr>
+            </thead>
+            <tbody>
+              <tr v-for="(ing, i) in editIngredients" :key="i">
+                <td>
+                  <select v-model="ing.oil" class="editor-select">
+                    <option value="">选择精油</option>
+                    <option v-for="name in oilsStore.oilNames" :key="name" :value="name">{{ name }}</option>
+                  </select>
+                </td>
+                <td>
+                  <input v-model.number="ing.drops" type="number" min="1" class="editor-drops" />
+                </td>
+                <td class="ing-cost">
+                  {{ ing.oil ? oilsStore.fmtPrice(oilsStore.pricePerDrop(ing.oil) * (ing.drops || 0)) : '-' }}
+                </td>
+                <td>
+                  <button class="remove-row-btn" @click="removeIngredient(i)">✕</button>
+                </td>
+              </tr>
+            </tbody>
+          </table>
+          <button class="add-row-btn" @click="addIngredient">+ 添加精油</button>
+        </div>
+
+        <div class="editor-section">
+          <label class="editor-label">容量</label>
+          <div class="volume-controls">
+            <button
+              v-for="(drops, ml) in volumeOptions"
+              :key="ml"
+              class="volume-btn"
+              :class="{ active: selectedVolume === ml }"
+              @click="selectedVolume = ml"
+            >{{ ml }}ml</button>
+          </div>
+        </div>
+
+        <div class="editor-total">
+          总计: {{ editPriceInfo.cost }}
+          <span v-if="editPriceInfo.hasRetail" style="color:#999;font-size:13px;margin-left:8px">
+            零售 {{ editPriceInfo.retail }}
+          </span>
+        </div>
+
+        <div class="editor-actions">
+          <button class="action-btn" @click="$emit('close')">取消</button>
+          <button class="action-btn action-btn-primary" @click="saveRecipe">保存</button>
         </div>
-        <div class="card-footer">制作日期：{{ todayStr }}</div>
       </div>
+
+      <!-- Tag Picker -->
+      <TagPicker
+        v-if="showTagPicker"
+        :name="editName"
+        :current-tags="editTags"
+        :all-tags="recipesStore.allTags"
+        @save="onTagsSaved"
+        @close="showTagPicker = false"
+      />
     </div>
   </div>
 </template>
@@ -96,9 +157,10 @@
 <script setup>
 import { ref, computed, onMounted } from 'vue'
 import html2canvas from 'html2canvas'
-import { useOilsStore } from '../stores/oils'
+import { useOilsStore, VOLUME_DROPS } from '../stores/oils'
 import { useRecipesStore } from '../stores/recipes'
 import { useUiStore } from '../stores/ui'
+import TagPicker from './TagPicker.vue'
 
 const props = defineProps({
   recipeIndex: { type: Number, required: true },
@@ -110,450 +172,465 @@ const oilsStore = useOilsStore()
 const recipesStore = useRecipesStore()
 const ui = useUiStore()
 
+const viewMode = ref('card')
 const cardRef = ref(null)
-const showAddRow = ref(false)
-const newOil = ref('')
-const newDrops = ref(null)
+const showTagPicker = ref(false)
+const selectedVolume = ref('5')
 
+const volumeOptions = VOLUME_DROPS
+
+// Source recipe
 const recipe = computed(() => recipesStore.recipes[props.recipeIndex] || { name: '', ingredients: [], tags: [], note: '' })
+const priceInfo = computed(() => oilsStore.fmtCostWithRetail(recipe.value.ingredients))
 
+// Editable copies
+const editName = ref('')
+const editNote = ref('')
+const editTags = ref([])
 const editIngredients = ref([])
 
+const editPriceInfo = computed(() => oilsStore.fmtCostWithRetail(editIngredients.value.filter(i => i.oil)))
+
 onMounted(() => {
-  editIngredients.value = (recipe.value.ingredients || []).map(i => ({ oil: i.oil, drops: i.drops }))
+  const r = recipe.value
+  editName.value = r.name
+  editNote.value = r.note || ''
+  editTags.value = [...(r.tags || [])]
+  editIngredients.value = (r.ingredients || []).map(i => ({ oil: i.oil, drops: i.drops }))
 })
 
-const totalCost = computed(() => oilsStore.fmtPrice(oilsStore.calcCost(editIngredients.value.filter(i => i.oil))))
-
-const todayStr = new Date().toLocaleDateString('zh-CN')
-
-function changeOil(i, val) {
-  editIngredients.value[i].oil = val
+function addIngredient() {
+  editIngredients.value.push({ oil: '', drops: 1 })
 }
 
-function changeDrops(i, val) {
-  editIngredients.value[i].drops = parseFloat(val) || 0
+function removeIngredient(index) {
+  editIngredients.value.splice(index, 1)
 }
 
-function removeIng(i) {
-  editIngredients.value.splice(i, 1)
+function removeTag(tag) {
+  editTags.value = editTags.value.filter(t => t !== tag)
 }
 
-function confirmAdd() {
-  if (!newOil.value || !newDrops.value || newDrops.value <= 0) {
-    ui.showToast('请选择精油并输入滴数')
+function onTagsSaved(tags) {
+  editTags.value = tags
+  showTagPicker.value = false
+}
+
+async function saveRecipe() {
+  const ingredients = editIngredients.value.filter(i => i.oil && i.drops > 0)
+  if (!editName.value.trim()) {
+    ui.showToast('请输入配方名称')
     return
   }
-  editIngredients.value.push({ oil: newOil.value, drops: newDrops.value })
-  newOil.value = ''
-  newDrops.value = null
-  showAddRow.value = false
+  if (ingredients.length === 0) {
+    ui.showToast('请至少添加一种精油')
+    return
+  }
+
+  try {
+    const payload = {
+      ...recipe.value,
+      name: editName.value.trim(),
+      note: editNote.value.trim(),
+      tags: editTags.value,
+      ingredients,
+    }
+    await recipesStore.saveRecipe(payload)
+    ui.showToast('保存成功')
+    emit('close')
+  } catch (e) {
+    ui.showToast('保存失败: ' + (e?.message || '未知错误'))
+  }
 }
 
-async function exportCard() {
+async function exportImage() {
   if (!cardRef.value) return
   try {
-    const canvas = await html2canvas(cardRef.value, { scale: 3, backgroundColor: null, useCORS: true })
+    const canvas = await html2canvas(cardRef.value, {
+      backgroundColor: '#fff',
+      scale: 2,
+    })
     const link = document.createElement('a')
-    link.download = `${recipe.value.name || '配方'}_配方卡.png`
+    link.download = `${recipe.value.name || '配方'}.png`
     link.href = canvas.toDataURL('image/png')
     link.click()
     ui.showToast('已导出图片')
-  } catch {
+  } catch (e) {
     ui.showToast('导出失败')
   }
 }
 </script>
 
 <style scoped>
-.detail-wrapper {
-  margin-top: 20px;
+.detail-overlay {
+  position: fixed;
+  inset: 0;
+  background: rgba(0, 0, 0, 0.4);
+  z-index: 5500;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: 20px;
 }
 
 .detail-panel {
-  background: white;
-  border-radius: 16px;
-  padding: 28px;
-  box-shadow: 0 4px 20px rgba(90, 60, 30, 0.08);
-  margin-bottom: 24px;
+  background: #fff;
+  border-radius: 18px;
+  width: 520px;
+  max-width: 100%;
+  max-height: 85vh;
+  overflow-y: auto;
+  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.2);
+  position: relative;
 }
 
-.detail-header {
+.detail-mode-tabs {
   display: flex;
-  justify-content: space-between;
-  align-items: flex-start;
-  margin-bottom: 24px;
-  flex-wrap: wrap;
-  gap: 12px;
+  align-items: center;
+  border-bottom: 1px solid #eee;
+  padding: 0 16px;
+  gap: 4px;
 }
 
-.detail-title {
-  font-family: 'Noto Serif SC', serif;
-  font-size: 22px;
-  font-weight: 700;
-  color: #2c2416;
-}
-
-.detail-note {
-  font-size: 13px;
-  color: #9a8570;
-  background: #f0e4c0;
-  border-radius: 8px;
-  padding: 6px 12px;
-  margin-top: 6px;
-  display: inline-block;
-}
-
-.detail-actions {
-  display: flex;
-  gap: 10px;
-  flex-wrap: wrap;
-}
-
-/* Ingredients Table */
-.ingredients-table {
-  width: 100%;
-  border-collapse: collapse;
-  margin-bottom: 20px;
-}
-
-.ingredients-table th {
-  text-align: left;
-  padding: 10px 14px;
-  font-size: 12px;
-  font-weight: 600;
-  color: #9a8570;
-  letter-spacing: 0.5px;
-  border-bottom: 2px solid #e0d4c0;
-}
-
-.ingredients-table td {
-  padding: 12px 14px;
-  border-bottom: 1px solid #e0d4c0;
+.mode-tab {
+  padding: 14px 16px;
   font-size: 14px;
-  vertical-align: middle;
-}
-
-.ingredients-table tr:last-child td {
-  border-bottom: none;
-}
-
-.ingredients-table tr:hover td {
-  background: #eef4ee;
-}
-
-.oil-select {
-  padding: 6px 10px;
-  border: 1.5px solid #e0d4c0;
-  border-radius: 8px;
-  font-size: 13px;
+  font-weight: 500;
+  color: #999;
+  cursor: pointer;
+  border: none;
+  background: none;
+  border-bottom: 2px solid transparent;
   font-family: inherit;
-  background: white;
-  outline: none;
-  max-width: 160px;
+  transition: color 0.2s;
 }
 
-.oil-select:focus {
-  border-color: #7a9e7e;
+.mode-tab.active {
+  color: #4a9d7e;
+  border-bottom-color: #4a9d7e;
 }
 
-.drops-input {
-  width: 70px;
-  padding: 6px 10px;
-  border: 1.5px solid #e0d4c0;
-  border-radius: 8px;
-  font-size: 14px;
-  font-family: inherit;
-  text-align: center;
-  outline: none;
-}
-
-.drops-input:focus {
-  border-color: #7a9e7e;
-}
-
-.price-cell {
-  color: #9a8570;
-  font-size: 13px;
-}
-
-.subtotal-cell {
-  font-weight: 600;
-  color: #5a7d5e;
-}
-
-.remove-btn {
+.detail-close-btn {
+  margin-left: auto;
   background: none;
   border: none;
-  cursor: pointer;
-  color: #c0392b;
   font-size: 18px;
-  padding: 4px 8px;
-  border-radius: 6px;
-  transition: background 0.2s;
+  color: #999;
+  cursor: pointer;
+  padding: 8px;
 }
 
-.remove-btn:hover {
-  background: #fdf0ee;
+.detail-close-btn:hover {
+  color: #333;
 }
 
-/* Add Ingredient Row */
-.add-ingredient-row {
-  display: flex;
-  gap: 10px;
-  align-items: center;
-  margin-top: 12px;
-  flex-wrap: wrap;
+/* Card View */
+.detail-card-view {
+  padding: 20px;
 }
 
-.form-control {
-  padding: 8px 12px;
-  border: 1.5px solid #e0d4c0;
-  border-radius: 8px;
-  font-size: 13px;
-  font-family: inherit;
-  outline: none;
-}
-
-.form-control:focus {
-  border-color: #7a9e7e;
-}
-
-/* Total Row */
-.total-row {
-  background: #eef4ee;
+.export-card {
+  background: #fefdfb;
+  border: 1px solid #eee;
   border-radius: 12px;
-  padding: 16px 20px;
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-  margin-top: 16px;
+  padding: 24px 20px;
 }
 
-.total-label {
-  font-size: 14px;
-  color: #5a4a35;
-  font-weight: 500;
-}
-
-.total-price {
-  font-size: 22px;
+.export-card-name {
+  font-family: 'Noto Serif SC', serif;
+  font-size: 20px;
   font-weight: 700;
-  color: #5a7d5e;
+  color: #3e3a44;
+  margin-bottom: 10px;
 }
 
-/* Card Preview */
-.card-preview-wrapper {
-  margin-top: 20px;
+.export-card-tags {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 6px;
+  margin-bottom: 14px;
 }
 
-.preview-title {
-  font-size: 15px;
-  font-weight: 600;
-  color: #2c2416;
+.export-card-tag {
+  font-size: 11px;
+  padding: 2px 10px;
+  border-radius: 8px;
+  background: #f0ece4;
+  color: #8a7e6b;
+}
+
+.export-card-table {
+  width: 100%;
+  border-collapse: collapse;
+  font-size: 14px;
   margin-bottom: 12px;
 }
 
-.card-export {
-  background: linear-gradient(145deg, #faf7f0 0%, #f5ede0 100%);
-  border-radius: 20px;
-  padding: 36px;
-  font-family: 'Noto Serif SC', serif;
-  max-width: 480px;
-  border: 1px solid #e0ccaa;
-  position: relative;
-  overflow: hidden;
-}
-
-.card-export::before {
-  content: '';
-  position: absolute;
-  top: -40px;
-  right: -40px;
-  width: 180px;
-  height: 180px;
-  background: radial-gradient(circle, rgba(122, 158, 126, 0.15) 0%, transparent 70%);
-  border-radius: 50%;
-}
-
-.card-export::after {
-  content: '';
-  position: absolute;
-  bottom: -30px;
-  left: -30px;
-  width: 140px;
-  height: 140px;
-  background: radial-gradient(circle, rgba(201, 168, 76, 0.12) 0%, transparent 70%);
-  border-radius: 50%;
-}
-
-.card-brand {
-  font-size: 11px;
-  letter-spacing: 3px;
-  color: #7a9e7e;
-  text-transform: uppercase;
-  margin-bottom: 8px;
-  position: relative;
-}
-
-.card-title {
-  font-size: 26px;
-  font-weight: 700;
-  color: #2c2416;
-  margin-bottom: 6px;
-  line-height: 1.3;
-  position: relative;
-}
-
-.card-divider {
-  width: 48px;
-  height: 2px;
-  background: linear-gradient(90deg, #7a9e7e, #c9a84c);
-  border-radius: 2px;
-  margin: 14px 0;
-}
-
-.card-note {
-  font-size: 12px;
-  color: #c4a882;
-  margin-bottom: 18px;
-  position: relative;
-}
-
-.card-ingredients {
-  list-style: none;
-  margin-bottom: 20px;
-  padding: 0;
-  position: relative;
-}
-
-.card-ingredients li {
-  display: flex;
-  align-items: center;
-  padding: 9px 0;
-  border-bottom: 1px solid rgba(180, 150, 100, 0.15);
-  font-size: 14px;
-}
-
-.card-ingredients li:last-child {
-  border-bottom: none;
-}
-
-.card-oil-name {
-  flex: 1;
-  color: #2c2416;
+.export-card-table th {
+  text-align: left;
   font-weight: 500;
-}
-
-.card-oil-drops {
-  width: 60px;
-  text-align: right;
-  color: #5a7d5e;
-  font-size: 13px;
-}
-
-.card-oil-cost {
-  width: 70px;
-  text-align: right;
-  color: #9a8570;
+  color: #999;
+  border-bottom: 1px solid #eee;
+  padding: 8px 6px;
   font-size: 12px;
 }
 
-.card-total {
-  background: linear-gradient(135deg, #7a9e7e, #5a7d5e);
-  border-radius: 12px;
-  padding: 14px 20px;
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-  margin-top: 8px;
-  position: relative;
+.export-card-table td {
+  padding: 7px 6px;
+  color: #3e3a44;
+  border-bottom: 1px solid #f5f5f3;
 }
 
-.card-total-label {
-  color: rgba(255, 255, 255, 0.85);
+.export-card-table tfoot td {
+  border-bottom: none;
+  padding-top: 10px;
+}
+
+.export-card-note {
   font-size: 13px;
-  letter-spacing: 1px;
+  color: #999;
+  margin-top: 8px;
+  line-height: 1.5;
+  white-space: pre-wrap;
 }
 
-.card-total-price {
-  color: white;
-  font-size: 20px;
-  font-weight: 700;
-}
-
-.card-footer {
+.detail-card-actions {
+  display: flex;
+  gap: 10px;
+  justify-content: flex-end;
   margin-top: 16px;
-  text-align: center;
-  font-size: 11px;
-  color: #9a8570;
-  letter-spacing: 1px;
-  position: relative;
 }
 
-/* Buttons */
-.btn {
-  padding: 11px 22px;
+/* Editor View */
+.detail-editor-view {
+  padding: 20px;
+}
+
+.editor-section {
+  margin-bottom: 18px;
+}
+
+.editor-label {
+  display: block;
+  font-size: 13px;
+  font-weight: 500;
+  color: #999;
+  margin-bottom: 6px;
+}
+
+.editor-input {
+  width: 100%;
+  padding: 10px 14px;
+  border: 1.5px solid #d4cfc7;
   border-radius: 10px;
   font-size: 14px;
+  outline: none;
   font-family: inherit;
-  cursor: pointer;
-  border: none;
-  transition: all 0.2s;
-  font-weight: 500;
+  box-sizing: border-box;
 }
 
-.btn-sm {
-  padding: 7px 14px;
+.editor-input:focus {
+  border-color: #4a9d7e;
+}
+
+.editor-textarea {
+  width: 100%;
+  padding: 10px 14px;
+  border: 1.5px solid #d4cfc7;
+  border-radius: 10px;
+  font-size: 14px;
+  outline: none;
+  font-family: inherit;
+  box-sizing: border-box;
+  resize: vertical;
+}
+
+.editor-textarea:focus {
+  border-color: #4a9d7e;
+}
+
+.editor-tags {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 6px;
+  align-items: center;
+}
+
+.editor-tag {
+  font-size: 12px;
+  padding: 4px 10px;
+  border-radius: 10px;
+  background: #4a9d7e;
+  color: #fff;
+  display: inline-flex;
+  align-items: center;
+  gap: 4px;
+}
+
+.tag-remove {
+  cursor: pointer;
+  font-size: 14px;
+  opacity: 0.7;
+}
+
+.tag-remove:hover {
+  opacity: 1;
+}
+
+.tag-add-btn {
+  font-size: 12px;
+  padding: 4px 12px;
+  border-radius: 10px;
+  border: 1.5px dashed #ccc;
+  background: none;
+  color: #999;
+  cursor: pointer;
+  font-family: inherit;
+}
+
+.tag-add-btn:hover {
+  border-color: #4a9d7e;
+  color: #4a9d7e;
+}
+
+.editor-table {
+  width: 100%;
+  border-collapse: collapse;
   font-size: 13px;
 }
 
-.btn-primary {
-  background: #7a9e7e;
-  color: white;
+.editor-table th {
+  text-align: left;
+  font-weight: 500;
+  color: #999;
+  padding: 6px 4px;
+  font-size: 12px;
+  border-bottom: 1px solid #eee;
 }
 
-.btn-primary:hover {
-  background: #5a7d5e;
-  transform: translateY(-1px);
+.editor-table td {
+  padding: 5px 4px;
 }
 
-.btn-gold {
-  background: #c9a84c;
-  color: white;
+.editor-select {
+  width: 100%;
+  padding: 7px 8px;
+  border: 1px solid #ddd;
+  border-radius: 8px;
+  font-size: 13px;
+  font-family: inherit;
+  background: #fff;
 }
 
-.btn-gold:hover {
-  background: #b8973e;
+.editor-drops {
+  width: 60px;
+  padding: 7px 8px;
+  border: 1px solid #ddd;
+  border-radius: 8px;
+  font-size: 13px;
+  text-align: center;
+  font-family: inherit;
 }
 
-.btn-outline {
-  background: transparent;
-  border: 1.5px solid #7a9e7e;
-  color: #5a7d5e;
+.ing-cost {
+  font-size: 12px;
+  color: #4a9d7e;
+  white-space: nowrap;
 }
 
-.btn-outline:hover {
-  background: #eef4ee;
+.remove-row-btn {
+  background: none;
+  border: none;
+  color: #ccc;
+  font-size: 14px;
+  cursor: pointer;
+  padding: 4px;
 }
 
-@media (max-width: 600px) {
-  .detail-panel {
-    padding: 16px;
-  }
+.remove-row-btn:hover {
+  color: #d9534f;
+}
 
-  .detail-header {
-    flex-direction: column;
-  }
+.add-row-btn {
+  margin-top: 8px;
+  background: none;
+  border: 1.5px dashed #ccc;
+  border-radius: 8px;
+  padding: 8px 16px;
+  font-size: 13px;
+  color: #999;
+  cursor: pointer;
+  font-family: inherit;
+  width: 100%;
+}
 
-  .ingredients-table th,
-  .ingredients-table td {
-    padding: 8px 6px;
-    font-size: 12px;
-  }
+.add-row-btn:hover {
+  border-color: #4a9d7e;
+  color: #4a9d7e;
+}
 
-  .card-export {
-    padding: 24px;
-  }
+.volume-controls {
+  display: flex;
+  gap: 8px;
+  flex-wrap: wrap;
+}
+
+.volume-btn {
+  padding: 6px 16px;
+  border: 1.5px solid #d4cfc7;
+  border-radius: 10px;
+  background: #fff;
+  font-size: 13px;
+  cursor: pointer;
+  font-family: inherit;
+  transition: all 0.15s;
+}
+
+.volume-btn.active {
+  background: #4a9d7e;
+  color: #fff;
+  border-color: #4a9d7e;
+}
+
+.editor-total {
+  font-size: 16px;
+  font-weight: 600;
+  color: #4a9d7e;
+  padding: 12px 0;
+  border-top: 1px solid #eee;
+  margin-bottom: 4px;
+}
+
+.editor-actions {
+  display: flex;
+  gap: 10px;
+  justify-content: flex-end;
+}
+
+/* Shared action buttons */
+.action-btn {
+  padding: 9px 22px;
+  border: 1.5px solid #d4cfc7;
+  border-radius: 10px;
+  background: #fff;
+  font-size: 14px;
+  cursor: pointer;
+  font-family: inherit;
+  color: #6b6375;
+}
+
+.action-btn:hover {
+  background: #f8f7f5;
+}
+
+.action-btn-primary {
+  background: linear-gradient(135deg, #7ec6a4 0%, #4a9d7e 100%);
+  color: #fff;
+  border-color: transparent;
+}
+
+.action-btn-primary:hover {
+  opacity: 0.9;
+  background: linear-gradient(135deg, #7ec6a4 0%, #4a9d7e 100%);
 }
 </style>
diff --git a/frontend/src/views/RecipeSearch.vue b/frontend/src/views/RecipeSearch.vue
index d4ede12..a56620c 100644
--- a/frontend/src/views/RecipeSearch.vue
+++ b/frontend/src/views/RecipeSearch.vue
@@ -1,43 +1,121 @@
 <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">
-      <div class="search-label">搜索配方名称或关键词</div>
-      <div class="search-row">
-        <input
-          class="search-input"
-          v-model="searchQuery"
-          placeholder="输入配方名称，如：白发转黑、痘痘、一夜好眠…"
-          @input="onSearch"
+      <input
+        class="search-input"
+        v-model="searchQuery"
+        placeholder="搜索配方名、精油、标签..."
+        @input="onSearch"
+      />
+      <button v-if="searchQuery" class="search-clear-btn" @click="clearSearch">✕</button>
+      <button class="search-btn" @click="onSearch">🔍</button>
+    </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)"
         />
-        <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 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>
 
-    <!-- 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)"
-      />
-      <div v-if="displayedRecipes.length === 0" class="empty-hint">暂无配方</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>
 
-    <!-- Inline Detail Panel -->
+    <!-- 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 -->
     <RecipeDetailOverlay
       v-if="selectedRecipeIndex !== null"
-      ref="detailRef"
       :recipeIndex="selectedRecipeIndex"
       @close="selectedRecipeIndex = null"
     />
@@ -45,11 +123,12 @@
 </template>
 
 <script setup>
-import { ref, computed, nextTick } from 'vue'
+import { ref, computed, onMounted, 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'
 
@@ -59,18 +138,45 @@ const recipeStore = useRecipesStore()
 const ui = useUiStore()
 
 const searchQuery = ref('')
+const selectedCategory = ref(null)
+const categories = ref([])
 const selectedRecipeIndex = ref(null)
-const favFilter = ref(false)
-const detailRef = 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 filteredRecipes = computed(() => {
   let list = recipeStore.recipes
-  if (favFilter.value && auth.isLoggedIn) {
-    list = list.filter(r => recipeStore.isFavorite(r))
+  if (selectedCategory.value) {
+    list = list.filter(r => r.tags && r.tags.includes(selectedCategory.value))
   }
-  if (!searchQuery.value.trim()) return list
+  return list
+})
+
+const fuzzyResults = computed(() => {
+  if (!searchQuery.value.trim()) return []
   const q = searchQuery.value.trim().toLowerCase()
-  return list.filter(r => {
+  return recipeStore.recipes.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))
@@ -78,19 +184,27 @@ const filteredRecipes = computed(() => {
   })
 })
 
-const displayedRecipes = computed(() => filteredRecipes.value)
+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)
+})
 
 function findGlobalIndex(recipe) {
   return recipeStore.recipes.findIndex(r => r._id === recipe._id)
 }
 
-async function selectRecipe(index) {
+function openDetail(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' })
   }
 }
 
@@ -103,12 +217,12 @@ async function handleToggleFav(recipe) {
 }
 
 function onSearch() {
-  // reactive filtering via computed
+  // fuzzyResults computed handles the filtering reactively
 }
 
 function clearSearch() {
   searchQuery.value = ''
-  favFilter.value = false
+  selectedCategory.value = null
 }
 </script>
 
@@ -117,101 +231,228 @@ function clearSearch() {
   padding: 0 12px 24px;
 }
 
-.search-box {
-  background: white;
-  border-radius: 16px;
-  padding: 20px 24px;
-  box-shadow: 0 4px 20px rgba(90, 60, 30, 0.08);
-  margin-bottom: 20px;
+.cat-wrap {
+  position: relative;
+  margin: 0 -12px 20px;
+  overflow: hidden;
 }
 
-.search-label {
-  font-size: 13px;
-  font-weight: 500;
-  color: #9a8570;
-  margin-bottom: 10px;
-}
-
-.search-row {
+.cat-track {
   display: flex;
-  gap: 10px;
+  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;
-  flex-wrap: wrap;
+  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;
+}
+
+.search-box {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  margin-bottom: 16px;
+  background: #f8f7f5;
+  border-radius: 12px;
+  padding: 4px 8px;
+  border: 1.5px solid #e5e4e7;
 }
 
 .search-input {
   flex: 1;
-  min-width: 200px;
-  padding: 11px 16px;
-  border: 1.5px solid #e0d4c0;
-  border-radius: 10px;
-  font-size: 15px;
-  font-family: inherit;
+  border: none;
+  background: transparent;
+  padding: 10px 8px;
+  font-size: 14px;
   outline: none;
-  color: #2c2416;
-  background: white;
-  transition: border-color 0.2s;
-}
-
-.search-input:focus {
-  border-color: #7a9e7e;
+  font-family: inherit;
+  color: #3e3a44;
 }
 
 .search-input::placeholder {
-  color: #c4a882;
+  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;
 }
 
 .recipe-grid {
   display: grid;
-  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
-  gap: 16px;
-  margin-bottom: 24px;
+  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
+  gap: 12px;
+  margin-bottom: 16px;
 }
 
 .empty-hint {
   grid-column: 1 / -1;
   text-align: center;
-  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;
+  color: #b0aab5;
+  font-size: 13px;
+  padding: 24px 0;
 }
 
 @media (max-width: 600px) {
   .recipe-grid {
     grid-template-columns: 1fr;
   }
-
-  .search-box {
-    padding: 14px 16px;
-  }
 }
 </style>