From a2934822a3e6af5ce5bec02839f41efc8428a8e2 Mon Sep 17 00:00:00 2001
From: SkyLi <SkyLiA7Mr@gmail.com>
Date: Thu, 4 Jun 2026 20:16:06 +0800
Subject: [PATCH] =?UTF-8?q?Debug=20=E9=A1=B5=E9=9D=A2=E6=96=B0=E5=A2=9E=20?=
 =?UTF-8?q?MJPEG=20=E8=A7=86=E9=A2=91=E6=B5=81=E5=B1=95=E7=A4=BA=EF=BC=8C?=
 =?UTF-8?q?=E4=BF=AE=E5=A4=8D=E5=85=A8=E9=A1=B5=E9=9D=A2=E7=94=BB=E9=9D=A2?=
 =?UTF-8?q?=E7=BA=B5=E5=90=91=E8=A3=81=E5=88=87=E9=97=AE=E9=A2=98?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- Debug 页面底部增加 /vision/debug_image 的 MJPEG 视频流
- 三个页面的流画面统一使用 max-height: 70vh + object-fit: contain，避免纵向显示不全
---
 src/config.js            |  1 +
 src/views/AutoMode.vue   |  2 +-
 src/views/DebugMode.vue  | 24 +++++++++++++++++++++++-
 src/views/ManualMode.vue |  2 +-
 4 files changed, 26 insertions(+), 3 deletions(-)

diff --git a/src/config.js b/src/config.js
index 93a0e05..bf5bc2d 100644
--- a/src/config.js
+++ b/src/config.js
@@ -5,6 +5,7 @@ export const ROSBRIDGE_URL = 'ws://192.168.0.11:9090'
 
 export const MJPEG_AUTO_URL = 'http://192.168.0.11/stream?topic=/vision/result_image&mode=auto'
 export const MJPEG_MANUAL_URL = 'http://192.168.0.11/stream?topic=/vision/result_image&mode=manual'
+export const MJPEG_DEBUG_URL = 'http://192.168.0.11/stream?topic=/vision/debug_image&mode=debug'
 
 // ROS 话题
 export const CMD_WHEEL_TOPIC = '/cmd_wheel'
diff --git a/src/views/AutoMode.vue b/src/views/AutoMode.vue
index 99055e0..506e94a 100644
--- a/src/views/AutoMode.vue
+++ b/src/views/AutoMode.vue
@@ -56,5 +56,5 @@ async function switchToAuto() {
   display: flex;
   justify-content: center;
 }
-.stream { max-width: 100%; height: auto; }
+.stream { max-width: 100%; max-height: 70vh; object-fit: contain; }
 </style>
diff --git a/src/views/DebugMode.vue b/src/views/DebugMode.vue
index 60b09cc..c69c31c 100644
--- a/src/views/DebugMode.vue
+++ b/src/views/DebugMode.vue
@@ -51,14 +51,27 @@
         {{ saving ? '保存中...' : '保存配置' }}
       </button>
     </div>
+
+    <div class="stream-container">
+      <img ref="streamImg" :src="streamUrl" alt="MJPEG Stream" class="stream" />
+    </div>
   </div>
 </template>
 
 <script setup>
 import { reactive, ref, onMounted } from 'vue'
-import { HTTP_API_BASE, ROSBRIDGE_URL } from '../config.js'
+import { onBeforeRouteLeave } from 'vue-router'
+import { HTTP_API_BASE, ROSBRIDGE_URL, MJPEG_DEBUG_URL } from '../config.js'
 import { useRosbridge } from '../composables/useRosbridge.js'
 
+const streamUrl = MJPEG_DEBUG_URL
+const streamImg = ref(null)
+
+onBeforeRouteLeave((_to, _from, next) => {
+  if (streamImg.value) streamImg.value.src = ''
+  next()
+})
+
 const { connected, connect } = useRosbridge()
 connect(ROSBRIDGE_URL)
 
@@ -165,6 +178,15 @@ async function toggleLaser() {
 .debug-mode { display: flex; flex-direction: column; gap: 20px; }
 .header h2 { font-size: 18px; font-weight: 500; }
 
+.stream-container {
+  background: #000;
+  border-radius: 8px;
+  overflow: hidden;
+  display: flex;
+  justify-content: center;
+}
+.stream { max-width: 100%; max-height: 70vh; object-fit: contain; }
+
 .mode-buttons { display: flex; gap: 10px; }
 .btn-mode {
   padding: 8px 20px;
diff --git a/src/views/ManualMode.vue b/src/views/ManualMode.vue
index 49c5260..0fde9e1 100644
--- a/src/views/ManualMode.vue
+++ b/src/views/ManualMode.vue
@@ -164,7 +164,7 @@ onUnmounted(() => {
   display: flex;
   justify-content: center;
 }
-.stream { max-width: 100%; height: auto; }
+.stream { max-width: 100%; max-height: 70vh; object-fit: contain; }
 
 .hint {
   text-align: center; font-size: 13px; color: #666;