From 690dde1cd01aad7c5bd7f8908b8dfb53fee169bb Mon Sep 17 00:00:00 2001
From: Kirigaya <1193466151@qq.com>
Date: Fri, 4 Jul 2025 02:47:34 +0800
Subject: [PATCH] finish auto detection

---
 renderer/public/iconfont.css                  |  14 +-
 renderer/public/iconfont.woff2                | Bin 7468 -> 7844 bytes
 .../auto-detector/diagram-item-record.vue     |  31 +-
 .../main-panel/tool/auto-detector/diagram.ts  |   2 +-
 .../main-panel/tool/auto-detector/diagram.vue | 161 ++++--
 .../main-panel/tool/auto-detector/index.vue   |  53 +-
 .../components/main-panel/tool/diagram.vue    | 547 ++++++++++++++++++
 7 files changed, 741 insertions(+), 67 deletions(-)
 create mode 100644 renderer/src/components/main-panel/tool/diagram.vue

diff --git a/renderer/public/iconfont.css b/renderer/public/iconfont.css
index 6b9f716..1df423b 100644
--- a/renderer/public/iconfont.css
+++ b/renderer/public/iconfont.css
@@ -1,8 +1,8 @@
 @font-face {
   font-family: "iconfont"; /* Project id 4870215 */
-  src: url('iconfont.woff2?t=1750532923458') format('woff2'),
-       url('iconfont.woff?t=1750532923458') format('woff'),
-       url('iconfont.ttf?t=1750532923458') format('truetype');
+  src: url('iconfont.woff2?t=1751568095152') format('woff2'),
+       url('iconfont.woff?t=1751568095152') format('woff'),
+       url('iconfont.ttf?t=1751568095152') format('truetype');
 }
 
 .iconfont {
@@ -13,6 +13,14 @@
   -moz-osx-font-smoothing: grayscale;
 }
 
+.icon-pin:before {
+  content: "\e863";
+}
+
+.icon-serial:before {
+  content: "\e78f";
+}
+
 .icon-deploy:before {
   content: "\e614";
 }
diff --git a/renderer/public/iconfont.woff2 b/renderer/public/iconfont.woff2
index c6056df561998cfb1e2f6348760d6cc4b1bd8e9e..51f904a866d10bf30a7ad5f8ae20e0293675191e 100644
GIT binary patch
literal 7844
zcmV;V9$VpePew8T0RR9103M_O3jhEB05~8303K5S0RR9100000000000000000000
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
C<nrYJ

