Robot栏配置

<template><div class="incident-header"><div class="header-container"><!-- 左侧区域 --><div class="header-left"><el-button class="back-button" circle @click="handleBack"><el-icon><ArrowLeft /></el-icon></el-button><span class="header-title">历史</span></div><!-- 中间机器人区域 --><div class="header-center"><!-- 单个机器人：显示标题 --><div v-if="robots.length === 1" class="single-robot-section"><RobotAvatar :is-active="robots[0].isActive" size="large" /><div class="incident-title"><h1>Incident</h1><h2>Robot</h2></div></div><!-- 多个机器人：居中显示 --><div v-else class="multi-robot-section"><template v-for="(robot, index) in robots" :key="robot.id"><RobotAvatar :is-active="robot.isActive" /><div v-if="index < robots.length - 1" class="robot-divider" /></template></div></div><!-- 右侧按钮 --><div class="header-right"><el-dropdown @command="handleHandoverCommand"><el-button type="primary" class="handover-button">待处理<el-icon class="el-icon--right"><ArrowDown /></el-icon></el-button><template #dropdown><el-dropdown-menu><el-dropdown-item command="takeover">立即接管</el-dropdown-item><el-dropdown-item command="assign">分配任务</el-dropdown-item><el-dropdown-item command="view">查看详情</el-dropdown-item></el-dropdown-menu></template></el-dropdown></div></div></div>
</template><script setup>
import { ArrowLeft, ArrowDown } from '@element-plus/icons-vue'
import RobotAvatar from './RobotAvatar.vue'/*** Props 定义*/
const props = defineProps({// 机器人列表robots: {type: Array,required: true,validator: (value) => {return value.every((robot) => typeof robot.id === 'string' && typeof robot.isActive === 'boolean',)},},
})/*** Emits 定义*/
const emit = defineEmits(['back', 'handover'])/*** 返回按钮处理*/
const handleBack = () => {emit('back')
}/*** 人工接管命令处理*/
const handleHandoverCommand = (command) => {emit('handover', command)
}
</script><style scoped>
.incident-header {width: 100%;
}.header-container {position: relative;display: flex;align-items: center;justify-content: space-between;padding: 24px;background: linear-gradient(to right,rgba(239, 246, 255, 0.95),rgba(245, 243, 255, 0.95),rgba(239, 246, 255, 0.95));box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
}/* 左侧区域 */
.header-left {display: flex;align-items: center;gap: 16px;z-index: 10;
}.back-button {width: 40px;height: 40px;background-color: rgba(0, 0, 0, 0.8);border: none;color: white;box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);transition: all 300ms;
}.back-button:hover {background-color: rgba(0, 0, 0, 0.9);transform: translateY(-1px);box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
}.back-button:active {transform: translateY(0);
}.header-title {font-size: 24px;font-weight: 500;color: #3b82f6;letter-spacing: 0.5px;
}/* 中间区域 */
.header-center {position: absolute;left: 50%;top: 50%;transform: translate(-50%, -50%);
}/* 单机器人布局 */
.single-robot-section {display: flex;align-items: center;gap: 24px;
}.incident-title h1,
.incident-title h2 {margin: 0;font-size: 20px;font-weight: 500;color: #374151;line-height: 1.4;
}/* 多机器人布局 - 修改为透明背景，仅底部有线条 */
.multi-robot-section {display: flex;align-items: center;gap: 16px;padding: 12px 32px 16px 32px;position: relative;
}/* 底部线条 */
.multi-robot-section::after {content: '';position: absolute;bottom: 0;left: 20px;right: 20px;height: 3px;background: linear-gradient(to right, transparent 0%, #3b82f6 20%, #3b82f6 80%, transparent 100%);border-radius: 2px;
}.robot-divider {width: 1px;height: 32px;background-color: #d1d5db;
}/* 右侧区域 */
.header-right {z-index: 10;
}.handover-button {padding: 12px 32px;font-size: 18px;font-weight: 500;border-radius: 12px;box-shadow: 0 4px 12px rgba(37, 99, 235, 0.3);transition: all 300ms;
}.handover-button:hover {transform: translateY(-2px);box-shadow: 0 6px 16px rgba(37, 99, 235, 0.4);
}.handover-button:active {transform: translateY(0);
}/* 响应式设计 */
@media (max-width: 768px) {.header-container {flex-direction: column;gap: 16px;}.header-center {position: static;transform: none;margin: 16px 0;}
}
</style>