From 7c866e7b2b44e08e0baa4a939516b34cfdff9904 Mon Sep 17 00:00:00 2001
From: Wenjie Zhang <xerrors@163.com>
Date: Tue, 7 Oct 2025 17:14:58 +0800
Subject: [PATCH] =?UTF-8?q?style(dashboard):=20=E4=BC=98=E5=8C=96=E4=BB=AA?=
 =?UTF-8?q?=E8=A1=A8=E6=9D=BF=E7=BB=84=E4=BB=B6=E7=9A=84=E6=A0=87=E9=A2=98?=
 =?UTF-8?q?=E5=92=8C=E5=B8=83=E5=B1=80?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- 修改仪表板组件中的标题，简化为更通用的名称
- 调整统计卡片的布局，提升响应式设计
- 更新图表样式，移除不必要的旋转设置，增强可读性
- 增加加载状态指示，改善用户体验
---
 server/routers/dashboard_router.py            |  8 ++++----
 .../dashboard/AgentStatsComponent.vue         |  4 ++--
 .../dashboard/KnowledgeStatsComponent.vue     |  2 +-
 .../dashboard/ToolStatsComponent.vue          | 14 +++----------
 web/src/views/DashboardView.vue               | 20 +++++--------------
 5 files changed, 15 insertions(+), 33 deletions(-)

diff --git a/server/routers/dashboard_router.py b/server/routers/dashboard_router.py
index 5add5cfa..14ac46a6 100644
--- a/server/routers/dashboard_router.py
+++ b/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向量库",
-                    "faiss": "FAISS索引",
-                    "milvus": "Milvus向量库",
-                    "qdrant": "Qdrant向量库",
+                    "chroma": "Chroma",
+                    "faiss": "FAISS",
+                    "milvus": "Milvus",
+                    "qdrant": "Qdrant",
                     "elasticsearch": "Elasticsearch",
                     "unknown": "未知类型",
                 }.get(kb_type.lower(), kb_type)
diff --git a/web/src/components/dashboard/AgentStatsComponent.vue b/web/src/components/dashboard/AgentStatsComponent.vue
index ab3c831b..4c5f2c26 100644
--- a/web/src/components/dashboard/AgentStatsComponent.vue
+++ b/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: {
diff --git a/web/src/components/dashboard/KnowledgeStatsComponent.vue b/web/src/components/dashboard/KnowledgeStatsComponent.vue
index 043721e5..5b22304b 100644
--- a/web/src/components/dashboard/KnowledgeStatsComponent.vue
+++ b/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>
diff --git a/web/src/components/dashboard/ToolStatsComponent.vue b/web/src/components/dashboard/ToolStatsComponent.vue
index e9106fef..813ba517 100644
--- a/web/src/components/dashboard/ToolStatsComponent.vue
+++ b/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-statistic
-            title="成功调用"
-            :value="toolStats?.successful_calls || 0"
-            :value-style="{ color: 'var(--chart-success)' }"
-            suffix="次"
-          />
-        </a-col>
-        <a-col :span="6">
+        <a-col :span="8">
           <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"
diff --git a/web/src/views/DashboardView.vue b/web/src/views/DashboardView.vue
index 83cd593c..c5e03bac 100644
--- a/web/src/views/DashboardView.vue
+++ b/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
   }
 }