Permission (#1687)

Co-authored-by: Archer <545436317@qq.com> Co-authored-by: Finley Ge <32237950+FinleyGe@users.noreply.github.com>
2025-08-01 11:58:38 +00:00 · 2024-06-04 17:52:00 +08:00
parent fcb915c988
commit 19c8a06d51
109 changed files with 2291 additions and 1091 deletions
--- a/projects/app/src/components/support/permission/DefaultPerList/index.tsx
+++ b/projects/app/src/components/support/permission/DefaultPerList/index.tsx
@@ -0,0 +1,49 @@
+import { Box, BoxProps } from '@chakra-ui/react';
+import MySelect from '@fastgpt/web/components/common/MySelect';
+import { useTranslation } from 'next-i18next';
+import React from 'react';
+import type { PermissionValueType } from '@fastgpt/global/support/permission/type';
+
+export enum defaultPermissionEnum {
+  private = 'private',
+  read = 'read',
+  edit = 'edit'
+}
+
+type Props = Omit<BoxProps, 'onChange'> & {
+  per: PermissionValueType;
+  defaultPer: PermissionValueType;
+  readPer: PermissionValueType;
+  writePer: PermissionValueType;
+  onChange: (v: PermissionValueType) => void;
+};
+
+const DefaultPermissionList = ({
+  per,
+  defaultPer,
+  readPer,
+  writePer,
+  onChange,
+  ...styles
+}: Props) => {
+  const { t } = useTranslation();
+  const defaultPermissionSelectList = [
+    { label: '仅协作者访问', value: defaultPer },
+    { label: '团队可访问', value: readPer },
+    { label: '团队可编辑', value: writePer }
+  ];
+
+  return (
+    <Box {...styles}>
+      <MySelect
+        list={defaultPermissionSelectList}
+        value={per}
+        onchange={(v) => {
+          onChange(v);
+        }}
+      />
+    </Box>
+  );
+};
+
+export default DefaultPermissionList;
--- a/projects/app/src/components/support/permission/IconText/index.tsx
+++ b/projects/app/src/components/support/permission/IconText/index.tsx
@@ -1,19 +1,34 @@
-import React from 'react';
+import React, { useMemo } from 'react';
 import { PermissionTypeEnum, PermissionTypeMap } from '@fastgpt/global/support/permission/constant';
 import { Box, Flex, FlexProps } from '@chakra-ui/react';
 import MyIcon from '@fastgpt/web/components/common/Icon';
 import { useTranslation } from 'next-i18next';
+import { PermissionValueType } from '@fastgpt/global/support/permission/type';
+import { Permission } from '@fastgpt/global/support/permission/controller';

 const PermissionIconText = ({
  permission,
+  defaultPermission,
  ...props
-}: { permission: `${PermissionTypeEnum}` } & FlexProps) => {
+}: {
+  permission?: `${PermissionTypeEnum}`;
+  defaultPermission?: PermissionValueType;
+} & FlexProps) => {
  const { t } = useTranslation();
-  return PermissionTypeMap[permission] ? (
+
+  const per = useMemo(() => {
+    if (permission) return permission;
+    if (defaultPermission) {
+      return new Permission({ per: defaultPermission }).hasReadPer ? 'public' : 'private';
+    }
+    return 'private';
+  }, [defaultPermission, permission]);
+
+  return PermissionTypeMap[per] ? (
    <Flex alignItems={'center'} {...props}>
-      <MyIcon name={PermissionTypeMap[permission]?.iconLight as any} w={'14px'} />
+      <MyIcon name={PermissionTypeMap[per]?.iconLight as any} w={'14px'} />
      <Box ml={'2px'} lineHeight={1}>
-        {t(PermissionTypeMap[permission]?.label)}
+        {t(PermissionTypeMap[per]?.label)}
      </Box>
    </Flex>
  ) : null;
--- a/projects/app/src/components/support/permission/MemberManager/AddMemberModal.tsx
+++ b/projects/app/src/components/support/permission/MemberManager/AddMemberModal.tsx
@@ -0,0 +1,216 @@
+import {
+  Flex,
+  Box,
+  Grid,
+  ModalBody,
+  InputGroup,
+  InputLeftElement,
+  Input,
+  Checkbox,
+  ModalFooter,
+  Button,
+  useToast
+} from '@chakra-ui/react';
+import MyModal from '@fastgpt/web/components/common/MyModal';
+import MyIcon from '@fastgpt/web/components/common/Icon';
+import { useContextSelector } from 'use-context-selector';
+import MyAvatar from '@/components/Avatar';
+import { useMemo, useState } from 'react';
+import PermissionSelect from './PermissionSelect';
+import PermissionTags from './PermissionTags';
+import { CollaboratorContext } from './context';
+import { useQuery } from '@tanstack/react-query';
+import { useUserStore } from '@/web/support/user/useUserStore';
+import { getTeamMembers } from '@/web/support/user/team/api';
+import MyBox from '@fastgpt/web/components/common/MyBox';
+import { Permission } from '@fastgpt/global/support/permission/controller';
+import { ChevronDownIcon } from '@chakra-ui/icons';
+import Avatar from '@/components/Avatar';
+import { useRequest } from '@fastgpt/web/hooks/useRequest';
+
+export type AddModalPropsType = {
+  onClose: () => void;
+};
+
+export function AddMemberModal({ onClose }: AddModalPropsType) {
+  const toast = useToast();
+  const { userInfo } = useUserStore();
+
+  const { permissionList, collaboratorList, onUpdateCollaborators, getPreLabelList } =
+    useContextSelector(CollaboratorContext, (v) => v);
+  const [searchText, setSearchText] = useState<string>('');
+  const {
+    data: members = [],
+    refetch: refetchMembers,
+    isLoading: loadingMembers
+  } = useQuery(['getMembers', userInfo?.team?.teamId], async () => {
+    if (!userInfo?.team?.teamId) return [];
+    const members = await getTeamMembers();
+    return members;
+  });
+  const filterMembers = useMemo(() => {
+    return members.filter((item) => {
+      if (item.permission.isOwner) return false;
+      if (item.tmbId === userInfo?.team?.tmbId) return false;
+      if (!searchText) return true;
+      return item.memberName.includes(searchText);
+    });
+  }, [members, searchText, userInfo?.team?.tmbId]);
+
+  const [selectedMemberIdList, setSelectedMembers] = useState<string[]>([]);
+  const [selectedPermission, setSelectedPermission] = useState(permissionList['read'].value);
+  const perLabel = useMemo(() => {
+    return getPreLabelList(selectedPermission).join('、');
+  }, [getPreLabelList, selectedPermission]);
+
+  const { mutate: onConfirm, isLoading: isUpdating } = useRequest({
+    mutationFn: () => {
+      return onUpdateCollaborators(selectedMemberIdList, selectedPermission);
+    },
+    successToast: '添加成功',
+    errorToast: 'Error',
+    onSuccess() {
+      onClose();
+    }
+  });
+
+  return (
+    <MyModal isOpen onClose={onClose} iconSrc="modal/AddClb" title="添加协作者" minW="800px">
+      <ModalBody>
+        <MyBox
+          isLoading={loadingMembers}
+          display={'grid'}
+          minH="400px"
+          border="1px solid"
+          borderColor="myGray.200"
+          borderRadius="0.5rem"
+          gridTemplateColumns="55% 45%"
+        >
+          <Flex
+            flexDirection="column"
+            borderRight="1px solid"
+            borderColor="myGray.200"
+            p="4"
+            minH="200px"
+          >
+            <InputGroup alignItems="center" h="32px" my="2" py="1">
+              <InputLeftElement>
+                <MyIcon name="common/searchLight" w="16px" color={'myGray.500'} />
+              </InputLeftElement>
+              <Input
+                placeholder="搜索用户名"
+                fontSize="lg"
+                bgColor="myGray.50"
+                onChange={(e) => setSearchText(e.target.value)}
+              />
+            </InputGroup>
+            <Flex flexDirection="column" mt="2">
+              {filterMembers.map((member) => {
+                const onChange = () => {
+                  if (selectedMemberIdList.includes(member.tmbId)) {
+                    setSelectedMembers(selectedMemberIdList.filter((v) => v !== member.tmbId));
+                  } else {
+                    setSelectedMembers([...selectedMemberIdList, member.tmbId]);
+                  }
+                };
+                const collaborator = collaboratorList.find((v) => v.tmbId === member.tmbId);
+                return (
+                  <Flex
+                    key={member.tmbId}
+                    mt="1"
+                    py="1"
+                    px="3"
+                    borderRadius="sm"
+                    alignItems="center"
+                    _hover={{
+                      bgColor: 'myGray.50',
+                      cursor: 'pointer'
+                    }}
+                  >
+                    <Checkbox
+                      size="lg"
+                      mr="3"
+                      isChecked={selectedMemberIdList.includes(member.tmbId)}
+                      onChange={onChange}
+                    />
+                    <Flex
+                      flexDirection="row"
+                      onClick={onChange}
+                      w="full"
+                      justifyContent="space-between"
+                    >
+                      <Flex flexDirection="row" alignItems="center">
+                        <MyAvatar src={member.avatar} w="32px" />
+                        <Box ml="2">{member.memberName}</Box>
+                      </Flex>
+                      {!!collaborator && <PermissionTags permission={collaborator.permission} />}
+                    </Flex>
+                  </Flex>
+                );
+              })}
+            </Flex>
+          </Flex>
+          <Flex p="4" flexDirection="column">
+            <Box>已选: {selectedMemberIdList.length}</Box>
+            <Flex flexDirection="column" mt="2">
+              {selectedMemberIdList.map((tmbId) => {
+                const member = filterMembers.find((v) => v.tmbId === tmbId);
+                return member ? (
+                  <Flex
+                    key={tmbId}
+                    alignItems="center"
+                    justifyContent="space-between"
+                    py="2"
+                    px={3}
+                    borderRadius={'md'}
+                    _hover={{ bg: 'myGray.50' }}
+                    _notLast={{ mb: 2 }}
+                  >
+                    <Avatar src={member.avatar} w="24px" />
+                    <Box w="full" fontSize="lg">
+                      {member.memberName}
+                    </Box>
+                    <MyIcon
+                      name="common/closeLight"
+                      w="16px"
+                      cursor={'pointer'}
+                      _hover={{
+                        color: 'red.600'
+                      }}
+                      onClick={() =>
+                        setSelectedMembers(selectedMemberIdList.filter((v) => v !== tmbId))
+                      }
+                    />
+                  </Flex>
+                ) : null;
+              })}
+            </Flex>
+          </Flex>
+        </MyBox>
+      </ModalBody>
+      <ModalFooter>
+        <PermissionSelect
+          value={selectedPermission}
+          Button={
+            <Flex
+              alignItems={'center'}
+              bg={'myGray.50'}
+              border="base"
+              fontSize={'sm'}
+              px={3}
+              borderRadius={'md'}
+              h={'32px'}
+            >
+              {perLabel}
+              <ChevronDownIcon fontSize={'lg'} />
+            </Flex>
+          }
+          onChange={(v) => setSelectedPermission(v)}
+        />
+        <Button isLoading={isUpdating} ml="4" h={'32px'} onClick={onConfirm}>
+          确认
+        </Button>
+      </ModalFooter>
+    </MyModal>
+  );
+}
--- a/projects/app/src/components/support/permission/MemberManager/ManageModal.tsx
+++ b/projects/app/src/components/support/permission/MemberManager/ManageModal.tsx
@@ -0,0 +1,119 @@
+import {
+  ModalBody,
+  Table,
+  TableContainer,
+  Tbody,
+  Th,
+  Thead,
+  Tr,
+  Td,
+  Box,
+  Flex
+} from '@chakra-ui/react';
+import MyModal from '@fastgpt/web/components/common/MyModal';
+import React from 'react';
+import { useContextSelector } from 'use-context-selector';
+import PermissionSelect from './PermissionSelect';
+import PermissionTags from './PermissionTags';
+import Avatar from '@/components/Avatar';
+import { CollaboratorContext } from './context';
+import MyIcon from '@fastgpt/web/components/common/Icon';
+import { useRequest } from '@fastgpt/web/hooks/useRequest';
+import { PermissionValueType } from '@fastgpt/global/support/permission/type';
+import { useUserStore } from '@/web/support/user/useUserStore';
+import EmptyTip from '@fastgpt/web/components/common/EmptyTip';
+
+export type ManageModalProps = {
+  onClose: () => void;
+};
+
+function ManageModal({ onClose }: ManageModalProps) {
+  const { userInfo } = useUserStore();
+  const { collaboratorList, onUpdateCollaborators, onDelOneCollaborator } = useContextSelector(
+    CollaboratorContext,
+    (v) => v
+  );
+
+  const { mutate: onDelete, isLoading: isDeleting } = useRequest({
+    mutationFn: (tmbId: string) => onDelOneCollaborator(tmbId)
+  });
+
+  const { mutate: onUpdate, isLoading: isUpdating } = useRequest({
+    mutationFn: ({ tmbId, per }: { tmbId: string; per: PermissionValueType }) => {
+      return onUpdateCollaborators([tmbId], per);
+    },
+    successToast: '更新成功',
+    errorToast: 'Error'
+  });
+
+  const loading = isDeleting || isUpdating;
+
+  return (
+    <MyModal
+      isLoading={loading}
+      isOpen
+      onClose={onClose}
+      minW="600px"
+      title="管理协作者"
+      iconSrc="common/settingLight"
+    >
+      <ModalBody>
+        <TableContainer borderRadius="md" minH="400px">
+          <Table>
+            <Thead bg="myGray.100">
+              <Tr>
+                <Th border="none">名称</Th>
+                <Th border="none">权限</Th>
+                <Th border="none">操作</Th>
+              </Tr>
+            </Thead>
+            <Tbody>
+              {collaboratorList?.map((item) => {
+                return (
+                  <Tr
+                    key={item.tmbId}
+                    _hover={{
+                      bg: 'myGray.50'
+                    }}
+                  >
+                    <Td border="none">
+                      <Flex alignItems="center">
+                        <Avatar src={item.avatar} w="24px" mr={2} />
+                        {item.name}
+                      </Flex>
+                    </Td>
+                    <Td border="none">
+                      <PermissionTags permission={item.permission} />
+                    </Td>
+                    <Td border="none">
+                      {item.tmbId !== userInfo?.team?.tmbId && (
+                        <PermissionSelect
+                          Button={
+                            <MyIcon name={'edit'} w={'16px'} _hover={{ color: 'primary.600' }} />
+                          }
+                          value={item.permission}
+                          onChange={(per) => {
+                            onUpdate({
+                              tmbId: item.tmbId,
+                              per
+                            });
+                          }}
+                          onDelete={() => {
+                            onDelete(item.tmbId);
+                          }}
+                        />
+                      )}
+                    </Td>
+                  </Tr>
+                );
+              })}
+            </Tbody>
+          </Table>
+          {collaboratorList?.length === 0 && <EmptyTip text={'暂无协作者'} />}
+        </TableContainer>
+      </ModalBody>
+    </MyModal>
+  );
+}
+
+export default ManageModal;
--- a/projects/app/src/components/support/permission/MemberManager/PermissionSelect.tsx
+++ b/projects/app/src/components/support/permission/MemberManager/PermissionSelect.tsx
@@ -0,0 +1,243 @@
+import {
+  ButtonProps,
+  Flex,
+  Menu,
+  MenuButton,
+  MenuList,
+  Box,
+  Radio,
+  useOutsideClick
+} from '@chakra-ui/react';
+import React, { useMemo, useRef, useState } from 'react';
+import MyIcon from '@fastgpt/web/components/common/Icon';
+import { PermissionValueType } from '@fastgpt/global/support/permission/type';
+import { useContextSelector } from 'use-context-selector';
+import { Permission } from '@fastgpt/global/support/permission/controller';
+import { CollaboratorContext } from './context';
+import { useTranslation } from 'next-i18next';
+import MyDivider from '@fastgpt/web/components/common/MyDivider';
+
+export type PermissionSelectProps = {
+  value?: PermissionValueType;
+  onChange: (value: PermissionValueType) => void;
+  trigger?: 'hover' | 'click';
+  offset?: [number, number];
+  Button: React.ReactNode;
+
+  onDelete?: () => void;
+} & Omit<ButtonProps, 'onChange' | 'value'>;
+
+const MenuStyle = {
+  py: 2,
+  px: 3,
+  _hover: {
+    bg: 'myGray.50'
+  },
+  borderRadius: 'md',
+  cursor: 'pointer',
+  fontSize: 'sm'
+};
+
+function PermissionSelect({
+  value,
+  onChange,
+  trigger = 'click',
+  offset = [0, 5],
+  Button,
+  width = 'auto',
+  onDelete,
+  ...props
+}: PermissionSelectProps) {
+  const { t } = useTranslation();
+  const { permissionList } = useContextSelector(CollaboratorContext, (v) => v);
+  const ref = useRef<HTMLDivElement>(null);
+  const closeTimer = useRef<any>();
+
+  const [isOpen, setIsOpen] = useState(false);
+
+  const permissionSelectList = useMemo(() => {
+    const list = Object.entries(permissionList).map(([key, value]) => {
+      return {
+        name: value.name,
+        value: value.value,
+        description: value.description,
+        checkBoxType: value.checkBoxType
+      };
+    });
+
+    return {
+      singleCheckBoxList: list.filter((item) => item.checkBoxType === 'single'),
+      multipleCheckBoxList: list.filter((item) => item.checkBoxType === 'multiple')
+    };
+  }, [permissionList]);
+  const selectedSingleValue = useMemo(() => {
+    const per = new Permission({ per: value });
+
+    if (per.hasManagePer) return permissionList['manage'].value;
+    if (per.hasWritePer) return permissionList['write'].value;
+
+    return permissionList['read'].value;
+  }, [permissionList, value]);
+  const selectedMultipleValues = useMemo(() => {
+    const per = new Permission({ per: value });
+
+    return permissionSelectList.multipleCheckBoxList
+      .filter((item) => {
+        return per.checkPer(item.value);
+      })
+      .map((item) => item.value);
+  }, [permissionSelectList.multipleCheckBoxList, value]);
+
+  useOutsideClick({
+    ref: ref,
+    handler: () => {
+      setIsOpen(false);
+    }
+  });
+
+  return (
+    <Menu offset={offset} isOpen={isOpen} autoSelect={false} direction={'ltr'}>
+      <Box
+        ref={ref}
+        onMouseEnter={() => {
+          if (trigger === 'hover') {
+            setIsOpen(true);
+          }
+          clearTimeout(closeTimer.current);
+        }}
+        onMouseLeave={() => {
+          if (trigger === 'hover') {
+            closeTimer.current = setTimeout(() => {
+              setIsOpen(false);
+            }, 100);
+          }
+        }}
+      >
+        <Box
+          position={'relative'}
+          onClickCapture={() => {
+            if (trigger === 'click') {
+              setIsOpen(!isOpen);
+            }
+          }}
+        >
+          <MenuButton
+            w={'100%'}
+            h={'100%'}
+            position={'absolute'}
+            top={0}
+            right={0}
+            bottom={0}
+            left={0}
+          />
+          <Box position={'relative'} cursor={'pointer'} userSelect={'none'}>
+            {Button}
+          </Box>
+        </Box>
+        <MenuList
+          minW={isOpen ? `${width}px !important` : 0}
+          p="3"
+          border={'1px solid #fff'}
+          boxShadow={
+            '0px 2px 4px rgba(161, 167, 179, 0.25), 0px 0px 1px rgba(121, 141, 159, 0.25);'
+          }
+          zIndex={99}
+          overflowY={'auto'}
+        >
+          {/* The list of single select permissions */}
+          {permissionSelectList.singleCheckBoxList.map((item) => {
+            const change = () => {
+              const per = new Permission({ per: value });
+              per.removePer(selectedSingleValue);
+              per.addPer(item.value);
+              onChange(per.value);
+              setIsOpen(false);
+            };
+
+            return (
+              <Flex
+                key={item.value}
+                {...(selectedSingleValue === item.value
+                  ? {
+                      color: 'primary.600'
+                    }
+                  : {})}
+                {...MenuStyle}
+                onClick={change}
+                maxW={['70vw', '300px']}
+              >
+                <Radio size="lg" isChecked={selectedSingleValue === item.value} />
+                <Box ml={4}>
+                  <Box>{item.name}</Box>
+                  <Box color={'myGray.500'}>{item.description}</Box>
+                </Box>
+              </Flex>
+            );
+          })}
+
+          {/* <MyDivider my={3} />
+
+          {multipleValues.length > 0 && <Box m="4">其他权限（多选）</Box>} */}
+
+          {/* The list of multiple select permissions */}
+          {/* {list
+            .filter((item) => item.type === 'multiple')
+            .map((item) => {
+              const change = () => {
+                if (checkPermission(valueState, item.value)) {
+                  setValueState(new Permission(valueState).remove(item.value).value);
+                } else {
+                  setValueState(new Permission(valueState).add(item.value).value);
+                }
+              };
+              return (
+                <Flex
+                  key={item.value}
+                  {...(checkPermission(valueState, item.value)
+                    ? {
+                        color: 'primary.500',
+                        bg: 'myWhite.300'
+                      }
+                    : {})}
+                  whiteSpace="pre-wrap"
+                  flexDirection="row"
+                  justifyContent="start"
+                  p="2"
+                  _hover={{
+                    bg: 'myGray.50'
+                  }}
+                >
+                  <Checkbox
+                    size="lg"
+                    isChecked={checkPermission(valueState, item.value)}
+                    onChange={change}
+                  />
+                  <Flex px="4" flexDirection="column" onClick={change}>
+                    <Box fontWeight="500">{item.name}</Box>
+                    <Box fontWeight="400">{item.description}</Box>
+                  </Flex>
+                </Flex>
+              );
+            })}*/}
+          {onDelete && (
+            <>
+              <MyDivider my={2} h={'2px'} borderColor={'myGray.200'} />
+              <Flex
+                {...MenuStyle}
+                onClick={() => {
+                  onDelete();
+                  setIsOpen(false);
+                }}
+              >
+                <MyIcon name="delete" w="20px" color="red.600" />
+                <Box color="red.600">{t('common.Delete')}</Box>
+              </Flex>
+            </>
+          )}
+        </MenuList>
+      </Box>
+    </Menu>
+  );
+}
+
+export default React.memo(PermissionSelect);
--- a/projects/app/src/components/support/permission/MemberManager/PermissionTags.tsx
+++ b/projects/app/src/components/support/permission/MemberManager/PermissionTags.tsx
@@ -0,0 +1,36 @@
+import { Flex } from '@chakra-ui/react';
+import { PermissionValueType } from '@fastgpt/global/support/permission/type';
+import Tag from '@fastgpt/web/components/common/Tag';
+import React from 'react';
+import { useContextSelector } from 'use-context-selector';
+import { CollaboratorContext } from './context';
+
+export type PermissionTagsProp = {
+  permission: PermissionValueType;
+};
+
+function PermissionTags({ permission }: PermissionTagsProp) {
+  const { getPreLabelList } = useContextSelector(CollaboratorContext, (v) => v);
+
+  const perTagList = getPreLabelList(permission);
+
+  return (
+    <Flex gap="2" alignItems="center">
+      {perTagList.map((item) => (
+        <Tag
+          mixBlendMode={'multiply'}
+          key={item}
+          colorSchema="blue"
+          border="none"
+          py={2}
+          px={3}
+          fontSize={'xs'}
+        >
+          {item}
+        </Tag>
+      ))}
+    </Flex>
+  );
+}
+
+export default PermissionTags;
--- a/projects/app/src/components/support/permission/MemberManager/context.tsx
+++ b/projects/app/src/components/support/permission/MemberManager/context.tsx
@@ -0,0 +1,107 @@
+import { CollaboratorItemType } 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';
+import { useQuery } from '@tanstack/react-query';
+import { ReactNode, useCallback } from 'react';
+import { createContext } from 'use-context-selector';
+
+export type MemberManagerInputPropsType = {
+  onGetCollaboratorList: () => Promise<CollaboratorItemType[]>;
+  permissionList: PermissionListType;
+  onUpdateCollaborators: (tmbIds: string[], permission: PermissionValueType) => any;
+  onDelOneCollaborator: (tmbId: string) => any;
+};
+export type MemberManagerPropsType = MemberManagerInputPropsType & {
+  collaboratorList: CollaboratorItemType[];
+  refetchCollaboratorList: () => void;
+  isFetchingCollaborator: boolean;
+  getPreLabelList: (per: PermissionValueType) => string[];
+};
+
+type CollaboratorContextType = MemberManagerPropsType & {};
+
+export const CollaboratorContext = createContext<CollaboratorContextType>({
+  collaboratorList: [],
+  permissionList: PermissionList,
+  onUpdateCollaborators: function () {
+    throw new Error('Function not implemented.');
+  },
+  onDelOneCollaborator: function () {
+    throw new Error('Function not implemented.');
+  },
+  getPreLabelList: function (): string[] {
+    throw new Error('Function not implemented.');
+  },
+  refetchCollaboratorList: function (): void {
+    throw new Error('Function not implemented.');
+  },
+  onGetCollaboratorList: function (): Promise<CollaboratorItemType[]> {
+    throw new Error('Function not implemented.');
+  },
+  isFetchingCollaborator: false
+});
+
+export const CollaboratorContextProvider = ({
+  onGetCollaboratorList,
+  permissionList,
+  onUpdateCollaborators,
+  onDelOneCollaborator,
+  children
+}: MemberManagerInputPropsType & {
+  children: ReactNode;
+}) => {
+  const {
+    data: collaboratorList = [],
+    refetch: refetchCollaboratorList,
+    isLoading: isFetchingCollaborator
+  } = useQuery(['collaboratorList'], onGetCollaboratorList);
+  const onUpdateCollaboratorsThen = async (tmbIds: string[], permission: PermissionValueType) => {
+    await onUpdateCollaborators(tmbIds, permission);
+    refetchCollaboratorList();
+  };
+  const onDelOneCollaboratorThem = async (tmbId: string) => {
+    await onDelOneCollaborator(tmbId);
+    refetchCollaboratorList();
+  };
+
+  const getPreLabelList = useCallback(
+    (per: PermissionValueType) => {
+      const Per = new Permission({ per });
+      const labels: string[] = [];
+
+      if (Per.hasManagePer) {
+        labels.push(permissionList['manage'].name);
+      } else if (Per.hasWritePer) {
+        labels.push(permissionList['write'].name);
+      } else {
+        labels.push(permissionList['read'].name);
+      }
+
+      Object.values(permissionList).forEach((item) => {
+        if (item.checkBoxType === 'multiple') {
+          if (Per.checkPer(item.value)) {
+            labels.push(item.name);
+          }
+        }
+      });
+
+      return labels;
+    },
+    [permissionList]
+  );
+
+  const contextValue = {
+    onGetCollaboratorList,
+    collaboratorList,
+    refetchCollaboratorList,
+    isFetchingCollaborator,
+    permissionList,
+    onUpdateCollaborators: onUpdateCollaboratorsThen,
+    onDelOneCollaborator: onDelOneCollaboratorThem,
+    getPreLabelList
+  };
+  return (
+    <CollaboratorContext.Provider value={contextValue}>{children}</CollaboratorContext.Provider>
+  );
+};
--- a/projects/app/src/components/support/permission/MemberManager/index.tsx
+++ b/projects/app/src/components/support/permission/MemberManager/index.tsx
@@ -0,0 +1,99 @@
+import React, { useState } from 'react';
+import { Flex, Box, Button, Tag, TagLabel, useDisclosure } from '@chakra-ui/react';
+import MyIcon from '@fastgpt/web/components/common/Icon';
+import Avatar from '@/components/Avatar';
+import { AddMemberModal } from './AddMemberModal';
+import { useContextSelector } from 'use-context-selector';
+import ManageModal from './ManageModal';
+import {
+  CollaboratorContext,
+  CollaboratorContextProvider,
+  MemberManagerInputPropsType
+} from './context';
+import { useTranslation } from 'next-i18next';
+import MyBox from '@fastgpt/web/components/common/MyBox';
+
+function MemberManger() {
+  const { t } = useTranslation();
+  const {
+    isOpen: isOpenAddMember,
+    onOpen: onOpenAddMember,
+    onClose: onCloseAddMember
+  } = useDisclosure();
+  const {
+    isOpen: isOpenManageModal,
+    onOpen: onOpenManageModal,
+    onClose: onCloseManageModal
+  } = useDisclosure();
+
+  const { collaboratorList, isFetchingCollaborator } = useContextSelector(
+    CollaboratorContext,
+    (v) => v
+  );
+
+  return (
+    <>
+      <Flex alignItems="center" flexDirection="row" justifyContent="space-between" w="full">
+        <Box>协作者</Box>
+        <Flex flexDirection="row" gap="2">
+          <Button
+            size="sm"
+            variant="whitePrimary"
+            leftIcon={<MyIcon w="4" name="common/settingLight" />}
+            onClick={onOpenManageModal}
+          >
+            {t('permission.Manage')}
+          </Button>
+          <Button
+            size="sm"
+            variant="whitePrimary"
+            leftIcon={<MyIcon w="4" name="support/permission/collaborator" />}
+            onClick={onOpenAddMember}
+          >
+            {t('common.Add')}
+          </Button>
+        </Flex>
+      </Flex>
+
+      {/* member list */}
+      <MyBox
+        isLoading={isFetchingCollaborator}
+        mt={2}
+        bg="myGray.100"
+        borderRadius="md"
+        size={'md'}
+      >
+        {collaboratorList?.length === 0 ? (
+          <Box p={3} color="myGray.600" fontSize={'xs'} textAlign={'center'}>
+            暂无协作者
+          </Box>
+        ) : (
+          <Flex gap="2" p={1.5}>
+            {collaboratorList?.map((member) => {
+              return (
+                <Tag px="4" py="1.5" bgColor="white" key={member.tmbId} width="fit-content">
+                  <Flex alignItems="center">
+                    <Avatar src={member.avatar} w="24px" />
+                    <TagLabel mx="2">{member.name}</TagLabel>
+                  </Flex>
+                </Tag>
+              );
+            })}
+          </Flex>
+        )}
+      </MyBox>
+      {isOpenAddMember && <AddMemberModal onClose={onCloseAddMember} />}
+      {isOpenManageModal && <ManageModal onClose={onCloseManageModal} />}
+    </>
+  );
+}
+
+function Render(props: MemberManagerInputPropsType) {
+  return (
+    <CollaboratorContextProvider {...props}>
+      <MemberManger />
+    </CollaboratorContextProvider>
+  );
+}
+
+export default React.memo(Render);
--- a/projects/app/src/components/support/user/team/TeamManageModal/MemberTable.tsx
+++ b/projects/app/src/components/support/user/team/TeamManageModal/MemberTable.tsx
@@ -1,103 +0,0 @@
-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 {
-  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 { TeamContext } from '.';
-import { useUserStore } from '@/web/support/user/useUserStore';
-import { hasManage } from '@fastgpt/service/support/permission/resourcePermission/permisson';
-
-function MemberTable() {
-  const members = useContextSelector(TeamContext, (v) => v.members);
-  const openRemoveMember = useContextSelector(TeamContext, (v) => v.openRemoveMember);
-  const onRemoveMember = useContextSelector(TeamContext, (v) => v.onRemoveMember);
-
-  const { userInfo } = useUserStore();
-  const { t } = useTranslation();
-
-  return (
-    <TableContainer overflow={'unset'}>
-      <Table overflow={'unset'}>
-        <Thead bg={'myWhite.400'}>
-          <Tr>
-            <Th>{t('common.Username')}</Th>
-            <Th>{t('user.team.Role')}</Th>
-            <Th>{t('common.Status')}</Th>
-            <Th>{t('common.Action')}</Th>
-          </Tr>
-        </Thead>
-        <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>
-              <Td>{t(TeamMemberRoleMap[item.role]?.label || '')}</Td>
-              <Td color={TeamMemberStatusMap[item.status].color}>
-                {t(TeamMemberStatusMap[item.status]?.label || '')}
-              </Td>
-              <Td>
-                {hasManage(
-                  members.find((item) => item.tmbId === userInfo?.team.tmbId)?.permission!
-                ) &&
-                  item.role !== TeamMemberRoleEnum.owner &&
-                  item.tmbId !== userInfo?.team.tmbId && (
-                    <MyMenu
-                      width={20}
-                      trigger="hover"
-                      Button={
-                        <MenuButton
-                          _hover={{
-                            bg: 'myWhite.600'
-                          }}
-                          borderRadius={'md'}
-                          px={2}
-                          py={1}
-                          lineHeight={1}
-                        >
-                          <MyIcon
-                            name={'edit'}
-                            cursor={'pointer'}
-                            w="14px"
-                            _hover={{ color: 'primary.500' }}
-                          />
-                        </MenuButton>
-                      }
-                      menuList={[
-                        {
-                          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
-                              })
-                            )()
-                        }
-                      ]}
-                    />
-                  )}
-              </Td>
-            </Tr>
-          ))}
-        </Tbody>
-      </Table>
-    </TableContainer>
-  );
-}
-
-export default MemberTable;
--- a/projects/app/src/components/support/user/team/TeamManageModal/TeamCard.tsx
+++ b/projects/app/src/components/support/user/team/TeamManageModal/TeamCard.tsx
@@ -1,72 +1,94 @@
-import { Box, Button, Flex } from '@chakra-ui/react';
+import { Box, Button, Flex, useDisclosure } from '@chakra-ui/react';
 import MyIcon from '@fastgpt/web/components/common/Icon';
