feat: install page support i18n

ui/src/i18n/init.ts

@@ -21,7 +21,20 @@ import { initReactI18next } from 'react-i18next';
 
 import i18next from 'i18next';
 import en_US from '@i18n/en_US.yaml';
-// import zh_CN from '@i18n/zh_CN.yaml';
+import es_ES from '@i18n/es_ES.yaml';
+import pt_BR from '@i18n/pt_BR.yaml';
+import pt_PT from '@i18n/pt_PT.yaml';
+import de_DE from '@i18n/de_DE.yaml';
+import fr_FR from '@i18n/fr_FR.yaml';
+import ja_JP from '@i18n/ja_JP.yaml';
+import it_IT from '@i18n/it_IT.yaml';
+import ru_RU from '@i18n/ru_RU.yaml';
+import zh_CN from '@i18n/zh_CN.yaml';
+import zh_TW from '@i18n/zh_TW.yaml';
+import ko_KR from '@i18n/ko_KR.yaml';
+import vi_VN from '@i18n/vi_VN.yaml';
+import sk_SK from '@i18n/sk_SK.yaml';
+import fa_IR from '@i18n/fa_IR.yaml';
 
 import { DEFAULT_LANG, LANG_RESOURCE_STORAGE_KEY } from '@/common/constants';
 import Storage from '@/utils/storage';
@@ -34,9 +47,48 @@ const initResources = {
   en_US: {
     translation: en_US.ui,
   },
-  // zh_CN: {
-  //   translation: zh_CN.ui,
-  // },
+  es_ES: {
+    translation: es_ES.ui,
+  },
+  pt_BR: {
+    translation: pt_BR.ui,
+  },
+  pt_PT: {
+    translation: pt_PT.ui,
+  },
+  de_DE: {
+    translation: de_DE.ui,
+  },
+  fr_FR: {
+    translation: fr_FR.ui,
+  },
+  ja_JP: {
+    translation: ja_JP.ui,
+  },
+  it_IT: {
+    translation: it_IT.ui,
+  },
+  ru_RU: {
+    translation: ru_RU.ui,
+  },
+  zh_CN: {
+    translation: zh_CN.ui,
+  },
+  zh_TW: {
+    translation: zh_TW.ui,
+  },
+  ko_KR: {
+    translation: ko_KR.ui,
+  },
+  vi_VN: {
+    translation: vi_VN.ui,
+  },
+  sk_SK: {
+    translation: sk_SK.ui,
+  },
+  fa_IR: {
+    translation: fa_IR.ui,
+  },
 };
 
 const storageLang = Storage.get(LANG_RESOURCE_STORAGE_KEY);

ui/src/pages/Install/components/FirstStep/index.tsx

@@ -32,7 +32,7 @@ interface Props {
   visible: boolean;
 }
 const Index: FC<Props> = ({ visible, data, changeCallback, nextCallback }) => {
-  const { t } = useTranslation('translation', { keyPrefix: 'install' });
+  const { t, i18n } = useTranslation('translation', { keyPrefix: 'install' });
 
   const [langs, setLangs] = useState<LangsType[]>();
 
@@ -65,6 +65,7 @@ const Index: FC<Props> = ({ visible, data, changeCallback, nextCallback }) => {
           value={data.value}
           isInvalid={data.isInvalid}
           onChange={(e) => {
+            i18n.changeLanguage(e.target.value);
             changeCallback({
               lang: {
                 value: e.target.value,

ui/src/pages/Install/index.tsx

@@ -47,7 +47,7 @@ import {
 } from './components';
 
 const Index: FC = () => {
-  const { t } = useTranslation('translation', { keyPrefix: 'install' });
+  const { t, i18n } = useTranslation('translation', { keyPrefix: 'install' });
   const [step, setStep] = useState(1);
   const [loading, setLoading] = useState(true);
   const [errorData, setErrorData] = useState<{ [propName: string]: any }>({
@@ -293,6 +293,7 @@ const Index: FC = () => {
 
   useEffect(() => {
     configYmlCheck();
+    i18n.changeLanguage(Storage.get(CURRENT_LANG_STORAGE_KEY));
   }, []);
 
   if (loading) {