feat: 适配 RK 原生 HDMI IN 适配采集

web/src/components/AppLayout.vue

@@ -4,6 +4,7 @@ import { RouterLink, useRoute, useRouter } from 'vue-router'
 import { useI18n } from 'vue-i18n'
 import { useAuthStore } from '@/stores/auth'
 import { useSystemStore } from '@/stores/system'
+import LanguageToggleButton from '@/components/LanguageToggleButton.vue'
 import { Button } from '@/components/ui/button'
 import {
   DropdownMenu,
@@ -18,12 +19,10 @@ import {
   LogOut,
   Sun,
   Moon,
-  Languages,
   Menu,
 } from 'lucide-vue-next'
-import { setLanguage } from '@/i18n'
 
-const { t, locale } = useI18n()
+const { t } = useI18n()
 const route = useRoute()
 const router = useRouter()
 const authStore = useAuthStore()
@@ -40,11 +39,6 @@ function toggleTheme() {
   localStorage.setItem('theme', isDark ? 'light' : 'dark')
 }
 
-function toggleLanguage() {
-  const newLang = locale.value === 'zh-CN' ? 'en-US' : 'zh-CN'
-  setLanguage(newLang)
-}
-
 async function handleLogout() {
   await authStore.logout()
   router.push('/login')
@@ -93,10 +87,7 @@ async function handleLogout() {
           </Button>
 
           <!-- Language Toggle -->
-          <Button variant="ghost" size="icon" :aria-label="t('common.toggleLanguage')" @click="toggleLanguage">
-            <Languages class="h-4 w-4" />
-            <span class="sr-only">{{ t('common.toggleLanguage') }}</span>
-          </Button>
+          <LanguageToggleButton />
 
           <!-- Mobile Menu -->
           <DropdownMenu>

web/src/components/LanguageToggleButton.vue

@@ -0,0 +1,50 @@
+<script setup lang="ts">
+import { computed } from 'vue'
+import { useI18n } from 'vue-i18n'
+import type { HTMLAttributes } from 'vue'
+import type { ButtonVariants } from '@/components/ui/button'
+import { Button } from '@/components/ui/button'
+import { cn } from '@/lib/utils'
+import { setLanguage } from '@/i18n'
+import { Languages } from 'lucide-vue-next'
+
+interface Props {
+  class?: HTMLAttributes['class']
+  size?: ButtonVariants['size']
+  variant?: ButtonVariants['variant']
+  labelMode?: 'hidden' | 'current' | 'next'
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  size: 'icon',
+  variant: 'ghost',
+  labelMode: 'hidden',
+})
+
+const { t, locale } = useI18n()
+
+const currentLanguageLabel = computed(() => (locale.value === 'zh-CN' ? '中文' : 'English'))
+const nextLanguageLabel = computed(() => (locale.value === 'zh-CN' ? 'English' : '中文'))
+const buttonLabel = computed(() => (
+  props.labelMode === 'current' ? currentLanguageLabel.value : nextLanguageLabel.value
+))
+
+function toggleLanguage() {
+  const newLang = locale.value === 'zh-CN' ? 'en-US' : 'zh-CN'
+  setLanguage(newLang)
+}
+</script>
+
+<template>
+  <Button
+    :variant="variant"
+    :size="size"
+    :class="cn(props.labelMode !== 'hidden' && 'gap-2', props.class)"
+    :aria-label="t('common.toggleLanguage')"
+    @click="toggleLanguage"
+  >
+    <Languages class="h-4 w-4" />
+    <span v-if="props.labelMode !== 'hidden'">{{ buttonLabel }}</span>
+    <span class="sr-only">{{ t('common.toggleLanguage') }}</span>
+  </Button>
+</template>

web/src/components/StatsSheet.vue

@@ -11,6 +11,7 @@ import {
 } from '@/components/ui/sheet'
 import { ScrollArea } from '@/components/ui/scroll-area'
 import type { WebRTCStats } from '@/composables/useWebRTC'
+import { formatFpsValue } from '@/lib/fps'
 
 const { t } = useI18n()
 
@@ -547,7 +548,7 @@ onUnmounted(() => {
             <div class="flex items-center justify-between">
               <h4 class="text-sm font-medium">{{ t('stats.frameRate') }}</h4>
               <span class="text-xs text-muted-foreground">
-                {{ currentStats.fps }} fps
+                {{ formatFpsValue(currentStats.fps) }} fps
               </span>
             </div>
             <p class="text-xs text-muted-foreground">

web/src/components/VideoConfigPopover.vue

@@ -28,6 +28,7 @@ import {
   type StreamConstraintsResponse,
 } from '@/api'
 import { getVideoFormatState, isVideoFormatSelectable } from '@/lib/video-format-support'
+import { formatFpsLabel, toConfigFps } from '@/lib/fps'
 import { useConfigStore } from '@/stores/config'
 import { useRouter } from 'vue-router'
 
@@ -549,7 +550,7 @@ async function applyVideoConfig() {
       format: selectedFormat.value,
       width,
       height,
-      fps: selectedFps.value,
+      fps: toConfigFps(selectedFps.value),
     })
 
     toast.success(t('config.applied'))
@@ -926,7 +927,7 @@ watch(
                   :value="String(fps)"
                   class="text-xs"
                 >
-                  {{ fps }} FPS
+                  {{ formatFpsLabel(fps) }}
                 </SelectItem>
               </SelectContent>
             </Select>