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

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

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