From b6b112e9cb58cfdcfcd7dcab232b028535fe031d Mon Sep 17 00:00:00 2001
From: Hera Zhao <hera@euphon.net>
Date: Fri, 10 Apr 2026 14:35:56 +0000
Subject: [PATCH] =?UTF-8?q?UI:=20=E6=A0=87=E7=AD=BE=E5=B1=95=E5=BC=80?=
 =?UTF-8?q?=E5=88=B0=E4=B8=8B=E4=B8=80=E8=A1=8C=EF=BC=8C=E5=85=A8=E9=80=89?=
 =?UTF-8?q?=E6=98=BE=E7=A4=BA=E6=95=B0=E9=87=8F?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- 标签点击后在下一行展开/收起
- 全选后右侧显示"共X个"
- 工具栏布局：新增 | 全选 共X个 | 标签▾ | 批量 | 导出

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
---
 frontend/src/views/RecipeManager.vue | 42 +++++++++++++++++-----------
 1 file changed, 25 insertions(+), 17 deletions(-)

diff --git a/frontend/src/views/RecipeManager.vue b/frontend/src/views/RecipeManager.vue
index d0e7fcf..a152b0d 100644
--- a/frontend/src/views/RecipeManager.vue
+++ b/frontend/src/views/RecipeManager.vue
@@ -25,19 +25,19 @@
     </template>
 
     <!-- Row 2: Add + Select + Tags + Batch + Export -->
-    <div class="tag-filter-bar">
+    <div class="toolbar-row">
       <button v-if="auth.canEdit" class="btn-outline btn-sm" @click="showAddOverlay = true">新增</button>
       <button
         class="btn-sm"
-        :class="selectedDiaryIds.size > 0 ? 'btn-select-active' : 'btn-outline'"
+        :class="totalSelected > 0 ? 'btn-select-active' : 'btn-outline'"
         @click="toggleSelectAllDiary"
       >全选</button>
+      <span v-if="totalSelected > 0" class="select-count">共{{ totalSelected }}个</span>
       <button class="tag-toggle-btn" @click="showTagFilter = !showTagFilter">
         标签 {{ showTagFilter ? '▾' : '▸' }}
       </button>
-      <!-- Batch (inline when selected) -->
-      <template v-if="selectedIds.size > 0 || selectedDiaryIds.size > 0">
-        <span class="batch-count">{{ selectedIds.size + selectedDiaryIds.size }}项</span>
+      <!-- Batch -->
+      <template v-if="totalSelected > 0">
         <select v-model="batchAction" class="batch-select" @change="onBatchSelect">
           <option value="">批量操作...</option>
           <option value="tag">打标签</option>
@@ -47,18 +47,18 @@
         <button class="btn-sm btn-outline" @click="clearSelection">取消</button>
       </template>
       <button v-if="auth.isAdmin" class="export-btn" @click="exportExcel" title="导出Excel">📥</button>
-      <div v-if="showTagFilter" class="tag-list">
-        <span
-          v-for="tag in recipeStore.allTags"
-          :key="tag"
-          class="tag-chip"
-          :class="{ active: selectedTags.includes(tag) }"
-          @click="toggleTag(tag)"
-        >{{ tag }}<span v-if="auth.isAdmin" class="tag-delete" @click.stop="deleteGlobalTag(tag)">×</span></span>
-        <div v-if="auth.canEdit" class="tag-add-row">
-          <input v-model="globalNewTag" class="tag-add-input" placeholder="新标签..." @keydown.enter="addGlobalTag" />
-          <button class="tag-add-btn" @click="addGlobalTag" :disabled="!globalNewTag.trim()">+</button>
-        </div>
+    </div>
+    <div v-if="showTagFilter" class="tag-list-bar">
+      <span
+        v-for="tag in recipeStore.allTags"
+        :key="tag"
+        class="tag-chip"
+        :class="{ active: selectedTags.includes(tag) }"
+        @click="toggleTag(tag)"
+      >{{ tag }}<span v-if="auth.isAdmin" class="tag-delete" @click.stop="deleteGlobalTag(tag)">×</span></span>
+      <div v-if="auth.canEdit" class="tag-add-row">
+        <input v-model="globalNewTag" class="tag-add-input" placeholder="新标签..." @keydown.enter="addGlobalTag" />
+        <button class="tag-add-btn" @click="addGlobalTag" :disabled="!globalNewTag.trim()">+</button>
       </div>
     </div>
 
@@ -959,6 +959,7 @@ async function saveAllParsed() {
 const sharedCount = ref({ adopted: 0, total: 0 })
 const previewRecipeIndex = ref(null)
 const batchAction = ref('')
+const totalSelected = computed(() => selectedIds.size + selectedDiaryIds.size)
 const showMyRecipes = ref(false)
 const showPublicRecipes = ref(false)
 const showReviewHistory = ref(false)
@@ -1588,6 +1589,13 @@ watch(() => recipeStore.recipes, () => {
 .drops-sm:focus { border-color: #7ec6a4; }
 .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;
+}
+.select-count { font-size: 12px; color: #4a9d7e; font-weight: 500; white-space: nowrap; }
+.tag-list-bar {
+  display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 10px; padding: 8px 0;
+}
 .tag-delete { margin-left: 4px; cursor: pointer; font-size: 12px; color: #ccc; }
 .tag-delete:hover { color: #c0392b; }
 .tag-add-row { display: flex; gap: 4px; align-items: center; width: 100%; margin-top: 4px; }