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

2026-06-14 19:51:58 +08:00 · 2026-01-29 22:43:47 +08:00
parent d9daeb211a
commit 1a0b285fe6
6 changed files with 443 additions and 169 deletions
--- a/web/src/components/ActionBar.vue
+++ b/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>
--- a/web/src/components/StatusCard.vue
+++ b/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>
--- a/web/src/components/VirtualKeyboard.vue
+++ b/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;