From c5dde790518cd125a2cdc2b76a7a7233e7289dd7 Mon Sep 17 00:00:00 2001 From: Wenjie Zhang Date: Sat, 20 Dec 2025 15:44:37 +0800 Subject: [PATCH] =?UTF-8?q?refactor(components):=20=E7=A7=BB=E9=99=A4?= =?UTF-8?q?=E7=8B=AC=E7=AB=8B=E4=BF=A1=E6=81=AF=E9=9D=A2=E6=9D=BF=E7=BB=84?= =?UTF-8?q?=E4=BB=B6=E5=B9=B6=E6=95=B4=E5=90=88=E5=88=B0GraphCanvas?= =?UTF-8?q?=E4=B8=AD?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit 将GraphInfoPanel和LightRAGInfoPanel组件删除，将其功能整合到GraphCanvas组件中 简化视图层代码，移除GraphView中不必要的模板和计算逻辑 --- web/src/components/GraphCanvas.vue | 56 ++++++++++ web/src/components/GraphInfoPanel.vue | 131 ----------------------- web/src/components/LightRAGInfoPanel.vue | 74 ------------- web/src/views/GraphView.vue | 57 ++++------ 4 files changed, 78 insertions(+), 240 deletions(-) delete mode 100644 web/src/components/GraphInfoPanel.vue delete mode 100644 web/src/components/LightRAGInfoPanel.vue diff --git a/web/src/components/GraphCanvas.vue b/web/src/components/GraphCanvas.vue index 95be6686..cf74fdad 100644 --- a/web/src/components/GraphCanvas.vue +++ b/web/src/components/GraphCanvas.vue @@ -8,6 +8,19 @@
+ +
+
+ 节点 + {{ graphData.nodes.length }} + / {{ graphInfo.node_count }} +
+
+ 边 + {{ graphData.edges.length }} + / {{ graphInfo.edge_count }} +
+
@@ -26,6 +39,10 @@ const props = defineProps({ required: true, default: () => ({ nodes: [], edges: [] }) }, + graphInfo: { + type: Object, + default: () => ({}) + }, labelField: { type: String, default: 'name' }, autoFit: { type: Boolean, default: true }, autoResize: { type: Boolean, default: true }, @@ -423,6 +440,45 @@ defineExpose({ height: 100%; } + .graph-stats-panel { + position: absolute; + bottom: 20px; + left: 20px; + display: flex; + align-items: center; + gap: 16px; + padding: 6px 12px; + background: var(--color-trans-light); + border: 1px solid var(--color-border-secondary); + border-radius: 8px; + box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08); + pointer-events: auto; + z-index: 10; + font-size: 13px; + backdrop-filter: blur(4px); + + .stat-item { + display: flex; + align-items: center; + gap: 4px; + + .stat-label { + color: var(--color-text-secondary); + font-weight: 500; + } + + .stat-value { + color: var(--color-text); + font-weight: 600; + } + + .stat-total { + color: var(--color-text-quaternary); + font-size: 11px; + } + } + } + .slots { // 让整层覆盖容器默认不接收指针事件（便于穿透到底下画布） pointer-events: none; diff --git a/web/src/components/GraphInfoPanel.vue b/web/src/components/GraphInfoPanel.vue deleted file mode 100644 index 7a5b52ac..00000000 --- a/web/src/components/GraphInfoPanel.vue +++ /dev/null @@ -1,131 +0,0 @@ - - - - - \ No newline at end of file diff --git a/web/src/components/LightRAGInfoPanel.vue b/web/src/components/LightRAGInfoPanel.vue deleted file mode 100644 index 2afad6f2..00000000 --- a/web/src/components/LightRAGInfoPanel.vue +++ /dev/null @@ -1,74 +0,0 @@ - - - - - \ No newline at end of file diff --git a/web/src/views/GraphView.vue b/web/src/views/GraphView.vue index 405a40e6..25951247 100644 --- a/web/src/views/GraphView.vue +++ b/web/src/views/GraphView.vue @@ -50,6 +50,7 @@ - + :open="state.showModal" title="上传文件" + @ok="addDocumentByFile" + @cancel="handleModalCancel" + ok-text="添加到图数据库" cancel-text="取消" + :confirm-loading="state.processing" + :ok-button-props="{ disabled: !hasValidFile }">

上传的文件内容参考 test/data/A_Dream_of_Red_Mansions_tiny.jsonl 中的格式：

@@ -193,8 +176,6 @@ import HeaderComponent from '@/components/HeaderComponent.vue'; import { neo4jApi, unifiedApi } from '@/apis/graph_api'; import { useUserStore } from '@/stores/user'; import GraphCanvas from '@/components/GraphCanvas.vue'; -import GraphInfoPanel from '@/components/GraphInfoPanel.vue'; -import LightRAGInfoPanel from '@/components/LightRAGInfoPanel.vue'; import GraphDetailPanel from '@/components/GraphDetailPanel.vue'; import UploadModal from '@/components/FileUploadModal.vue'; import { useGraph } from '@/composables/useGraph'; @@ -228,13 +209,6 @@ const state = reactive({ }) const isNeo4j = computed(() => { - // 当 selectedDbId 是 'neo4j' 时，或者以 'kb_' 开头时，我们认为它是 Neo4j 驱动的 - // 但是对于 kb_ 开头的，我们可能想要使用 LightRAGInfoPanel 的展示风格（因为它有 stats） - // 或者复用 GraphInfoPanel。 - // GraphInfoPanel 是为 'neo4j' 全局图设计的，包含了 model matching 检查等。 - // KBs (kb_*) 使用 Neo4j 存储，但逻辑上更接近 LightRAG 的"知识库"概念。 - // 为了让 LightRAGInfoPanel 能够展示 stats (get_stats 已经更新支持 kb_), - // 我们这里让 kb_ ID 返回 false，这样会进入 LightRAGInfoPanel 分支。 return state.selectedDbId === 'neo4j'; }); @@ -248,6 +222,20 @@ const unindexedCount = computed(() => { return graphInfo.value?.unindexed_node_count || 0; }); +const formattedGraphInfo = computed(() => { + if (isNeo4j.value) { + return { + node_count: graphInfo.value?.entity_count || 0, + edge_count: graphInfo.value?.relationship_count || 0 + } + } else { + return { + node_count: state.lightragStats?.total_nodes || 0, + edge_count: state.lightragStats?.total_edges || 0 + } + } +}) + const loadDatabases = async () => { state.loadingDatabases = true; try { @@ -636,8 +624,7 @@ const goToDatabasePage = () => { overflow: hidden; background: var(--gray-10); - .actions, - .footer { + .actions { display: flex; justify-content: space-between; margin: 20px 0;