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

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>