fix(ControlBar): 修复键盘事件监听范围,改为全局监听window

将键盘事件从输入框的局部监听改为window全局监听,确保页面任意位置按下键盘即可向被控端发送指令。同时保留输入框聚焦逻辑,以兼容移动端软键盘输入场景。
This commit is contained in:
2026-08-03 11:34:50 +08:00
parent d616ed743c
commit 0d49c60c12

View File

@@ -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>