UI: 管理配方顶部布局重新设计

- 搜索框独占一行，宽度拉满
- 按钮改为圆角药片(chip)样式：新增 | 全选(数量) | 标签 | 批量 | 取消
- 选中时绿色高亮，全选显示数量badge
- 整体紧凑美观

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>

frontend/src/views/RecipeManager.vue

@@ -28,31 +28,23 @@
       </div>
     </div>
 
-    <!-- Toolbar -->
+    <!-- Search bar -->
-    <div class="toolbar-row">
+    <div v-if="auth.canEdit" class="search-bar">
-      <template v-if="auth.canEdit">
+      <div class="search-box">
-        <div class="search-box search-compact">
+        <input class="search-input" v-model="manageSearch" placeholder="搜索配方名、精油、标签..." />
-          <input class="search-input" v-model="manageSearch" placeholder="搜索..." />
         <button v-if="manageSearch" class="search-clear-btn" @click="manageSearch = ''">✕</button>
       </div>
-      </template>
+    </div>
-      <button class="btn-outline btn-sm" @click="showAddOverlay = true">新增</button>
+
-      <button
+    <!-- Action buttons -->
-        class="btn-sm"
+    <div class="action-bar">
-        :class="isAllSelected ? 'btn-select-active' : 'btn-outline'"
+      <button class="action-chip" @click="showAddOverlay = true">新增</button>
-        @click="toggleSelectAll"
+      <button class="action-chip" :class="{ active: isAllSelected }" @click="toggleSelectAll">
-      >全选</button>
+        全选<span v-if="totalSelected > 0" class="chip-count">{{ totalSelected }}</span>
-      <span v-if="totalSelected > 0" class="select-count">共{{ totalSelected }}个</span>
-      <button class="tag-toggle-btn" @click="showTagFilter = !showTagFilter">
-        标签 {{ showTagFilter ? '▾' : '▸' }}
       </button>
-      <!-- Batch -->
+      <button class="action-chip" :class="{ active: showTagFilter }" @click="showTagFilter = !showTagFilter">标签</button>
-      <template v-if="totalSelected > 0">
+      <button v-if="totalSelected > 0" class="action-chip" :class="{ active: showBatchMenu }" @click="showBatchMenu = !showBatchMenu">批量</button>
-        <button class="tag-toggle-btn" @click="showBatchMenu = !showBatchMenu">
+      <button v-if="totalSelected > 0" class="action-chip cancel" @click="clearSelection">取消</button>
-          批量操作 {{ showBatchMenu ? '▾' : '▸' }}
-        </button>
-        <button class="btn-sm btn-outline" @click="clearSelection">取消</button>
-      </template>
       <button v-if="auth.isAdmin" class="export-btn" @click="exportExcel" title="导出Excel">📥</button>
     </div>
     <div v-if="showTagFilter" class="tag-list-bar">
@@ -1812,15 +1804,32 @@ watch(() => recipeStore.recipes, () => {
 .drops-sm:focus { border-color: #7ec6a4; }
 .select-sm { padding: 3px 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 {
+.search-bar { margin-bottom: 8px; }
+.search-bar .search-box {
+  display: flex; align-items: center; background: #f8f7f5; border: 1.5px solid #e5e4e7;
+  border-radius: 10px; padding: 2px 10px;
+}
+.search-bar .search-input {
+  flex: 1; border: none; background: transparent; padding: 8px 4px; font-size: 14px;
+  outline: none; font-family: inherit;
+}
+
+.action-bar {
   display: flex; gap: 6px; align-items: center; flex-wrap: wrap; margin-bottom: 10px;
 }
-.search-compact {
+.action-chip {
-  flex: 0 1 160px; min-width: 100px; padding: 2px 8px;
+  padding: 5px 14px; border: 1.5px solid #e5e4e7; border-radius: 20px; background: #fff;
-  background: #f8f7f5; border: 1.5px solid #e5e4e7; border-radius: 10px;
+  font-size: 13px; cursor: pointer; font-family: inherit; color: #6b6375; white-space: nowrap;
-  display: flex; align-items: center;
+  transition: all 0.15s;
+}
+.action-chip:hover { border-color: #7ec6a4; color: #4a9d7e; }
+.action-chip.active { background: #e8f5e9; border-color: #7ec6a4; color: #2e7d5a; font-weight: 600; }
+.action-chip.cancel { color: #999; }
+.chip-count {
+  display: inline-block; background: #4a9d7e; color: #fff; font-size: 11px;
+  min-width: 16px; height: 16px; line-height: 16px; text-align: center;
+  border-radius: 8px; margin-left: 4px; padding: 0 4px;
 }
-.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;