style: Sidebar 类型列表改为胶囊标签样式，新增人群分类

web/src/App.vue

@@ -27,8 +27,11 @@
       <div class="left-sidebar">
         <AppSidebar
           :types="allTypes"
-          :current-type="null"
+          :crowds="allCrowds"
-          @selectType="handleSelectType"
+          :current-type-ids="filterTypeIds"
+          :current-crowd-ids="filterCrowdIds"
+          @selectType="(id) => handleSelectType(id)"
+          @selectCrowd="(id) => handleSelectCrowd(id)"
           @random="handleRandom"
         />
       </div>

web/src/components/AppSidebar.vue

@@ -23,17 +23,31 @@
       </router-link>
     </nav>
 
-    <!-- 分类列表 -->
+    <!-- 类型标签 -->
     <div class="sidebar-categories">
-      <div class="nav-label">分类</div>
+      <div class="nav-label">类型分类</div>
-      <div
+      <div class="tag-group">
-        v-for="type in types"
+        <span
-        :key="type.id"
+          v-for="t in types"
-        class="cat-item"
+          :key="t.id"
-        :class="{ active: currentType === type.id }"
+          class="tag tag-type"
-        @click="$emit('selectType', type.id)"
+          :class="{ active: currentTypeIds.includes(t.id) }"
-      >
+          @click="$emit('selectType', t.id)"
-        {{ type.name }}
+        >{{ 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;
+  padding: 8px 12px 4px;
-  flex: 1;
 }
-.cat-item {
+
-  padding: 8px 12px;
+/* 标签组（胶囊样式，仿 Rightbar） */
-  border-radius: 8px;
+.tag-group {
-  color: rgba(255,255,255,0.6);
+  display: flex;
-  font-size: 13px;
+  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 {
+.tag-type {
-  background: rgba(255,255,255,0.06);
+  background: rgba(255,107,0,0.15);
-  color: white;
+  color: #FF8C30;
 }
-.cat-item.active {
+.tag-type:hover {
-  background: rgba(255,107,0,0.2);
+  background: rgba(255,107,0,0.3);
-  color: var(--primary-light, #FF8C30);
+  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%;