From eae2b5dfee2283f48f80e2fc7b4d79172010a51a Mon Sep 17 00:00:00 2001
From: Hera Zhao <hera@euphon.net>
Date: Fri, 10 Apr 2026 16:07:56 +0000
Subject: [PATCH] =?UTF-8?q?UI:=20=E7=AE=A1=E7=90=86=E9=85=8D=E6=96=B9?=
 =?UTF-8?q?=E7=95=8C=E9=9D=A2=E4=BC=98=E5=8C=96?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- 取消改为预览按钮 + ✕关闭
- 去掉配方行的owner显示和铅笔编辑按钮（点击行即编辑）
- 搜索框和新增按钮合并到一行，紧凑排版
- 参考比例显示"约为X滴，现在为Y滴"（实际数据）

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
---
 .../src/components/RecipeDetailOverlay.vue    |  2 +-
 frontend/src/views/RecipeManager.vue          | 42 +++++++++++--------
 2 files changed, 26 insertions(+), 18 deletions(-)

diff --git a/frontend/src/components/RecipeDetailOverlay.vue b/frontend/src/components/RecipeDetailOverlay.vue
index 7745bd8..7aa2024 100644
--- a/frontend/src/components/RecipeDetailOverlay.vue
+++ b/frontend/src/components/RecipeDetailOverlay.vue
@@ -165,7 +165,7 @@
             <select v-model.number="dilutionRatio" class="editor-select" style="width:60px">
               <option v-for="n in [3,4,5,6,7,8,9,10,12,15,20]" :key="n" :value="n">{{ n }}</option>
             </select>
-            <span class="ratio-hint">纯精油总数约为 {{ editorSuggestedEo }} 滴</span>
+            <span class="ratio-hint">纯精油总数约为 {{ editorSuggestedEo }} 滴，现在为 {{ editorEoDrops }} 滴</span>
           </div>
         </div>
 
diff --git a/frontend/src/views/RecipeManager.vue b/frontend/src/views/RecipeManager.vue
index 58c110d..d208388 100644
--- a/frontend/src/views/RecipeManager.vue
+++ b/frontend/src/views/RecipeManager.vue
@@ -22,18 +22,14 @@
       </div>
     </div>
 
-    <!-- Row 1: Search (editor+) -->
-    <template v-if="auth.canEdit">
-      <div class="manage-toolbar">
-        <div class="search-box">
-          <input class="search-input" v-model="manageSearch" placeholder="搜索配方..." />
+    <!-- Toolbar -->
+    <div class="toolbar-row">
+      <template v-if="auth.canEdit">
+        <div class="search-box search-compact">
+          <input class="search-input" v-model="manageSearch" placeholder="搜索..." />
           <button v-if="manageSearch" class="search-clear-btn" @click="manageSearch = ''">✕</button>
         </div>
-      </div>
-    </template>
-
-    <!-- Row 2: Add + Select + Tags + Batch + Export -->
-    <div class="toolbar-row">
+      </template>
       <button class="btn-outline btn-sm" @click="showAddOverlay = true">新增</button>
       <button
         class="btn-sm"
@@ -123,7 +119,6 @@
           />
           <div class="row-info" @click="editDiaryRecipe(d)">
             <span class="row-name">{{ d.name }}</span>
-            <span class="row-owner">{{ auth.user?.display_name || auth.user?.username }}</span>
             <span class="row-tags">
               <span v-for="t in (d.tags || [])" :key="t" class="mini-tag">{{ t }}</span>
             </span>
@@ -133,7 +128,6 @@
           </div>
           <div class="row-actions">
             <button v-if="getDiaryShareStatus(d) !== 'shared'" class="btn-icon" @click="shareDiaryToPublic(d)" title="共享到公共配方库">📤</button>
-            <button class="btn-icon" @click="editDiaryRecipe(d)" title="编辑">✏️</button>
             <button class="btn-icon" @click="removeDiaryRecipe(d)" title="删除">🗑️</button>
           </div>
         </div>
@@ -164,14 +158,12 @@
           />
           <div class="row-info" @click="editRecipe(r)">
             <span class="row-name">{{ r.name }}</span>
-            <span class="row-owner">{{ r._owner_name }}</span>
             <span class="row-tags">
               <span v-for="t in r.tags" :key="t" class="mini-tag">{{ t }}</span>
             </span>
             <span class="row-cost">{{ oils.fmtPrice(oils.calcCost(r.ingredients)) }}</span>
           </div>
           <div class="row-actions" v-if="auth.canEditRecipe(r)">
-            <button class="btn-icon" @click="editRecipe(r)" title="编辑">✏️</button>
             <button class="btn-icon" @click="removeRecipe(r)" title="删除">🗑️</button>
           </div>
         </div>
@@ -236,7 +228,8 @@
           </div>
           <div class="editor-header-actions">
             <button class="action-btn action-btn-primary action-btn-sm" @click="saveCurrentRecipe">💾 保存</button>
-            <button class="action-btn action-btn-sm" @click="closeOverlay">✕ 取消</button>
+            <button class="action-btn action-btn-sm" @click="previewRecipe">👁 预览</button>
+            <button class="detail-close-btn" @click="closeOverlay">✕</button>
           </div>
         </div>
 
@@ -261,7 +254,7 @@
             <select v-model.number="formDilution" class="select-sm">
               <option v-for="n in [3,4,5,6,7,8,9,10,12,15,20]" :key="n" :value="n">{{ n }}</option>
             </select>
-            <span class="ratio-hint">纯精油总数约为 {{ suggestedEoDrops }} 滴</span>
+            <span class="ratio-hint">纯精油总数约为 {{ suggestedEoDrops }} 滴，现在为 {{ eoTotalDrops }} 滴</span>
           </div>
         </div>
 
@@ -621,6 +614,11 @@ async function applyBatchTags() {
   clearSelection()
 }
 
+function previewRecipe() {
+  // TODO: generate card preview
+  ui.showToast('预览功能开发中')
+}
+
 function doBatch(action) {
   showBatchMenu.value = false
   executeBatchAction(action)
@@ -1723,7 +1721,17 @@ watch(() => recipeStore.recipes, () => {
 .select-sm { padding: 4px 6px; border: 1.5px solid #d4cfc7; border-radius: 6px; font-size: 12px; font-family: inherit; background: #fff; width: auto; }
 .btn-select-active { background: #e8f5e9; color: #2e7d5a; border: 1.5px solid #7ec6a4; border-radius: 10px; padding: 7px 14px; font-size: 13px; cursor: pointer; font-family: inherit; font-weight: 600; }
 .toolbar-row {
-  display: flex; gap: 8px; align-items: center; flex-wrap: wrap; margin-bottom: 8px;
+  display: flex; gap: 6px; align-items: center; flex-wrap: wrap; margin-bottom: 10px;
+}
+.search-compact {
+  flex: 0 1 160px; min-width: 100px; padding: 2px 8px;
+  background: #f8f7f5; border: 1.5px solid #e5e4e7; border-radius: 10px;
+  display: flex; align-items: center;
+}
+.search-compact .search-input { border: none; background: transparent; padding: 6px 4px; font-size: 13px; outline: none; width: 100%; font-family: inherit; }
+.detail-close-btn {
+  border: none; background: #f0eeeb; width: 26px; height: 26px; border-radius: 50%;
+  cursor: pointer; font-size: 13px; display: flex; align-items: center; justify-content: center; color: #6b6375;
 }
 .select-count { font-size: 12px; color: #4a9d7e; font-weight: 500; white-space: nowrap; }
 .batch-menu { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 8px; }