perf: usages list；perf: move components (#3654)

* perf: usages list * team sub plan load * perf: usage dashboard code * perf: dashboard ui * perf: move components
2025-01-23 17:29:39 +08:00
parent e4b85ffada
commit 5a04d015f9
271 changed files with 9981 additions and 4025 deletions
--- a/projects/app/src/pageComponents/account/TeamSelector.tsx
+++ b/projects/app/src/pageComponents/account/TeamSelector.tsx
@@ -0,0 +1,104 @@
+import React, { useMemo } from 'react';
+import { Box, ButtonProps, Flex } from '@chakra-ui/react';
+import { useUserStore } from '@/web/support/user/useUserStore';
+import { useTranslation } from 'next-i18next';
+import Avatar from '@fastgpt/web/components/common/Avatar';
+import { getTeamList, putSwitchTeam } from '@/web/support/user/team/api';
+import { TeamMemberStatusEnum } from '@fastgpt/global/support/user/team/constant';
+import { useRequest2 } from '@fastgpt/web/hooks/useRequest';
+import MySelect from '@fastgpt/web/components/common/MySelect';
+import { useSystemStore } from '@/web/common/system/useSystemStore';
+import MyIcon from '@fastgpt/web/components/common/Icon';
+import { useRouter } from 'next/router';
+
+const TeamSelector = ({
+  showManage,
+  ...props
+}: ButtonProps & {
+  showManage?: boolean;
+}) => {
+  const { t } = useTranslation();
+  const router = useRouter();
+  const { userInfo, initUserInfo } = useUserStore();
+  const { setLoading } = useSystemStore();
+
+  const { data: myTeams = [] } = useRequest2(() => getTeamList(TeamMemberStatusEnum.active), {
+    manual: false,
+    refreshDeps: [userInfo]
+  });
+
+  const { runAsync: onSwitchTeam } = useRequest2(
+    async (teamId: string) => {
+      setLoading(true);
+      await putSwitchTeam(teamId);
+      return initUserInfo();
+    },
+    {
+      onFinally: () => {
+        setLoading(false);
+      },
+      errorToast: t('common:user.team.Switch Team Failed')
+    }
+  );
+
+  const teamList = useMemo(() => {
+    return myTeams.map((team) => ({
+      label: (
+        <Flex
+          key={team.teamId}
+          alignItems={'center'}
+          borderRadius={'md'}
+          cursor={'default'}
+          gap={3}
+          onClick={() => onSwitchTeam(team.teamId)}
+          _hover={{
+            cursor: 'pointer'
+          }}
+        >
+          <Avatar src={team.avatar} w={['1.25rem', '1.375rem']} />
+          <Box flex={'1 0 0'} w={0} className="textEllipsis" fontSize={'sm'}>
+            {team.teamName}
+          </Box>
+        </Flex>
+      ),
+      value: team.teamId
+    }));
+  }, [myTeams, onSwitchTeam]);
+
+  const formatTeamList = useMemo(() => {
+    return [
+      ...(showManage
+        ? [
+            {
+              label: (
+                <Flex
+                  key={'manage'}
+                  alignItems={'center'}
+                  borderRadius={'md'}
+                  cursor={'pointer'}
+                  gap={3}
+                  onClick={() => router.push('/account/team')}
+                >
+                  <MyIcon name="common/setting" w={['1.25rem', '1.375rem']} />
+                  <Box flex={'1 0 0'} w={0} className="textEllipsis" fontSize={'sm'}>
+                    {t('user:manage_team')}
+                  </Box>
+                </Flex>
+              ),
+              value: 'manage',
+              showBorder: true
+            }
+          ]
+        : []),
+      ...teamList
+    ];
+  }, [showManage, t, teamList, router]);
+
+  return (
+    <Box w={'100%'}>
+      <MySelect {...props} value={userInfo?.team?.teamId} list={formatTeamList} />
+    </Box>
+  );
+};
+
+export default TeamSelector;