last modify frontend 11-6

src/web_control/frontend/src/components/ControlPanel.vue

@@ -1,56 +1,76 @@
 <template>
   <v-app>  <!-- Vuetify 根组件 -->
-    <v-container fluid class="modern-container">  <!-- 自定义类 for 渐变背景 -->
-      <v-card class="elevation-5 pa-4" color="primary" dark>  <!-- 卡片式标题，带阴影 -->
-        <v-card-title class="justify-center">
-          <v-icon large left>mdi-robot</v-icon>  <!-- 添加图标 -->
-          智能车侦查系统控制前端
-        </v-card-title>
-      </v-card>
-      <v-tabs v-model="tab" background-color="transparent" grow>  <!-- 现代 Tabs -->
-        <v-tab>目标识别</v-tab>
+    <v-container fluid class="modern-container">  <!-- 增强渐变背景 -->
+
+      <!-- 标题卡片 with subtle animation -->
+      <transition name="fade">
+        <v-card class="elevation-4 pa-6 rounded-lg" color="primary" dark>
+          <v-card-title class="justify-center text-h4 font-weight-bold">
+            <v-icon x-large left>mdi-robot-industrial</v-icon>
+            智能车侦查系统控制前端
+          </v-card-title>
+        </v-card>
+      </transition>
+
+      <v-tabs v-model="tab" background-color="transparent" grow slider-color="accent" class="mt-6">
+        <v-tab><v-icon left>mdi-target</v-icon>目标识别</v-tab>
+        <v-tab><v-icon left>mdi-map</v-icon>建图</v-tab>
+        <v-tab><v-icon left>mdi-navigation</v-icon>导航</v-tab>
       </v-tabs>
-      <v-tabs-items v-model="tab">
-        <v-tab-item>
-          <v-card class="mt-4 pa-4" outlined>  <!-- 卡片布局 -->
-            <v-btn color="primary" @click="startYolo" :loading="loading" class="mb-2" block>  <!-- 带加载动画 -->
-              <v-icon left>mdi-play</v-icon>启动识别
+
+      <v-tabs-items v-model="tab" class="mt-4">
+        <v-tab-item transition="fade-transition">
+          <v-card class="mt-4 pa-6 elevation-3 rounded-lg" outlined>
+            <v-btn color="primary" @click="startYolo" :loading="loading" class="mb-4" block large>
+              <v-icon left>mdi-play-circle</v-icon>启动识别
             </v-btn>
-            <v-btn color="error" @click="stopYolo" class="mb-2" block>
-              <v-icon left>mdi-stop</v-icon>停止识别
+            <v-btn color="error" @click="stopYolo" class="mb-4" block large>
+              <v-icon left>mdi-stop-circle</v-icon>停止识别
             </v-btn>
-            <v-alert type="info" outlined class="mt-3" v-if="yoloStatus">{{ yoloStatus }}</v-alert>  <!-- 状态反馈 -->
+            <v-alert type="info" outlined class="mt-3" v-if="yoloStatus">{{ yoloStatus }}</v-alert>
+          </v-card>
+        </v-tab-item>
+        <v-tab-item transition="fade-transition">
+          <v-card class="mt-4 pa-6 elevation-3 rounded-lg" outlined>
+            <v-card-title class="text-h5">建图功能</v-card-title>
+            <v-btn color="primary" disabled block large><v-icon left>mdi-map-marker-path</v-icon>启动建图</v-btn>
+            <v-alert type="info" outlined class="mt-3">Running</v-alert>
+          </v-card>
+        </v-tab-item>
+        <v-tab-item transition="fade-transition">
+          <v-card class="mt-4 pa-6 elevation-3 rounded-lg" outlined>
+            <v-card-title class="text-h5">导航功能</v-card-title>
+            <v-btn color="primary" disabled block large><v-icon left>mdi-navigation-variant</v-icon>启动导航</v-btn>
+            <v-alert type="info" outlined class="mt-3">后端功能待实现</v-alert>
           </v-card>
         </v-tab-item>
       </v-tabs-items>
