refactor: improve i18n in dbprovider for better developer experience

frontend/providers/dbprovider/.gitignore

@@ -35,7 +35,7 @@ yarn-error.log*
 *.tsbuildinfo
 next-env.d.ts
 /public/trainData/
-/.vscode/
+/local/
 platform.json
 .yalc/
 yalc.lock

frontend/providers/dbprovider/.vscode/settings.json

@@ -0,0 +1,19 @@
+{
+  "i18n-ally.localesPaths": [
+    "public/locales"
+  ],
+  "i18n-ally.enabledParsers": [
+    "json",
+    "yaml",
+    "js",
+    "ts"
+  ],
+  "i18n-ally.keystyle": "nested",
+  "i18n-ally.sortKeys": true,
+  "i18n-ally.keepFulfilled": false,
+  "i18n-ally.sourceLanguage": "zh",
+  "i18n-ally.displayLanguage": "zh",
+  // "i18n-ally.namespace": true,
+  "i18n-ally.pathMatcher": "{locale}/{namespaces}.json",
+  "i18n-ally.extract.targetPickingStrategy": "most-similar-by-key"
+}

frontend/providers/dbprovider/next-i18next.config.js

@@ -8,5 +8,6 @@ module.exports = {
     defaultLocale: 'zh',
     locales: ['en', 'zh'],
     localeDetection: false
-  }
-};
+  },
+  reloadOnPrerender: process.env.NODE_ENV === 'development'
+}

frontend/providers/dbprovider/src/components/DBStatusTag/index.tsx

@@ -14,6 +14,7 @@ import type { DBConditionItemType, DBStatusMapType } from '@/types/db';
 import MyIcon from '../Icon';
 import { useTranslation } from 'next-i18next';
 import { formatPodTime } from '@/utils/tools';
