From ab54b0137db61566b87da85455153b3b4fbc665d Mon Sep 17 00:00:00 2001
From: bwstudio <fenghuo@hotmail.com>
Date: Sat, 13 Jun 2026 14:43:11 +0800
Subject: [PATCH] =?UTF-8?q?style:=20Sidebar=20=E7=B1=BB=E5=9E=8B=E5=88=97?=
 =?UTF-8?q?=E8=A1=A8=E6=94=B9=E4=B8=BA=E8=83=B6=E5=9B=8A=E6=A0=87=E7=AD=BE?=
 =?UTF-8?q?=E6=A0=B7=E5=BC=8F=EF=BC=8C=E6=96=B0=E5=A2=9E=E4=BA=BA=E7=BE=A4?=
 =?UTF-8?q?=E5=88=86=E7=B1=BB?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 web/src/App.vue                   |  7 ++-
 web/src/components/AppSidebar.vue | 96 +++++++++++++++++++++----------
 2 files changed, 72 insertions(+), 31 deletions(-)

diff --git a/web/src/App.vue b/web/src/App.vue
index 4cd981a..38356be 100644
--- a/web/src/App.vue
+++ b/web/src/App.vue
@@ -27,8 +27,11 @@
       <div class="left-sidebar">
         <AppSidebar
           :types="allTypes"
-          :current-type="null"
-          @selectType="handleSelectType"
+          :crowds="allCrowds"
+          :current-type-ids="filterTypeIds"
+          :current-crowd-ids="filterCrowdIds"
+          @selectType="(id) => handleSelectType(id)"
+          @selectCrowd="(id) => handleSelectCrowd(id)"
           @random="handleRandom"
         />
       </div>
diff --git a/web/src/components/AppSidebar.vue b/web/src/components/AppSidebar.vue
index 3eefee0..6503075 100644
--- a/web/src/components/AppSidebar.vue
+++ b/web/src/components/AppSidebar.vue
@@ -23,17 +23,31 @@
       </router-link>
     </nav>
 
-    <!-- 分类列表 -->
+    <!-- 类型标签 -->
     <div class="sidebar-categories">
-      <div class="nav-label">分类</div>
-      <div
-        v-for="type in types"
-        :key="type.id"
-        class="cat-item"
-        :class="{ active: currentType === type.id }"
-        @click="$emit('selectType', type.id)"
-      >
-        {{ type.name }}
+      <div class="nav-label">类型分类</div>
+      <div class="tag-group">
+        <span
+          v-for="t in types"
+          :key="t.id"
+          class="tag tag-type"
+          :class="{ active: currentTypeIds.includes(t.id) }"
+          @click="$emit('selectType', t.id)"
+        >{{ t.name }}</span>
+      </div>
+    </div>
+
+    <!-- 人群标签 -->
+    <div class="sidebar-categories">
+      <div class="nav-label">人群分类</div>
+      <div class="tag-group">
+        <span
+          v-for="c in crowds"
+          :key="c.id"
+          class="tag tag-crowd"
+          :class="{ active: currentCrowdIds.includes(c.id) }"
+          @click="$emit('selectCrowd', c.id)"
+        >{{ c.name }}</span>
       </div>
     </div>
 
@@ -49,10 +63,12 @@
 <script setup>
 defineProps({
   types: { type: Array, default: () => [] },
-  currentType: { type: Number, default: null }
+  crowds: { type: Array, default: () => [] },
+  currentTypeIds: { type: Array, default: () => [] },
+  currentCrowdIds: { type: Array, default: () => [] }
 })
 
-defineEmits(['selectType', 'random'])
+defineEmits(['selectType', 'selectCrowd', 'random'])
 </script>
 
 <style scoped>
@@ -60,12 +76,12 @@ defineEmits(['selectType', 'random'])
   width: var(--sidebar-width);
   min-width: var(--sidebar-width);
   min-height: 100vh;
+  height: 100%;
   background: linear-gradient(180deg, #1a1a2e 0%, #16213e 100%);
   display: flex;
   flex-direction: column;
   position: sticky;
   top: 0;
-  height: 100vh;
   overflow-y: auto;
   flex-shrink: 0;
 }
@@ -123,33 +139,55 @@ defineEmits(['selectType', 'random'])
 }
 .nav-icon { font-size: 16px; }
 
-/* 分类 */
+/* 分类区域 */
 .sidebar-categories {
-  padding: 8px 12px;
-  flex: 1;
+  padding: 8px 12px 4px;
 }
-.cat-item {
-  padding: 8px 12px;
-  border-radius: 8px;
-  color: rgba(255,255,255,0.6);
-  font-size: 13px;
+
+/* 标签组（胶囊样式，仿 Rightbar） */
+.tag-group {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 6px;
+  padding: 0 8px 4px;
+}
+.tag {
+  padding: 4px 12px;
+  border-radius: 20px;
+  font-size: 12px;
   cursor: pointer;
   transition: all 0.2s;
-  margin-bottom: 2px;
+  font-weight: 500;
 }
-.cat-item:hover {
-  background: rgba(255,255,255,0.06);
-  color: white;
+.tag-type {
+  background: rgba(255,107,0,0.15);
+  color: #FF8C30;
 }
-.cat-item.active {
-  background: rgba(255,107,0,0.2);
-  color: var(--primary-light, #FF8C30);
+.tag-type:hover {
+  background: rgba(255,107,0,0.3);
+  color: #FFA050;
+}
+.tag-type.active {
+  background: var(--primary, #FF6B00);
+  color: #fff;
+}
+.tag-crowd {
+  background: rgba(33,150,243,0.15);
+  color: #64B5F6;
+}
+.tag-crowd:hover {
+  background: rgba(33,150,243,0.3);
+  color: #90CAF9;
+}
+.tag-crowd.active {
+  background: #2196F3;
+  color: #fff;
 }
 
 /* 底部随机 */
 .sidebar-footer {
   padding: 16px;
-  border-top: 1px solid rgba(255,255,255,0.06);
+  margin-top: auto;
 }
 .random-btn {
   width: 100%;