feat: add comprehensive i18n support across all pages

- Add i18n support to admin sidebar, breadcrumbs, and nav-footer
- Add i18n support to admin pages: system-settings, users, versions, risk-control, sessions, cloud-variables, cloud-constants
- Add i18n support to auth pages: login, register
- Add i18n support to install and profile pages
- Add i18n support to agent pages: dashboard, finance, users, apps, cards
- Replace all hard-coded Chinese text with i18n translation keys
- Add comprehensive translation keys to zh.json and en.json
- Fix date formatting to use locale-agnostic toLocaleDateString()
- Pass t function as parameter for i18n in non-component files
This commit is contained in:
2026-05-07 23:06:58 +08:00
parent f1f2a9dc9d
commit c816f4d85c
26 changed files with 1817 additions and 658 deletions
+25 -23
View File
@@ -1,11 +1,13 @@
<script setup lang="ts">
import { ChartLine, Loader2, Shield, ShieldCheck, Users, Zap } from 'lucide-vue-next'
import { computed, ref } from 'vue'
import { useI18n } from 'vue-i18n'
import { useRouter } from 'vue-router'
import { toast } from 'vue-sonner'
import api from '@/services/api'
const { t } = useI18n()
const router = useRouter()
const loading = ref(false)
@@ -21,7 +23,7 @@ const isValid = computed(() => {
async function handleLogin() {
if (!isValid.value) {
toast.error('请填写用户名和密码')
toast.error(t('auth.login.fillRequired'))
return
}
@@ -36,7 +38,7 @@ async function handleLogin() {
localStorage.setItem('token', data.token)
localStorage.setItem('user', JSON.stringify(data.user))
toast.success('登录成功')
toast.success(t('auth.login.loginSuccess'))
if (data.user.role === 'agent' || data.user.parent_agent_id) {
router.push('/agent')
@@ -47,8 +49,8 @@ async function handleLogin() {
}
}
catch (error: any) {
console.error('登录失败:', error)
toast.error(error.message || '登录失败,请检查用户名和密码')
console.error('Login failed:', error)
toast.error(error.message || t('auth.login.loginFailed'))
}
finally {
loading.value = false
@@ -68,30 +70,30 @@ async function handleLogin() {
<div class="size-12 rounded-xl bg-primary flex items-center justify-center">
<ShieldCheck class="size-7 text-primary-foreground" />
</div>
<span class="text-2xl font-bold">管理平台</span>
<span class="text-2xl font-bold">{{ t('auth.login.platformName') }}</span>
</div>
<h1 class="text-4xl font-bold mb-4">
软件授权管理平台
{{ t('auth.login.heroTitle') }}
</h1>
<p class="text-lg text-muted-foreground mb-8">
专业的软件验证与授权管理解决方案为您的软件提供全方位的保护
{{ t('auth.login.heroDesc') }}
</p>
<div class="grid grid-cols-2 gap-4">
<div class="flex items-center gap-3 p-4 rounded-lg bg-background/50 backdrop-blur">
<Zap class="size-5 text-primary" />
<span class="text-sm">快速集成</span>
<span class="text-sm">{{ t('auth.login.quickIntegration') }}</span>
</div>
<div class="flex items-center gap-3 p-4 rounded-lg bg-background/50 backdrop-blur">
<Shield class="size-5 text-primary" />
<span class="text-sm">安全可靠</span>
<span class="text-sm">{{ t('auth.login.secureReliable') }}</span>
</div>
<div class="flex items-center gap-3 p-4 rounded-lg bg-background/50 backdrop-blur">
<ChartLine class="size-5 text-primary" />
<span class="text-sm">数据分析</span>
<span class="text-sm">{{ t('auth.login.dataAnalysis') }}</span>
</div>
<div class="flex items-center gap-3 p-4 rounded-lg bg-background/50 backdrop-blur">
<Users class="size-5 text-primary" />
<span class="text-sm">用户管理</span>
<span class="text-sm">{{ t('auth.login.userManagement') }}</span>
</div>
</div>
</div>
@@ -104,38 +106,38 @@ async function handleLogin() {
<div class="size-10 rounded-xl bg-primary flex items-center justify-center">
<ShieldCheck class="size-6 text-primary-foreground" />
</div>
<span class="text-xl font-bold">管理平台</span>
<span class="text-xl font-bold">{{ t('auth.login.platformName') }}</span>
</div>
</div>
<div class="mb-8">
<h2 class="text-2xl font-bold mb-2">
欢迎回来
{{ t('auth.login.welcomeBack') }}
</h2>
<p class="text-muted-foreground">
请输入您的账号信息登录系统
{{ t('auth.login.loginDesc') }}
</p>
</div>
<form class="space-y-6" @submit.prevent="handleLogin">
<div class="space-y-2">
<UiLabel for="username">用户名</UiLabel>
<UiLabel for="username">{{ t('auth.login.username') }}</UiLabel>
<UiInput
id="username"
v-model="form.username"
type="text"
name="username"
autocomplete="username"
placeholder="请输入用户名"
:placeholder="t('auth.login.usernamePlaceholder')"
:disabled="loading"
/>
</div>
<div class="space-y-2">
<div class="flex items-center justify-between">
<UiLabel for="password">密码</UiLabel>
<UiLabel for="password">{{ t('auth.login.password') }}</UiLabel>
<router-link to="/forgot-password" class="text-sm text-primary hover:underline">
忘记密码
{{ t('auth.login.forgotPassword') }}
</router-link>
</div>
<UiInput
@@ -144,7 +146,7 @@ async function handleLogin() {
type="password"
name="password"
autocomplete="current-password"
placeholder="请输入密码"
:placeholder="t('auth.login.passwordPlaceholder')"
:disabled="loading"
/>
</div>
@@ -156,7 +158,7 @@ async function handleLogin() {
v-model:checked="form.remember"
/>
<UiLabel for="remember" class="text-sm font-normal cursor-pointer">
记住我
{{ t('auth.login.rememberMe') }}
</UiLabel>
</div>
</div>
@@ -167,14 +169,14 @@ async function handleLogin() {
:disabled="loading || !isValid"
>
<Loader2 v-if="loading" class="mr-2 h-4 w-4 animate-spin" />
{{ loading ? '登录中...' : '登录' }}
{{ loading ? t('auth.login.loggingIn') : t('auth.login.loginBtn') }}
</UiButton>
</form>
<div class="mt-6 text-center text-sm text-muted-foreground">
还没有账号
{{ t('auth.login.noAccount') }}
<router-link to="/register" class="text-primary hover:underline">
立即注册
{{ t('auth.login.registerNow') }}
</router-link>
</div>
</div>
+35 -33
View File
@@ -1,11 +1,13 @@
<script setup lang="ts">
import { Check, Loader2, ShieldCheck } from 'lucide-vue-next'
import { computed, ref } from 'vue'
import { useI18n } from 'vue-i18n'
import { useRouter } from 'vue-router'
import { toast } from 'vue-sonner'
import api from '@/services/api'
const { t } = useI18n()
const router = useRouter()
const loading = ref(false)
@@ -27,27 +29,27 @@ const isValid = computed(() => {
async function handleRegister() {
if (!form.value.username) {
toast.error('请输入用户名')
toast.error(t('auth.register.usernameRequired'))
return
}
if (!form.value.email) {
toast.error('请输入邮箱')
toast.error(t('auth.register.emailRequired'))
return
}
if (!form.value.password) {
toast.error('请输入密码')
toast.error(t('auth.register.passwordRequired'))
return
}
if (form.value.password.length < 6) {
toast.error('密码长度至少6位')
toast.error(t('auth.register.passwordMinLength'))
return
}
if (form.value.password !== form.value.confirmPassword) {
toast.error('两次输入的密码不一致')
toast.error(t('auth.register.passwordMismatch'))
return
}
if (!form.value.agree) {
toast.error('请阅读并同意服务条款')
toast.error(t('auth.register.agreeRequired'))
return
}
@@ -59,12 +61,12 @@ async function handleRegister() {
password: form.value.password,
})
toast.success('注册成功,请登录')
toast.success(t('auth.register.registerSuccess'))
router.push('/login')
}
catch (error: any) {
console.error('注册失败:', error)
toast.error(error.message || '注册失败')
console.error('Registration failed:', error)
toast.error(error.message || t('auth.register.registerFailed'))
}
finally {
loading.value = false
@@ -84,32 +86,32 @@ async function handleRegister() {
<div class="size-12 rounded-xl bg-primary flex items-center justify-center">
<ShieldCheck class="size-7 text-primary-foreground" />
</div>
<span class="text-2xl font-bold">管理平台</span>
<span class="text-2xl font-bold">{{ t('auth.register.platformName') }}</span>
</div>
<h1 class="text-4xl font-bold mb-4">
开始使用
{{ t('auth.register.heroTitle') }}
</h1>
<p class="text-lg text-muted-foreground mb-8">
创建账号立即体验专业的软件授权管理服务
{{ t('auth.register.heroDesc') }}
</p>
<div class="space-y-4">
<div class="flex items-center gap-3">
<div class="size-8 rounded-full bg-primary/20 flex items-center justify-center">
<Check class="size-4 text-primary" />
</div>
<span>免费创建应用快速集成 SDK</span>
<span>{{ t('auth.register.feature1') }}</span>
</div>
<div class="flex items-center gap-3">
<div class="size-8 rounded-full bg-primary/20 flex items-center justify-center">
<Check class="size-4 text-primary" />
</div>
<span>完善的用户管理和数据分析</span>
<span>{{ t('auth.register.feature2') }}</span>
</div>
<div class="flex items-center gap-3">
<div class="size-8 rounded-full bg-primary/20 flex items-center justify-center">
<Check class="size-4 text-primary" />
</div>
<span>灵活的卡密授权方案</span>
<span>{{ t('auth.register.feature3') }}</span>
</div>
</div>
</div>
@@ -122,60 +124,60 @@ async function handleRegister() {
<div class="size-10 rounded-xl bg-primary flex items-center justify-center">
<ShieldCheck class="size-6 text-primary-foreground" />
</div>
<span class="text-xl font-bold">管理平台</span>
<span class="text-xl font-bold">{{ t('auth.register.platformName') }}</span>
</div>
</div>
<div class="mb-8">
<h2 class="text-2xl font-bold mb-2">
创建账号
{{ t('auth.register.createAccount') }}
</h2>
<p class="text-muted-foreground">
填写以下信息完成注册
{{ t('auth.register.registerDesc') }}
</p>
</div>
<form class="space-y-5" @submit.prevent="handleRegister">
<div class="space-y-2">
<UiLabel for="username">用户名</UiLabel>
<UiLabel for="username">{{ t('auth.register.username') }}</UiLabel>
<UiInput
id="username"
v-model="form.username"
type="text"
placeholder="请输入用户名"
:placeholder="t('auth.register.usernamePlaceholder')"
:disabled="loading"
/>
</div>
<div class="space-y-2">
<UiLabel for="email">邮箱</UiLabel>
<UiLabel for="email">{{ t('auth.register.email') }}</UiLabel>
<UiInput
id="email"
v-model="form.email"
type="email"
placeholder="请输入邮箱"
:placeholder="t('auth.register.emailPlaceholder')"
:disabled="loading"
/>
</div>
<div class="space-y-2">
<UiLabel for="password">密码</UiLabel>
<UiLabel for="password">{{ t('auth.register.password') }}</UiLabel>
<UiInput
id="password"
v-model="form.password"
type="password"
placeholder="请输入密码(至少6位)"
:placeholder="t('auth.register.passwordPlaceholder')"
:disabled="loading"
/>
</div>
<div class="space-y-2">
<UiLabel for="confirmPassword">确认密码</UiLabel>
<UiLabel for="confirmPassword">{{ t('auth.register.confirmPassword') }}</UiLabel>
<UiInput
id="confirmPassword"
v-model="form.confirmPassword"
type="password"
placeholder="请再次输入密码"
:placeholder="t('auth.register.confirmPasswordPlaceholder')"
:disabled="loading"
/>
</div>
@@ -186,10 +188,10 @@ async function handleRegister() {
v-model:checked="form.agree"
/>
<UiLabel for="agree" class="text-sm font-normal cursor-pointer leading-tight">
我已阅读并同意
<a href="#" class="text-primary hover:underline">服务条款</a>
<a href="#" class="text-primary hover:underline">隐私政策</a>
{{ t('auth.register.agreeTerms') }}
<a href="#" class="text-primary hover:underline">{{ t('auth.register.termsOfService') }}</a>
{{ t('auth.register.and') }}
<a href="#" class="text-primary hover:underline">{{ t('auth.register.privacyPolicy') }}</a>
</UiLabel>
</div>
@@ -199,14 +201,14 @@ async function handleRegister() {
:disabled="loading || !isValid"
>
<Loader2 v-if="loading" class="mr-2 h-4 w-4 animate-spin" />
{{ loading ? '注册中...' : '注册' }}
{{ loading ? t('auth.register.registering') : t('auth.register.registerBtn') }}
</UiButton>
</form>
<div class="mt-6 text-center text-sm text-muted-foreground">
已有账号
{{ t('auth.register.hasAccount') }}
<router-link to="/login" class="text-primary hover:underline">
立即登录
{{ t('auth.register.loginNow') }}
</router-link>
</div>
</div>