sub plan page (#885)

* perf: insert mongo dataset data session

* perf: dataset data index

* remove delay

* rename bill schema

* rename bill record

* perf: bill table

* perf: prompt

* perf: sub plan

* change the usage count

* feat: usage bill

* publish usages

* doc

* 新增团队聊天功能 (#20)

* perf: doc

* feat 添加标签部分

feat 信息团队标签配置

feat 新增团队同步管理

feat team分享页面

feat 完成team分享页面

feat 实现模糊搜索

style 格式化

fix 修复迷糊匹配

style 样式修改

fix 团队标签功能修复

* fix 修复鉴权功能

* merge 合并代码

* fix 修复引用错误

* fix 修复pr问题

* fix 修复ts格式问题

---------

Co-authored-by: archer <545436317@qq.com>
Co-authored-by: liuxingwan <liuxingwan.lxw@alibaba-inc.com>

* update extra plan

* fix: ts

* format

* perf: bill field

* feat: standard plan

* fix: ts

* feat 个人账号页面修改 (#22)

* feat 添加标签部分

feat 信息团队标签配置

feat 新增团队同步管理

feat team分享页面

feat 完成team分享页面

feat 实现模糊搜索

style 格式化

fix 修复迷糊匹配

style 样式修改

fix 团队标签功能修复

* fix 修复鉴权功能

* merge 合并代码

* fix 修复引用错误

* fix 修复pr问题

* fix 修复ts格式问题

* feat 修改个人账号页

---------

Co-authored-by: liuxingwan <liuxingwan.lxw@alibaba-inc.com>

* fix chunk index; error page text

* feat: dataset process Integral prediction

* feat: stand plan field

* feat: sub plan limit

* perf: index

* query extension

* perf: share link push app name

* perf: plan point unit

* perf: get sub plan

* perf: account page

---------

Co-authored-by: yst <77910600+yu-and-liu@users.noreply.github.com>
Co-authored-by: liuxingwan <liuxingwan.lxw@alibaba-inc.com>

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

@@ -1,15 +1,14 @@
-import React, { useCallback, useMemo, useRef } from 'react';
+import React, { useCallback, useMemo } from 'react';
 import {
   Box,
   Flex,
   Button,
   useDisclosure,
   useTheme,
-  Divider,
-  Select,
   Input,
   Link,
-  Progress
+  Progress,
+  Grid
 } from '@chakra-ui/react';
 import { useForm } from 'react-hook-form';
 import { UserUpdateParams } from '@/types/user';
@@ -22,35 +21,68 @@ 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 MySelect from '@/components/Select';
-import { formatStorePrice2Read } from '@fastgpt/global/support/wallet/bill/tools';
+import { formatStorePrice2Read } from '@fastgpt/global/support/wallet/usage/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 UserInfo = () => {
+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 theme = useTheme();
-  const router = useRouter();
-  const { feConfigs, systemVersion } = useSystemStore();
-  const { t, i18n } = useTranslation();
-  const { userInfo, updateUserInfo, initUserInfo } = useUserStore();
-  const timezones = useRef(timezoneList());
+  const { feConfigs } = useSystemStore();
+  const { t } = useTranslation();
+  const { userInfo, updateUserInfo } = useUserStore();
   const { reset } = useForm<UserUpdateParams>({
     defaultValues: userInfo as UserType
   });
+  const { isPc } = useSystemStore();
 
   const { toast } = useToast();
   const {
@@ -63,13 +95,11 @@ const UserInfo = () => {
     onClose: onCloseUpdatePsw,
     onOpen: onOpenUpdatePsw
   } = useDisclosure();
-  const { isOpen: isOpenOpenai, onClose: onCloseOpenai, onOpen: onOpenOpenai } = useDisclosure();
   const {
-    isOpen: isOpenSubDatasetModal,
-    onClose: onCloseSubDatasetModal,
-    onOpen: onOpenSubDatasetModal
+    isOpen: isOpenStandardModal,
+    onClose: onCloseStandardModal,
+    onOpen: onOpenStandardModal
   } = useDisclosure();
-
   const { File, onOpen: onOpenSelectFile } = useSelectFile({
     fileType: '.jpg,.png',
     multiple: false
@@ -117,81 +147,73 @@ const UserInfo = () => {
     [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
-      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}
-          >
-            <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')}
+    <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>
-      </Flex>
-      <Box
-        display={['flex', 'block']}
-        flexDirection={'column'}
-        alignItems={'center'}
-        ml={[0, 10]}
-        mt={[6, 0]}
-      >
+      )}
+
+      <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}
+          >
+            <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>
+
+            <Flex alignItems={'center'} fontSize={'sm'} color={'myGray.600'}>
+              <MyIcon mr={1} name={'edit'} w={'14px'} />
+              {t('user.Replace')}
+            </Flex>
+          </Flex>
+        )}
         {feConfigs.isPlus && (
-          <Flex mb={4} alignItems={'center'} w={['85%', '300px']}>
+          <Flex mt={[0, 4]} alignItems={'center'}>
             <Box flex={'0 0 80px'}>{t('user.Member Name')}:&nbsp;</Box>
             <Input
-              flex={1}
+              flex={'1 0 0'}
               defaultValue={userInfo?.team?.memberName || 'Member'}
               title={t('user.Edit name')}
               borderColor={'transparent'}
-              pl={'10px'}
               transform={'translateX(-11px)'}
               maxLength={20}
               onBlur={(e) => {
@@ -204,109 +226,265 @@ const UserInfo = () => {
             />
           </Flex>
         )}
-        <Flex alignItems={'center'} w={['85%', '300px']}>
+        <Flex alignItems={'center'} mt={6}>
           <Box flex={'0 0 80px'}>{t('user.Account')}:&nbsp;</Box>
           <Box flex={1}>{userInfo?.username}</Box>
         </Flex>
-        <Flex mt={6} alignItems={'center'} w={['85%', '300px']}>
+        {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'}>
           <Box flex={'0 0 80px'}>{t('user.Team')}:&nbsp;</Box>
           <Box flex={1}>
             <TeamMenu />
           </Box>
         </Flex>
-        <Flex mt={6} alignItems={'center'} w={['85%', '300px']}>
-          <Box flex={'0 0 80px'}>{t('user.Language')}:&nbsp;</Box>
-          <Box flex={'1 0 0'}>
-            <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 });
-              }}
-            />
+        {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>
-        <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
+          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]}>
+          <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>
+          </Box>
+          <Button onClick={() => router.push('/price')}>
+            {t('support.wallet.subscription.Upgrade plan')}
           </Button>
         </Flex>
-        {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 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}
               </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}
