style: 优化对话/工具调用分布图表显示TOP 3数据示格式

web/src/components/AgentChatComponent.vue

@@ -55,8 +55,8 @@
               :class="{ 'has-content': hasAgentStateContent }"
               :title="hasAgentStateContent ? '查看工作状态' : '暂无工作状态'"
             >
-              <Activity class="nav-btn-icon" size="18"/>
+              <Layers class="nav-btn-icon" size="18"/>
-              <span v-if="hasAgentStateContent" class="text">{{ totalAgentStateItems }}</span>
+              <span v-if="hasAgentStateContent" class="text">状态({{ totalAgentStateItems }})</span>
             </div>
           </AgentPopover>
           <!-- <div class="nav-btn" @click="shareChat" v-if="currentChatId && currentAgent">
@@ -234,7 +234,7 @@ import AgentMessageComponent from '@/components/AgentMessageComponent.vue'
 import ImagePreviewComponent from '@/components/ImagePreviewComponent.vue'
 import ChatSidebarComponent from '@/components/ChatSidebarComponent.vue'
 import RefsComponent from '@/components/RefsComponent.vue'
-import { PanelLeftOpen, MessageCirclePlus, LoaderCircle, Activity } from 'lucide-vue-next';
+import { PanelLeftOpen, MessageCirclePlus, LoaderCircle, Layers } from 'lucide-vue-next';
 import { handleChatError, handleValidationError } from '@/utils/errorHandler';
 import { ScrollController } from '@/utils/scrollController';
 import { AgentValidator } from '@/utils/agentValidator';

web/src/components/GraphInfoPanel.vue

@@ -0,0 +1,177 @@
+<template>
+  <div class="graph-info-panel">
+    <div class="info-item">
+      <span class="info-label">实体</span>
+      <span class="info-value">{{ graphData.nodes.length }}</span>
+      <span v-if="graphInfo?.entity_count" class="info-total">/ {{ graphInfo.entity_count }}</span>
+    </div>
+
+    <div class="info-item">
+      <span class="info-label">关系</span>
+      <span class="info-value">{{ graphData.edges.length }}</span>
+      <span v-if="graphInfo?.relationship_count" class="info-total">/ {{ graphInfo.relationship_count }}</span>
+    </div>
+
+    <div v-if="graphInfo?.graph_name" class="info-item">
+      <span class="info-label">图谱</span>
+      <span class="info-value">{{ graphInfo.graph_name }}</span>
+    </div>
+
+    <div v-if="unindexedCount > 0" class="info-item warning">
+      <span class="info-label">未索引</span>
+      <span class="info-value warning">{{ unindexedCount }}</span>
+      <a-button
+        v-if="modelMatched"
+        type="primary"
+        size="small"
+        @click="$emit('index-nodes')"
+      >
+        添加索引
+      </a-button>
+      <a-tooltip v-else title="向量模型不匹配，无法添加索引">
+        <a-button type="default" size="small" disabled>
+          模型不匹配
+        </a-button>
+      </a-tooltip>
+    </div>
+
+    <div class="actions">
+      <a-button type="default" size="small" @click="$emit('export-data')">
+        <ExportOutlined />
+        导出数据
+      </a-button>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { ExportOutlined } from '@ant-design/icons-vue'
+
+const props = defineProps({
+  graphInfo: {
+    type: Object,
+    default: () => ({})
+  },
+  graphData: {
+    type: Object,
+    default: () => ({ nodes: [], edges: [] })
+  },
+  unindexedCount: {
+    type: Number,
+    default: 0
+  },
+  modelMatched: {
+    type: Boolean,
+    default: true
+  }
+})
+
+defineEmits(['index-nodes', 'export-data'])
+</script>
+
+<style lang="less" scoped>
+.graph-info-panel {
+  display: flex;
+  align-items: center;
+  gap: 24px;
+  padding: 12px 24px;
+  background: rgba(255, 255, 255, 0.6);
+  backdrop-filter: blur(10px);
+  -webkit-backdrop-filter: blur(10px);
+  border-radius: 8px;
+  margin: 0;
+  border: 1px solid white;
+  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
+  flex-wrap: wrap;
+  align-self: flex-start;
+
+  @media (max-width: 768px) {
+    gap: 16px;
+    padding: 12px 16px;
+  }
+}
+
+.info-item {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  font-size: 14px;
+
+  &.warning {
+    color: #fa8c16;
+  }
+}
+
+.info-label {
+  color: var(--gray-700);
+  font-weight: 500;
+}
+
+.info-value {
+  color: var(--gray-1000);
+  font-weight: 600;
+
+  &.warning {
+    color: #fa8c16;
+  }
+}
+
+.info-total {
+  color: var(--gray-600);
+  font-size: 12px;
+}
+
+.actions {
+  margin-left: auto;
+  display: flex;
+  gap: 8px;
+
+  @media (max-width: 768px) {
+    margin-left: 0;
+    width: 100%;
+    justify-content: flex-end;
+  }
+}
+
+:deep(.ant-btn-default) {
+  font-size: 12px;
+  height: 28px;
+  padding: 0 12px;
+  border-radius: 6px;
+  border-color: var(--main-300);
+  color: var(--main-600);
+  background: var(--main-20);
+  transition: all 0.2s ease;
+
+  &:hover {
+    border-color: var(--main-500);
+    color: var(--main-700);
+    background: var(--main-40);
+    box-shadow: 0 2px 4px rgba(1, 97, 121, 0.1);
+  }
+
+  &:active {
+    transform: translateY(1px);
+  }
+}
+
+:deep(.ant-btn-primary) {
+  font-size: 12px;
+  height: 28px;
+  padding: 0 12px;
+  border-radius: 6px;
+  background: var(--main-500);
+  border-color: var(--main-500);
+  transition: all 0.2s ease;
+
+  &:hover {
+    background: var(--main-600);
+    border-color: var(--main-600);
+    box-shadow: 0 2px 4px rgba(1, 97, 121, 0.2);
+  }
+
+  &:active {
+    transform: translateY(1px);
+  }
+}
+</style>

