feat: 多语言, 切换语言
Lei OT
1 year ago
parent
588cdab3c5
commit
7e0773fcb2
@ -0,0 +1,42 @@
|
|||||||
|
import { useEffect, useState } from 'react';
|
||||||
|
import dayjs from "dayjs";
|
||||||
|
import { useTranslation } from 'react-i18next';
|
||||||
|
|
||||||
|
const usePresets = () => {
|
||||||
|
const [presets, setPresets] = useState([]);
|
||||||
|
const { t, i18n } = useTranslation();
|
||||||
|
|
||||||
|
useEffect(() => {
|
||||||
|
const newPresets = [
|
||||||
|
{
|
||||||
|
label: t("datetime.thisWeek"),
|
||||||
|
value: [dayjs().startOf("w"), dayjs().endOf("w")],
|
||||||
|
},
|
||||||
|
{
|
||||||
|
label: t("datetime.lastWeek"),
|
||||||
|
value: [dayjs().startOf("w").subtract(7, "days"), dayjs().endOf("w").subtract(7, "days")],
|
||||||
|
},
|
||||||
|
{
|
||||||
|
label: t("datetime.thisMonth"),
|
||||||
|
value: [dayjs().startOf("M"), dayjs().endOf("M")],
|
||||||
|
},
|
||||||
|
{
|
||||||
|
label: t("datetime.lastMonth"),
|
||||||
|
value: [dayjs().subtract(1, "M").startOf("M"), dayjs().subtract(1, "M").endOf("M")],
|
||||||
|
},
|
||||||
|
{
|
||||||
|
label: t("datetime.lastThreeMonth"),
|
||||||
|
value: [dayjs().subtract(2, "M").startOf("M"), dayjs().endOf("M")],
|
||||||
|
},
|
||||||
|
{
|
||||||
|
label: t("datetime.thisYear"),
|
||||||
|
value: [dayjs().startOf("y"), dayjs().endOf("y")],
|
||||||
|
},
|
||||||
|
];
|
||||||
|
setPresets(newPresets);
|
||||||
|
}, [i18n.language]);
|
||||||
|
|
||||||
|
return presets;
|
||||||
|
}
|
||||||
|
|
||||||
|
export default usePresets;
|
||||||
@ -0,0 +1,71 @@
|
|||||||
|
{
|
||||||
|
"lang": {
|
||||||
|
"en": "English",
|
||||||
|
"zh": "中文"
|
||||||
|
},
|
||||||
|
"menu": {
|
||||||
|
"Reservation": "Reservation",
|
||||||
|
"Invoice": "Invoice",
|
||||||
|
"Feedback": "Feedback",
|
||||||
|
"Notice": "Notice"
|
||||||
|
},
|
||||||
|
"loginAction": {
|
||||||
|
"ChangePassword": "Change password",
|
||||||
|
"Profile": "Profile",
|
||||||
|
"Logout": "Logout",
|
||||||
|
"ChangeVendor": "Change Vendor",
|
||||||
|
"LoginTimeout": "Login timeout",
|
||||||
|
"LoginTimeoutTip": "Please input your password"
|
||||||
|
},
|
||||||
|
"common": {
|
||||||
|
"Search": "Search",
|
||||||
|
"Reset": "Reset",
|
||||||
|
"Cancel": "Cancel",
|
||||||
|
"Submit": "Submit",
|
||||||
|
"Confirm": "Confirm",
|
||||||
|
"Close": "Close",
|
||||||
|
"Save": "Save",
|
||||||
|
"Edit": "Edit",
|
||||||
|
"Delete": "Delete",
|
||||||
|
"Add": "Add",
|
||||||
|
"View": "View",
|
||||||
|
"Back": "Back",
|
||||||
|
"Download": "Download",
|
||||||
|
"Login": "Login"
|
||||||
|
},
|
||||||
|
"form": {
|
||||||
|
"Username": "Username",
|
||||||
|
"Password": "Password"
|
||||||
|
},
|
||||||
|
"datetime": {
|
||||||
|
"thisWeek": "This Week",
|
||||||
|
"lastWeek": "Last Week",
|
||||||
|
"thisMonth": "This Month",
|
||||||
|
"lastMonth": "Last Month",
|
||||||
|
"lastThreeMonth": "Last Three Month",
|
||||||
|
"thisYear": "This Year"
|
||||||
|
},
|
||||||
|
"group": {
|
||||||
|
"ArrivalDate": "Arrival Date",
|
||||||
|
"RefNo": "Reference number",
|
||||||
|
"Pax": "Pax",
|
||||||
|
"Status": "Status",
|
||||||
|
"City": "City",
|
||||||
|
"Guide": "Guide",
|
||||||
|
"ResSendingDate": "Res. sending date",
|
||||||
|
"3DGuideTip": "Reservations without the tour guide information will be highlighted in red if the arrival date is within 3 days.",
|
||||||
|
"Attachments": "Attachments",
|
||||||
|
"ConfirmationDate": "Confirmation Date",
|
||||||
|
"ConfirmationDetails": "Confirmation Details",
|
||||||
|
|
||||||
|
"Rate Code": "Rate Code",
|
||||||
|
"Rate Plan": "Rate Plan",
|
||||||
|
"Rate Type": "Rate Type",
|
||||||
|
"Rate Category": "Rate Category",
|
||||||
|
"Rate Class": "Rate Class",
|
||||||
|
"Rate Family": "Rate Family",
|
||||||
|
"Rate Group": "Rate Group",
|
||||||
|
"Rate Sub Group": "Rate Sub Group",
|
||||||
|
"Rate Sub Group Code": "Rate Sub Group Code"
|
||||||
|
}
|
||||||
|
}
|
||||||
@ -0,0 +1,63 @@
|
|||||||
|
{
|
||||||
|
"lang": {
|
||||||
|
"en": "English",
|
||||||
|
"zh": "中文"
|
||||||
|
},
|
||||||
|
"menu": {
|
||||||
|
"Reservation": "团预订",
|
||||||
|
"Invoice": "账单",
|
||||||
|
"Feedback": "反馈表",
|
||||||
|
"Notice": "通知"
|
||||||
|
},
|
||||||
|
"loginAction": {
|
||||||
|
"ChangePassword": "修改密码",
|
||||||
|
"Profile": "账户中心",
|
||||||
|
"Logout": "退出",
|
||||||
|
"ChangeVendor": "切换账户",
|
||||||
|
"LoginTimeout": "登录超时",
|
||||||
|
"LoginTimeoutTip": "请输入密码"
|
||||||
|
},
|
||||||
|
"common": {
|
||||||
|
"Search": "查询",
|
||||||
|
"Reset": "重置",
|
||||||
|
"Cancel": "取消",
|
||||||
|
"Submit": "提交",
|
||||||
|
"Confirm": "确认",
|
||||||
|
"Close": "关闭",
|
||||||
|
"Save": "保存",
|
||||||
|
"Edit": "编辑",
|
||||||
|
"Delete": "删除",
|
||||||
|
"Add": "添加",
|
||||||
|
"View": "查看",
|
||||||
|
"Back": "返回",
|
||||||
|
"Download": "下载",
|
||||||
|
"Login": "登录"
|
||||||
|
},
|
||||||
|
"form": {
|
||||||
|
"Username": "账户名",
|
||||||
|
"Password": "密码"
|
||||||
|
},
|
||||||
|
"datetime": {
|
||||||
|
"thisWeek": "本周",
|
||||||
|
"lastWeek": "上周",
|
||||||
|
"thisMonth": "本月",
|
||||||
|
"lastMonth": "上月",
|
||||||
|
"lastThreeMonth": "前三个月",
|
||||||
|
"thisYear": "今年"
|
||||||
|
},
|
||||||
|
"group": {
|
||||||
|
"ArrivalDate": "抵达日期",
|
||||||
|
"RefNo": "团号",
|
||||||
|
"Pax": "人数",
|
||||||
|
"Status": "状态",
|
||||||
|
"City": "城市",
|
||||||
|
"Guide": "导游",
|
||||||
|
"ResSendingDate": "发送时间",
|
||||||
|
"3DGuideTip": "红色突出显示：抵达日期在 3 天内，没有导游信息的预订。",
|
||||||
|
"Attachments": "附件",
|
||||||
|
"ConfirmationDate": "确认日期",
|
||||||
|
"ConfirmationDetails": "确认信息",
|
||||||
|
|
||||||
|
"Rate Code": "Rate Code"
|
||||||
|
}
|
||||||
|
}
|
||||||
@ -0,0 +1,27 @@
|
|||||||
|
import React, { useState } from 'react';
|
||||||
|
import { Dropdown, Menu } from 'antd';
|
||||||
|
import { useTranslation } from 'react-i18next';
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 语言选择组件
|
||||||
|
*/
|
||||||
|
const Language = () => {
|
||||||
|
const { t, i18n } = useTranslation();
|
||||||
|
const [selectedKeys, setSelectedKeys] = useState([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'>🌐<span style={{color: '#00b96b'}}>{t(`lang.${i18n.language}`)}</span></div>
|
||||||
|
</Dropdown>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
export default Language;
|
||||||
Loading…
Reference in New Issue