From c4344e4a1c969775b94175645e18207b4e5bab05 Mon Sep 17 00:00:00 2001
From: mofeng-git <mofeng654321@hotmail.com>
Date: Sun, 18 Oct 2026 18:04:21 +0800
Subject: [PATCH] =?UTF-8?q?feat(web):=20=E6=94=AF=E6=8C=81=E7=82=B9?=
 =?UTF-8?q?=E5=87=BB=E9=94=AE=E7=9B=98=E7=8A=B6=E6=80=81=E7=81=AF=E5=88=87?=
 =?UTF-8?q?=E6=8D=A2=E9=94=81=E5=AE=9A=E7=8A=B6=E6=80=81?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

为控制台普通和紧凑布局的 Caps、Num、Scroll 状态灯增加点击操作及中英文悬停提示，通过现有 HID 通道发送对应按键的按下和释放事件。

保留远端状态灯反馈，在 HID 未连接、按键已按住或发送过程中禁用操作，并在发送失败时显示提示。
---
 web/src/components/InfoBar.vue | 68 ++++++++++++++++++++++++----------
 web/src/i18n/en-US.ts          |  2 +
 web/src/i18n/zh-CN.ts          |  2 +
 web/src/views/ConsoleView.vue  | 30 ++++++++++++++-
 4 files changed, 80 insertions(+), 22 deletions(-)

diff --git a/web/src/components/InfoBar.vue b/web/src/components/InfoBar.vue
index bd13f59c..0ff56031 100644
--- a/web/src/components/InfoBar.vue
+++ b/web/src/components/InfoBar.vue
@@ -1,7 +1,7 @@
 <script setup lang="ts">
 import { computed } from 'vue'
 import { useI18n } from 'vue-i18n'
-import type { CanonicalKey } from '@/types/generated'
+import { CanonicalKey } from '@/types/generated'
 import { Badge } from '@/components/ui/badge'
 import { Kbd } from '@/components/ui/kbd'
 import { Separator } from '@/components/ui/separator'