literal 7468
zcmV+{9n<1>Pew8T0RR91039p<3jhEB05#kI036%^0RR9100000000000000000000
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

diff --git a/renderer/src/components/main-panel/tool/auto-detector/diagram-item-record.vue b/renderer/src/components/main-panel/tool/auto-detector/diagram-item-record.vue
index ed4fd92..210e39a 100644
--- a/renderer/src/components/main-panel/tool/auto-detector/diagram-item-record.vue
+++ b/renderer/src/components/main-panel/tool/auto-detector/diagram-item-record.vue
@@ -1,21 +1,24 @@
 <template>
     <div class="diagram-item-record" v-if="props.dataView && props.dataView.tool">
+        <div class="item-status" :class="props.dataView.status">{{ props.dataView.status }}</div>
+        
         <div class="item-header">
             <span class="item-title">{{ props.dataView.tool.name }}</span>
-            <span class="item-status" :class="props.dataView.status">{{ props.dataView.status }}</span>
-        </div>
+        </div>        
+
         <div class="item-desc">{{ props.dataView.tool.description }}</div>
 
-        <div v-if="props.dataView.function !== undefined" class="item-result">
-            <div class="item-label">Function</div>
-            <div class="item-json">{{ props.dataView.function.name }}</div>
-        </div>
+        <br>
 
         <div v-if="props.dataView.function !== undefined" class="item-result">
             <span class="item-label">Arguments</span>
-            <json-render :json="props.dataView.function.arguments" />
+            <div class="code-container">
+                <json-render :json="props.dataView.function.arguments" />
+            </div>
         </div>
 
+        <br>
+
         <div v-if="props.dataView.result !== undefined" class="item-result">
             <span class="item-label">Result</span>
             <template v-if="Array.isArray(props.dataView.result)">
@@ -85,10 +88,9 @@ function formatJson(obj: any) {
 }
 
 .item-status {
-    font-size: 13px;
-    padding: 2px 10px;
+    font-size: 15px;
+    padding: 5px 0;
     border-radius: 12px;
-    margin-left: 8px;
     text-transform: capitalize;
 }
 
@@ -127,7 +129,7 @@ function formatJson(obj: any) {
 .item-json {
     border-radius: 4px;
     padding: 6px 10px;
-    font-size: 13px;
+    font-size: 15px;
     font-family: var(--code-font-family, monospace);
     margin: 2px 0 8px 0;
     white-space: pre-wrap;
@@ -137,6 +139,13 @@ function formatJson(obj: any) {
     box-sizing: border-box;
 }
 
+.code-container {
+    margin-top: 10px;
+    border-radius: .3em;
+    padding: 0 10px;
+    background-color: var(--sidebar);
+}
+
 .item-result {
     margin-top: 6px;
 }
diff --git a/renderer/src/components/main-panel/tool/auto-detector/diagram.ts b/renderer/src/components/main-panel/tool/auto-detector/diagram.ts
index 3e27241..d797b0a 100644
--- a/renderer/src/components/main-panel/tool/auto-detector/diagram.ts
+++ b/renderer/src/components/main-panel/tool/auto-detector/diagram.ts
@@ -45,7 +45,7 @@ export interface NodeDataView {
 }
 
 export interface DiagramContext {
-    reset: () => void,
+    preset: (type: string) => void,
     render: () => void,
     state?: DiagramState,
     setCaption: (value: string) => void
diff --git a/renderer/src/components/main-panel/tool/auto-detector/diagram.vue b/renderer/src/components/main-panel/tool/auto-detector/diagram.vue
index 21d0cda..800c887 100644
--- a/renderer/src/components/main-panel/tool/auto-detector/diagram.vue
+++ b/renderer/src/components/main-panel/tool/auto-detector/diagram.vue
@@ -1,27 +1,38 @@
 <template>
-    <div style="display: flex; align-items: center; gap: 16px;">
+    <div style="display: flex; align-items: flex-start; gap: 32px;">
         <div ref="svgContainer" class="diagram-container"></div>
-
-        <template v-for="(node, index) in state.nodes" :key="node.id + '-popup'">
-            <transition name="collapse-from-top" mode="out-in">
-				<div
-					v-show="state.hoverNodeId === node.id && state.dataView.get(node.id)?.status !== 'waiting'"
-					@mouseenter="setHoverItem(node.id)"
-					@mouseleave="clearHoverItem()"
-					:style="getNodePopupStyle(node)"
-					class="node-popup"
-				>
-					<el-scrollbar height="100%" width="100%">
-                        <DiagramItemRecord :data-view="state.dataView.get(node.id)"/>
-                    </el-scrollbar>
-				</div>
-			</transition>
-        </template>
+        <div class="diagram-info-panel">
+            <div style="display: flex; justify-content: flex-end; align-items: center;">
+                <el-button
+                    circle
+                    size="small"
+                    :type="state.pinnedNodeId ? 'primary' : 'default'"
+                    @click="togglePin"
+                    style="margin-bottom: 4px;"
+                    :disabled="!infoNodeId"
+                >
+                    <span class="iconfont icon-pin"></span>
+                </el-button>
+            </div>
+            <template v-if="infoNodeId && state.dataView.get(infoNodeId)">
+                <el-scrollbar height="500px" width="300px">
+                    <DiagramItemRecord :data-view="state.dataView.get(infoNodeId)" />
+                </el-scrollbar>
+            </template>
+            <template v-else>
+                <div class="diagram-info-empty">
+                    <el-icon style="font-size: 32px; color: #bbb; margin-bottom: 8px;">
+                        <i-ep-InfoFilled />
+                    </el-icon>
+                    <div style="color: #bbb; font-size: 15px;">暂无节点信息</div>
+                </div>
+            </template>
+        </div>
     </div>
 </template>
 
 <script setup lang="ts">
-import { ref, onMounted, nextTick, reactive, inject } from 'vue';
+import { ref, onMounted, nextTick, reactive, inject, computed } from 'vue';
 import * as d3 from 'd3';
 import ELK from 'elkjs/lib/elk.bundled.js';
 import { mcpClientAdapter } from '@/views/connect/core';
@@ -53,6 +64,7 @@ const state = reactive({
     selectedNodeId: null as string | null,
     draggingNodeId: null as string | null,
     hoverNodeId: null as string | null,
+    pinnedNodeId: null as string | null, // 新增
     offset: { x: 0, y: 0 },
     dataView: new Map<string, NodeDataView>
 });
@@ -66,6 +78,7 @@ if (autoDetectDiagram) {
     autoDetectDiagram.views?.forEach(item => {
         state.dataView.set(item.tool.name, {
             tool: item.tool,
+            function: item.function, 
             status: item.status || 'waiting',
             result: item.result || null
         });
@@ -84,23 +97,38 @@ console.log(state.dataView);
 let cancelHoverHandler: NodeJS.Timeout | undefined = undefined;
 
 const setHoverItem = (id: string) => {
-	if (cancelHoverHandler) {
-		clearTimeout(cancelHoverHandler);
-	}
-	state.hoverNodeId = id;
-}
+    if (state.pinnedNodeId) return; // 如果已pin，不响应hover
+    if (cancelHoverHandler) {
+        clearTimeout(cancelHoverHandler);
+    }
+    state.hoverNodeId = id;
+};
 
 const clearHoverItem = () => {
-	cancelHoverHandler = setTimeout(() => {
-		if (cancelHoverHandler) {
-			clearTimeout(cancelHoverHandler);
-		}
-		if (state.hoverNodeId) {
-			state.hoverNodeId = null;
-		}
-	}, 300);
+    if (state.pinnedNodeId) return; // 如果已pin，不响应hover
+    cancelHoverHandler = setTimeout(() => {
+        if (cancelHoverHandler) {
+            clearTimeout(cancelHoverHandler);
+        }
+        if (state.hoverNodeId) {
+            state.hoverNodeId = null;
+        }
+    }, 300);
 };
 
+// pin 按钮点击事件
+function togglePin() {
+    if (state.pinnedNodeId) {
+        state.pinnedNodeId = null;
+    } else if (state.hoverNodeId) {
+        state.pinnedNodeId = state.hoverNodeId;
+    }
+}
+
+// 让面板内容始终显示 pinnedNodeId 优先
+const infoNodeId = computed(() => state.pinnedNodeId || state.hoverNodeId);
+
+
 const getAllTools = async () => {
     const items = [];
     for (const client of mcpClientAdapter.clients) {
@@ -154,7 +182,7 @@ const drawDiagram = async () => {
 
     // 如果保存了 edges 信息，则需要进行同步
     const reservedEdges = autoDetectDiagram?.edges;
-    if (reservedEdges) {
+    if (reservedEdges && reservedEdges.length > 0) {
         for (const edge of reservedEdges) {
             if (edge.sources && edge.targets && edge.sources.length > 0 && edge.targets.length > 0) {
                 edges.push({
@@ -379,7 +407,7 @@ function renderSvg() {
             state.draggingNodeId = null;
         })
         .on('mouseover', function (event, d) {
-			setHoverItem(d.id);
+            setHoverItem(d.id);
             d3.select(this).select('rect')
                 .transition()
                 .duration(200)
@@ -387,7 +415,7 @@ function renderSvg() {
                 .attr('stroke-width', 2);
         })
         .on('mouseout', function (event, d) {
-            clearHoverItem();
+            // clearHoverItem();
             if (state.selectedNodeId === d.id) return;
             d3.select(this).select('rect')
                 .transition()
@@ -413,7 +441,7 @@ function renderSvg() {
         .attr('fill', 'var(--main-color)')
         .attr('font-weight', 600)
         .text(d => d.labels?.[0]?.text || 'Tool');
-		
+
     nodeGroupEnter.append('g').attr('class', 'node-status');
 
     // 合并 enter+update
@@ -557,7 +585,7 @@ function renderSvg() {
 }
 
 // 重置连接为链表结构
-function resetConnections() {
+function serialConnection() {
     if (!state.nodes.length) return;
     const edges = [];
     for (let i = 0; i < state.nodes.length - 1; ++i) {
@@ -573,8 +601,21 @@ function resetConnections() {
     recomputeLayout().then(renderSvg);
 }
 
+function parallelConnection() {
+    if (!state.nodes.length) return;
+    const edges = [] as Edge[];
+    state.edges = edges;
+    recomputeLayout().then(renderSvg);
+}
+
 const context = inject('context') as any;
-context.reset = resetConnections;
+context.preset = (type: string) => {
+    if (type === 'serial') {
+        serialConnection();
+    } else if (type === 'parallel') {
+        parallelConnection();
+    }
+};
 context.state = state;
 context.render = renderSvg;
 
@@ -590,7 +631,7 @@ function getNodePopupStyle(node: any): any {
     const marginY = 80;
     const popupWidth = 300;
     const popupHeight = 500;
-    
+
     let left = (node.x || 0) + (node.width || 160) + 100;
     let top = (node.y || 0) + 30;
 
@@ -619,13 +660,12 @@ function getNodePopupStyle(node: any): any {
 
 <style>
 .diagram-container {
-    width: 100%;
+    width: 600px;
     min-height: 200px;
-    display: flex;
-    justify-content: center;
-    align-items: flex-start;
     border-radius: 8px;
     padding: 24px 0;
+    display: flex;
+    justify-content: flex-start;
     overflow-x: auto;
 }
 
@@ -651,4 +691,41 @@ function getNodePopupStyle(node: any): any {
         transform: rotate(360deg);
     }
 }
+
+.diagram-container {
+    width: 600px;
+    min-height: 200px;
+    display: flex;
+    align-items: flex-start;
+    border-radius: 8px;
+    padding: 24px 0;
+    overflow-x: auto;
+}
+
+.diagram-info-panel {
+    position: absolute;
+    right: 30px;
+    top: 10px;
+    width: 300px;
+    min-height: 180px;
+    border: 1px solid var(--main-color);
+    border-radius: 12px;
+    box-shadow: 0 2px 12px 0 rgba(0,0,0,0.06);
+    padding: 10px;
+    display: flex;
+    flex-direction: column;
+    margin-top: 8px;
+    transition: box-shadow 0.2s;
+}
+
+.diagram-info-empty {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    height: 100%;
+    min-height: 120px;
+    opacity: 0.85;
+    font-size: 15px;
+}
 </style>
\ No newline at end of file
diff --git a/renderer/src/components/main-panel/tool/auto-detector/index.vue b/renderer/src/components/main-panel/tool/auto-detector/index.vue
index e06d66d..6b624ec 100644
--- a/renderer/src/components/main-panel/tool/auto-detector/index.vue
+++ b/renderer/src/components/main-panel/tool/auto-detector/index.vue
@@ -4,15 +4,30 @@
             <div style="display: flex; align-items: center;">
                 <span>Tool Diagram</span>
                 &ensp;
-                <el-button size="small" type="primary" @click="() => context.reset()">{{ t("reset") }}</el-button>
-                <!-- 自检程序弹出表单 -->
+                <!-- 重置按钮弹出下拉列表 -->
+                <el-popover placement="bottom" width="180" trigger="click" v-model:visible="resetPopoverVisible">
+                    <template #reference>
+                        <el-button size="small" type="primary">
+                            {{ t("preset") }}
+                        </el-button>
+                    </template>
+                    <div style="display: flex; gap: 8px;">
+                        <el-button size="small" @click="tomoPreset('serial')">
+                            <span class="iconfont icon-serial"></span>
+                        </el-button>
+                        <el-button size="small" @click="tomoPreset('parallel')">
+                            <span class="iconfont icon-parallel"></span>
+                        </el-button>
+                    </div>
+                </el-popover>
+                <!-- 原有自检程序弹出表单 -->
                 <el-popover placement="top" width="350" trigger="click" v-model:visible="testFormVisible">
                     <template #reference>
                         <el-button size="small" type="primary">
                             {{ t('start-auto-detect') }}
                         </el-button>
                     </template>
-
+                    <!-- ...原有自检表单内容... -->
                     <el-input type="textarea" v-model="testPrompt" :rows="2" style="margin-bottom: 8px;"
                         placeholder="请输入 prompt" />
                     <div style="display: flex; align-items: center; margin-bottom: 8px;">
@@ -34,11 +49,21 @@
         <el-scrollbar height="80vh">
             <Diagram :tab-id="props.tabId" />
         </el-scrollbar>
-        <transition name="main-fade" mode="out-in">
-            <div class="caption" v-show="showCaption">
-                {{ caption }}
-            </div>
-        </transition>
+   
+        <div class="caption" v-if="showCaption">
+            {{ caption }}
+        </div>
+        <div v-else>
+            <span class="caption">
+            <el-tooltip
+                placement="top"
+                effect="light"
+                content="点击连接线取消连接，点击节点以创建连接"
+            >
+                <span class="iconfont icon-about"></span>
+            </el-tooltip>
+            </span>
+        </div>
     </el-dialog>
 </template>
 
@@ -88,7 +113,7 @@ function setCaption(text: string) {
 }
 
 const context: DiagramContext = {
-    reset: () => { },
+    preset: () => { },
     render: () => { },
     state: undefined,
     setCaption
@@ -144,16 +169,24 @@ async function onTestConfirm() {
 
 
 }
+
+const resetPopoverVisible = ref(false);
+
+function tomoPreset(type: string) {
+    resetPopoverVisible.value = false;
+    context.preset?.(type);
+}
 </script>
 
 <style>
 .no-padding-dialog {
     margin-top: 30px !important;
+    width: 90vw !important;
 }
 
 .no-padding-dialog .caption {
     position: absolute;
-    left: 20px;
+    right: 30px;
     bottom: 10px;
     margin: 0 auto;
     width: fit-content;
diff --git a/renderer/src/components/main-panel/tool/diagram.vue b/renderer/src/components/main-panel/tool/diagram.vue
new file mode 100644
index 0000000..482a878
--- /dev/null
+++ b/renderer/src/components/main-panel/tool/diagram.vue
@@ -0,0 +1,547 @@
+<template>
+    <div style="display: flex; align-items: center; gap: 16px;">
+        <div ref="svgContainer" class="diagram-container"></div>
+
+        <!-- <template v-for="(node, index) in state.nodes" :key="node.id + '-popup'">
+            <div
+                v-if="state.hoverNodeId === node.id"
+                :style="getNodePopupStyle(node)"
+                class="node-popup"
+            >
+                <div>节点：{{ node.labels?.[0]?.text || node.id }}</div>
+                <div>宽: {{ node.width }}, 高: {{ node.height }}</div>
+            </div>
+        </template> -->
+    </div>
+</template>
+
+<script setup lang="ts">
+import { ref, onMounted, nextTick, reactive, inject } from 'vue';
+import * as d3 from 'd3';
+import ELK from 'elkjs/lib/elk.bundled.js';
+import { mcpClientAdapter } from '@/views/connect/core';
+import { invalidConnectionDetector, type Edge, type Node, type NodeDataView } from './diagram';
+import { ElMessage } from 'element-plus';
+
+
+const svgContainer = ref<HTMLDivElement | null>(null);
+let prevNodes: any[] = [];
+let prevEdges: any[] = [];
+
+const state = reactive({
+    nodes: [] as any[],
+    edges: [] as any[],
+    selectedNodeId: null as string | null,
+    draggingNodeId: null as string | null,
+    hoverNodeId: null as string | null,
+    offset: { x: 0, y: 0 },
+    dataView: new Map<string, NodeDataView>
+});
+
+const getAllTools = async () => {
+    const items = [];
+    for (const client of mcpClientAdapter.clients) {
+        const clientTools = await client.getTools();
+        items.push(...clientTools.values());
+    }
+    return items;
+};
+
+const recomputeLayout = async () => {
+    const elk = new ELK();
+    const elkGraph = {
+        id: 'root',
+        layoutOptions: {
+            'elk.direction': 'DOWN',
+            'elk.spacing.nodeNode': '40',
+            'elk.layered.spacing.nodeNodeBetweenLayers': '40'
+        },
+        children: state.nodes,
+        edges: state.edges
+    };
+    const layout = await elk.layout(elkGraph) as Node;
+    state.nodes.forEach((n, i) => {
+        const ln = layout.children?.find(c => c.id === n.id);
+        if (ln) {
+            n.x = ln.x;
+            n.y = ln.y;
+            n.width = ln.width;
+            n.height = ln.height;
+        }
+    });
+    state.edges = layout.edges || [];
+    return layout;
+};
+
+const drawDiagram = async () => {
+    const tools = await getAllTools();
+
+    // 默认按照链表进行串联
+    const nodes = [] as Node[];
+    const edges = [] as Edge[];
+
+    for (let i = 0; i < tools.length - 1; ++i) {
+        const prev = tools[i];
+        const next = tools[i + 1];
+        edges.push({
+            id: prev.name + '-' + next.name,
+            sources: [prev.name],
+            targets: [next.name]
+        })
+    }
+
+    for (const tool of tools) {
+        nodes.push({
+            id: tool.name,
+            width: 200,
+            height: 64, // 增加高度
+            labels: [{ text: tool.name || 'Tool' }]
+        });
+
+        state.dataView.set(tool.name, {
+            tool,
+            status: 'waiting',
+            result: null
+        });
+    }
+
+    state.edges = edges;
+    state.nodes = nodes;
+
+    // 重新计算布局
+    await recomputeLayout();
+
+    // 绘制 svg
+    renderSvg();
+};
+
+function renderSvg() {
+    const prevNodeMap = new Map(prevNodes.map(n => [n.id, n]));
+    const prevEdgeMap = new Map(prevEdges.map(e => [e.id, e]));
+
+    // 计算所有节点的最小x和最大x
+    const xs = state.nodes.map(n => (n.x || 0));
+    const minX = Math.min(...xs);
+    const maxX = Math.max(...xs.map((x, i) => x + (state.nodes[i].width || 160)));
+    const contentWidth = maxX - minX;
+    const svgWidth = Math.max(contentWidth + 120, 400); // 120为两侧留白
+    const offsetX = (svgWidth - contentWidth) / 2 - minX;
+
+    const height = Math.max(...state.nodes.map(n => (n.y || 0) + (n.height || 48)), 300) + 60;
+
+    // 不再全量清空，只清空 svg 元素
+    let svg = d3.select(svgContainer.value).select('svg');
+    if (svg.empty()) {
+        svg = d3
+            .select(svgContainer.value)
+            .append('svg')
+            .attr('width', svgWidth)
+            .attr('height', height)
+            .style('user-select', 'none') as any;
+    } else {
+        svg.attr('width', svgWidth).attr('height', height);
+        svg.selectAll('defs').remove();
+    }
+
+    // Arrow marker
+    svg
+        .append('defs')
+        .append('marker')
+        .attr('id', 'arrow')
+        .attr('viewBox', '0 0 8 8')
+        .attr('refX', 6)
+        .attr('refY', 4)
+        .attr('markerWidth', 5)
+        .attr('markerHeight', 5)
+        .attr('orient', 'auto')
+        .append('path')
+        .attr('d', 'M 0 0 L 8 4 L 0 8 z')
+        .attr('fill', 'var(--main-color)');
+
+    // 1. 创建/获取 main group
+    let mainGroup = svg.select('g.main-group');
+    if (mainGroup.empty()) {
+        mainGroup = svg.append('g').attr('class', 'main-group') as any;
+    }
+    mainGroup
+        .transition()
+        .duration(600)
+        .attr('transform', `translate(${offsetX}, 0)`);
+
+    // Draw edges with enter animation
+    const allSections: { id: string, section: any }[] = [];
+    (state.edges || []).forEach(edge => {
+        const sections = edge.sections || [];
+        sections.forEach((section: any, idx: number) => {
+            allSections.push({
+                id: (edge.id || '') + '-' + (section.id || idx),
+                section
+            });
+        });
+    });
+
+    const edgeSelection = mainGroup.selectAll<SVGLineElement, any>('.edge')
+        .data(allSections, d => d.id);
+
+    edgeSelection.exit().remove();
+
+    const edgeEnter = edgeSelection.enter()
+        .append('line')
+        .attr('class', 'edge')
+        .attr('x1', d => {
+            const prev = prevEdgeMap.get(d.id);
+            return prev && prev.sections && prev.sections[0]
+                ? prev.sections[0].startPoint.x + 30
+                : d.section.startPoint.x + 30;
+        })
+        .attr('y1', d => {
+            const prev = prevEdgeMap.get(d.id);
+            return prev && prev.sections && prev.sections[0]
+                ? prev.sections[0].startPoint.y + 30
+                : d.section.startPoint.y + 30;
+        })
+        .attr('x2', d => {
+            const prev = prevEdgeMap.get(d.id);
+            return prev && prev.sections && prev.sections[0]
+                ? prev.sections[0].endPoint.x + 30
+                : d.section.endPoint.x + 30;
+        })
+        .attr('y2', d => {
+            const prev = prevEdgeMap.get(d.id);
+            return prev && prev.sections && prev.sections[0]
+                ? prev.sections[0].endPoint.y + 30
+                : d.section.endPoint.y + 30;
+        })
+        .attr('stroke', 'var(--main-color)')
+        .attr('stroke-width', 2.5)
+        .attr('marker-end', 'url(#arrow)')
+        .attr('opacity', 0);
+
+    edgeEnter
+        .transition()
+        .duration(600)
+        .attr('opacity', 1)
+        .attr('x1', d => d.section.startPoint.x + 30)
+        .attr('y1', d => d.section.startPoint.y + 30)
+        .attr('x2', d => d.section.endPoint.x + 30)
+        .attr('y2', d => d.section.endPoint.y + 30);
+
+    // update + 动画（注意这里不再 transition opacity）
+    edgeSelection.merge(edgeEnter)
+        .transition()
+        .duration(600)
+        .ease(d3.easeCubicInOut)
+        .attr('x1', d => d.section.startPoint.x + 30)
+        .attr('y1', d => d.section.startPoint.y + 30)
+        .attr('x2', d => d.section.endPoint.x + 30)
+        .attr('y2', d => d.section.endPoint.y + 30)
+        .attr('opacity', 1);
+
+    // --- 节点动画部分 ---
+    const nodeGroup = mainGroup.selectAll<SVGGElement, any>('.node')
+        .data(state.nodes, d => d.id);
+
+    nodeGroup.exit().remove();
+
+    // 节点 enter
+    const nodeGroupEnter = nodeGroup.enter()
+        .append('g')
+        .attr('class', 'node')
+        .attr('transform', d => {
+            const prev = prevNodeMap.get(d.id);
+            if (prev) {
+                return `translate(${(prev.x || 0) + 30}, ${(prev.y || 0) + 30})`;
+            }
+            return `translate(${(d.x || 0) + 30}, ${(d.y || 0) + 30})`;
+        })
+        .style('cursor', 'pointer')
+        .attr('opacity', 0)
+        .on('mousedown', null)
+        .on('mouseup', function (event, d) {
+            event.stopPropagation();
+            if (state.selectedNodeId) {
+
+                const { canConnect, reason } = invalidConnectionDetector(state, d);
+
+                console.log(reason);
+
+
+                if (reason) {
+                    ElMessage.warning(reason);
+                }
+
+                if (canConnect) {
+                    state.edges.push({
+                        id: `e${state.selectedNodeId}_${d.id}_${Date.now()}`,
+                        sources: [state.selectedNodeId],
+                        targets: [d.id]
+                    });
+                    state.selectedNodeId = null;
+                    recomputeLayout().then(renderSvg);
+                } else {
+                    // 已存在则只取消选中
+                    state.selectedNodeId = null;
+                    renderSvg();
+                }
+                context.setCaption('');
+
+            } else {
+                state.selectedNodeId = d.id;
+                renderSvg();
+                context.setCaption('选择另一个节点以定义测试拓扑');
+            }
+            state.draggingNodeId = null;
+        })
+        .on('mouseover', function (event, d) {
+            state.hoverNodeId = d.id;
+            d3.select(this).select('rect')
+                .transition()
+                .duration(200)
+                .attr('stroke', 'var(--main-color)')
+                .attr('stroke-width', 2);
+        })
+        .on('mouseout', function (event, d) {
+            state.hoverNodeId = null;
+            if (state.selectedNodeId === d.id) return;
+            d3.select(this).select('rect')
+                .transition()
+                .duration(200)
+                .attr('stroke', 'var(--main-light-color-10)')
+                .attr('stroke-width', 1);
+        });
+
+    nodeGroupEnter.append('rect')
+        .attr('width', d => d.width)
+        .attr('height', d => d.height)
+        .attr('rx', 16)
+        .attr('fill', 'var(--main-light-color-20)')
+        .attr('stroke', d => state.selectedNodeId === d.id ? 'var(--main-color)' : 'var(--main-light-color-10)')
+        .attr('stroke-width', 2);
+
+    // 节点文字
+    nodeGroupEnter.append('text')
+        .attr('x', d => d.width / 2)
+        .attr('y', d => d.height / 2 - 6) // 上移一点
+        .attr('text-anchor', 'middle')
+        .attr('font-size', 16)
+        .attr('fill', 'var(--main-color)')
+        .attr('font-weight', 600)
+        .text(d => d.labels?.[0]?.text || 'Tool');
+
+    // 状态条
+    nodeGroupEnter.append('g')
+        .attr('class', 'node-status')
+        .each(function (d) {
+            const status = state.dataView.get(d.id)?.status || 'waiting';
+            const g = d3.select(this);
+            if (status === 'running') {
+                // 动画圆环+文字
+                g.append('circle')
+                    .attr('cx', d.width / 2 - 32)
+                    .attr('cy', d.height - 16)
+                    .attr('r', 6) // 半径更小
+                    .attr('fill', 'none')
+                    .attr('stroke', 'var(--main-color)') // 使用主题色
+                    .attr('stroke-width', 3)
+                    .attr('stroke-dasharray', 20)
+                    .attr('stroke-dashoffset', 0)
+                    .append('animateTransform')
+                    .attr('attributeName', 'transform')
+                    .attr('attributeType', 'XML')
+                    .attr('type', 'rotate')
+                    .attr('from', `0 ${(d.width / 2 - 32)} ${(d.height - 16)}`)
+                    .attr('to', `360 ${(d.width / 2 - 32)} ${(d.height - 16)}`)
+                    .attr('dur', '1s')
+                    .attr('repeatCount', 'indefinite');
+                g.append('text')
+                    .attr('x', d.width / 2 - 16)
+                    .attr('y', d.height - 12)
+                    .attr('font-size', 13)
+                    .attr('fill', 'var(--main-color)')
+                    .text('running');
+            } else if (status === 'waiting') {
+                g.append('circle')
+                    .attr('cx', d.width / 2 - 32)
+                    .attr('cy', d.height - 16)
+                    .attr('r', 6)
+                    .attr('fill', 'none')
+                    .attr('stroke', '#bdbdbd')
+                    .attr('stroke-width', 3);
+                g.append('text')
+                    .attr('x', d.width / 2 - 16)
+                    .attr('y', d.height - 12)
+                    .attr('font-size', 13)
+                    .attr('fill', '#bdbdbd')
+                    .text('waiting');
+            } else if (status === 'success') {
+                g.append('circle')
+                    .attr('cx', d.width / 2 - 32)
+                    .attr('cy', d.height - 16)
+                    .attr('r', 6) // 保持和 waiting 一致
+                    .attr('fill', 'none')
+                    .attr('stroke', '#4caf50')
+                    .attr('stroke-width', 3);
+                g.append('text')
+                    .attr('x', d.width / 2 - 16)
+                    .attr('y', d.height - 12)
+                    .attr('font-size', 13)
+                    .attr('fill', '#4caf50')
+                    .text('success');
+            } else if (status === 'error') {
+                g.append('circle')
+                    .attr('cx', d.width / 2 - 32)
+                    .attr('cy', d.height - 16)
+                    .attr('r', 6) // 保持和 waiting 一致
+                    .attr('fill', 'none')
+                    .attr('stroke', '#f44336')
+                    .attr('stroke-width', 3);
+                g.append('text')
+                    .attr('x', d.width / 2 - 16)
+                    .attr('y', d.height - 12)
+                    .attr('font-size', 13)
+                    .attr('fill', '#f44336')
+                    .text('error');
+            }
+        });
+    // 节点 enter 动画
+    nodeGroupEnter
+        .transition()
+        .duration(600)
+        .attr('opacity', 1)
+        .attr('transform', d => `translate(${(d.x || 0) + 30}, ${(d.y || 0) + 30})`);
+
+    // 节点 update 动画
+    nodeGroup
+        .transition()
+        .duration(600)
+        .ease(d3.easeCubicInOut)
+        .attr('transform', d => `translate(${(d.x || 0) + 30}, ${(d.y || 0) + 30})`);
+
+    // 高亮选中节点动画
+    nodeGroup.select('rect')
+        .transition()
+        .duration(400)
+        .attr('stroke-width', d => state.selectedNodeId === d.id ? 2 : 1)
+        .attr('stroke', d => state.selectedNodeId === d.id ? 'var(--main-color)' : 'var(--main-light-color-10)');
+
+    // 边高亮
+    svg.selectAll<SVGLineElement, any>('.edge')
+        .on('mouseover', function () {
+            d3.select(this)
+                .transition()
+                .duration(200)
+                .attr('stroke', 'var(--main-color)')
+                .attr('stroke-width', 4.5);
+
+            context.setCaption('点击边以删除');
+
+        })
+        .on('mouseout', function () {
+            d3.select(this)
+                .transition()
+                .duration(200)
+                .attr('stroke', 'var(--main-color)')
+                .attr('stroke-width', 2.5);
+
+            context.setCaption('');
+        })
+        .on('click', function (event, d) {
+            // 只删除当前 edge
+            state.edges = state.edges.filter(e => {
+                // 多段 edge 情况
+                if (e.sections) {
+                    // 只保留不是当前 section 的
+                    return !e.sections.some((section: any, idx: number) =>
+                        ((e.id || '') + '-' + (section.id || idx)) === d.id
+                    );
+                }
+                // 单段 edge 情况
+                return e.id !== d.id && e.id !== d.section?.id;
+            });
+            recomputeLayout().then(renderSvg);
+            event.stopPropagation();
+        });
+
+    // 渲染结束后保存当前快照
+    prevNodes = state.nodes.map(n => ({ ...n }));
+    prevEdges = (state.edges || []).map(e => ({ ...e, sections: e.sections ? e.sections.map((s: any) => ({ ...s })) : [] }));
+}
+
+// 重置连接为链表结构
+function resetConnections() {
+    if (!state.nodes.length) return;
+    const edges = [];
+    for (let i = 0; i < state.nodes.length - 1; ++i) {
+        const prev = state.nodes[i];
+        const next = state.nodes[i + 1];
+        edges.push({
+            id: prev.id + '-' + next.id,
+            sources: [prev.id],
+            targets: [next.id]
+        });
+    }
+    state.edges = edges;
+    recomputeLayout().then(renderSvg);
+}
+
+const context = inject('context') as any;
+context.reset = resetConnections;
+context.state = state;
+context.render = renderSvg;
+
+onMounted(() => {
+    nextTick(drawDiagram);
+});
+
+// 4. 计算窗口位置
+function getNodePopupStyle(node: any): any {
+    // 节点的 svg 坐标转为容器内绝对定位
+    // 注意：这里假设 offsetX、node.x、node.y 已经是最新的
+    console.log(node);
+
+    const left = (node.x || 0) + (node.width || 160) - 120; // 节点右侧
+    const top = (node.y || 0) + 30; // 节点顶部对齐
+    return {
+        position: 'absolute',
+        left: `${left}px`,
+        top: `${top}px`,
+    };
+}
+</script>
+
+<style>
+.diagram-container {
+    width: 100%;
+    min-height: 200px;
+    display: flex;
+    justify-content: center;
+    align-items: flex-start;
+    border-radius: 8px;
+    padding: 24px 0;
+    overflow-x: auto;
+}
+
+.node-popup {
+    position: absolute;
+    background: var(--background);
+    border: 1px solid var(--main-color);
+    width: 240px;
+    border-radius: 8px;
+    padding: 8px 12px;
+    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
+    white-space: nowrap;
+    z-index: 10;
+}
+
+/* 旋转动画 */
+.status-running-circle {
+    animation: spin 1s linear infinite;
+    transform-origin: center;
+}
+
+@keyframes spin {
+    100% {
+        transform: rotate(360deg);
+    }
+}
+</style>
\ No newline at end of file