web/src/components/dashboard/AgentStatsComponent.vue

@@ -37,7 +37,7 @@
       <!-- 对话数和工具调用数分布 -->
       <a-col :span="24">
         <div class="chart-container">
-          <h4>对话/工具调用分布</h4>
+          <h4>对话/工具调用分布 (TOP 3)</h4>
           <div ref="conversationToolChartRef" class="chart"></div>
         </div>
       </a-col>
@@ -182,11 +182,31 @@ const initConversationToolChart = () => {
   const conversationData = props.agentStats.agent_conversation_counts || []
   const toolData = props.agentStats.agent_tool_usage || []
 
-  // 获取所有智能体ID
+  // 获取所有智能体ID并按对话数+工具调用数排序，取前3个
-  const allAgentIds = [...new Set([
+  const allAgentStats = {}
-    ...conversationData.map(item => item.agent_id),
+
-    ...toolData.map(item => item.agent_id)
+  // 统计每个智能体的总数据量（对话数 + 工具调用数）
-  ])]
+  conversationData.forEach(item => {
+    if (!allAgentStats[item.agent_id]) {
+      allAgentStats[item.agent_id] = { conversation: 0, tool: 0, total: 0 }
+    }
+    allAgentStats[item.agent_id].conversation = item.conversation_count
+    allAgentStats[item.agent_id].total += item.conversation_count
+  })
+
+  toolData.forEach(item => {
+    if (!allAgentStats[item.agent_id]) {
+      allAgentStats[item.agent_id] = { conversation: 0, tool: 0, total: 0 }
+    }
+    allAgentStats[item.agent_id].tool = item.tool_usage_count
+    allAgentStats[item.agent_id].total += item.tool_usage_count
+  })
+
+  // 按总数据量降序排序，取前3个
+  const topAgentIds = Object.entries(allAgentStats)
+    .sort(([,a], [,b]) => b.total - a.total)
+    .slice(0, 3)
+    .map(([agentId]) => agentId)
 
   const option = {
     tooltip: {
@@ -216,7 +236,7 @@ const initConversationToolChart = () => {
     },
     xAxis: {
       type: 'category',
-      data: allAgentIds,
+      data: topAgentIds,
       axisLine: {
         lineStyle: {
           color: '#e8e8e8'
@@ -248,7 +268,7 @@ const initConversationToolChart = () => {
       {
         name: '对话数',
         type: 'bar',
-        data: allAgentIds.map(agentId => {
+        data: topAgentIds.map(agentId => {
           const item = conversationData.find(d => d.agent_id === agentId)
           return item ? item.conversation_count : 0
         }),
@@ -267,7 +287,7 @@ const initConversationToolChart = () => {
       {
         name: '工具调用数',
         type: 'bar',
-        data: allAgentIds.map(agentId => {
+        data: topAgentIds.map(agentId => {
           const item = toolData.find(d => d.agent_id === agentId)
           return item ? item.tool_usage_count : 0
         }),

web/src/views/DataBaseView.vue

@@ -871,57 +871,60 @@ onMounted(() => {
 }
 
 .database, .graphbase {
-  background-color: white;
+  background: linear-gradient(145deg, #ffffff 0%, #fafbfc 100%);
-  box-shadow: 0px 1px 2px 0px rgba(16,24,40,.06),0px 1px 3px 0px rgba(16,24,40,.1);
+  box-shadow:
-  border: 2px solid white;
+    0px 1px 2px 0px rgba(16,24,40,.06),
-  transition: box-shadow 0.2s ease-in-out;
+    inset 0px 1px 0px 0px rgba(255,255,255,.6);
-
+  border: 1px solid rgba(233, 236, 239, 0.6);
-  &:hover {
+  transition: none;
-    box-shadow: 0px 4px 6px -2px rgba(16,24,40,.03),0px 12px 16px -4px rgba(16,24,40,.08);
+  position: relative;
-  }
 }
 
 .dbcard, .database {
   width: 100%;
-  padding: 10px;
+  padding: 24px;
-  border-radius: 12px;
+  border-radius: 16px;
-  height: 160px;
+  height: 180px;
-  padding: 20px;
   cursor: pointer;
   display: flex;
   flex-direction: column;
   position: relative; // 为绝对定位的锁定图标提供参考
+  overflow: hidden;
 
   .private-lock-icon {
     position: absolute;
-    top: 24px;
+    top: 20px;
-    right: 16px;
+    right: 20px;
-    color: var(--gray-700);
+    color: var(--gray-600);
-    background: var(--gray-100);
+    background: linear-gradient(135deg, rgba(255,255,255,0.9) 0%, rgba(248,250,252,0.9) 100%);
     font-size: 12px;
-    border-radius: 6px;
+    border-radius: 8px;
-    padding: 5px;
+    padding: 6px;
-    z-index: 1;
+    z-index: 2;
+    box-shadow: 0px 2px 4px rgba(0,0,0,0.1);
+    border: 1px solid rgba(229, 231, 235, 0.5);
   }
 
+  
   .top {
     display: flex;
     align-items: center;
-    height: 50px;
+    height: 54px;
-    margin-bottom: 10px;
+    margin-bottom: 14px;
 
     .icon {
-      width: 50px;
+      width: 54px;
-      height: 50px;
+      height: 54px;
-      font-size: 28px;
+      font-size: 26px;
-      margin-right: 10px;
+      margin-right: 14px;
       display: flex;
       justify-content: center;
       align-items: center;
-      background-color: #F5F8FF;
+      background: var(--main-30);
-      border-radius: 8px;
+      border-radius: 12px;
-      border: 1px solid #E0EAFF;
+      border: 1px solid rgba(1, 97, 121, 0.05);
       color: var(--main-color);
+      position: relative;
     }
 
     .info {
@@ -931,35 +934,47 @@ onMounted(() => {
       }
 
       h3 {
-        font-size: 16px;
+        font-size: 17px;
-        font-weight: bold;
+        font-weight: 600;
+        letter-spacing: -0.02em;
+        line-height: 1.4;
       }
 
       p {
-        color: var(--gray-900);
+        color: var(--gray-700);
-        font-size: small;
+        font-size: 13px;
         display: flex;
         align-items: center;
         gap: 8px;
         flex-wrap: wrap;
+        margin-top: 4px;
+        font-weight: 400;
 
         .created-time-inline {
           color: var(--gray-500);
-          font-size: 12px;
+          font-size: 11px;
+          font-weight: 400;
+          background: var(--gray-50);
+          padding: 2px 6px;
+          border-radius: 4px;
         }
       }
     }
   }
 
   .description {
-    color: var(--gray-900);
+    color: var(--gray-600);
     overflow: hidden;
     display: -webkit-box;
-    line-clamp: 1;
+    line-clamp: 2;
-    -webkit-line-clamp: 1;
+    -webkit-line-clamp: 2;
     -webkit-box-orient: vertical;
     text-overflow: ellipsis;
-    margin-bottom: 10px;
+    margin-bottom: 12px;
+    font-size: 13px;
+    line-height: 1.5;
+    font-weight: 400;
+    flex: 1;
   }
 
 

web/src/views/GraphView.vue

@@ -71,9 +71,14 @@
         </template>
         <template #bottom>
           <div class="footer">
-            <div class="tags">
+            <GraphInfoPanel
-              <a-tag :bordered="false" v-for="tag in graphTags" :key="tag.key" :color="tag.type">{{ tag.text }}</a-tag>
+              :graph-info="graphInfo"
-            </div>
+              :graph-data="graphData"
+              :unindexed-count="unindexedCount"
+              :model-matched="modelMatched"
+              @index-nodes="indexNodes"
+              @export-data="exportGraphData"
+            />
           </div>
         </template>
       </GraphCanvas>
@@ -150,6 +155,7 @@ import HeaderComponent from '@/components/HeaderComponent.vue';
 import { neo4jApi } from '@/apis/graph_api';
 import { useUserStore } from '@/stores/user';
 import GraphCanvas from '@/components/GraphCanvas.vue';
+import GraphInfoPanel from '@/components/GraphInfoPanel.vue';
 
 const configStore = useConfigStore();
 const cur_embed_model = computed(() => configStore.config?.embed_model);
@@ -294,20 +300,6 @@ const graphStatusText = computed(() => {
   return graphInfo.value?.status === 'open' ? '已连接' : '已关闭';
 });
 
-// 新增：将图谱信息拆分为多条标签用于展示
-const graphTags = computed(() => {
-  const tags = [];
-  const dbName = graphInfo.value?.graph_name;
-  const entityCount = graphInfo.value?.entity_count;
-  const relationCount = graphInfo.value?.relationship_count;
-
-  if (dbName) tags.push({ key: 'name', text: `图谱 ${dbName}`, type: 'blue' });
-  if (typeof entityCount === 'number') tags.push({ key: 'entities', text: `实体 ${graphData.nodes.length} of ${entityCount}`, type: 'success' });
-  if (typeof relationCount === 'number') tags.push({ key: 'relations', text: `关系 ${graphData.edges.length} of ${relationCount}`, type: 'purple' });
-  if (unindexedCount.value > 0) tags.push({ key: 'unindexed', text: `未索引 ${unindexedCount.value}`, type: 'warning' });
-
-  return tags;
-});
 
 // 为未索引节点添加索引
 const indexNodes = () => {
@@ -343,6 +335,32 @@ const getAuthHeaders = () => {
   return userStore.getAuthHeaders();
 };
 
+const exportGraphData = () => {
+  const dataStr = JSON.stringify({
+    nodes: graphData.nodes,
+    edges: graphData.edges,
+    graphInfo: graphInfo.value,
+    exportTime: new Date().toISOString()
+  }, null, 2);
+
+  const dataBlob = new Blob([dataStr], { type: 'application/json' });
+  const url = URL.createObjectURL(dataBlob);
+  const link = document.createElement('a');
+  link.href = url;
+  link.download = `graph-data-${new Date().toISOString().slice(0, 10)}.json`;
+  document.body.appendChild(link);
+  link.click();
+  document.body.removeChild(link);
+  URL.revokeObjectURL(url);
+
+  message.success('图谱数据已导出');
+};
+
+const showQueryHistory = () => {
+  // 这里可以实现查询历史功能
+  message.info('查询历史功能开发中...');
+};
+
 const openLink = (url) => {
   window.open(url, '_blank')
 }