feat: 优化

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

@@ -70,9 +70,9 @@
                   <!-- 描述 -->
                   <p class="card-description">{{ agent.description }}</p>
 
-                  <!-- 底部：使用量 + 按钮 -->
+                  <!-- 底部：按钮 -->
                   <div class="card-footer">
-                    <span class="usage-count">🔥 {{ formatNumber(agent.usage) }}+ 使用</span>
+                    <span class="usage-count">{{ agent.categoryName }}</span>
                     <button class="chat-btn" @click.stop="handleChat(agent)">
                       开始对话
                     </button>
@@ -105,6 +105,7 @@ import {
 import { message } from 'ant-design-vue'
 import FullWidthLayout from '@/layouts/components/FullWidthLayout.vue'
 import ChatDrawer from '@/components/agents/ChatDrawer.vue'
+import { getAgentList } from '@/api/agent'
 
 // 状态管理
 const loading = ref(false)
@@ -113,92 +114,45 @@ const searchKeyword = ref('')
 const chatDrawerVisible = ref(false)
 const currentAgent = ref(null)
 
-// 分类数据
-const categories = ref([
-  { id: 'all', name: '全部智能体', count: 0 },
-  { id: 'writing', name: '文案创作', count: 0 },
-  { id: 'analysis', name: '数据分析', count: 0 },
-  { id: 'coding', name: '代码助手', count: 0 },
-  { id: 'design', name: '设计创作', count: 0 },
-  { id: 'education', name: '教育学习', count: 0 }
-])
+// 智能体列表数据（从 API 获取）
+const agentList = ref([])
 
-// 智能体列表数据
-const agentList = ref([
-  {
-    id: 1,
-    name: '文案写作助手',
-    description: '专业的内容创作智能体，帮助您撰写各类文案，包括广告语、产品介绍、营销文案等。',
-    avatar: '',
-    categoryId: 'writing',
-    categoryName: '文案创作',
-    tagColor: 'blue',
-    usage: 12580
-  },
-  {
-    id: 2,
-    name: '数据分析专家',
-    description: '强大的数据分析工具，支持多种数据格式，提供专业的数据洞察和可视化建议。',
-    avatar: '',
-    categoryId: 'analysis',
-    categoryName: '数据分析',
-    tagColor: 'green',
-    usage: 8920
-  },
-  {
-    id: 3,
-    name: '代码生成器',
-    description: '智能代码生成工具，支持多种编程语言，提高开发效率，减少重复工作。',
-    avatar: '',
-    categoryId: 'coding',
-    categoryName: '代码助手',
-    tagColor: 'purple',
-    usage: 15230
-  },
-  {
-    id: 4,
-    name: '海报设计助手',
-    description: '专业的海报设计工具，提供丰富的模板和设计建议，轻松制作精美海报。',
-    avatar: '',
-    categoryId: 'design',
-    categoryName: '设计创作',
-    tagColor: 'pink',
-    usage: 6750
-  },
-  {
-    id: 5,
-    name: '英语学习伙伴',
-    description: '个性化英语学习助手，提供口语练习、语法讲解、词汇积累等功能。',
-    avatar: '',
-    categoryId: 'education',
-    categoryName: '教育学习',
-    tagColor: 'amber',
-    usage: 9840
-  },
-  {
-    id: 6,
-    name: '短视频脚本',
-    description: '专业的短视频脚本创作工具，支持多种视频类型，助您打造爆款内容。',
-    avatar: '',
-    categoryId: 'writing',
-    categoryName: '文案创作',
-    tagColor: 'blue',
-    usage: 7680
-  }
-])
+// 分类数据（动态从 agentList 提取）
+const categories = computed(() => {
+  const categoryMap = new Map()
+
+  // 统计各分类数量
+  agentList.value.forEach(agent => {
+    const cat = agent.categoryName || '其他'
+    categoryMap.set(cat, (categoryMap.get(cat) || 0) + 1)
+  })
+
+  // 构建分类列表
+  const cats = [
+    { id: 'all', name: '全部智能体', count: agentList.value.length }
+  ]
+
+  categoryMap.forEach((count, name) => {
+    cats.push({ id: name, name, count })
+  })
+
+  return cats
+})
 
 // 计算属性：过滤后的列表
 const filteredAgentList = computed(() => {
   let list = agentList.value
 
+  // 按分类过滤
   if (activeCategory.value !== 'all') {
-    list = list.filter(a => a.categoryId === activeCategory.value)
+    list = list.filter(a => a.categoryName === activeCategory.value)
   }
 
+  // 按关键词搜索（前端过滤）
   if (searchKeyword.value) {
     const keyword = searchKeyword.value.toLowerCase()
     list = list.filter(a =>
-      a.name.toLowerCase().includes(keyword) || 
+      a.name.toLowerCase().includes(keyword) ||
       a.description.toLowerCase().includes(keyword)
     )
   }
@@ -206,18 +160,54 @@ const filteredAgentList = computed(() => {
   return list
 })
 
+// 获取智能体列表
+const fetchAgentList = async () => {
+  loading.value = true
+  try {
+    const res = await getAgentList()
+    if (res.code === 0 && res.data) {
+      // 字段映射：agentName → name, icon → avatar
+      agentList.value = res.data.map(item => ({
+        id: item.id,
+        agentId: item.agentId,
+        name: item.agentName,
+        description: item.description,
+        avatar: item.icon,
+        categoryName: item.categoryName || '其他',
+        tagColor: getTagColor(item.categoryName)
+      }))
+    }
+  } catch (error) {
+    console.error('获取智能体列表失败:', error)
+    message.error('获取智能体列表失败')
+  } finally {
+    loading.value = false
+  }
+}
+
+// 根据分类名称获取标签颜色
+const getTagColor = (categoryName) => {
+  const colorMap = {
+    '文案创作': 'blue',
+    '数据分析': 'green',
+    '代码助手': 'purple',
+    '设计创作': 'pink',
+    '教育学习': 'amber'
+  }
+  return colorMap[categoryName] || 'blue'
+}
+
 // 方法
 const handleCategoryChange = (categoryId) => {
   activeCategory.value = categoryId
 }
 
 const handleSearch = () => {
-  // 搜索逻辑通过 computed 自动处理，这里可以留作扩展（如埋点、API请求等）
+  // 搜索逻辑通过 computed 自动处理
 }
 
 const handleAgentClick = (agent) => {
   console.log('查看智能体详情:', agent)
-  // TODO: 跳转到智能体详情页
 }
 
 const handleChat = (agent) => {
@@ -227,26 +217,11 @@ const handleChat = (agent) => {
 
 const handleSendMessage = (data) => {
   console.log('发送消息:', data)
-  // TODO: 调用 API 发送消息
-}
-
-const formatNumber = (num) => {
-  if (num >= 10000) {
-    return (num / 10000).toFixed(0) + 'w'
-  }
-  return (num / 1000).toFixed(1) + 'w'
 }
 
 // 初始化
 onMounted(() => {
-  // 更新分类数量
-  categories.value.forEach(cat => {
-    if (cat.id === 'all') {
-      cat.count = agentList.value.length
-    } else {
-      cat.count = agentList.value.filter(a => a.categoryId === cat.id).length
-    }
-  })
+  fetchAgentList()
 })
 </script>