style(dashboard): 优化仪表板组件的标题和布局

- 修改仪表板组件中的标题，简化为更通用的名称
- 调整统计卡片的布局，提升响应式设计
- 更新图表样式，移除不必要的旋转设置，增强可读性
- 增加加载状态指示，改善用户体验

server/routers/dashboard_router.py

@@ -440,10 +440,10 @@ async def get_knowledge_stats(
                 kb_type = kb_info.get("kb_type", "unknown")
                 display_type = {
                     "lightrag": "LightRAG",
-                    "chroma": "Chroma向量库",
+                    "chroma": "Chroma",
-                    "faiss": "FAISS索引",
+                    "faiss": "FAISS",
-                    "milvus": "Milvus向量库",
+                    "milvus": "Milvus",
-                    "qdrant": "Qdrant向量库",
+                    "qdrant": "Qdrant",
                     "elasticsearch": "Elasticsearch",
                     "unknown": "未知类型",
                 }.get(kb_type.lower(), kb_type)

web/src/components/dashboard/AgentStatsComponent.vue

@@ -37,7 +37,7 @@
       <!-- 对话数和工具调用数分布 -->
       <a-col :span="24">
         <div class="chart-container">
-          <h4>智能体对话数与工具调用数分布</h4>
+          <h4>对话/工具调用分布</h4>
           <div ref="conversationToolChartRef" class="chart"></div>
         </div>
       </a-col>
@@ -225,7 +225,7 @@ const initConversationToolChart = () => {
       axisLabel: {
         color: '#666',
         interval: 0,
-        rotate: 45
+        // rotate: 45
       }
     },
     yAxis: {

web/src/components/dashboard/KnowledgeStatsComponent.vue

@@ -37,7 +37,7 @@
       <a-col :span="24">
         <div class="chart-container">
           <div class="chart-header">
-            <h4>数据库类型分布</h4>
+            <h4>类型分布</h4>
             <div class="legend" v-if="dbTypeLegend.length">
               <div class="legend-item" v-for="(item, idx) in dbTypeLegend" :key="item.name">
                 <span class="legend-color" :style="{ backgroundColor: getLegendColorByIndex(idx) }"></span>

web/src/components/dashboard/ToolStatsComponent.vue

@@ -3,22 +3,14 @@
     <!-- 工具调用概览 -->
     <div class="stats-overview">
       <a-row :gutter="16">
-        <a-col :span="6">
+        <a-col :span="8">
           <a-statistic
             title="总调用次数"
             :value="toolStats?.total_calls || 0"
             :value-style="{ color: 'var(--chart-info)' }"
           />
         </a-col>
-        <a-col :span="6">
+        <a-col :span="8">
-          <a-statistic
-            title="成功调用"
-            :value="toolStats?.successful_calls || 0"
-            :value-style="{ color: 'var(--chart-success)' }"
-            suffix="次"
-          />
-        </a-col>
-        <a-col :span="6">
           <a-statistic
             title="失败调用"
             :value="toolStats?.failed_calls || 0"
@@ -26,7 +18,7 @@
             suffix="次"
           />
         </a-col>
-        <a-col :span="6">
+        <a-col :span="8">
           <a-statistic
             title="成功率"
             :value="toolStats?.success_rate || 0"

web/src/views/DashboardView.vue

@@ -92,7 +92,7 @@
           >
             <template #bodyCell="{ column, record }">
               <template v-if="column.key === 'title'">
-                <a @click="handleViewDetail(record)" class="conversation-title">{{ record.title || '未命名对话' }}</a>
+                <a @click="handleViewDetail(record)" class="conversation-title" :class="{ 'loading': loadingDetail }">{{ record.title || '未命名对话' }}</a>
               </template>
               <template v-if="column.key === 'status'">
                 <a-tag :color="record.status === 'active' ? 'green' : 'red'" size="small">
@@ -103,7 +103,7 @@
                 <span class="time-text">{{ formatDate(record.updated_at) }}</span>
               </template>
               <template v-if="column.key === 'actions'">
-                <a-button type="link" size="small" @click="handleViewDetail(record)">
+                <a-button type="link" size="small" @click="handleViewDetail(record)" :loading="loadingDetail">
                   详情
                 </a-button>
               </template>
@@ -193,6 +193,7 @@ const filters = reactive({
 // 对话列表
 const conversations = ref([])
 const loading = ref(false)
+const loadingDetail = ref(false)
 
 // 反馈相关
 const feedbackModalVisible = ref(false)
@@ -394,25 +395,14 @@ const formatDate = (dateString) => {
 // 查看对话详情
 const handleViewDetail = async (record) => {
   try {
-    loading.value = true
+    loadingDetail.value = true
     const detail = await dashboardApi.getConversationDetail(record.thread_id)
-
-    console.log('========================================')
-    console.log('=== 数据库原始数据 ===')
-    console.log('========================================')
-    console.log('完整对话数据（JSON）:')
-    console.log(JSON.stringify(detail, null, 2))
-    console.log('\n')
-    console.log('完整对话数据（对象）:')
     console.log(detail)
-    console.log('========================================')
-
-    message.success('数据库原始数据已输出到控制台')
   } catch (error) {
     console.error('获取对话详情失败:', error)
     message.error('获取对话详情失败')
   } finally {
-    loading.value = false
+    loadingDetail.value = false
   }
 }