feat: 增加分辨率修改

WebRTCControllerWeb/src/components/ControlBar.vue

@@ -1,5 +1,6 @@
 <script setup>
-import { store, sendKey } from '../store/controllerStore';
+import { ref, watch } from 'vue';
+import { store, sendKey, sendResolutionChange } from '../store/controllerStore';
 
 // Android KeyEvent 键值（与被控端 SystemInputUtils 注入一致）
 const keys = [
@@ -12,14 +13,60 @@ const keys = [
   { label: '电源', code: 26 },    // KEYCODE_POWER
 ];
 
+// 分辨率预设：width 为长边像素；0 表示被控端原生分辨率；
+// height 传 0（由被控端按屏幕宽高比自动计算），fps 传 0（沿用当前帧率）。
+const resolutionPresets = [
+  { label: '原始画质', width: 0, height: 0, fps: 0 },
+  { label: '1080P', width: 1920, height: 0, fps: 0 },
+  { label: '720P', width: 1280, height: 0, fps: 0 },
+  { label: '480P', width: 854, height: 0, fps: 0 },
+];
+// 注意：<option :value="p.width"> 的 value 是数字，Vue 的 v-model 会按数字写入，
+// 因此这里也必须用数字（不能用字符串 '0'），否则默认选中项与比较逻辑会类型不一致。
+const selectedResolution = ref(0);
+
 function press(code) {
   if (!store.dataChannelOpen) return;
   sendKey(code);
 }
+
+function onResolutionChange() {
+  if (!store.dataChannelOpen) return;
+  // 统一按数值匹配：v-model 写入的是数字，不能用 String() 再与数字比较。
+  const preset = resolutionPresets.find((p) => p.width === Number(selectedResolution.value));
+  if (preset) {
+    sendResolutionChange(preset.width, preset.height, preset.fps);
+  }
+}
+
+// 被控端上报当前实际采集分辨率时，把下拉框同步到对应预设（避免 UI 与实际不一致）。
+watch(() => store.currentResolution, (res) => {
+  if (!res) return;
+  const longEdge = Math.max(res.width, res.height);
+  const preset = resolutionPresets.find((p) => p.width === longEdge);
+  if (preset) selectedResolution.value = preset.width;
+});
 </script>
 
 <template>
   <div class="control-bar">
+    <div class="resolution-row">
+      <label class="resolution-label">分辨率:</label>
+      <select
+        class="resolution-select"
+        v-model="selectedResolution"
+        :disabled="!store.dataChannelOpen"
+        @change="onResolutionChange"
+      >
+        <option v-for="p in resolutionPresets" :key="p.label" :value="p.width">
+          {{ p.label }}
+        </option>
+      </select>
+      <span class="resolution-current" v-if="store.currentResolution">
+        当前: {{ store.currentResolution.width }}×{{ store.currentResolution.height }}
+      </span>
+    </div>
+
     <button
       v-for="k in keys"
       :key="k.code"