From dedb4442005b0bdf0e0910c8fd25c08826dffba8 Mon Sep 17 00:00:00 2001
From: xudan <staysky25@outlook.com>
Date: Wed, 10 Sep 2025 10:41:10 +0800
Subject: [PATCH] =?UTF-8?q?refactor:=20=E9=87=8D=E6=9E=84=E6=9C=BA?=
 =?UTF-8?q?=E5=99=A8=E4=BA=BA=E8=8F=9C=E5=8D=95=E7=BB=84=E4=BB=B6=EF=BC=8C?=
 =?UTF-8?q?=E4=BC=98=E5=8C=96=E5=B8=83=E5=B1=80=E5=92=8C=E6=A0=B7=E5=BC=8F?=
 =?UTF-8?q?=EF=BC=8C=E5=A2=9E=E5=BC=BA=E5=93=8D=E5=BA=94=E5=BC=8F=E8=AE=BE?=
 =?UTF-8?q?=E8=AE=A1=EF=BC=8C=E6=8F=90=E5=8D=87=E7=94=A8=E6=88=B7=E4=BD=93?=
 =?UTF-8?q?=E9=AA=8C?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/context-menu/robot-menu.vue | 319 ++++++++++++---------
 1 file changed, 183 insertions(+), 136 deletions(-)

diff --git a/src/components/context-menu/robot-menu.vue b/src/components/context-menu/robot-menu.vue
index 062d281..cb10702 100644
--- a/src/components/context-menu/robot-menu.vue
+++ b/src/components/context-menu/robot-menu.vue
@@ -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>