You cannot select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
45 lines
1.2 KiB
JavaScript
45 lines
1.2 KiB
JavaScript
import { useState, useEffect } from 'react';
|
|
import { Dropdown } from 'antd';
|
|
import { useTranslation } from 'react-i18next';
|
|
import { appendRequestParams } from '@/utils/request';
|
|
|
|
const i18n_to_htcode = {
|
|
'zh': 2,
|
|
'en': 1,
|
|
};
|
|
|
|
export const useDefaultLgc = () => {
|
|
const { i18n } = useTranslation();
|
|
return { language: i18n_to_htcode[i18n.language], };
|
|
};
|
|
/**
|
|
* 语言选择组件
|
|
*/
|
|
const Language = () => {
|
|
const { t, i18n } = useTranslation();
|
|
const [selectedKeys, setSelectedKeys] = useState([i18n.language]);
|
|
|
|
useEffect(() => {
|
|
appendRequestParams('lgc', i18n_to_htcode[i18n.language]);
|
|
|
|
return () => {};
|
|
}, [i18n.language]);
|
|
|
|
// 切换语言事件
|
|
const handleChangeLanguage = ({ key }) => {
|
|
setSelectedKeys([key]);
|
|
i18n.changeLanguage(key);
|
|
};
|
|
|
|
const langSupports = ['en', 'zh'].map((lang) => ({ label: t(`lang.${lang}`), key: lang }));
|
|
|
|
/* 🌏🌐 */
|
|
return (
|
|
<Dropdown menu={{ items: langSupports, onClick: handleChangeLanguage, style: { width: 100 }, selectedKeys: selectedKeys }}>
|
|
<div className='icon text-primary'>🌐<span>{t(`lang.${i18n.language}`)}</span></div>
|
|
</Dropdown>
|
|
);
|
|
};
|
|
|
|
export default Language;
|