4.8.4 (#1746)

2025-08-01 11:58:38 +00:00 · 2024-06-12 15:17:21 +08:00
parent bc6864c3dc
commit d0085a23e6
61 changed files with 558 additions and 348 deletions
--- a/projects/app/src/components/common/folder/SlideCard.tsx
+++ b/projects/app/src/components/common/folder/SlideCard.tsx
@@ -8,13 +8,13 @@ import { useTranslation } from 'next-i18next';
 import { useConfirm } from '@fastgpt/web/hooks/useConfirm';
 import { PermissionValueType } from '@fastgpt/global/support/permission/type';
 import DefaultPermissionList from '@/components/support/permission/DefaultPerList';
-import {
-  CollaboratorContextProvider,
+import CollaboratorContextProvider, {
  MemberManagerInputPropsType
 } from '../../support/permission/MemberManager/context';
 import MyTooltip from '@fastgpt/web/components/common/MyTooltip';

 const FolderSlideCard = ({
+  refreshDeps,
  name,
  intro,
  onEdit,
@@ -25,6 +25,7 @@ const FolderSlideCard = ({
  defaultPer,
  managePer
 }: {
+  refreshDeps?: any[];
  name: string;
  intro?: string;
  onEdit: () => void;
@@ -86,22 +87,24 @@ const FolderSlideCard = ({
            >
              {t('common.Move')}
            </Button>
-            <Button
-              variant={'transparentDanger'}
-              pl={1}
-              leftIcon={<MyIcon name={'delete'} w={'1rem'} />}
-              transform={'none !important'}
-              w={'100%'}
-              justifyContent={'flex-start'}
-              size={'sm'}
-              fontSize={'mini'}
-              mt={3}
-              onClick={() => {
-                openConfirm(onDelete)();
-              }}
-            >
-              {t('common.Delete folder')}
-            </Button>
+            {managePer.permission.isOwner && (
+              <Button
+                variant={'transparentDanger'}
+                pl={1}
+                leftIcon={<MyIcon name={'delete'} w={'1rem'} />}
+                transform={'none !important'}
+                w={'100%'}
+                justifyContent={'flex-start'}
+                size={'sm'}
+                fontSize={'mini'}
+                mt={3}
+                onClick={() => {
+                  openConfirm(onDelete)();
+                }}
+              >
+                {t('common.Delete folder')}
+              </Button>
+            )}
          </Box>
        </>
      )}
@@ -125,7 +128,7 @@ const FolderSlideCard = ({
          </Box>
        )}
        <Box mt={6}>
-          <CollaboratorContextProvider {...managePer}>
+          <CollaboratorContextProvider {...managePer} refreshDeps={refreshDeps}>
            {({ MemberListCard, onOpenManageModal, onOpenAddMember }) => {
              return (
                <>
--- a/projects/app/src/components/support/permission/ConfigPerModal/index.tsx
+++ b/projects/app/src/components/support/permission/ConfigPerModal/index.tsx
@@ -2,7 +2,7 @@ import React from 'react';
 import MyModal from '@fastgpt/web/components/common/MyModal';
 import { useTranslation } from 'next-i18next';
 import { PermissionValueType } from '@fastgpt/global/support/permission/type';
-import { MemberManagerInputPropsType, CollaboratorContextProvider } from '../MemberManager/context';
+import CollaboratorContextProvider, { MemberManagerInputPropsType } from '../MemberManager/context';
 import { Box, Button, Flex, HStack, ModalBody } from '@chakra-ui/react';
 import Avatar from '@/components/Avatar';
 import DefaultPermissionList from '../DefaultPerList';
--- a/projects/app/src/components/support/permission/IconText/index.tsx
+++ b/projects/app/src/components/support/permission/IconText/index.tsx
@@ -20,8 +20,11 @@ const PermissionIconText = ({

  const per = useMemo(() => {
    if (permission) return permission;
-    if (defaultPermission) {
-      return new Permission({ per: defaultPermission }).hasReadPer ? 'public' : 'private';
+    if (defaultPermission !== undefined) {
+      const Per = new Permission({ per: defaultPermission });
+      if (Per.hasWritePer) return PermissionTypeEnum.publicWrite;
+      if (Per.hasReadPer) return PermissionTypeEnum.publicRead;
+      return PermissionTypeEnum.clbPrivate;
    }
    return 'private';
  }, [defaultPermission, permission]);
--- a/projects/app/src/components/support/permission/MemberManager/AddMemberModal.tsx
+++ b/projects/app/src/components/support/permission/MemberManager/AddMemberModal.tsx
@@ -26,12 +26,14 @@ import MyBox from '@fastgpt/web/components/common/MyBox';
 import { ChevronDownIcon } from '@chakra-ui/icons';
 import Avatar from '@/components/Avatar';
 import { useRequest } from '@fastgpt/web/hooks/useRequest';
+import { useTranslation } from 'next-i18next';

 export type AddModalPropsType = {
  onClose: () => void;
 };

 function AddMemberModal({ onClose }: AddModalPropsType) {
+  const { t } = useTranslation();
  const { userInfo } = useUserStore();

  const { permissionList, collaboratorList, onUpdateCollaborators, getPerLabelList } =
@@ -63,9 +65,12 @@ function AddMemberModal({ onClose }: AddModalPropsType) {

  const { mutate: onConfirm, isLoading: isUpdating } = useRequest({
    mutationFn: () => {
-      return onUpdateCollaborators(selectedMemberIdList, selectedPermission);
+      return onUpdateCollaborators({
+        tmbIds: selectedMemberIdList,
+        permission: selectedPermission
+      });
    },
-    successToast: '添加成功',
+    successToast: t('common.Add Success'),
    errorToast: 'Error',
    onSuccess() {
      onClose();
--- a/projects/app/src/components/support/permission/MemberManager/ManageModal.tsx
+++ b/projects/app/src/components/support/permission/MemberManager/ManageModal.tsx
@@ -39,7 +39,10 @@ function ManageModal({ onClose }: ManageModalProps) {

  const { mutate: onUpdate, isLoading: isUpdating } = useRequest({
    mutationFn: ({ tmbId, per }: { tmbId: string; per: PermissionValueType }) => {
-      return onUpdateCollaborators([tmbId], per);
+      return onUpdateCollaborators({
+        tmbIds: [tmbId],
+        permission: per
+      });
    },
    successToast: '更新成功',
    errorToast: 'Error'
--- a/projects/app/src/components/support/permission/MemberManager/PermissionSelect.tsx
+++ b/projects/app/src/components/support/permission/MemberManager/PermissionSelect.tsx
@@ -6,7 +6,8 @@ import {
  MenuList,
  Box,
  Radio,
-  useOutsideClick
+  useOutsideClick,
+  HStack
 } from '@chakra-ui/react';
 import React, { useMemo, useRef, useState } from 'react';
 import MyIcon from '@fastgpt/web/components/common/Icon';
@@ -142,9 +143,15 @@ function PermissionSelect({
            bottom={0}
            left={0}
          />
-          <Box position={'relative'} cursor={'pointer'} userSelect={'none'}>
+          <Flex
+            alignItems={'center'}
+            justifyContent={'center'}
+            position={'relative'}
+            cursor={'pointer'}
+            userSelect={'none'}
+          >
            {Button}
-          </Box>
+          </Flex>
        </Box>
        <MenuList
          minW={isOpen ? `${width}px !important` : 0}
@@ -182,7 +189,7 @@ function PermissionSelect({
                <Box ml={4}>
                  <Box>{item.name}</Box>
                  <Box color={'myGray.500'} fontSize={'mini'}>
-                    {item.description}
+                    {t(item.description)}
                  </Box>
                </Box>
              </Flex>
@@ -236,7 +243,7 @@ function PermissionSelect({
          {onDelete && (
            <>
              <MyDivider my={2} h={'2px'} borderColor={'myGray.200'} />
-              <Flex
+              <HStack
                {...MenuStyle}
                onClick={() => {
                  onDelete();
@@ -244,8 +251,8 @@ function PermissionSelect({
                }}
              >
                <MyIcon name="delete" w="20px" color="red.600" />
-                <Box color="red.600">{t('common.Delete')}</Box>
-              </Flex>
+                <Box color="red.600">{t('common.Remove')}</Box>
+              </HStack>
            </>
          )}
        </MenuList>
--- a/projects/app/src/components/support/permission/MemberManager/context.tsx
+++ b/projects/app/src/components/support/permission/MemberManager/context.tsx
@@ -1,5 +1,8 @@
 import { BoxProps, useDisclosure } from '@chakra-ui/react';
-import { CollaboratorItemType } from '@fastgpt/global/support/permission/collaborator';
+import {
+  CollaboratorItemType,
+  UpdateClbPermissionProps
+} from '@fastgpt/global/support/permission/collaborator';
 import { PermissionList } from '@fastgpt/global/support/permission/constant';
 import { Permission } from '@fastgpt/global/support/permission/controller';
 import { PermissionListType, PermissionValueType } from '@fastgpt/global/support/permission/type';
@@ -9,6 +12,7 @@ import { createContext } from 'use-context-selector';
 import dynamic from 'next/dynamic';

 import MemberListCard, { MemberListCardProps } from './MemberListCard';
+import { useRequest2 } from '@fastgpt/web/hooks/useRequest';
 const AddMemberModal = dynamic(() => import('./AddMemberModal'));
 const ManageModal = dynamic(() => import('./ManageModal'));

@@ -16,8 +20,9 @@ export type MemberManagerInputPropsType = {
  permission: Permission;
  onGetCollaboratorList: () => Promise<CollaboratorItemType[]>;
  permissionList: PermissionListType;
-  onUpdateCollaborators: (tmbIds: string[], permission: PermissionValueType) => any;
+  onUpdateCollaborators: (props: UpdateClbPermissionProps) => any;
  onDelOneCollaborator: (tmbId: string) => any;
+  refreshDeps?: any[];
 };
 export type MemberManagerPropsType = MemberManagerInputPropsType & {
  collaboratorList: CollaboratorItemType[];
@@ -55,24 +60,28 @@ export const CollaboratorContext = createContext<CollaboratorContextType>({
  permission: new Permission()
 });

-export const CollaboratorContextProvider = ({
+const CollaboratorContextProvider = ({
  permission,
  onGetCollaboratorList,
  permissionList,
  onUpdateCollaborators,
  onDelOneCollaborator,
+  refreshDeps = [],
  children
 }: MemberManagerInputPropsType & {
  children: (props: ChildrenProps) => ReactNode;
 }) => {
  const {
    data: collaboratorList = [],
-    refetch: refetchCollaboratorList,
-    isLoading: isFetchingCollaborator
-  } = useQuery(['collaboratorList'], onGetCollaboratorList);
+    runAsync: refetchCollaboratorList,
+    loading: isFetchingCollaborator
+  } = useRequest2(onGetCollaboratorList, {
+    manual: false,
+    refreshDeps
+  });

-  const onUpdateCollaboratorsThen = async (tmbIds: string[], permission: PermissionValueType) => {
-    await onUpdateCollaborators(tmbIds, permission);
+  const onUpdateCollaboratorsThen = async (props: UpdateClbPermissionProps) => {
+    await onUpdateCollaborators(props);
    refetchCollaboratorList();
  };
  const onDelOneCollaboratorThen = async (tmbId: string) => {
@@ -136,3 +145,5 @@ export const CollaboratorContextProvider = ({
    </CollaboratorContext.Provider>
  );
 };
+
+export default CollaboratorContextProvider;
--- a/projects/app/src/components/support/permission/PermissionTags/index.tsx
+++ b/projects/app/src/components/support/permission/PermissionTags/index.tsx
@@ -0,0 +1,66 @@
+import React, { useMemo } from 'react';
+import { Permission } from '@fastgpt/global/support/permission/controller';
+import { PermissionListType } from '@fastgpt/global/support/permission/type';
+import { PermissionList } from '@fastgpt/global/support/permission/constant';
+import MyTag from '@fastgpt/web/components/common/Tag/index';
+import { HStack } from '@chakra-ui/react';
+import { useTranslation } from 'next-i18next';
+
+const PermissionTag = ({
+  permission,
+  permissionList
+}: {
+  permission: Permission;
+  permissionList: PermissionListType;
+}) => {
+  const { t } = useTranslation();
+
+  const { commonLabel, otherLabels } = useMemo(() => {
+    const Per = new Permission({ per: permission.value });
+
+    const commonLabel = (() => {
+      if (permission.isOwner) return t('permission.Owner');
+      if (permission.hasManagePer) return PermissionList['manage'].name;
+      if (permission.hasWritePer) return PermissionList['write'].name;
+      if (permission.hasReadPer) return PermissionList['read'].name;
+
+      return;
+    })();
+
+    const otherLabels: string[] = [];
+    Object.values(permissionList).forEach((item) => {
+      if (item.checkBoxType === 'multiple') {
+        if (Per.checkPer(item.value)) {
+          otherLabels.push(item.name);
+        }
+      }
+    });
+
+    return {
+      commonLabel,
+      otherLabels
+    };
+  }, [
+    permission.hasManagePer,
+    permission.hasReadPer,
+    permission.hasWritePer,
+    permission.value,
+    permissionList
+  ]);
+  return (
+    <HStack>
+      {commonLabel && (
+        <MyTag type="fill" colorSchema="blue">
+          {commonLabel}
+        </MyTag>
+      )}
+      {otherLabels.map((tag, i) => (
+        <MyTag key={i} type="fill" colorSchema="purple">
+          {tag}
+        </MyTag>
+      ))}
+    </HStack>
+  );
+};
+
+export default PermissionTag;
--- a/projects/app/src/components/support/user/team/TeamManageModal/components/InviteModal.tsx
+++ b/projects/app/src/components/support/user/team/TeamManageModal/components/InviteModal.tsx
@@ -3,12 +3,18 @@ import MyModal from '@fastgpt/web/components/common/MyModal';
 import { useTranslation } from 'next-i18next';
 import { ModalCloseButton, ModalBody, Box, ModalFooter, Button } from '@chakra-ui/react';
 import TagTextarea from '@/components/common/Textarea/TagTextarea';
-import { TeamMemberRoleEnum } from '@fastgpt/global/support/user/team/constant';
 import { useRequest } from '@fastgpt/web/hooks/useRequest';
 import { postInviteTeamMember } from '@/web/support/user/team/api';
 import { useConfirm } from '@fastgpt/web/hooks/useConfirm';
 import type { InviteMemberResponse } from '@fastgpt/global/support/user/team/controller.d';
 import MySelect from '@fastgpt/web/components/common/MySelect';
+import {
+  ManagePermissionVal,
+  ReadPermissionVal,
+  WritePermissionVal
+} from '@fastgpt/global/support/permission/constant';
+import { useI18n } from '@/web/context/I18n';
+import { useUserStore } from '@/web/support/user/useUserStore';

 const InviteModal = ({
  teamId,
@@ -20,25 +26,37 @@ const InviteModal = ({
  onSuccess: () => void;
 }) => {
  const { t } = useTranslation();
+  const { userT } = useI18n();
  const { ConfirmModal, openConfirm } = useConfirm({
    title: t('user.team.Invite Member Result Tip'),
    showCancel: false
  });
+  const { userInfo } = useUserStore();
+
  const [inviteUsernames, setInviteUsernames] = useState<string[]>([]);
  const inviteTypes = useMemo(
    () => [
      {
-        alias: t('user.team.Invite Role Visitor Alias'),
-        label: t('user.team.Invite Role Visitor Tip'),
-        value: TeamMemberRoleEnum.visitor
+        label: userT('permission.Read'),
+        description: userT('permission.Read desc'),
+        value: ReadPermissionVal
      },
      {
-        alias: t('user.team.Invite Role Admin Alias'),
-        label: t('user.team.Invite Role Admin Tip'),
-        value: TeamMemberRoleEnum.admin
-      }
+        label: userT('permission.Write'),
+        description: userT('permission.Write tip'),
+        value: WritePermissionVal
+      },
+      ...(userInfo?.team?.permission.isOwner
+        ? [
+            {
+              label: userT('permission.Manage'),
+              description: userT('permission.Manage tip'),
+              value: ManagePermissionVal
+            }
+          ]
+        : [])
    ],
-    [t]
+    [userInfo?.team?.permission.isOwner, userT]
  );
  const [selectedInviteType, setSelectInviteType] = useState(inviteTypes[0].value);

@@ -47,7 +65,7 @@ const InviteModal = ({
      return postInviteTeamMember({
        teamId,
        usernames: inviteUsernames,
-        role: selectedInviteType
+        permission: selectedInviteType
      });
    },
    onSuccess(res: InviteMemberResponse) {
--- a/projects/app/src/components/support/user/team/TeamManageModal/components/MemberTable.tsx
+++ b/projects/app/src/components/support/user/team/TeamManageModal/components/MemberTable.tsx
@@ -1,47 +1,51 @@
 import Avatar from '@/components/Avatar';
 import MyIcon from '@fastgpt/web/components/common/Icon';
-import { Box, MenuButton, Table, TableContainer, Tbody, Td, Th, Thead, Tr } from '@chakra-ui/react';
+import {
+  Box,
+  HStack,
+  MenuButton,
+  Table,
+  TableContainer,
+  Tbody,
+  Td,
+  Th,
+  Thead,
+  Tr
+} from '@chakra-ui/react';
 import {
  TeamMemberRoleEnum,
-  TeamMemberRoleMap,
  TeamMemberStatusMap
 } from '@fastgpt/global/support/user/team/constant';
-import MyMenu from '@fastgpt/web/components/common/MyMenu';
 import { useTranslation } from 'next-i18next';
 import { useContextSelector } from 'use-context-selector';
 import { useUserStore } from '@/web/support/user/useUserStore';
 import { TeamModalContext } from '../context';
-import { useRequest } from '@fastgpt/web/hooks/useRequest';
-import { delRemoveMember } from '@/web/support/user/team/api';
 import { useConfirm } from '@fastgpt/web/hooks/useConfirm';
 import MyBox from '@fastgpt/web/components/common/MyBox';
+import PermissionTags from '@/components/support/permission/PermissionTags';
+import { TeamPermissionList } from '@fastgpt/global/support/permission/user/constant';
+import PermissionSelect from '@/components/support/permission/MemberManager/PermissionSelect';
+import { CollaboratorContext } from '@/components/support/permission/MemberManager/context';
+import { delRemoveMember } from '@/web/support/user/team/api';

 function MemberTable() {
  const { userInfo } = useUserStore();
  const { t } = useTranslation();
  const { members, refetchMembers } = useContextSelector(TeamModalContext, (v) => v);
+  const { onUpdateCollaborators } = useContextSelector(CollaboratorContext, (v) => v);

  const { ConfirmModal: ConfirmRemoveMemberModal, openConfirm: openRemoveMember } = useConfirm({
    type: 'delete'
  });

-  const { mutate: onRemoveMember, isLoading: isRemovingMember } = useRequest({
-    mutationFn: delRemoveMember,
-    onSuccess() {
-      refetchMembers();
-    },
-    successToast: t('user.team.Remove Member Success'),
-    errorToast: t('user.team.Remove Member Failed')
-  });
-
  return (
-    <MyBox isLoading={isRemovingMember}>
+    <MyBox>
      <TableContainer overflow={'unset'} fontSize={'sm'}>
        <Table overflow={'unset'}>
          <Thead bg={'myWhite.400'}>
            <Tr>
              <Th borderRadius={'none !important'}>{t('common.Username')}</Th>
-              <Th>{t('user.team.Role')}</Th>
+              <Th>{t('common.Permission')}</Th>
              <Th>{t('common.Status')}</Th>
              <Th borderRadius={'none !important'}>{t('common.Action')}</Th>
            </Tr>
@@ -49,13 +53,20 @@ function MemberTable() {
          <Tbody>
            {members.map((item) => (
              <Tr key={item.userId} overflow={'unset'}>
-                <Td display={'flex'} alignItems={'center'}>
-                  <Avatar src={item.avatar} w={['18px', '22px']} />
-                  <Box flex={'1 0 0'} w={0} ml={1} className={'textEllipsis'}>
-                    {item.memberName}
-                  </Box>
+                <Td>
+                  <HStack>
+                    <Avatar src={item.avatar} w={['18px', '22px']} />
+                    <Box maxW={'150px'} className={'textEllipsis'}>
+                      {item.memberName}
+                    </Box>
+                  </HStack>
+                </Td>
+                <Td>
+                  <PermissionTags
+                    permission={item.permission}
+                    permissionList={TeamPermissionList}
+                  />
                </Td>
-                <Td>{t(TeamMemberRoleMap[item.role]?.label || '')}</Td>
                <Td color={TeamMemberStatusMap[item.status].color}>
                  {t(TeamMemberStatusMap[item.status]?.label || '')}
                </Td>
@@ -63,9 +74,8 @@ function MemberTable() {
                  {userInfo?.team.permission.hasManagePer &&
                    item.role !== TeamMemberRoleEnum.owner &&
                    item.tmbId !== userInfo?.team.tmbId && (
-                      <MyMenu
-                        width={20}
-                        trigger="hover"
+                      <PermissionSelect
+                        value={item.permission.value}
                        Button={
                          <MenuButton
                            _hover={{
@@ -79,27 +89,21 @@ function MemberTable() {
                            <MyIcon name={'edit'} cursor={'pointer'} w="1rem" />
                          </MenuButton>
                        }
-                        menuList={[
-                          {
-                            children: [
-                              {
-                                label: t('user.team.Remove Member Tip'),
-                                onClick: () =>
-                                  openRemoveMember(
-                                    () =>
-                                      onRemoveMember({
-                                        teamId: item.teamId,
-                                        memberId: item.tmbId
-                                      }),
-                                    undefined,
-                                    t('user.team.Remove Member Confirm Tip', {
-                                      username: item.memberName
-                                    })
-                                  )()
-                              }
-                            ]
-                          }
-                        ]}
+                        onChange={(permission) => {
+                          onUpdateCollaborators({
+                            tmbIds: [item.tmbId],
+                            permission
+                          });
+                        }}
+                        onDelete={() => {
+                          openRemoveMember(
+                            () => delRemoveMember(item.tmbId).then(refetchMembers),
+                            undefined,
+                            t('user.team.Remove Member Confirm Tip', {
+                              username: item.memberName
+                            })
+                          )();
+                        }}
                      />
                    )}
                </Td>
--- a/projects/app/src/components/support/user/team/TeamManageModal/components/PermissionManage/AddManager.tsx
+++ b/projects/app/src/components/support/user/team/TeamManageModal/components/PermissionManage/AddManager.tsx
@@ -38,7 +38,7 @@ function AddManagerModal({ onClose, onSuccess }: { onClose: () => void; onSucces
    mutationFn: async () => {
      return updateMemberPermission({
        permission: ManagePermissionVal,
-        memberIds: selected.map((item) => {
+        tmbIds: selected.map((item) => {
          return item.tmbId;
        })
      });
--- a/projects/app/src/components/support/user/team/TeamManageModal/context.tsx
+++ b/projects/app/src/components/support/user/team/TeamManageModal/context.tsx
@@ -1,14 +1,26 @@
-import React, { ReactNode, useState } from 'react';
+import React, { ReactNode, useCallback, useState } from 'react';
 import { createContext } from 'use-context-selector';
 import type { EditTeamFormDataType } from './components/EditInfoModal';
 import dynamic from 'next/dynamic';
 import { useQuery } from '@tanstack/react-query';
-import { getTeamList, getTeamMembers, putSwitchTeam } from '@/web/support/user/team/api';
+import {
+  delMemberPermission,
+  getTeamList,
+  getTeamMembers,
+  putSwitchTeam,
+  updateMemberPermission
+} from '@/web/support/user/team/api';
 import { TeamMemberStatusEnum } from '@fastgpt/global/support/user/team/constant';
 import { useUserStore } from '@/web/support/user/useUserStore';
 import type { TeamTmbItemType, TeamMemberItemType } from '@fastgpt/global/support/user/team/type';
-import { useRequest } from '@fastgpt/web/hooks/useRequest';
+import { useRequest, useRequest2 } from '@fastgpt/web/hooks/useRequest';
 import { useTranslation } from 'next-i18next';
+import CollaboratorContextProvider from '@/components/support/permission/MemberManager/context';
+import { TeamPermissionList } from '@fastgpt/global/support/permission/user/constant';
+import {
+  CollaboratorItemType,
+  UpdateClbPermissionProps
+} from '@fastgpt/global/support/permission/collaborator';

 const EditInfoModal = dynamic(() => import('./components/EditInfoModal'));

@@ -55,12 +67,35 @@ export const TeamModalContextProvider = ({ children }: { children: ReactNode })
  // member action
  const {
    data: members = [],
-    refetch: refetchMembers,
-    isLoading: loadingMembers
-  } = useQuery(['getMembers', userInfo?.team?.teamId], () => {
-    if (!userInfo?.team?.teamId) return [];
-    return getTeamMembers();
-  });
+    runAsync: refetchMembers,
+    loading: loadingMembers
+  } = useRequest2(
+    () => {
+      if (!userInfo?.team?.teamId) return Promise.resolve([]);
+      return getTeamMembers();
+    },
+    {
+      manual: false,
+      refreshDeps: [userInfo?.team?.teamId]
+    }
+  );
+
+  const onGetClbList = useCallback(() => {
+    return refetchMembers().then((res) =>
+      res.map<CollaboratorItemType>((member) => ({
+        teamId: member.teamId,
+        tmbId: member.tmbId,
+        permission: member.permission,
+        name: member.memberName,
+        avatar: member.avatar
+      }))
+    );
+  }, [refetchMembers]);
+  const { runAsync: onUpdatePer, loading: isUpdatingPer } = useRequest2(
+    (props: UpdateClbPermissionProps) => {
+      return updateMemberPermission(props);
+    }
+  );

  const { mutate: onSwitchTeam, isLoading: isSwitchingTeam } = useRequest({
    mutationFn: async (teamId: string) => {
@@ -70,7 +105,7 @@ export const TeamModalContextProvider = ({ children }: { children: ReactNode })
    errorToast: t('user.team.Switch Team Failed')
  });

-  const isLoading = isLoadingTeams || isSwitchingTeam || loadingMembers;
+  const isLoading = isLoadingTeams || isSwitchingTeam || loadingMembers || isUpdatingPer;

  const contextValue = {
    myTeams,
@@ -86,16 +121,30 @@ export const TeamModalContextProvider = ({ children }: { children: ReactNode })

  return (
    <TeamModalContext.Provider value={contextValue}>
-      {children}
-      {!!editTeamData && (
-        <EditInfoModal
-          defaultData={editTeamData}
-          onClose={() => setEditTeamData(undefined)}
-          onSuccess={() => {
-            refetchTeams();
-            initUserInfo();
-          }}
-        />
+      {userInfo?.team?.permission && (
+        <CollaboratorContextProvider
+          permission={userInfo?.team?.permission}
+          permissionList={TeamPermissionList}
+          onGetCollaboratorList={onGetClbList}
+          onUpdateCollaborators={onUpdatePer}
+          onDelOneCollaborator={delMemberPermission}
+        >
+          {() => (
+            <>
+              {children}
+              {!!editTeamData && (
+                <EditInfoModal
+                  defaultData={editTeamData}
+                  onClose={() => setEditTeamData(undefined)}
+                  onSuccess={() => {
+                    refetchTeams();
+                    initUserInfo();
+                  }}
+                />
+              )}
+            </>
+          )}
+        </CollaboratorContextProvider>
      )}
    </TeamModalContext.Provider>
  );