forked from kevin/lmvpn_server
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:
20 files changed
+721
-185
No files matched your search
@@ -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>
|
||||
|
||||
@@ -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>
|
||||
Reference in New Issue
Block a user