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,76 +62,90 @@ 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>
+            <Button variant="ghost" size="sm" class="gap-2">
+              <Languages class="w-4 h-4" />
+              <span class="text-sm">
+                {{ 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>
+
+      <CardHeader class="space-y-2 pt-10 text-center sm:pt-12">
+        <div class="inline-flex h-16 w-16 items-center justify-center rounded-full bg-primary/10 mx-auto">
           <Monitor class="w-8 h-8 text-primary" />
         </div>
-        <h1 class="text-2xl font-bold text-foreground">One-KVM</h1>
+        <CardTitle class="text-xl sm:text-2xl">One-KVM</CardTitle>
-        <p class="text-sm text-muted-foreground">{{ t('auth.loginPrompt') }}</p>
+        <CardDescription>{{ t('auth.loginPrompt') }}</CardDescription>
-      </div>
+      </CardHeader>
 
-      <!-- Login Form -->
+      <CardContent>
-      <div class="space-y-4">
+        <form class="space-y-4" @submit.prevent="handleLogin">
-        <!-- Username Input -->
+          <div class="space-y-2">
-        <div class="relative">
+            <Label for="username">{{ t('auth.username') }}</Label>
-          <div class="absolute left-3 top-1/2 -translate-y-1/2 text-muted-foreground">
+            <div class="relative">
-            <User class="w-4 h-4" />
+              <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="pl-10"
+              />
+            </div>
           </div>
-          <input
-            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"
-            @keydown="handleKeydown"
-          />
-        </div>
 
-        <!-- Password Input -->
+          <div class="space-y-2">
-        <div class="relative">
+            <Label for="password">{{ t('auth.password') }}</Label>
-          <div class="absolute left-3 top-1/2 -translate-y-1/2 text-muted-foreground">
+            <div class="relative">
-            <Lock class="w-4 h-4" />
+              <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="pl-10 pr-10"
+              />
+              <button
+                type="button"
+                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"
+              >
+                <Eye v-if="!showPassword" class="w-4 h-4" />
+                <EyeOff v-else class="w-4 h-4" />
+              </button>
+            </div>
           </div>
-          <input
-            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"
-            @keydown="handleKeydown"
-          />
-          <button
-            type="button"
-            class="absolute right-3 top-1/2 -translate-y-1/2 text-muted-foreground hover:text-foreground"
-            :aria-label="showPassword ? t('extensions.rustdesk.hidePassword') : t('extensions.rustdesk.showPassword')"
-            @click="showPassword = !showPassword"
-          >
-            <Eye v-if="!showPassword" class="w-4 h-4" />
-            <EyeOff v-else class="w-4 h-4" />
-          </button>
-        </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"
-          @click="handleLogin"
-        >
-          <span v-if="loading">{{ t('common.loading') }}</span>
-          <span v-else>{{ t('auth.login') }}</span>
-        </button>
 
-        <p v-if="error" class="text-sm text-destructive text-center">{{ error }}</p>
+          <Button type="submit" class="w-full" :disabled="loading">
-      </div>
+            <span v-if="loading">{{ t('common.loading') }}</span>
-    </div>
+            <span v-else>{{ t('auth.login') }}</span>
+          </Button>
+        </form>
+      </CardContent>
+    </Card>
   </div>
 </template>