v4.6-3 (#471)

projects/app/src/pages/account/components/ApiKeyTable.tsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import { useTranslation } from 'react-i18next';
+import { useTranslation } from 'next-i18next';
 import ApiKeyTable from '@/components/support/apikey/Table';
 
 const ApiKey = () => {

projects/app/src/pages/account/components/BillDetail.tsx

@@ -16,7 +16,7 @@ import dayjs from 'dayjs';
 import { BillSourceMap } from '@fastgpt/global/support/wallet/bill/constants';
 import { formatPrice } from '@fastgpt/global/support/wallet/bill/tools';
 import MyModal from '@/components/MyModal';
-import { useTranslation } from 'react-i18next';
+import { useTranslation } from 'next-i18next';
 
 const BillDetail = ({ bill, onClose }: { bill: BillItemType; onClose: () => void }) => {
   const { t } = useTranslation();
@@ -30,7 +30,7 @@ const BillDetail = ({ bill, onClose }: { bill: BillItemType; onClose: () => void
       <ModalBody>
         <Flex alignItems={'center'} pb={4}>
           <Box flex={'0 0 80px'}>用户:</Box>
-          <Box>{bill.username}</Box>
+          <Box>{bill.memberName}</Box>
         </Flex>
         <Flex alignItems={'center'} pb={4}>
           <Box flex={'0 0 80px'}>订单号:</Box>

projects/app/src/pages/account/components/BillTable.tsx

@@ -55,7 +55,7 @@ const BillTable = () => {
         <Table>
           <Thead>
             <Tr>
-              <Th>{t('wallet.bill.bill username')}</Th>
+              <Th>{t('user.team.Member Name')}</Th>
               <Th>{t('user.Time')}</Th>
               <Th>{t('user.Source')}</Th>
               <Th>{t('user.Application Name')}</Th>
@@ -66,7 +66,7 @@ const BillTable = () => {
           <Tbody fontSize={'sm'}>
             {bills.map((item) => (
               <Tr key={item.id}>
-                <Td>{item.username}</Td>
+                <Td>{item.memberName}</Td>
                 <Td>{dayjs(item.time).format('YYYY/MM/DD HH:mm:ss')}</Td>
                 <Td>{BillSourceMap[item.source]}</Td>
                 <Td>{t(item.appName) || '-'}</Td>

projects/app/src/pages/account/components/Info.tsx

@@ -1,5 +1,14 @@
-import React, { useCallback, useRef, useState } from 'react';
-import { Box, Flex, Button, useDisclosure, useTheme, Divider, Select } from '@chakra-ui/react';
+import React, { useCallback, useRef } from 'react';
+import {
+  Box,
+  Flex,
+  Button,
+  useDisclosure,
+  useTheme,
+  Divider,
+  Select,
+  Input
+} from '@chakra-ui/react';
 import { useForm } from 'react-hook-form';
 import { UserUpdateParams } from '@/types/user';
 import { useToast } from '@/web/common/hooks/useToast';
@@ -16,10 +25,11 @@ import Loading from '@/components/Loading';
 import Avatar from '@/components/Avatar';
 import MyIcon from '@/components/Icon';
 import MyTooltip from '@/components/MyTooltip';
-import { getLangStore, LangEnum, langMap, setLangStore } from '@/web/common/utils/i18n';
+import { langMap, setLngStore } from '@/web/common/utils/i18n';
 import { useRouter } from 'next/router';
 import MySelect from '@/components/Select';
 import { formatPrice } from '@fastgpt/global/support/wallet/bill/tools';
+import { putUpdateMemberName } from '@/web/support/user/team/api';
 
 const TeamMenu = dynamic(() => import('@/components/support/user/team/TeamMenu'));
 const PayModal = dynamic(() => import('./PayModal'), {
@@ -63,8 +73,6 @@ const UserInfo = () => {
     multiple: false
   });
 
-  const [language, setLanguage] = useState<`${LangEnum}`>(getLangStore());
-
   const onclickSave = useCallback(
     async (data: UserType) => {
       await updateUserInfo({
@@ -153,6 +161,27 @@ const UserInfo = () => {
         ml={[0, 10]}
         mt={[6, 0]}
       >
+        {feConfigs.isPlus && (
+          <Flex mb={4} alignItems={'center'} w={['85%', '300px']}>
+            <Box flex={'0 0 80px'}>{t('user.Member Name')}:&nbsp;</Box>
+            <Input
+              flex={1}
+              defaultValue={userInfo?.team?.memberName || 'Member'}
+              title={t('user.Edit name')}
+              borderColor={'transparent'}
+              pl={'10px'}
+              transform={'translateX(-11px)'}
+              maxLength={20}
+              onBlur={(e) => {
+                const val = e.target.value;
+                if (val === userInfo?.team?.memberName) return;
+                try {
+                  putUpdateMemberName(val);
+                } catch (error) {}
+              }}
+            />
+          </Flex>
+        )}
         <Flex alignItems={'center'} w={['85%', '300px']}>
           <Box flex={'0 0 80px'}>{t('user.Account')}:&nbsp;</Box>
           <Box flex={1}>{userInfo?.username}</Box>
@@ -167,17 +196,15 @@ const UserInfo = () => {
           <Box flex={'0 0 80px'}>{t('user.Language')}:&nbsp;</Box>
           <Box flex={'1 0 0'}>
             <MySelect
-              value={language}
+              value={i18n.language}
               list={Object.entries(langMap).map(([key, lang]) => ({
                 label: lang.label,
                 value: key
               }))}
               onchange={(val: any) => {
                 const lang = val;
-                setLangStore(lang);
-                setLanguage(lang);
-                i18n?.changeLanguage?.(lang);
-                router.reload();
+                setLngStore(lang);
+                router.replace(router.basePath, router.asPath, { locale: lang });
               }}
             />
           </Box>

projects/app/src/pages/account/components/OpenAIAccountModal.tsx

@@ -1,7 +1,7 @@
 import React from 'react';
 import { ModalBody, Box, Flex, Input, ModalFooter, Button } from '@chakra-ui/react';
 import MyModal from '@/components/MyModal';
-import { useTranslation } from 'react-i18next';
+import { useTranslation } from 'next-i18next';
 import { useForm } from 'react-hook-form';
 import { useRequest } from '@/web/common/hooks/useRequest';
 import type { UserType } from '@fastgpt/global/support/user/type.d';

projects/app/src/pages/account/components/PayModal.tsx

@@ -5,7 +5,7 @@ import { useToast } from '@/web/common/hooks/useToast';
 import { useQuery } from '@tanstack/react-query';
 import { useRouter } from 'next/router';
 import { getErrText } from '@fastgpt/global/common/error/utils';
-import { useTranslation } from 'react-i18next';
+import { useTranslation } from 'next-i18next';
 import Markdown from '@/components/Markdown';
 import MyModal from '@/components/MyModal';
 import { priceMd } from '@/web/common/system/staticData';

projects/app/src/pages/account/components/UpdatePswModal.tsx

@@ -1,7 +1,7 @@
 import React from 'react';
 import { ModalBody, Box, Flex, Input, ModalFooter, Button } from '@chakra-ui/react';
 import MyModal from '@/components/MyModal';
-import { useTranslation } from 'react-i18next';
+import { useTranslation } from 'next-i18next';
 import { useForm } from 'react-hook-form';
 import { useRequest } from '@/web/common/hooks/useRequest';
 import { updatePasswordByOld } from '@/web/support/user/api';

projects/app/src/pages/account/index.tsx

@@ -12,7 +12,7 @@ import Tabs from '@/components/Tabs';
 import UserInfo from './components/Info';
 import { serviceSideProps } from '@/web/common/utils/i18n';
 import { feConfigs } from '@/web/common/system/staticData';
-import { useTranslation } from 'react-i18next';
+import { useTranslation } from 'next-i18next';
 import Script from 'next/script';
 
 const Promotion = dynamic(() => import('./components/Promotion'));
@@ -35,67 +35,64 @@ const Account = ({ currentTab }: { currentTab: `${TabEnum}` }) => {
   const { t } = useTranslation();
   const { userInfo, setUserInfo } = useUserStore();
 
-  const tabList = useMemo(
-    () => [
-      {
-        icon: 'meLight',
-        label: t('user.Personal Information'),
-        id: TabEnum.info
-      },
-      ...(feConfigs?.isPlus
-        ? [
-            {
-              icon: 'billRecordLight',
-              label: t('user.Usage Record'),
-              id: TabEnum.bill
-            }
-          ]
-        : []),
-      ...(feConfigs?.show_promotion
-        ? [
-            {
-              icon: 'promotionLight',
-              label: t('user.Promotion Record'),
-              id: TabEnum.promotion
-            }
-          ]
-        : []),
-      ...(feConfigs?.show_pay && userInfo?.team.canWrite
-        ? [
-            {
-              icon: 'payRecordLight',
-              label: t('user.Recharge Record'),
-              id: TabEnum.pay
-            }
-          ]
-        : []),
-      ...(userInfo?.team.canWrite
-        ? [
-            {
-              icon: 'apikey',
-              label: t('user.apikey.key'),
-              id: TabEnum.apikey
-            }
-          ]
-        : []),
-      ...(feConfigs.isPlus
-        ? [
-            {
-              icon: 'informLight',
-              label: t('user.Notice'),
-              id: TabEnum.inform
-            }
-          ]
-        : []),
+  const tabList = [
+    {
+      icon: 'meLight',
+      label: t('user.Personal Information'),
+      id: TabEnum.info
+    },
+    ...(feConfigs?.isPlus
+      ? [
+          {
+            icon: 'billRecordLight',
+            label: t('user.Usage Record'),
+            id: TabEnum.bill
+          }
+        ]
+      : []),
+    ...(feConfigs?.show_promotion
+      ? [
+          {
+            icon: 'promotionLight',
+            label: t('user.Promotion Record'),
+            id: TabEnum.promotion
+          }
+        ]
+      : []),
+    ...(feConfigs?.show_pay && userInfo?.team.canWrite
+      ? [
+          {
+            icon: 'payRecordLight',
+            label: t('user.Recharge Record'),
+            id: TabEnum.pay
+          }
+        ]
+      : []),
+    ...(userInfo?.team.canWrite
+      ? [
+          {
+            icon: 'apikey',
+            label: t('user.apikey.key'),
+            id: TabEnum.apikey
+          }
+        ]
+      : []),
+    ...(feConfigs.isPlus
+      ? [
+          {
+            icon: 'informLight',
+            label: t('user.Notice'),
+            id: TabEnum.inform
+          }
+        ]
+      : []),
 
-      {
-        icon: 'loginoutLight',
-        label: t('user.Sign Out'),
-        id: TabEnum.loginout
-      }
-    ],
-    [t, userInfo?.team.canWrite]
-  );
+    {
+      icon: 'loginoutLight',
+      label: t('user.Sign Out'),
+      id: TabEnum.loginout
+    }
+  ];
 
   const { openConfirm, ConfirmModal } = useConfirm({
     content: '确认退出登录？'