feat:冗余代码清理

This commit is contained in:
liailing1026
2026-01-14 17:54:00 +08:00
parent edb39d4c1f
commit 029df6b5a5
13 changed files with 290 additions and 485 deletions

View File

@@ -23,15 +23,14 @@ const emit = defineEmits<{
(e: 'save-edit', stepId: string, processId: string, value: string): void
}>()
// 🔄 从 currentTask 中获取数据(与分支切换联动)
//从 currentTask 中获取数据
const currentTaskProcess = computed(() => {
// ✅ 优先使用 currentTask包含分支切换后的数据
const currentTask = agentsStore.currentTask
if (currentTask && currentTask.Id === props.step.Id && currentTask.TaskProcess) {
return currentTask.TaskProcess
}
// ⚠️ 降级:从 agentRawPlan 中获取原始数据(不受分支切换影响)
//从 agentRawPlan 中获取原始数据
const collaborationProcess = agentsStore.agentRawPlan.data?.['Collaboration Process'] || []
const rawData = collaborationProcess.find((task: any) => task.Id === props.step.Id)
return rawData?.TaskProcess || []
@@ -39,19 +38,18 @@ const currentTaskProcess = computed(() => {
// 当前正在编辑的process ID
const editingProcessId = ref<string | null>(null)
// 编辑框的值
const editValue = ref('')
// 鼠标悬停的process ID
const hoverProcessId = ref<string | null>(null)
// 🆕 处理卡片点击事件(非编辑模式下)
// 处理卡片点击事件
function handleCardClick() {
// 如果正在编辑,不处理点击
if (editingProcessId.value) return
// 设置当前任务,与任务大纲联动
if (props.step.Id) {
agentsStore.setCurrentTask(props.step)
agentsStore.setCurrentTask(props.step as any)
}
}

View File

@@ -1,10 +1,8 @@
<script setup lang="ts">
import { ref, computed, watch, nextTick, onMounted } from 'vue'
import { ref, computed, nextTick, onMounted } from 'vue'
import { VueFlow, useVueFlow, Handle, Position, type Node, type Edge } from '@vue-flow/core'
import { Controls } from '@vue-flow/controls'
import '@vue-flow/core/dist/style.css'
import '@vue-flow/core/dist/theme-default.css'
import '@vue-flow/controls/dist/style.css'
import {
useAgentsStore,
useSelectionStore,
@@ -22,7 +20,7 @@ const agentsStore = useAgentsStore()
const selectionStore = useSelectionStore()
const { onConnect, addEdges, fitView: fit } = useVueFlow()
// 🆕 直接从 store 获取当前任务和任务过程数据
// 直接从 store 获取当前任务和任务过程数据
const currentTask = computed(() => agentsStore.currentTask)
const taskProcess = computed(() => agentsStore.currentTask?.TaskProcess ?? [])
@@ -50,12 +48,10 @@ let isSyncing = false
//初始化标记,避免重复初始化
const BRANCHES_INIT_KEY_PREFIX = 'plan-task-branches-initialized-'
// 🆕 最后选中的分支ID
//最后选中的分支ID
const LAST_SELECTED_BRANCH_KEY = 'plan-task-last-selected-branch'
// ==================== 辅助函数定义 ====================
// 🆕 获取分支的所有节点只沿着分支创建方向遍历right handle连接
// 获取分支的所有节点
const getAllBranchNodes = (startNodeId: string): string[] => {
const visited = new Set<string>()
const toVisit: string[] = [startNodeId]
@@ -68,14 +64,14 @@ const getAllBranchNodes = (startNodeId: string): string[] => {
}
visited.add(currentId)
// 🆕 只查找通过 right handle 连接的后续节点(分支创建方向)
// 只查找通过 right handle 连接的后续节点
const outgoingEdges = edges.value.filter(
edge => edge.source === currentId && edge.sourceHandle === 'right'
)
for (const edge of outgoingEdges) {
const targetNodeId = edge.target
// 只访问分支节点(不包含主流程节点和根节点)
// 只访问分支节点
if (
!visited.has(targetNodeId) &&
targetNodeId !== 'root' &&
@@ -89,7 +85,7 @@ const getAllBranchNodes = (startNodeId: string): string[] => {
return Array.from(visited)
}
// 🆕 获取从指定节点回溯到根节点的路径(只包含主流程节点)
//获取从指定节点回溯到根节点的路径(只包含主流程节点)
const getPathToRoot = (targetNodeId: string): string[] => {
const path: string[] = []
const visited = new Set<string>()
@@ -126,7 +122,7 @@ const getPathToRoot = (targetNodeId: string): string[] => {
return path
}
// 🆕 向上回溯分支的父节点链(只包含分支节点)
// 向上回溯分支的父节点链(只包含分支节点)
const getBranchParentChain = (targetNodeId: string): string[] => {
const parentChain: string[] = []
let currentId = targetNodeId
@@ -153,8 +149,7 @@ const getBranchParentChain = (targetNodeId: string): string[] => {
return parentChain
}
// ==================== 初始化流程图 ====================
// 初始化流程图
const initializeFlow = () => {
if (!currentTask.value) {
nodes.value = []
@@ -162,20 +157,17 @@ const initializeFlow = () => {
return
}
// 🆕 获取当前流程数据
// 获取当前流程数据
const taskStepId = currentTask.value.Id
// 🆕 获取当前 agent 组合(用于区分不同 agent 组合的分支数据)
// 获取当前 agent 组合(用于区分不同 agent 组合的分支数据)
const currentAgents = currentTask.value.AgentSelection || []
// 🆕 直接使用 taskProcess.value 作为数据源
// 注意:虽然 currentTask.id 相同,但不同的 agent 组合对应的 agent 任务过程不同
// taskProcess.value 从 currentTask.TaskProcess 获取,能正确反映当前 agent 组合的任务过程
// 直接使用 taskProcess.value 作为数据源
const currentTaskProcess = taskProcess.value
console.log('currentTaskProcess:', currentTaskProcess)
// 🆕 立即保存为副本(深拷贝)
// 立即保存为副本(深拷贝)
const taskProcessCopy = JSON.parse(JSON.stringify(currentTaskProcess))
// 🆕 使用副本数据创建节点(而不是 currentTaskProcess
// 使用副本数据创建节点(而不是 currentTaskProcess
const taskProcessForNodes = taskProcessCopy
const newNodes: Node[] = []
const newEdges: Edge[] = []
@@ -233,7 +225,14 @@ const initializeFlow = () => {
targetHandle: 'left',
type: 'smoothstep',
animated: true,
style: { stroke: '#43a8aa', strokeWidth: 2 }
style: { stroke: '#43a8aa', strokeWidth: 2 },
markerEnd: {
type: 'arrow' as any,
color: '#43a8aa',
width: 20,
height: 20,
strokeWidth: 2
}
})
}
@@ -247,21 +246,27 @@ const initializeFlow = () => {
targetHandle: 'left',
type: 'smoothstep',
animated: true,
style: { stroke: '#43a8aa', strokeWidth: 2 }
style: { stroke: '#43a8aa', strokeWidth: 2 },
markerEnd: {
type: 'arrow' as any,
color: '#43a8aa',
width: 20,
height: 20,
strokeWidth: 2
}
})
}
nodes.value = newNodes
edges.value = newEdges
// 📂 从 store 恢复已保存的任务过程分支数据
// taskStepId 已在前面声明 (line 163)
// 从 store 恢复已保存的任务过程分支数据
if (taskStepId) {
// 🆕 使用当前 agent 组合获取分支数据
// 使用当前 agent 组合获取分支数据
const savedBranches = selectionStore.getTaskProcessBranches(taskStepId, currentAgents)
// 🆕 检查是否已经初始化过(针对该任务和 agent 组合)
// 检查是否已经初始化过(针对该任务和 agent 组合)
const branchesInitKey = `${BRANCHES_INIT_KEY_PREFIX}${taskStepId}_${selectionStore.getAgentGroupKey(
currentAgents
)}`
@@ -272,17 +277,17 @@ const initializeFlow = () => {
edges.value = []
savedBranches.forEach(branch => {
// 恢复节点(深拷贝,避免引用问题)
// 恢复节点
branch.nodes.forEach(node => {
nodes.value.push(JSON.parse(JSON.stringify(node)))
})
// 恢复边(深拷贝)
// 恢复边
branch.edges.forEach(edge => {
edges.value.push(JSON.parse(JSON.stringify(edge)))
})
})
// 🆕 恢复最后选中的分支
// 恢复最后选中的分支
const lastSelectedBranchId = sessionStorage.getItem(LAST_SELECTED_BRANCH_KEY)
if (lastSelectedBranchId) {
const lastSelectedBranch = savedBranches.find(branch => branch.id === lastSelectedBranchId)
@@ -313,7 +318,7 @@ const initializeFlow = () => {
}
}
// 🆕 使用多级分支逻辑:获取父节点链和子节点
// 获取父节点链和子节点
const branchParentChain = getBranchParentChain(firstBranchNode.id)
const branchChildNodes = getAllBranchNodes(firstBranchNode.id)
@@ -338,11 +343,11 @@ const initializeFlow = () => {
selectedNodeIds.value = new Set(mainProcessNodes)
}
} else {
// 🆕 首次初始化:设置节点和边,并保存为"初始流程"分支
// 首次初始化:设置节点和边,并保存为"初始流程"分支
nodes.value = newNodes
edges.value = newEdges
const initialBranchNodes = newNodes // ✅ 保留所有节点,包括根节点
const initialBranchNodes = newNodes
const initialBranchEdges = [...newEdges]
const initialBranchId = selectionStore.addTaskProcessBranch(taskStepId, currentAgents, {
@@ -351,13 +356,13 @@ const initializeFlow = () => {
branchType: 'root',
nodes: JSON.parse(JSON.stringify(initialBranchNodes)),
edges: JSON.parse(JSON.stringify(initialBranchEdges)),
tasks: taskProcessCopy // 👈 使用副本(已经是深拷贝)
tasks: taskProcessCopy
})
// 🆕 标记已初始化(针对该任务步骤和 agent 组合)
// 标记已初始化(针对该任务步骤和 agent 组合)
sessionStorage.setItem(branchesInitKey, 'true')
// 🆕 首次初始化时,设置初始流程为当前选中分支
// 首次初始化时,设置初始流程为当前选中分支
selectionStore.setActiveTaskProcessBranch(taskStepId, currentAgents, initialBranchId)
// 默认选中"初始流程"的高亮状态
@@ -369,166 +374,6 @@ const initializeFlow = () => {
}
}
// 同步当前所有分支数据到 store
const syncBranchesToStore = () => {
if (isSyncing || !currentTask.value?.Id) return
isSyncing = true
const taskStepId = currentTask.value.Id
// 🆕 获取当前 agent 组合
const currentAgents = currentTask.value.AgentSelection || []
// 🔄 获取现有的分支数据(用于保留初始流程分支)
const existingBranches = selectionStore.getTaskProcessBranches(taskStepId, currentAgents)
const existingBranchesMap = new Map<string, any>()
existingBranches.forEach(branch => {
// 使用分支ID作为key
existingBranchesMap.set(branch.id, branch)
})
// 获取当前所有分支节点(标记为 isBranchTask
const currentBranchNodes = nodes.value.filter((n: Node) => n.data.isBranchTask)
if (currentBranchNodes.length === 0) {
isSyncing = false
return
}
// 按照分支分组节点和边
// 通过 parentId 将节点分组
const branchesMap = new Map<
string,
{
nodes: Node[]
edges: Edge[]
branchContent: string
branchType: 'root' | 'task'
createdAt: number
tasks?: any[] // 🆕 添加 tasks 字段
}
>()
currentBranchNodes.forEach((node: Node) => {
// 找到连接到该节点的边,确定父节点
const incomingEdge = edges.value.find((e: Edge) => e.target === node.id)
const parentNodeId = incomingEdge?.source || 'root'
const isFirstBranchNode = incomingEdge?.sourceHandle === 'bottom'
if (isFirstBranchNode) {
if (!branchesMap.has(parentNodeId)) {
// 🆕 从现有分支数据中恢复元数据
const existingMetadata = existingBranchesMap.get(node.id)
branchesMap.set(parentNodeId, {
nodes: [],
edges: [],
branchContent: existingMetadata?.branchContent || '分支',
branchType: existingMetadata?.branchType || (parentNodeId === 'root' ? 'root' : 'task'),
createdAt: Date.now(),
tasks: existingMetadata?.tasks //
})
}
// 收集该分支的所有节点(从第一个节点开始,通过 right handle 连接的节点)
const branchNodes: Node[] = []
let currentNode: Node | undefined = node
while (currentNode) {
branchNodes.push(currentNode)
// 查找通过 right handle 连接的下一个节点
const outgoingEdge = edges.value.find(
(e: Edge) => e.source === currentNode!.id && e.sourceHandle === 'right'
)
if (outgoingEdge) {
currentNode = currentBranchNodes.find((n: Node) => n.id === outgoingEdge.target)
} else {
currentNode = undefined
}
}
// 添加所有分支节点
branchNodes.forEach((n: Node) => {
if (
!branchesMap
.get(parentNodeId)!
.nodes.find((existingNode: Node) => existingNode.id === n.id)
) {
branchesMap.get(parentNodeId)!.nodes.push(n)
}
})
// 找到该分支的所有边
branchNodes.forEach((branchNode: Node) => {
const branchEdges = edges.value.filter(
(e: Edge) => e.source === branchNode.id || e.target === branchNode.id
)
branchEdges.forEach((edge: Edge) => {
if (!branchesMap.get(parentNodeId)!.edges.find((e: Edge) => e.id === edge.id)) {
branchesMap.get(parentNodeId)!.edges.push(edge)
}
})
})
}
})
// 保存所有分支到 store使用深拷贝
branchesMap.forEach((branchData, parentNodeId) => {
// 🆕 优先使用恢复的 tasks 数据,如果没有才重新创建
let tasks = branchData.tasks
if (!tasks || tasks.length === 0) {
// 转换节点数据为 IRawStepTask 格式
tasks = branchData.nodes.map((node: Node) => ({
Id: node.id,
StepName: node.data.actionTypeName,
TaskContent: node.data.agentDescription,
InputObject_List: [],
OutputObject: '',
AgentSelection: [node.data.agentName],
Collaboration_Brief_frontEnd: {
template: '',
data: {}
} as any,
TaskProcess: []
}))
} else {
}
selectionStore.addTaskProcessBranch(taskStepId, currentAgents, {
parentNodeId,
branchContent: JSON.parse(JSON.stringify(branchData.branchContent)),
branchType: JSON.parse(JSON.stringify(branchData.branchType)),
nodes: JSON.parse(JSON.stringify(branchData.nodes)),
edges: JSON.parse(JSON.stringify(branchData.edges)),
tasks: JSON.parse(JSON.stringify(tasks)) // 🆕 优先使用恢复的 tasks
})
})
// 延迟重置标志,避免连续触发
setTimeout(() => {
isSyncing = false
}, 100)
}
// 监听节点和边的变化,同步到 store
// ⚠️ 已禁用自动同步因为会导致分支ID变化sessionStorage中保存的选中分支无法恢复
// 分支数据在添加分支时就已经保存到store了不需要在nodes/edges变化时重新同步
// watch(
// [nodes, edges],
// () => {
// // 如果正在同步,跳过
// if (isSyncing) return
// // 只在有分支节点时才同步
// const hasBranchNodes = nodes.value.some((n: Node) => n.data.isBranchTask)
// if (hasBranchNodes && currentTask.value) {
// syncBranchesToStore()
// }
// },
// { deep: true }
// )
// 组件挂载后初始化
onMounted(() => {
if (currentTask.value) {
@@ -556,7 +401,7 @@ const cancelAddBranch = () => {
branchInput.value = ''
}
// 🆕 节点点击事件
// 节点点击事件
const onNodeClick = (event: any) => {
const nodeId = event.node.id
const nodeData = event.node.data as any
@@ -571,10 +416,10 @@ const onNodeClick = (event: any) => {
if (isBranchNode) {
// 点击的是分支节点
// 🆕 向上回溯分支父节点链(多级分支)
// 向上回溯分支父节点链(多级分支)
const branchParentChain = getBranchParentChain(nodeId)
// 🆕 向下遍历分支的子节点只沿right handle方向
// 向下遍历分支的子节点只沿right handle方向
const branchChildNodes = getAllBranchNodes(nodeId)
// 找到最顶层的分支父节点(连接到主流程或根节点的)
@@ -599,7 +444,7 @@ const onNodeClick = (event: any) => {
// 回溯到根节点,获取主流程路径
const pathToRoot = getPathToRoot(parentNodeId)
// 🔧 getPathToRoot 已经返回正序(从左到右),不需要反转
// getPathToRoot 已经返回正序(从左到右),不需要反转
const correctPathToRoot = pathToRoot // [agent-0, agent-1, agent-2, ...]
const correctBranchParentChain = [...branchParentChain].reverse() // 顶层分支 → ... → 直接父分支(正序)
@@ -611,27 +456,18 @@ const onNodeClick = (event: any) => {
]
selectedNodeIds.value = new Set(allNodesToHighlight)
console.log('📋 路径顺序(从上到下、从左到右):', {
pathToRoot: correctPathToRoot,
branchParentChain: correctBranchParentChain,
branchChildNodes: branchChildNodes,
total: allNodesToHighlight.length
})
// 🆕 保存完整的 TaskProcess 数据(主流程 + 分支)到 store
// 保存完整的 TaskProcess 数据(主流程 + 分支)到 store
if (currentTask.value) {
const completeTaskProcess: any[] = []
// 🆕 从 store 中获取"初始流程"副本(而不是使用 taskProcess.value
// 从 store 中获取"初始流程"副本(而不是使用 taskProcess.value
const taskStepId = currentTask.value.Id
const currentAgents = currentTask.value.AgentSelection || []
const branches = selectionStore.getTaskProcessBranches(taskStepId, currentAgents)
const initialBranch = branches.find(branch => branch.branchContent === '初始流程')
const mainProcessData = initialBranch?.tasks || taskProcess.value
console.log('🔍 开始按高亮路径收集数据,总节点数:', allNodesToHighlight.length)
// 🆕 按照高亮路径顺序收集每个节点的数据
// 按照高亮路径顺序收集每个节点的数据
allNodesToHighlight.forEach(nodeId => {
const node = nodes.value.find(n => n.id === nodeId)
@@ -644,7 +480,6 @@ const onNodeClick = (event: any) => {
const processData = mainProcessData[originalIndex]
if (processData && processData.ID && processData.AgentName && processData.Description) {
completeTaskProcess.push(processData)
console.log(` 📦 添加主流程节点: ${nodeId}, 索引: ${originalIndex}`)
}
} else if (node.data.isBranchTask) {
// 分支节点:从对应的分支数据中获取(按索引匹配)
@@ -657,25 +492,19 @@ const onNodeClick = (event: any) => {
const taskData = parentBranch.tasks[nodeIndex]
if (taskData.ID && taskData.AgentName && taskData.Description) {
completeTaskProcess.push(taskData)
console.log(
` 📦 添加分支节点: ${nodeId}, 分支: ${parentBranch.branchContent}, 索引: ${nodeIndex}`
)
}
}
}
}
})
console.log(`✅ 数据收集完成,总任务数: ${completeTaskProcess.length}`)
// 🆕 找到当前点击节点所属的分支,用于保存选中状态
// 找到当前点击节点所属的分支,用于保存选中状态
const matchedBranch = branches.find(branch => {
return branch.nodes.some(node => node.id === nodeId)
})
if (matchedBranch) {
sessionStorage.setItem(LAST_SELECTED_BRANCH_KEY, matchedBranch.id)
console.log(`💾 保存选中的分支ID: ${matchedBranch.id}`)
}
selectionStore.setActiveTaskProcessData(
@@ -691,14 +520,14 @@ const onNodeClick = (event: any) => {
selectedNodeIds.value = new Set(allBranchNodes)
}
} else {
// 🆕 点击的是主流程节点,高亮所有主流程节点(初始流程)
// 点击的是主流程节点,高亮所有主流程节点(初始流程)
const mainProcessNodes = nodes.value
.filter(n => !n.data.isBranchTask && n.id !== 'root')
.map(n => n.id)
selectedNodeIds.value = new Set(mainProcessNodes)
// 🆕 点击主流程节点时,从 store 读取"初始流程"分支的副本
// 点击主流程节点时,从 store 读取"初始流程"分支的副本
if (currentTask.value) {
const taskStepId = currentTask.value.Id
if (!taskStepId) {
@@ -712,17 +541,17 @@ const onNodeClick = (event: any) => {
// 使用 store 中保存的初始流程副本
selectionStore.setActiveTaskProcessData(taskStepId, currentAgents, initialBranch.tasks)
// 🆕 同步更新 currentTask.TaskProcess实现全局数据联动
// 同步更新 currentTask.TaskProcess实现全局数据联动
agentsStore.setCurrentTaskProcess(initialBranch.tasks)
// 🆕 保存选中的分支ID到 sessionStorage
// 保存选中的分支ID到 sessionStorage
sessionStorage.setItem(LAST_SELECTED_BRANCH_KEY, initialBranch.id)
} else {
// 降级:使用 taskProcess.value
const originalTaskProcess = taskProcess.value
selectionStore.setActiveTaskProcessData(taskStepId, currentAgents, originalTaskProcess)
// 🆕 同步更新 currentTask.TaskProcess实现全局数据联动
// 同步更新 currentTask.TaskProcess实现全局数据联动
agentsStore.setCurrentTaskProcess(originalTaskProcess)
}
}
@@ -747,8 +576,8 @@ const submitBranch = async () => {
branchLoading.value = true
try {
// ==================== 移动已有分支 ====================
// 🆕 只移动在当前父节点下方的分支节点Y坐标 > 父节点Y坐标
// 移动已有分支
// 只移动在当前父节点下方的分支节点Y坐标 > 父节点Y坐标
const parentNodeY = parentNode.position.y
// 查找所有已有的分支任务节点(标记为 isBranchTask
@@ -761,10 +590,6 @@ const submitBranch = async () => {
const branchIdsBelowParent = branchesBelowParent.map((n: Node) => n.id)
console.log(
`📍 移动了 ${branchIdsBelowParent.length} 个分支Y坐标 > ${parentNodeY}),总共 ${allExistingBranchNodes.length} 个分支`
)
// 将当前父节点下方的分支向下移动250px通过创建新节点来触发响应式更新
nodes.value = nodes.value.map((node: Node) => {
if (branchIdsBelowParent.includes(node.id)) {
@@ -779,7 +604,7 @@ const submitBranch = async () => {
return node
})
// 💾 同步更新 store 中保存的分支位置
// 同步更新 store 中保存的分支位置
if (currentTask.value?.Id) {
const taskStepId = currentTask.value.Id
const currentAgents = currentTask.value.AgentSelection || []
@@ -800,21 +625,21 @@ const submitBranch = async () => {
// 判断是根节点还是 agent 节点
if (parentNodeId === 'root') {
// ========== 根节点分支 ==========
// 根节点分支
let newAgentActions: IApiAgentAction[] = []
if (USE_MOCK_DATA) {
// 使用 Mock API
const generalGoal = agentsStore.agentRawPlan.data?.['General Goal'] || ''
// 🆕 根节点分支:从零开始生成完整方案
// 根节点分支:从零开始生成完整方案
// Baseline_Completion = 0 表示没有已完成的部分,需要生成所有阶段
// Existing_Steps 传空数组,不传递初始流程信息
const response = await api.mockBranchTaskProcess({
branch_Number: 1,
Modification_Requirement: branchContent,
Existing_Steps: [], // ← 根节点分支不传递现有步骤
Baseline_Completion: 0, // ← 从零开始
Existing_Steps: [], // ← 根节点分支不传递现有步骤
Baseline_Completion: 0, // ← 从零开始
stepTaskExisting: currentTask.value,
goal: generalGoal
})
@@ -842,14 +667,14 @@ const submitBranch = async () => {
// 调用真实 API
const generalGoal = agentsStore.agentRawPlan.data?.['General Goal'] || ''
// 🆕 根节点分支:从零开始生成完整方案
// 根节点分支:从零开始生成完整方案
// Baseline_Completion = 0 表示没有已完成的部分,需要生成所有阶段
// Existing_Steps 传空数组,不传递初始流程信息
const response = await api.branchTaskProcess({
branch_Number: 1,
Modification_Requirement: branchContent,
Existing_Steps: [], // ← 根节点分支不传递现有步骤
Baseline_Completion: 0, // ← 从零开始
Existing_Steps: [], // ← 根节点分支不传递现有步骤
Baseline_Completion: 0, // ← 从零开始
stepTaskExisting: currentTask.value,
goal: generalGoal
})
@@ -933,7 +758,14 @@ const submitBranch = async () => {
targetHandle: 'left',
type: 'smoothstep',
animated: true,
style: { stroke: '#67c23a', strokeWidth: 2, strokeDasharray: '5,5' }
style: { stroke: '#67c23a', strokeWidth: 2, strokeDasharray: '5,5' },
markerEnd: {
type: 'arrow' as any,
color: '#43a8aa',
width: 20,
height: 20,
strokeWidth: 2
}
}
edges.value.push(newEdge)
newBranchEdges.push(newEdge)
@@ -948,14 +780,21 @@ const submitBranch = async () => {
targetHandle: 'left',
type: 'smoothstep',
animated: true,
style: { stroke: '#67c23a', strokeWidth: 2 }
style: { stroke: '#67c23a', strokeWidth: 2 },
markerEnd: {
type: 'arrow' as any,
color: '#43a8aa',
width: 20,
height: 20,
strokeWidth: 2
}
}
edges.value.push(newEdge)
newBranchEdges.push(newEdge)
}
})
// 📂 保存分支数据到 store
// 保存分支数据到 store
if (newBranchNodes.length > 0) {
// 将 IApiAgentAction 转换为 TaskProcess 格式用于存储
// 与 fill-step-task-mock.ts 中的 TaskProcess 格式保持一致
@@ -986,7 +825,7 @@ const submitBranch = async () => {
}
}
} else {
// ========== Agent 节点分支 ==========
// Agent 节点分支
const parentIsBranchTask = parentNode.data.isBranchTask || false
const parentOriginalIndex = parentNode.data.originalIndex ?? 0
let newAgentActions: IApiAgentAction[] = []
@@ -996,7 +835,7 @@ const submitBranch = async () => {
const generalGoal = agentsStore.agentRawPlan.data?.['General Goal'] || ''
const currentTaskProcess = taskProcess.value || []
// 🆕 根据父节点类型构建 existingSteps
// 根据父节点类型构建 existingSteps
let existingSteps: any[] = []
let baselineCompletion = 100
@@ -1078,7 +917,7 @@ const submitBranch = async () => {
const generalGoal = agentsStore.agentRawPlan.data?.['General Goal'] || ''
const currentTaskProcess = taskProcess.value || []
// 🆕 根据父节点类型构建 existingSteps
// 根据父节点类型构建 existingSteps
let existingSteps: any[] = []
let baselineCompletion = 100
@@ -1135,7 +974,6 @@ const submitBranch = async () => {
goal: generalGoal
})
console.log('branchTaskProcess response:', response)
// 后端返回格式: [[action1, action2], [action3, action4]]
// 取第一个分支
if (response && response.length > 0) {
@@ -1215,7 +1053,14 @@ const submitBranch = async () => {
targetHandle: 'left',
type: 'smoothstep',
animated: true,
style: { stroke: '#409eff', strokeWidth: 2, strokeDasharray: '5,5' }
style: { stroke: '#409eff', strokeWidth: 2, strokeDasharray: '5,5' },
markerEnd: {
type: 'arrow' as any,
color: '#43a8aa',
width: 20,
height: 20,
strokeWidth: 2
}
}
edges.value.push(newEdge)
newBranchEdges.push(newEdge)
@@ -1230,17 +1075,22 @@ const submitBranch = async () => {
targetHandle: 'left',
type: 'smoothstep',
animated: true,
style: { stroke: '#409eff', strokeWidth: 2 }
style: { stroke: '#409eff', strokeWidth: 2 },
markerEnd: {
type: 'arrow' as any,
color: '#43a8aa',
width: 20,
height: 20,
strokeWidth: 2
}
}
edges.value.push(newEdge)
newBranchEdges.push(newEdge)
}
})
// 📂 保存分支数据到 store
// 保存分支数据到 store
if (newBranchNodes.length > 0) {
// 将 IApiAgentAction 转换为 TaskProcess 格式用于存储
// 与 fill-step-task-mock.ts 中的 TaskProcess 格式保持一致
const branchTasks = newAgentActions.map(action => ({
ID: action.id || uuidv4(),
ActionType: action.type,
@@ -1317,9 +1167,6 @@ onConnect(params => addEdges(params))
@node-click="onNodeClick"
class="vue-flow-container"
>
<!-- <Background /> -->
<!-- <Controls /> -->
<template #node-root="nodeProps">
<div class="root-task-node-wrapper">
<Handle type="source" :position="Position.Right" id="right" />
@@ -1645,7 +1492,7 @@ onConnect(params => addEdges(params))
.el-input__inner {
font-size: 13px;
color: var(--color-text-primary);
color: #000;
padding-right: 40px;
}
}
@@ -1684,7 +1531,7 @@ onConnect(params => addEdges(params))
opacity: 0.9;
transition: all 0.2s ease;
// 🆕 分支选中高亮样式
// 分支选中高亮样式
&.is-branch-selected {
box-shadow: 0 0 0 3px #000, 0 0 20px rgba(0, 0, 0, 0.5);
z-index: 10;
@@ -1719,17 +1566,6 @@ onConnect(params => addEdges(params))
}
}
:deep(.vue-flow__controls) {
button {
background-color: #43a8aa;
border-color: #43a8aa;
&:hover {
background-color: #358d8f;
}
}
}
/* 智能体悬浮提示样式 */
:deep(.agent-tooltip-popper) {
z-index: 4000 !important;

View File

@@ -12,21 +12,19 @@ const props = defineProps<{
step?: any
}>()
// 获取分支数量 - 主分支(1) + 额外分支数量
// 获取分支数量
const branchCount = computed(() => {
if (!props.step?.Id) return 1
// 获取该任务步骤的分支数据
const taskStepId = props.step.Id
// 🆕 获取该任务的 agent 组合
// 获取该任务的 agent 组合
const agents = props.step.AgentSelection || []
const branches = selectionStore.getTaskProcessBranches(taskStepId, agents)
// 主分支(1) + 额外分支数量
return branches.length || 1
})
// 🆕 判断按钮是否可点击(只有当前按钮对应的任务是任务大纲中选中的任务时才可点击)
// 判断按钮是否可点击
const isClickable = computed(() => {
if (!props.step?.Id || !agentsStore.currentTask?.Id) {
return false
@@ -35,7 +33,7 @@ const isClickable = computed(() => {
})
const handleClick = (event?: MouseEvent) => {
// 🆕 只有可点击时才执行操作
// 只有可点击时才执行操作
if (!isClickable.value) {
return
}
@@ -102,7 +100,7 @@ const handleClick = (event?: MouseEvent) => {
filter: brightness(0.9);
}
// 🆕 禁用状态
// 禁用状态
&.is-disabled {
background-color: #bdc3c7;
cursor: not-allowed;