feat: 实现AppHeader和LoginView完整国际化支持

- 完成AppHeader.vue全面国际化
  * 版本检查和更新通知系统多语言支持
  * 用户菜单和账户信息修改模态框国际化
  * 退出登录确认流程多语言化
  * 总计替换30+个硬编码中文字符串

- 实现LoginView.vue完整国际化
  * 登录表单所有文本支持多语言
  * 添加语言切换组件到登录页面
  * 确保用户可在登录前选择语言

- 扩展三语言翻译文件
  * zh-cn.js: 简体中文标准翻译
  * zh-tw.js: 繁体中文专业化翻译
  * en.js: 英文技术术语标准翻译
  * 新增header和login完整翻译组

- 提升用户体验
  * 登录页面右上角工具栏(语言+主题切换)
  * 响应式布局适配多设备
  * 完整的首次访问多语言体验
This commit is contained in:
Wangnov
2025-09-08 19:41:44 +08:00
parent 4aae4aaec0
commit e88e97b485
5 changed files with 218 additions and 45 deletions

View File

@@ -1,7 +1,10 @@
<template>
<div class="flex min-h-screen items-center justify-center p-4 sm:p-6">
<!-- 主题切换按钮 - 固定在右上角 -->
<div class="fixed right-4 top-4 z-50">
<!-- 右上角工具栏 -->
<div class="fixed right-4 top-4 z-50 flex items-center gap-2 sm:gap-3">
<!-- 语言切换按钮 -->
<LanguageSwitch mode="dropdown" size="medium" />
<!-- 主题切换按钮 -->
<ThemeToggle mode="dropdown" />
</div>
@@ -34,18 +37,18 @@
v-else-if="oemLoading"
class="mx-auto mb-2 h-8 w-48 animate-pulse rounded bg-gray-300/50 sm:h-9 sm:w-64"
/>
<p class="text-base text-gray-600 dark:text-gray-400 sm:text-lg">管理后台</p>
<p class="text-base text-gray-600 dark:text-gray-400 sm:text-lg">{{ t('login.title') }}</p>
</div>
<form class="space-y-4 sm:space-y-6" @submit.prevent="handleLogin">
<div>
<label class="mb-2 block text-sm font-semibold text-gray-900 dark:text-gray-100 sm:mb-3"
>用户名</label
>{{ t('login.username') }}</label
>
<input
v-model="loginForm.username"
class="form-input w-full"
placeholder="请输入用户名"
:placeholder="t('login.usernamePlaceholder')"
required
type="text"
/>
@@ -53,12 +56,12 @@
<div>
<label class="mb-2 block text-sm font-semibold text-gray-900 dark:text-gray-100 sm:mb-3"
>密码</label
>{{ t('login.password') }}</label
>
<input
v-model="loginForm.password"
class="form-input w-full"
placeholder="请输入密码"
:placeholder="t('login.passwordPlaceholder')"
required
type="password"
/>
@@ -71,7 +74,7 @@
>
<i v-if="!authStore.loginLoading" class="fas fa-sign-in-alt mr-2" />
<div v-if="authStore.loginLoading" class="loading-spinner mr-2" />
{{ authStore.loginLoading ? '登录中...' : '登录' }}
{{ authStore.loginLoading ? t('login.loggingIn') : t('login.loginButton') }}
</button>
</form>
@@ -87,12 +90,15 @@
<script setup>
import { ref, onMounted, computed } from 'vue'
import { useI18n } from 'vue-i18n'
import { useAuthStore } from '@/stores/auth'
import { useThemeStore } from '@/stores/theme'
import ThemeToggle from '@/components/common/ThemeToggle.vue'
import LanguageSwitch from '@/components/common/LanguageSwitch.vue'
const authStore = useAuthStore()
const themeStore = useThemeStore()
const { t } = useI18n()
const oemLoading = computed(() => authStore.oemLoading)
const loginForm = ref({