fix: 初步修复移动端 UI 错乱

web/src/components/ActionBar.vue

@@ -85,9 +85,9 @@ const extensionOpen = ref(false)
 
 <template>
   <div class="w-full border-b border-slate-200 bg-white dark:border-slate-800 dark:bg-slate-900">
-    <div class="flex items-center justify-between gap-2 px-4 py-1.5">
+    <div class="flex flex-wrap items-center gap-x-2 gap-y-2 px-4 py-1.5">
       <!-- Left side buttons -->
-      <div class="flex items-center gap-1.5 min-w-0 flex-1">
+      <div class="flex flex-wrap items-center gap-1.5 w-full sm:flex-1 sm:min-w-0">
         <!-- Video Config - Always visible -->
         <VideoConfigPopover
           v-model:open="videoPopoverOpen"
@@ -155,7 +155,7 @@ const extensionOpen = ref(false)
       </div>
 
       <!-- Right side buttons -->
-      <div class="flex items-center gap-1.5 shrink-0">
+      <div class="flex items-center gap-1.5 w-full justify-end sm:w-auto sm:ml-auto shrink-0">
         <!-- Extension Menu - Hidden on small screens -->
         <Popover v-model:open="extensionOpen" class="hidden lg:block">
           <PopoverTrigger as-child>

