♻️Refactor: About Page

web/src/components/LoginForm.js

@@ -135,7 +135,7 @@ const LoginForm = () => {
             centered: true,
           });
         }
-        navigate('/console/token');
+        navigate('/console');
       } else {
         showError(message);
       }

web/src/components/RegisterForm.js

@@ -16,7 +16,6 @@ import {
   Divider,
   Form,
   Icon,
-  Layout,
   Modal,
 } from '@douyinfe/semi-ui';
 import Title from '@douyinfe/semi-ui/lib/es/typography/title';

web/src/i18n/locales/en.json

@@ -436,7 +436,7 @@
   "系统设置": "System Settings",
   "其他设置": "Other Settings",
   "项目仓库地址": "Project Repository Address",
-  "可在设置页面设置关于内容，支持 HTML & Markdown": "You can set the content about in the settings page, support HTML & Markdown",
+  "可在设置页面设置关于内容，支持 HTML & Markdown": "The About content can be set on the settings page, supporting HTML & Markdown",
   "由": "developed by",
   "开发，基于": "based on",
   "MIT 协议": "MIT License",
@@ -866,7 +866,6 @@
   "查看全部": "View all",
   "高延迟": "high latency",
   "异常": "abnormal",
-  "API地址": "API address",
   "的未命名令牌": "unnamed token",
   "令牌更新成功！": "Token updated successfully!",
   "(origin) Discord原链接": "(origin) Discord original link",
@@ -1403,5 +1402,9 @@
   "版权所有": "All rights reserved",
   "设计与开发由": "Designed & Developed with love by",
   "演示站点": "Demo Site",
-  "页面未找到，请检查您的浏览器地址是否正确": "Page not found, please check if your browser address is correct"
+  "页面未找到，请检查您的浏览器地址是否正确": "Page not found, please check if your browser address is correct",
+  "New API项目仓库地址：": "New API project repository address: ",
+  "NewAPI © {{currentYear}} QuantumNous | 基于 One API v0.5.4 © 2023 JustSong。": "NewAPI © {{currentYear}} QuantumNous | Based on One API v0.5.4 © 2023 JustSong.",
+  "本项目根据MIT许可证授权，需在遵守Apache-2.0协议的前提下使用。": "This project is licensed under the MIT License and must be used in compliance with the Apache-2.0 License.",
+  "管理员暂时未设置任何关于内容": "The administrator has not set any custom About content yet"
 }

web/src/pages/About/index.js

@@ -1,11 +1,16 @@
 import React, { useEffect, useState } from 'react';
 import { API, showError } from '../../helpers';
 import { marked } from 'marked';
-import { Layout } from '@douyinfe/semi-ui';
+import { Empty } from '@douyinfe/semi-ui';
+import { IllustrationConstruction, IllustrationConstructionDark } from '@douyinfe/semi-illustrations';
+import { Link } from 'react-router-dom';
+import { useTranslation } from 'react-i18next';
 
 const About = () => {
+  const { t } = useTranslation();
   const [about, setAbout] = useState('');
   const [aboutLoaded, setAboutLoaded] = useState(false);
+  const currentYear = new Date().getFullYear();
 
   const displayAbout = async () => {
     setAbout(localStorage.getItem('about') || '');
@@ -20,7 +25,7 @@ const About = () => {
       localStorage.setItem('about', aboutContent);
     } else {
       showError(message);
-      setAbout('加载关于内容失败...');
+      setAbout(t('加载关于内容失败...'));
     }
     setAboutLoaded(true);
   };
@@ -29,30 +34,39 @@ const About = () => {
     displayAbout().then();
   }, []);
 
+  const emptyStyle = {
+    padding: '24px'
+  };
+
+  const customDescription = (
+    <div style={{ textAlign: 'center' }}>
+      <p>{t('可在设置页面设置关于内容，支持 HTML & Markdown')}</p>
+      {t('New API项目仓库地址：')}
+      <Link to='https://github.com/QuantumNous/new-api' target="_blank">
+        https://github.com/QuantumNous/new-api
+      </Link>
+      <p>
+        {t('NewAPI © {{currentYear}} QuantumNous | 基于 One API v0.5.4 © 2023 JustSong。', { currentYear })}
+      </p>
+      <p>
+        {t('本项目根据MIT许可证授权，需在遵守Apache-2.0协议的前提下使用。')}
+      </p>
+    </div>
+  );
+
   return (
     <>
       {aboutLoaded && about === '' ? (
-        <>
-          <Layout>
-            <Layout.Header>
-              <h3>关于</h3>
-            </Layout.Header>
-            <Layout.Content>
-              <p>可在设置页面设置关于内容，支持 HTML & Markdown</p>
-              New-API项目仓库地址：
-              <a href='https://github.com/Calcium-Ion/new-api'>
-                https://github.com/Calcium-Ion/new-api
-              </a>
-              <p>
-                NewAPI © 2023 CalciumIon | 基于 One API v0.5.4 © 2023
-                JustSong。
-              </p>
-              <p>
-                本项目根据MIT许可证授权，需在遵守Apache-2.0协议的前提下使用。
-              </p>
-            </Layout.Content>
-          </Layout>
-        </>
+        <div className="flex justify-center items-center h-screen p-8">
+          <Empty
+            image={<IllustrationConstruction style={{ width: 150, height: 150 }} />}
+            darkModeImage={<IllustrationConstructionDark style={{ width: 150, height: 150 }} />}
+            description={t('管理员暂时未设置任何关于内容')}
+            style={emptyStyle}
+          >
+            {customDescription}
+          </Empty>
+        </div>
       ) : (
         <>
           {about.startsWith('https://') ? (