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 变化，自动选中当前步骤 // 监听 currentTask 变化，自动选中当前步骤
watch( watch(
() => currentTask.value?.StepName, () => currentTask.value?.StepName,
(newStepName) => { newStepName => {
if (newStepName) { if (newStepName) {
selectedTaskOutline.value = newStepName selectedTaskOutline.value = newStepName
} }
@@ -809,7 +809,9 @@ 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)
} }
@@ -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,11 +915,10 @@ 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"
@@ -925,14 +927,13 @@ const confirmDeleteDimension = async () => {
@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)"
> >
<div v-for="agent in group" :key="agent" class="agent-item">
<el-tooltip <el-tooltip
effect="light" effect="light"
placement="top" placement="top"
@@ -951,7 +952,11 @@ const confirmDeleteDimension = async () => {
</template> </template>
<div class="agent-info"> <div class="agent-info">
<div class="agent-icon" :style="{ background: getAgentMapIcon(agent).color }"> <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> </div>
<span class="agent-name">{{ agent }}</span> <span class="agent-name">{{ agent }}</span>
</div> </div>
@@ -961,6 +966,7 @@ const confirmDeleteDimension = async () => {
</div> </div>
</div> </div>
</div> </div>
</div>
<!-- 中间缝隙 - 1% --> <!-- 中间缝隙 - 1% -->
<div class="allocation-gap"></div> <div class="allocation-gap"></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 {
border-radius: 8px;
overflow: hidden;
background-color: var(--color-task-outline-bg);
// 标题头部
.agent-group-header {
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: space-between; justify-content: space-between;
padding: 4px 8px; padding: 4px 8px;
font-size: 10px; font-size: 12px;
font-weight: 600; font-weight: 600;
color: var(--color-text-title-header); color: var(--color-text-title-header);
cursor: pointer; cursor: pointer;
}
.agent-group-title-text { .agent-group-title-text {
flex: 1; flex: 1;
@@ -1286,49 +1334,53 @@ 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;
// 列表选中效果 // 悬浮任意智能体时，整个列表变色
&:has(.agent-item:hover) {
background-color: var(--color-card-bg-task-hover);
}
// 选中状态 - 渐变边框
&.agent-list-selected { &.agent-list-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;
} }
} }
}
.agent-item { .agent-item {
display: flex; display: flex;
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;