feat: 优化

frontend/app/web-gold/src/views/agents/Agents.vue

@@ -24,18 +24,32 @@
 
           <!-- 分类筛选 -->
           <div class="category-section">
-            <nav class="category-nav">
-              <button
-                v-for="category in categories"
-                :key="category.id"
-                class="category-btn"
-                :class="{ 'category-btn--active': activeCategory === category.id }"
-                @click="handleCategoryChange(category.id)"
-              >
-                <span>{{ category.name }}</span>
-                <span class="category-count" v-if="category.count > 0">{{ category.count }}</span>
-              </button>
-            </nav>
+            <div class="category-wrapper" :class="{ 'is-expanded': isExpanded }">
+              <nav class="category-nav">
+                <button
+                  v-for="category in categories"
+                  :key="category.id"
+                  class="category-btn"
+                  :class="{ 'category-btn--active': activeCategory === category.id }"
+                  @click="handleCategoryChange(category.id)"
+                >
+                  <span>{{ category.name }}</span>
+                  <span class="category-count" v-if="category.count > 0">{{ category.count }}</span>
+                </button>
+              </nav>
+              <!-- 底部遮罩（仅在折叠状态显示） -->
+              <div class="category-mask" v-if="!isExpanded && categories.length > 10"></div>
+            </div>
+
+            <!-- 展开/收起按钮 -->
+            <button 
+              v-if="categories.length > 10" 
+              class="expand-btn" 
+              @click="isExpanded = !isExpanded"
+            >
+              <span>{{ isExpanded ? '收起更多' : '显示更多' }}</span>
+              <component :is="isExpanded ? UpOutlined : DownOutlined" />
+            </button>
           </div>
         </div>
       </div>
@@ -100,7 +114,9 @@ import { ref, computed, onMounted } from 'vue'
 import {
   SearchOutlined,
   RobotOutlined,
-  CloseOutlined
+  CloseOutlined,
+  DownOutlined,
+  UpOutlined
 } from '@ant-design/icons-vue'
 import { message } from 'ant-design-vue'
 import FullWidthLayout from '@/layouts/components/FullWidthLayout.vue'
@@ -113,6 +129,7 @@ const activeCategory = ref('all')
 const searchKeyword = ref('')
 const chatDrawerVisible = ref(false)
 const currentAgent = ref(null)
+const isExpanded = ref(false)
 
 // 智能体列表数据（从 API 获取）
 const agentList = ref([])
@@ -136,6 +153,20 @@ const categories = computed(() => {
     cats.push({ id: name, name, count })
   })
 
+  // Mock data to demonstrate "lots of content"
+  // Only add if we have few real categories, to test the UI
+  if (cats.length < 10) {
+    const mockCategories = [
+      '市场营销', '产品设计', '人力资源', '财务会计', '法律咨询',
+      '客户服务', '项目管理', '数据科学', '网络安全', '云计算',
+      '人工智能', '区块链', '物联网', '虚拟现实', '增强现实',
+      '游戏开发', '移动应用', '前端开发', '后端开发', '全栈开发'
+    ]
+    mockCategories.forEach((name, index) => {
+      cats.push({ id: `mock-${index}`, name, count: Math.floor(Math.random() * 50) + 1 })
+    })
+  }
+
   return cats
 })
 
@@ -346,15 +377,47 @@ onMounted(() => {
   width: 100%;
   padding: 0 20px;
   display: flex;
-  justify-content: center;
+  flex-direction: column;
+  align-items: center;
+}
+
+.category-wrapper {
+  position: relative;
+  width: 100%;
+  max-width: 1000px;
+  // Default state: collapsed (show 1 row approx)
+  max-height: 48px; 
+  overflow: hidden;
+  transition: max-height 0.3s ease-in-out;
   
-  /* Mobile optimization: Keep horizontal scroll on small screens if desired, 
-     but user asked for PC fix. Let's make it responsive. */
+  &.is-expanded {
+    max-height: 240px; // Limit expanded height
+    overflow-y: auto; // Allow scrolling when content exceeds max-height
+  }
+
+  // Scrollbar styling for desktop
+  &::-webkit-scrollbar {
+    width: 6px;
+  }
+  
+  &::-webkit-scrollbar-track {
+    background: transparent;
+  }
+  
+  &::-webkit-scrollbar-thumb {
+    background-color: rgba(148, 163, 184, 0.4);
+    border-radius: 3px;
+    
+    &:hover {
+      background-color: rgba(148, 163, 184, 0.6);
+    }
+  }
+
+  /* Mobile optimization: Keep horizontal scroll on small screens */
   @media (max-width: 640px) {
-    display: block;
+    max-height: none;
     overflow-x: auto;
     white-space: nowrap;
-    justify-content: flex-start;
     mask-image: linear-gradient(to right, transparent, black 20px, black 90%, transparent);
     -webkit-mask-image: linear-gradient(to right, transparent, black 20px, black 90%, transparent);
 
@@ -372,16 +435,51 @@ onMounted(() => {
   justify-content: center;
   flex-wrap: wrap;
   gap: 12px;
-  max-width: 1000px;
-  margin: 0 auto;
-  padding: 4px 20px;
+  padding: 4px 0; // Removed horizontal padding to fit wrapper
+  width: 100%;
 
   @media (max-width: 640px) {
     display: inline-flex;
     flex-wrap: nowrap;
     width: max-content;
     justify-content: flex-start;
-    margin: 0;
+    padding: 4px 20px; // Add padding back for mobile scroll
+  }
+}
+
+.category-mask {
+  position: absolute;
+  bottom: 0;
+  left: 0;
+  width: 100%;
+  height: 24px;
+  background: linear-gradient(to bottom, transparent, #F8FAFC);
+  pointer-events: none;
+  
+  @media (max-width: 640px) {
+    display: none;
+  }
+}
+
+.expand-btn {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  margin-top: 12px;
+  background: transparent;
+  border: none;
+  font-size: 13px;
+  color: #64748B;
+  cursor: pointer;
+  transition: color 0.2s;
+  padding: 4px 12px;
+
+  &:hover {
+    color: #334155;
+  }
+  
+  @media (max-width: 640px) {
+    display: none;
   }
 }