@@ -12,6 +12,7 @@ const props = defineProps<{
   numLock?: boolean
   scrollLock?: boolean
   keyboardLedEnabled?: boolean
+  keyboardLockDisabled?: boolean
   mousePosition?: { x: number; y: number }
   debugMode?: boolean
   compact?: boolean
@@ -19,8 +20,18 @@ const props = defineProps<{
   minimal?: boolean
 }>()
 
+const emit = defineEmits<{
+  toggleLock: [key: CanonicalKey.CapsLock | CanonicalKey.NumLock | CanonicalKey.ScrollLock]
+}>()
+
 const { t } = useI18n()
 
+const lockButtons = computed(() => [
+  { key: CanonicalKey.CapsLock, label: t('infobar.caps'), active: props.capsLock },
+  { key: CanonicalKey.NumLock, label: t('infobar.num'), active: props.numLock },
+  { key: CanonicalKey.ScrollLock, label: t('infobar.scroll'), active: props.scrollLock },
+] as const)
+
 const keyNameMap: Record<string, string> = {
   MetaLeft: 'Win', MetaRight: 'Win',
   ControlLeft: 'Ctrl', ControlRight: 'Ctrl',
@@ -49,14 +60,24 @@ const keysDisplay = computed(() => {
     <div :class="compact ? '' : 'sm:hidden'">
       <div class="flex items-center justify-between gap-3 text-xs px-2 h-7">
         <div v-if="keyboardLedEnabled && !minimal" class="flex items-center gap-1">
-          <Badge variant="outline" class="h-5 gap-1 px-1 text-xs text-foreground">
-            <span class="size-1.5 rounded-full" :class="capsLock ? 'bg-status-active' : 'bg-muted-foreground/30'" />Caps
-          </Badge>
-          <Badge variant="outline" class="h-5 gap-1 px-1 text-xs text-foreground">
-            <span class="size-1.5 rounded-full" :class="numLock ? 'bg-status-active' : 'bg-muted-foreground/30'" />Num
-          </Badge>
-          <Badge variant="outline" class="h-5 gap-1 px-1 text-xs text-foreground">
-            <span class="size-1.5 rounded-full" :class="scrollLock ? 'bg-status-active' : 'bg-muted-foreground/30'" />Scroll
+          <Badge
+            v-for="lock in lockButtons"
+            :key="lock.key"
+            as="button"
+            type="button"
+            variant="outline"
+            class="h-5 gap-1 px-1 text-xs text-foreground cursor-pointer hover:bg-accent disabled:cursor-not-allowed disabled:opacity-50"
+            :disabled="keyboardLockDisabled || pressedKeys?.includes(lock.key)"
+            :aria-pressed="!!lock.active"
+            :aria-label="t('infobar.toggleLock', { key: lock.key })"
+            :title="t('infobar.toggleLock', { key: lock.key })"
+            @mousedown.prevent
+            @keydown.stop
+            @keyup.stop
+            @click="emit('toggleLock', lock.key)"
+          >
+            <span class="size-1.5 rounded-full" :class="lock.active ? 'bg-status-active' : 'bg-muted-foreground/30'" />
+            {{ lock.label }}
           </Badge>
         </div>
         <div v-else-if="!minimal" class="text-xs text-muted-foreground">
@@ -89,17 +110,24 @@ const keysDisplay = computed(() => {
         <div class="flex items-center shrink-0">
           <Separator orientation="vertical" class="h-5" />
           <template v-if="keyboardLedEnabled">
-            <Badge variant="outline" class="mx-1 gap-1.5 text-foreground">
-              <span class="size-1.5 rounded-full" :class="capsLock ? 'bg-status-active' : 'bg-muted-foreground/30'" />
-              {{ t('infobar.caps') }}
-            </Badge>
-            <Badge variant="outline" class="mx-1 gap-1.5 text-foreground">
-              <span class="size-1.5 rounded-full" :class="numLock ? 'bg-status-active' : 'bg-muted-foreground/30'" />
-              {{ t('infobar.num') }}
-            </Badge>
-            <Badge variant="outline" class="mx-1 gap-1.5 text-foreground">
-              <span class="size-1.5 rounded-full" :class="scrollLock ? 'bg-status-active' : 'bg-muted-foreground/30'" />
-              {{ t('infobar.scroll') }}
+            <Badge
+              v-for="lock in lockButtons"
+              :key="lock.key"
+              as="button"
+              type="button"
+              variant="outline"
+              class="mx-1 gap-1.5 text-foreground cursor-pointer hover:bg-accent disabled:cursor-not-allowed disabled:opacity-50"
+              :disabled="keyboardLockDisabled || pressedKeys?.includes(lock.key)"
+              :aria-pressed="!!lock.active"
+              :aria-label="t('infobar.toggleLock', { key: lock.key })"
+              :title="t('infobar.toggleLock', { key: lock.key })"
+              @mousedown.prevent
+              @keydown.stop
+              @keyup.stop
+              @click="emit('toggleLock', lock.key)"
+            >
+              <span class="size-1.5 rounded-full" :class="lock.active ? 'bg-status-active' : 'bg-muted-foreground/30'" />
+              {{ lock.label }}
             </Badge>
           </template>
           <div v-else class="px-3 py-1 text-muted-foreground/60">
diff --git a/web/src/i18n/en-US.ts b/web/src/i18n/en-US.ts
index 7c519a1f..6594d71c 100644
--- a/web/src/i18n/en-US.ts
+++ b/web/src/i18n/en-US.ts
@@ -293,6 +293,8 @@ export default {
     num: 'Num',
     scroll: 'Scroll',
     keyboardLedUnavailable: 'Keyboard LED status is disabled or unsupported',
+    toggleLock: 'Toggle {key}',
+    toggleLockFailed: 'Failed to toggle keyboard lock',
   },
   paste: {
     title: 'Paste Text',
diff --git a/web/src/i18n/zh-CN.ts b/web/src/i18n/zh-CN.ts
index 62c1b302..0a3fc2f7 100644
--- a/web/src/i18n/zh-CN.ts
+++ b/web/src/i18n/zh-CN.ts
@@ -293,6 +293,8 @@ export default {
     num: 'Num',
     scroll: 'Scroll',
     keyboardLedUnavailable: '键盘状态灯功能未开启或不支持',
+    toggleLock: '切换 {key}',
+    toggleLockFailed: '切换键盘锁定状态失败',
   },
   paste: {
     title: '粘贴文本',
diff --git a/web/src/views/ConsoleView.vue b/web/src/views/ConsoleView.vue
index 646b86c7..09b6417f 100644
--- a/web/src/views/ConsoleView.vue
+++ b/web/src/views/ConsoleView.vue
@@ -179,6 +179,7 @@ const keyboardLed = computed(() => ({
   scrollLock: systemStore.hid?.ledState.scrollLock ?? false,
 }))
 const keyboardLedEnabled = computed(() => systemStore.hid?.keyboardLedsEnabled ?? false)
+const keyboardLockPending = ref(false)
 const activeModifierMask = ref(0)
 const mousePosition = ref({ x: 0, y: 0 })
 const lastMousePosition = ref({ x: 0, y: 0 })
@@ -2210,7 +2211,7 @@ async function handleWol(mac: string) {
 function handleHidError(_error: any, _operation: string) {
 }
 
-function sendKeyboardEvent(type: 'down' | 'up', key: CanonicalKey, modifier?: number) {
+async function transmitKeyboardEvent(type: 'down' | 'up', key: CanonicalKey, modifier?: number) {
   if (videoMode.value !== 'mjpeg' && webrtc.dataChannelReady.value) {
     const event: HidKeyboardEvent = {
       type: type === 'down' ? 'keydown' : 'keyup',
@@ -2220,7 +2221,30 @@ function sendKeyboardEvent(type: 'down' | 'up', key: CanonicalKey, modifier?: nu
     const sent = webrtc.sendKeyboard(event)
     if (sent) return
   }
-  hidApi.keyboard(type, key, modifier).catch(err => handleHidError(err, `keyboard ${type}`))
+  await hidApi.keyboard(type, key, modifier)
+}
+
+function sendKeyboardEvent(type: 'down' | 'up', key: CanonicalKey, modifier?: number) {
+  transmitKeyboardEvent(type, key, modifier).catch(err => handleHidError(err, `keyboard ${type}`))
+}
+
+async function toggleKeyboardLock(key: CanonicalKey.CapsLock | CanonicalKey.NumLock | CanonicalKey.ScrollLock) {
+  if (!keyboardLedEnabled.value || hidStatus.value !== 'connected'
+    || keyboardLockPending.value || pressedKeys.value.includes(key)) return
+
+  keyboardLockPending.value = true
+  try {
+    try {
+      await transmitKeyboardEvent('down', key, activeModifierMask.value)
+      await new Promise(resolve => setTimeout(resolve, 100))
+    } finally {
+      await transmitKeyboardEvent('up', key, activeModifierMask.value)
+    }
+  } catch {
+    toast.error(t('infobar.toggleLockFailed'))
+  } finally {
+    keyboardLockPending.value = false
+  }
 }
 
 function sendMouseEvent(data: { type: 'move' | 'move_abs' | 'down' | 'up' | 'scroll'; x?: number; y?: number; button?: 'left' | 'right' | 'middle'; scroll?: number }) {
@@ -3650,8 +3674,10 @@ onUnmounted(() => {
       :num-lock="keyboardLed.numLock"
       :scroll-lock="keyboardLed.scrollLock"
       :keyboard-led-enabled="keyboardLedEnabled"
+      :keyboard-lock-disabled="hidStatus !== 'connected' || keyboardLockPending"
       :mouse-position="mousePosition"
       :debug-mode="false"
+      @toggle-lock="toggleKeyboardLock"
     />
     <StatsSheet
       v-if="showConnectionStats"