From d5a02254cd15727cd5f313fe324cfb7db9665da5 Mon Sep 17 00:00:00 2001
From: liuziting <liuziting2014@163.com>
Date: Wed, 21 Jan 2026 15:54:04 +0800
Subject: [PATCH] =?UTF-8?q?=E8=BF=9E=E6=8E=A5=E7=BA=BF=E4=BD=8D=E7=BD=AE?=
 =?UTF-8?q?=E4=BF=AE=E6=94=B9?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/App.vue | 31 +++++++++++++++++++------------
 1 file changed, 19 insertions(+), 12 deletions(-)

diff --git a/src/App.vue b/src/App.vue
index c93dac6..fe056ec 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -22,7 +22,7 @@ import {
     Grid3X3,
     Trash2
 } from 'lucide-vue-next'
-import { VueFlow, useVueFlow, Position, MarkerType } from '@vue-flow/core'
+import { VueFlow, useVueFlow, Position, MarkerType, Handle } from '@vue-flow/core'
 import { Background, BackgroundVariant } from '@vue-flow/background'
 import { Controls } from '@vue-flow/controls'
 import { toPng } from 'html-to-image'
@@ -251,7 +251,14 @@ const processSubNodes = (subNodes: any[], parentId: string, baseX: number, baseY
             id: childId,
             type: 'window',
             position: { x: baseX + offsetX, y: baseY + offsetY },
-            data: { label: item.text, description: item.description, type: 'child' },
+            data: {
+                label: item.text,
+                description: item.description,
+                type: 'child',
+                followUp: '',
+                isExpanding: false,
+                isImageLoading: false
+            },
             sourcePosition: Position.Right,
             targetPosition: Position.Left
         })
@@ -346,20 +353,24 @@ const startNewSession = () => {
                             'opacity-100 grayscale-0 blur-0 scale-105 z-50': activeNodeId === id
                         }"
                         :style="{
-                            borderColor: data.isExpanding || activeNodeId === id ? config.edgeColor : '',
+                            borderColor: activeNodeId === id ? config.edgeColor : config.edgeColor + '40',
                             boxShadow: activeNodeId === id ? `0 20px 50px -12px ${config.edgeColor}40` : ''
                         }"
                         @mouseenter="hoveredNodeId = id"
                         @mouseleave="hoveredNodeId = null"
                     >
+                        <!-- 增加连接锚点 -->
+                        <Handle type="target" :position="Position.Left" class="!bg-transparent !border-none" />
+                        <Handle type="source" :position="Position.Right" class="!bg-transparent !border-none" />
+
                         <!-- Window Header -->
-                        <div class="window-header" :style="{ backgroundColor: data.isExpanding || activeNodeId === id ? config.edgeColor + '10' : '' }">
+                        <div class="window-header" :style="{ backgroundColor: activeNodeId === id ? config.edgeColor + '15' : config.edgeColor + '05' }">
                             <div class="flex gap-1.5">
-                                <div class="w-2 h-2 rounded-full" :style="{ backgroundColor: data.isExpanding || activeNodeId === id ? config.edgeColor : '#f87171' }"></div>
-                                <div class="w-2 h-2 rounded-full bg-amber-400/80"></div>
-                                <div class="w-2 h-2 rounded-full bg-emerald-400/80"></div>
+                                <div class="w-2 h-2 rounded-full" :style="{ backgroundColor: config.edgeColor }"></div>
+                                <div class="w-2 h-2 rounded-full bg-slate-200"></div>
+                                <div class="w-2 h-2 rounded-full bg-slate-200"></div>
                             </div>
-                            <span class="window-title" :style="{ color: data.isExpanding || activeNodeId === id ? config.edgeColor : '' }">
+                            <span class="window-title" :style="{ color: config.edgeColor }">
                                 {{ data.type === 'root' ? 'main.ts' : 'module.tsx' }}
                             </span>
                         </div>
@@ -570,10 +581,6 @@ body {
     @apply p-0 border-none bg-transparent !important;
 }
 
-.vue-flow__edge-path {
-    @apply stroke-orange-200 !important;
-}
-
 .vue-flow__controls {
     @apply !bg-white !border-slate-200 !shadow-xl !rounded-lg !left-6 !bottom-6;
 }