[i18n] i18n all code

WeiJiLab · Oct 30, 2024 · 96465bc · 96465bc
1 parent 6ead6fc
commit 96465bc
Show file tree

Hide file tree

Showing 27 changed files with 604 additions and 232 deletions.
diff --git a/src/api/http-response-handler.ts b/src/api/http-response-handler.ts
@@ -1,5 +1,6 @@
 import { AxiosResponse } from 'axios';
 import toast from 'react-hot-toast';
+import i18next from '../config/I18nConfigs'
 
 export interface HttpResponseHandler {
   handleSuccess(response: AxiosResponse): AxiosResponse | Promise<AxiosResponse>;
@@ -25,7 +26,7 @@ export const handleError = (err: any): Promise<any> => {
   let errorStatement = '';
   if (!err.response) {
     console.log(`Network error: ${err}`);
-    errorStatement = '网络错误：' + err.message;
+    errorStatement = i18next.t('api.network_error') + '：' + err.message;
   } else {
     errorStatement = handleErrorResponse(err);
   }
@@ -36,13 +37,13 @@ export const handleError = (err: any): Promise<any> => {
 };
 
 const ErrorResponseMapper = {
-  400: '检查请求参数, ',
-  401: '访问失败，用户未登录',
-  403: '访问失败, ',
-  404: '请求资源不存在, ',
-  409: '该资源冲突, ',
-  422: '请求格式正确，但由于语义错误而无法遵循, ',
-  500: '当前服务不可用，请稍后再试',
+  400: i18next.t('api.400_error'),
+  401: i18next.t('api.401_error'),
+  403: i18next.t('api.403_error'),
+  404: i18next.t('api.404_error'),
+  409: i18next.t('api.409_error'),
+  422: i18next.t('api.422_error'),
+  500: i18next.t('api.500_error'),
 };
 
 const handleErrorResponse = (err: any): string => {

diff --git a/src/common/utils/TimeUtils.ts b/src/common/utils/TimeUtils.ts
@@ -14,6 +14,6 @@ export class TimeUtils {
     if (ObjectUtils.isEmpty(data)) {
       return null;
     }
-    return dayjs(data).tz('Asia/ShangHai').locale('zh-cn').fromNow();
+    return dayjs(data).tz('Asia/ShangHai').locale('en-us').fromNow();
   };
 }
diff --git a/src/components/business/card/TaskItemCard.tsx b/src/components/business/card/TaskItemCard.tsx
@@ -15,22 +15,24 @@ import {
   faTimesCircle,
 } from '@fortawesome/free-solid-svg-icons';
 import { TimeUtils } from '../../../common/utils/TimeUtils';
+import { useTranslation } from 'react-i18next';
 
 interface PropsTypes {
   task: any;
 }
 
 export const TaskItemCard: React.FC<PropsTypes> = ({ task }) => {
+  const { t } = useTranslation();
   const renderTime = () => {
     const timeDuring =
       TimeUtils.dateFromNow(task.startTime) + '-' + TimeUtils.dateFromNow(task.endTime);
     switch (task.status) {
       case 'READY':
-        return <span style={{ fontSize: '0.77em' }}>未开始</span>;
+        return <span style={{ fontSize: '0.77em' }}>{t('card.task.not_started')}</span>;
       case 'RUNNING':
         return (
           <span style={{ fontSize: '0.77em' }}>
-            {TimeUtils.dateFromNow(task.startTime) + '-未结束'}
+            {TimeUtils.dateFromNow(task.startTime) + t('card.task.running')}
           </span>
         );
       case 'DONE':

diff --git a/src/components/business/charts/BaseRingPieCharts.tsx b/src/components/business/charts/BaseRingPieCharts.tsx
@@ -1,6 +1,7 @@
 import React from 'react';
 import { Pie } from '@ant-design/plots';
 import { Card } from 'antd';
+import { useTranslation } from 'react-i18next';
 
 interface PropsTypes {
   title: string;
@@ -11,6 +12,9 @@ interface PropsTypes {
 }
 
 export const BaseRingPieCharts: React.FC<PropsTypes> = ({ title, date }) => {
+
+  const { t } = useTranslation();
+
   const config = {
     appendPadding: 1,
     data: date,
@@ -43,7 +47,7 @@ export const BaseRingPieCharts: React.FC<PropsTypes> = ({ title, date }) => {
           textOverflow: 'ellipsis',
           fontWeight: 'bold',
         },
-        content: '总计',
+        content: t('charts.total'),
       },
       content: {
         style: {

diff --git a/src/components/business/header/Header.tsx b/src/components/business/header/Header.tsx
@@ -11,6 +11,7 @@ import { JwtUtils, getToken } from '../../../common';
 import { useAppDispatch, useAppSelector } from '../../../hooks';
 import { menuSlice } from '../../../redux/menu/slice';
 import { logOut } from '../../../redux/auth/auth-slice';
+import { useTranslation } from 'react-i18next';
 
 export const Header: React.FC = () => {
   const navigate = useNavigate();
@@ -21,6 +22,7 @@ export const Header: React.FC = () => {
   const collapsed = useAppSelector((state) => state.menu.collapsed);
 
   const [username, setUsername] = useState<string>('');
+  const { t } = useTranslation();
 
   useEffect(() => {
     if (jwtToken) {
@@ -73,15 +75,15 @@ export const Header: React.FC = () => {
         {jwtToken ? (
           <Button.Group className={styles['button-group']}>
             <div className={styles.text}>
-              {'欢迎'}
+              {t('header.welcome')}
               <Typography.Text strong>{username}</Typography.Text>
             </div>
-            <Button onClick={onLogout}>{'注销'}</Button>
+            <Button onClick={onLogout}>{t('header.logout')}</Button>
           </Button.Group>
         ) : (
           <Button.Group className={styles['button-group']}>
-            <Button onClick={() => navigate('/register')}>{'注册'}</Button>
-            <Button onClick={() => navigate('/login')}>{'登录'}</Button>
+            <Button onClick={() => navigate('/register')}>{t('header.register')}</Button>
+            <Button onClick={() => navigate('/login')}>{t('header.login')}</Button>
           </Button.Group>
         )}
         <>

diff --git a/src/components/business/header/toggle-theme-button/ToggleThemeButton.tsx b/src/components/business/header/toggle-theme-button/ToggleThemeButton.tsx
@@ -44,8 +44,8 @@ export const ToggleThemeButton = () => {
       className={styles.buttonContainer}
       onClick={onClick}
     >
-      <img src={SunIconSrc} width='24' alt='太阳' />
-      <img src={MoonIconSrc} width='24' alt='月亮' />
+      <img src={SunIconSrc} width='24' alt='sun' />
+      <img src={MoonIconSrc} width='24' alt='moon' />
       <div
         style={
           themeMode === 'dark'

diff --git a/src/components/business/left-menu/MenuItems.tsx b/src/components/business/left-menu/MenuItems.tsx
@@ -1,6 +1,7 @@
 import React from 'react';
 
 import { MenuProps } from 'antd';
+import i18next from '../../../config/I18nConfigs'
 
 import {
   faFileSignature,
@@ -34,8 +35,8 @@ function getItem(
 }
 
 export const MENU_ITEMS: MenuItems[] = [
-  getItem('首页', 'HOME', faHome),
-  getItem('应用', 'PROJECT_LIST', faHome),
+  getItem(i18next.t('menu.home'), 'HOME', faHome),
+  getItem(i18next.t('menu.application'), 'PROJECT_LIST', faHome),
 
   // [
   // getItem('基本信息/KPI', 'PROJECT_LIST', faListAlt),
@@ -49,16 +50,16 @@ export const MENU_ITEMS: MenuItems[] = [
   //   getItem('渗透测试漏洞列表', '', faListAlt),
   // ]),
   // ]
-  getItem('安全服务', 'SECURITY_TOOLS', faShieldAlt, [
-    getItem('订阅license申请', 'APP_INFO', faListAlt),
+  getItem(i18next.t('menu.security_services'), 'SECURITY_TOOLS', faShieldAlt, [
+    getItem(i18next.t('menu.application_information'), 'APP_INFO', faListAlt),
   ]),
-  getItem('安全规范', 'USE_CASES', faFileSignature, [
-    getItem('安全开发流程', 'Security Development Process', faListAlt),
-    getItem('架构安全规范', 'Architecture Security Specifications', faListAlt),
-    getItem('数据安全规范', 'Data Security Specifications', faListAlt),
+  getItem(i18next.t('menu.safety_regulations'), 'USE_CASES', faFileSignature, [
+    getItem(i18next.t('menu.secure_development_process'), 'Security Development Process', faListAlt),
+    getItem(i18next.t('menu.architecture_security_specifications'), 'Architecture Security Specifications', faListAlt),
+    getItem(i18next.t('menu.data_security_regulations'), 'Data Security Specifications', faListAlt),
   ]),
-  getItem('KPI总览', '', faHeartCircleMinus),
-  getItem('漏洞扫描', 'SECURITY_SCAN', faShieldVirus),
+  getItem(i18next.t('menu.kpi_overview'), '', faHeartCircleMinus),
+  getItem(i18next.t('menu.vulnerability_scanning'), 'SECURITY_SCAN', faShieldVirus),
 ];
 
 export const MENU_NAVIGATE = new Map<string, string>([

diff --git a/src/components/layouts/authLayout/AuthLayout.tsx b/src/components/layouts/authLayout/AuthLayout.tsx
@@ -5,6 +5,7 @@ import { Link, Outlet } from 'react-router-dom';
 import { CaretDownOutlined } from '@ant-design/icons';
 import { Layout, Menu, Dropdown, Button } from 'antd';
 import { Footer } from '../../index';
+import { useTranslation } from 'react-i18next';
 
 const { Header, Content } = Layout;
 
@@ -13,6 +14,8 @@ interface PropsTypes {
 }
 
 export const AuthLayout: React.FC<PropsTypes> = (props) => {
+   const { t } = useTranslation();
+
   const menu = (
     <Menu>
       <Menu.Item>中文</Menu.Item>
@@ -28,7 +31,7 @@ export const AuthLayout: React.FC<PropsTypes> = (props) => {
             <Dropdown overlay={menu}>
               <Button>
                 {' '}
-                选择语言 <CaretDownOutlined />
+                {t('layout.select_language')} <CaretDownOutlined />
               </Button>
             </Dropdown>
           </div>
@@ -38,10 +41,10 @@ export const AuthLayout: React.FC<PropsTypes> = (props) => {
             <div className={styles.contentHeader}>
               <Link to='/'>
                 <img alt='logo' className={styles.logo} src={logo} />
-                <span className={styles.title}>SCP安全服务平台</span>
+                <span className={styles.title}>{t('layout.scp_security_service_platform')}</span>
               </Link>
             </div>
-            <div className={styles.desc}>SCP安全服务平台， 带你走进安全的世界 !</div>
+            <div className={styles.desc}>{t('layout.scp_security_service_platform_desc')}</div>
             {props.children}
           </div>
         </Content>

diff --git a/src/config/I18nConfigs.ts b/src/config/I18nConfigs.ts
@@ -17,7 +17,7 @@ i18n
   .use(initReactI18next) // passes i18n down to react-i18next
   .init({
     resources,
-    lng: 'zh',
+    lng: 'en',
     // keySeparator: false, // we do not use keys in form messages.welcome
     // header.slogan
     interpolation: {