WrBug
1a9407c544
- 缩短菜单标题，解决显示不全问题 - 添加跟随系统语言选项，作为默认选项 - 移除语言切换时的页面刷新，实现无刷新切换 - 完成主要页面的多语言替换： * ConfigPage - 全局配置页面 * ResetPassword - 重置密码页面 * LeaderList - Leader 列表页面 * UserList - 用户列表页面 * Statistics - 统计信息页面 * OrderList - 订单列表页面 * TemplateList - 模板列表页面 * CopyTradingList - 跟单配置列表页面 - 添加简体中文、繁体中文和英文的完整翻译键 - 优化语言设置页面，支持跟随系统语言
2.8 KiB
2.8 KiB
前端语言切换功能实现总结
✅ 已完成的工作
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，与后端语言保持一致
使用方式
用户操作
- 在页面右上角（桌面端）或 Header（移动端）找到语言切换器
- 点击下拉菜单选择语言：
- 简体中文
- 繁體中文
- English
- 选择后页面会自动刷新，应用新语言
技术实现
- 语言选择保存在
localStorage的i18n_language键中 - 切换语言后自动刷新页面，确保：
- Ant Design 的 locale 正确应用
- 所有组件重新渲染，使用新语言
- API 请求自动携带新语言 Header
编译状态
- ✅ 前端编译通过，无错误
- ✅ 所有组件正常工作
位置说明
桌面端
- 语言切换器位于左侧导航栏顶部（PolyHermes 标题旁边）
移动端
- 语言切换器位于顶部 Header 右侧（GitHub 和 Twitter 图标之前）
后续优化建议
-
无需刷新页面切换（可选）:
- 当前实现需要刷新页面以确保 Ant Design locale 正确应用
- 未来可以考虑动态更新 ConfigProvider 的 locale，避免刷新
-
语言图标优化（可选）:
- 可以使用国旗图标或语言缩写（如 CN、TW、EN）代替文字
-
语言切换动画（可选）:
- 添加平滑的切换动画，提升用户体验