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 files changed
+721 -185

No files matched your search

+7 -5
View File
@@ -1,17 +1,19 @@
<script setup lang="ts">
defineProps<{
msg: string
}>()
import { useI18n } from 'vue-i18n'
import logo from '@/assets/logo.svg'
const { t } = useI18n()
</script>
<template>
<div class="py-16 sm:py-24 text-center">
<div class="max-w-3xl mx-auto px-4">
<img :src="logo" alt="LmVPN" class="h-20 w-20 rounded-2xl mx-auto mb-6 shadow-sm" />
<h1 class="text-4xl sm:text-5xl font-extrabold text-sky-600 dark:text-sky-400 mb-4">
{{ msg }}
LmVPN
</h1>
<p class="text-lg sm:text-xl text-gray-600 dark:text-gray-400 max-w-2xl mx-auto">
安全快速可靠的 VPN 隧道管理系统
{{ t('home.tagline') }}
</p>
</div>
</div>
+11 -8
View File
@@ -1,5 +1,8 @@
<script setup lang="ts">
import { useI18n } from 'vue-i18n'
import WelcomeItem from './WelcomeItem.vue'
const { t } = useI18n()
</script>
<template>
@@ -10,8 +13,8 @@ import WelcomeItem from './WelcomeItem.vue'
<path stroke-linecap="round" stroke-linejoin="round" d="M12 15v2m-6 4h12a2 2 0 002-2v-6a2 2 0 00-2-2H6a2 2 0 00-2 2v6a2 2 0 002 2zm10-10V7a4 4 0 00-8 0v4h8z" />
</svg>
</template>
<template #heading>安全隧道</template>
基于 WireGuard/OpenVPN 协议端到端加密传输保障数据安全无泄漏
<template #heading>{{ t('home.secureTunnel') }}</template>
{{ t('home.secureTunnelDesc') }}
</WelcomeItem>
<WelcomeItem>
@@ -20,8 +23,8 @@ import WelcomeItem from './WelcomeItem.vue'
<path stroke-linecap="round" stroke-linejoin="round" d="M9.75 17L9 20l-1 1h8l-1-1-.75-3M3 13h18M5 17h14a2 2 0 002-2V5a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z" />
</svg>
</template>
<template #heading>多设备支持</template>
同时连接多台设备手机电脑路由器全平台覆盖
<template #heading>{{ t('home.multiDevice') }}</template>
{{ t('home.multiDeviceDesc') }}
</WelcomeItem>
<WelcomeItem>
@@ -30,8 +33,8 @@ import WelcomeItem from './WelcomeItem.vue'
<path stroke-linecap="round" stroke-linejoin="round" d="M7 12l3-3 3 3 4-4M8 21l4-4 4 4M3 4h18M4 4h16v12a1 1 0 01-1 1H5a1 1 0 01-1-1V4z" />
</svg>
</template>
<template #heading>流量监控</template>
实时流量统计与带宽分析随时掌握网络使用状况
<template #heading>{{ t('home.trafficMonitor') }}</template>
{{ t('home.trafficMonitorDesc') }}
</WelcomeItem>
<WelcomeItem>
@@ -41,8 +44,8 @@ import WelcomeItem from './WelcomeItem.vue'
<circle cx="12" cy="12" r="3" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" />
</svg>
</template>
<template #heading>简易配置</template>
一键部署自动配置无需复杂网络知识即可上线
<template #heading>{{ t('home.easyConfig') }}</template>
{{ t('home.easyConfigDesc') }}
</WelcomeItem>
</div>
</template>