feat translation of the user module

Signed-off-by: jingyang <3161362058@qq.com>

client/src/pages/account/components/BillTable.tsx

@@ -22,10 +22,11 @@ import DateRangePicker, { type DateRangeType } from '@/components/DateRangePicke
 import { addDays } from 'date-fns';
 import dynamic from 'next/dynamic';
 import { useGlobalStore } from '@/store/global';
-
+import { useTranslation } from 'next-i18next';
 const BillDetail = dynamic(() => import('./BillDetail'));
 
 const BillTable = () => {
+  const { t } = useTranslation();
   const { Loading } = useLoading();
   const [dateRange, setDateRange] = useState<DateRangeType>({
     from: addDays(new Date(), -7),
@@ -55,10 +56,10 @@ const BillTable = () => {
         <Table>
           <Thead>
             <Tr>
-              <Th>时间</Th>
-              <Th>来源</Th>
-              <Th>应用名</Th>
-              <Th>总金额</Th>
+              <Th>{t('user.Time')}</Th>
+              <Th>{t('user.Source')}</Th>
+              <Th>{t('user.Application Name')}</Th>
+              <Th>{t('user.Total Amount')}</Th>
               <Th></Th>
             </Tr>
           </Thead>

client/src/pages/account/components/Info.tsx

@@ -10,8 +10,7 @@ import dynamic from 'next/dynamic';
 import { useSelectFile } from '@/hooks/useSelectFile';
 import { compressImg } from '@/utils/file';
 import { feConfigs } from '@/store/static';
-import { useTranslation } from 'react-i18next';
-
+import { useTranslation } from 'next-i18next';
 import Loading from '@/components/Loading';
 import Avatar from '@/components/Avatar';
 import MyIcon from '@/components/Icon';
@@ -125,7 +124,7 @@ const UserInfo = () => {
 
         <Flex alignItems={'center'} fontSize={'sm'} color={'myGray.600'}>
           <MyIcon mr={1} name={'edit'} w={'14px'} />
-          更换
+          {t('user.Replace')}
         </Flex>
       </Flex>
       <Box
@@ -136,26 +135,26 @@ const UserInfo = () => {
         mt={[6, 0]}
       >
         <Flex alignItems={'center'} w={['85%', '300px']}>
-          <Box flex={'0 0 50px'}>账号:</Box>
+          <Box flex={'0 0 50px'}>{t('user.Account')}:&nbsp;</Box>
           <Box flex={1}>{userInfo?.username}</Box>
         </Flex>
         <Flex mt={6} alignItems={'center'} w={['85%', '300px']}>
-          <Box flex={'0 0 50px'}>密码:</Box>
+          <Box flex={'0 0 50px'}>{t('user.Password')}:&nbsp;</Box>
           <Box flex={1}>*****</Box>
           <Button size={['sm', 'md']} variant={'base'} ml={5} onClick={onOpenUpdatePsw}>
-            变更
+            {t('user.Change')}
           </Button>
         </Flex>
         {feConfigs?.show_userDetail && (
           <>
             <Box mt={6} whiteSpace={'nowrap'} w={['85%', '300px']}>
               <Flex alignItems={'center'}>
-                <Box flex={'0 0 50px'}>余额:</Box>
+                <Box flex={'0 0 50px'}>{t('user.Balance')}:&nbsp;</Box>
                 <Box flex={1}>
                   <strong>{userInfo?.balance.toFixed(3)}</strong> 元
                 </Box>
                 <Button size={['sm', 'md']} ml={5} onClick={onOpenPayModal}>
-                  充值
+                  {t('user.Pay')}
                 </Button>
               </Flex>
             </Box>

client/src/pages/account/index.tsx

@@ -32,11 +32,36 @@ enum TabEnum {
 
 const Account = ({ currentTab }: { currentTab: `${TabEnum}` }) => {
   const tabList = useRef([
-    { icon: 'meLight', label: '个人信息', id: TabEnum.info, Component: <BillTable /> },
-    { icon: 'billRecordLight', label: '使用记录', id: TabEnum.bill, Component: <BillTable /> },
-    { icon: 'payRecordLight', label: '充值记录', id: TabEnum.pay, Component: <PayRecordTable /> },
-    { icon: 'informLight', label: '通知', id: TabEnum.inform, Component: <InformTable /> },
-    { icon: 'loginoutLight', label: '登出', id: TabEnum.loginout, Component: () => <></> }
+    {
+      icon: 'meLight',
+      label: 'user.Personal Information',
+      id: TabEnum.info,
+      Component: <BillTable />
+    },
+    {
+      icon: 'billRecordLight',
+      label: 'user.Usage Record',
+      id: TabEnum.bill,
+      Component: <BillTable />
+    },
+    {
+      icon: 'payRecordLight',
+      label: 'user.Recharge Record',
+      id: TabEnum.pay,
+      Component: <PayRecordTable />
+    },
+    {
+      icon: 'informLight',
+      label: 'user.Notice',
+      id: TabEnum.inform,
+      Component: <InformTable />
+    },
+    {
+      icon: 'loginoutLight',
+      label: 'user.Sign Out',
+      id: TabEnum.loginout,
+      Component: () => <></>
+    }
   ]);
 
   const { openConfirm, ConfirmModal } = useConfirm({