web/src/components/StatusCard.vue

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { computed } from 'vue'
+import { computed, onMounted, ref } from 'vue'
 import { useI18n } from 'vue-i18n'
 import { cn } from '@/lib/utils'
 import {
@@ -7,6 +7,11 @@ import {
   HoverCardContent,
   HoverCardTrigger,
 } from '@/components/ui/hover-card'
+import {
+  Popover,
+  PopoverContent,
+  PopoverTrigger,
+} from '@/components/ui/popover'
 import { Badge } from '@/components/ui/badge'
 import { Separator } from '@/components/ui/separator'
 import { Monitor, Video, Usb, AlertCircle, CheckCircle, Loader2, Volume2, HardDrive } from 'lucide-vue-next'
@@ -28,8 +33,18 @@ const props = withDefaults(defineProps<{
   errorMessage?: string
   details?: StatusDetail[]
   hoverAlign?: 'start' | 'center' | 'end'  // HoverCard alignment
+  compact?: boolean
 }>(), {
   hoverAlign: 'start',
+  compact: false,
+})
+
+const prefersPopover = ref(false)
+
+onMounted(() => {
+  const hasTouch = 'ontouchstart' in window || navigator.maxTouchPoints > 0
+  const coarsePointer = window.matchMedia?.('(pointer: coarse)')?.matches
+  prefersPopover.value = hasTouch || !!coarsePointer
 })
 
 const statusColor = computed(() => {
@@ -111,19 +126,20 @@ const statusBadgeText = computed(() => {
 </script>
 
 <template>
-  <HoverCard :open-delay="200" :close-delay="100">
+  <HoverCard v-if="!prefersPopover" :open-delay="200" :close-delay="100">
     <HoverCardTrigger as-child>
       <!-- New layout: vertical with title on top, status+quickInfo on bottom -->
       <div
         :class="cn(
-          'flex flex-col gap-0.5 px-3 py-1.5 rounded-md border text-sm cursor-pointer transition-colors min-w-[100px]',
+          'flex flex-col gap-0.5 rounded-md border cursor-pointer transition-colors',
+          compact ? 'px-2 py-1 text-xs min-w-[80px]' : 'px-3 py-1.5 text-sm min-w-[100px]',
           'bg-white dark:bg-slate-800 hover:bg-slate-50 dark:hover:bg-slate-700',
           'border-slate-200 dark:border-slate-700',
           status === 'error' && 'border-red-300 dark:border-red-800'
         )"
       >
         <!-- Top: Title -->
-        <span class="font-medium text-foreground text-xs">{{ title }}</span>
+        <span class="font-medium text-foreground text-xs truncate">{{ title }}</span>
         <!-- Bottom: Status dot + Quick info -->
         <div class="flex items-center gap-1.5">
           <span :class="cn('h-2 w-2 rounded-full shrink-0', statusColor)" />
@@ -208,4 +224,103 @@ const statusBadgeText = computed(() => {
       </div>
     </HoverCardContent>
   </HoverCard>
+
+  <Popover v-else>
+    <PopoverTrigger as-child>
+      <!-- New layout: vertical with title on top, status+quickInfo on bottom -->
+      <div
+        :class="cn(
+          'flex flex-col gap-0.5 rounded-md border cursor-pointer transition-colors',
+          compact ? 'px-2 py-1 text-xs min-w-[80px]' : 'px-3 py-1.5 text-sm min-w-[100px]',
+          'bg-white dark:bg-slate-800 hover:bg-slate-50 dark:hover:bg-slate-700',
+          'border-slate-200 dark:border-slate-700',
+          status === 'error' && 'border-red-300 dark:border-red-800'
+        )"
+      >
+        <!-- Top: Title -->
+        <span class="font-medium text-foreground text-xs truncate">{{ title }}</span>
+        <!-- Bottom: Status dot + Quick info -->
+        <div class="flex items-center gap-1.5">
+          <span :class="cn('h-2 w-2 rounded-full shrink-0', statusColor)" />
+          <span class="text-[11px] text-muted-foreground leading-tight truncate">
+            {{ quickInfo || subtitle || statusText }}
+          </span>
+        </div>
+      </div>
+    </PopoverTrigger>
+
+    <PopoverContent class="w-80" :align="hoverAlign">
+      <div class="space-y-3">
+        <!-- Header -->
+        <div class="flex items-center gap-3">
+          <div :class="cn(
+            'p-2 rounded-lg',
+            status === 'connected' ? 'bg-green-100 text-green-600 dark:bg-green-900/30 dark:text-green-400' :
+            status === 'error' ? 'bg-red-100 text-red-600 dark:bg-red-900/30 dark:text-red-400' :
+            'bg-slate-100 text-slate-600 dark:bg-slate-800 dark:text-slate-400'
+          )">
+            <component :is="StatusIcon" class="h-5 w-5" />
+          </div>
+          <div class="flex-1 min-w-0">
+            <h4 class="font-semibold text-sm">{{ title }}</h4>
+            <div class="flex items-center gap-1.5 mt-0.5">
+              <component
+                v-if="statusIcon"
+                :is="statusIcon"
+                :class="cn(
+                  'h-3.5 w-3.5',
+                  status === 'connected' ? 'text-green-500' :
+                  status === 'connecting' ? 'text-yellow-500 animate-spin' :
+                  status === 'error' ? 'text-red-500' :
+                  'text-slate-400'
+                )"
+              />
+              <Badge
+                :variant="status === 'connected' ? 'default' : status === 'error' ? 'destructive' : 'secondary'"
+                class="text-[10px] px-1.5 py-0"
+              >
+                {{ statusBadgeText }}
+              </Badge>
+            </div>
+          </div>
+        </div>
+
+        <!-- Error Message -->
+        <div
+          v-if="status === 'error' && errorMessage"
+          class="p-2 rounded-md bg-red-50 dark:bg-red-900/20 border border-red-200 dark:border-red-800"
+        >
+          <p class="text-xs text-red-600 dark:text-red-400">
+            <AlertCircle class="h-3.5 w-3.5 inline mr-1" />
+            {{ errorMessage }}
+          </p>
+        </div>
+
+        <!-- Details -->
+        <div v-if="details && details.length > 0" class="space-y-2">
+          <Separator />
+          <div class="space-y-1.5">
+            <div
+              v-for="(detail, index) in details"
+              :key="index"
+              class="flex items-center justify-between text-xs"
+            >
+              <span class="text-muted-foreground">{{ detail.label }}</span>
+              <span
+                :class="cn(
+                  'font-medium',
+                  detail.status === 'ok' ? 'text-green-600 dark:text-green-400' :
+                  detail.status === 'warning' ? 'text-yellow-600 dark:text-yellow-400' :
+                  detail.status === 'error' ? 'text-red-600 dark:text-red-400' :
+                  'text-foreground'
+                )"
+              >
+                {{ detail.value }}
+              </span>
+            </div>
+          </div>
+        </div>
+      </div>
+    </PopoverContent>
+  </Popover>
 </template>

web/src/components/VirtualKeyboard.vue

@@ -114,6 +114,21 @@ const keyboardLayout = {
   },
 }
 
+const compactMainLayout = {
+  default: keyboardLayout.main.default.slice(2),
+  shift: keyboardLayout.main.shift.slice(2),
+}
+
+const isCompactLayout = ref(false)
+let compactLayoutMedia: MediaQueryList | null = null
+let compactLayoutListener: ((event: MediaQueryListEvent) => void) | null = null
+
+function setCompactLayout(active: boolean) {
+  if (isCompactLayout.value === active) return
+  isCompactLayout.value = active
+  updateKeyboardLayout()
+}
+
 // Key display mapping with Unicode symbols (JetKVM style)
 const keyDisplayMap = computed<Record<string, string>>(() => {
   // OS-specific Meta key labels
@@ -233,14 +248,15 @@ function switchOsLayout(os: KeyboardOsType) {
 // Update keyboard layout based on selected OS
 function updateKeyboardLayout() {
   const bottomRow = getBottomRow()
+  const baseLayout = isCompactLayout.value ? compactMainLayout : keyboardLayout.main
   const newLayout = {
-    ...keyboardLayout.main,
+    ...baseLayout,
     default: [
-      ...keyboardLayout.main.default.slice(0, -1),
+      ...baseLayout.default.slice(0, -1),
       bottomRow,
     ],
     shift: [
-      ...keyboardLayout.main.shift.slice(0, -1),
+      ...baseLayout.shift.slice(0, -1),
       bottomRow,
     ],
   }
@@ -422,7 +438,7 @@ function initKeyboards() {
 
   // Main keyboard - pass element directly instead of selector string
   mainKeyboard.value = new Keyboard(mainEl, {
-    layout: keyboardLayout.main,
+    layout: isCompactLayout.value ? compactMainLayout : keyboardLayout.main,
     layoutName: layoutName.value,
     display: keyDisplayMap.value,
     theme: 'hg-theme-default hg-layout-default vkb-keyboard',
@@ -471,6 +487,7 @@ function initKeyboards() {
     stopMouseUpPropagation: true,
   })
 
+  updateKeyboardLayout()
   console.log('[VirtualKeyboard] Keyboards initialized:', id)
 }
 
@@ -570,6 +587,15 @@ onMounted(() => {
     selectedOs.value = savedOs
   }
 
+  if (window.matchMedia) {
+    compactLayoutMedia = window.matchMedia('(max-width: 640px)')
+    setCompactLayout(compactLayoutMedia.matches)
+    compactLayoutListener = (event: MediaQueryListEvent) => {
+      setCompactLayout(event.matches)
+    }
+    compactLayoutMedia.addEventListener('change', compactLayoutListener)
+  }
+
   document.addEventListener('mousemove', onDrag)
   document.addEventListener('touchmove', onDrag)
   document.addEventListener('mouseup', endDrag)
@@ -577,6 +603,9 @@ onMounted(() => {
 })
 
 onUnmounted(() => {
+  if (compactLayoutMedia && compactLayoutListener) {
+    compactLayoutMedia.removeEventListener('change', compactLayoutListener)
+  }
   document.removeEventListener('mousemove', onDrag)
   document.removeEventListener('touchmove', onDrag)
   document.removeEventListener('mouseup', endDrag)
@@ -1112,6 +1141,80 @@ html.dark .hg-theme-default .hg-button.down-key,
   }
 }
 
+@media (max-width: 640px) {
+  .vkb .simple-keyboard .hg-button {
+    height: 30px;
+    font-size: 10px;
+    padding: 0 4px;
+    margin: 0 1px 3px 0;
+    min-width: 26px;
+  }
+
+  .vkb .simple-keyboard .hg-button.combination-key {
+    font-size: 9px;
+    height: 24px;
+    padding: 0 6px;
+  }
+
+  .vkb .simple-keyboard .hg-button[data-skbtn="Backspace"] {
+    min-width: 60px;
+  }
+
+  .vkb .simple-keyboard .hg-button[data-skbtn="Tab"] {
+    min-width: 52px;
+  }
+
+  .vkb .simple-keyboard .hg-button[data-skbtn="Backslash"],
+  .vkb .simple-keyboard .hg-button[data-skbtn="(Backslash)"] {
+    min-width: 52px;
+  }
+
+  .vkb .simple-keyboard .hg-button[data-skbtn="CapsLock"] {
+    min-width: 60px;
+  }
+
+  .vkb .simple-keyboard .hg-button[data-skbtn="Enter"] {
+    min-width: 70px;
+  }
+
+  .vkb .simple-keyboard .hg-button[data-skbtn="ShiftLeft"] {
+    min-width: 70px;
+  }
+
+  .vkb .simple-keyboard .hg-button[data-skbtn="ShiftRight"] {
+    min-width: 80px;
+  }
+
+  .vkb .simple-keyboard .hg-button[data-skbtn="ControlLeft"],
+  .vkb .simple-keyboard .hg-button[data-skbtn="ControlRight"],
+  .vkb .simple-keyboard .hg-button[data-skbtn="MetaLeft"],
+  .vkb .simple-keyboard .hg-button[data-skbtn="MetaRight"],
+  .vkb .simple-keyboard .hg-button[data-skbtn="AltLeft"],
+  .vkb .simple-keyboard .hg-button[data-skbtn="AltGr"],
+  .vkb .simple-keyboard .hg-button[data-skbtn="Menu"] {
+    min-width: 46px;
+  }
+
+  .vkb .simple-keyboard .hg-button[data-skbtn="Space"] {
+    min-width: 140px;
+  }
+
+  .kb-control-container .hg-button {
+    min-width: 44px !important;
+  }
+
+  .kb-arrows-container .hg-button {
+    min-width: 36px !important;
+    width: 36px !important;
+  }
+
+  .vkb-media-btn {
+    padding: 4px 8px;
+    font-size: 14px;
+    min-width: 32px;
+  }
+}
+
 /* Floating mode - slightly smaller keys but still readable */
 .vkb--floating .vkb-body {
   padding: 8px;

web/src/views/ConsoleView.vue

@@ -1881,104 +1881,161 @@ onUnmounted(() => {
 <template>
   <div class="h-screen flex flex-col bg-background">
     <!-- Header -->
-    <header class="h-14 shrink-0 border-b border-slate-200 bg-white dark:border-slate-800 dark:bg-slate-900">
-      <div class="h-full px-4 flex items-center justify-between">
-        <!-- Left: Logo -->
-        <div class="flex items-center gap-6">
+    <header class="shrink-0 border-b border-slate-200 bg-white dark:border-slate-800 dark:bg-slate-900">
+      <div class="px-4">
+        <div class="h-14 flex items-center justify-between">
+          <!-- Left: Logo -->
+          <div class="flex items-center gap-6">
+            <div class="flex items-center gap-2">
+              <Monitor class="h-6 w-6 text-primary" />
+              <span class="font-bold text-lg">One-KVM</span>
+            </div>
+          </div>
+
+          <!-- Right: Status Cards + User Menu -->
           <div class="flex items-center gap-2">
-            <Monitor class="h-6 w-6 text-primary" />
-            <span class="font-bold text-lg">One-KVM</span>
+            <div class="hidden md:flex items-center gap-2">
+              <!-- Video Status -->
+              <StatusCard
+                :title="t('statusCard.video')"
+                type="video"
+                :status="videoStatus"
+                :quick-info="videoQuickInfo"
+                :error-message="videoErrorMessage"
+                :details="videoDetails"
+              />
+
+              <!-- Audio Status -->
+              <StatusCard
+                v-if="systemStore.audio?.available"
+                :title="t('statusCard.audio')"
+                type="audio"
+                :status="audioStatus"
+                :quick-info="audioQuickInfo"
+                :error-message="audioErrorMessage"
+                :details="audioDetails"
+              />
+
+              <!-- HID Status -->
+              <StatusCard
+                :title="t('statusCard.hid')"
+                type="hid"
+                :status="hidStatus"
+                :quick-info="hidQuickInfo"
+                :details="hidDetails"
+              />
+
+              <!-- MSD Status - Hidden when CH9329 backend (no USB gadget support) -->
+              <StatusCard
+                v-if="systemStore.msd?.available && systemStore.hid?.backend !== 'ch9329'"
+                :title="t('statusCard.msd')"
+                type="msd"
+                :status="msdStatus"
+                :quick-info="msdQuickInfo"
+                :error-message="msdErrorMessage"
+                :details="msdDetails"
+                hover-align="end"
+              />
+            </div>
+
+            <!-- Separator -->
+            <div class="h-6 w-px bg-slate-200 dark:bg-slate-700 hidden md:block mx-1" />
+
+            <!-- Theme Toggle -->
+            <Button variant="ghost" size="icon" class="h-8 w-8 hidden md:flex" @click="toggleTheme">
+              <Sun v-if="isDark" class="h-4 w-4" />
+              <Moon v-else class="h-4 w-4" />
+            </Button>
+
+            <!-- Language Toggle -->
+            <Button variant="ghost" size="icon" class="h-8 w-8 hidden md:flex" @click="toggleLanguage">
+              <Languages class="h-4 w-4" />
+            </Button>
+
+            <!-- User Menu -->
+            <DropdownMenu>
+              <DropdownMenuTrigger as-child>
+                <Button variant="outline" size="sm" class="gap-1.5">
+                  <span class="text-xs max-w-[100px] truncate">{{ authStore.user || 'admin' }}</span>
+                  <ChevronDown class="h-3.5 w-3.5" />
+                </Button>
+              </DropdownMenuTrigger>
+              <DropdownMenuContent align="end">
+                <DropdownMenuItem class="md:hidden" @click="toggleTheme">
+                  <Sun v-if="isDark" class="h-4 w-4 mr-2" />
+                  <Moon v-else class="h-4 w-4 mr-2" />
+                  {{ isDark ? t('settings.lightMode') : t('settings.darkMode') }}
+                </DropdownMenuItem>
+                <DropdownMenuItem class="md:hidden" @click="toggleLanguage">
+                  <Languages class="h-4 w-4 mr-2" />
+                  {{ locale === 'zh-CN' ? 'English' : '中文' }}
+                </DropdownMenuItem>
+                <DropdownMenuSeparator class="md:hidden" />
+                <DropdownMenuItem @click="changePasswordDialogOpen = true">
+                  <KeyRound class="h-4 w-4 mr-2" />
+                  {{ t('auth.changePassword') }}
+                </DropdownMenuItem>
+                <DropdownMenuSeparator />
+                <DropdownMenuItem @click="logout">
+                  <LogOut class="h-4 w-4 mr-2" />
+                  {{ t('auth.logout') }}
+                </DropdownMenuItem>
+              </DropdownMenuContent>
+            </DropdownMenu>
           </div>
         </div>
 
-        <!-- Right: Status Cards + User Menu -->
-        <div class="flex items-center gap-2">
-          <!-- Video Status -->
-          <StatusCard
-            :title="t('statusCard.video')"
-            type="video"
-            :status="videoStatus"
-            :quick-info="videoQuickInfo"
-            :error-message="videoErrorMessage"
-            :details="videoDetails"
-          />
+        <!-- Mobile Status Row -->
+        <div class="md:hidden pb-2">
+          <div class="flex items-center gap-2 overflow-x-auto">
+            <div class="shrink-0">
+              <StatusCard
+                :title="t('statusCard.video')"
+                type="video"
+                :status="videoStatus"
+                :quick-info="videoQuickInfo"
+                :error-message="videoErrorMessage"
+                :details="videoDetails"
+                compact
+              />
+            </div>
 
-          <!-- Audio Status -->
-          <StatusCard
-            v-if="systemStore.audio?.available"
-            :title="t('statusCard.audio')"
-            type="audio"
-            :status="audioStatus"
-            :quick-info="audioQuickInfo"
-            :error-message="audioErrorMessage"
-            :details="audioDetails"
-          />
+            <div v-if="systemStore.audio?.available" class="shrink-0">
+              <StatusCard
+                :title="t('statusCard.audio')"
+                type="audio"
+                :status="audioStatus"
+                :quick-info="audioQuickInfo"
+                :error-message="audioErrorMessage"
+                :details="audioDetails"
+                compact
+              />
+            </div>
 
-          <!-- HID Status -->
-          <StatusCard
-            :title="t('statusCard.hid')"
-            type="hid"
-            :status="hidStatus"
-            :quick-info="hidQuickInfo"
-            :details="hidDetails"
-          />
+            <div class="shrink-0">
+              <StatusCard
+                :title="t('statusCard.hid')"
+                type="hid"
+                :status="hidStatus"
+                :quick-info="hidQuickInfo"
+                :details="hidDetails"
+                compact
+              />
+            </div>
 
-          <!-- MSD Status - Hidden when CH9329 backend (no USB gadget support) -->
-          <StatusCard
-            v-if="systemStore.msd?.available && systemStore.hid?.backend !== 'ch9329'"
-            :title="t('statusCard.msd')"
-            type="msd"
-            :status="msdStatus"
-            :quick-info="msdQuickInfo"
-            :error-message="msdErrorMessage"
-            :details="msdDetails"
-            hover-align="end"
-          />
-
-          <!-- Separator -->
-          <div class="h-6 w-px bg-slate-200 dark:bg-slate-700 hidden md:block mx-1" />
-
-          <!-- Theme Toggle -->
-          <Button variant="ghost" size="icon" class="h-8 w-8 hidden md:flex" @click="toggleTheme">
-            <Sun v-if="isDark" class="h-4 w-4" />
-            <Moon v-else class="h-4 w-4" />
-          </Button>
-
-          <!-- Language Toggle -->
-          <Button variant="ghost" size="icon" class="h-8 w-8 hidden md:flex" @click="toggleLanguage">
-            <Languages class="h-4 w-4" />
-          </Button>
-
-          <!-- User Menu -->
-          <DropdownMenu>
-            <DropdownMenuTrigger as-child>
-              <Button variant="outline" size="sm" class="gap-1.5">
-                <span class="text-xs max-w-[100px] truncate">{{ authStore.user || 'admin' }}</span>
-                <ChevronDown class="h-3.5 w-3.5" />
-              </Button>
-            </DropdownMenuTrigger>
-            <DropdownMenuContent align="end">
-              <DropdownMenuItem class="md:hidden" @click="toggleTheme">
-                <Sun v-if="isDark" class="h-4 w-4 mr-2" />
-                <Moon v-else class="h-4 w-4 mr-2" />
-                {{ isDark ? t('settings.lightMode') : t('settings.darkMode') }}
-              </DropdownMenuItem>
-              <DropdownMenuItem class="md:hidden" @click="toggleLanguage">
-                <Languages class="h-4 w-4 mr-2" />
-                {{ locale === 'zh-CN' ? 'English' : '中文' }}
-              </DropdownMenuItem>
-              <DropdownMenuSeparator class="md:hidden" />
-              <DropdownMenuItem @click="changePasswordDialogOpen = true">
-                <KeyRound class="h-4 w-4 mr-2" />
-                {{ t('auth.changePassword') }}
-              </DropdownMenuItem>
-              <DropdownMenuSeparator />
-              <DropdownMenuItem @click="logout">
-                <LogOut class="h-4 w-4 mr-2" />
-                {{ t('auth.logout') }}
-              </DropdownMenuItem>
-            </DropdownMenuContent>
-          </DropdownMenu>
+            <div v-if="systemStore.msd?.available && systemStore.hid?.backend !== 'ch9329'" class="shrink-0">
+              <StatusCard
+                :title="t('statusCard.msd')"
+                type="msd"
+                :status="msdStatus"
+                :quick-info="msdQuickInfo"
+                :error-message="msdErrorMessage"
+                :details="msdDetails"
+                hover-align="end"
+                compact
+              />
+            </div>
+          </div>
         </div>
       </div>
     </header>

web/src/views/SettingsView.vue

@@ -1193,13 +1193,11 @@ onMounted(async () => {
   <AppLayout>
     <div class="flex h-full overflow-hidden">
       <!-- Mobile Header -->
-      <div class="lg:hidden fixed top-16 left-0 right-0 z-20 flex items-center justify-between px-4 py-3 border-b bg-background">
-        <h1 class="text-lg font-semibold">{{ t('settings.title') }}</h1>
+      <div class="lg:hidden fixed top-16 left-0 right-0 z-20 flex items-center px-4 py-3 border-b bg-background">
         <Sheet v-model:open="mobileMenuOpen">
           <SheetTrigger as-child>
-            <Button variant="outline" size="sm">
-              <Menu class="h-4 w-4 mr-2" />
-              {{ t('common.menu') }}
+            <Button variant="ghost" size="icon" class="mr-2 h-9 w-9">
+              <Menu class="h-4 w-4" />
             </Button>
           </SheetTrigger>
           <SheetContent side="left" class="w-72 p-0">
@@ -1228,6 +1226,7 @@ onMounted(async () => {
             </div>
           </SheetContent>
         </Sheet>
+        <h1 class="text-lg font-semibold">{{ t('settings.title') }}</h1>
       </div>
 
       <!-- Desktop Sidebar -->
@@ -1382,7 +1381,7 @@ onMounted(async () => {
                     <option v-for="fmt in availableFormats" :key="fmt.format" :value="fmt.format">{{ fmt.format }} - {{ fmt.description }}</option>
                   </select>
                 </div>
-                <div class="grid grid-cols-2 gap-4">
+                <div class="grid gap-4 sm:grid-cols-2">
                   <div class="space-y-2">
                     <Label for="video-resolution">{{ t('settings.resolution') }}</Label>
                     <select id="video-resolution" :value="`${config.video_width}x${config.video_height}`" @change="e => { const parts = (e.target as HTMLSelectElement).value.split('x').map(Number); if (parts[0] && parts[1]) { config.video_width = parts[0]; config.video_height = parts[1]; } }" class="w-full h-9 px-3 rounded-md border border-input bg-background text-sm" :disabled="!config.video_format">
@@ -1450,7 +1449,7 @@ onMounted(async () => {
                   />
                   <p class="text-xs text-muted-foreground">{{ t('settings.turnServerHint') }}</p>
                 </div>
-                <div class="grid grid-cols-2 gap-4">
+                <div class="grid gap-4 sm:grid-cols-2">
                   <div class="space-y-2">
                     <Label for="turn-username">{{ t('settings.turnUsername') }}</Label>
                     <Input
@@ -1799,7 +1798,7 @@ onMounted(async () => {
                 <CardDescription>{{ t('settings.atxPowerButtonDesc') }}</CardDescription>
               </CardHeader>
               <CardContent class="space-y-4">
-                <div class="grid grid-cols-2 gap-4">
+                <div class="grid gap-4 sm:grid-cols-2">
                   <div class="space-y-2">
                     <Label for="power-driver">{{ t('settings.atxDriver') }}</Label>
                     <select id="power-driver" v-model="atxConfig.power.driver" class="w-full h-9 px-3 rounded-md border border-input bg-background text-sm">
@@ -1816,7 +1815,7 @@ onMounted(async () => {
                     </select>
                   </div>
                 </div>
-                <div class="grid grid-cols-2 gap-4">
+                <div class="grid gap-4 sm:grid-cols-2">
                   <div class="space-y-2">
                     <Label for="power-pin">{{ atxConfig.power.driver === 'usbrelay' ? t('settings.atxChannel') : t('settings.atxPin') }}</Label>
                     <Input id="power-pin" type="number" v-model.number="atxConfig.power.pin" min="0" :disabled="atxConfig.power.driver === 'none'" />
@@ -1839,7 +1838,7 @@ onMounted(async () => {
                 <CardDescription>{{ t('settings.atxResetButtonDesc') }}</CardDescription>
               </CardHeader>
               <CardContent class="space-y-4">
-                <div class="grid grid-cols-2 gap-4">
+                <div class="grid gap-4 sm:grid-cols-2">
                   <div class="space-y-2">
                     <Label for="reset-driver">{{ t('settings.atxDriver') }}</Label>
                     <select id="reset-driver" v-model="atxConfig.reset.driver" class="w-full h-9 px-3 rounded-md border border-input bg-background text-sm">
@@ -1856,7 +1855,7 @@ onMounted(async () => {
                     </select>
                   </div>
                 </div>
-                <div class="grid grid-cols-2 gap-4">
+                <div class="grid gap-4 sm:grid-cols-2">
                   <div class="space-y-2">
                     <Label for="reset-pin">{{ atxConfig.reset.driver === 'usbrelay' ? t('settings.atxChannel') : t('settings.atxPin') }}</Label>
                     <Input id="reset-pin" type="number" v-model.number="atxConfig.reset.pin" min="0" :disabled="atxConfig.reset.driver === 'none'" />
@@ -1891,7 +1890,7 @@ onMounted(async () => {
                 </div>
                 <template v-if="atxConfig.led.enabled">
                   <Separator />
-                  <div class="grid grid-cols-2 gap-4">
+                  <div class="grid gap-4 sm:grid-cols-2">
                     <div class="space-y-2">
                       <Label for="led-chip">{{ t('settings.atxLedChip') }}</Label>
                       <select id="led-chip" v-model="atxConfig.led.gpio_chip" class="w-full h-9 px-3 rounded-md border border-input bg-background text-sm">
@@ -2008,13 +2007,13 @@ onMounted(async () => {
                       <Label>{{ t('extensions.autoStart') }}</Label>
                       <Switch v-model="extConfig.ttyd.enabled" :disabled="isExtRunning(extensions?.ttyd?.status)" />
                     </div>
-                    <div class="grid grid-cols-4 items-center gap-4">
-                      <Label class="text-right">{{ t('extensions.ttyd.shell') }}</Label>
-                      <Input v-model="extConfig.ttyd.shell" class="col-span-3" placeholder="/bin/bash" :disabled="isExtRunning(extensions?.ttyd?.status)" />
+                    <div class="grid gap-2 sm:grid-cols-4 sm:items-center">
+                      <Label class="sm:text-right">{{ t('extensions.ttyd.shell') }}</Label>
+                      <Input v-model="extConfig.ttyd.shell" class="sm:col-span-3" placeholder="/bin/bash" :disabled="isExtRunning(extensions?.ttyd?.status)" />
                     </div>
-                    <div class="grid grid-cols-4 items-center gap-4">
-                      <Label class="text-right">{{ t('extensions.ttyd.credential') }}</Label>
-                      <Input v-model="extConfig.ttyd.credential" class="col-span-3" placeholder="user:password" :disabled="isExtRunning(extensions?.ttyd?.status)" />
+                    <div class="grid gap-2 sm:grid-cols-4 sm:items-center">
+                      <Label class="sm:text-right">{{ t('extensions.ttyd.credential') }}</Label>
+                      <Input v-model="extConfig.ttyd.credential" class="sm:col-span-3" placeholder="user:password" :disabled="isExtRunning(extensions?.ttyd?.status)" />
                     </div>
                   </div>
                   <!-- Logs -->
@@ -2096,17 +2095,17 @@ onMounted(async () => {
                       <Label>{{ t('extensions.autoStart') }}</Label>
                       <Switch v-model="extConfig.gostc.enabled" :disabled="isExtRunning(extensions?.gostc?.status)" />
                     </div>
-                    <div class="grid grid-cols-4 items-center gap-4">
-                      <Label class="text-right">{{ t('extensions.gostc.addr') }}</Label>
-                      <Input v-model="extConfig.gostc.addr" class="col-span-3" placeholder="gostc.mofeng.run" :disabled="isExtRunning(extensions?.gostc?.status)" />
+                    <div class="grid gap-2 sm:grid-cols-4 sm:items-center">
+                      <Label class="sm:text-right">{{ t('extensions.gostc.addr') }}</Label>
+                      <Input v-model="extConfig.gostc.addr" class="sm:col-span-3" placeholder="gostc.mofeng.run" :disabled="isExtRunning(extensions?.gostc?.status)" />
                     </div>
-                    <div class="grid grid-cols-4 items-center gap-4">
-                      <Label class="text-right">{{ t('extensions.gostc.key') }}</Label>
-                      <Input v-model="extConfig.gostc.key" type="password" class="col-span-3" :disabled="isExtRunning(extensions?.gostc?.status)" />
+                    <div class="grid gap-2 sm:grid-cols-4 sm:items-center">
+                      <Label class="sm:text-right">{{ t('extensions.gostc.key') }}</Label>
+                      <Input v-model="extConfig.gostc.key" type="password" class="sm:col-span-3" :disabled="isExtRunning(extensions?.gostc?.status)" />
                     </div>
-                    <div class="grid grid-cols-4 items-center gap-4">
-                      <Label class="text-right">{{ t('extensions.gostc.tls') }}</Label>
-                      <div class="col-span-3">
+                    <div class="grid gap-2 sm:grid-cols-4 sm:items-center">
+                      <Label class="sm:text-right">{{ t('extensions.gostc.tls') }}</Label>
+                      <div class="sm:col-span-3">
                         <Switch v-model="extConfig.gostc.tls" :disabled="isExtRunning(extensions?.gostc?.status)" />
                       </div>
                     </div>
@@ -2187,17 +2186,17 @@ onMounted(async () => {
                       <Label>{{ t('extensions.autoStart') }}</Label>
                       <Switch v-model="extConfig.easytier.enabled" :disabled="isExtRunning(extensions?.easytier?.status)" />
                     </div>
-                    <div class="grid grid-cols-4 items-center gap-4">
-                      <Label class="text-right">{{ t('extensions.easytier.networkName') }}</Label>
-                      <Input v-model="extConfig.easytier.network_name" class="col-span-3" :disabled="isExtRunning(extensions?.easytier?.status)" />
+                    <div class="grid gap-2 sm:grid-cols-4 sm:items-center">
+                      <Label class="sm:text-right">{{ t('extensions.easytier.networkName') }}</Label>
+                      <Input v-model="extConfig.easytier.network_name" class="sm:col-span-3" :disabled="isExtRunning(extensions?.easytier?.status)" />
                     </div>
-                    <div class="grid grid-cols-4 items-center gap-4">
-                      <Label class="text-right">{{ t('extensions.easytier.networkSecret') }}</Label>
-                      <Input v-model="extConfig.easytier.network_secret" type="password" class="col-span-3" :disabled="isExtRunning(extensions?.easytier?.status)" />
+                    <div class="grid gap-2 sm:grid-cols-4 sm:items-center">
+                      <Label class="sm:text-right">{{ t('extensions.easytier.networkSecret') }}</Label>
+                      <Input v-model="extConfig.easytier.network_secret" type="password" class="sm:col-span-3" :disabled="isExtRunning(extensions?.easytier?.status)" />
                     </div>
-                    <div class="grid grid-cols-4 items-center gap-4">
-                      <Label class="text-right">{{ t('extensions.easytier.peers') }}</Label>
-                      <div class="col-span-3 space-y-2">
+                    <div class="grid gap-2 sm:grid-cols-4 sm:items-center">
+                      <Label class="sm:text-right">{{ t('extensions.easytier.peers') }}</Label>
+                      <div class="sm:col-span-3 space-y-2">
                         <div v-for="(_, i) in extConfig.easytier.peer_urls" :key="i" class="flex gap-2">
                           <Input v-model="extConfig.easytier.peer_urls[i]" placeholder="tcp://1.2.3.4:11010" :disabled="isExtRunning(extensions?.easytier?.status)" />
                           <Button variant="ghost" size="icon" @click="removeEasytierPeer(i)" :disabled="isExtRunning(extensions?.easytier?.status)">
@@ -2210,9 +2209,9 @@ onMounted(async () => {
                         </Button>
                       </div>
                     </div>
-                    <div class="grid grid-cols-4 items-center gap-4">
-                      <Label class="text-right">{{ t('extensions.easytier.virtualIp') }}</Label>
-                      <div class="col-span-3 space-y-1">
+                    <div class="grid gap-2 sm:grid-cols-4 sm:items-center">
+                      <Label class="sm:text-right">{{ t('extensions.easytier.virtualIp') }}</Label>
+                      <div class="sm:col-span-3 space-y-1">
                         <Input v-model="extConfig.easytier.virtual_ip" placeholder="10.0.0.1/24" :disabled="isExtRunning(extensions?.easytier?.status)" />
                         <p class="text-xs text-muted-foreground">{{ t('extensions.easytier.virtualIpHint') }}</p>
                       </div>
@@ -2304,9 +2303,9 @@ onMounted(async () => {
                     <Label>{{ t('extensions.autoStart') }}</Label>
                     <Switch v-model="rustdeskLocalConfig.enabled" />
                   </div>
-                  <div class="grid grid-cols-4 items-center gap-4">
-                    <Label class="text-right">{{ t('extensions.rustdesk.rendezvousServer') }}</Label>
-                    <div class="col-span-3 space-y-1">
+                  <div class="grid gap-2 sm:grid-cols-4 sm:items-center">
+                    <Label class="sm:text-right">{{ t('extensions.rustdesk.rendezvousServer') }}</Label>
+                    <div class="sm:col-span-3 space-y-1">
                       <Input
                         v-model="rustdeskLocalConfig.rendezvous_server"
                         :placeholder="t('extensions.rustdesk.rendezvousServerPlaceholder')"
@@ -2314,9 +2313,9 @@ onMounted(async () => {
                       <p class="text-xs text-muted-foreground">{{ t('extensions.rustdesk.rendezvousServerHint') }}</p>
                     </div>
                   </div>
-                  <div class="grid grid-cols-4 items-center gap-4">
-                    <Label class="text-right">{{ t('extensions.rustdesk.relayServer') }}</Label>
-                    <div class="col-span-3 space-y-1">
+                  <div class="grid gap-2 sm:grid-cols-4 sm:items-center">
+                    <Label class="sm:text-right">{{ t('extensions.rustdesk.relayServer') }}</Label>
+                    <div class="sm:col-span-3 space-y-1">
                       <Input
                         v-model="rustdeskLocalConfig.relay_server"
                         :placeholder="t('extensions.rustdesk.relayServerPlaceholder')"
@@ -2324,9 +2323,9 @@ onMounted(async () => {
                       <p class="text-xs text-muted-foreground">{{ t('extensions.rustdesk.relayServerHint') }}</p>
                     </div>
                   </div>
-                  <div class="grid grid-cols-4 items-center gap-4">
-                    <Label class="text-right">{{ t('extensions.rustdesk.relayKey') }}</Label>
-                    <div class="col-span-3 space-y-1">
+                  <div class="grid gap-2 sm:grid-cols-4 sm:items-center">
+                    <Label class="sm:text-right">{{ t('extensions.rustdesk.relayKey') }}</Label>
+                    <div class="sm:col-span-3 space-y-1">
                       <Input
                         v-model="rustdeskLocalConfig.relay_key"
                         type="password"
@@ -2343,9 +2342,9 @@ onMounted(async () => {
                   <h4 class="text-sm font-medium">{{ t('extensions.rustdesk.deviceInfo') }}</h4>
 
                   <!-- Device ID -->
-                  <div class="grid grid-cols-4 items-center gap-4">
-                    <Label class="text-right">{{ t('extensions.rustdesk.deviceId') }}</Label>
-                    <div class="col-span-3 flex items-center gap-2">
+                  <div class="grid gap-2 sm:grid-cols-4 sm:items-center">
+                    <Label class="sm:text-right">{{ t('extensions.rustdesk.deviceId') }}</Label>
+                    <div class="sm:col-span-3 flex items-center gap-2">
                       <code class="font-mono text-lg bg-muted px-3 py-1 rounded">{{ rustdeskConfig?.device_id || '-' }}</code>
                       <Button
                         variant="ghost"
@@ -2365,9 +2364,9 @@ onMounted(async () => {
                   </div>
 
                   <!-- Device Password (直接显示) -->
-                  <div class="grid grid-cols-4 items-center gap-4">
-                    <Label class="text-right">{{ t('extensions.rustdesk.devicePassword') }}</Label>
-                    <div class="col-span-3 flex items-center gap-2">
+                  <div class="grid gap-2 sm:grid-cols-4 sm:items-center">
+                    <Label class="sm:text-right">{{ t('extensions.rustdesk.devicePassword') }}</Label>
+                    <div class="sm:col-span-3 flex items-center gap-2">
                       <code class="font-mono text-lg bg-muted px-3 py-1 rounded">{{ rustdeskPassword?.device_password || '-' }}</code>
                       <Button
                         variant="ghost"
@@ -2387,9 +2386,9 @@ onMounted(async () => {
                   </div>
 
                   <!-- Keypair Status -->
-                  <div class="grid grid-cols-4 items-center gap-4">
-                    <Label class="text-right">{{ t('extensions.rustdesk.keypairGenerated') }}</Label>
-                    <div class="col-span-3">
+                  <div class="grid gap-2 sm:grid-cols-4 sm:items-center">
+                    <Label class="sm:text-right">{{ t('extensions.rustdesk.keypairGenerated') }}</Label>
+                    <div class="sm:col-span-3">
                       <Badge :variant="rustdeskConfig?.has_keypair ? 'default' : 'secondary'">
                         {{ rustdeskConfig?.has_keypair ? t('common.yes') : t('common.no') }}
                       </Badge>

web/src/views/SetupView.vue

@@ -556,7 +556,7 @@ const stepIcons = [User, Video, Keyboard, Puzzle]
 </script>
 
 <template>
-  <div class="min-h-screen flex items-center justify-center bg-background p-4">
+  <div class="min-h-screen flex items-start sm:items-center justify-center bg-background px-4 py-6 sm:py-10">
     <Card class="w-full max-w-lg relative">
       <!-- Language Switcher -->
       <div class="absolute top-4 right-4">
@@ -583,28 +583,28 @@ const stepIcons = [User, Video, Keyboard, Puzzle]
         </DropdownMenu>
       </div>
 
-      <CardHeader class="text-center space-y-2 pt-12">
+      <CardHeader class="text-center space-y-2 pt-10 sm:pt-12">
         <div
           class="inline-flex items-center justify-center w-16 h-16 mx-auto rounded-full bg-primary/10"
         >
           <Monitor class="w-8 h-8 text-primary" />
         </div>
-        <CardTitle class="text-2xl">{{ t('setup.welcome') }}</CardTitle>
+        <CardTitle class="text-xl sm:text-2xl">{{ t('setup.welcome') }}</CardTitle>
         <CardDescription>{{ t('setup.description') }}</CardDescription>
       </CardHeader>
 
-      <CardContent class="space-y-6">
+      <CardContent class="space-y-5 sm:space-y-6">
         <!-- Progress Text -->
         <p class="text-sm text-muted-foreground text-center">
           {{ t('setup.progress', { current: step, total: totalSteps }) }}
         </p>
 
         <!-- Step Indicator with Labels -->
-        <div class="flex items-center justify-center gap-2 mb-6">
+        <div class="flex items-center justify-center gap-1.5 sm:gap-2 mb-5 sm:mb-6">
           <template v-for="i in totalSteps" :key="i">
             <div class="flex flex-col items-center gap-1">
               <div
-                class="flex items-center justify-center w-10 h-10 rounded-full border-2 transition-all duration-300"
+                class="flex items-center justify-center w-9 h-9 sm:w-10 sm:h-10 rounded-full border-2 transition-all duration-300"
                 :class="
                   step > i
                     ? 'bg-primary border-primary text-primary-foreground scale-100'
@@ -613,11 +613,11 @@ const stepIcons = [User, Video, Keyboard, Puzzle]
                       : 'border-muted text-muted-foreground scale-100'
                 "
               >
-                <Check v-if="step > i" class="w-5 h-5" />
-                <component :is="stepIcons[i - 1]" v-else class="w-5 h-5" />
+                <Check v-if="step > i" class="w-4 h-4 sm:w-5 sm:h-5" />
+                <component :is="stepIcons[i - 1]" v-else class="w-4 h-4 sm:w-5 sm:h-5" />
               </div>
               <span
-                class="text-xs transition-colors duration-300 max-w-16 text-center leading-tight"
+                class="text-[10px] sm:text-xs transition-colors duration-300 max-w-14 sm:max-w-16 text-center leading-tight"
                 :class="step >= i ? 'text-foreground font-medium' : 'text-muted-foreground'"
               >
                 {{ stepLabels[i - 1] }}
@@ -625,7 +625,7 @@ const stepIcons = [User, Video, Keyboard, Puzzle]
             </div>
             <div
               v-if="i < totalSteps"
-              class="w-8 h-0.5 transition-colors duration-300 mb-6"
+              class="w-5 sm:w-8 h-0.5 transition-colors duration-300 mb-5 sm:mb-6"
               :class="step > i ? 'bg-primary' : 'bg-muted'"
             />
           </template>