feat: i18n support

web/default/src/pages/About/index.js

@@ -1,9 +1,11 @@
 import React, { useEffect, useState } from 'react';
-import { Card, Header, Segment } from 'semantic-ui-react';
+import { useTranslation } from 'react-i18next';
+import { Card } from 'semantic-ui-react';
 import { API, showError } from '../../helpers';
 import { marked } from 'marked';
 
 const About = () => {
+  const { t } = useTranslation();
   const [about, setAbout] = useState('');
   const [aboutLoaded, setAboutLoaded] = useState(false);
 
@@ -20,7 +22,7 @@ const About = () => {
       localStorage.setItem('about', aboutContent);
     } else {
       showError(message);
-      setAbout('加载关于内容失败...');
+      setAbout(t('about.loading_failed'));
     }
     setAboutLoaded(true);
   };
@@ -28,15 +30,16 @@ const About = () => {
   useEffect(() => {
     displayAbout().then();
   }, []);
+
   return (
     <>
       {aboutLoaded && about === '' ? (
         <div className='dashboard-container'>
           <Card fluid className='chart-card'>
             <Card.Content>
-              <Card.Header className='header'>关于系统</Card.Header>
-              <p>可在设置页面设置关于内容，支持 HTML & Markdown</p>
-              项目仓库地址：
+              <Card.Header className='header'>{t('about.title')}</Card.Header>
+              <p>{t('about.description')}</p>
+              {t('about.repository')}
               <a href='https://github.com/songquanpeng/one-api'>
                 https://github.com/songquanpeng/one-api
               </a>