GithubFollow/One-KVM
1
0
Fork 0
mirror of https://github.com/mofeng-git/One-KVM.git synced 2026-10-28 08:20:49 +08:00
Code Issues Actions Packages Projects Releases Wiki Activity

feat(web): 支持点击键盘状态灯切换锁定状态

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

保留远端状态灯反馈，在 HID 未连接、按键已按住或发送过程中禁用操作，并在发送失败时显示提示。
This commit is contained in:
mofeng-git
2026-10-18 18:04:21 +08:00
parent 92a08fb2bc
commit c4344e4a1c
4 changed files with 80 additions and 22 deletions
Download Patch File Download Diff File Expand all files Collapse all files

68
web/src/components/InfoBar.vue
View File

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

2
web/src/i18n/en-US.ts
View File

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

2
web/src/i18n/zh-CN.ts
View File

@@ -293,6 +293,8 @@ export default {
num: 'Num',
scroll: 'Scroll',
keyboardLedUnavailable: '键盘状态灯功能未开启或不支持',
toggleLock: '切换 {key}',
toggleLockFailed: '切换键盘锁定状态失败',
},
paste: {
title: '粘贴文本',

30
web/src/views/ConsoleView.vue
View File

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