feat(web): 登录页改为引导卡片样式并增加语言切换按钮

web/src/views/LoginView.vue

@@ -3,19 +3,41 @@ import { ref } from 'vue'
 import { useRouter, useRoute } from 'vue-router'
 import { useI18n } from 'vue-i18n'
 import { useAuthStore } from '@/stores/auth'
-import { Monitor, Lock, Eye, EyeOff, User } from 'lucide-vue-next'
+import {
+  supportedLanguages,
+  setLanguage,
+  getCurrentLanguage,
+  type SupportedLocale,
+} from '@/i18n'
+import { Button } from '@/components/ui/button'
+import { Input } from '@/components/ui/input'
+import { Label } from '@/components/ui/label'
+import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card'
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuTrigger,
+} from '@/components/ui/dropdown-menu'
+import { Monitor, Lock, Eye, EyeOff, User, Languages } from 'lucide-vue-next'
 
 const { t } = useI18n()
 const router = useRouter()
 const route = useRoute()
 const authStore = useAuthStore()
 
+const currentLanguage = ref<SupportedLocale>(getCurrentLanguage())
 const username = ref('')
 const password = ref('')
 const showPassword = ref(false)
 const loading = ref(false)
 const error = ref('')
 
+function switchLanguage(lang: SupportedLocale) {
+  currentLanguage.value = lang
+  setLanguage(lang)
+}
+
 async function handleLogin() {
   if (!username.value) {
     error.value = t('auth.enterUsername')
@@ -40,57 +62,73 @@ async function handleLogin() {
 
   loading.value = false
 }
-
-function handleKeydown(e: KeyboardEvent) {
-  if (e.key === 'Enter') {
-    handleLogin()
-  }
-}
 </script>
 
 <template>
   <div class="min-h-screen min-h-dvh flex items-center justify-center bg-background p-4">
-    <div class="w-full max-w-sm space-y-6">
+    <Card class="relative w-full max-w-sm">
-      <!-- Logo and Title -->
+      <div class="absolute top-4 right-4">
-      <div class="text-center space-y-2">
+        <DropdownMenu>
-        <div class="inline-flex items-center justify-center w-16 h-16 rounded-full bg-primary/10">
+          <DropdownMenuTrigger as-child>
-          <Monitor class="w-8 h-8 text-primary" />
+            <Button variant="ghost" size="sm" class="gap-2">
-        </div>
+              <Languages class="w-4 h-4" />
-        <h1 class="text-2xl font-bold text-foreground">One-KVM</h1>
+              <span class="text-sm">
-        <p class="text-sm text-muted-foreground">{{ t('auth.loginPrompt') }}</p>
+                {{ supportedLanguages.find((l) => l.code === currentLanguage)?.name }}
+              </span>
+            </Button>
+          </DropdownMenuTrigger>
+          <DropdownMenuContent align="end">
+            <DropdownMenuItem
+              v-for="lang in supportedLanguages"
+              :key="lang.code"
+              :class="{ 'bg-accent': lang.code === currentLanguage }"
+              @click="switchLanguage(lang.code)"
+            >
+              <span class="mr-2">{{ lang.flag }}</span>
+              {{ lang.name }}
+            </DropdownMenuItem>
+          </DropdownMenuContent>
+        </DropdownMenu>
       </div>
 
-      <!-- Login Form -->
+      <CardHeader class="space-y-2 pt-10 text-center sm:pt-12">
-      <div class="space-y-4">
+        <div class="inline-flex h-16 w-16 items-center justify-center rounded-full bg-primary/10 mx-auto">
-        <!-- Username Input -->
+          <Monitor class="w-8 h-8 text-primary" />
-        <div class="relative">
-          <div class="absolute left-3 top-1/2 -translate-y-1/2 text-muted-foreground">
-            <User class="w-4 h-4" />
         </div>
-          <input
+        <CardTitle class="text-xl sm:text-2xl">One-KVM</CardTitle>
+        <CardDescription>{{ t('auth.loginPrompt') }}</CardDescription>
+      </CardHeader>
+
+      <CardContent>
+        <form class="space-y-4" @submit.prevent="handleLogin">
+          <div class="space-y-2">
+            <Label for="username">{{ t('auth.username') }}</Label>
+            <div class="relative">
+              <User class="absolute left-3 top-1/2 h-4 w-4 -translate-y-1/2 text-muted-foreground" />
+              <Input
+                id="username"
                 v-model="username"
                 type="text"
                 :placeholder="t('auth.username')"
-            class="w-full h-10 pl-10 pr-4 rounded-md border border-input bg-background text-foreground placeholder:text-muted-foreground focus:outline-none focus:ring-2 focus:ring-ring"
+                class="pl-10"
-            @keydown="handleKeydown"
               />
             </div>
-
-        <!-- Password Input -->
-        <div class="relative">
-          <div class="absolute left-3 top-1/2 -translate-y-1/2 text-muted-foreground">
-            <Lock class="w-4 h-4" />
           </div>
-          <input
+
+          <div class="space-y-2">
+            <Label for="password">{{ t('auth.password') }}</Label>
+            <div class="relative">
+              <Lock class="absolute left-3 top-1/2 h-4 w-4 -translate-y-1/2 text-muted-foreground" />
+              <Input
+                id="password"
                 v-model="password"
                 :type="showPassword ? 'text' : 'password'"
                 :placeholder="t('auth.password')"
-            class="w-full h-10 pl-10 pr-10 rounded-md border border-input bg-background text-foreground placeholder:text-muted-foreground focus:outline-none focus:ring-2 focus:ring-ring"
+                class="pl-10 pr-10"
-            @keydown="handleKeydown"
               />
               <button
                 type="button"
-            class="absolute right-3 top-1/2 -translate-y-1/2 text-muted-foreground hover:text-foreground"
+                class="absolute right-3 top-1/2 -translate-y-1/2 text-muted-foreground hover:text-foreground transition-colors"
                 :aria-label="showPassword ? t('extensions.rustdesk.hidePassword') : t('extensions.rustdesk.showPassword')"
                 @click="showPassword = !showPassword"
               >
@@ -98,18 +136,16 @@ function handleKeydown(e: KeyboardEvent) {
                 <EyeOff v-else class="w-4 h-4" />
               </button>
             </div>
+          </div>
 
-        <button
+          <p v-if="error" class="text-center text-sm text-destructive">{{ error }}</p>
-          class="w-full h-10 rounded-md bg-primary text-primary-foreground font-medium hover:bg-primary/90 disabled:opacity-50 disabled:cursor-not-allowed transition-colors"
+
-          :disabled="loading"
+          <Button type="submit" class="w-full" :disabled="loading">
-          @click="handleLogin"
-        >
             <span v-if="loading">{{ t('common.loading') }}</span>
             <span v-else>{{ t('auth.login') }}</span>
-        </button>
+          </Button>
-
+        </form>
-        <p v-if="error" class="text-sm text-destructive text-center">{{ error }}</p>
+      </CardContent>
-      </div>
+    </Card>
-    </div>
   </div>
 </template>