调整登录页文案并改为点击切换语言

This commit is contained in:
mofeng-git
2026-03-28 20:47:29 +08:00
parent abc6bd1677
commit 4784cb75e4

View File

@@ -4,7 +4,6 @@ import { useRouter, useRoute } from 'vue-router'
import { useI18n } from 'vue-i18n' import { useI18n } from 'vue-i18n'
import { useAuthStore } from '@/stores/auth' import { useAuthStore } from '@/stores/auth'
import { import {
supportedLanguages,
setLanguage, setLanguage,
getCurrentLanguage, getCurrentLanguage,
type SupportedLocale, type SupportedLocale,
@@ -13,13 +12,7 @@ import { Button } from '@/components/ui/button'
import { Input } from '@/components/ui/input' import { Input } from '@/components/ui/input'
import { Label } from '@/components/ui/label' import { Label } from '@/components/ui/label'
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card' import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card'
import { import { Monitor, Lock, Eye, EyeOff, User } from 'lucide-vue-next'
DropdownMenu,
DropdownMenuContent,
DropdownMenuItem,
DropdownMenuTrigger,
} from '@/components/ui/dropdown-menu'
import { Monitor, Lock, Eye, EyeOff, User, Languages } from 'lucide-vue-next'
const { t } = useI18n() const { t } = useI18n()
const router = useRouter() const router = useRouter()
@@ -33,7 +26,7 @@ const showPassword = ref(false)
const loading = ref(false) const loading = ref(false)
const error = ref('') const error = ref('')
function switchLanguage(lang: SupportedLocale) { function handleLanguageChange(lang: SupportedLocale) {
currentLanguage.value = lang currentLanguage.value = lang
setLanguage(lang) setLanguage(lang)
} }
@@ -67,28 +60,21 @@ async function handleLogin() {
<template> <template>
<div class="min-h-screen min-h-dvh flex items-center justify-center bg-background p-4"> <div class="min-h-screen min-h-dvh flex items-center justify-center bg-background p-4">
<Card class="relative w-full max-w-sm"> <Card class="relative w-full max-w-sm">
<div class="absolute top-4 right-4"> <div class="absolute top-4 right-4 flex gap-2">
<DropdownMenu> <Button
<DropdownMenuTrigger as-child> :variant="currentLanguage === 'zh-CN' ? 'default' : 'outline'"
<Button variant="ghost" size="sm" class="gap-2"> size="sm"
<Languages class="w-4 h-4" /> @click="handleLanguageChange('zh-CN')"
<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 }} </Button>
</DropdownMenuItem> <Button
</DropdownMenuContent> :variant="currentLanguage === 'en-US' ? 'default' : 'outline'"
</DropdownMenu> size="sm"
@click="handleLanguageChange('en-US')"
>
English
</Button>
</div> </div>
<CardHeader class="space-y-2 pt-10 text-center sm:pt-12"> <CardHeader class="space-y-2 pt-10 text-center sm:pt-12">
@@ -96,7 +82,7 @@ async function handleLogin() {
<Monitor class="w-8 h-8 text-primary" /> <Monitor class="w-8 h-8 text-primary" />
</div> </div>
<CardTitle class="text-xl sm:text-2xl">One-KVM</CardTitle> <CardTitle class="text-xl sm:text-2xl">One-KVM</CardTitle>
<CardDescription>{{ t('auth.loginPrompt') }}</CardDescription> <CardDescription>{{ t('auth.login') }}</CardDescription>
</CardHeader> </CardHeader>
<CardContent> <CardContent>