+import { I18nCommonKey } from '@/types/i18next';
 
 const DBStatusTag = ({
   conditions = [],
@@ -26,6 +27,7 @@ const DBStatusTag = ({
 }) => {
   const { t } = useTranslation();
   const { isOpen, onOpen, onClose } = useDisclosure();
+  const label = t(status.label as I18nCommonKey);
 
   return (
     <>
@@ -45,15 +47,15 @@ const DBStatusTag = ({
       >
         <Box w={'6px'} h={'6px'} borderRadius={'10px'} backgroundColor={status.dotColor}></Box>
         <Box ml={2} flex={1}>
-          {t(status.label)}
+          {label}
         </Box>
         <MyIcon ml={3} w={'16px'} name={'statusDetail'} cursor={'pointer'} onClick={onOpen} />
       </Flex>
       <Modal isOpen={isOpen} onClose={onClose} lockFocusAcrossFrames={false}>
         <ModalOverlay />
         <ModalContent minW={'520px'}>
           <ModalHeader display={'flex'} alignItems={'center'}>
-            <Box flex={1}>{t(status.label)}</Box>
+            <Box flex={1}>{label}</Box>
             <ModalCloseButton top={'10px'} right={'10px'} />
           </ModalHeader>
           <ModalBody>

frontend/providers/dbprovider/src/components/FileSelect/index.tsx

@@ -50,7 +50,7 @@ const FileSelect = ({ fileExtension, setFiles, multiple = false, files, ...props
     >
       <MyIcon name="upload" width={'24px'} color={'#219BF4'}></MyIcon>
       <Text mt={'8px'} color={'grayModern.500'} fontSize={'base'} fontWeight={'bold'}>
-        {t('Upload dump file')}
+        {t('upload_dump_file')}
       </Text>
       <Box
         w={'auto'}
@@ -93,7 +93,7 @@ const FileSelect = ({ fileExtension, setFiles, multiple = false, files, ...props
             if (e.target.files.length > 10) {
               return toast({
                 status: 'warning',
-                title: t('Select a maximum of 10 files')
+                title: t('select_a_maximum_of_10_files')
               });
             }
             onSelectFile(Array.from(e.target.files));

frontend/providers/dbprovider/src/components/PriceBox/index.tsx

@@ -1,4 +1,5 @@
 import { SOURCE_PRICE } from '@/store/static';
+import { I18nCommonKey } from '@/types/i18next';
 import { Box, Flex, useTheme, Text } from '@chakra-ui/react';
 import { SealosCoin } from '@sealos/ui';
 import { useTranslation } from 'next-i18next';
@@ -22,7 +23,11 @@ const PriceBox = ({
 }) => {
   const theme = useTheme();
   const { t } = useTranslation();
-  const priceList = useMemo(() => {
+  const priceList: {
+    label: I18nCommonKey;
+    color: string;
+    value: string;
+  }[] = useMemo(() => {
     let cp = [0, 0];
     let mp = [0, 0];
     let sp = [0, 0];
@@ -55,15 +60,15 @@ const PriceBox = ({
       },
       { label: 'Memory', color: '#36ADEF', value: podScale(mp) },
       { label: 'Storage', color: '#8172D8', value: podScale(sp) },
-      { label: 'Total Price', color: '#485058', value: podScale(tp) }
+      { label: 'total_price', color: '#485058', value: podScale(tp) }
     ];
   }, [components]);
 
   return (
     <Box bg={'#FFF'} borderRadius={'md'} border={theme.borders.base}>
       <Flex py={3} px={'20px'} borderBottom={theme.borders.base} gap={'8px'}>
         <Text color={'grayModern.900'} fontWeight={500}>
-          {t('Anticipated Price')}
+          {t('anticipated_price')}
         </Text>
         <Text color={'grayModern.500'}> ({t('Perday')})</Text>
       </Flex>

frontend/providers/dbprovider/src/components/Textarea/TagTextarea.tsx

@@ -84,7 +84,7 @@ const TagTextarea = ({ defaultValues, onUpdate, ...props }: Props) => {
           </Tag>
         ))}
         <Input
-          placeholder={t('Enter Save') || ''}
+          placeholder={t('enter_save') || ''}
           ref={InputRef}
           variant={'unstyled'}
           display={'inline-block'}

frontend/providers/dbprovider/src/components/Tip/index.tsx

@@ -1,9 +1,10 @@
 import React, { useMemo } from 'react';
 import { BoxProps, Flex, Box } from '@chakra-ui/react';
 import { useTranslation } from 'next-i18next';
+import { I18nCommonKey } from '@/types/i18next';
 
 interface Props extends BoxProps {
-  text: string;
+  text: I18nCommonKey;
   icon?: JSX.Element;
   theme?: 'blue';
   size?: 'sm' | 'md' | 'lg';

frontend/providers/dbprovider/src/constants/backup.ts

@@ -1,4 +1,5 @@
 import { BackupStatusMapType } from '@/types/db';
+import { I18nCommonKey } from '@/types/i18next';
 
 export enum BackupStatusEnum {
   Completed = 'Completed',
@@ -11,27 +12,27 @@ export enum BackupStatusEnum {
 
 export const backupStatusMap: Record<`${BackupStatusEnum}`, BackupStatusMapType> = {
   [BackupStatusEnum.Completed]: {
-    label: 'Backup Completed',
+    label: 'backup_completed',
     value: BackupStatusEnum.Completed,
     color: '#039855'
   },
   [BackupStatusEnum.InProgress]: {
-    label: 'Backup Processing',
+    label: 'backup_processing',
     value: BackupStatusEnum.InProgress,
     color: '#667085'
   },
   [BackupStatusEnum.Failed]: {
-    label: 'Backup Failed',
+    label: 'backup_failed',
     value: BackupStatusEnum.Failed,
     color: '#F04438'
   },
   [BackupStatusEnum.Running]: {
-    label: 'Backup Running',
+    label: 'backup_running',
     value: BackupStatusEnum.Running,
     color: '#667085'
   },
   [BackupStatusEnum.Deleting]: {
-    label: 'Backup Deleting',
+    label: 'backup_deleting',
     value: BackupStatusEnum.Deleting,
     color: '#DC6803'
   },
@@ -53,7 +54,7 @@ export enum BackupTypeEnum {
   'UnKnow' = 'UnKnow'
 }
 
-export const backupTypeMap: Record<`${BackupTypeEnum}`, { label: string }> = {
+export const backupTypeMap: Record<`${BackupTypeEnum}`, { label: I18nCommonKey }> = {
   [BackupTypeEnum.manual]: {
     label: 'Manual'
   },

frontend/providers/dbprovider/src/constants/editApp.ts

@@ -1,20 +1,24 @@
-export const editModeMap = (isEdit: boolean) => {
+import { I18nCommonKey } from '@/types/i18next';
+
+export const editModeMap: (isEdit: boolean) => {
+  [key: string]: I18nCommonKey;
+} = (isEdit: boolean) => {
   if (isEdit) {
     return {
-      title: 'Update DataBase',
+      title: 'update_database',
       applyBtnText: 'Update',
-      applyMessage: 'Confirm Update DataBase?',
-      applySuccess: 'Update Successful',
-      applyError: 'Update Failed'
+      applyMessage: 'confirm_update_database',
+      applySuccess: 'update_successful',
+      applyError: 'update_failed'
     };
   }
 
   return {
-    title: 'Deploy DataBase',
+    title: 'deploy_database',
     applyBtnText: 'Deploy',
-    applyMessage: 'Confirm Deploy DataBase?',
-    applySuccess: 'Deployment Successful',
-    applyError: 'Deployment Failed'
+    applyMessage: 'confirm_deploy_database',
+    applySuccess: 'deployment_successful',
+    applyError: 'deployment_failed'
   };
 };
 

frontend/providers/dbprovider/src/hooks/useConfirm.tsx

@@ -10,15 +10,16 @@ import {
   Button
 } from '@chakra-ui/react';
 import { useTranslation } from 'next-i18next';
+import { I18nCommonKey } from '@/types/i18next';
 
 export const useConfirm = ({
   title = 'Prompt',
   content,
   confirmText = 'Confirm'
 }: {
-  title?: string;
+  title?: I18nCommonKey;
   content: string;
-  confirmText?: string;
+  confirmText?: I18nCommonKey;
 }) => {
   const { isOpen, onOpen, onClose } = useDisclosure();
   const { t } = useTranslation();

frontend/providers/dbprovider/src/pages/_app.tsx

@@ -44,8 +44,8 @@ function App({ Component, pageProps }: AppProps) {
   const { Loading } = useLoading();
   const [refresh, setRefresh] = useState(false);
   const { openConfirm, ConfirmChild } = useConfirm({
-    title: '跳转提示',
-    content: '该应用不允许单独使用，点击确认前往 Sealos Desktop 使用。'
+    title: 'jump_prompt',
+    content: 'not_allow_standalone_use'
   });
 
   useEffect(() => {