feat(web): 添加远程视频录制功能

WebRTCControllerWeb/src/components/ControlBar.vue

@@ -1,6 +1,6 @@
 <script setup>
 import { ref, watch } from 'vue';
-import { store, sendKey, sendResolutionChange } from '../store/controllerStore';
+import { store, sendKey, sendResolutionChange, toggleRecording } from '../store/controllerStore';
 
 // Android KeyEvent 键值（与被控端 SystemInputUtils 注入一致）
 const keys = [
@@ -65,6 +65,18 @@ watch(() => store.currentResolution, (res) => {
       <span class="resolution-current" v-if="store.currentResolution">
         当前: {{ store.currentResolution.width }}×{{ store.currentResolution.height }}
       </span>
+
+      <span class="record-sep"></span>
+
+      <button
+        class="record-btn"
+        :class="{ recording: store.recording }"
+        :disabled="!store.rtcConnected"
+        @click="toggleRecording"
+      >
+        {{ store.recording ? '停止录制' : '录制' }}
+      </button>
+      <span class="record-status" v-if="store.recordStatus">{{ store.recordStatus }}</span>
     </div>
 
     <button
@@ -78,3 +90,41 @@ watch(() => store.currentResolution, (res) => {
     </button>
   </div>
 </template>
+
+<style scoped>
+.record-sep {
+  display: inline-block;
+  width: 1px;
+  height: 22px;
+  margin: 0 10px;
+  background: #3a3f4b;
+  vertical-align: middle;
+}
+
+.record-btn {
+  padding: 6px 14px;
+  border: 1px solid #3a3f4b;
+  border-radius: 6px;
+  background: #2b6cff;
+  color: #fff;
+  font-size: 14px;
+  cursor: pointer;
+}
+
+.record-btn:disabled {
+  background: #3a3f4b;
+  color: #888;
+  cursor: not-allowed;
+}
+
+.record-btn.recording {
+  background: #e5484d;
+}
+
+.record-status {
+  margin-left: 8px;
+  font-size: 13px;
+  color: #ffb020;
+  white-space: nowrap;
+}
+</style>