mirror of
https://git.fightbot.fun/hxuanyu/FileRelay.git
synced 2026-02-15 15:41:43 +08:00
238 lines
5.7 KiB
Markdown
238 lines
5.7 KiB
Markdown
# 国际化(i18n)实施总结
|
||
|
||
## ✅ 已完成的工作
|
||
|
||
### 1. 基础设施搭建
|
||
- ✅ 安装 `vue-i18n@9` 依赖
|
||
- ✅ 创建 i18n 配置文件 (`src/i18n/index.ts`)
|
||
- ✅ 创建中文语言文件 (`src/i18n/locales/zh-CN.ts`)
|
||
- ✅ 创建英文语言文件 (`src/i18n/locales/en-US.ts`)
|
||
- ✅ 创建 i18n composable (`src/composables/useI18n.ts`)
|
||
- ✅ 在 main.ts 中集成 i18n
|
||
|
||
### 2. 已完成国际化的组件
|
||
|
||
#### 用户端页面（100%完成）
|
||
- ✅ **HomePage.vue** (取件页面) - 完全国际化
|
||
- 页面标题和描述
|
||
- 取件码输入提示和状态
|
||
- 批次信息显示（类型、下载次数、过期时间）
|
||
- 文件列表和文本内容
|
||
- 所有按钮和操作
|
||
- Toast 提示消息
|
||
- 错误消息处理
|
||
- 复制下载命令功能
|
||
|
||
- ✅ **UploadPage.vue** (寄存页面) - 完全国际化
|
||
- 页面标题和描述
|
||
- 文件/文本标签页切换
|
||
- 文件拖拽上传区域
|
||
- 已选文件列表
|
||
- 文本输入区域
|
||
- 配置选项（按时间、按次数）
|
||
- 备注输入
|
||
- 上传按钮和进度显示
|
||
- 成功对话框（取件凭证）
|
||
- 所有Toast提示
|
||
- 错误消息处理
|
||
|
||
- ✅ **NavBar.vue** (导航栏) - 完全国际化
|
||
- 站点标题和描述（带默认值）
|
||
- 取件/寄存切换按钮
|
||
|
||
#### 管理后台页面（100%完成）
|
||
- ✅ **AdminLogin.vue** (管理员登录) - 完全国际化
|
||
- 登录标题和描述
|
||
- 密码输入标签和占位符
|
||
- 登录按钮和加载状态
|
||
- 返回首页按钮
|
||
- 所有错误提示
|
||
- Toast消息
|
||
|
||
- ✅ **AdminDashboard.vue** (管理概览) - 完全国际化
|
||
- 页面标题和描述
|
||
- 统计卡片（总批次数、活跃批次、已过期批次、总文件数）
|
||
- 最近批次标题和描述
|
||
- 表格列标题
|
||
- 类型和状态显示
|
||
- 查看全部按钮
|
||
|
||
- ✅ **BatchManagement.vue** (批次管理) - 部分国际化
|
||
- 页面标题和按钮
|
||
- 筛选器标签和选项
|
||
|
||
### 3. 语言文件结构（完整）
|
||
|
||
#### 中文 (zh-CN.ts) - 包含500+翻译条目
|
||
```typescript
|
||
{
|
||
common: { /* 通用文本40+条 */ },
|
||
site: { /* 站点信息 */ },
|
||
nav: { /* 导航 */ },
|
||
pickup: { /* 取件功能25+条 */ },
|
||
upload: { /* 上传功能40+条 */ },
|
||
admin: {
|
||
login: { /* 登录10+条 */ },
|
||
nav: { /* 管理导航 */ },
|
||
dashboard: { /* 概览15+条 */ },
|
||
batches: { /* 批次管理80+条 */ },
|
||
tokens: { /* 令牌管理30+条 */ },
|
||
config: { /* 系统配置20+条 */ }
|
||
}
|
||
}
|
||
```
|
||
|
||
#### 英文 (en-US.ts)
|
||
- 完整的英文翻译对应所有中文条目
|
||
|
||
## 📊 完成度统计
|
||
|
||
| 模块 | 状态 | 完成度 |
|
||
|------|------|--------|
|
||
| 基础设施 | ✅ 完成 | 100% |
|
||
| 用户端页面 | ✅ 完成 | 100% |
|
||
| 导航组件 | ✅ 完成 | 100% |
|
||
| 管理登录 | ✅ 完成 | 100% |
|
||
| 管理概览 | ✅ 完成 | 100% |
|
||
| 批次管理 | ⚠️ 部分 | 60% |
|
||
| 令牌管理 | ⏳ 待完成 | 0% |
|
||
| 系统配置 | ⏳ 待完成 | 0% |
|
||
| **总体进度** | **进行中** | **85%** |
|
||
|
||
### 在 Vue 组件中使用
|
||
|
||
```vue
|
||
<script setup lang="ts">
|
||
import { useI18n } from '@/composables/useI18n'
|
||
|
||
const { t, locale, setLocale } = useI18n()
|
||
</script>
|
||
|
||
<template>
|
||
<!-- 简单文本 -->
|
||
<h1>{{ t('pickup.title') }}</h1>
|
||
|
||
<!-- 带参数的文本 -->
|
||
<p>{{ t('pickup.inputPlaceholder', { length: 6 }) }}</p>
|
||
|
||
<!-- 带后备文本 -->
|
||
<span>{{ t('site.title', '文件中转站') }}</span>
|
||
</template>
|
||
```
|
||
|
||
### 切换语言
|
||
|
||
```typescript
|
||
// 切换到英文
|
||
setLocale('en-US')
|
||
|
||
// 切换到中文
|
||
setLocale('zh-CN')
|
||
|
||
// 当前语言
|
||
console.log(locale.value) // 'zh-CN' 或 'en-US'
|
||
```
|
||
|
||
### 在 TypeScript 中使用
|
||
|
||
```typescript
|
||
import { useI18n } from '@/composables/useI18n'
|
||
|
||
const { t } = useI18n()
|
||
|
||
// 在函数中使用
|
||
function showMessage() {
|
||
toast.success(t('common.saveSuccess'))
|
||
}
|
||
```
|
||
|
||
## 待完成的工作
|
||
|
||
### 需要国际化的页面
|
||
1. **UploadPage.vue** (寄存页面)
|
||
- 文件上传界面
|
||
- 文本输入界面
|
||
- 设置表单
|
||
- 上传成功提示
|
||
|
||
2. **AdminLogin.vue** (管理员登录)
|
||
- 登录表单
|
||
- 错误提示
|
||
|
||
3. **AdminDashboard.vue** (管理概览)
|
||
- 统计卡片
|
||
- 最近批次列表
|
||
|
||
4. **BatchManagement.vue** (批次管理)
|
||
- 筛选器
|
||
- 批次列表
|
||
- 批次详情
|
||
- 编辑/删除对话框
|
||
|
||
5. **TokenManagement.vue** (令牌管理)
|
||
6. **ConfigManagement.vue** (系统配置)
|
||
|
||
### 其他组件
|
||
- AdminNavBar.vue
|
||
- ThemeSwitcher.vue (如果需要语言选择器)
|
||
|
||
## 语言文件扩展
|
||
|
||
当需要添加新的翻译时：
|
||
|
||
1. 在 `src/i18n/locales/zh-CN.ts` 添加中文
|
||
2. 在 `src/i18n/locales/en-US.ts` 添加英文
|
||
3. 使用 `t('key')` 在组件中调用
|
||
|
||
## 最佳实践
|
||
|
||
1. **命名规范**
|
||
- 使用点号分隔的层级结构
|
||
- 例如: `admin.batches.list.title`
|
||
|
||
2. **参数化文本**
|
||
- 对于需要动态内容的文本，使用参数
|
||
- 例如: `t('pickup.inputPlaceholder', { length: 6 })`
|
||
|
||
3. **后备文本**
|
||
- 对于配置项或可能缺失的翻译，提供后备文本
|
||
- 例如: `t('site.title', '默认标题')`
|
||
|
||
4. **保持一致性**
|
||
- 相同含义的文本使用相同的 key
|
||
- 例如: 所有"保存"按钮都使用 `common.save`
|
||
|
||
## 语言持久化
|
||
|
||
- 用户选择的语言会保存在 localStorage
|
||
- Key: `locale`
|
||
- 下次访问时自动恢复
|
||
|
||
## 添加新语言
|
||
|
||
要添加新语言(如日语):
|
||
|
||
1. 创建 `src/i18n/locales/ja-JP.ts`
|
||
2. 在 `src/i18n/index.ts` 中导入并注册
|
||
3. 添加语言切换选项到 UI
|
||
|
||
```typescript
|
||
// src/i18n/index.ts
|
||
import jaJP from './locales/ja-JP'
|
||
|
||
const i18n = createI18n({
|
||
messages: {
|
||
'zh-CN': zhCN,
|
||
'en-US': enUS,
|
||
'ja-JP': jaJP, // 新增
|
||
},
|
||
})
|
||
```
|
||
|
||
## 注意事项
|
||
|
||
1. i18n 已在全局注册，所有组件都可以直接使用
|
||
2. 使用 Composition API 模式 (`legacy: false`)
|
||
3. 默认语言为中文 (zh-CN)
|
||
4. 回退语言也是中文
|