-import { TeamContext } from '.';
 import { useUserStore } from '@/web/support/user/useUserStore';
 import { useContextSelector } from 'use-context-selector';
 import { TeamMemberRoleEnum } from '@fastgpt/global/support/user/team/constant';
 import RowTabs from '../../../../common/Rowtabs';
-import { useState } from 'react';
+import { useMemo, useState } from 'react';
 import { useTranslation } from 'next-i18next';
 import { useSystemStore } from '@/web/common/system/useSystemStore';
 import { useToast } from '@fastgpt/web/hooks/useToast';
 import { DragHandleIcon } from '@chakra-ui/icons';
-import MemberTable from './MemberTable';
-import PermissionManage from './PermissionManage';
+import MemberTable from './components/MemberTable';
 import { useConfirm } from '@fastgpt/web/hooks/useConfirm';
-import { hasManage } from '@fastgpt/service/support/permission/resourcePermission/permisson';
-import { useI18n } from '@/web/context/I18n';
-type TabListType = Pick<React.ComponentProps<typeof RowTabs>, 'list'>['list'];
+import { TeamModalContext } from './context';
+import { useRequest } from '@fastgpt/web/hooks/useRequest';
+import { delLeaveTeam } from '@/web/support/user/team/api';
+import dynamic from 'next/dynamic';
+
 enum TabListEnum {
  member = 'member',
  permission = 'permission'
 }

