Revert "sub plan page (#885)" (#886)

This reverts commit 443ad37b6a.

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

@@ -1,14 +1,15 @@
-import React, { useCallback, useMemo } from 'react';
+import React, { useCallback, useMemo, useRef } from 'react';
 import {
   Box,
   Flex,
   Button,
   useDisclosure,
   useTheme,
+  Divider,
+  Select,
   Input,
   Link,
-  Progress,
-  Grid
+  Progress
 } from '@chakra-ui/react';
 import { useForm } from 'react-hook-form';
 import { UserUpdateParams } from '@/types/user';
@@ -21,68 +22,35 @@ import { useSelectFile } from '@/web/common/file/hooks/useSelectFile';
 import { compressImgFileAndUpload } from '@/web/common/file/controller';
 import { useSystemStore } from '@/web/common/system/useSystemStore';
 import { useTranslation } from 'next-i18next';
+import { timezoneList } from '@fastgpt/global/common/time/timezone';
 import Avatar from '@/components/Avatar';
 import MyIcon from '@fastgpt/web/components/common/Icon';
 import MyTooltip from '@/components/MyTooltip';
+import { langMap, setLngStore } from '@/web/common/utils/i18n';
 import { useRouter } from 'next/router';
-import { formatStorePrice2Read } from '@fastgpt/global/support/wallet/usage/tools';
+import MySelect from '@/components/Select';
+import { formatStorePrice2Read } from '@fastgpt/global/support/wallet/bill/tools';
 import { putUpdateMemberName } from '@/web/support/user/team/api';
 import { getDocPath } from '@/web/common/system/doc';
+import { getTeamDatasetValidSub } from '@/web/support/wallet/sub/api';
 import { MongoImageTypeEnum } from '@fastgpt/global/common/file/image/constants';
-import { standardSubLevelMap } from '@fastgpt/global/support/wallet/sub/constants';
-import { formatTime2YMDHM } from '@fastgpt/global/common/string/time';
-import { AI_POINT_USAGE_CARD_ROUTE } from '@/web/support/wallet/sub/constants';
 
-import StandardPlanContentList from '@/components/support/wallet/StandardPlanContentList';
-const StandDetailModal = dynamic(() => import('./standardDetailModal'));
 const TeamMenu = dynamic(() => import('@/components/support/user/team/TeamMenu'));
 const PayModal = dynamic(() => import('./PayModal'));
 const UpdatePswModal = dynamic(() => import('./UpdatePswModal'));
 const OpenAIAccountModal = dynamic(() => import('./OpenAIAccountModal'));
+const SubDatasetModal = dynamic(() => import('@/components/support/wallet/SubDatasetModal'));
 
-const Account = () => {
-  const { isPc } = useSystemStore();
-
-  const { initUserInfo } = useUserStore();
-
-  useQuery(['init'], initUserInfo);
-
-  return (
-    <Box py={[3, '28px']} px={['5vw', '64px']}>
-      {isPc ? (
-        <Flex justifyContent={'center'}>
-          <Box flex={'0 0 330px'}>
-            <MyInfo />
-            <Box mt={9}>
-              <Other />
-            </Box>
-          </Box>
-          <Box ml={'45px'} flex={'1 0 0'} maxW={'600px'}>
-            <PlanUsage />
-          </Box>
-        </Flex>
-      ) : (
-        <>
-          <MyInfo />
-          <PlanUsage />
-          <Other />
-        </>
-      )}
-    </Box>
-  );
-};
-
-export default React.memo(Account);
-
-const MyInfo = () => {
+const UserInfo = () => {
   const theme = useTheme();
-  const { feConfigs } = useSystemStore();
-  const { t } = useTranslation();
-  const { userInfo, updateUserInfo } = useUserStore();
+  const router = useRouter();
+  const { feConfigs, systemVersion } = useSystemStore();
+  const { t, i18n } = useTranslation();
+  const { userInfo, updateUserInfo, initUserInfo } = useUserStore();
+  const timezones = useRef(timezoneList());
   const { reset } = useForm<UserUpdateParams>({
     defaultValues: userInfo as UserType
   });
-  const { isPc } = useSystemStore();
 
   const { toast } = useToast();
   const {
@@ -95,11 +63,13 @@ const MyInfo = () => {
     onClose: onCloseUpdatePsw,
     onOpen: onOpenUpdatePsw
   } = useDisclosure();
+  const { isOpen: isOpenOpenai, onClose: onCloseOpenai, onOpen: onOpenOpenai } = useDisclosure();
   const {
-    isOpen: isOpenStandardModal,
-    onClose: onCloseStandardModal,
-    onOpen: onOpenStandardModal
+    isOpen: isOpenSubDatasetModal,
+    onClose: onCloseSubDatasetModal,
+    onOpen: onOpenSubDatasetModal
   } = useDisclosure();
+
   const { File, onOpen: onOpenSelectFile } = useSelectFile({
     fileType: '.jpg,.png',
     multiple: false
@@ -147,73 +117,81 @@ const MyInfo = () => {
     [onclickSave, t, toast, userInfo]
   );
 
+  useQuery(['init'], initUserInfo, {
+    onSuccess(res) {
+      reset(res);
+    }
+  });
+
+  const {
+    data: teamSubPlan = { totalPoints: 0, usedPoints: 0, datasetMaxSize: 800, usedDatasetSize: 0 }
+  } = useQuery(['getTeamDatasetValidSub'], getTeamDatasetValidSub);
+  const datasetUsageMap = useMemo(() => {
+    const rate = teamSubPlan.usedDatasetSize / teamSubPlan.datasetMaxSize;
+
+    const colorScheme = (() => {
+      if (rate < 0.5) return 'green';
+      if (rate < 0.8) return 'yellow';
+      return 'red';
+    })();
+
+    return {
+      colorScheme,
+      value: rate * 100,
+      maxSize: teamSubPlan.datasetMaxSize || t('common.Unlimited'),
+      usedSize: teamSubPlan.usedDatasetSize
+    };
+  }, [teamSubPlan.usedDatasetSize, teamSubPlan.datasetMaxSize, t]);
+
   return (
-    <Box>
-      {/* user info */}
-      {isPc && (
-        <Flex alignItems={'center'} fontSize={'xl'} h={'30px'}>
-          <MyIcon mr={2} name={'acount/user'} w={'20px'} />
-          {t('support.user.User self info')}
-        </Flex>
-      )}
-
-      <Box mt={[0, 6]}>
-        {isPc ? (
-          <Flex alignItems={'center'} cursor={'pointer'}>
-            <Box flex={'0 0 80px'}>{t('support.user.Avatar')}:&nbsp;</Box>
-
-            <MyTooltip label={t('common.avatar.Select Avatar')}>
-              <Box
-                w={['44px', '56px']}
-                h={['44px', '56px']}
-                borderRadius={'50%'}
-                border={theme.borders.base}
-                overflow={'hidden'}
-                p={'2px'}
-                boxShadow={'0 0 5px rgba(0,0,0,0.1)'}
-                mb={2}
-                onClick={onOpenSelectFile}
-              >
-                <Avatar src={userInfo?.avatar} borderRadius={'50%'} w={'100%'} h={'100%'} />
-              </Box>
-            </MyTooltip>
-          </Flex>
-        ) : (
-          <Flex
-            flexDirection={'column'}
-            alignItems={'center'}
-            cursor={'pointer'}
-            onClick={onOpenSelectFile}
+    <Box
+      display={['block', 'flex']}
+      py={[2, 10]}
+      justifyContent={'center'}
+      alignItems={'flex-start'}
+    >
+      <Flex
+        flexDirection={'column'}
+        alignItems={'center'}
+        cursor={'pointer'}
+        onClick={onOpenSelectFile}
+      >
+        <MyTooltip label={'更换头像'}>
+          <Box
+            w={['44px', '54px']}
+            h={['44px', '54px']}
+            borderRadius={'50%'}
+            border={theme.borders.base}
+            overflow={'hidden'}
+            p={'2px'}
+            boxShadow={'0 0 5px rgba(0,0,0,0.1)'}
+            mb={2}
           >
-            <MyTooltip label={'更换头像'}>
-              <Box
-                w={['44px', '54px']}
-                h={['44px', '54px']}
-                borderRadius={'50%'}
-                border={theme.borders.base}
-                overflow={'hidden'}
-                p={'2px'}
-                boxShadow={'0 0 5px rgba(0,0,0,0.1)'}
-                mb={2}
-              >
-                <Avatar src={userInfo?.avatar} borderRadius={'50%'} w={'100%'} h={'100%'} />
-              </Box>
-            </MyTooltip>
+            <Avatar src={userInfo?.avatar} borderRadius={'50%'} w={'100%'} h={'100%'} />
+          </Box>
+        </MyTooltip>
 
-            <Flex alignItems={'center'} fontSize={'sm'} color={'myGray.600'}>
-              <MyIcon mr={1} name={'edit'} w={'14px'} />
-              {t('user.Replace')}
-            </Flex>
-          </Flex>
-        )}
+        <Flex alignItems={'center'} fontSize={'sm'} color={'myGray.600'}>
+          <MyIcon mr={1} name={'edit'} w={'14px'} />
+          {t('user.Replace')}
+        </Flex>
+      </Flex>
+      <Box
+        display={['flex', 'block']}
+        flexDirection={'column'}
+        alignItems={'center'}
+        ml={[0, 10]}
+        mt={[6, 0]}
+      >
         {feConfigs.isPlus && (
-          <Flex mt={[0, 4]} alignItems={'center'}>
+          <Flex mb={4} alignItems={'center'} w={['85%', '300px']}>
             <Box flex={'0 0 80px'}>{t('user.Member Name')}:&nbsp;</Box>
             <Input
-              flex={'1 0 0'}
+              flex={1}
               defaultValue={userInfo?.team?.memberName || 'Member'}
               title={t('user.Edit name')}
               borderColor={'transparent'}
+              pl={'10px'}
               transform={'translateX(-11px)'}
               maxLength={20}
               onBlur={(e) => {
@@ -226,265 +204,109 @@ const MyInfo = () => {
             />
           </Flex>
         )}
-        <Flex alignItems={'center'} mt={6}>
+        <Flex alignItems={'center'} w={['85%', '300px']}>
           <Box flex={'0 0 80px'}>{t('user.Account')}:&nbsp;</Box>
           <Box flex={1}>{userInfo?.username}</Box>
         </Flex>
-        {feConfigs.isPlus && (
-          <Flex mt={6} alignItems={'center'}>
-            <Box flex={'0 0 80px'}>{t('user.Password')}:&nbsp;</Box>
-            <Box flex={1}>*****</Box>
-            <Button size={'sm'} variant={'whitePrimary'} onClick={onOpenUpdatePsw}>
-              {t('user.Change')}
-            </Button>
-          </Flex>
-        )}
-        <Flex mt={6} alignItems={'center'}>
+        <Flex mt={6} alignItems={'center'} w={['85%', '300px']}>
           <Box flex={'0 0 80px'}>{t('user.Team')}:&nbsp;</Box>
           <Box flex={1}>
             <TeamMenu />
           </Box>
         </Flex>
-        {feConfigs.isPlus && (
-          <Box mt={6} whiteSpace={'nowrap'}>
-            <Flex alignItems={'center'}>
-              <Box flex={'0 0 80px'} fontSize={'md'}>
-                {t('user.team.Balance')}:&nbsp;
-              </Box>
-              <Box flex={1}>
-                <strong>{formatStorePrice2Read(userInfo?.team?.balance).toFixed(3)}</strong> 元
-              </Box>
-              {feConfigs?.show_pay && userInfo?.team?.canWrite && (
-                <Button size={'sm'} ml={5} onClick={onOpenPayModal}>
-                  {t('user.Pay')}
-                </Button>
-              )}
-            </Flex>
-          </Box>
-        )}
-      </Box>
-      {isOpenPayModal && <PayModal onClose={onClosePayModal} />}
-      {isOpenUpdatePsw && <UpdatePswModal onClose={onCloseUpdatePsw} />}
-      <File onSelect={onSelectFile} />
-    </Box>
-  );
-};
-const PlanUsage = () => {
-  const { isPc } = useSystemStore();
-  const router = useRouter();
-  const { t } = useTranslation();
-  const { userInfo, initUserInfo, teamPlanStatus } = useUserStore();
-  const { reset } = useForm<UserUpdateParams>({
-    defaultValues: userInfo as UserType
-  });
-
-  const planName = useMemo(() => {
-    if (!teamPlanStatus?.standard?.currentSubLevel) return '';
-    return standardSubLevelMap[teamPlanStatus.standard.currentSubLevel].label;
-  }, [teamPlanStatus?.standard?.currentSubLevel]);
-  const standardPlan = teamPlanStatus?.standard;
-
-  useQuery(['init'], initUserInfo, {
-    onSuccess(res) {
-      reset(res);
-    }
-  });
-
-  const datasetUsageMap = useMemo(() => {
-    if (!teamPlanStatus) {
-      return {
-        colorScheme: 'green',
-        value: 0,
-        maxSize: t('common.Unlimited'),
-        usedSize: 0
-      };
-    }
-    const rate = teamPlanStatus.usedDatasetSize / teamPlanStatus.datasetMaxSize;
-
-    const colorScheme = (() => {
-      if (rate < 0.5) return 'green';
-      if (rate < 0.8) return 'yellow';
-      return 'red';
-    })();
-
-    return {
-      colorScheme,
-      value: rate * 100,
-      maxSize: teamPlanStatus.datasetMaxSize || t('common.Unlimited'),
-      usedSize: teamPlanStatus.usedDatasetSize
-    };
-  }, [teamPlanStatus, t]);
-  const aiPointsUsageMap = useMemo(() => {
-    if (!teamPlanStatus) {
-      return {
-        colorScheme: 'green',
-        value: 0,
-        maxSize: t('common.Unlimited'),
-        usedSize: 0
-      };
-    }
-
-    const rate = teamPlanStatus.usedPoints / teamPlanStatus.totalPoints;
-
-    const colorScheme = (() => {
-      if (rate < 0.5) return 'green';
-      if (rate < 0.8) return 'yellow';
-      return 'red';
-    })();
-
-    return {
-      colorScheme,
-      value: rate * 100,
-      maxSize: teamPlanStatus.totalPoints || t('common.Unlimited'),
-      usedSize: teamPlanStatus.usedPoints
-    };
-  }, [teamPlanStatus, t]);
-
-  return standardPlan ? (
-    <Box mt={[6, 0]}>
-      <Flex fontSize={'xl'} h={'30px'}>
-        <Flex alignItems={'center'}>
-          <MyIcon mr={2} name={'acount/plans'} w={'20px'} />
-          {t('support.wallet.subscription.Team plan and usage')}
-        </Flex>
-        <Button
-          ml={4}
-          variant={'whitePrimary'}
-          size={'sm'}
-          onClick={() => router.push(AI_POINT_USAGE_CARD_ROUTE)}
-        >
-          {t('support.user.Price')}
-        </Button>
-        {/* <Button ml={4} variant={'whitePrimary'} size={'sm'}>
-          套餐详情
-        </Button> */}
-      </Flex>
-      <Box
-        mt={[3, 6]}
-        bg={'white'}
-        borderWidth={'1px'}
-        borderColor={'borderColor.low'}
-        borderRadius={'md'}
-      >
-        <Flex px={[5, 10]} py={[3, 6]}>
+        <Flex mt={6} alignItems={'center'} w={['85%', '300px']}>
+          <Box flex={'0 0 80px'}>{t('user.Language')}:&nbsp;</Box>
           <Box flex={'1 0 0'}>
-            <Box color={'myGray.600'} fontSize="sm">
-              {t('support.wallet.subscription.Current plan')}
-            </Box>
-            <Box fontWeight={'bold'} fontSize="xl">
-              {t(planName)}
-            </Box>
-            <Flex mt="3" color={'#485264'} fontSize="sm">
-              <Box>{t('common.Expired Time')}:</Box>
-              <Box ml={2}>{formatTime2YMDHM(standardPlan?.expiredTime)}</Box>
-            </Flex>
+            <MySelect
+              value={i18n.language}
+              list={Object.entries(langMap).map(([key, lang]) => ({
+                label: lang.label,
+                value: key
+              }))}
+              onchange={(val: any) => {
+                const lang = val;
+                setLngStore(lang);
+                router.replace(router.basePath, router.asPath, { locale: lang });
+              }}
+            />
           </Box>
-          <Button onClick={() => router.push('/price')}>
-            {t('support.wallet.subscription.Upgrade plan')}
+        </Flex>
+        <Flex mt={6} alignItems={'center'} w={['85%', '300px']}>
+          <Box flex={'0 0 80px'}>{t('user.Timezone')}:&nbsp;</Box>
+          <Select
+            value={userInfo?.timezone}
+            onChange={(e) => {
+              if (!userInfo) return;
+              onclickSave({ ...userInfo, timezone: e.target.value });
+            }}
+          >
+            {timezones.current.map((item) => (
+              <option key={item.value} value={item.value}>
+                {item.name}
+              </option>
+            ))}
+          </Select>
+        </Flex>
+        <Flex mt={6} alignItems={'center'} w={['85%', '300px']}>
+          <Box flex={'0 0 80px'}>{t('user.Password')}:&nbsp;</Box>
+          <Box flex={1}>*****</Box>
+          <Button size={['sm', 'md']} variant={'whitePrimary'} ml={5} onClick={onOpenUpdatePsw}>
+            {t('user.Change')}
           </Button>
         </Flex>
-        <Box py={3} borderTopWidth={'1px'} borderTopColor={'borderColor.base'}>
-          <Box py={[0, 3]} px={[5, 10]} overflow={'auto'}>
-            <StandardPlanContentList
-              level={standardPlan?.currentSubLevel}
-              mode={standardPlan.currentMode}
-            />
-          </Box>
-        </Box>
-      </Box>
-      <Box
-        mt={6}
-        bg={'white'}
-        borderWidth={'1px'}
-        borderColor={'borderColor.low'}
-        borderRadius={'md'}
-        px={[5, 10]}
-        py={[4, 7]}
-      >
-        <Box width={'100%'}>
-          <Flex alignItems={'center'}>
-            <Flex alignItems={'center'}>
-              <Box fontWeight={'bold'}>{t('support.user.team.Dataset usage')}</Box>
-              <Box color={'myGray.600'} ml={2}>
-                {datasetUsageMap.usedSize}/{datasetUsageMap.maxSize}
+        {feConfigs.isPlus && (
+          <>
+            <Box mt={6} whiteSpace={'nowrap'} w={['85%', '300px']}>
+              <Flex alignItems={'center'}>
+                <Box flex={'0 0 80px'} fontSize={'md'}>
+                  {t('user.team.Balance')}:&nbsp;
+                </Box>
+                <Box flex={1}>
+                  <strong>{formatStorePrice2Read(userInfo?.team?.balance).toFixed(3)}</strong> 元
+                </Box>
+                {feConfigs?.show_pay && userInfo?.team?.canWrite && (
+                  <Button size={['sm', 'md']} ml={5} onClick={onOpenPayModal}>
+                    {t('user.Pay')}
+                  </Button>
+                )}
+              </Flex>
+            </Box>
+            {feConfigs?.show_pay && (
+              <Box mt={6} whiteSpace={'nowrap'} w={['85%', '300px']}>
+                <Flex alignItems={'center'}>
+                  <Box flex={'1 0 0'} fontSize={'md'}>
+                    {t('support.user.team.Dataset usage')}:&nbsp;{datasetUsageMap.usedSize}/
+                    {datasetUsageMap.maxSize}
+                  </Box>
+                  {userInfo?.team?.canWrite && (
+                    <Button size={'sm'} onClick={onOpenSubDatasetModal}>
+                      {t('support.wallet.Buy more')}
+                    </Button>
+                  )}
+                </Flex>
+                <Box mt={1}>
+                  <Progress
+                    value={datasetUsageMap.value}
+                    colorScheme={datasetUsageMap.colorScheme}
+                    borderRadius={'md'}
+                    isAnimated
+                    hasStripe
+                    borderWidth={'1px'}
+                    borderColor={'borderColor.base'}
+                  />
+                </Box>
               </Box>
-            </Flex>
-          </Flex>
-          <Box mt={3}>
-            <Progress
-              value={datasetUsageMap.value}
-              colorScheme={datasetUsageMap.colorScheme}
-              borderRadius={'md'}
-              isAnimated
-              hasStripe
-              borderWidth={'1px'}
-              borderColor={'borderColor.low'}
-            />
-          </Box>
-        </Box>
-        <Box mt="9" width={'100%'}>
-          <Flex alignItems={'center'}>
-            <Flex alignItems={'center'}>
-              <Box fontWeight={'bold'}>{t('support.wallet.subscription.AI points')}</Box>
-              <Box color={'myGray.600'} ml={2}>
-                {Math.round(teamPlanStatus.usedPoints)}/{teamPlanStatus.totalPoints}
-              </Box>
-            </Flex>
-          </Flex>
-          <Box mt={3}>
-            <Progress
-              value={aiPointsUsageMap.value}
-              colorScheme={aiPointsUsageMap.colorScheme}
-              borderRadius={'md'}
-              isAnimated
-              hasStripe
-              borderWidth={'1px'}
-              borderColor={'borderColor.low'}
-            />
-          </Box>
-        </Box>
-        <Flex></Flex>
-      </Box>
-    </Box>
-  ) : null;
-};
-const Other = () => {
-  const theme = useTheme();
-  const { toast } = useToast();
-  const { feConfigs, systemVersion } = useSystemStore();
-  const { t } = useTranslation();
-  const { userInfo, updateUserInfo, initUserInfo, teamPlanStatus } = useUserStore();
-  const { reset } = useForm<UserUpdateParams>({
-    defaultValues: userInfo as UserType
-  });
+            )}
+          </>
+        )}
 
-  const { isOpen: isOpenOpenai, onClose: onCloseOpenai, onOpen: onOpenOpenai } = useDisclosure();
-
-  const onclickSave = useCallback(
-    async (data: UserType) => {
-      await updateUserInfo({
-        avatar: data.avatar,
-        timezone: data.timezone,
-        openaiAccount: data.openaiAccount
-      });
-      reset(data);
-      toast({
-        title: '更新数据成功',
-        status: 'success'
-      });
-    },
-    [reset, toast, updateUserInfo]
-  );
-
-  return (
-    <Box>
-      <Grid gridGap={4} mt={3}>
         {feConfigs?.docUrl && (
           <Link
-            bg={'white'}
             href={getDocPath('/docs/intro')}
             target="_blank"
             display={'flex'}
+            mt={4}
+            w={['85%', '300px']}
             py={3}
             px={6}
             border={theme.borders.sm}
@@ -504,53 +326,64 @@ const Other = () => {
             </Box>
           </Link>
         )}
-        <Link
-          href={feConfigs.chatbotUrl}
-          target="_blank"
-          display={'flex'}
-          py={3}
-          px={6}
-          bg={'white'}
-          border={theme.borders.sm}
-          borderWidth={'1.5px'}
-          borderRadius={'md'}
-          alignItems={'center'}
-          userSelect={'none'}
-          textDecoration={'none !important'}
-        >
-          <MyIcon name={'core/app/aiLight'} w={'18px'} />
-          <Box ml={2} flex={1}>
-            {t('common.system.Help Chatbot')}
-          </Box>
-        </Link>
-
-        {feConfigs?.show_openai_account && (
-          <Flex
-            bg={'white'}
-            py={4}
+        {feConfigs?.chatbotUrl && (
+          <Link
+            href={feConfigs.chatbotUrl}
+            target="_blank"
+            display={'flex'}
+            mt={4}
+            w={['85%', '300px']}
+            py={3}
             px={6}
             border={theme.borders.sm}
             borderWidth={'1.5px'}
             borderRadius={'md'}
             alignItems={'center'}
-            cursor={'pointer'}
             userSelect={'none'}
-            onClick={onOpenOpenai}
+            textDecoration={'none !important'}
           >
-            <MyIcon name={'common/openai'} w={'18px'} color={'myGray.600'} />
+            <MyIcon name={'core/app/aiLight'} w={'18px'} />
             <Box ml={2} flex={1}>
-              OpenAI/OneAPI 账号
+              {t('common.system.Help Chatbot')}
             </Box>
-            <Box
-              w={'9px'}
-              h={'9px'}
-              borderRadius={'50%'}
-              bg={userInfo?.openaiAccount?.key ? '#67c13b' : 'myGray.500'}
-            />
-          </Flex>
+          </Link>
         )}
-      </Grid>
+        {feConfigs?.show_openai_account && (
+          <>
+            <Divider my={3} />
 
+            <MyTooltip label={'点击配置账号'}>
+              <Flex
+                w={['85%', '300px']}
+                py={4}
+                px={6}
+                border={theme.borders.sm}
+                borderWidth={'1.5px'}
+                borderRadius={'md'}
+                bg={'myWhite.300'}
+                alignItems={'center'}
+                cursor={'pointer'}
+                userSelect={'none'}
+                onClick={onOpenOpenai}
+              >
+                <MyIcon name={'common/openai'} w={'18px'} color={'myGray.600'} />
+                <Box ml={2} flex={1}>
+                  OpenAI/OneAPI 账号
+                </Box>
+                <Box
+                  w={'9px'}
+                  h={'9px'}
+                  borderRadius={'50%'}
+                  bg={userInfo?.openaiAccount?.key ? '#67c13b' : 'myGray.500'}
+                />
+              </Flex>
+            </MyTooltip>
+          </>
+        )}
+      </Box>
+
+      {isOpenPayModal && <PayModal onClose={onClosePayModal} />}
+      {isOpenUpdatePsw && <UpdatePswModal onClose={onCloseUpdatePsw} />}
       {isOpenOpenai && userInfo && (
         <OpenAIAccountModal
           defaultData={userInfo?.openaiAccount}
@@ -563,6 +396,10 @@ const Other = () => {
           onClose={onCloseOpenai}
         />
       )}
+      {isOpenSubDatasetModal && <SubDatasetModal onClose={onCloseSubDatasetModal} />}
+      <File onSelect={onSelectFile} />
     </Box>
   );
 };
+
+export default React.memo(UserInfo);