From 18033f3b67a25818b094988c6e73da8cf28763ad Mon Sep 17 00:00:00 2001
From: Mock <mochangkang2026@email.szu.edu.cn>
Date: Thu, 9 Apr 2026 15:59:53 +0800
Subject: [PATCH] =?UTF-8?q?fix:=20=E5=89=8D=E7=AB=AF=E8=A7=86=E9=A2=91?=
 =?UTF-8?q?=E5=92=8C=E6=8E=A7=E5=88=B6=E7=95=8C=E9=9D=A2=E5=88=86=E7=A6=BB?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 frontend/src/components/VideoPanel.vue | 36 --------------------------
 frontend/src/views/DashboardView.vue   | 20 +++++++++++++-
 2 files changed, 19 insertions(+), 37 deletions(-)

diff --git a/frontend/src/components/VideoPanel.vue b/frontend/src/components/VideoPanel.vue
index 3113805..bbd5365 100644
--- a/frontend/src/components/VideoPanel.vue
+++ b/frontend/src/components/VideoPanel.vue
@@ -1,7 +1,5 @@
 <script setup lang="ts">
 import { computed, onMounted, onUnmounted, ref, watch } from 'vue'
-
-import ControlFeedback from '@/components/ControlFeedback.vue'
 import { buildVideoFrameUrl, fetchVideoStatus } from '@/lib/api'
 import type { VideoStatus } from '@/types'
 
@@ -165,9 +163,6 @@ watch([currentFps, canRequestFrames], () => {
       <div v-else class="video-placeholder">
         {{ placeholderText }}
       </div>
-      <div class="video-overlay">
-        <ControlFeedback compact />
-      </div>
     </div>
 
     <div class="stats">
@@ -283,32 +278,6 @@ h2 {
     #02050d;
 }
 
-.video-overlay {
-  position: absolute;
-  inset: auto 14px 14px 14px;
-  pointer-events: none;
-  padding-top: 120px;
-}
-
-.video-overlay :deep(.feedback-shell) {
-  pointer-events: auto;
-  padding: 14px;
-  border-radius: 22px;
-  background: linear-gradient(180deg, rgba(4, 8, 15, 0.08), rgba(4, 8, 15, 0.72));
-  border: 1px solid rgba(255, 255, 255, 0.08);
-  box-shadow: 0 18px 36px rgba(0, 0, 0, 0.24);
-}
-
-.video-overlay :deep(.command-card),
-.video-overlay :deep(.feedback-card) {
-  background: rgba(6, 12, 22, 0.74);
-  border-color: rgba(255, 255, 255, 0.08);
-}
-
-.video-overlay :deep(.summary) {
-  display: none;
-}
-
 .stats {
   display: grid;
   grid-template-columns: repeat(2, minmax(0, 1fr));
@@ -395,11 +364,6 @@ h2 {
 }
 
 @media (max-width: 720px) {
-  .video-overlay {
-    inset: auto 10px 10px 10px;
-    padding-top: 84px;
-  }
-
   .stats {
     grid-template-columns: 1fr;
   }
diff --git a/frontend/src/views/DashboardView.vue b/frontend/src/views/DashboardView.vue
index b446815..0cecb52 100644
--- a/frontend/src/views/DashboardView.vue
+++ b/frontend/src/views/DashboardView.vue
@@ -1,4 +1,5 @@
 <script setup lang="ts">
+import ControlPanel from '@/components/ControlPanel.vue'
 import GpsMapPanel from '@/components/GpsMapPanel.vue'
 import NetworkPanel from '@/components/NetworkPanel.vue'
 import VideoPanel from '@/components/VideoPanel.vue'
@@ -25,7 +26,11 @@ const { gps, network, video, errorMessage, headerStatus } = useMonitoringData()
     </section>
 
     <main class="layout">
-      <VideoPanel :video="video" />
+      <section class="primary-grid">
+        <VideoPanel :video="video" />
+        <ControlPanel />
+      </section>
+
       <GpsMapPanel :gps="gps" />
       <NetworkPanel :network="network" />
     </main>
@@ -85,6 +90,19 @@ h1 {
   gap: 20px;
 }
 
+.primary-grid {
+  display: grid;
+  grid-template-columns: minmax(0, 1.35fr) minmax(360px, 0.95fr);
+  gap: 20px;
+  align-items: start;
+}
+
+@media (max-width: 1280px) {
+  .primary-grid {
+    grid-template-columns: 1fr;
+  }
+}
+
 @media (max-width: 960px) {
   .hero {
     grid-template-columns: 1fr;