style: 优化对话/工具调用分布图表显示TOP 3数据示格式
This commit is contained in:
Wenjie Zhang
parent
2047170540
commit
96d257a7ac
@ -55,8 +55,8 @@
|
||||
:class="{ 'has-content': hasAgentStateContent }"
|
||||
:title="hasAgentStateContent ? '查看工作状态' : '暂无工作状态'"
|
||||
>
|
||||
<Activity class="nav-btn-icon" size="18"/>
|
||||
<span v-if="hasAgentStateContent" class="text">{{ totalAgentStateItems }}</span>
|
||||
<Layers class="nav-btn-icon" size="18"/>
|
||||
<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';
|
||||
|
||||
177
web/src/components/GraphInfoPanel.vue
Normal file
177
web/src/components/GraphInfoPanel.vue
Normal file
@ -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>
|
||||
@ -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
|
||||
const allAgentIds = [...new Set([
|
||||
...conversationData.map(item => item.agent_id),
|
||||
...toolData.map(item => item.agent_id)
|
||||
])]
|
||||
// 获取所有智能体ID并按对话数+工具调用数排序，取前3个
|
||||
const allAgentStats = {}
|
||||
|
||||
// 统计每个智能体的总数据量（对话数 + 工具调用数）
|
||||
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
|
||||
}),
|
||||
|
||||
@ -871,57 +871,60 @@ onMounted(() => {
|
||||
}
|
||||
|
||||
.database, .graphbase {
|
||||
background-color: white;
|
||||
box-shadow: 0px 1px 2px 0px rgba(16,24,40,.06),0px 1px 3px 0px rgba(16,24,40,.1);
|
||||
border: 2px solid white;
|
||||
transition: box-shadow 0.2s ease-in-out;
|
||||
|
||||
&:hover {
|
||||
box-shadow: 0px 4px 6px -2px rgba(16,24,40,.03),0px 12px 16px -4px rgba(16,24,40,.08);
|
||||
}
|
||||
background: linear-gradient(145deg, #ffffff 0%, #fafbfc 100%);
|
||||
box-shadow:
|
||||
0px 1px 2px 0px rgba(16,24,40,.06),
|
||||
inset 0px 1px 0px 0px rgba(255,255,255,.6);
|
||||
border: 1px solid rgba(233, 236, 239, 0.6);
|
||||
transition: none;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.dbcard, .database {
|
||||
width: 100%;
|
||||
padding: 10px;
|
||||
border-radius: 12px;
|
||||
height: 160px;
|
||||
padding: 20px;
|
||||
padding: 24px;
|
||||
border-radius: 16px;
|
||||
height: 180px;
|
||||
cursor: pointer;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
position: relative; // 为绝对定位的锁定图标提供参考
|
||||
overflow: hidden;
|
||||
|
||||
.private-lock-icon {
|
||||
position: absolute;
|
||||
top: 24px;
|
||||
right: 16px;
|
||||
color: var(--gray-700);
|
||||
background: var(--gray-100);
|
||||
top: 20px;
|
||||
right: 20px;
|
||||
color: var(--gray-600);
|
||||
background: linear-gradient(135deg, rgba(255,255,255,0.9) 0%, rgba(248,250,252,0.9) 100%);
|
||||
font-size: 12px;
|
||||
border-radius: 6px;
|
||||
padding: 5px;
|
||||
z-index: 1;
|
||||
border-radius: 8px;
|
||||
padding: 6px;
|
||||
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;
|
||||
margin-bottom: 10px;
|
||||
height: 54px;
|
||||
margin-bottom: 14px;
|
||||
|
||||
.icon {
|
||||
width: 50px;
|
||||
height: 50px;
|
||||
font-size: 28px;
|
||||
margin-right: 10px;
|
||||
width: 54px;
|
||||
height: 54px;
|
||||
font-size: 26px;
|
||||
margin-right: 14px;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
background-color: #F5F8FF;
|
||||
border-radius: 8px;
|
||||
border: 1px solid #E0EAFF;
|
||||
background: var(--main-30);
|
||||
border-radius: 12px;
|
||||
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-weight: bold;
|
||||
font-size: 17px;
|
||||
font-weight: 600;
|
||||
letter-spacing: -0.02em;
|
||||
line-height: 1.4;
|
||||
}
|
||||
|
||||
p {
|
||||
color: var(--gray-900);
|
||||
font-size: small;
|
||||
color: var(--gray-700);
|
||||
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;
|
||||
-webkit-line-clamp: 1;
|
||||
line-clamp: 2;
|
||||
-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;
|
||||
}
|
||||
|
||||
|
||||
|
||||
@ -71,9 +71,14 @@
|
||||
</template>
|
||||
<template #bottom>
|
||||
<div class="footer">
|
||||
<div class="tags">
|
||||
<a-tag :bordered="false" v-for="tag in graphTags" :key="tag.key" :color="tag.type">{{ tag.text }}</a-tag>
|
||||
</div>
|
||||
<GraphInfoPanel
|
||||
:graph-info="graphInfo"
|
||||
: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')
|
||||
}
|
||||
|
||||
Loading…
Reference in New Issue
Block a user