From a15d738cf4a801d126d7f3bff1d7a87a92a2f678 Mon Sep 17 00:00:00 2001
From: cnbugs <cnbugs@cnbugs.com>
Date: Sat, 18 Jul 2026 19:44:16 +0800
Subject: [PATCH] =?UTF-8?q?feat:=20=E4=BE=A7=E8=BE=B9=E6=A0=8F=E5=88=86?=
 =?UTF-8?q?=E7=B1=BB=E6=8A=98=E5=8F=A0=E5=8A=9F=E8=83=BD?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- 点击分类标题可展开/折叠
- 显示每个分类的组件数量徽标
- 箭头指示器随状态旋转
- 切换组件时自动展开对应分类
- 搜索时自动展开所有匹配分类
- 底部显示组件总数
---
 src/components/Sidebar.vue | 149 ++++++++++++++++++++++++++++++++-----
 1 file changed, 132 insertions(+), 17 deletions(-)

diff --git a/src/components/Sidebar.vue b/src/components/Sidebar.vue
index fe60d11..9f95a8c 100644
--- a/src/components/Sidebar.vue
+++ b/src/components/Sidebar.vue
@@ -20,24 +20,38 @@
 
     <div class="nav-list">
       <template v-for="cat in filteredCategories" :key="cat.name">
-        <div class="nav-category">
-          <el-icon><component :is="cat.icon" /></el-icon>
-          <span>{{ cat.name }}</span>
-        </div>
         <div
-          v-for="itemId in cat.items"
-          :key="itemId"
-          class="nav-item"
-          :class="{ active: modelValue === itemId }"
-          @click="$emit('update:modelValue', itemId)"
+          class="nav-category"
+          :class="{ collapsed: !isExpanded(cat.name) }"
+          @click="toggle(cat.name)"
         >
-          <el-icon><component :is="schemas[itemId].icon" /></el-icon>
-          <div class="nav-item-info">
-            <span class="nav-item-name">{{ schemas[itemId].name }}</span>
-            <span class="nav-item-desc">{{ schemas[itemId].description }}</span>
+          <div class="nav-category-left">
+            <el-icon><component :is="cat.icon" /></el-icon>
+            <span>{{ cat.name }}</span>
+            <span class="nav-category-count">{{ cat.items.length }}</span>
           </div>
-          <el-tag size="small" type="info">{{ schemas[itemId].format }}</el-tag>
+          <el-icon class="nav-category-arrow" :class="{ open: isExpanded(cat.name) }">
+            <ArrowRight />
+          </el-icon>
         </div>
+        <transition name="slide">
+          <div v-show="isExpanded(cat.name)" class="nav-category-items">
+            <div
+              v-for="itemId in cat.items"
+              :key="itemId"
+              class="nav-item"
+              :class="{ active: modelValue === itemId }"
+              @click="$emit('update:modelValue', itemId)"
+            >
+              <el-icon><component :is="schemas[itemId].icon" /></el-icon>
+              <div class="nav-item-info">
+                <span class="nav-item-name">{{ schemas[itemId].name }}</span>
+                <span class="nav-item-desc">{{ schemas[itemId].description }}</span>
+              </div>
+              <el-tag size="small" type="info">{{ schemas[itemId].format }}</el-tag>
+            </div>
+          </div>
+        </transition>
       </template>
 
       <div v-if="filteredCategories.length === 0" class="no-results">
@@ -46,13 +60,14 @@
     </div>
 
     <div class="sidebar-footer">
-      <el-text size="small" type="info">v1.0.0 · 纯前端生成</el-text>
+      <el-text size="small" type="info">v1.0.0 · 纯前端生成 · 26 个组件</el-text>
     </div>
   </div>
 </template>
 
 <script setup>
-import { ref, computed } from 'vue'
+import { ref, computed, watch } from 'vue'
+import { ArrowRight } from '@element-plus/icons-vue'
 import { schemas, categories } from '../schemas'
 
 const props = defineProps({
@@ -63,6 +78,42 @@ defineEmits(['update:modelValue'])
 
 const searchQuery = ref('')
 
+// Track which categories are expanded
+const expandedSet = ref(new Set())
+
+// Initialize: expand all categories, or auto-expand the one containing active item
+function initExpanded() {
+  const activeCat = categories.find(cat => cat.items.includes(props.modelValue))
+  if (activeCat) {
+    expandedSet.value = new Set([activeCat.name])
+  } else {
+    expandedSet.value = new Set(categories.map(c => c.name))
+  }
+}
+initExpanded()
+
+// When active item changes, auto-expand its category
+watch(() => props.modelValue, (val) => {
+  const cat = categories.find(c => c.items.includes(val))
+  if (cat && !expandedSet.value.has(cat.name)) {
+    expandedSet.value.add(cat.name)
+  }
+})
+
+function isExpanded(name) {
+  return expandedSet.value.has(name)
+}
+
+function toggle(name) {
+  const s = new Set(expandedSet.value)
+  if (s.has(name)) {
+    s.delete(name)
+  } else {
+    s.add(name)
+  }
+  expandedSet.value = s
+}
+
 const filteredCategories = computed(() => {
   const q = searchQuery.value.toLowerCase().trim()
   if (!q) return categories
@@ -82,6 +133,13 @@ const filteredCategories = computed(() => {
     }))
     .filter((cat) => cat.items.length > 0)
 })
+
+// When searching, auto-expand all matching categories
+watch(searchQuery, (q) => {
+  if (q.trim()) {
+    expandedSet.value = new Set(filteredCategories.value.map(c => c.name))
+  }
+})
 </script>
 
 <style scoped>
@@ -157,18 +215,75 @@ const filteredCategories = computed(() => {
   border-radius: 2px;
 }
 
+/* Category header — clickable */
 .nav-category {
   display: flex;
   align-items: center;
-  gap: 8px;
+  justify-content: space-between;
   padding: 10px 8px 4px;
   font-size: 11px;
   font-weight: 600;
   text-transform: uppercase;
   letter-spacing: 0.5px;
   color: #666;
+  cursor: pointer;
+  user-select: none;
+  transition: color 0.2s;
+  border-radius: 6px;
 }
 
+.nav-category:hover {
+  color: #999;
+}
+
+.nav-category-left {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+}
+
+.nav-category-count {
+  font-size: 10px;
+  background: rgba(102, 126, 234, 0.2);
+  color: #667eea;
+  padding: 1px 6px;
+  border-radius: 10px;
+  font-weight: 700;
+}
+
+.nav-category-arrow {
+  font-size: 12px;
+  transition: transform 0.25s ease;
+  color: #555;
+}
+
+.nav-category-arrow.open {
+  transform: rotate(90deg);
+}
+
+/* Slide transition */
+.nav-category-items {
+  overflow: hidden;
+}
+
+.slide-enter-active,
+.slide-leave-active {
+  transition: all 0.25s ease;
+}
+
+.slide-enter-from,
+.slide-leave-to {
+  opacity: 0;
+  max-height: 0;
+}
+
+.slide-enter-to,
+.slide-leave-from {
+  opacity: 1;
+  max-height: 1000px;
+}
+
+/* Nav item */
 .nav-item {
   display: flex;
   align-items: center;