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

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

@@ -57,7 +57,7 @@ const selectedTaskOutline = ref<string>('')
// 监听 currentTask 变化，自动选中当前步骤
watch(
() => currentTask.value?.StepName,
(newStepName) => {
newStepName => {
if (newStepName) {
selectedTaskOutline.value = newStepName
}
@@ -809,7 +809,9 @@ 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)
}
@@ -891,9 +893,10 @@ const confirmDeleteDimension = async () => {
:key="index"
class="task-outline-item"
:class="{ 'is-selected': isTaskOutlineSelected(task) }"
:title="task.StepName"
@click="selectTaskOutline(task)"
>
{{ task.StepName }}
<span class="task-name">{{ task.StepName }}</span>
</div>
</div>
</div>
@@ -912,11 +915,10 @@ const confirmDeleteDimension = async () => {
:key="groupIndex"
class="agent-group"
>
<!-- 分组标题 -->
<!-- 分组标题（包裹列表） -->
<div class="agent-group-title">
<span class="agent-group-title-text" @click="selectAgentGroup(group)">
分组 {{ groupIndex + 1 }}
</span>
<div class="agent-group-header" @click="selectAgentGroup(group)">
<span class="agent-group-title-text"> 分组 {{ groupIndex + 1 }} </span>
<svg-icon
class="agent-group-delete"
icon-class="close"
@@ -925,14 +927,13 @@ const confirmDeleteDimension = async () => {
@click="handleDeleteGroup(groupIndex, group, $event)"
/>
</div>
<!-- 智能体列表容器（选中时有渐变边框） -->
<div class="agent-list" :class="{ 'agent-list-selected': isAgentGroupSelected(group) }">
<!-- 智能体列表 -->
<div
v-for="agent in group"
:key="agent"
class="agent-item"
class="agent-list-content"
:class="{ 'agent-list-selected': isAgentGroupSelected(group) }"
@click="selectAgentGroup(group)"
>
<div v-for="agent in group" :key="agent" class="agent-item">
<el-tooltip
effect="light"
placement="top"
@@ -951,7 +952,11 @@ const confirmDeleteDimension = async () => {
</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" />
<svg-icon
:icon-class="getAgentMapIcon(agent).icon"
color="#fff"
size="16px"
/>
</div>
<span class="agent-name">{{ agent }}</span>
</div>
@@ -961,6 +966,7 @@ const confirmDeleteDimension = async () => {
</div>
</div>
</div>
</div>
<!-- 中间缝隙 - 1% -->
<div class="allocation-gap"></div>
@@ -1014,6 +1020,7 @@ const confirmDeleteDimension = async () => {
'is-odd': (index + 1) % 2 === 1,
'is-even': (index + 1) % 2 === 0
}"
:title="dimension"
@click="toggleDimensionSelection(dimension)"
>
<span class="dimension-name">{{ dimension }}</span>
@@ -1083,7 +1090,15 @@ const confirmDeleteDimension = async () => {
</template>
<!-- 显示名称模式 -->
<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 }}
</div>
</template>
@@ -1169,7 +1184,11 @@ const confirmDeleteDimension = async () => {
<DeleteConfirmDialog
v-model="deleteDialogVisible"
:title="groupToDelete ? '确认删除该分组 ?' : '确认删除该维度 ?'"
:content="groupToDelete ? '删除后，该分组的智能体数据将无法恢复 !' : '删除后，该维度的评分数据将无法恢复 !'"
:content="
groupToDelete
? '删除后，该分组的智能体数据将无法恢复 !'
: '删除后，该维度的评分数据将无法恢复 !'
"
@confirm="handleConfirmDelete"
/>
</div>
@@ -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 {
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: 10px;
font-size: 12px;
font-weight: 600;
color: var(--color-text-title-header);
cursor: pointer;
}
.agent-group-title-text {
flex: 1;
@@ -1286,49 +1334,53 @@ 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 {
// 智能体列表内容
.agent-list-content {
display: flex;
flex-direction: column;
border: 1px solid var(--color-card-border-task);
border-radius: 8px;
overflow: hidden;
transition: background-color 0.2s ease;
// 列表选中效果
// 悬浮任意智能体时，整个列表变色
&: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), 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;
}
}
}
.agent-item {
display: flex;
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;