fix: 前端视频和控制界面分离

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;