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 <[email protected]>
KusionStack · May 30, 2024 · e95aa42 · e95aa42
1 parent a11bd72
commit e95aa42
Show file tree

Hide file tree

Showing 3 changed files with 15 additions and 7 deletions.
diff --git 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
@@ -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
@@ -114,3 +114,9 @@ export const Languages = [
     value: 'de',
   },
 ]
+
+export const LanguagesMap = {
+  zh: '简体中文',
+  en: 'English',
+  de: 'Deutsch',
+}