WrBug
1a9407c544
- 缩短菜单标题，解决显示不全问题 - 添加跟随系统语言选项，作为默认选项 - 移除语言切换时的页面刷新，实现无刷新切换 - 完成主要页面的多语言替换： * ConfigPage - 全局配置页面 * ResetPassword - 重置密码页面 * LeaderList - Leader 列表页面 * UserList - 用户列表页面 * Statistics - 统计信息页面 * OrderList - 订单列表页面 * TemplateList - 模板列表页面 * CopyTradingList - 跟单配置列表页面 - 添加简体中文、繁体中文和英文的完整翻译键 - 优化语言设置页面，支持跟随系统语言
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. **语言切换动画**（可选）:
|
||
- 添加平滑的切换动画，提升用户体验
|
||
|