-      <v-divider class="my-4"></v-divider>
-      <v-card-title class="justify-center">状态表盘</v-card-title>
-      <v-row class="mt-4">
-        <v-col cols="12" md="3">
-          <v-card-title>速度</v-card-title>
-          <v-chart class="chart" :option="gaugeOptions.speed" autoresize />
-        </v-col>
-        <v-col cols="12" md="3">
-          <v-card-title>电池电量</v-card-title>
-          <v-chart class="chart" :option="gaugeOptions.battery" autoresize />
-        </v-col>
-        <v-col cols="12" md="3">
-          <v-card-title>前方距离</v-card-title>
-          <v-chart class="chart" :option="gaugeOptions.distance" autoresize />
-        </v-col>
-        <v-col cols="12" md="3">
-          <v-card-title>目标数量</v-card-title>
-          <v-chart class="chart" :option="gaugeOptions.targets" autoresize />
+
+      <v-divider class="my-6"></v-divider>
+
+      <v-card-title class="justify-center text-h5 font-weight-bold"><v-icon left>mdi-gauge</v-icon>状态表盘</v-card-title>
+
+      <v-row class="mt-4" justify="center">
+        <v-col cols="12" md="3" v-for="(key, index) in Object.keys(gaugeOptions)" :key="index">
+          <v-card class="elevation-3 pa-4 rounded-lg">  <!-- 移除深色 -->
+            <v-card-title class="justify-center">{{ gaugeTitles[key] }}</v-card-title>
+            <v-chart class="chart" :option="gaugeOptions[key]" autoresize />
+          </v-card>
         </v-col>
       </v-row>
-      <v-divider class="my-4"></v-divider>
-      <v-card-title class="justify-center">参数规格表格</v-card-title>
+
+      <v-divider class="my-6"></v-divider>
+
+      <v-card-title class="justify-center text-h5 font-weight-bold"><v-icon left>mdi-table</v-icon>参数规格表格</v-card-title>
+
       <v-data-table
         :headers="tableHeaders"
         :items="tableItems"
-        class="elevation-1"
+        class="elevation-3 rounded-lg"
         hide-default-footer
+        dense
       ></v-data-table>
+
     </v-container>
   </v-app>
 </template>
@@ -134,6 +154,12 @@ export default {
         { name: '运行时间', value: 60, unit: '分钟' },
         { name: '目标数量', value: 0, unit: '个' },  // 保持动态
       ],
+      gaugeTitles: {
+        speed: '速度',
+        battery: '电池电量',
+        distance: '前方距离',
+        targets: '目标数量',
+      },
     };
   },
   methods: {
@@ -178,14 +204,36 @@ export default {
 
 <style scoped>
 .modern-container {
-  background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);  /* 渐变背景 */
-  min-height: 100vh;  /* 全屏高度 */
+  background: linear-gradient(135deg, #E3F2FD 0%, #BBDEFB 100%);  /* 浅蓝渐变，舒适简约 */
+  min-height: 100vh;
+  padding: 24px;
 }
+
+.fade-enter-active, .fade-leave-active {
+  transition: opacity 0.5s ease;
+}
+.fade-enter, .fade-leave-to {
+  opacity: 0;
+}
+
 .v-btn {
-  transition: all 0.3s ease;  /* hover 动画 */
+  transition: all 0.3s ease;
 }
+
 .v-btn:hover {
-  transform: scale(1.05);  /* 轻微放大 */
+  transform: scale(1.02);  /* 轻微放大，简约 */
+}
+
+.chart {
+  height: 250px;
+  width: 100%;
+}
+
+.v-card {
+  transition: transform 0.3s ease;
+}
+
+.v-card:hover {
+  transform: translateY(-3px);  /* 轻微提升 */
 }
-.chart { height: 300px; width: 100%; }
 </style>

src/web_control/frontend/src/main.js

@@ -8,17 +8,21 @@ Vue.use(Vuetify)  // 使用 Vuetify
 
 const vuetify = new Vuetify({
   theme: {
-    dark: false,  // 可切换为 true 启用暗黑模式
+    dark: false,
     themes: {
       light: {
-        primary: '#1976D2',  // 自定义主色（蓝色现代）
-        secondary: '#424242',
-        accent: '#82B1FF',
+        primary: '#2196F3',  // 柔和蓝
+        secondary: '#757575',  // 中性灰
+        accent: '#4CAF50',  // 柔和绿
+        error: '#FF5252',
+        info: '#2196F3',
+        success: '#4CAF50',
+        warning: '#FFC107',
       },
     },
   },
   icons: {
-    iconfont: 'mdi',  // 使用 Material Design 图标
+    iconfont: 'mdi',
   },
 })