+const TeamTagModal = dynamic(() => import('../TeamTagModal'));
+const InviteModal = dynamic(() => import('./components/InviteModal'));
+const PermissionManage = dynamic(() => import('./components/PermissionManage/index'));
+
 function TeamCard() {
  const { toast } = useToast();
  const { t } = useTranslation();
-  const { userT } = useI18n();
-  const members = useContextSelector(TeamContext, (v) => v.members);
-  const onOpenInvite = useContextSelector(TeamContext, (v) => v.onOpenInvite);
-  const onOpenTeamTagsAsync = useContextSelector(TeamContext, (v) => v.onOpenTeamTagsAsync);
-  const setEditTeamData = useContextSelector(TeamContext, (v) => v.setEditTeamData);
-  const onLeaveTeam = useContextSelector(TeamContext, (v) => v.onLeaveTeam);
+  const { myTeams, refetchTeams, members, refetchMembers, setEditTeamData, onSwitchTeam } =
+    useContextSelector(TeamModalContext, (v) => v);

  const { userInfo, teamPlanStatus } = useUserStore();
+  const { feConfigs } = useSystemStore();

  const { ConfirmModal: ConfirmLeaveTeamModal, openConfirm: openLeaveConfirm } = useConfirm({
    content: t('user.team.member.Confirm Leave')
  });
-
-  const { feConfigs } = useSystemStore();
-
-  const Tablist: TabListType = [
-    {
-      icon: 'support/team/memberLight',
-      label: (
-        <Flex alignItems={'center'}>
-          <Box ml={1}>{t('user.team.Member')}</Box>
-          <Box ml={2} bg={'myGray.100'} borderRadius={'20px'} px={3} fontSize={'xs'}>
-            {members.length}
-          </Box>
-        </Flex>
-      ),
-      value: TabListEnum.member
+  const { mutate: onLeaveTeam, isLoading: isLoadingLeaveTeam } = useRequest({
+    mutationFn: async (teamId?: string) => {
+      if (!teamId) return;
+      const defaultTeam = myTeams.find((item) => item.defaultTeam) || myTeams[0];
+      // change to personal team
+      // get members
+      onSwitchTeam(defaultTeam.teamId);
+      return delLeaveTeam(teamId);
    },
-    {
-      icon: 'support/team/key',
-      label: t('common.Role'),
-      value: TabListEnum.permission
-    }
-  ];
+    onSuccess() {
+      refetchTeams();
+    },
+    errorToast: t('user.team.Leave Team Failed')
+  });
+
+  const {
+    isOpen: isOpenTeamTagsAsync,
+    onOpen: onOpenTeamTagsAsync,
+    onClose: onCloseTeamTagsAsync
+  } = useDisclosure();
+  const { isOpen: isOpenInvite, onOpen: onOpenInvite, onClose: onCloseInvite } = useDisclosure();
+
+  const Tablist = useMemo(
+    () => [
+      {
+        icon: 'support/team/memberLight',
+        label: (
+          <Flex alignItems={'center'}>
+            <Box ml={1}>{t('user.team.Member')}</Box>
+            <Box ml={2} bg={'myGray.100'} borderRadius={'20px'} px={3} fontSize={'xs'}>
+              {members.length}
+            </Box>
+          </Flex>
+        ),
+        value: TabListEnum.member
+      },
+      {
+        icon: 'support/team/key',
+        label: t('common.Role'),
+        value: TabListEnum.permission
+      }
+    ],
+    [members.length, t]
+  );
+  const [tab, setTab] = useState(Tablist[0].value);

-  const [tab, setTab] = useState<string>(Tablist[0].value);
  return (
    <Flex
      flexDirection={'column'}
-      flex={'1'}
-      h={['auto', '100%']}
      bg={'white'}
      minH={['50vh', 'auto']}
+      h={'100%'}
      borderRadius={['8px 8px 0 0', '8px 0 0 8px']}
    >
      <Flex
@@ -107,41 +129,38 @@ function TeamCard() {
          list={Tablist}
          value={tab}
          onChange={(v) => {
-            setTab(v as string);
+            setTab(v as TabListEnum);
          }}
        ></RowTabs>
+        {/* ctrl buttons */}
        <Flex alignItems={'center'}>
-          {hasManage(
-            members.find((item) => item.tmbId.toString() === userInfo?.team.tmbId.toString())
-              ?.permission!
-          ) &&
-            tab === 'member' && (
-              <Button
-                variant={'whitePrimary'}
-                size="sm"
-                borderRadius={'md'}
-                ml={3}
-                leftIcon={<MyIcon name="common/inviteLight" w={'14px'} color={'primary.500'} />}
-                onClick={() => {
-                  if (
-                    teamPlanStatus?.standardConstants?.maxTeamMember &&
-                    teamPlanStatus.standardConstants.maxTeamMember <= members.length
-                  ) {
-                    toast({
-                      status: 'warning',
-                      title: t('user.team.Over Max Member Tip', {
-                        max: teamPlanStatus.standardConstants.maxTeamMember
-                      })
-                    });
-                  } else {
-                    onOpenInvite();
-                  }
-                }}
-              >
-                {t('user.team.Invite Member')}
-              </Button>
-            )}
-          {userInfo?.team.role === TeamMemberRoleEnum.owner && feConfigs?.show_team_chat && (
+          {tab === TabListEnum.member && userInfo?.team.permission.hasManagePer && (
+            <Button
+              variant={'whitePrimary'}
+              size="sm"
+              borderRadius={'md'}
+              ml={3}
+              leftIcon={<MyIcon name="common/inviteLight" w={'14px'} color={'primary.500'} />}
+              onClick={() => {
+                if (
+                  teamPlanStatus?.standardConstants?.maxTeamMember &&
+                  teamPlanStatus.standardConstants.maxTeamMember <= members.length
+                ) {
+                  toast({
+                    status: 'warning',
+                    title: t('user.team.Over Max Member Tip', {
+                      max: teamPlanStatus.standardConstants.maxTeamMember
+                    })
+                  });
+                } else {
+                  onOpenInvite();
+                }
+              }}
+            >
+              {t('user.team.Invite Member')}
+            </Button>
+          )}
+          {userInfo?.team.permission.hasManagePer && feConfigs?.show_team_chat && (
            <Button
              variant={'whitePrimary'}
              size="sm"
@@ -155,13 +174,14 @@ function TeamCard() {
              {t('user.team.Team Tags Async')}
            </Button>
          )}
-          {userInfo?.team.role !== TeamMemberRoleEnum.owner && (
+          {!userInfo?.team.permission.isOwner && (
            <Button
              variant={'whitePrimary'}
              size="sm"
              borderRadius={'md'}
              ml={3}
              leftIcon={<MyIcon name={'support/account/loginoutLight'} w={'14px'} />}
+              isLoading={isLoadingLeaveTeam}
              onClick={() => {
                openLeaveConfirm(() => onLeaveTeam(userInfo?.team?.teamId))();
              }}
@@ -173,8 +193,18 @@ function TeamCard() {
      </Flex>

      <Box mt={3} flex={'1 0 0'} overflow={'auto'}>
-        {tab === 'member' ? <MemberTable /> : <PermissionManage />}
+        {tab === TabListEnum.member && <MemberTable />}
+        {tab === TabListEnum.permission && <PermissionManage />}
      </Box>
+
+      {isOpenInvite && userInfo?.team?.teamId && (
+        <InviteModal
+          teamId={userInfo.team.teamId}
+          onClose={onCloseInvite}
+          onSuccess={refetchMembers}
+        />
+      )}
+      {isOpenTeamTagsAsync && <TeamTagModal onClose={onCloseTeamTagsAsync} />}
      <ConfirmLeaveTeamModal />
    </Flex>
  );
--- a/projects/app/src/components/support/user/team/TeamManageModal/TeamList.tsx
+++ b/projects/app/src/components/support/user/team/TeamManageModal/TeamList.tsx
@@ -3,20 +3,15 @@ import Avatar from '@/components/Avatar';
 import { useTranslation } from 'next-i18next';
 import MyIcon from '@fastgpt/web/components/common/Icon';
 import { TeamMemberRoleEnum } from '@fastgpt/global/support/user/team/constant';
-import EditModal, { defaultForm } from './EditModal';
+import { defaultForm } from './components/EditInfoModal';
 import { useUserStore } from '@/web/support/user/useUserStore';
 import { useContextSelector } from 'use-context-selector';
-import { TeamContext } from '.';
+import { TeamModalContext } from './context';

 function TeamList() {
  const { t } = useTranslation();
-  const { userInfo, initUserInfo } = useUserStore();
-  const editTeamData = useContextSelector(TeamContext, (v) => v.editTeamData);
-  const setEditTeamData = useContextSelector(TeamContext, (v) => v.setEditTeamData);
-  const myTeams = useContextSelector(TeamContext, (v) => v.myTeams);
-  const refetchTeam = useContextSelector(TeamContext, (v) => v.refetchTeam);
-  const onSwitchTeam = useContextSelector(TeamContext, (v) => v.onSwitchTeam);
-  // get the list of teams
+  const { userInfo } = useUserStore();
+  const { myTeams, onSwitchTeam, setEditTeamData } = useContextSelector(TeamModalContext, (v) => v);

  return (
    <Flex
@@ -100,16 +95,6 @@ function TeamList() {
          </Flex>
        ))}
      </Box>
-      {!!editTeamData && (
-        <EditModal
-          defaultData={editTeamData}
-          onClose={() => setEditTeamData(undefined)}
-          onSuccess={() => {
-            refetchTeam();
-            initUserInfo();
-          }}
-        />
-      )}
    </Flex>
  );
 }
--- a/projects/app/src/components/support/user/team/TeamManageModal/components/EditInfoModal.tsx
+++ b/projects/app/src/components/support/user/team/TeamManageModal/components/EditInfoModal.tsx
@@ -1,4 +1,4 @@
-import React, { useCallback, useState } from 'react';
+import React, { useCallback } from 'react';
 import { useForm } from 'react-hook-form';
 import { useTranslation } from 'next-i18next';
 import { useSelectFile } from '@/web/common/file/hooks/useSelectFile';
@@ -14,7 +14,7 @@ import { postCreateTeam, putUpdateTeam } from '@/web/support/user/team/api';
 import { CreateTeamProps } from '@fastgpt/global/support/user/team/controller.d';
 import { MongoImageTypeEnum } from '@fastgpt/global/common/file/image/constants';

-export type FormDataType = CreateTeamProps & {
+export type EditTeamFormDataType = CreateTeamProps & {
  id?: string;
 };

@@ -28,17 +28,17 @@ function EditModal({
  onClose,
  onSuccess
 }: {
-  defaultData?: FormDataType;
+  defaultData?: EditTeamFormDataType;
  onClose: () => void;
  onSuccess: () => void;
 }) {
  const { t } = useTranslation();
-  const [refresh, setRefresh] = useState(false);
  const { toast } = useToast();

-  const { register, setValue, getValues, handleSubmit } = useForm<CreateTeamProps>({
+  const { register, setValue, handleSubmit, watch } = useForm<CreateTeamProps>({
    defaultValues: defaultData
  });
+  const avatar = watch('avatar');

  const { File, onOpen: onOpenSelectFile } = useSelectFile({
    fileType: '.jpg,.png,.svg',
@@ -57,7 +57,6 @@ function EditModal({
          maxH: 300
        });
        setValue('avatar', src);
-        setRefresh((state) => !state);
      } catch (err: any) {
        toast({
          title: getErrText(err, t('common.Select File Failed')),
@@ -80,7 +79,7 @@ function EditModal({
    errorToast: t('common.Create Failed')
  });
  const { mutate: onclickUpdate, isLoading: updating } = useRequest({
-    mutationFn: async (data: FormDataType) => {
+    mutationFn: async (data: EditTeamFormDataType) => {
      if (!data.id) return Promise.resolve('');
      return putUpdateTeam({
        name: data.name,
@@ -110,7 +109,7 @@ function EditModal({
          <MyTooltip label={t('common.Set Avatar')}>
            <Avatar
              flexShrink={0}
-              src={getValues('avatar')}
+              src={avatar}
              w={['28px', '32px']}
              h={['28px', '32px']}
              cursor={'pointer'}
--- a/projects/app/src/components/support/user/team/TeamManageModal/components/InviteModal.tsx
+++ b/projects/app/src/components/support/user/team/TeamManageModal/components/InviteModal.tsx
--- a/projects/app/src/components/support/user/team/TeamManageModal/components/MemberTable.tsx
+++ b/projects/app/src/components/support/user/team/TeamManageModal/components/MemberTable.tsx
@@ -0,0 +1,116 @@
+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 {
+  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';
+
+function MemberTable() {
+  const { userInfo } = useUserStore();
+  const { t } = useTranslation();
+  const { members, refetchMembers } = useContextSelector(TeamModalContext, (v) => v);
+
+  const { ConfirmModal: ConfirmRemoveMemberModal, openConfirm: openRemoveMember } = useConfirm({});
+
+  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}>
+      <TableContainer overflow={'unset'}>
+        <Table overflow={'unset'}>
+          <Thead bg={'myWhite.400'}>
+            <Tr>
+              <Th>{t('common.Username')}</Th>
+              <Th>{t('user.team.Role')}</Th>
+              <Th>{t('common.Status')}</Th>
+              <Th>{t('common.Action')}</Th>
+            </Tr>
+          </Thead>
+          <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>
+                <Td>{t(TeamMemberRoleMap[item.role]?.label || '')}</Td>
+                <Td color={TeamMemberStatusMap[item.status].color}>
+                  {t(TeamMemberStatusMap[item.status]?.label || '')}
+                </Td>
+                <Td>
+                  {userInfo?.team.permission.hasManagePer &&
+                    item.role !== TeamMemberRoleEnum.owner &&
+                    item.tmbId !== userInfo?.team.tmbId && (
+                      <MyMenu
+                        width={20}
+                        trigger="hover"
+                        Button={
+                          <MenuButton
+                            _hover={{
+                              bg: 'myWhite.600'
+                            }}
+                            borderRadius={'md'}
+                            px={2}
+                            py={1}
+                            lineHeight={1}
+                          >
+                            <MyIcon
+                              name={'edit'}
+                              cursor={'pointer'}
+                              w="14px"
+                              _hover={{ color: 'primary.500' }}
+                            />
+                          </MenuButton>
+                        }
+                        menuList={[
+                          {
+                            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
+                                })
+                              )()
+                          }
+                        ]}
+                      />
+                    )}
+                </Td>
+              </Tr>
+            ))}
+          </Tbody>
+        </Table>
+
+        <ConfirmRemoveMemberModal />
+      </TableContainer>
+    </MyBox>
+  );
+}
+
+export default MemberTable;
--- 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
@@ -14,43 +14,30 @@ import {
 } from '@chakra-ui/react';
 import Avatar from '@/components/Avatar';
 import MyModal from '@fastgpt/web/components/common/MyModal';
-import React, { useState } from 'react';
+import React, { useMemo, useState } from 'react';
 import { useTranslation } from 'next-i18next';
 import { useContextSelector } from 'use-context-selector';
-import { TeamContext } from '.';
-import {
-  hasManage,
-  constructPermission,
-  PermissionList
-} from '@fastgpt/service/support/permission/resourcePermission/permisson';
 import { useRequest } from '@fastgpt/web/hooks/useRequest';
 import { updateMemberPermission } from '@/web/support/user/team/api';
 import { useUserStore } from '@/web/support/user/useUserStore';
 import MyIcon from '@fastgpt/web/components/common/Icon';
+import { ManagePermissionVal } from '@fastgpt/global/support/permission/constant';
+import { TeamModalContext } from '../../context';
+import { useI18n } from '@/web/context/I18n';

 function AddManagerModal({ onClose, onSuccess }: { onClose: () => void; onSuccess: () => void }) {
  const { t } = useTranslation();
+  const { userT } = useI18n();
  const { userInfo } = useUserStore();
-  const refetchMembers = useContextSelector(TeamContext, (v) => v.refetchMembers);
-  const members = useContextSelector(TeamContext, (v) =>
-    v.members.filter((member) => {
-      return member.tmbId != userInfo!.team.tmbId && !hasManage(member.permission);
-    })
-  );
+  const { members, refetchMembers } = useContextSelector(TeamModalContext, (v) => v);
+
  const [selected, setSelected] = useState<typeof members>([]);
-  const [search, setSearch] = useState<string>('');
-  const [searched, setSearched] = useState<typeof members>(members);
+  const [searchKey, setSearchKey] = useState('');

  const { mutate: submit, isLoading } = useRequest({
    mutationFn: async () => {
-      console.log(selected);
      return updateMemberPermission({
-        teamId: userInfo!.team.teamId,
-        permission: constructPermission([
-          PermissionList['Read'],
-          PermissionList['Write'],
-          PermissionList['Manage']
-        ]).value,
+        permission: ManagePermissionVal,
        memberIds: selected.map((item) => {
          return item.tmbId;
        })
@@ -63,18 +50,23 @@ function AddManagerModal({ onClose, onSuccess }: { onClose: () => void; onSucces
    successToast: '成功',
    errorToast: '失败'
  });
+
+  const filterMembers = useMemo(() => {
+    return members.filter((member) => {
+      if (member.permission.isOwner) return false;
+      if (!searchKey) return true;
+      return !!member.memberName.includes(searchKey);
+    });
+  }, [members, searchKey]);
+
  return (
    <MyModal
      isOpen
-      iconSrc={'support/permission/collaborator'}
+      iconSrc={'modal/AddClb'}
      maxW={['90vw']}
      minW={['900px']}
      overflow={'unset'}
-      title={
-        <Box>
-          <Box>添加管理员</Box>
-        </Box>
-      }
+      title={userT('team.Add manager')}
    >
      <ModalCloseButton onClick={onClose} />
      <ModalBody py={6} px={10}>
@@ -95,15 +87,12 @@ function AddManagerModal({ onClose, onSuccess }: { onClose: () => void; onSucces
                fontSize="lg"
                bg={'myGray.50'}
                onChange={(e) => {
-                  setSearch(e.target.value);
-                  setSearched(
-                    members.filter((member) => member.memberName.includes(e.target.value))
-                  );
+                  setSearchKey(e.target.value);
                }}
              />
            </InputGroup>
            <Flex flexDirection="column" mt={3}>
-              {searched.map((member) => {
+              {filterMembers.map((member) => {
                return (
                  <Flex
                    py="2"
@@ -164,7 +153,7 @@ function AddManagerModal({ onClose, onSuccess }: { onClose: () => void; onSucces
      </ModalBody>
      <ModalFooter alignItems="flex-end">
        <Button h={'30px'} isLoading={isLoading} onClick={submit}>
-          确定
+          {t('common.Confirm')}
        </Button>
      </ModalFooter>
    </MyModal>
--- a/projects/app/src/components/support/user/team/TeamManageModal/components/PermissionManage/index.tsx
+++ b/projects/app/src/components/support/user/team/TeamManageModal/components/PermissionManage/index.tsx
@@ -1,26 +1,24 @@
 import React from 'react';
 import { Box, Button, Flex, Tag, TagLabel, useDisclosure } from '@chakra-ui/react';
 import { useTranslation } from 'next-i18next';
-import { TeamContext } from '.';
 import { useContextSelector } from 'use-context-selector';
 import MyIcon from '@fastgpt/web/components/common/Icon';
 import Avatar from '@/components/Avatar';
 import { useRequest } from '@fastgpt/web/hooks/useRequest';
-import AddManagerModal from './AddManager';
-import { updateMemberPermission } from '@/web/support/user/team/api';
+import { delMemberPermission } from '@/web/support/user/team/api';
 import { useUserStore } from '@/web/support/user/useUserStore';
-import {
-  constructPermission,
-  hasManage,
-  PermissionList
-} from '@fastgpt/service/support/permission/resourcePermission/permisson';
-import { TeamMemberRoleEnum } from '@fastgpt/global/support/user/team/constant';
+
+import { TeamModalContext } from '../../context';
+import { TeamPermissionList } from '@fastgpt/global/support/permission/user/constant';
+import dynamic from 'next/dynamic';
+import MyBox from '@fastgpt/web/components/common/MyBox';
+
+const AddManagerModal = dynamic(() => import('./AddManager'));

 function PermissionManage() {
  const { t } = useTranslation();
-  const members = useContextSelector(TeamContext, (v) => v.members);
-  const refetchMembers = useContextSelector(TeamContext, (v) => v.refetchMembers);
  const { userInfo } = useUserStore();
+  const { members, refetchMembers } = useContextSelector(TeamModalContext, (v) => v);

  const {
    isOpen: isOpenAddManager,
@@ -28,30 +26,19 @@ function PermissionManage() {
    onClose: onCloseAddManager
  } = useDisclosure();

-  const { mutate: removeManager } = useRequest({
+  const { mutate: removeManager, isLoading: isRemovingManager } = useRequest({
    mutationFn: async (memberId: string) => {
-      return updateMemberPermission({
-        teamId: userInfo!.team.teamId,
-        permission: constructPermission([PermissionList['Read'], PermissionList['Write']]).value,
-        memberIds: [memberId]
-      });
+      return delMemberPermission(memberId);
    },
-    successToast: 'Success',
-    errorToast: 'Error',
+    successToast: '删除管理员成功',
+    errorToast: '删除管理员异常',
    onSuccess: () => {
      refetchMembers();
-    },
-    onError: () => {
-      refetchMembers();
    }
  });

  return (
-    <Flex flexDirection={'column'} flex={'1'} h={['auto', '100%']} bg={'white'}>
-      {isOpenAddManager && (
-        <AddManagerModal onClose={onCloseAddManager} onSuccess={onCloseAddManager} />
-      )}
-
+    <MyBox h={'100%'} isLoading={isRemovingManager} bg={'white'}>
      <Flex
        mx={'5'}
        flexDirection={'row'}
@@ -73,7 +60,7 @@ function PermissionManage() {
            px={'3'}
            borderRadius={'sm'}
          >
-            可邀请, 删除成员
+            {TeamPermissionList['manage'].description}
          </Box>
        </Flex>
        {userInfo?.team.role === 'owner' && (
@@ -93,7 +80,7 @@ function PermissionManage() {
      </Flex>
      <Flex mt="4" mx="4">
        {members.map((member) => {
-          if (hasManage(member.permission) && member.role !== TeamMemberRoleEnum.owner) {
+          if (member.permission.hasManagePer && !member.permission.isOwner) {
            return (
              <Tag key={member.memberName} mx={'2'} px="4" py="2" bg="myGray.100">
                <Avatar src={member.avatar} w="20px" />
@@ -106,6 +93,7 @@ function PermissionManage() {
                    w="16px"
                    color="myGray.500"
                    cursor="pointer"
+                    _hover={{ color: 'red.600' }}
                    onClick={() => {
                      removeManager(member.tmbId);
                    }}
@@ -116,7 +104,11 @@ function PermissionManage() {
          }
        })}
      </Flex>
-    </Flex>
+
+      {isOpenAddManager && (
+        <AddManagerModal onClose={onCloseAddManager} onSuccess={onCloseAddManager} />
+      )}
+    </MyBox>
  );
 }

--- a/projects/app/src/components/support/user/team/TeamManageModal/context.tsx
+++ b/projects/app/src/components/support/user/team/TeamManageModal/context.tsx
@@ -0,0 +1,102 @@
+import React, { ReactNode, 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 { 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 { useTranslation } from 'next-i18next';
+
+const EditInfoModal = dynamic(() => import('./components/EditInfoModal'));
+
+type TeamModalContextType = {
+  myTeams: TeamTmbItemType[];
+  refetchTeams: () => void;
+  isLoading: boolean;
+  onSwitchTeam: (teamId: string) => void;
+
+  setEditTeamData: React.Dispatch<React.SetStateAction<EditTeamFormDataType | undefined>>;
+  members: TeamMemberItemType[];
+  refetchMembers: () => void;
+};
+
+export const TeamModalContext = createContext<TeamModalContextType>({
+  myTeams: [],
+  isLoading: false,
+  onSwitchTeam: function (teamId: string): void {
+    throw new Error('Function not implemented.');
+  },
+  setEditTeamData: function (value: React.SetStateAction<EditTeamFormDataType | undefined>): void {
+    throw new Error('Function not implemented.');
+  },
+  members: [],
+  refetchTeams: function (): void {
+    throw new Error('Function not implemented.');
+  },
+  refetchMembers: function (): void {
+    throw new Error('Function not implemented.');
+  }
+});
+
+export const TeamModalContextProvider = ({ children }: { children: ReactNode }) => {
+  const { t } = useTranslation();
+  const [editTeamData, setEditTeamData] = useState<EditTeamFormDataType>();
+  const { userInfo, initUserInfo } = useUserStore();
+
+  const {
+    data: myTeams = [],
+    isFetching: isLoadingTeams,
+    refetch: refetchTeams
+  } = useQuery(['getTeams', userInfo?._id], () => getTeamList(TeamMemberStatusEnum.active));
+
+  // member action
+  const {
+    data: members = [],
+    refetch: refetchMembers,
+    isLoading: loadingMembers
+  } = useQuery(['getMembers', userInfo?.team?.teamId], () => {
+    if (!userInfo?.team?.teamId) return [];
+    return getTeamMembers();
+  });
+
+  const { mutate: onSwitchTeam, isLoading: isSwitchingTeam } = useRequest({
+    mutationFn: async (teamId: string) => {
+      await putSwitchTeam(teamId);
+      return initUserInfo();
+    },
+    errorToast: t('user.team.Switch Team Failed')
+  });
+
+  const isLoading = isLoadingTeams || isSwitchingTeam || loadingMembers;
+
+  const contextValue = {
+    myTeams,
+    refetchTeams,
+    isLoading,
+    onSwitchTeam,
+
+    // create | update team
+    setEditTeamData,
+    members,
+    refetchMembers
+  };
+
+  return (
+    <TeamModalContext.Provider value={contextValue}>
+      {children}
+      {!!editTeamData && (
+        <EditInfoModal
+          defaultData={editTeamData}
+          onClose={() => setEditTeamData(undefined)}
+          onSuccess={() => {
+            refetchTeams();
+            initUserInfo();
+          }}
+        />
+      )}
+    </TeamModalContext.Provider>
+  );
+};
--- a/projects/app/src/components/support/user/team/TeamManageModal/index.tsx
+++ b/projects/app/src/components/support/user/team/TeamManageModal/index.tsx
@@ -1,130 +1,24 @@
-import React, { useMemo, useState } from 'react';
+import React from 'react';
 import MyModal from '@fastgpt/web/components/common/MyModal';
 import { useTranslation } from 'next-i18next';
-import { useQuery } from '@tanstack/react-query';
-import {
-  getTeamMembers,
-  delRemoveMember,
-  getTeamList,
-  delLeaveTeam,
-  putSwitchTeam
-} from '@/web/support/user/team/api';
-import { Box, useDisclosure } from '@chakra-ui/react';
+import { Box } from '@chakra-ui/react';
 import { useUserStore } from '@/web/support/user/useUserStore';
-import dynamic from 'next/dynamic';
-import { useRequest } from '@fastgpt/web/hooks/useRequest';
 import { useLoading } from '@fastgpt/web/hooks/useLoading';
-import { useConfirm } from '@fastgpt/web/hooks/useConfirm';
-import { createContext } from 'use-context-selector';
+import { createContext, useContextSelector } from 'use-context-selector';
 import TeamList from './TeamList';
 import TeamCard from './TeamCard';
-import { FormDataType } from './EditModal';
-import { TeamMemberStatusEnum } from '@fastgpt/global/support/user/team/constant';
-import { setToken } from '@/web/support/user/auth';
+import { TeamModalContext, TeamModalContextProvider } from './context';

-const InviteModal = dynamic(() => import('./InviteModal'));
-const TeamTagModal = dynamic(() => import('../TeamTagModal'));
+export const TeamContext = createContext<{}>({} as any);

-export const TeamContext = createContext<{
-  editTeamData?: FormDataType;
-  setEditTeamData: React.Dispatch<React.SetStateAction<any>>;
-  members: Awaited<ReturnType<typeof getTeamMembers>>;
-  myTeams: Awaited<ReturnType<typeof getTeamList>>;
-  refetchTeam: ReturnType<typeof useQuery>['refetch'];
-  onSwitchTeam: ReturnType<typeof useRequest>['mutate'];
-  refetchMembers: ReturnType<typeof useQuery>['refetch'];
-  openRemoveMember: ReturnType<typeof useConfirm>['openConfirm'];
-  onOpenInvite: ReturnType<typeof useDisclosure>['onOpen'];
-  onOpenTeamTagsAsync: ReturnType<typeof useDisclosure>['onOpen'];
-  onRemoveMember: ReturnType<typeof useRequest>['mutate'];
-  onLeaveTeam: ReturnType<typeof useRequest>['mutate'];
-}>({} as any);
+type Props = { onClose: () => void };

-const TeamManageModal = ({ onClose }: { onClose: () => void }) => {
-  const { t } = useTranslation();
+const TeamManageModal = ({ onClose }: Props) => {
  const { Loading } = useLoading();
+  const { isLoading } = useContextSelector(TeamModalContext, (v) => v);

-  const { ConfirmModal: ConfirmRemoveMemberModal, openConfirm: openRemoveMember } = useConfirm();
-
-  const { userInfo, initUserInfo } = useUserStore();
-
-  const {
-    data: myTeams = [],
-    isFetching: isLoadingTeams,
-    refetch: refetchTeam
-  } = useQuery(['getTeams', userInfo?._id], () => getTeamList(TeamMemberStatusEnum.active));
-
-  const [editTeamData, setEditTeamData] = useState<FormDataType>();
-  const { isOpen: isOpenInvite, onOpen: onOpenInvite, onClose: onCloseInvite } = useDisclosure();
-  const {
-    isOpen: isOpenTeamTagsAsync,
-    onOpen: onOpenTeamTagsAsync,
-    onClose: onCloseTeamTagsAsync
-  } = useDisclosure();
-
-  // member action
-  const { data: members = [], refetch: refetchMembers } = useQuery(
-    ['getMembers', userInfo?.team?.teamId],
-    () => {
-      if (!userInfo?.team?.teamId) return [];
-      return getTeamMembers();
-    }
-  );
-
-  const { mutate: onRemoveMember, isLoading: isLoadingRemoveMember } = useRequest({
-    mutationFn: delRemoveMember,
-    onSuccess() {
-      refetchMembers();
-    },
-    successToast: t('user.team.Remove Member Success'),
-    errorToast: t('user.team.Remove Member Failed')
-  });
-
-  const defaultTeam = useMemo(
-    () => myTeams.find((item) => item.defaultTeam) || myTeams[0],
-    [myTeams]
-  );
-
-  const { mutate: onSwitchTeam, isLoading: isSwitchTeam } = useRequest({
-    mutationFn: async (teamId: string) => {
-      const token = await putSwitchTeam(teamId);
-      token && setToken(token);
-      return initUserInfo();
-    },
-    errorToast: t('user.team.Switch Team Failed')
-  });
-
-  const { mutate: onLeaveTeam, isLoading: isLoadingLeaveTeam } = useRequest({
-    mutationFn: async (teamId?: string) => {
-      if (!teamId) return;
-      // change to personal team
-      // get members
-      onSwitchTeam(defaultTeam.teamId);
-      return delLeaveTeam(teamId);
-    },
-    onSuccess() {
-      refetchTeam();
-    },
-    errorToast: t('user.team.Leave Team Failed')
-  });
-
-  return !!userInfo?.team ? (
-    <TeamContext.Provider
-      value={{
-        myTeams: myTeams,
-        refetchTeam: refetchTeam,
-        onSwitchTeam: onSwitchTeam,
-        members: members,
-        refetchMembers: refetchMembers,
-        openRemoveMember: openRemoveMember,
-        onOpenInvite: onOpenInvite,
-        onOpenTeamTagsAsync: onOpenTeamTagsAsync,
-        onRemoveMember: onRemoveMember,
-        editTeamData: editTeamData,
-        setEditTeamData: setEditTeamData,
-        onLeaveTeam: onLeaveTeam
-      }}
-    >
+  return (
+    <>
      <MyModal
        isOpen
        onClose={onClose}
@@ -137,24 +31,23 @@ const TeamManageModal = ({ onClose }: { onClose: () => void }) => {
      >
        <Box display={['block', 'flex']} flex={1} position={'relative'} overflow={'auto'}>
          <TeamList />
-          <TeamCard />
-          <Loading
-            loading={isLoadingRemoveMember || isLoadingTeams || isLoadingLeaveTeam || isSwitchTeam}
-            fixed={false}
-          />
+          <Box h={'100%'} flex={'1 0 0'}>
+            <TeamCard />
+          </Box>
+          <Loading loading={isLoading} fixed={false} />
        </Box>
      </MyModal>
-      {isOpenInvite && userInfo?.team?.teamId && (
-        <InviteModal
-          teamId={userInfo.team.teamId}
-          onClose={onCloseInvite}
-          onSuccess={refetchMembers}
-        />
-      )}
-      {isOpenTeamTagsAsync && <TeamTagModal onClose={onCloseTeamTagsAsync} />}
-      <ConfirmRemoveMemberModal />
-    </TeamContext.Provider>
-  ) : null;
+    </>
+  );
 };

-export default React.memo(TeamManageModal);
+const Render = (props: Props) => {
+  const { userInfo } = useUserStore();
+
+  return !!userInfo?.team ? (
+    <TeamModalContextProvider>
+      <TeamManageModal {...props} />
+    </TeamModalContextProvider>
+  ) : null;
+};
+export default React.memo(Render);
--- a/projects/app/src/components/support/user/team/TeamMenu/index.tsx
+++ b/projects/app/src/components/support/user/team/TeamMenu/index.tsx
@@ -1,5 +1,5 @@
 import React from 'react';
-import { Box, Button, Flex, Image, useDisclosure, useTheme } from '@chakra-ui/react';
+import { Box, Button, Flex, Image, useDisclosure } from '@chakra-ui/react';
 import { useUserStore } from '@/web/support/user/useUserStore';
 import { useTranslation } from 'next-i18next';
 import MyTooltip from '@/components/MyTooltip';
@@ -10,7 +10,6 @@ import { useToast } from '@fastgpt/web/hooks/useToast';
 const TeamManageModal = dynamic(() => import('../TeamManageModal'));

 const TeamMenu = () => {
-  const theme = useTheme();
  const { feConfigs } = useSystemStore();
  const { t } = useTranslation();
  const { userInfo } = useUserStore();
@@ -38,7 +37,7 @@ const TeamMenu = () => {
        } else {
          toast({
            status: 'warning',
-            title: t('common.Business edition features')
+            title: t('common.system.Commercial version function')
          });
        }
      }}