♻️Refactor: About Page

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://') ? (