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

fix(web): 恢复 HID OTG 功能设置两列布局

Browse Source
This commit is contained in:
mofeng-git
2026-10-29 22:00:29 +08:00
parent 751a9e08cc
commit 499a273df8
2 changed files with 39 additions and 41 deletions
Download Patch File Download Diff File Expand all files Collapse all files

10
web/src/styles/settings.css
View File

@@ -454,16 +454,6 @@
flex-direction: column; flex-direction: column;
gap: 14px; gap: 14px;
} }
.settings-page .hid-feature-card [data-slot='card-content'] .rounded-md.border:not([data-slot]) {
padding: 0;
border: 0;
border-radius: 0;
border-bottom: 1px solid var(--border);
padding-bottom: 20px;
}
.settings-page .hid-feature-card [data-slot='card-content'] .md\:grid-cols-2 {
grid-template-columns: 1fr;
}
.settings-page .hid-feature-card [data-slot='card-content'] > .space-y-4 > div:first-child { .settings-page .hid-feature-card [data-slot='card-content'] > .space-y-4 > div:first-child {
display: none; display: none;
} }

46
web/src/views/SettingsView.vue
View File

@@ -3045,23 +3045,29 @@ watch(isWindows, () => {
<h4 class="text-sm font-medium">{{ t('settings.otgHidProfile') }}</h4> <h4 class="text-sm font-medium">{{ t('settings.otgHidProfile') }}</h4>
</div> </div>
<div class="space-y-3"> <div class="space-y-3">
<div v-if="config.hid_backend === 'otg'" class="grid gap-3 md:grid-cols-2"> <div
<div class="space-y-3 rounded-md border border-border/60 p-3"> class="grid gap-3"
<div class="settings-toggle flex items-center justify-between gap-4"> :class="{ 'md:grid-cols-2': config.hid_backend === 'otg' }"
>
<div
v-if="config.hid_backend === 'otg'"
class="space-y-3 rounded-md border border-border/60 p-3"
>
<div class="flex items-center justify-between gap-4">
<div> <div>
<Label>{{ t('settings.otgFunctionKeyboard') }}</Label> <Label>{{ t('settings.otgFunctionKeyboard') }}</Label>
</div> </div>
<Switch v-model="config.hid_otg_functions.keyboard" /> <Switch v-model="config.hid_otg_functions.keyboard" />
</div> </div>
<Separator /> <Separator />
<div class="settings-toggle flex items-center justify-between gap-4"> <div class="flex items-center justify-between gap-4">
<div> <div>
<Label>{{ t('settings.otgFunctionConsumer') }}</Label> <Label>{{ t('settings.otgFunctionConsumer') }}</Label>
</div> </div>
<Switch v-model="config.hid_otg_functions.consumer" /> <Switch v-model="config.hid_otg_functions.consumer" />
</div> </div>
<Separator /> <Separator />
<div class="settings-toggle flex items-center justify-between gap-4"> <div class="flex items-center justify-between gap-4">
<div> <div>
<Label>{{ t('settings.otgKeyboardLeds') }}</Label> <Label>{{ t('settings.otgKeyboardLeds') }}</Label>
</div> </div>
@@ -3072,14 +3078,15 @@ watch(isWindows, () => {
</div> </div>
</div> </div>
<div class="space-y-3 rounded-md border border-border/60 p-3"> <div class="space-y-3 rounded-md border border-border/60 p-3">
<div class="settings-toggle flex items-center justify-between gap-4"> <template v-if="config.hid_backend === 'otg'">
<div class="flex items-center justify-between gap-4">
<div> <div>
<Label>{{ t('settings.otgFunctionMouseRelative') }}</Label> <Label>{{ t('settings.otgFunctionMouseRelative') }}</Label>
</div> </div>
<Switch v-model="config.hid_otg_functions.mouse_relative" /> <Switch v-model="config.hid_otg_functions.mouse_relative" />
</div> </div>
<Separator /> <Separator />
<div class="settings-toggle flex items-center justify-between gap-4"> <div class="flex items-center justify-between gap-4">
<div> <div>
<Label>{{ t('settings.otgFunctionMouseAbsolute') }}</Label> <Label>{{ t('settings.otgFunctionMouseAbsolute') }}</Label>
</div> </div>
@@ -3088,15 +3095,16 @@ watch(isWindows, () => {
<p v-if="hasMacosDragInterfaceConflict" class="text-xs text-warning"> <p v-if="hasMacosDragInterfaceConflict" class="text-xs text-warning">
{{ t('settings.mouseMacosDragRequiresBoth') }} {{ t('settings.mouseMacosDragRequiresBoth') }}
</p> </p>
<Separator />
</div> </template>
</div> <div class="flex items-center justify-between gap-4">
<div class="settings-toggle flex items-center justify-between gap-4 border-b pb-5">
<Label>{{ t('settings.uacMic') }}</Label> <Label>{{ t('settings.uacMic') }}</Label>
<Switch v-model="config.uac_enabled" /> <Switch v-model="config.uac_enabled" />
</div> </div>
</div>
</div>
<div class="space-y-3 rounded-md border border-border/60 p-3"> <div class="space-y-3 rounded-md border border-border/60 p-3">
<div class="settings-toggle flex items-center justify-between gap-4"> <div class="flex items-center justify-between gap-4">
<div> <div>
<Label>{{ t('settings.otgFunctionMsd') }}</Label> <Label>{{ t('settings.otgFunctionMsd') }}</Label>
</div> </div>
@@ -3104,7 +3112,7 @@ watch(isWindows, () => {
</div> </div>
<fieldset :disabled="!config.msd_enabled" class="space-y-4"> <fieldset :disabled="!config.msd_enabled" class="space-y-4">
<Separator /> <Separator />
<div class="settings-field space-y-2"> <div class="space-y-2">
<Label for="msd-dir">{{ t('settings.msdDir') }}</Label> <Label for="msd-dir">{{ t('settings.msdDir') }}</Label>
<Input <Input
id="msd-dir" id="msd-dir"
@@ -3112,7 +3120,7 @@ watch(isWindows, () => {
placeholder="/etc/one-kvm/msd" placeholder="/etc/one-kvm/msd"
/> />
</div> </div>
<div class="settings-field space-y-2"> <div class="space-y-2">
<Label for="msd-flash-inquiry-string">{{ <Label for="msd-flash-inquiry-string">{{
t('settings.msdFlashInquiryString') t('settings.msdFlashInquiryString')
}}</Label> }}</Label>
@@ -3123,7 +3131,7 @@ watch(isWindows, () => {
maxlength="28" maxlength="28"
/> />
</div> </div>
<div class="settings-field space-y-2"> <div class="space-y-2">
<Label for="msd-cdrom-inquiry-string">{{ <Label for="msd-cdrom-inquiry-string">{{
t('settings.msdCdromInquiryString') t('settings.msdCdromInquiryString')
}}</Label> }}</Label>
@@ -3137,7 +3145,7 @@ watch(isWindows, () => {
</fieldset> </fieldset>
</div> </div>
<div class="space-y-3 rounded-md border border-border/60 p-3"> <div class="space-y-3 rounded-md border border-border/60 p-3">
<div class="settings-toggle flex items-center justify-between gap-4"> <div class="flex items-center justify-between gap-4">
<div> <div>
<Label>{{ t('settings.otgNetwork') }}</Label> <Label>{{ t('settings.otgNetwork') }}</Label>
</div> </div>
@@ -3145,8 +3153,8 @@ watch(isWindows, () => {
</div> </div>
<fieldset :disabled="!config.otg_network_enabled" class="space-y-4"> <fieldset :disabled="!config.otg_network_enabled" class="space-y-4">
<Separator /> <Separator />
<div class="settings-field-list grid gap-4 sm:grid-cols-2"> <div class="grid gap-4 sm:grid-cols-2">
<div class="settings-field space-y-2"> <div class="space-y-2">
<Label for="otg-network-driver">{{ <Label for="otg-network-driver">{{
t('settings.otgNetworkDriver') t('settings.otgNetworkDriver')
}}</Label> }}</Label>
@@ -3161,7 +3169,7 @@ watch(isWindows, () => {
</SelectContent> </SelectContent>
</Select> </Select>
</div> </div>
<div class="settings-field space-y-2"> <div class="space-y-2">
<Label for="otg-network-interface">{{ <Label for="otg-network-interface">{{
t('settings.otgNetworkInterface') t('settings.otgNetworkInterface')
}}</Label> }}</Label>