feat: Enhance i18n support in Home component and update translations

- Integrated translation functions in the Home component to support dynamic localization for various UI elements, improving accessibility for users in different languages.
- Added new translation keys for "Telegram authentication", "Linux DO authentication", and "License" in the English locale file, expanding the localization coverage.
- Updated existing text elements to utilize translation functions, ensuring consistency in language display across the application.

web/src/i18n/locales/en.json

@@ -1209,5 +1209,8 @@
   "首页内容已更新": "Home page content updated",
   "关于已更新": "About updated",
   "模型测试": "model test",
-  "当前未开启Midjourney回调，部分项目可能无法获得绘图结果，可在运营设置中开启。": "Current Midjourney callback is not enabled, some projects may not be able to obtain drawing results, which can be enabled in the operation settings."
+  "当前未开启Midjourney回调，部分项目可能无法获得绘图结果，可在运营设置中开启。": "Current Midjourney callback is not enabled, some projects may not be able to obtain drawing results, which can be enabled in the operation settings.",
+  "Telegram 身份验证": "Telegram authentication",
+  "Linux DO 身份验证": "Linux DO authentication",
+  "协议": "License"
 }

web/src/pages/Home/index.js

@@ -4,8 +4,10 @@ import { API, showError, showNotice, timestamp2string } from '../../helpers';
 import { StatusContext } from '../../context/Status';
 import { marked } from 'marked';
 import { StyleContext } from '../../context/Style/index.js';
+import { useTranslation } from 'react-i18next';
 
 const Home = () => {
+  const { t } = useTranslation();
   const [statusState] = useContext(StatusContext);
   const [homePageContentLoaded, setHomePageContentLoaded] = useState(false);
   const [homePageContent, setHomePageContent] = useState('');
@@ -60,13 +62,13 @@ const Home = () => {
           <Card
             bordered={false}
             headerLine={false}
-            title='系统状况'
+            title={t('系统状况')}
             bodyStyle={{ padding: '10px 20px' }}
           >
             <Row gutter={16}>
               <Col span={12}>
                 <Card
-                  title='系统信息'
+                  title={t('系统信息')}
                   headerExtraContent={
                     <span
                       style={{
@@ -74,19 +76,19 @@ const Home = () => {
                         color: 'var(--semi-color-text-1)',
                       }}
                     >
-                      系统信息总览
+                      {t('系统信息总览')}
                     </span>
                   }
                 >
-                  <p>名称：{statusState?.status?.system_name}</p>
+                  <p>{t('名称')}：{statusState?.status?.system_name}</p>
                   <p>
-                    版本：
+                    {t('版本')}：
                     {statusState?.status?.version
                       ? statusState?.status?.version
                       : 'unknown'}
                   </p>
                   <p>
-                    源码：
+                    {t('源码')}：
                     <a
                       href='https://github.com/Calcium-Ion/new-api'
                       target='_blank'
@@ -96,7 +98,7 @@ const Home = () => {
                     </a>
                   </p>
                   <p>
-                    协议：
+                    {t('协议')}：
                     <a
                       href='https://www.apache.org/licenses/LICENSE-2.0'
                       target='_blank'
@@ -105,12 +107,12 @@ const Home = () => {
                       Apache-2.0 License
                     </a>
                   </p>
-                  <p>启动时间：{getStartTimeString()}</p>
+                  <p>{t('启动时间')}：{getStartTimeString()}</p>
                 </Card>
               </Col>
               <Col span={12}>
                 <Card
-                  title='系统配置'
+                  title={t('系统配置')}
                   headerExtraContent={
                     <span
                       style={{
@@ -118,45 +120,45 @@ const Home = () => {
                         color: 'var(--semi-color-text-1)',
                       }}
                     >
-                      系统配置总览
+                      {t('系统配置总览')}
                     </span>
                   }
                 >
                   <p>
-                    邮箱验证：
+                    {t('邮箱验证')}：
                     {statusState?.status?.email_verification === true
-                      ? '已启用'
-                      : '未启用'}
+                      ? t('已启用')
+                      : t('未启用')}
                   </p>
                   <p>
-                    GitHub 身份验证：
+                    {t('GitHub 身份验证')}：
                     {statusState?.status?.github_oauth === true
-                      ? '已启用'
-                      : '未启用'}
+                      ? t('已启用')
+                      : t('未启用')}
                   </p>
                   <p>
-                    微信身份验证：
+                    {t('微信身份验证')}：
                     {statusState?.status?.wechat_login === true
-                      ? '已启用'
-                      : '未启用'}
+                      ? t('已启用')
+                      : t('未启用')}
                   </p>
                   <p>
-                    Turnstile 用户校验：
+                    {t('Turnstile 用户校验')}：
                     {statusState?.status?.turnstile_check === true
-                      ? '已启用'
-                      : '未启用'}
+                      ? t('已启用')
+                      : t('未启用')}
                   </p>
                   <p>
-                    Telegram 身份验证：
+                    {t('Telegram 身份验证')}：
                     {statusState?.status?.telegram_oauth === true
-                      ? '已启用'
-                      : '未启用'}
+                      ? t('已启用')
+                      : t('未启用')}
                   </p>
                   <p>
-                    Linux DO 身份验证：
+                    {t('Linux DO 身份验证')}：
                     {statusState?.status?.linuxdo_oauth === true
-                      ? '已启用'
-                      : '未启用'}
+                      ? t('已启用')
+                      : t('未启用')}
                   </p>
                 </Card>
               </Col>