From 0d49c60c12cd83ca8b040133504b6540ee878cfa Mon Sep 17 00:00:00 2001
From: tongtongstudio <tongtongstudio@outlook.com>
Date: Mon, 3 Aug 2026 11:34:50 +0800
Subject: [PATCH] =?UTF-8?q?fix(ControlBar):=20=E4=BF=AE=E5=A4=8D=E9=94=AE?=
 =?UTF-8?q?=E7=9B=98=E4=BA=8B=E4=BB=B6=E7=9B=91=E5=90=AC=E8=8C=83=E5=9B=B4?=
 =?UTF-8?q?=EF=BC=8C=E6=94=B9=E4=B8=BA=E5=85=A8=E5=B1=80=E7=9B=91=E5=90=AC?=
 =?UTF-8?q?window?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

将键盘事件从输入框的局部监听改为window全局监听，确保页面任意位置按下键盘即可向被控端发送指令。同时保留输入框聚焦逻辑，以兼容移动端软键盘输入场景。
---
 .../src/components/ControlBar.vue             | 31 ++++++++++++-------
 1 file changed, 19 insertions(+), 12 deletions(-)

diff --git a/WebRTCControllerWeb/src/components/ControlBar.vue b/WebRTCControllerWeb/src/components/ControlBar.vue
index d9c814e..c63d42a 100644
--- a/WebRTCControllerWeb/src/components/ControlBar.vue
+++ b/WebRTCControllerWeb/src/components/ControlBar.vue
@@ -1,5 +1,5 @@
 <script setup>
-import { ref, watch } from 'vue';
+import { ref, watch, onMounted, onUnmounted } from 'vue';
 import { store, sendKeyDown, sendKeyUp, sendResolutionChange, toggleRecording } from '../store/controllerStore';
 
 // Android KeyEvent 键值（与被控端 SystemInputUtils 注入一致）
@@ -70,15 +70,15 @@ function lookupKeyCode(e) {
   return null;
 }
 
-function onKeyInputDown(e) {
+// 固定按键：按下/抬起分离（如电源键需要真实按下-抬起配对）
+function onKeyCaptureDown(e) {
   if (!store.dataChannelOpen) return;
   const m = lookupKeyCode(e);
   if (!m) return;
   e.preventDefault();
   sendKeyDown(m.code);
 }
-
-function onKeyInputUp(e) {
+function onKeyCaptureUp(e) {
   if (!store.dataChannelOpen) return;
   const m = lookupKeyCode(e);
   if (!m) return;
@@ -89,10 +89,17 @@ function onKeyInputUp(e) {
 function focusKeyInput() {
   keyInputRef.value && keyInputRef.value.focus();
 }
-// 点击区域任意位置自动聚焦输入框，方便直接用键盘打字
-function onCaptureClick() {
-  focusKeyInput();
-}
+
+// 监听整个 window 的键盘事件，保证页面任意位置（不依赖聚焦到某个输入框）
+// 按下键盘即可向被控端发送按键指令。移动端软键盘不触发 keydown，故保留输入框聚焦。
+onMounted(() => {
+  window.addEventListener('keydown', onKeyCaptureDown);
+  window.addEventListener('keyup', onKeyCaptureUp);
+});
+onUnmounted(() => {
+  window.removeEventListener('keydown', onKeyCaptureDown);
+  window.removeEventListener('keyup', onKeyCaptureUp);
+});
 
 function onResolutionChange() {
   if (!store.dataChannelOpen) return;
@@ -191,16 +198,16 @@ watch(() => store.currentResolution, (res) => {
       {{ k.label }}
     </button>
 
-    <div class="keyboard-capture" @click="onCaptureClick">
+    <div class="keyboard-capture">
       <label class="kb-label">键盘输入:</label>
       <input
         ref="keyInputRef"
         class="kb-input"
         type="text"
-        placeholder="点击此处后可直接用键盘打字"
+        readonly
+        placeholder="已全局监听，直接在页面上打字即可（手机请点此聚焦）"
         :disabled="!store.dataChannelOpen"
-        @keydown="onKeyInputDown"
-        @keyup="onKeyInputUp"
+        @click="focusKeyInput"
         @blur="keyLog = ''"
       />
       <span class="kb-hint">支持字母/数字/符号/方向键/修饰键组合</span>