feat: 前端增加控制反馈

frontend/src/components/VideoPanel.vue

@@ -1,6 +1,7 @@
 <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'
 
@@ -164,6 +165,9 @@ watch([currentFps, canRequestFrames], () => {
       <div v-else class="video-placeholder">
         {{ placeholderText }}
       </div>
+      <div class="video-overlay">
+        <ControlFeedback compact />
+      </div>
     </div>
 
     <div class="stats">
@@ -250,6 +254,7 @@ h2 {
 }
 
 .video-shell {
+  position: relative;
   overflow: hidden;
   border-radius: 20px;
   border: 1px solid rgba(133, 147, 169, 0.28);
@@ -278,6 +283,32 @@ 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));
@@ -364,6 +395,11 @@ h2 {
 }
 
 @media (max-width: 720px) {
+  .video-overlay {
+    inset: auto 10px 10px 10px;
+    padding-top: 84px;
+  }
+
   .stats {
     grid-template-columns: 1fr;
   }