xudan/web-map
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

refactor: 重构机器人菜单组件，优化布局和样式，增强响应式设计，提升用户体验

Browse Source
This commit is contained in:
xudan 2025-09-10 10:41:10 +08:00
parent a4b1975492
commit dedb444200
1 changed files with 183 additions and 136 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

317
src/components/context-menu/robot-menu.vue
View File

@ -1,104 +1,111 @@
<template> <template>
<div class="robot-menu"> <div class="robot-menu">
<div v-if="robotInfo" class="robot-info-section"> <div class="menu-container">
<!-- 机器人基本信息 --> <!-- 左侧：机器人信息区域 -->
<div class="robot-header"> <div v-if="robotInfo" class="robot-info-section">
<div class="robot-name">{{ robotInfo.name }}</div> <div class="robot-header">
<div class="robot-status" :style="{ color: getStatusColor(robotInfo.status) }"> <div class="robot-name">{{ robotInfo.name }}</div>
{{ getStatusText(robotInfo.status) }} <div class="robot-status" :style="{ color: getStatusColor(robotInfo.status) }">
</div> {{ getStatusText(robotInfo.status) }}
</div>
<!-- 机器人详细信息 -->
<div class="robot-details">
<div v-if="robotInfo.batteryLevel !== undefined" class="detail-item">
<span class="detail-label">电量:</span>
<div class="battery-container">
<div class="battery-bar">
<div
class="battery-fill"
:style="{ width: `${robotInfo.batteryLevel}%` }"
:class="getBatteryClass(robotInfo.batteryLevel)"
></div>
</div>
<span class="battery-text">{{ robotInfo.batteryLevel }}%</span>
</div> </div>
</div> </div>
<div v-if="robotInfo.currentTask" class="detail-item"> <div class="robot-details">
<span class="detail-label">当前任务:</span> <div v-if="robotInfo.batteryLevel !== undefined" class="detail-item">
<span class="detail-value">{{ robotInfo.currentTask }}</span> <span class="detail-label">电量:</span>
</div> <div class="battery-container">
</div> <div class="battery-bar">
</div> <div
class="battery-fill"
:style="{ width: `${robotInfo.batteryLevel}%` }"
:class="getBatteryClass(robotInfo.batteryLevel)"
></div>
</div>
<span class="battery-text">{{ robotInfo.batteryLevel }}%</span>
</div>
</div>
<!-- 机器人操作菜单 --> <div v-if="robotInfo.currentTask" class="detail-item">
<div class="robot-actions"> <span class="detail-label">当前任务:</span>
<div class="action-group"> <span class="detail-value">{{ robotInfo.currentTask }}</span>
<div class="action-group-title">控制权限</div> </div>
<div class="action-item" @click="handleRobotAction('seize_control', '抢占控制权')">
<span class="action-icon">🎮</span>
<span>抢占控制权</span>
</div>
<div class="action-item" @click="handleRobotAction('enable_orders', '可接单')">
<span class="action-icon">✅</span>
<span>可接单</span>
</div>
<div class="action-item" @click="handleRobotAction('disable_orders', '不可接单')">
<span class="action-icon">❌</span>
<span>不可接单</span>
</div> </div>
</div> </div>
<div class="action-group"> <!-- 右侧：机器人操作菜单 -->
<div class="action-group-title">运行控制</div> <div class="robot-actions">
<div class="action-item" @click="handleRobotAction('pause', '暂停')"> <div class="actions-grid">
<span class="action-icon">⏸️</span> <!-- 控制权限 -->
<span>暂停</span> <div class="action-group">
</div> <div class="action-group-title">控制权限</div>
<div class="action-item" @click="handleRobotAction('resume', '继续')"> <div class="action-item" @click="handleRobotAction('seize_control', '抢占控制权')">
<span class="action-icon">▶️</span> <span class="action-icon">🎮</span>
<span>继续</span> <span>抢占控制权</span>
</div> </div>
<div class="action-item" @click="handleRobotAction('start', '启动')"> <div class="action-item" @click="handleRobotAction('enable_orders', '可接单')">
<span class="action-icon">🚀</span> <span class="action-icon">✅</span>
<span>启动</span> <span>可接单</span>
</div> </div>
<div class="action-item" @click="handleRobotAction('stop', '停止')"> <div class="action-item" @click="handleRobotAction('disable_orders', '不可接单')">
<span class="action-icon">⏹️</span> <span class="action-icon">❌</span>
<span>停止</span> <span>不可接单</span>
</div> </div>
</div> </div>
<div class="action-group"> <!-- 运行控制 -->
<div class="action-group-title">导航控制</div> <div class="action-group">
<div class="action-item" @click="handleRobotAction('go_charge', '前往充电')"> <div class="action-group-title">运行控制</div>
<span class="action-icon">🔋</span> <div class="action-item" @click="handleRobotAction('pause', '暂停')">
<span>前往充电</span> <span class="action-icon">⏸️</span>
</div> <span>暂停</span>
<div class="action-item" @click="handleRobotAction('go_dock', '前往停靠')"> </div>
<span class="action-icon">🏠</span> <div class="action-item" @click="handleRobotAction('resume', '继续')">
<span>前往停靠</span> <span class="action-icon">▶️</span>
</div> <span>继续</span>
<div class="action-item" @click="handleRobotAction('navigate', '路径导航')"> </div>
<span class="action-icon">🧭</span> <div class="action-item" @click="handleRobotAction('start', '启动')">
<span>路径导航</span> <span class="action-icon">🚀</span>
</div> <span>启动</span>
</div> </div>
<div class="action-item" @click="handleRobotAction('stop', '停止')">
<span class="action-icon">⏹️</span>
<span>停止</span>
</div>
</div>
<div class="action-group"> <!-- 导航控制 -->
<div class="action-group-title">系统管理</div> <div class="action-group">
<div class="action-item" @click="handleRobotAction('reset', '重置')"> <div class="action-group-title">导航控制</div>
<span class="action-icon">🔄</span> <div class="action-item" @click="handleRobotAction('go_charge', '前往充电')">
<span>重置</span> <span class="action-icon">🔋</span>
</div> <span>前往充电</span>
<div class="action-item" @click="handleRobotAction('diagnose', '诊断')"> </div>
<span class="action-icon">🔧</span> <div class="action-item" @click="handleRobotAction('go_dock', '前往停靠')">
<span>诊断</span> <span class="action-icon">🏠</span>
</div> <span>前往停靠</span>
<div class="action-item" @click="handleRobotAction('update', '更新')"> </div>
<span class="action-icon">📱</span> <div class="action-item" @click="handleRobotAction('navigate', '路径导航')">
<span>更新</span> <span class="action-icon">🧭</span>
<span>路径导航</span>
</div>
</div>
<!-- 系统管理 -->
<div class="action-group">
<div class="action-group-title">系统管理</div>
<div class="action-item" @click="handleRobotAction('reset', '重置')">
<span class="action-icon">🔄</span>
<span>重置</span>
</div>
<div class="action-item" @click="handleRobotAction('diagnose', '诊断')">
<span class="action-icon">🔧</span>
<span>诊断</span>
</div>
<div class="action-item" @click="handleRobotAction('update', '更新')">
<span class="action-icon">📱</span>
<span>更新</span>
</div>
</div>
</div> </div>
</div> </div>
</div> </div>
@ -106,13 +113,9 @@
</template> </template>
<script setup lang="ts"> <script setup lang="ts">
import { computed } from 'vue';
import type { RobotAction,RobotInfo } from '../../services/context-menu/robot-menu.service'; import type { RobotAction,RobotInfo } from '../../services/context-menu/robot-menu.service';
import { import {
executeRobotAction, executeRobotAction,
getRobotActionIcon,
getRobotActionText,
getRobotStatusColor, getRobotStatusColor,
getRobotStatusText} from '../../services/context-menu/robot-menu.service'; getRobotStatusText} from '../../services/context-menu/robot-menu.service';
@ -183,80 +186,94 @@ const handleRobotAction = async (action: RobotAction, actionName: string) => {
<style scoped> <style scoped>
.robot-menu { .robot-menu {
width: 100%; width: 100%;
min-width: 200px; min-width: 320px;
max-width: 500px;
} }
/* 机器人信息区域 */ /* 主容器：左右布局 */
.menu-container {
display: flex;
min-height: 200px;
}
/* 左侧：机器人信息区域 */
.robot-info-section { .robot-info-section {
width: 140px;
padding: 12px; padding: 12px;
background-color: #f8f9fa; background-color: #f8f9fa;
border-bottom: 1px solid #e9ecef; border-right: 1px solid #e9ecef;
display: flex;
flex-direction: column;
justify-content: flex-start;
} }
.robot-header { .robot-header {
display: flex; display: flex;
justify-content: space-between; flex-direction: column;
align-items: center; gap: 6px;
margin-bottom: 8px; margin-bottom: 12px;
} }
.robot-name { .robot-name {
font-size: 16px; font-size: 14px;
font-weight: 600; font-weight: 600;
color: #000; color: #000;
line-height: 1.2;
} }
.robot-status { .robot-status {
font-size: 12px; font-size: 10px;
font-weight: 500; font-weight: 500;
padding: 2px 8px; padding: 2px 6px;
border-radius: 12px; border-radius: 8px;
background-color: rgba(0, 0, 0, 0.05); background-color: rgba(0, 0, 0, 0.05);
text-align: center;
white-space: nowrap;
} }
.robot-details { .robot-details {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
gap: 6px; gap: 8px;
} }
.detail-item { .detail-item {
display: flex; display: flex;
align-items: center; flex-direction: column;
gap: 8px; gap: 4px;
font-size: 12px; font-size: 11px;
} }
.detail-label { .detail-label {
color: #666; color: #666;
min-width: 60px; font-size: 10px;
} }
.detail-value { .detail-value {
color: #000; color: #000;
flex: 1; font-size: 11px;
word-break: break-all;
} }
/* 电量条样式 */ /* 电量条样式 */
.battery-container { .battery-container {
display: flex; display: flex;
align-items: center; flex-direction: column;
gap: 6px; gap: 4px;
flex: 1;
} }
.battery-bar { .battery-bar {
flex: 1; width: 100%;
height: 6px; height: 4px;
background-color: #e9ecef; background-color: #e9ecef;
border-radius: 3px; border-radius: 2px;
overflow: hidden; overflow: hidden;
} }
.battery-fill { .battery-fill {
height: 100%; height: 100%;
transition: width 0.3s ease; transition: width 0.3s ease;
border-radius: 3px; border-radius: 2px;
} }
.battery-fill.battery-high { .battery-fill.battery-high {
@ -272,52 +289,82 @@ const handleRobotAction = async (action: RobotAction, actionName: string) => {
} }
.battery-text { .battery-text {
font-size: 11px; font-size: 10px;
color: #666; color: #666;
min-width: 30px; text-align: center;
text-align: right;
} }
/* 操作区域 */ /* 右侧：操作区域 */
.robot-actions { .robot-actions {
padding: 8px 0; flex: 1;
padding: 8px;
overflow-y: auto;
}
.actions-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 8px;
height: 100%;
} }
.action-group { .action-group {
margin-bottom: 8px; display: flex;
} flex-direction: column;
min-height: 0;
.action-group:last-child {
margin-bottom: 0;
} }
.action-group-title { .action-group-title {
font-size: 11px; font-size: 10px;
font-weight: 600; font-weight: 600;
color: #666; color: #666;
padding: 4px 12px; padding: 4px 8px;
text-transform: uppercase; text-transform: uppercase;
letter-spacing: 0.5px; letter-spacing: 0.5px;
background-color: #f5f5f5;
border-radius: 4px;
margin-bottom: 4px;
text-align: center;
} }
.action-item { .action-item {
display: flex; display: flex;
align-items: center; align-items: center;
padding: 8px 12px; padding: 6px 8px;
cursor: pointer; cursor: pointer;
transition: background-color 0.2s; transition: background-color 0.2s;
font-size: 13px; font-size: 11px;
color: #000; color: #000;
gap: 8px; gap: 6px;
border-radius: 4px;
margin-bottom: 2px;
} }
.action-item:hover { .action-item:hover {
background-color: #f5f5f5; background-color: #f0f0f0;
} }
.action-icon { .action-icon {
font-size: 14px; font-size: 12px;
width: 16px; width: 14px;
text-align: center; text-align: center;
flex-shrink: 0;
}
/* 响应式设计 */
@media (max-width: 400px) {
.menu-container {
flex-direction: column;
}
.robot-info-section {
width: 100%;
border-right: none;
border-bottom: 1px solid #e9ecef;
}
.actions-grid {
grid-template-columns: 1fr;
}
} }
</style> </style>