优化显示

src/components/devices/RobotTaskPage.tsx

@@ -871,63 +871,39 @@ export default function RobotTaskPage() {
 			<Row gutter={10} style={{ marginBottom: 10 }}>
 				<Col xs={24} xl={14} style={{ display: "flex", flexDirection: "column" }}>
 					<Card
-						title={<div style={{ display: 'flex', alignItems: 'center', gap: '12px', flexWrap: 'wrap' }}>
-							<span style={{ fontSize: fontNormal, fontWeight: 700 }}>
-								机器人路径规划与监控
-							</span>
+						title={
+							<div
+								style={{
+									display: 'flex',
+									alignItems: 'center',
+									gap: '12px',
+									flexWrap: 'wrap',
+									// 新增核心修复样式
+									flex: 1,
+									overflow: 'visible',
+									whiteSpace: 'normal',
+									minWidth: 0, // flex 子元素收缩兜底，超长时允许压缩换行
+								}}
+							>
+								<span style={{ fontSize: fontNormal, fontWeight: 700 }}>
+									机器人路径规划与监控
+								</span>
 
-							{/* 执行后显示机器信息 + 状态 */}
-							{execute && executingRobot && (
-								<div
-									style={{
-										display: 'inline-flex',
-										alignItems: 'center',
-										gap: '8px',
-										fontSize: '12px',
-										color: '#fff',
-										background: '#165DFF',
-										padding: '2px 8px',
-										borderRadius: '4px',
-										whiteSpace: 'nowrap'
-									}}
-								>
-									{/* 机器名称 */}
-									<span>{executingRobot.deviceAlias || executingRobot.serialNumber}</span>
 
-									{/* 控制模式 */}
-									<span>
-										控制模式：{robotRealtimePosition?.controlMode}
-										{robotRealtimePosition?.controlMode == '1' ? (
-											<span style={{ color: '#9eff9e' }}>本地</span>
-										) : (
-											<span style={{ color: '#ff6f6f' }}>远程</span>
-										)}
-									</span>
-
-									{/* 航向初始化 */}
-									<span>
-										航向：
-										{robotRealtimePosition?.headingStatus == '1' ? (
-											<span style={{ color: '#9eff9e' }}>已初始化</span>
-										) : (
-											<span style={{ color: '#ff6f6f' }}>未初始化</span>
-										)}
-									</span>
-
-									{/* 定位质量 */}
-									<span>
-										定位：
-										{(() => {
-											const qual = robotRealtimePosition?.qual;
-											const info = getLocationQuality(qual);
-											return <span style={{ color: info.color }}>{info.text}</span>;
-										})()}
-									</span>
-								</div>
-							)}
-						</div>}
+							</div>
+						}
 						size="small"
-
+						extra={
+							<Space size={4} wrap> {/* Space开启自动换行，小屏按钮自动折行 */}
+								<Button size="small" icon={<DeleteOutlined />} type="primary" style={{ borderRadius: 4 }} onClick={() => setClearNavLine(v => v + 1)}>清空实时轨迹</Button>
+								<Button size="small" icon={<DeleteOutlined />} danger style={{ borderRadius: 4 }} onClick={() => { setPoints([]); setClearPlanLine(v => v + 1); }}>清空规划航线</Button>
+								<Button size="small" icon={<PlusOutlined />} style={{ borderRadius: 4 }}>新增</Button>
+								<Button size="small" icon={<ImportOutlined />} style={{ borderRadius: 4 }}>导入</Button>
+								<Button size="small" icon={<NodeIndexOutlined />} style={{ borderRadius: 4 }}>优化</Button>
+								<Button size="small" icon={<SaveOutlined />} style={{ borderRadius: 4 }}>保存</Button>
+								<Button size="small" icon={<Maximize2 size={12} />} />
+							</Space>
+						}
 						bordered={false}
 						bodyStyle={{ padding: 0, position: 'relative' }}
 						style={{ ...cardStyle, marginBottom: 10 }}
@@ -945,6 +921,64 @@ export default function RobotTaskPage() {
 								ifClearNavLine={clearNavLine}
 								ifClearPlanLine={clearPlanLine}
 							/>
+
+							{/* 机器人状态悬浮面板 - 绝对定位左上角 */}
+							{execute && executingRobot && (
+								<div
+									style={{
+										position: 'absolute',
+										top: 16,
+										left: 10, // 避开左侧图例面板，防止重叠
+										background: 'rgba(22, 93, 255, 0.88)',
+										backdropFilter: 'blur(6px)',
+										color: '#fff',
+										fontSize: '12px',
+										padding: '8px 12px',
+										borderRadius: '8px',
+										boxShadow: '0 2px 10px rgba(0,0,0,0.15)',
+										maxWidth: 360, // 限制最大宽度，不会无限拉长
+										display: 'flex',
+										flexWrap: 'wrap',
+										alignItems: 'center',
+										gap: '6px 12px',
+										rowGap: 6,
+										zIndex: 10,
+									}}
+								>
+									<span style={{ fontWeight: 600 }}>
+										🤖 {executingRobot.deviceAlias || executingRobot.serialNumber}
+									</span>
+
+									<span>
+										控制模式：
+										{robotRealtimePosition?.controlMode == '1' ? (
+											<span style={{ color: '#ff6f6f' }}>本地</span>
+										) : (
+											<span style={{ color: '#9eff9e' }}>远程</span>
+										)}
+									</span>
+
+									<span>
+										航向：
+										{robotRealtimePosition?.headingStatus == '1' ? (
+											<span style={{ color: '#9eff9e' }}>已初始化</span>
+										) : (
+											<span style={{ color: '#ff6f6f' }}>未初始化</span>
+										)}
+									</span>
+
+									<span>
+										定位：
+										{(() => {
+											const qual = robotRealtimePosition?.qual;
+											const info = getLocationQuality(qual);
+											return <span style={{ color: info.color }}>{info.text}</span>;
+										})()}
+									</span>
+								</div>
+							)}
+
+
 						</div>
 					</Card>