feat: 前端多语言支持(中/英)与品牌 Logo 接入
多语言: - 新增 vue-i18n,创建 src/locales/zh.ts、en.ts 语言包,按功能模块组织 key - 新增 src/i18n.ts,语言检测优先级:localStorage > navigator.language(zh→中文,其他→英文)> 兜底英文 - 导航栏新增语言切换按钮(中/EN 一键切换),选择持久化到 localStorage - 全部 View/Component 硬编码中文替换为 t() 调用,stores/auth.ts 错误消息同样国际化 - index.html lang 属性运行时动态更新 Logo: - 替换 Vue 默认 logo 为 LmVPN 品牌 Logo(盾牌+网络节点) - Header 导航栏:Logo 图标 + "LmVPN" 文字 - 首页标题区:大尺寸 Logo 展示 - Favicon 替换为 SVG 格式
This commit is contained in:
@@ -1,10 +1,12 @@
|
||||
<script setup lang="ts">
|
||||
import { ref } from 'vue'
|
||||
import { useRouter } from 'vue-router'
|
||||
import { useI18n } from 'vue-i18n'
|
||||
import { useAuthStore } from '@/stores/auth'
|
||||
|
||||
const router = useRouter()
|
||||
const authStore = useAuthStore()
|
||||
const { t } = useI18n()
|
||||
|
||||
const username = ref('')
|
||||
const password = ref('')
|
||||
@@ -14,7 +16,7 @@ const loading = ref(false)
|
||||
async function handleLogin() {
|
||||
error.value = ''
|
||||
if (!username.value || !password.value) {
|
||||
error.value = '请输入用户名和密码'
|
||||
error.value = t('login.enterUsernamePassword')
|
||||
return
|
||||
}
|
||||
loading.value = true
|
||||
@@ -22,7 +24,7 @@ async function handleLogin() {
|
||||
await authStore.login(username.value, password.value)
|
||||
router.push('/admin')
|
||||
} catch (e: any) {
|
||||
error.value = e.message || '登录失败'
|
||||
error.value = e.message || t('login.loginFailed')
|
||||
} finally {
|
||||
loading.value = false
|
||||
}
|
||||
@@ -33,18 +35,18 @@ async function handleLogin() {
|
||||
<div class="min-h-[calc(100vh-160px)] flex items-center justify-center px-4 py-12">
|
||||
<div class="w-full max-w-sm bg-white dark:bg-gray-800 rounded-xl shadow-lg p-8">
|
||||
<h2 class="text-2xl font-bold text-center text-gray-900 dark:text-white mb-6">
|
||||
LmVPN 登录
|
||||
{{ t('login.title') }}
|
||||
</h2>
|
||||
<form @submit.prevent="handleLogin" class="space-y-4">
|
||||
<div>
|
||||
<label for="username" class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">
|
||||
用户名
|
||||
{{ t('common.username') }}
|
||||
</label>
|
||||
<input
|
||||
id="username"
|
||||
v-model="username"
|
||||
type="text"
|
||||
placeholder="请输入用户名"
|
||||
:placeholder="t('login.enterUsername')"
|
||||
autocomplete="username"
|
||||
class="w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-lg
|
||||
bg-white dark:bg-gray-700 text-gray-900 dark:text-white
|
||||
@@ -54,13 +56,13 @@ async function handleLogin() {
|
||||
</div>
|
||||
<div>
|
||||
<label for="password" class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">
|
||||
密码
|
||||
{{ t('common.password') }}
|
||||
</label>
|
||||
<input
|
||||
id="password"
|
||||
v-model="password"
|
||||
type="password"
|
||||
placeholder="请输入密码"
|
||||
:placeholder="t('login.enterPassword')"
|
||||
autocomplete="current-password"
|
||||
class="w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-lg
|
||||
bg-white dark:bg-gray-700 text-gray-900 dark:text-white
|
||||
@@ -75,7 +77,7 @@ async function handleLogin() {
|
||||
class="w-full py-2.5 rounded-lg font-medium text-white transition-colors
|
||||
bg-sky-600 hover:bg-sky-700 disabled:opacity-50 disabled:cursor-not-allowed"
|
||||
>
|
||||
{{ loading ? '登录中...' : '登录' }}
|
||||
{{ loading ? t('login.loggingIn') : t('login.loginButton') }}
|
||||
</button>
|
||||
</form>
|
||||
</div>
|
||||
|
||||
Reference in New Issue
Block a user