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

frontend/src/layout/components/Main/TaskTemplate/TaskSyllabus/components/AgentAllocation.vue

@@ -57,7 +57,7 @@ const selectedTaskOutline = ref<string>('')
 // 监听 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<string, { process: any; brief: any }> = {}
-        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<string, { process: any; brief: any }> = {}
+      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
+}
 </script>
 
 <template>
@@ -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,50 +915,53 @@ 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>
-            <svg-icon
-              class="agent-group-delete"
-              icon-class="close"
-              size="14px"
-              color="var(--color-text-secondary)"
-              @click="handleDeleteGroup(groupIndex, group, $event)"
-            />
-          </div>
-          <!-- 智能体列表容器（选中时有渐变边框） -->
-          <div class="agent-list" :class="{ 'agent-list-selected': isAgentGroupSelected(group) }">
+            <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"
+                size="14px"
+                color="var(--color-text-secondary)"
+                @click="handleDeleteGroup(groupIndex, group, $event)"
+              />
+            </div>
+            <!-- 智能体列表 -->
             <div
-              v-for="agent in group"
-              :key="agent"
-              class="agent-item"
+              class="agent-list-content"
+              :class="{ 'agent-list-selected': isAgentGroupSelected(group) }"
               @click="selectAgentGroup(group)"
             >
-              <el-tooltip
-                effect="light"
-                placement="top"
-                :teleported="false"
-                :show-after="500"
-                popper-class="agent-allocation-tooltip-popper"
-              >
-                <template #content>
-                  <div class="agent-tooltip">
-                    <div class="agent-tooltip-name">{{ agent }}</div>
-                    <div class="agent-tooltip-separator"></div>
-                    <div class="agent-tooltip-description">
-                      {{ agentsStore.agents.find(a => a.Name === agent)?.Profile || '暂无描述' }}
+              <div v-for="agent in group" :key="agent" class="agent-item">
+                <el-tooltip
+                  effect="light"
+                  placement="top"
+                  :teleported="false"
+                  :show-after="500"
+                  popper-class="agent-allocation-tooltip-popper"
+                >
+                  <template #content>
+                    <div class="agent-tooltip">
+                      <div class="agent-tooltip-name">{{ agent }}</div>
+                      <div class="agent-tooltip-separator"></div>
+                      <div class="agent-tooltip-description">
+                        {{ agentsStore.agents.find(a => a.Name === agent)?.Profile || '暂无描述' }}
+                      </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>
-                </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>
-              </el-tooltip>
+                </el-tooltip>
+              </div>
             </div>
           </div>
         </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 {
-      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;