diff --git a/backend/server.py b/backend/server.py
index 970193e..bd6471a 100644
--- a/backend/server.py
+++ b/backend/server.py
@@ -2381,6 +2381,118 @@ def handle_save_task_process_branches(data):
         })
 
 
+@socketio.on('delete_task_process_branch')
+def handle_delete_task_process_branch(data):
+    """
+    WebSocket版本：删除任务过程分支数据
+
+    请求格式：
+    {
+        "id": "request-id",
+        "action": "delete_task_process_branch",
+        "data": {
+            "task_id": "task-id",  // 大任务ID（数据库主键）
+            "stepId": "step-id",   // 小任务ID
+            "branchId": "branch-id" // 要删除的分支ID
+        }
+    }
+
+    数据库存储格式：
+    {
+        "branches": {
+            "flow_branches": [...],
+            "task_process_branches": {
+                "stepId-1": {
+                    '["AgentA","AgentB"]': [{...分支数据...}]
+                }
+            }
+        }
+    }
+    """
+    request_id = data.get('id')
+    incoming_data = data.get('data', {})
+    task_id = incoming_data.get('task_id')
+    step_id = incoming_data.get('stepId')
+    branch_id = incoming_data.get('branchId')
+
+    if not task_id or not step_id or not branch_id:
+        emit('response', {
+            'id': request_id,
+            'status': 'error',
+            'error': '缺少必要参数：task_id, stepId, branchId'
+        })
+        return
+
+    try:
+        with get_db_context() as db:
+            # 获取现有的 branches 数据
+            existing_task = MultiAgentTaskCRUD.get_by_id(db, task_id)
+
+            if existing_task:
+                # 使用深拷贝避免修改共享引用
+                existing_branches = copy.deepcopy(existing_task.branches) if existing_task.branches else {}
+
+                if isinstance(existing_branches, dict):
+                    # 获取现有的 task_process_branches
+                    task_process_branches = existing_branches.get('task_process_branches', {})
+
+                    if step_id in task_process_branches:
+                        # 获取该 stepId 下的所有 agent 分支
+                        step_branches = task_process_branches[step_id]
+
+                        # 遍历所有 agentGroupKey，删除对应分支
+                        for agent_key, branches_list in step_branches.items():
+                            # 过滤掉要删除的分支
+                            filtered_branches = [b for b in branches_list if b.get('id') != branch_id]
+
+                            if len(filtered_branches) != len(branches_list):
+                                # 有分支被删除，更新数据
+                                if filtered_branches:
+                                    step_branches[agent_key] = filtered_branches
+                                else:
+                                    # 如果该 agentKey 下没有分支了，删除该 key
+                                    del step_branches[agent_key]
+
+                        # 如果该 stepId 下没有分支了，删除该 stepId
+                        if not step_branches:
+                            del task_process_branches[step_id]
+
+                        # 更新 branches 数据
+                        existing_branches['task_process_branches'] = task_process_branches
+
+                        # 直接更新数据库
+                        existing_task.branches = existing_branches
+                        db.flush()
+                        db.commit()
+
+                        print(f"[delete_task_process_branch] 删除成功，task_id={task_id}, step_id={step_id}, branch_id={branch_id}")
+
+                        emit('response', {
+                            'id': request_id,
+                            'status': 'success',
+                            'data': {
+                                "message": "分支删除成功",
+                                "deleted_branch_id": branch_id
+                            }
+                        })
+                        return
+
+            # 如果找不到对应的分支
+            print(f"[delete_task_process_branch] 警告: 找不到要删除的分支，task_id={task_id}, step_id={step_id}, branch_id={branch_id}")
+            emit('response', {
+                'id': request_id,
+                'status': 'error',
+                'error': '未找到要删除的分支'
+            })
+
+    except Exception as e:
+        emit('response', {
+            'id': request_id,
+            'status': 'error',
+            'error': str(e)
+        })
+
+
 @socketio.on('save_task_outline')
 def handle_save_task_outline(data):
     """
diff --git a/frontend/src/api/index.ts b/frontend/src/api/index.ts
index 1a96562..a37140d 100644
--- a/frontend/src/api/index.ts
+++ b/frontend/src/api/index.ts
@@ -677,6 +677,37 @@ class Api {
     }
   }
 
+  /**
+   * 删除任务过程分支数据
+   * @param TaskID 大任务ID
+   * @param stepId 小任务ID
+   * @param branchId 要删除的分支ID
+   * @returns 是否删除成功
+   */
+  deleteTaskProcessBranch = async (
+    TaskID: string,
+    stepId: string,
+    branchId: string,
+  ): Promise<boolean> => {
+    if (!websocket.connected) {
+      throw new Error('WebSocket未连接')
+    }
+
+    try {
+      const rawResponse = await websocket.send('delete_task_process_branch', {
+        task_id: TaskID,
+        stepId,
+        branchId,
+      })
+
+      const response = this.extractResponse<{ status: string }>(rawResponse)
+      return response?.status === 'success' || false
+    } catch (error) {
+      console.error('删除任务过程分支数据失败:', error)
+      return false
+    }
+  }
+
   /**
    * 更新任务大纲数据
    * @param taskId 任务ID
diff --git a/frontend/src/layout/components/Main/TaskTemplate/TaskProcess/components/PlanTask.vue b/frontend/src/layout/components/Main/TaskTemplate/TaskProcess/components/PlanTask.vue
index 8354008..0af2a09 100644
--- a/frontend/src/layout/components/Main/TaskTemplate/TaskProcess/components/PlanTask.vue
+++ b/frontend/src/layout/components/Main/TaskTemplate/TaskProcess/components/PlanTask.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { ref, computed, nextTick, onMounted } from 'vue'
+import { ref, computed, nextTick, onMounted, onUpdated, watch } from 'vue'
 import { VueFlow, useVueFlow, Handle, Position, type Node, type Edge } from '@vue-flow/core'
 import '@vue-flow/core/dist/style.css'
 import '@vue-flow/core/dist/theme-default.css'
@@ -12,6 +12,8 @@ import {
 } from '@/stores'
 import { getAgentMapIcon, getActionTypeDisplay } from '@/layout/components/config.ts'
 import SvgIcon from '@/components/SvgIcon/index.vue'
+import BranchInput from '@/components/BranchInput/index.vue'
+import DeleteConfirmDialog from '@/components/DeleteConfirmDialog/index.vue'
 import { ElTooltip, ElIcon, ElMessage } from 'element-plus'
 import { CirclePlus, Remove } from '@element-plus/icons-vue'
 import api from '@/api'
@@ -22,27 +24,63 @@ const selectionStore = useSelectionStore()
 const { onConnect, addEdges, fitView: fit } = useVueFlow()
 
 // 直接从 store 获取当前任务和任务过程数据
-const currentTask = computed(() => agentsStore.currentTask)
+const currentTask = computed(() => agentsStore.currentTask)!
 const taskProcess = computed(() => agentsStore.currentTask?.TaskProcess ?? [])
+const currentTaskContent = computed(() => agentsStore.currentTask?.TaskContent || '')
 
 // 添加分支相关状态
 const addingBranchNodeId = ref<string | null>(null)
-const branchInput = ref('')
-const branchInputRef = ref<InstanceType<typeof HTMLInputElement>>()
+const branchInputRef = ref<InstanceType<typeof BranchInput> | null>(null)
 
 // 分支加载状态
 const branchLoading = ref(false)
 
+// 删除分支弹窗相关状态
+const deleteDialogVisible = ref(false)
+const branchIdToDelete = ref<string | null>(null)
+
 // 节点和边数据
 const nodes = ref<Node[]>([])
 const edges = ref<Edge[]>([])
 
+// 边样式计算属性 - 与PlanModification.vue保持一致
+const styledEdges = computed(() => {
+  return edges.value.map(edge => {
+    // 根节点永远参与高亮
+    const sourceIsRoot = edge.source === 'root' || edge.source === 'root-goal'
+    const targetIsRoot = edge.target === 'root' || edge.target === 'root-goal'
+    const sourceSelected = selectedNodeIds.value.has(edge.source) || sourceIsRoot
+    const targetSelected = selectedNodeIds.value.has(edge.target) || targetIsRoot
+    const isHighlighted = sourceSelected && targetSelected
+
+    return {
+      ...edge,
+      style: {
+        stroke: isHighlighted ? 'var(--color-node-active)' : 'var(--color-node-border)',
+        strokeWidth: 2
+      },
+      markerEnd: {
+        type: 'arrow' as any,
+        color: isHighlighted ? 'var(--color-node-active)' : 'var(--color-node-border)',
+        width: 20,
+        height: 20,
+        strokeWidth: 2
+      },
+      class: isHighlighted ? 'edge-highlighted' : 'edge-normal'
+    }
+  })
+})
+
 //当前选中的节点ID集合
 const selectedNodeIds = ref<Set<string>>(new Set())
 
 // 用于防止重复同步的标志
 let isSyncing = false
 
+// 节点位置常量（与 PlanModification.vue 保持一致）
+const START_X = 40
+const START_Y = 50
+
 //初始化标记，避免重复初始化
 const BRANCHES_INIT_KEY_PREFIX = 'plan-task-branches-initialized-'
 
@@ -64,8 +102,9 @@ const createFlowEdge = (
   target: string,
   sourceHandle: string = 'right',
   targetHandle: string = 'left',
-  strokeColor: string = '#43a8aa',
-  isFirstNode: boolean = false
+  strokeColor: string = 'var(--color-node-border)',
+  isFirstNode: boolean = false,
+  branchId?: string
 ): Edge => {
   return {
     id: `edge-${source}-${target}`,
@@ -82,11 +121,12 @@ const createFlowEdge = (
     },
     markerEnd: {
       type: 'arrow' as any,
-      color: '#43a8aa',
+      color: 'var(--color-node-border)',
       width: 20,
       height: 20,
       strokeWidth: 2
-    }
+    },
+    data: branchId ? { branchId } : undefined
   }
 }
 
@@ -122,6 +162,7 @@ const createBranchAgentNode = (
 // 保存分支到 store 的通用函数
 const saveBranchToStore = (
   branchType: 'root' | 'task',
+  branchContent: string,
   newBranchNodes: Node[],
   newBranchEdges: Edge[],
   branchTasks: any[]
@@ -134,7 +175,7 @@ const saveBranchToStore = (
   isSyncing = true
   selectionStore.addTaskProcessBranch(taskStepId, currentAgents, {
     parentNodeId: addingBranchNodeId.value!,
-    branchContent: branchInput.value.trim(),
+    branchContent,
     branchType,
     nodes: JSON.parse(JSON.stringify(newBranchNodes)),
     edges: JSON.parse(JSON.stringify(newBranchEdges)),
@@ -143,7 +184,7 @@ const saveBranchToStore = (
 
   setTimeout(() => {
     isSyncing = false
-  }, 100)
+  }, 300)
 
   saveTaskProcessBranchesToDB()
 }
@@ -187,19 +228,23 @@ const createBranchNodesAndEdges = (
   branchStartX: number,
   branchStartY: number,
   parentNodeId: string,
-  strokeColor: string = '#67c23a'
+  strokeColor: string = '#67c23a',
+  branchId?: string
 ): { nodes: Node[]; edges: Edge[] } => {
   const newBranchNodes: Node[] = []
   const newBranchEdges: Edge[] = []
   const timestamp = Date.now()
   const agentNodeIds: string[] = []
+  // 使用传入的 branchId 或 timestamp 作为分支ID
+  const currentBranchId = branchId || String(timestamp)
 
   newAgentActions.forEach((action, index) => {
     const agentNodeId = `branch-agent-${parentNodeId}-${timestamp}-${index}`
     agentNodeIds.push(agentNodeId)
 
-    // 计算位置：横向排列
-    const nodeX = branchStartX + (parentNodeId === 'root' ? 100 : 0) + index * 120
+    // 计算位置：横向排列（根据节点宽度调整偏移）
+    // 节点宽度约150px，加上间隙80px，所以偏移250px
+    const nodeX = branchStartX + (parentNodeId === 'root' ? 250 : 100) + index * 220
     const nodeY = branchStartY
 
     // 创建 agent 节点
@@ -209,8 +254,16 @@ const createBranchNodesAndEdges = (
 
     // 创建连接边
     if (index === 0) {
-      // 第一个 agent 连接到父节点
-      const newEdge = createFlowEdge(parentNodeId, agentNodeId, 'bottom', 'left', strokeColor, true)
+      // 第一个 agent 连接到父节点，需要设置 branchId
+      const newEdge = createFlowEdge(
+        parentNodeId,
+        agentNodeId,
+        'bottom',
+        'left',
+        strokeColor,
+        true,
+        currentBranchId
+      )
       edges.value.push(newEdge)
       newBranchEdges.push(newEdge)
     } else {
@@ -332,6 +385,85 @@ const getBranchParentChain = (targetNodeId: string): string[] => {
 
   return parentChain
 }
+
+// 判断节点是否可删除（分支从底部出发连接的节点）
+const getNodeDeletable = (nodeId: string): { isDeletable: boolean; branchId: string | null } => {
+  // 找到指向该节点的边
+  const incomingEdges = edges.value.filter(edge => edge.target === nodeId)
+
+  // 检查是否有从底部（sourceHandle='bottom'）连接过来的边
+  const bottomEdge = incomingEdges.find(edge => edge.sourceHandle === 'bottom')
+
+  if (bottomEdge && bottomEdge.data?.branchId) {
+    return {
+      isDeletable: true,
+      branchId: bottomEdge.data.branchId
+    }
+  }
+
+  return {
+    isDeletable: false,
+    branchId: null
+  }
+}
+
+// 删除分支（显示确认对话框）
+const handleDeleteBranch = (branchId: string) => {
+  branchIdToDelete.value = branchId
+  deleteDialogVisible.value = true
+}
+
+// 确认删除分支
+const confirmDeleteBranch = async () => {
+  if (!branchIdToDelete.value) return
+
+  const branchId = branchIdToDelete.value
+  const taskStepId = currentTask.value?.Id!
+  const currentAgents = currentTask.value?.AgentSelection || []
+
+  // 1. 从store中获取该分支的信息
+  const savedBranches = selectionStore.getTaskProcessBranches(taskStepId, currentAgents)
+  const branchToDelete = savedBranches.find(branch => branch.id === branchId)
+
+  if (!branchToDelete) {
+    ElMessage.error('未找到该分支')
+    deleteDialogVisible.value = false
+    return
+  }
+
+  // 2. 获取该分支的所有节点ID
+  const branchNodeIds = branchToDelete.nodes ? branchToDelete.nodes.map((node: any) => node.id) : []
+
+  // 3. 获取该分支的所有边ID
+  const branchEdgeIds = branchToDelete.edges ? branchToDelete.edges.map((edge: any) => edge.id) : []
+
+  // 4. 从nodes中删除该分支的所有节点
+  nodes.value = nodes.value.filter(node => !branchNodeIds.includes(node.id))
+
+  // 5. 从edges中删除该分支的所有边
+  edges.value = edges.value.filter(edge => !branchEdgeIds.includes(edge.id))
+
+  // 6. 从selectionStore中删除该分支
+  selectionStore.removeTaskProcessBranch(taskStepId, currentAgents, branchId)
+
+  // 7. 从数据库中删除该分支
+  const TaskID = (window as any).__CURRENT_TASK_ID__
+  if (TaskID) {
+    await selectionStore.deleteTaskProcessBranchFromDB(TaskID, taskStepId, branchId)
+  }
+
+  // 8. 刷新视图
+  nextTick(() => {
+    fit({ padding: 0.15, duration: 300 })
+  })
+
+  // 9. 关闭对话框并清理状态
+  deleteDialogVisible.value = false
+  branchIdToDelete.value = null
+
+  ElMessage.success('分支删除成功')
+}
+
 // 初始化流程图
 const initializeFlow = () => {
   if (!currentTask.value) {
@@ -341,31 +473,34 @@ const initializeFlow = () => {
   }
 
   // 获取当前流程数据
-  const taskStepId = currentTask.value.Id
+  const taskStepId = currentTask.value.Id!
   // 获取当前 agent 组合（用于区分不同 agent 组合的分支数据）
   const currentAgents = currentTask.value.AgentSelection || []
 
-  // 直接使用 taskProcess.value 作为数据源
-  const currentTaskProcess = taskProcess.value
-  // 立即保存为副本（深拷贝）
-  const taskProcessCopy = JSON.parse(JSON.stringify(currentTaskProcess))
+  // 优先从 store 获取"初始流程"的原始数据，保证数据正确性
+  const savedBranches = selectionStore.getTaskProcessBranches(taskStepId, currentAgents)
+  const initialBranch = savedBranches.find(branch => branch.branchContent === '初始流程')
+  const rawTaskProcess = initialBranch?.tasks || taskProcess.value
 
-  // 使用副本数据创建节点（而不是 currentTaskProcess）
+  // 立即保存为副本（深拷贝）
+  const taskProcessCopy = JSON.parse(JSON.stringify(rawTaskProcess))
+
+  // 使用副本数据创建节点
   const taskProcessForNodes = taskProcessCopy
   const newNodes: Node[] = []
   const newEdges: Edge[] = []
 
-  // 添加根节点
+  // 添加根节点（与 PlanModification.vue 一致）
   newNodes.push({
     id: 'root',
     type: 'root',
-    position: { x: 50, y: 150 },
+    position: { x: START_X, y: START_Y - 2 },
     data: {
       isRoot: true
     }
   })
 
-  // 添加 agent 节点
+  // 添加 agent 节点（与 PlanModification.vue 一致）
   taskProcessForNodes.forEach((process: any, index: number) => {
     const agentInfo = getAgentMapIcon(process.AgentName)
     const actionTypeInfo = getActionTypeDisplay(process.ActionType)
@@ -375,12 +510,18 @@ const initializeFlow = () => {
       agentsStore.agents.find((agent: any) => agent.Name === process.AgentName)?.Profile ||
       '暂无个人简介'
 
+    // 计算位置：START_X + ROOT_WIDTH + NODE_GAP + index * (NODE_WIDTH + NODE_GAP)
+    // = 40 + 200 + 80 + index * (120 + 80) = 320 + index * 200
+    const nodeWidth = 120
+    const rootWidth = 200
+    const nodeGap = 80
+
     newNodes.push({
       id: `agent-${index}`,
       type: 'agent',
       position: {
-        x: 150 + index * 120,
-        y: 150
+        x: START_X + rootWidth + nodeGap + index * (nodeWidth + nodeGap),
+        y: START_Y
       },
       data: {
         agentName: process.AgentName,
@@ -463,40 +604,28 @@ const initializeFlow = () => {
       nodes.value = newNodes
       edges.value = newEdges
 
-      // 找出非初始流程的分支（只处理真正需要偏移的分支）
+      // 找出非初始流程的分支
       const actualBranches = savedBranches.filter(branch => branch.branchContent !== '初始流程')
 
-      // 统计每个父节点下有多少个分支，用于计算垂直偏移
-      const parentBranchIndex: Record<string, number> = {}
+      // 恢复分支：直接使用数据库中保存的位置，不再重新计算
       actualBranches.forEach(branch => {
-        parentBranchIndex[branch.parentNodeId] = parentBranchIndex[branch.parentNodeId] || 0
-      })
-
-      // 恢复分支时，按顺序处理，同一父节点的分支依次向下偏移
-      actualBranches.forEach(branch => {
-        const parentNodeId = branch.parentNodeId
-
-        // 获取父节点的Y坐标
-        const parentNode = nodes.value.find(n => n.id === parentNodeId)
-        const parentNodeY = parentNode?.position.y || 150
-
-        // 获取该分支在同一父节点下的索引
-        const branchIndex = parentBranchIndex[parentNodeId] ?? 0
-        parentBranchIndex[parentNodeId] = branchIndex + 1
-
-        // 计算分支起始Y坐标：父节点Y + 200 + 分支索引 * 250
-        const branchStartY = parentNodeY + 200 + branchIndex * 250
-
-        // 恢复节点（计算新的Y坐标）
-        branch.nodes.forEach((node, nodeIndex) => {
-          const restoredNode = JSON.parse(JSON.stringify(node))
-          // 计算新位置：分支起始Y + 节点索引 * 120（横向排列）
-          restoredNode.position.y = branchStartY
-          nodes.value.push(restoredNode)
+        // 恢复节点，直接使用保存的位置
+        branch.nodes.forEach(node => {
+          // 跳过根节点（已经在 newNodes 中）
+          if (node.id !== 'root') {
+            const restoredNode = JSON.parse(JSON.stringify(node))
+            // 直接使用数据库中保存的位置
+            nodes.value.push(restoredNode)
+          }
         })
-        // 恢复边
-        branch.edges.forEach(edge => {
-          edges.value.push(JSON.parse(JSON.stringify(edge)))
+        // 恢复边，并为第一个连接到父节点的边添加 branchId
+        branch.edges.forEach((edge, edgeIndex) => {
+          const restoredEdge = JSON.parse(JSON.stringify(edge))
+          // 第一个边（连接到父节点）需要添加 branchId
+          if (edgeIndex === 0) {
+            restoredEdge.data = { ...restoredEdge.data, branchId: branch.id }
+          }
+          edges.value.push(restoredEdge)
         })
       })
 
@@ -592,15 +721,56 @@ onMounted(() => {
     nextTick(() => {
       setTimeout(() => {
         fit({ padding: 0.4, duration: 300 })
-      }, 100)
+      }, 300)
     })
   }
 })
 
+// 组件更新后（v-show显示时）重新适应视图
+onUpdated(() => {
+  nextTick(() => {
+    setTimeout(() => {
+      fit({ padding: 0.4, duration: 300 })
+    }, 300)
+  })
+})
+
+// 监听 currentTask 变化，实时更新流程图
+watch(
+  () => currentTask.value?.Id,
+  (newTaskId, oldTaskId) => {
+    if (newTaskId && newTaskId !== oldTaskId) {
+      // 任务切换时重新初始化
+      nextTick(() => {
+        initializeFlow()
+        setTimeout(() => {
+          fit({ padding: 0.4, duration: 300 })
+        }, 300)
+      })
+    }
+  }
+)
+
+// 监听 taskProcess 变化，更新流程图节点数据
+watch(
+  () => taskProcess.value,
+  () => {
+    // TaskProcess 变化时重新初始化（保持与其他页面联动）
+    if (currentTask.value) {
+      nextTick(() => {
+        initializeFlow()
+        setTimeout(() => {
+          fit({ padding: 0.4, duration: 300 })
+        }, 300)
+      })
+    }
+  },
+  { deep: true }
+)
+
 // 分支添加相关方法
 const startAddBranch = (nodeId: string) => {
   addingBranchNodeId.value = nodeId
-  branchInput.value = ''
   nextTick(() => {
     branchInputRef.value?.focus()
   })
@@ -608,7 +778,6 @@ const startAddBranch = (nodeId: string) => {
 
 const cancelAddBranch = () => {
   addingBranchNodeId.value = null
-  branchInput.value = ''
 }
 
 // 节点点击事件
@@ -671,8 +840,7 @@ const onNodeClick = (event: any) => {
         const completeTaskProcess: any[] = []
 
         // 类型守卫：检查是否为 TaskProcess 类型（有 Description 字段）
-        const isTaskProcess = (data: any): data is TaskProcess =>
-          data && 'Description' in data
+        const isTaskProcess = (data: any): data is TaskProcess => data && 'Description' in data
 
         // 从 store 中获取"初始流程"副本（而不是使用 taskProcess.value）
         const taskStepId = currentTask.value.Id!
@@ -692,7 +860,13 @@ const onNodeClick = (event: any) => {
             // 主流程节点：从初始流程数据中获取
             const originalIndex = node.data.originalIndex
             const processData = mainProcessData[originalIndex]
-            if (processData && isTaskProcess(processData) && processData.ID && processData.AgentName && processData.Description) {
+            if (
+              processData &&
+              isTaskProcess(processData) &&
+              processData.ID &&
+              processData.AgentName &&
+              processData.Description
+            ) {
               completeTaskProcess.push(processData)
             }
           } else if (node.data.isBranchTask) {
@@ -704,7 +878,12 @@ const onNodeClick = (event: any) => {
               const nodeIndex = parentBranch.nodes.findIndex(n => n.id === nodeId)
               if (nodeIndex !== -1 && parentBranch.tasks[nodeIndex]) {
                 const taskData = parentBranch.tasks[nodeIndex]
-                if (isTaskProcess(taskData) && taskData.ID && taskData.AgentName && taskData.Description) {
+                if (
+                  isTaskProcess(taskData) &&
+                  taskData.ID &&
+                  taskData.AgentName &&
+                  taskData.Description
+                ) {
                   completeTaskProcess.push(taskData)
                 }
               }
@@ -721,11 +900,7 @@ const onNodeClick = (event: any) => {
           sessionStorage.setItem(LAST_SELECTED_BRANCH_KEY, matchedBranch.id)
         }
 
-        selectionStore.setActiveTaskProcessData(
-          taskStepId,
-          currentAgents,
-          completeTaskProcess
-        )
+        selectionStore.setActiveTaskProcessData(taskStepId, currentAgents, completeTaskProcess)
         agentsStore.setCurrentTaskProcess(completeTaskProcess)
       }
     } else {
@@ -769,11 +944,10 @@ const onNodeClick = (event: any) => {
 }
 
 // 添加分支
-const submitBranch = async () => {
-  if (!branchInput.value.trim() || !addingBranchNodeId.value) return
+const submitBranch = async (branchContent: string) => {
+  if (!branchContent.trim() || !addingBranchNodeId.value) return
 
   const parentNodeId = addingBranchNodeId.value
-  const branchContent = branchInput.value.trim()
 
   // 获取父节点
   const parentNode = nodes.value.find((n: Node) => n.id === parentNodeId)
@@ -786,44 +960,49 @@ const submitBranch = async () => {
   branchLoading.value = true
 
   try {
-    // 移动已有分支
-    // 只移动在当前父节点下方的分支节点（Y坐标 > 父节点Y坐标）
-    const parentNodeY = parentNode.position.y
+    // 计算新分支的起始位置：基于同一父节点下已有的分支数量
+    const parentNodeId = addingBranchNodeId.value!
+    const isRootBranch = parentNodeId === 'root'
+    const baseOffset = isRootBranch ? 200 : 150
 
-    // 查找所有已有的分支任务节点（标记为 isBranchTask）
-    const allExistingBranchNodes = nodes.value.filter((n: Node) => n.data.isBranchTask)
-
-    // 过滤出在父节点下方的分支节点
-    const branchesBelowParent = allExistingBranchNodes.filter(
-      (node: Node) => node.position.y > parentNodeY
-    )
-
-    const branchIdsBelowParent = branchesBelowParent.map((n: Node) => n.id)
-
-    // 将当前父节点下方的分支向下移动250px（通过创建新节点来触发响应式更新）
-    nodes.value = nodes.value.map((node: Node) => {
-      if (branchIdsBelowParent.includes(node.id)) {
-        return {
-          ...node,
-          position: {
-            ...node.position,
-            y: node.position.y + 250
-          }
-        }
-      }
-      return node
-    })
-
-    // 同步更新 store 中保存的分支位置
+    // 获取当前任务的所有分支
     if (currentTask.value?.Id) {
       const taskStepId = currentTask.value.Id
       const currentAgents = currentTask.value.AgentSelection || []
       const savedBranches = selectionStore.getTaskProcessBranches(taskStepId, currentAgents)
 
-      savedBranches.forEach(branch => {
-        branch.nodes.forEach(branchNode => {
-          if (branchNode.data.isBranchTask && branchIdsBelowParent.includes(branchNode.id)) {
-            branchNode.position.y += 250
+      // 找到同一父节点下的所有现有分支
+      const sameParentBranches = savedBranches.filter(b => b.parentNodeId === parentNodeId)
+
+      // 新分支的数量 = 现有分支数量
+      const newBranchIndex = sameParentBranches.length
+
+      // 计算该父节点在主流程中的位置索引（用于区分不同父节点的分支）
+      let parentNodeIndex = 0
+      if (!isRootBranch) {
+        const parentNode = nodes.value.find((n: Node) => n.id === parentNodeId)
+        if (parentNode) {
+          parentNodeIndex = parentNode.data.originalIndex || 0
+        }
+      }
+
+      // 根据分支索引重新计算所有分支的位置并保存
+      // 每个父节点的分支使用不同的Y偏移范围，避免重叠
+      sameParentBranches.forEach((branch, index) => {
+        // 根节点分支加500偏移，避免和agent分支重叠
+        const rootOffset = isRootBranch ? 500 : 0
+        // 基础Y + 同一父节点内的分支偏移 + 不同父节点的额外偏移 + 根节点额外偏移
+        const newY =
+          parentNode.position.y + baseOffset + index * 250 + parentNodeIndex * 100 + rootOffset
+
+        // 更新 UI 中的节点位置
+        branch.nodes.forEach(node => {
+          if (node.data?.isBranchTask) {
+            const uiNode = nodes.value.find(n => n.id === node.id)
+            if (uiNode) {
+              uiNode.position.y = newY
+            }
+            node.position.y = newY
           }
         })
       })
@@ -861,9 +1040,19 @@ const submitBranch = async () => {
 
       // 创建新的 agent 节点
       if (newAgentActions.length > 0) {
-        // 计算分支起始位置：在根节点下方（固定位置）
+        // 基于同一父节点下的分支数量计算位置
+        const currentAgents = currentTask.value?.AgentSelection || []
+        const sameParentBranches = selectionStore
+          .getTaskProcessBranches(currentTask.value.Id, currentAgents)
+          .filter(b => b.parentNodeId === parentNodeId)
+        // 新分支的索引 = 现有分支数量（放在最后）
+        const newBranchIndex = sameParentBranches.length
+
+        // 根节点位置
         const branchStartX = parentNode.position.x
-        const branchStartY = parentNode.position.y + 200
+        // 根节点分支加上固定偏移500，避免和agent分支重叠
+        const branchStartY = parentNode.position.y + 200 + 500 + newBranchIndex * 250
+        const branchId = String(Date.now())
 
         // 使用通用函数创建分支节点和边
         const result = createBranchNodesAndEdges(
@@ -871,7 +1060,8 @@ const submitBranch = async () => {
           branchStartX,
           branchStartY,
           parentNodeId,
-          '#67c23a' // 根节点分支颜色
+          '#67c23a', // 根节点分支颜色
+          branchId
         )
         newBranchNodes.push(...result.nodes)
         newBranchEdges.push(...result.edges)
@@ -886,7 +1076,7 @@ const submitBranch = async () => {
             ImportantInput: action.inputs || []
           }))
 
-          saveBranchToStore('root', newBranchNodes, newBranchEdges, branchTasks)
+          saveBranchToStore('root', branchContent, newBranchNodes, newBranchEdges, branchTasks)
         }
       }
     } else {
@@ -960,9 +1150,23 @@ const submitBranch = async () => {
 
       // 创建新的 agent 节点
       if (newAgentActions.length > 0) {
-        // 计算分支起始位置：在父 agent 节点右下方（固定位置）
-        const branchStartX = parentNode.position.x + 150
-        const branchStartY = parentNode.position.y + 200
+        // 基于同一父节点下的分支数量计算位置
+        const currentAgents = currentTask.value?.AgentSelection || []
+        const sameParentBranches = selectionStore
+          .getTaskProcessBranches(currentTask.value!.Id, currentAgents)
+          .filter(b => b.parentNodeId === parentNodeId)
+        const branchIndex = sameParentBranches.length
+
+        // 计算该父节点在主流程中的位置索引
+        let parentNodeIndex = 0
+        if (parentNode.data && parentNode.data.originalIndex !== undefined) {
+          parentNodeIndex = parentNode.data.originalIndex
+        }
+
+        const branchStartX = parentNode.position.x + 200
+        // 添加父节点索引的偏移，避免不同父节点的分支重叠
+        const branchStartY = parentNode.position.y + 150 + branchIndex * 250 + parentNodeIndex * 300
+        const branchId = String(Date.now())
 
         // 使用通用函数创建分支节点和边
         const result = createBranchNodesAndEdges(
@@ -970,7 +1174,8 @@ const submitBranch = async () => {
           branchStartX,
           branchStartY,
           parentNodeId,
-          '#409eff' // Agent 节点分支颜色
+          '#409eff', // Agent 节点分支颜色
+          branchId
         )
         newBranchNodes.push(...result.nodes)
         newBranchEdges.push(...result.edges)
@@ -985,39 +1190,28 @@ const submitBranch = async () => {
             ImportantInput: action.inputs || []
           }))
 
-          saveBranchToStore('task', newBranchNodes, newBranchEdges, branchTasks)
+          saveBranchToStore('task', branchContent, newBranchNodes, newBranchEdges, branchTasks)
         }
       }
     }
 
     // 重置当前添加分支的节点 ID
     addingBranchNodeId.value = null
-    branchInput.value = ''
 
     // 适应视图以显示新节点
     nextTick(() => {
       setTimeout(() => {
         fit({ padding: 100, duration: 300 })
-      }, 100)
+      }, 300)
     })
   } catch (error) {
     ElMessage.error('添加分支失败，请重试')
     addingBranchNodeId.value = null
-    branchInput.value = ''
   } finally {
     branchLoading.value = false
   }
 }
 
-const handleBranchKeydown = (event: KeyboardEvent) => {
-  if (event.key === 'Enter') {
-    event.preventDefault()
-    submitBranch()
-  } else if (event.key === 'Escape') {
-    cancelAddBranch()
-  }
-}
-
 onConnect(params => addEdges(params))
 
 // 保存任务过程分支到数据库
@@ -1033,6 +1227,22 @@ const saveTaskProcessBranchesToDB = async () => {
     console.warn('[saveTaskProcessBranchesToDB] 未找到 TaskID，跳过保存')
   }
 }
+
+// 触发自适应视图（供外部调用）
+const triggerFitView = () => {
+  if (currentTask.value && nodes.value.length > 0) {
+    nextTick(() => {
+      setTimeout(() => {
+        fit({ padding: 0.4, duration: 300 })
+      }, 100)
+    })
+  }
+}
+
+// 暴露给父组件
+defineExpose({
+  triggerFitView
+})
 </script>
 
 <template>
@@ -1044,7 +1254,7 @@ const saveTaskProcessBranchesToDB = async () => {
     <div v-else v-loading="branchLoading" class="vue-flow-wrapper">
       <VueFlow
         v-model:nodes="nodes"
-        v-model:edges="edges"
+        v-model:edges="styledEdges"
         :delete-key-code="null"
         :default-viewport="{ zoom: 0.5, x: 0, y: 0 }"
         :min-zoom="0.5"
@@ -1057,92 +1267,97 @@ const saveTaskProcessBranchesToDB = async () => {
             <Handle type="source" :position="Position.Right" id="right" />
             <Handle type="source" :position="Position.Bottom" id="bottom" />
 
-            <!-- 圆形卡片 -->
-            <div class="root-node-wrapper">
-              <!-- 中央添加/取消按钮 -->
-              <div
-                v-if="addingBranchNodeId !== 'root'"
-                class="root-add-btn"
-                @click="startAddBranch('root')"
-              >
-                <el-icon :size="28" color="#409eff">
-                  <CirclePlus />
-                </el-icon>
-              </div>
-              <div v-else class="root-add-btn" @click="cancelAddBranch">
-                <el-icon :size="28" color="#f56c6c">
-                  <Remove />
-                </el-icon>
+            <!-- 卡片 -->
+            <div class="root-node-wrapper is-branch-selected">
+              <div class="root-node-content">
+                <div class="agent-role">{{ currentTaskContent }}</div>
               </div>
             </div>
 
-            <!-- 外部输入框 -->
-            <div v-if="addingBranchNodeId === 'root'" class="external-input-container">
-              <el-input
-                v-model="branchInput"
-                placeholder="输入分支需求..."
-                size="small"
-                @keydown="handleBranchKeydown"
-                ref="branchInputRef"
-                class="branch-input"
-              >
-                <template #suffix>
-                  <svg-icon
-                    icon-class="paper-plane"
-                    size="16px"
-                    color="#409eff"
-                    class="submit-icon"
-                    :class="{ 'is-disabled': !branchInput.trim() }"
-                    @click="submitBranch"
-                  />
-                </template>
-              </el-input>
+            <!-- 底部添加按钮 -->
+            <div
+              v-if="addingBranchNodeId !== 'root'"
+              class="external-add-btn"
+              @click="startAddBranch('root')"
+            >
+              <el-icon :size="40" color="#000000">
+                <CirclePlus />
+              </el-icon>
             </div>
+
+            <!-- 取消按钮 -->
+            <div v-else class="external-add-btn cancel-btn" @click="cancelAddBranch">
+              <el-icon :size="40" color="#f56c6c">
+                <Remove />
+              </el-icon>
+            </div>
+
+            <!-- 外部输入框 -->
+            <BranchInput
+              v-if="addingBranchNodeId === 'root'"
+              ref="branchInputRef"
+              @submit="submitBranch"
+              @cancel="cancelAddBranch"
+            />
           </div>
         </template>
 
         <template #node-agent="nodeProps">
           <div class="task-node-wrapper">
+            <!-- 删除按钮 - 仅在可删除的分支节点上显示，在左侧 -->
+            <div
+              v-if="getNodeDeletable(nodeProps.id).isDeletable"
+              class="node-delete-btn left"
+              @click="handleDeleteBranch(getNodeDeletable(nodeProps.id).branchId!)"
+            >
+              <svg-icon icon-class="close" size="14px" color="#d8d8d8" />
+            </div>
+
             <div
               class="agent-node-wrapper"
               :class="{ 'is-branch-selected': selectedNodeIds.has(nodeProps.id) }"
-              :style="{ background: nodeProps.data.actionTypeColor }"
             >
               <Handle type="target" :position="Position.Left" id="left" />
               <Handle type="source" :position="Position.Bottom" id="bottom" />
-              <el-tooltip
-                effect="light"
-                placement="bottom"
-                :show-after="1000"
-                popper-class="agent-tooltip-popper"
-              >
-                <template #content>
-                  <div class="agent-tooltip-content">
-                    <div class="agent-tooltip-name">{{ nodeProps.data.agentName }}</div>
-                    <div class="agent-tooltip-divider"></div>
-                    <div class="agent-tooltip-section">
-                      <span class="section-label">职责：</span>
-                      <span
-                        class="section-value"
-                        :style="{ color: nodeProps.data.actionTypeColor }"
-                      >
-                        {{ nodeProps.data.actionTypeName }}
-                      </span>
-                    </div>
-                    <div class="agent-tooltip-divider"></div>
-                    <div class="agent-tooltip-section-title">个人简介</div>
-                    <div class="agent-tooltip-profile">{{ nodeProps.data.agentProfile }}</div>
-                    <div class="agent-tooltip-divider"></div>
-                    <div class="agent-tooltip-section-title">任务描述</div>
-                    <div class="agent-tooltip-description">
-                      {{ nodeProps.data.agentDescription }}
+              <div class="agent-node-content">
+                <el-tooltip
+                  effect="light"
+                  placement="bottom"
+                  :show-after="1000"
+                  popper-class="agent-tooltip-popper"
+                >
+                  <template #content>
+                    <div class="agent-tooltip-content">
+                      <div class="agent-tooltip-name">{{ nodeProps.data.agentName }}</div>
+                      <div class="agent-tooltip-divider"></div>
+                      <div class="agent-tooltip-section">
+                        <span class="section-label">职责：</span>
+                        <span
+                          class="section-value"
+                          :style="{ color: nodeProps.data.actionTypeColor }"
+                        >
+                          {{ nodeProps.data.actionTypeName }}
+                        </span>
+                      </div>
+                      <div class="agent-tooltip-divider"></div>
+                      <div class="agent-tooltip-section-title">个人简介</div>
+                      <div class="agent-tooltip-profile">{{ nodeProps.data.agentProfile }}</div>
+                      <div class="agent-tooltip-divider"></div>
+                      <div class="agent-tooltip-section-title">任务描述</div>
+                      <div class="agent-tooltip-description">
+                        {{ nodeProps.data.agentDescription }}
+                      </div>
                     </div>
+                  </template>
+                  <div class="agent-avatar" :style="{ background: nodeProps.data.agentColor }">
+                    <svg-icon :icon-class="nodeProps.data.agentIcon" size="28px" color="#fff" />
                   </div>
-                </template>
-                <div class="agent-avatar" :style="{ background: nodeProps.data.agentColor }">
-                  <svg-icon :icon-class="nodeProps.data.agentIcon" size="28px" color="#fff" />
+                </el-tooltip>
+                <div class="agent-name">{{ nodeProps.data.agentName }}</div>
+                <div class="agent-role" :style="{ color: nodeProps.data.actionTypeColor }">
+                  {{ nodeProps.data.actionTypeName }}
                 </div>
-              </el-tooltip>
+              </div>
               <Handle type="source" :position="Position.Right" id="right" />
             </div>
 
@@ -1152,43 +1367,36 @@ const saveTaskProcessBranchesToDB = async () => {
               class="external-add-btn"
               @click="startAddBranch(nodeProps.id)"
             >
-              <el-icon :size="20" color="#409eff">
+              <el-icon :size="40" color="#000000">
                 <CirclePlus />
               </el-icon>
             </div>
 
             <!-- 取消按钮 -->
             <div v-else class="external-add-btn cancel-btn" @click="cancelAddBranch">
-              <el-icon :size="20" color="#f56c6c">
+              <el-icon :size="40" color="#f56c6c">
                 <Remove />
               </el-icon>
             </div>
 
             <!-- 外部输入框 -->
-            <div v-if="addingBranchNodeId === nodeProps.id" class="external-input-container">
-              <el-input
-                v-model="branchInput"
-                placeholder="输入分支需求..."
-                size="small"
-                @keydown="handleBranchKeydown"
-                ref="branchInputRef"
-                class="branch-input"
-              >
-                <template #suffix>
-                  <svg-icon
-                    icon-class="paper-plane"
-                    size="16px"
-                    color="#409eff"
-                    class="submit-icon"
-                    :class="{ 'is-disabled': !branchInput.trim() }"
-                    @click="submitBranch"
-                  />
-                </template>
-              </el-input>
-            </div>
+            <BranchInput
+              v-if="addingBranchNodeId === nodeProps.id"
+              ref="branchInputRef"
+              @submit="submitBranch"
+              @cancel="cancelAddBranch"
+            />
           </div>
         </template>
       </VueFlow>
+
+      <!-- 删除分支确认对话框 -->
+      <DeleteConfirmDialog
+        v-model="deleteDialogVisible"
+        title="确认删除该分支 ?"
+        content="删除后，该分支无法恢复 !"
+        @confirm="confirmDeleteBranch"
+      />
     </div>
   </div>
 </template>
@@ -1208,7 +1416,6 @@ const saveTaskProcessBranchesToDB = async () => {
 .vue-flow-container {
   width: 100%;
   height: 100%;
-  background-color: var(--color-bg-three);
 }
 
 .empty-state {
@@ -1223,17 +1430,55 @@ const saveTaskProcessBranchesToDB = async () => {
   display: flex;
   align-items: center;
   justify-content: center;
-  width: 60px;
-  height: 60px;
-  background: var(--color-bg-three);
-  border: 2px solid var(--color-border);
-  border-radius: 50%;
+  min-width: 130px;
+  max-width: 180px;
+  height: 90px;
+  background: var(--color-card-bg-task);
+  border-radius: 12px;
   cursor: pointer;
   transition: all 0.2s ease;
 
+  // 始终显示渐变边框
+  background: linear-gradient(var(--color-card-bg-task), var(--color-card-bg-task)) padding-box,
+    linear-gradient(to right, var(--color-accent), var(--color-accent-secondary)) border-box;
+  border: 2px solid transparent;
+  box-sizing: border-box;
+
   &:hover {
-    background: var(--color-bg-three-hover);
-    transform: scale(1.05);
+    background: linear-gradient(var(--color-card-bg-task-hover), var(--color-card-bg-task-hover))
+        padding-box,
+      linear-gradient(to right, var(--color-accent), var(--color-accent-secondary)) border-box;
+    border: 2px solid transparent;
+    box-shadow: var(--color-card-shadow-hover);
+  }
+
+  .root-node-content {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    gap: 4px;
+    max-width: 120px;
+    overflow: hidden;
+  }
+
+  .agent-name {
+    font-size: 13px;
+    font-weight: 600;
+    color: var(--color-text);
+    white-space: nowrap;
+    text-align: center;
+  }
+
+  .agent-role {
+    font-size: 11px;
+    font-weight: 500;
+    color: var(--color-text-secondary);
+    display: -webkit-box;
+    -webkit-line-clamp: 3;
+    line-clamp: 3;
+    -webkit-box-orient: vertical;
+    overflow: hidden;
+    text-align: center;
   }
 }
 
@@ -1291,16 +1536,6 @@ const saveTaskProcessBranchesToDB = async () => {
   z-index: 10;
   box-shadow: 0 2px 8px rgba(64, 158, 255, 0.2);
 
-  &:hover {
-    background: #409eff;
-    transform: translateX(-50%) scale(1.1);
-    box-shadow: 0 4px 12px rgba(64, 158, 255, 0.3);
-
-    .el-icon {
-      color: #fff;
-    }
-  }
-
   &:active {
     transform: translateX(-50%) scale(0.95);
   }
@@ -1309,99 +1544,6 @@ const saveTaskProcessBranchesToDB = async () => {
   &.cancel-btn {
     border-color: #f56c6c;
     box-shadow: 0 2px 8px rgba(245, 108, 108, 0.2);
-
-    &:hover {
-      background: #f56c6c;
-      box-shadow: 0 4px 12px rgba(245, 108, 108, 0.3);
-    }
-  }
-}
-
-// 外部输入容器
-.external-input-container {
-  position: absolute;
-  bottom: -80px;
-  left: 50%;
-  transform: translateX(-50%);
-  width: 260px;
-  background: #fff;
-  border: 1px solid #dcdfe6;
-  border-radius: 8px;
-  padding: 12px;
-  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1);
-  z-index: 100;
-  animation: slideDown 0.2s ease-out;
-
-  &::before {
-    content: '';
-    position: absolute;
-    top: -6px;
-    left: 50%;
-    transform: translateX(-50%) rotate(45deg);
-    width: 12px;
-    height: 12px;
-    background: #fff;
-    border-left: 1px solid #dcdfe6;
-    border-top: 1px solid #dcdfe6;
-  }
-}
-
-@keyframes slideDown {
-  from {
-    opacity: 0;
-    transform: translateX(-50%) translateY(-10px);
-  }
-  to {
-    opacity: 1;
-    transform: translateX(-50%) translateY(0);
-  }
-}
-
-.branch-input {
-  width: 100%;
-
-  :deep(.el-input__wrapper) {
-    background: transparent;
-    border: 1px solid #dcdfe6;
-    border-radius: 4px;
-    box-shadow: none;
-
-    &:hover {
-      border-color: #c0c4cc;
-    }
-
-    &.is-focus {
-      border-color: #409eff;
-      box-shadow: 0 0 0 2px rgba(64, 158, 255, 0.2);
-    }
-
-    .el-input__inner {
-      font-size: 13px;
-      color: #000;
-      padding-right: 40px;
-    }
-  }
-}
-
-// 提交图标样式
-.submit-icon {
-  cursor: pointer;
-  transition: all 0.2s ease;
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-
-  &:hover:not(.is-disabled) {
-    transform: scale(1.1);
-  }
-
-  &:active:not(.is-disabled) {
-    transform: scale(0.95);
-  }
-
-  &.is-disabled {
-    opacity: 0.4;
-    cursor: not-allowed;
   }
 }
 
@@ -1411,26 +1553,65 @@ const saveTaskProcessBranchesToDB = async () => {
   align-items: center;
   justify-content: center;
   border-radius: 12px;
-  width: 60px;
-  height: 60px;
-  opacity: 0.9;
+  min-width: 130px;
+  max-width: 180px;
+  height: 90px;
+  background-color: var(--color-card-bg-task);
+  border: 2px solid var(--color-node-border);
   transition: all 0.2s ease;
+  cursor: pointer;
 
-  // 分支选中高亮样式
+  &:hover {
+    background-color: var(--color-card-bg-task-hover);
+    border-color: var(--color-node-border);
+    box-shadow: var(--color-card-shadow-hover);
+  }
+
+  // 分支选中高亮样式（渐变边框）
   &.is-branch-selected {
-    box-shadow: 0 0 0 3px #000, 0 0 20px rgba(0, 0, 0, 0.5);
+    background: linear-gradient(var(--color-card-bg-task), var(--color-card-bg-task)) padding-box,
+      linear-gradient(to right, var(--color-accent), var(--color-accent-secondary)) border-box;
+    border: 2px solid transparent;
+    box-sizing: border-box;
     z-index: 10;
   }
 
+  .agent-node-content {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    gap: 4px;
+  }
+
+  .agent-info {
+    display: none;
+  }
+
+  .agent-name {
+    font-size: 13px;
+    font-weight: 600;
+    color: var(--color-text);
+    white-space: nowrap;
+    text-align: center;
+  }
+
+  .agent-role {
+    font-size: 12px;
+    font-weight: 500;
+    white-space: nowrap;
+    text-align: center;
+  }
+
   .agent-avatar {
     display: flex;
     align-items: center;
     justify-content: center;
-    width: 40px;
-    height: 40px;
+    width: 36px;
+    height: 36px;
     border-radius: 50%;
     box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
     transition: transform 0.2s ease;
+    flex-shrink: 0;
 
     &:hover {
       transform: scale(1.1);
@@ -1514,6 +1695,49 @@ const saveTaskProcessBranchesToDB = async () => {
   word-break: break-word;
   margin-top: 4px;
 }
+
+// 节点删除按钮
+.node-delete-btn {
+  position: absolute;
+  width: 24px;
+  height: 24px;
+  border-radius: 50%;
+  background-color: #2d2d2d;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  cursor: pointer;
+  transition: background-color 0.2s ease;
+  z-index: 100;
+
+  // 左侧位置
+  &.left {
+    left: -85px;
+    top: 50%;
+    transform: translateY(-50%);
+  }
+
+  &:hover {
+    background-color: #ff4d4f;
+  }
+}
+
+// 边样式 - 与PlanModification.vue保持一致
+::deep(.vue-flow__edge.selected .vue-flow__edge-path) {
+  stroke: #409eff;
+}
+
+::deep(.vue-flow__edge.edge-normal .vue-flow__edge-path) {
+  stroke: var(--color-node-border);
+  stroke-width: 2;
+  stroke-dasharray: 5 5;
+}
+
+::deep(.vue-flow__edge.edge-highlighted .vue-flow__edge-path) {
+  stroke: var(--color-node-active) !important;
+  stroke-width: 2;
+  stroke-dasharray: 5 5;
+}
 </style>
 
 <style>
diff --git a/frontend/src/layout/components/Main/TaskTemplate/UnifiedSettingsPanel.vue b/frontend/src/layout/components/Main/TaskTemplate/UnifiedSettingsPanel.vue
index 46afcee..585c8d1 100644
--- a/frontend/src/layout/components/Main/TaskTemplate/UnifiedSettingsPanel.vue
+++ b/frontend/src/layout/components/Main/TaskTemplate/UnifiedSettingsPanel.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { ref, computed } from 'vue'
+import { ref, computed, watch, nextTick } from 'vue'
 import { useAgentsStore } from '@/stores'
 import SvgIcon from '@/components/SvgIcon/index.vue'
 import PlanModification from './TaskSyllabus/Branch/PlanModification.vue'
@@ -13,6 +13,9 @@ const visible = ref(false)
 const activeTab = ref('outline')
 const isMaximized = ref(false)
 
+// PlanTask 组件引用
+const planTaskRef = ref<InstanceType<typeof PlanTask> | null>(null)
+
 // 判断是否有流程数据
 const planReady = computed(() => {
   return agentsStore.agentRawPlan.data !== undefined
@@ -66,6 +69,18 @@ const handleTabChange = (tabKey: string) => {
   activeTab.value = tabKey
 }
 
+// 切换到执行过程编排时，延迟触发自适应视图
+watch(activeTab, (newTab) => {
+  if (newTab === 'process') {
+    nextTick(() => {
+      setTimeout(() => {
+        // 通过 expose 的方法触发自适应视图（如果有的话）
+        ;(planTaskRef.value as any)?.triggerFitView?.()
+      }, 400)
+    })
+  }
+})
+
 // 切换最大化/还原
 const toggleMaximize = () => {
   isMaximized.value = !isMaximized.value
@@ -126,7 +141,7 @@ defineExpose({
 
           <!-- 任务过程 -->
           <div v-show="activeTab === 'process'" class="tab-content">
-            <PlanTask />
+            <PlanTask ref="planTaskRef" />
           </div>
         </div>
       </div>
diff --git a/frontend/src/stores/modules/selection.ts b/frontend/src/stores/modules/selection.ts
index 7627d62..7c769a1 100644
--- a/frontend/src/stores/modules/selection.ts
+++ b/frontend/src/stores/modules/selection.ts
@@ -310,6 +310,26 @@ export const useSelectionStore = defineStore('selection', () => {
     return result
   }
 
+  /**
+   * 从数据库删除指定分支
+   * @param TaskID 大任务ID（数据库主键）
+   * @param stepId 小任务ID
+   * @param branchId 要删除的分支ID
+   * @returns Promise<boolean> 是否删除成功
+   */
+  async function deleteTaskProcessBranchFromDB(
+    TaskID: string,
+    stepId: string,
+    branchId: string,
+  ): Promise<boolean> {
+    // 导入 api（避免循环导入问题）
+    const { default: api } = await import('@/api')
+
+    const result = await api.deleteTaskProcessBranch(TaskID, stepId, branchId)
+
+    return result
+  }
+
   /**
    * 从数据库恢复任务过程分支数据
    * @param dbBranches 从数据库读取的任务过程分支数据
@@ -676,6 +696,7 @@ export const useSelectionStore = defineStore('selection', () => {
     saveBranchesToDB,
     restoreAgentCombinationsFromDB,
     saveTaskProcessBranchesToDB,
+    deleteTaskProcessBranchFromDB,
     restoreTaskProcessBranchesFromDB,
   }
 })