feat: 完成前端多语言支持和菜单优化
- 缩短菜单标题,解决显示不全问题 - 添加跟随系统语言选项,作为默认选项 - 移除语言切换时的页面刷新,实现无刷新切换 - 完成主要页面的多语言替换: * ConfigPage - 全局配置页面 * ResetPassword - 重置密码页面 * LeaderList - Leader 列表页面 * UserList - 用户列表页面 * Statistics - 统计信息页面 * OrderList - 订单列表页面 * TemplateList - 模板列表页面 * CopyTradingList - 跟单配置列表页面 - 添加简体中文、繁体中文和英文的完整翻译键 - 优化语言设置页面,支持跟随系统语言
This commit is contained in:
@@ -0,0 +1,52 @@
|
||||
import { useState, useEffect } from 'react'
|
||||
import { Select, Space } from 'antd'
|
||||
import { GlobalOutlined } from '@ant-design/icons'
|
||||
import { useTranslation } from 'react-i18next'
|
||||
import { useMediaQuery } from 'react-responsive'
|
||||
|
||||
const LanguageSwitcher: React.FC = () => {
|
||||
const { i18n } = useTranslation()
|
||||
const isMobile = useMediaQuery({ maxWidth: 768 })
|
||||
const [currentLang, setCurrentLang] = useState<string>(i18n.language || 'en')
|
||||
|
||||
useEffect(() => {
|
||||
setCurrentLang(i18n.language || 'en')
|
||||
}, [i18n.language])
|
||||
|
||||
const languages = [
|
||||
{ value: 'zh-CN', label: '简体中文' },
|
||||
{ value: 'zh-TW', label: '繁體中文' },
|
||||
{ value: 'en', label: 'English' }
|
||||
]
|
||||
|
||||
const handleChange = async (value: string) => {
|
||||
setCurrentLang(value)
|
||||
await i18n.changeLanguage(value)
|
||||
// 保存到 localStorage
|
||||
localStorage.setItem('i18nextLng', value)
|
||||
// 刷新页面以应用 Ant Design 的 locale 和所有翻译
|
||||
window.location.reload()
|
||||
}
|
||||
|
||||
return (
|
||||
<Space>
|
||||
<GlobalOutlined style={{ color: '#fff', fontSize: isMobile ? '14px' : '16px' }} />
|
||||
<Select
|
||||
value={currentLang}
|
||||
onChange={handleChange}
|
||||
options={languages}
|
||||
style={{
|
||||
width: isMobile ? 100 : 120,
|
||||
color: '#fff'
|
||||
}}
|
||||
dropdownStyle={{
|
||||
minWidth: 120
|
||||
}}
|
||||
bordered={false}
|
||||
size={isMobile ? 'small' : 'middle'}
|
||||
/>
|
||||
</Space>
|
||||
)
|
||||
}
|
||||
|
||||
export default LanguageSwitcher
|
||||
Reference in New Issue
Block a user