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:
2026-07-07 15:05:53 +08:00
parent 5bce78cdb4
commit 25c3ad685a
20 changed files with 721 additions and 185 deletions
+10 -8
View File
@@ -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>