@@ -326,64 +504,53 @@ const UserInfo = () => {
             </Box>
           </Link>
         )}
-        {feConfigs?.chatbotUrl && (
-          <Link
-            href={feConfigs.chatbotUrl}
-            target="_blank"
-            display={'flex'}
-            mt={4}
-            w={['85%', '300px']}
-            py={3}
+        <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}
             px={6}
             border={theme.borders.sm}
             borderWidth={'1.5px'}
             borderRadius={'md'}
             alignItems={'center'}
+            cursor={'pointer'}
             userSelect={'none'}
-            textDecoration={'none !important'}
+            onClick={onOpenOpenai}
           >
-            <MyIcon name={'core/app/aiLight'} w={'18px'} />
+            <MyIcon name={'common/openai'} w={'18px'} color={'myGray.600'} />
             <Box ml={2} flex={1}>
-              {t('common.system.Help Chatbot')}
+              OpenAI/OneAPI 账号
             </Box>
-          </Link>
+            <Box
+              w={'9px'}
+              h={'9px'}
+              borderRadius={'50%'}
+              bg={userInfo?.openaiAccount?.key ? '#67c13b' : 'myGray.500'}
+            />
+          </Flex>
         )}
-        {feConfigs?.show_openai_account && (
-          <>
-            <Divider my={3} />
+      </Grid>
 
-            <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}
@@ -396,10 +563,6 @@ const UserInfo = () => {
           onClose={onCloseOpenai}
         />
       )}
-      {isOpenSubDatasetModal && <SubDatasetModal onClose={onCloseSubDatasetModal} />}
-      <File onSelect={onSelectFile} />
     </Box>
   );
 };
-
-export default React.memo(UserInfo);