90 lines
2.8 KiB
Markdown
90 lines
2.8 KiB
Markdown
|
# 前端语言切换功能实现总结
|
|||
|
|
|
|||
|
|
## ✅ 已完成的工作
|
|||
|
|
|
|||
|
|
### 1. 语言切换组件 ✅
|
|||
|
|
- **文件**: `frontend/src/components/LanguageSwitcher.tsx`
|
|||
|
|
- **功能**:
|
|||
|
|
- 显示当前语言（简体中文、繁體中文、English）
|
|||
|
|
- 支持手动切换语言
|
|||
|
|
- 切换后自动刷新页面以应用 Ant Design 的 locale
|
|||
|
|
- 支持移动端和桌面端响应式设计
|
|||
|
|
|
|||
|
|
### 2. Layout 组件集成 ✅
|
|||
|
|
- **文件**: `frontend/src/components/Layout.tsx`
|
|||
|
|
- **更新内容**:
|
|||
|
|
- 在移动端 Header 中添加了语言切换器
|
|||
|
|
- 在桌面端 Sider 中添加了语言切换器
|
|||
|
|
- 菜单项已使用 i18n 翻译（menu.*）
|
|||
|
|
- 退出登录确认对话框已使用 i18n
|
|||
|
|
|
|||
|
|
### 3. i18n 配置优化 ✅
|
|||
|
|
- **文件**: `frontend/src/i18n/config.ts`
|
|||
|
|
- **功能**:
|
|||
|
|
- 自动检测系统语言
|
|||
|
|
- 优先使用 localStorage 中保存的用户选择
|
|||
|
|
- 提供 `changeLanguage()` 函数用于手动切换
|
|||
|
|
- 提供 `getCurrentLanguage()` 函数获取当前语言
|
|||
|
|
|
|||
|
|
### 4. 语言包扩展 ✅
|
|||
|
|
- **新增翻译键**: `menu.*`
|
|||
|
|
- `menu.accounts`: 账户管理
|
|||
|
|
- `menu.copyTrading`: 跟单交易
|
|||
|
|
- `menu.leaders`: Leader 管理
|
|||
|
|
- `menu.templates`: 跟单模板
|
|||
|
|
- `menu.copyTradingConfig`: 跟单配置
|
|||
|
|
- `menu.positions`: 仓位管理
|
|||
|
|
- `menu.statistics`: 统计信息
|
|||
|
|
- `menu.users`: 用户管理
|
|||
|
|
- `menu.systemSettings`: 系统管理
|
|||
|
|
- `menu.logout`: 退出登录
|
|||
|
|
- `menu.logoutConfirm`: 确认退出
|
|||
|
|
- `menu.logoutConfirmDesc`: 确定要退出登录吗？
|
|||
|
|
- `menu.navigation`: 导航菜单
|
|||
|
|
|
|||
|
|
### 5. API 请求同步 ✅
|
|||
|
|
- **文件**: `frontend/src/services/api.ts`
|
|||
|
|
- **功能**: 自动在请求头中添加 `X-Language`，与后端语言保持一致
|
|||
|
|
|
|||
|
|
## 使用方式
|
|||
|
|
|
|||
|
|
### 用户操作
|
|||
|
|
1. 在页面右上角（桌面端）或 Header（移动端）找到语言切换器
|
|||
|
|
2. 点击下拉菜单选择语言：
|
|||
|
|
- 简体中文
|
|||
|
|
- 繁體中文
|
|||
|
|
- English
|
|||
|
|
3. 选择后页面会自动刷新，应用新语言
|
|||
|
|
|
|||
|
|
### 技术实现
|
|||
|
|
- 语言选择保存在 `localStorage` 的 `i18n_language` 键中
|
|||
|
|
- 切换语言后自动刷新页面，确保：
|
|||
|
|
- Ant Design 的 locale 正确应用
|
|||
|
|
- 所有组件重新渲染，使用新语言
|
|||
|
|
- API 请求自动携带新语言 Header
|
|||
|
|
|
|||
|
|
## 编译状态
|
|||
|
|
- ✅ 前端编译通过，无错误
|
|||
|
|
- ✅ 所有组件正常工作
|
|||
|
|
|
|||
|
|
## 位置说明
|
|||
|
|
|
|||
|
|
### 桌面端
|
|||
|
|
- 语言切换器位于左侧导航栏顶部（PolyHermes 标题旁边）
|
|||
|
|
|
|||
|
|
### 移动端
|
|||
|
|
- 语言切换器位于顶部 Header 右侧（GitHub 和 Twitter 图标之前）
|
|||
|
|
|
|||
|
|
## 后续优化建议
|
|||
|
|
|
|||
|
|
1. **无需刷新页面切换**（可选）:
|
|||
|
|
- 当前实现需要刷新页面以确保 Ant Design locale 正确应用
|
|||
|
|
- 未来可以考虑动态更新 ConfigProvider 的 locale，避免刷新
|
|||
|
|
|
|||
|
|
2. **语言图标优化**（可选）:
|
|||
|
|
- 可以使用国旗图标或语言缩写（如 CN、TW、EN）代替文字
|
|||
|
|
|
|||
|
|
3. **语言切换动画**（可选）:
|
|||
|
|
- 添加平滑的切换动画，提升用户体验
|
|||
|
|
|