feat: admin add language select

walinejs · Oct 30, 2021 · 6296fe5 · 6296fe5
1 parent 81a8d2c
commit 6296fe5
Show file tree

Hide file tree

Showing 6 changed files with 91 additions and 27 deletions.
diff --git a/packages/admin/src/components/Header.js b/packages/admin/src/components/Header.js
@@ -1,13 +1,26 @@
-import React from 'react';
+import React, { useMemo } from 'react';
 import { Link, useHistory } from 'react-router-dom';
 import { useDispatch, useSelector } from 'react-redux';
 import { useTranslation } from 'react-i18next';
 
+import { LANGUAGE_OPTIONS } from '../locales';
+
 export default function () {
   const dispatch = useDispatch();
   const history = useHistory();
   const user = useSelector((state) => state.user);
-  const { t } = useTranslation();
+  const { t, i18n } = useTranslation();
+
+  const defaultLanguage = useMemo(() => {
+    const option = LANGUAGE_OPTIONS.find((option) =>
+      option.alias.includes(i18n.language)
+    );
+    return option?.value ?? '';
+  }, [i18n.language]);
+
+  const updateLanguage = function (e) {
+    i18n.changeLanguage(e.target.value);
+  };
 
   const onLogout = function (e) {
     e.preventDefault();
@@ -17,6 +30,7 @@ export default function () {
 
   const match = location.pathname.match(/(.*?)\/ui/);
   const basepath = match ? match[1] : '';
+
   return (
     <div className="typecho-head-nav clearfix" role="navigation">
       {user.type === 'administrator' ? (
@@ -33,14 +47,31 @@ export default function () {
           </ul>
         </nav>
       ) : null}
-
       <div className="operate">
-        <Link to={basepath + '/ui/profile'} className="author">
-          {user.display_name}
-        </Link>
-        <a className="exit" href="#" onClick={onLogout}>
-          {t('logout')}
-        </a>
+        <div className="language-select">
+          <select
+            defaultValue={defaultLanguage}
+            onChange={updateLanguage}
+            style={{ width: 120 }}
+          >
+            {LANGUAGE_OPTIONS.map((options) => (
+              <option key={options.value} value={options.value}>
+                {options.label}
+              </option>
+            ))}
+          </select>
+        </div>
+        {user?.type ? (
+          <Link to={basepath + '/ui/profile'} className="author">
+            {user.display_name}
+          </Link>
+        ) : null}
+
+        {user?.type ? (
+          <a className="exit" href="#" onClick={onLogout}>
+            {t('logout')}
+          </a>
+        ) : null}
       </div>
     </div>
   );

diff --git a/packages/admin/src/locales/index.js b/packages/admin/src/locales/index.js
@@ -2,6 +2,24 @@ import en from './en.json';
 import zhCN from './zh-CN.json';
 import zhTW from './zh-TW.json';
 
+export const LANGUAGE_OPTIONS = [
+  {
+    label: '中文简体',
+    value: 'zh-CN',
+    alias: ['zh-CN', 'zh-cn'],
+  },
+  {
+    label: '中文繁体',
+    value: 'zh-TW',
+    alias: ['zh-TW'],
+  },
+  {
+    label: 'English',
+    value: 'en-US',
+    alias: ['en', 'en-US', 'jp', 'jp-JP'],
+  },
+];
+
 export default {
   'zh-cn': { translations: zhCN },
   'zh-CN': { translations: zhCN },

diff --git a/packages/admin/src/pages/login/index.js b/packages/admin/src/pages/login/index.js
@@ -3,6 +3,8 @@ import { Link, useHistory } from 'react-router-dom';
 import { useDispatch, useSelector } from 'react-redux';
 import { useTranslation } from 'react-i18next';
 
+import Header from '../../components/Header';
+
 import * as Icons from '../../components/icon';
 
 export default function () {
@@ -54,6 +56,7 @@ export default function () {
 
   return (
     <>
+      <Header />
       <div
         className="message popup notice"
         style={{

diff --git a/packages/admin/src/pages/manage-comments/index.js b/packages/admin/src/pages/manage-comments/index.js
@@ -12,24 +12,6 @@ import Paginator from '../../components/Paginator';
 import { buildAvatar, getPostUrl, formatDate } from './utils';
 import { useTranslation, Trans } from 'react-i18next';
 
-const FILTERS = [
-  [
-    'owner',
-    [
-      { type: 'all', name: <Trans i18nKey="all"></Trans> },
-      { type: 'mine', name: <Trans i18nKey="mine"></Trans> },
-    ],
-  ],
-  [
-    'status',
-    [
-      { type: 'approved', name: <Trans i18nKey="approved"></Trans> },
-      { type: 'waiting', name: <Trans i18nKey="waiting"></Trans> },
-      { type: 'spam', name: <Trans i18nKey="spam"></Trans> },
-    ],
-  ],
-];
-
 export default function () {
   const { t } = useTranslation();
   const keywordRef = useRef(null);
@@ -53,6 +35,24 @@ export default function () {
   const [actDropStatus, setActDropStatus] = useState(false);
   const [commentIds, setCommentIds] = useState([]);
 
+  const FILTERS = [
+    [
+      'owner',
+      [
+        { type: 'all', name: <Trans i18nKey="all"></Trans> },
+        { type: 'mine', name: <Trans i18nKey="mine"></Trans> },
+      ],
+    ],
+    [
+      'status',
+      [
+        { type: 'approved', name: <Trans i18nKey="approved"></Trans> },
+        { type: 'waiting', name: <Trans i18nKey="waiting"></Trans> },
+        { type: 'spam', name: <Trans i18nKey="spam"></Trans> },
+      ],
+    ],
+  ];
+
   useEffect(() => {
     getCommentList({ page: list.page, filter }).then((data) => {
       setList({ ...list, ...data });

diff --git a/packages/admin/src/pages/register/index.js b/packages/admin/src/pages/register/index.js
@@ -3,6 +3,8 @@ import { Link, useHistory } from 'react-router-dom';
 import { useDispatch, useSelector } from 'react-redux';
 import { useTranslation } from 'react-i18next';
 
+import Header from '../../components/Header';
+
 export default function () {
   const { t } = useTranslation();
   const dispatch = useDispatch();
@@ -58,6 +60,7 @@ export default function () {
 
   return (
     <>
+      <Header />
       <div
         className="message popup notice"
         style={{

diff --git a/packages/admin/src/style/style.css b/packages/admin/src/style/style.css
@@ -504,6 +504,15 @@ select {
   color: #fff;
 }
 
+.typecho-head-nav .operate .language-select {
+  display: inline-block;
+  margin-left: -1px;
+  padding: 0 20px;
+  border: 1px solid #383d45;
+  border-width: 0 1px;
+  line-height: 36px;
+}
+
 /** 注脚 */
 .typecho-foot {
   padding: 4em 0 3em;