diff --git a/components/common/LanguageButton.js b/components/common/LanguageButton.js index 4c17caf2..51903afe 100644 --- a/components/common/LanguageButton.js +++ b/components/common/LanguageButton.js @@ -4,24 +4,16 @@ import Globe from 'assets/globe.svg'; import useDocumentClick from 'hooks/useDocumentClick'; import { updateApp } from 'redux/actions/app'; import Menu from './Menu'; -import styles from './LanguageButton.module.css'; import Button from './Button'; - -const supportedLanguages = { - en: 'EN', - 'zh-CN': '中文', -}; - -const menuOptions = [ - { label: 'English', value: 'en' }, - { label: '中文 (Chinese Simplified)', value: 'zh-CN' }, -]; +import { menuOptions } from 'lib/lang'; +import styles from './LanguageButton.module.css'; export default function LanguageButton({ menuPosition = 'bottom', menuAlign = 'left' }) { const dispatch = useDispatch(); const [showMenu, setShowMenu] = useState(false); const locale = useSelector(state => state.app.locale); const ref = useRef(); + const selectedLocale = menuOptions.find(e => e.value === locale)?.display; function handleSelect(value) { dispatch(updateApp({ locale: value })); @@ -38,7 +30,7 @@ export default function LanguageButton({ menuPosition = 'bottom', menuAlign = 'l return (
{showMenu && ( state.app.locale); function renderXLabel(label, index, values) { const d = new Date(values[index].value); @@ -28,23 +30,23 @@ export default function BarChart({ switch (unit) { case 'hour': - return format(d, 'ha'); + return dateFormat(d, 'ha', locale); case 'day': if (records > 31) { if (w <= 500) { - return index % 10 === 0 ? format(d, 'M/d') : ''; + return index % 10 === 0 ? dateFormat(d, 'M/d', locale) : ''; } - return index % 5 === 0 ? format(d, 'M/d') : ''; + return index % 5 === 0 ? dateFormat(d, 'M/d', locale) : ''; } if (w <= 500) { - return index % 2 === 0 ? format(d, 'MMM d') : ''; + return index % 2 === 0 ? dateFormat(d, 'MMM d', locale) : ''; } - return format(d, 'EEE M/d'); + return dateFormat(d, 'EEE M/d', locale); case 'month': if (w <= 660) { - return format(d, 'MMM'); + return dateFormat(d, 'MMM', locale); } - return format(d, 'MMMM'); + return dateFormat(d, 'MMMM', locale); default: return label; } diff --git a/lang/zh-CN.json b/lang/zh-CN.json index 0db0c639..030f6916 100644 --- a/lang/zh-CN.json +++ b/lang/zh-CN.json @@ -138,7 +138,7 @@ "defaultMessage": "用户行为" }, "metrics.average-visit-time": { - "defaultMessage": "停留时间" + "defaultMessage": "平均访问时间" }, "metrics.bounce-rate": { "defaultMessage": "跳出率" @@ -168,22 +168,22 @@ "defaultMessage": "操作系统" }, "metrics.page-views": { - "defaultMessage": "访问量" + "defaultMessage": "页面流量" }, "metrics.pages": { "defaultMessage": "网页" }, "metrics.referrers": { - "defaultMessage": "来源" + "defaultMessage": "指入域名" }, "metrics.unique-visitors": { - "defaultMessage": "访问者" + "defaultMessage": "独立访客" }, "metrics.views": { - "defaultMessage": "访问量" + "defaultMessage": "页面流量" }, "metrics.visitors": { - "defaultMessage": "访问者" + "defaultMessage": "独立访客" }, "placeholder.message.go-to-settings": { "defaultMessage": "去设置" @@ -204,7 +204,7 @@ "defaultMessage": "添加账户" }, "title.add-website": { - "defaultMessage": "A添加网站" + "defaultMessage": "添加网站" }, "title.delete-account": { "defaultMessage": "删除账户" diff --git a/lib/lang.js b/lib/lang.js new file mode 100644 index 00000000..da4f98c9 --- /dev/null +++ b/lib/lang.js @@ -0,0 +1,23 @@ +import enMessages from 'lang-compiled/en.json'; +import zhCNMessages from 'lang-compiled/zh-CN.json'; +import { format } from 'date-fns'; +import { enUS, zhCN } from 'date-fns/locale'; + +export const messages = { + en: enMessages, + 'zh-CN': zhCNMessages, +}; + +export const dateLocales = { + en: enUS, + 'zh-CN': zhCN, +}; + +export const menuOptions = [ + { label: 'English', value: 'en', display: 'EN' }, + { label: '中文 (Chinese Simplified)', value: 'zh-CN', display: '中文' }, +]; + +export function dateFormat(date, str, locale) { + return format(date, str, { locale: dateLocales[locale] || enUS }); +} diff --git a/pages/_app.js b/pages/_app.js index cd4c09e0..a2f23419 100644 --- a/pages/_app.js +++ b/pages/_app.js @@ -2,17 +2,11 @@ import React, { useEffect } from 'react'; import { IntlProvider } from 'react-intl'; import { Provider, useDispatch, useSelector } from 'react-redux'; import { useStore } from 'redux/store'; +import { updateApp } from 'redux/actions/app'; +import { messages } from 'lib/lang'; import 'styles/variables.css'; import 'styles/bootstrap-grid.css'; import 'styles/index.css'; -import en from 'lang-compiled/en.json'; -import cn from 'lang-compiled/zh-CN.json'; -import { updateApp } from '../redux/actions/app'; - -const messages = { - en, - 'zh-CN': cn, -}; const Intl = ({ children }) => { const dispatch = useDispatch(); diff --git a/styles/index.css b/styles/index.css index 79222fde..c8e1709e 100644 --- a/styles/index.css +++ b/styles/index.css @@ -15,6 +15,7 @@ body { .zh-CN { font-family: 'Noto Sans SC', sans-serif !important; + font-size: 110%; } *,