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