From e95aa424ecc78fe858badb29ccb04604158def05 Mon Sep 17 00:00:00 2001
From: elliotxx <951376975@qq.com>
Date: Thu, 30 May 2024 19:47:38 +0800
Subject: [PATCH] refactor(ui): easier to add new language for i18n (#476)

## What type of PR is this?

/kind refactor

## What this PR does / why we need it:

Easier to add new language for i18n of Web UI.

---------

Co-authored-by: hai-tian <tianhai_th@163.com>
---
 ui/src/components/layout/index.tsx | 8 ++------
 ui/src/index.tsx                   | 8 +++++++-
 ui/src/utils/constants.ts          | 6 ++++++
 3 files changed, 15 insertions(+), 7 deletions(-)

diff --git a/ui/src/components/layout/index.tsx b/ui/src/components/layout/index.tsx
index 67d6a4b6..81af826d 100644
--- a/ui/src/components/layout/index.tsx
+++ b/ui/src/components/layout/index.tsx
@@ -17,9 +17,9 @@ import { useTranslation } from 'react-i18next'
 import showPng from '@/assets/show.png'
 import logo from '@/assets/img/logo.svg'
 import languageSvg from '@/assets/translate_language.svg'
+import { Languages, LanguagesMap } from '@/utils/constants'
 
 import styles from './style.module.less'
-import { Languages } from '@/utils/constants'
 
 type MenuItem = Required<MenuProps>['items'][number]
 
@@ -184,11 +184,7 @@ const LayoutPage = () => {
               >
                 <img src={languageSvg} />
                 <span className={styles.help_text}>
-                  {i18n.language === 'zh'
-                    ? '中文'
-                    : i18n.language === 'de'
-                      ? 'Deutsch'
-                      : 'English'}
+                  {LanguagesMap?.[i18n.language || 'en']}
                 </span>
                 <CaretDownOutlined style={{ color: '#646566' }} />
               </a>
diff --git a/ui/src/index.tsx b/ui/src/index.tsx
index 995144a7..52ccb535 100644
--- a/ui/src/index.tsx
+++ b/ui/src/index.tsx
@@ -28,10 +28,16 @@ function App() {
     setLang(i18n.language)
   }, [i18n.language])
 
+  const langMap = {
+    en: enUS,
+    zh: zhCN,
+    de: deDE,
+  }
+
   return (
     <Provider store={store}>
       <ConfigProvider
-        locale={lang === 'en' ? enUS : lang === 'de' ? deDE : zhCN}
+        locale={langMap?.[lang || 'en']}
         theme={{
           token: {
             colorPrimary: '#2F54EB',
diff --git a/ui/src/utils/constants.ts b/ui/src/utils/constants.ts
index 8cf259cf..12713409 100644
--- a/ui/src/utils/constants.ts
+++ b/ui/src/utils/constants.ts
@@ -114,3 +114,9 @@ export const Languages = [
     value: 'de',
   },
 ]
+
+export const LanguagesMap = {
+  zh: '简体中文',
+  en: 'English',
+  de: 'Deutsch',
+}