From f7f54a56cc6bd01289e7ce6589dbc2aecb510e2e Mon Sep 17 00:00:00 2001 From: openclaw Date: Tue, 24 Mar 2026 09:03:48 +0000 Subject: [PATCH] feat(graph): add back-to-panorama button, legend component, and wire detail panel props (GAP-F3, GAP-F4) Co-Authored-By: Claude Opus 4.6 --- .../modules/graph/components/GraphLegend.vue | 91 +++++++++++++++++++ .../graph/components/GraphPanorama.vue | 39 +++++++- 2 files changed, 128 insertions(+), 2 deletions(-) create mode 100644 frontend/src/modules/graph/components/GraphLegend.vue diff --git a/frontend/src/modules/graph/components/GraphLegend.vue b/frontend/src/modules/graph/components/GraphLegend.vue new file mode 100644 index 0000000..7085a89 --- /dev/null +++ b/frontend/src/modules/graph/components/GraphLegend.vue @@ -0,0 +1,91 @@ + + + + + diff --git a/frontend/src/modules/graph/components/GraphPanorama.vue b/frontend/src/modules/graph/components/GraphPanorama.vue index dad8c4b..7fa58b7 100644 --- a/frontend/src/modules/graph/components/GraphPanorama.vue +++ b/frontend/src/modules/graph/components/GraphPanorama.vue @@ -9,7 +9,7 @@
Missing {{ scanResult.summary.missing }}
-
+
@@ -17,7 +17,20 @@ - + + +
+ + 当前: {{ drillDownNodeLabel }} +
+ +
@@ -28,6 +41,7 @@ import { storeToRefs } from 'pinia' import * as d3 from 'd3' import { useGraphStore } from '../composables/useGraph' import GraphDetail from './GraphDetail.vue' +import GraphLegend from './GraphLegend.vue' import type { GraphNode, GraphEdge } from '@/shared/types/api' const route = useRoute() @@ -79,6 +93,13 @@ function toggleDocumentView() { drawGraph() } +async function returnToPanorama() { + const projectId = route.params.id as string + isDrillDown.value = false + drillDownNodeLabel.value = '' + await store.loadGraph(projectId) +} + function drawGraph() { if (!svgRef.value || !graphView.value) return @@ -247,6 +268,8 @@ function drawGraph() { // Double-click -> drill down node.on('dblclick', (_event: any, d: any) => { const projectId = route.params.id as string + isDrillDown.value = true + drillDownNodeLabel.value = d.label store.loadNeighbors(projectId, d.id) }) @@ -321,4 +344,16 @@ watch(graphView, () => { drawGraph() }) color: white; border-color: #42A5F5; } +.drill-down-bar { + position: absolute; top: 12px; left: 12px; + display: flex; align-items: center; gap: 12px; + background: white; padding: 8px 16px; border-radius: 8px; + box-shadow: 0 2px 8px rgba(0,0,0,0.1); z-index: 10; +} +.back-btn { + background: #1976D2; color: white; border: none; + padding: 6px 12px; border-radius: 4px; cursor: pointer; font-size: 13px; +} +.back-btn:hover { background: #1565C0; } +.drill-down-label { font-size: 13px; color: #666; }