diff --git a/frontend/src/layout/components/Main/TaskTemplate/TaskSyllabus/components/AgentAllocation.vue b/frontend/src/layout/components/Main/TaskTemplate/TaskSyllabus/components/AgentAllocation.vue index e274335..28794c7 100644 --- a/frontend/src/layout/components/Main/TaskTemplate/TaskSyllabus/components/AgentAllocation.vue +++ b/frontend/src/layout/components/Main/TaskTemplate/TaskSyllabus/components/AgentAllocation.vue @@ -57,7 +57,7 @@ const selectedTaskOutline = ref('') // 监听 currentTask 变化,自动选中当前步骤 watch( () => currentTask.value?.StepName, - (newStepName) => { + newStepName => { if (newStepName) { selectedTaskOutline.value = newStepName } @@ -809,74 +809,76 @@ const confirmDeleteDimension = async () => { try { // 同时传入大任务ID和步骤ID,只删除当前步骤的该维度 await api.agentSelectModifyDeleteAspect(dbTaskId, dimension, stepTaskId) - console.log(`[confirmDeleteDimension] 已同步删除数据库中的维度: ${dimension}, step_id: ${stepTaskId}`) + console.log( + `[confirmDeleteDimension] 已同步删除数据库中的维度: ${dimension}, step_id: ${stepTaskId}` + ) } catch (error) { console.error('同步删除数据库维度失败:', error) } } - } +} - // 确认删除分组 - const confirmDeleteGroup = async () => { - if (!groupToDelete.value || !currentTask.value?.Id) return +// 确认删除分组 +const confirmDeleteGroup = async () => { + if (!groupToDelete.value || !currentTask.value?.Id) return - const { index, agents: deletedAgents } = groupToDelete.value - const taskId = currentTask.value.Id + const { index, agents: deletedAgents } = groupToDelete.value + const taskId = currentTask.value.Id - // 从 store 中删除分组 - agentsStore.removeConfirmedAgentGroup(taskId, index) + // 从 store 中删除分组 + agentsStore.removeConfirmedAgentGroup(taskId, index) - // 从 selectionStore 中删除对应的 TaskProcess 数据 - selectionStore.removeAgentTaskProcess(taskId, deletedAgents) + // 从 selectionStore 中删除对应的 TaskProcess 数据 + selectionStore.removeAgentTaskProcess(taskId, deletedAgents) - // 同步到数据库 - const dbTaskId = (window as any).__CURRENT_TASK_ID__ - if (dbTaskId && taskId) { - try { - const updatedGroups = agentsStore.getConfirmedAgentGroups(taskId) - // 获取更新后的所有组合的 TaskProcess 数据 - const agentCombinations: Record = {} - updatedGroups.forEach(group => { - const processData = selectionStore.getAgentTaskProcess(taskId, group) - if (processData) { - const groupKey = selectionStore.getAgentGroupKey(group) - agentCombinations[groupKey] = { - process: processData.process || [], - brief: processData.brief || {} - } + // 同步到数据库 + const dbTaskId = (window as any).__CURRENT_TASK_ID__ + if (dbTaskId && taskId) { + try { + const updatedGroups = agentsStore.getConfirmedAgentGroups(taskId) + // 获取更新后的所有组合的 TaskProcess 数据 + const agentCombinations: Record = {} + updatedGroups.forEach(group => { + const processData = selectionStore.getAgentTaskProcess(taskId, group) + if (processData) { + const groupKey = selectionStore.getAgentGroupKey(group) + agentCombinations[groupKey] = { + process: processData.process || [], + brief: processData.brief || {} } - }) - await api.updateAssignedAgents({ - task_id: dbTaskId, - step_id: taskId, - agents: [], - confirmed_groups: updatedGroups, - agent_combinations: agentCombinations - }) - } catch (error) { - console.error('❌ 保存删除后的 confirmed_groups 失败:', error) - } - } - - // 如果删除的分组是当前选中的分组,清除选中状态 - if (isAgentGroupSelected(groupToDelete.value.agents)) { - selectedAssignmentGroup.value = [] - selectedAgents.value = new Set() + } + }) + await api.updateAssignedAgents({ + task_id: dbTaskId, + step_id: taskId, + agents: [], + confirmed_groups: updatedGroups, + agent_combinations: agentCombinations + }) + } catch (error) { + console.error('❌ 保存删除后的 confirmed_groups 失败:', error) } } - // 统一确认删除处理 - const handleConfirmDelete = async () => { - if (dimensionToDelete.value) { - await confirmDeleteDimension() - } else if (groupToDelete.value) { - await confirmDeleteGroup() - } - // 关闭对话框并清理状态 - deleteDialogVisible.value = false - dimensionToDelete.value = null - groupToDelete.value = null + // 如果删除的分组是当前选中的分组,清除选中状态 + if (isAgentGroupSelected(groupToDelete.value.agents)) { + selectedAssignmentGroup.value = [] + selectedAgents.value = new Set() } +} + +// 统一确认删除处理 +const handleConfirmDelete = async () => { + if (dimensionToDelete.value) { + await confirmDeleteDimension() + } else if (groupToDelete.value) { + await confirmDeleteGroup() + } + // 关闭对话框并清理状态 + deleteDialogVisible.value = false + dimensionToDelete.value = null + groupToDelete.value = null +} @@ -1169,7 +1184,11 @@ const confirmDeleteDimension = async () => { @@ -1179,37 +1198,48 @@ const confirmDeleteDimension = async () => { .agent-allocation-container { display: flex; width: 100%; - height: 100%; + min-height: 100%; gap: 0; // 最左侧区域 - 任务大纲流程 - 18% .allocation-task-outline { width: 18%; - height: 100%; + min-height: 100%; + padding-left: 8px; + padding-top: 8px; + padding-bottom: 8px; + box-sizing: border-box; } // 缝隙 - 1% .allocation-gap { width: 1%; - height: 100%; + min-height: 100%; } // 左侧区域 - 智能体 - 15% .allocation-left { width: 15%; - height: 100%; + min-height: 100%; + padding-top: 8px; + padding-bottom: 8px; + box-sizing: border-box; } // 右侧区域 - 智能体对比 - 65% .allocation-right { width: 65%; - height: 100%; + min-height: 100%; + padding-right: 8px; + padding-top: 8px; + padding-bottom: 8px; + box-sizing: border-box; } .section-card { width: 100%; - height: 100%; - background-color: var(--color-card-bg-task); + min-height: 100%; + background-color: var(--color-task-outline-bg); border-radius: 8px; padding: 16px; box-sizing: border-box; @@ -1223,7 +1253,6 @@ const confirmDeleteDimension = async () => { color: var(--color-text-title-header); margin-bottom: 16px; padding-bottom: 8px; - border-bottom: 1px solid var(--color-border-separate); flex-shrink: 0; } } @@ -1238,24 +1267,36 @@ const confirmDeleteDimension = async () => { .task-outline-item { padding: 10px 12px; - border: 1px solid var(--color-card-border-task); + border: 2px solid transparent; border-radius: 8px; font-size: 14px; color: var(--color-text-title-header); cursor: pointer; transition: all 0.2s ease; - background-color: transparent; + background-color: var(--color-flow-list-bg); box-sizing: border-box; + overflow: hidden; + + .task-name { + display: block; + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; + } &:hover { background-color: var(--color-card-bg-task-hover); box-shadow: 0px 2px 5px 0px rgba(0, 0, 0, 0.5); + border: 2px solid transparent; } // 选中状态 - 渐变边框样式 &.is-selected { border: 2px solid transparent; - background: linear-gradient(var(--color-card-bg-task), var(--color-card-bg-task)) + 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; font-weight: 600; @@ -1267,16 +1308,23 @@ const confirmDeleteDimension = async () => { .agent-group { margin-bottom: 12px; - // 分组标题(独立容器) + // 分组标题(包裹列表) .agent-group-title { - display: flex; - align-items: center; - justify-content: space-between; - padding: 4px 8px; - font-size: 10px; - font-weight: 600; - color: var(--color-text-title-header); - cursor: pointer; + border-radius: 8px; + overflow: hidden; + background-color: var(--color-task-outline-bg); + + // 标题头部 + .agent-group-header { + display: flex; + align-items: center; + justify-content: space-between; + padding: 4px 8px; + font-size: 12px; + font-weight: 600; + color: var(--color-text-title-header); + cursor: pointer; + } .agent-group-title-text { flex: 1; @@ -1286,30 +1334,40 @@ const confirmDeleteDimension = async () => { cursor: pointer; padding: 2px; border-radius: 4px; - transition: all 0.3s ease; + background-color: var(--color-group-delete-bg); + color: var(--color-group-delete-icon); + transition: all 0.2s ease; &:hover { - background-color: rgba(0, 0, 0, 0.1); - color: var(--color-text-secondary); + background-color: var(--color-group-delete-bg-hover); + color: var(--color-group-delete-icon); transform: rotate(180deg); } } - } - // 智能体列表容器(选中时有渐变边框) - .agent-list { - display: flex; - flex-direction: column; - border: 1px solid var(--color-card-border-task); - border-radius: 8px; - overflow: hidden; + // 智能体列表内容 + .agent-list-content { + display: flex; + flex-direction: column; + border-radius: 8px; + overflow: hidden; + transition: background-color 0.2s ease; - // 列表选中效果 - &.agent-list-selected { - border: 2px solid transparent; - 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; + // 悬浮任意智能体时,整个列表变色 + &:has(.agent-item:hover) { + background-color: var(--color-card-bg-task-hover); + } + + // 选中状态 - 渐变边框 + &.agent-list-selected { + border: 2px solid transparent; + 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; + } } } @@ -1318,17 +1376,11 @@ const confirmDeleteDimension = async () => { align-items: center; padding: 8px 12px; cursor: pointer; - transition: all 0.2s ease; - border-bottom: 1px solid var(--color-border-separate); &:last-child { border-bottom: none; } - &:hover { - background-color: var(--color-card-bg-task-hover); - } - .agent-info { display: flex; align-items: center; @@ -1649,7 +1701,7 @@ const confirmDeleteDimension = async () => { font-size: 10px; color: var(--color-text-title-header); text-align: center; - word-break: break-all; + white-space: nowrap; line-height: 1.2; max-width: 76px; overflow: hidden;