iod/AgentCoord
10
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat:专家智能体评选页面样式调整和功能确认

Browse Source
This commit is contained in:
liailing1026
2026-03-04 10:18:22 +08:00
parent 8e48f1d1d6
commit a61016eace
1 changed files with 192 additions and 140 deletions
Download Patch File Download Diff File Expand all files Collapse all files

332
frontend/src/layout/components/Main/TaskTemplate/TaskSyllabus/components/AgentAllocation.vue
View File

@@ -57,7 +57,7 @@ const selectedTaskOutline = ref<string>('')
// 监听 currentTask 变化，自动选中当前步骤 // 监听 currentTask 变化，自动选中当前步骤
watch( watch(
() => currentTask.value?.StepName, () => currentTask.value?.StepName,
(newStepName) => { newStepName => {
if (newStepName) { if (newStepName) {
selectedTaskOutline.value = newStepName selectedTaskOutline.value = newStepName
} }
@@ -809,74 +809,76 @@ const confirmDeleteDimension = async () => {
try { try {
// 同时传入大任务ID和步骤ID，只删除当前步骤的该维度 // 同时传入大任务ID和步骤ID，只删除当前步骤的该维度
await api.agentSelectModifyDeleteAspect(dbTaskId, dimension, stepTaskId) await api.agentSelectModifyDeleteAspect(dbTaskId, dimension, stepTaskId)
console.log(`[confirmDeleteDimension] 已同步删除数据库中的维度: ${dimension}, step_id: ${stepTaskId}`) console.log(
`[confirmDeleteDimension] 已同步删除数据库中的维度: ${dimension}, step_id: ${stepTaskId}`
)
} catch (error) { } catch (error) {
console.error('同步删除数据库维度失败:', error) console.error('同步删除数据库维度失败:', error)
} }
} }
} }
// 确认删除分组 // 确认删除分组
const confirmDeleteGroup = async () => { const confirmDeleteGroup = async () => {
if (!groupToDelete.value || !currentTask.value?.Id) return if (!groupToDelete.value || !currentTask.value?.Id) return
const { index, agents: deletedAgents } = groupToDelete.value const { index, agents: deletedAgents } = groupToDelete.value
const taskId = currentTask.value.Id const taskId = currentTask.value.Id
// 从 store 中删除分组 // 从 store 中删除分组
agentsStore.removeConfirmedAgentGroup(taskId, index) agentsStore.removeConfirmedAgentGroup(taskId, index)
// 从 selectionStore 中删除对应的 TaskProcess 数据 // 从 selectionStore 中删除对应的 TaskProcess 数据
selectionStore.removeAgentTaskProcess(taskId, deletedAgents) selectionStore.removeAgentTaskProcess(taskId, deletedAgents)
// 同步到数据库 // 同步到数据库
const dbTaskId = (window as any).__CURRENT_TASK_ID__ const dbTaskId = (window as any).__CURRENT_TASK_ID__
if (dbTaskId && taskId) { if (dbTaskId && taskId) {
try { try {
const updatedGroups = agentsStore.getConfirmedAgentGroups(taskId) const updatedGroups = agentsStore.getConfirmedAgentGroups(taskId)
// 获取更新后的所有组合的 TaskProcess 数据 // 获取更新后的所有组合的 TaskProcess 数据
const agentCombinations: Record<string, { process: any; brief: any }> = {} const agentCombinations: Record<string, { process: any; brief: any }> = {}
updatedGroups.forEach(group => { updatedGroups.forEach(group => {
const processData = selectionStore.getAgentTaskProcess(taskId, group) const processData = selectionStore.getAgentTaskProcess(taskId, group)
if (processData) { if (processData) {
const groupKey = selectionStore.getAgentGroupKey(group) const groupKey = selectionStore.getAgentGroupKey(group)
agentCombinations[groupKey] = { agentCombinations[groupKey] = {
process: processData.process || [], process: processData.process || [],
brief: processData.brief || {} brief: processData.brief || {}
}
} }
}) }
await api.updateAssignedAgents({ })
task_id: dbTaskId, await api.updateAssignedAgents({
step_id: taskId, task_id: dbTaskId,
agents: [], step_id: taskId,
confirmed_groups: updatedGroups, agents: [],
agent_combinations: agentCombinations confirmed_groups: updatedGroups,
}) agent_combinations: agentCombinations
} catch (error) { })
console.error('❌ 保存删除后的 confirmed_groups 失败:', error) } catch (error) {
} console.error('❌ 保存删除后的 confirmed_groups 失败:', error)
}
// 如果删除的分组是当前选中的分组，清除选中状态
if (isAgentGroupSelected(groupToDelete.value.agents)) {
selectedAssignmentGroup.value = []
selectedAgents.value = new Set()
} }
} }
// 统一确认删除处理 // 如果删除的分组是当前选中的分组，清除选中状态
const handleConfirmDelete = async () => { if (isAgentGroupSelected(groupToDelete.value.agents)) {
if (dimensionToDelete.value) { selectedAssignmentGroup.value = []
await confirmDeleteDimension() selectedAgents.value = new Set()
} else if (groupToDelete.value) {
await confirmDeleteGroup()
}
// 关闭对话框并清理状态
deleteDialogVisible.value = false
dimensionToDelete.value = null
groupToDelete.value = null
} }
}
// 统一确认删除处理
const handleConfirmDelete = async () => {
if (dimensionToDelete.value) {
await confirmDeleteDimension()
} else if (groupToDelete.value) {
await confirmDeleteGroup()
}
// 关闭对话框并清理状态
deleteDialogVisible.value = false
dimensionToDelete.value = null
groupToDelete.value = null
}
</script> </script>
<template> <template>
@@ -891,9 +893,10 @@ const confirmDeleteDimension = async () => {
:key="index" :key="index"
class="task-outline-item" class="task-outline-item"
:class="{ 'is-selected': isTaskOutlineSelected(task) }" :class="{ 'is-selected': isTaskOutlineSelected(task) }"
:title="task.StepName"
@click="selectTaskOutline(task)" @click="selectTaskOutline(task)"
> >
{{ task.StepName }} <span class="task-name">{{ task.StepName }}</span>
</div> </div>
</div> </div>
</div> </div>
@@ -912,50 +915,53 @@ const confirmDeleteDimension = async () => {
:key="groupIndex" :key="groupIndex"
class="agent-group" class="agent-group"
> >
<!-- 分组标题 --> <!-- 分组标题（包裹列表） -->
<div class="agent-group-title"> <div class="agent-group-title">
<span class="agent-group-title-text" @click="selectAgentGroup(group)"> <div class="agent-group-header" @click="selectAgentGroup(group)">
分组 {{ groupIndex + 1 }} <span class="agent-group-title-text"> 分组 {{ groupIndex + 1 }} </span>
</span> <svg-icon
<svg-icon class="agent-group-delete"
class="agent-group-delete" icon-class="close"
icon-class="close" size="14px"
size="14px" color="var(--color-text-secondary)"
color="var(--color-text-secondary)" @click="handleDeleteGroup(groupIndex, group, $event)"
@click="handleDeleteGroup(groupIndex, group, $event)" />
/> </div>
</div> <!-- 智能体列表 -->
<!-- 智能体列表容器（选中时有渐变边框） -->
<div class="agent-list" :class="{ 'agent-list-selected': isAgentGroupSelected(group) }">
<div <div
v-for="agent in group" class="agent-list-content"
:key="agent" :class="{ 'agent-list-selected': isAgentGroupSelected(group) }"
class="agent-item"
@click="selectAgentGroup(group)" @click="selectAgentGroup(group)"
> >
<el-tooltip <div v-for="agent in group" :key="agent" class="agent-item">
effect="light" <el-tooltip
placement="top" effect="light"
:teleported="false" placement="top"
:show-after="500" :teleported="false"
popper-class="agent-allocation-tooltip-popper" :show-after="500"
> popper-class="agent-allocation-tooltip-popper"
<template #content> >
<div class="agent-tooltip"> <template #content>
<div class="agent-tooltip-name">{{ agent }}</div> <div class="agent-tooltip">
<div class="agent-tooltip-separator"></div> <div class="agent-tooltip-name">{{ agent }}</div>
<div class="agent-tooltip-description"> <div class="agent-tooltip-separator"></div>
{{ agentsStore.agents.find(a => a.Name === agent)?.Profile || '暂无描述' }} <div class="agent-tooltip-description">
{{ agentsStore.agents.find(a => a.Name === agent)?.Profile || '暂无描述' }}
</div>
</div> </div>
</template>
<div class="agent-info">
<div class="agent-icon" :style="{ background: getAgentMapIcon(agent).color }">
<svg-icon
:icon-class="getAgentMapIcon(agent).icon"
color="#fff"
size="16px"
/>
</div>
<span class="agent-name">{{ agent }}</span>
</div> </div>
</template> </el-tooltip>
<div class="agent-info"> </div>
<div class="agent-icon" :style="{ background: getAgentMapIcon(agent).color }">
<svg-icon :icon-class="getAgentMapIcon(agent).icon" color="#fff" size="16px" />
</div>
<span class="agent-name">{{ agent }}</span>
</div>
</el-tooltip>
</div> </div>
</div> </div>
</div> </div>
@@ -1014,6 +1020,7 @@ const confirmDeleteDimension = async () => {
'is-odd': (index + 1) % 2 === 1, 'is-odd': (index + 1) % 2 === 1,
'is-even': (index + 1) % 2 === 0 'is-even': (index + 1) % 2 === 0
}" }"
:title="dimension"
@click="toggleDimensionSelection(dimension)" @click="toggleDimensionSelection(dimension)"
> >
<span class="dimension-name">{{ dimension }}</span> <span class="dimension-name">{{ dimension }}</span>
@@ -1083,7 +1090,15 @@ const confirmDeleteDimension = async () => {
</template> </template>
<!-- 显示名称模式 --> <!-- 显示名称模式 -->
<template v-else> <template v-else>
<div class="agent-name-display"> <div
class="agent-name-display"
:title="
(agentsStore.agents.find(a => a.Name === agentData.agentName)
?.Classification || '未知') +
' - ' +
agentData.agentName
"
>
{{ agentData.agentName }} {{ agentData.agentName }}
</div> </div>
</template> </template>
@@ -1169,7 +1184,11 @@ const confirmDeleteDimension = async () => {
<DeleteConfirmDialog <DeleteConfirmDialog
v-model="deleteDialogVisible" v-model="deleteDialogVisible"
:title="groupToDelete ? '确认删除该分组 ?' : '确认删除该维度 ?'" :title="groupToDelete ? '确认删除该分组 ?' : '确认删除该维度 ?'"
:content="groupToDelete ? '删除后，该分组的智能体数据将无法恢复 !' : '删除后，该维度的评分数据将无法恢复 !'" :content="
groupToDelete
? '删除后，该分组的智能体数据将无法恢复 !'
: '删除后，该维度的评分数据将无法恢复 !'
"
@confirm="handleConfirmDelete" @confirm="handleConfirmDelete"
/> />
</div> </div>
@@ -1179,37 +1198,48 @@ const confirmDeleteDimension = async () => {
.agent-allocation-container { .agent-allocation-container {
display: flex; display: flex;
width: 100%; width: 100%;
height: 100%; min-height: 100%;
gap: 0; gap: 0;
// 最左侧区域 - 任务大纲流程 - 18% // 最左侧区域 - 任务大纲流程 - 18%
.allocation-task-outline { .allocation-task-outline {
width: 18%; width: 18%;
height: 100%; min-height: 100%;
padding-left: 8px;
padding-top: 8px;
padding-bottom: 8px;
box-sizing: border-box;
} }
// 缝隙 - 1% // 缝隙 - 1%
.allocation-gap { .allocation-gap {
width: 1%; width: 1%;
height: 100%; min-height: 100%;
} }
// 左侧区域 - 智能体 - 15% // 左侧区域 - 智能体 - 15%
.allocation-left { .allocation-left {
width: 15%; width: 15%;
height: 100%; min-height: 100%;
padding-top: 8px;
padding-bottom: 8px;
box-sizing: border-box;
} }
// 右侧区域 - 智能体对比 - 65% // 右侧区域 - 智能体对比 - 65%
.allocation-right { .allocation-right {
width: 65%; width: 65%;
height: 100%; min-height: 100%;
padding-right: 8px;
padding-top: 8px;
padding-bottom: 8px;
box-sizing: border-box;
} }
.section-card { .section-card {
width: 100%; width: 100%;
height: 100%; min-height: 100%;
background-color: var(--color-card-bg-task); background-color: var(--color-task-outline-bg);
border-radius: 8px; border-radius: 8px;
padding: 16px; padding: 16px;
box-sizing: border-box; box-sizing: border-box;
@@ -1223,7 +1253,6 @@ const confirmDeleteDimension = async () => {
color: var(--color-text-title-header); color: var(--color-text-title-header);
margin-bottom: 16px; margin-bottom: 16px;
padding-bottom: 8px; padding-bottom: 8px;
border-bottom: 1px solid var(--color-border-separate);
flex-shrink: 0; flex-shrink: 0;
} }
} }
@@ -1238,24 +1267,36 @@ const confirmDeleteDimension = async () => {
.task-outline-item { .task-outline-item {
padding: 10px 12px; padding: 10px 12px;
border: 1px solid var(--color-card-border-task); border: 2px solid transparent;
border-radius: 8px; border-radius: 8px;
font-size: 14px; font-size: 14px;
color: var(--color-text-title-header); color: var(--color-text-title-header);
cursor: pointer; cursor: pointer;
transition: all 0.2s ease; transition: all 0.2s ease;
background-color: transparent; background-color: var(--color-flow-list-bg);
box-sizing: border-box; box-sizing: border-box;
overflow: hidden;
.task-name {
display: block;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
&:hover { &:hover {
background-color: var(--color-card-bg-task-hover); background-color: var(--color-card-bg-task-hover);
box-shadow: 0px 2px 5px 0px rgba(0, 0, 0, 0.5); box-shadow: 0px 2px 5px 0px rgba(0, 0, 0, 0.5);
border: 2px solid transparent;
} }
// 选中状态 - 渐变边框样式 // 选中状态 - 渐变边框样式
&.is-selected { &.is-selected {
border: 2px solid transparent; 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, padding-box,
linear-gradient(to right, var(--color-accent), var(--color-accent-secondary)) border-box; linear-gradient(to right, var(--color-accent), var(--color-accent-secondary)) border-box;
font-weight: 600; font-weight: 600;
@@ -1267,16 +1308,23 @@ const confirmDeleteDimension = async () => {
.agent-group { .agent-group {
margin-bottom: 12px; margin-bottom: 12px;
// 分组标题（独立容器） // 分组标题（包裹列表）
.agent-group-title { .agent-group-title {
display: flex; border-radius: 8px;
align-items: center; overflow: hidden;
justify-content: space-between; background-color: var(--color-task-outline-bg);
padding: 4px 8px;
font-size: 10px; // 标题头部
font-weight: 600; .agent-group-header {
color: var(--color-text-title-header); display: flex;
cursor: pointer; 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 { .agent-group-title-text {
flex: 1; flex: 1;
@@ -1286,30 +1334,40 @@ const confirmDeleteDimension = async () => {
cursor: pointer; cursor: pointer;
padding: 2px; padding: 2px;
border-radius: 4px; 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 { &:hover {
background-color: rgba(0, 0, 0, 0.1); background-color: var(--color-group-delete-bg-hover);
color: var(--color-text-secondary); color: var(--color-group-delete-icon);
transform: rotate(180deg); transform: rotate(180deg);
} }
} }
}
// 智能体列表容器（选中时有渐变边框） // 智能体列表内容
.agent-list { .agent-list-content {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
border: 1px solid var(--color-card-border-task); border-radius: 8px;
border-radius: 8px; overflow: hidden;
overflow: hidden; transition: background-color 0.2s ease;
// 列表选中效果 // 悬浮任意智能体时，整个列表变色
&.agent-list-selected { &:has(.agent-item:hover) {
border: 2px solid transparent; background-color: var(--color-card-bg-task-hover);
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; // 选中状态 - 渐变边框
&.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; align-items: center;
padding: 8px 12px; padding: 8px 12px;
cursor: pointer; cursor: pointer;
transition: all 0.2s ease;
border-bottom: 1px solid var(--color-border-separate);
&:last-child { &:last-child {
border-bottom: none; border-bottom: none;
} }
&:hover {
background-color: var(--color-card-bg-task-hover);
}
.agent-info { .agent-info {
display: flex; display: flex;
align-items: center; align-items: center;
@@ -1649,7 +1701,7 @@ const confirmDeleteDimension = async () => {
font-size: 10px; font-size: 10px;
color: var(--color-text-title-header); color: var(--color-text-title-header);
text-align: center; text-align: center;
word-break: break-all; white-space: nowrap;
line-height: 1.2; line-height: 1.2;
max-width: 76px; max-width: 76px;
overflow: hidden; overflow: hidden;