4.8.19-feature (#3636)

* feat: sync org from wecom, pref: member list pagination (#3549)

* feat: sync org

* chore: fe

* chore: loading

* chore: type

* pref: team member list change to pagination. Edit a sort of list apis.

* feat: member update avatar

* chore: user avatar move to tmb

* chore: init scripts move user avatar

* chore: sourceMember

* fix: list api sourceMember

* fix: member sync

* fix: pagination

* chore: adjust code

* chore: move changeOwner to pro

* chore: init v4819 script

* chore: adjust code

* chore: UserBox

* perf: scroll page code

* perf: list data

* docs:更新用户答疑 (#3576)

* docs: add custom uid docs (#3572)

* fix: pagination bug (#3577)

* 4.8.19 test (#3584)

* faet: dataset search filter

* fix: scroll page

* fix: collection list api old version (#3591)

* fix: collection list api format

* fix: type error of addSourceMemeber

* fix: scroll fetch (#3592)

* fix: yuque dataset file folder can enter (#3593)

* perf: load members；perf: yuque load；fix: workflow llm params cannot close (#3594)

* chat openapi doc

* feat: dataset openapi doc

* perf: load members

* perf: member load code

* perf: yuque load

* fix: workflow llm params cannot close

* fix: api dataset reference tag preview (#3600)

* perf: doc

* feat: chat page config

* fix: http parse (#3634)

* update doc

* fix: http parse

* fix code run node reset template (#3633)

Co-authored-by: Archer <545436317@qq.com>

* docs:faq (#3627)

* docs:faq

* docsFix

* perf: sleep plugin

* fix: selector

---------

Co-authored-by: Finley Ge <32237950+FinleyGe@users.noreply.github.com>
Co-authored-by: Jiangween <145003935+Jiangween@users.noreply.github.com>
Co-authored-by: heheer <heheer@sealos.io>

projects/app/src/pageComponents/account/team/EditInfoModal.tsx

@@ -0,0 +1,149 @@
+import React from 'react';
+import { useForm } from 'react-hook-form';
+import { useTranslation } from 'next-i18next';
+import { useSelectFile } from '@/web/common/file/hooks/useSelectFile';
+import { useToast } from '@fastgpt/web/hooks/useToast';
+import { useRequest } from '@fastgpt/web/hooks/useRequest';
+import MyModal from '@fastgpt/web/components/common/MyModal';
+import { Box, Button, Flex, Input, ModalBody, ModalFooter } from '@chakra-ui/react';
+import MyTooltip from '@fastgpt/web/components/common/MyTooltip';
+import Avatar from '@fastgpt/web/components/common/Avatar';
+import { postCreateTeam, putUpdateTeam } from '@/web/support/user/team/api';
+import { CreateTeamProps } from '@fastgpt/global/support/user/team/controller.d';
+import { DEFAULT_TEAM_AVATAR } from '@fastgpt/global/common/system/constants';
+
+export type EditTeamFormDataType = CreateTeamProps & {
+  id?: string;
+};
+
+export const defaultForm = {
+  name: '',
+  avatar: DEFAULT_TEAM_AVATAR
+};
+
+function EditModal({
+  defaultData = defaultForm,
+  onClose,
+  onSuccess
+}: {
+  defaultData?: EditTeamFormDataType;
+  onClose: () => void;
+  onSuccess: () => void;
+}) {
+  const { t } = useTranslation();
+  const { toast } = useToast();
+
+  const { register, setValue, handleSubmit, watch } = useForm<CreateTeamProps>({
+    defaultValues: defaultData
+  });
+  const avatar = watch('avatar');
+
+  const {
+    File,
+    onOpen: onOpenSelectFile,
+    onSelectImage
+  } = useSelectFile({
+    fileType: '.jpg,.png,.svg',
+    multiple: false
+  });
+
+  const { mutate: onclickCreate, isLoading: creating } = useRequest({
+    mutationFn: async (data: CreateTeamProps) => {
+      return postCreateTeam(data);
+    },
+    onSuccess() {
+      onSuccess();
+      onClose();
+    },
+    successToast: t('common:common.Create Success'),
+    errorToast: t('common:common.Create Failed')
+  });
+  const { mutate: onclickUpdate, isLoading: updating } = useRequest({
+    mutationFn: async (data: EditTeamFormDataType) => {
+      if (!data.id) return Promise.resolve('');
+      return putUpdateTeam({
+        name: data.name,
+        avatar: data.avatar
+      });
+    },
+    onSuccess() {
+      onSuccess();
+      onClose();
+    },
+    successToast: t('common:common.Update Success'),
+    errorToast: t('common:common.Update Failed')
+  });
+
+  return (
+    <MyModal
+      isOpen
+      onClose={onClose}
+      iconSrc="support/team/group"
+      iconColor="primary.600"
+      title={defaultData.id ? t('user:team.Update Team') : t('user:team.Create Team')}
+    >
+      <ModalBody>
+        <Box color={'myGray.800'} fontWeight={'bold'}>
+          {t('user:team.Set Name')}
+        </Box>
+        <Flex mt={3} alignItems={'center'}>
+          <MyTooltip label={t('common:common.Set Avatar')}>
+            <Avatar
+              flexShrink={0}
+              src={avatar}
+              w={['28px', '32px']}
+              h={['28px', '32px']}
+              cursor={'pointer'}
+              borderRadius={'md'}
+              onClick={onOpenSelectFile}
+            />
+          </MyTooltip>
+          <Input
+            flex={1}
+            ml={4}
+            autoFocus
+            bg={'myWhite.600'}
+            maxLength={20}
+            placeholder={t('user:team.Team Name')}
+            {...register('name', {
+              required: t('common:common.Please Input Name')
+            })}
+          />
+        </Flex>
+      </ModalBody>
+
+      <ModalFooter>
+        {!!defaultData.id ? (
+          <>
+            <Box flex={1} />
+            <Button variant={'whiteBase'} mr={3} onClick={onClose}>
+              {t('common:common.Close')}
+            </Button>
+            <Button isLoading={updating} onClick={handleSubmit((data) => onclickUpdate(data))}>
+              {t('common:common.Confirm Update')}
+            </Button>
+          </>
+        ) : (
+          <Button
+            w={'100%'}
+            isLoading={creating}
+            onClick={handleSubmit((data) => onclickCreate(data))}
+          >
+            {t('common:common.Confirm Create')}
+          </Button>
+        )}
+      </ModalFooter>
+      <File
+        onSelect={(e) =>
+          onSelectImage(e, {
+            maxH: 300,
+            maxW: 300,
+            callback: (e) => setValue('avatar', e)
+          })
+        }
+      />
+    </MyModal>
+  );
+}
+
+export default React.memo(EditModal);

projects/app/src/pageComponents/account/team/GroupManage/GroupInfoModal.tsx

@@ -0,0 +1,127 @@
+import { Input, HStack, ModalBody, Button, ModalFooter } from '@chakra-ui/react';
+import MyModal from '@fastgpt/web/components/common/MyModal';
+import Avatar from '@fastgpt/web/components/common/Avatar';
+import FormLabel from '@fastgpt/web/components/common/MyBox/FormLabel';
+
+import { useTranslation } from 'next-i18next';
+import React, { useMemo } from 'react';
+import { useSelectFile } from '@/web/common/file/hooks/useSelectFile';
+import { useRequest2 } from '@fastgpt/web/hooks/useRequest';
+import { useForm } from 'react-hook-form';
+import { useContextSelector } from 'use-context-selector';
+import { TeamContext } from '../context';
+import { postCreateGroup, putUpdateGroup } from '@/web/support/user/team/group/api';
+import { DEFAULT_TEAM_AVATAR } from '@fastgpt/global/common/system/constants';
+
+export type GroupFormType = {
+  avatar: string;
+  name: string;
+};
+
+function GroupInfoModal({ onClose, editGroupId }: { onClose: () => void; editGroupId?: string }) {
+  const { refetchGroups, groups, refetchMembers } = useContextSelector(TeamContext, (v) => v);
+  const { t } = useTranslation();
+  const {
+    File: AvatarSelect,
+    onOpen: onOpenSelectAvatar,
+    onSelectImage
+  } = useSelectFile({
+    fileType: '.jpg, .jpeg, .png',
+    multiple: false
+  });
+
+  const group = useMemo(() => {
+    return groups.find((item) => item._id === editGroupId);
+  }, [editGroupId, groups]);
+
+  const { register, handleSubmit, getValues, setValue } = useForm<GroupFormType>({
+    defaultValues: {
+      name: group?.name || '',
+      avatar: group?.avatar || DEFAULT_TEAM_AVATAR
+    }
+  });
+
+  const { loading: uploadingAvatar, run: onSelectAvatar } = useRequest2(
+    async (file: File[]) => {
+      return onSelectImage(file, {
+        maxW: 300,
+        maxH: 300
+      });
+    },
+    {
+      onSuccess: (src: string) => {
+        setValue('avatar', src);
+      }
+    }
+  );
+
+  const { runAsync: onCreate, loading: isLoadingCreate } = useRequest2(
+    (data: GroupFormType) => {
+      return postCreateGroup({
+        name: data.name,
+        avatar: data.avatar
+      });
+    },
+    {
+      onSuccess: () => Promise.all([onClose(), refetchGroups(), refetchMembers()])
+    }
+  );
+
+  const { runAsync: onUpdate, loading: isLoadingUpdate } = useRequest2(
+    async (data: GroupFormType) => {
+      if (!editGroupId) return;
+      return putUpdateGroup({
+        groupId: editGroupId,
+        name: data.name,
+        avatar: data.avatar
+      });
+    },
+    {
+      onSuccess: () => Promise.all([onClose(), refetchGroups(), refetchMembers()])
+    }
+  );
+
+  const isLoading = isLoadingUpdate || isLoadingCreate || uploadingAvatar;
+
+  return (
+    <MyModal
+      onClose={onClose}
+      title={editGroupId ? t('user:team.group.edit') : t('user:team.group.create')}
+      iconSrc={group?.avatar ?? DEFAULT_TEAM_AVATAR}
+    >
+      <ModalBody flex={1} overflow={'auto'} display={'flex'} flexDirection={'column'} gap={4}>
+        <FormLabel w="80px">{t('user:team.avatar_and_name')}</FormLabel>
+        <HStack>
+          <Avatar
+            src={getValues('avatar')}
+            onClick={onOpenSelectAvatar}
+            cursor={'pointer'}
+            borderRadius={'md'}
+          />
+          <Input
+            bgColor="myGray.50"
+            {...register('name', { required: true })}
+            placeholder={t('user:team.group.name')}
+          />
+        </HStack>
+      </ModalBody>
+      <ModalFooter alignItems="flex-end">
+        <Button
+          isLoading={isLoading}
+          onClick={handleSubmit((data) => {
+            if (editGroupId) {
+              onUpdate(data);
+            } else {
+              onCreate(data);
+            }
+          })}
+        >
+          {editGroupId ? t('common:common.Save') : t('common:new_create')}
+        </Button>
+      </ModalFooter>
+      <AvatarSelect onSelect={onSelectAvatar} />
+    </MyModal>
+  );
+}
+
+export default GroupInfoModal;

projects/app/src/pageComponents/account/team/GroupManage/GroupManageMember.tsx

@@ -0,0 +1,281 @@
+import {
+  Box,
+  ModalBody,
+  Flex,
+  Button,
+  ModalFooter,
+  Checkbox,
+  Grid,
+  HStack
+} from '@chakra-ui/react';
+import MyModal from '@fastgpt/web/components/common/MyModal';
+import MyIcon from '@fastgpt/web/components/common/Icon';
+import Avatar from '@fastgpt/web/components/common/Avatar';
+import Tag from '@fastgpt/web/components/common/Tag';
+
+import { useTranslation } from 'next-i18next';
+import React, { useMemo, useState } from 'react';
+import { useRequest2 } from '@fastgpt/web/hooks/useRequest';
+import { useContextSelector } from 'use-context-selector';
+import { TeamContext } from '../context';
+import { putUpdateGroup } from '@/web/support/user/team/group/api';
+import { GroupMemberRole } from '@fastgpt/global/support/permission/memberGroup/constant';
+import { useUserStore } from '@/web/support/user/useUserStore';
+import { useToast } from '@fastgpt/web/hooks/useToast';
+import { DEFAULT_TEAM_AVATAR } from '@fastgpt/global/common/system/constants';
+import SearchInput from '@fastgpt/web/components/common/Input/SearchInput';
+
+export type GroupFormType = {
+  members: {
+    tmbId: string;
+    role: `${GroupMemberRole}`;
+  }[];
+};
+
+// 1. Owner can not be deleted, toast
+// 2. Owner/Admin can manage members
+// 3. Owner can add/remove admins
+function GroupEditModal({ onClose, editGroupId }: { onClose: () => void; editGroupId?: string }) {
+  const { t } = useTranslation();
+  const { userInfo } = useUserStore();
+  const { toast } = useToast();
+
+  const groups = useContextSelector(TeamContext, (v) => v.groups);
+  const refetchGroups = useContextSelector(TeamContext, (v) => v.refetchGroups);
+  const group = useMemo(() => {
+    return groups.find((item) => item._id === editGroupId);
+  }, [editGroupId, groups]);
+
+  const allMembers = useContextSelector(TeamContext, (v) => v.members);
+  const refetchMembers = useContextSelector(TeamContext, (v) => v.refetchMembers);
+  const MemberScrollData = useContextSelector(TeamContext, (v) => v.MemberScrollData);
+  const [hoveredMemberId, setHoveredMemberId] = useState<string>();
+  const [members, setMembers] = useState(group?.members || []);
+
+  const [searchKey, setSearchKey] = useState('');
+  const filtered = useMemo(() => {
+    return [
+      ...allMembers.filter((member) => {
+        if (member.memberName.toLowerCase().includes(searchKey.toLowerCase())) return true;
+        return false;
+      })
+    ];
+  }, [searchKey, allMembers]);
+
+  const { runAsync: onUpdate, loading: isLoadingUpdate } = useRequest2(
+    async () => {
+      if (!editGroupId || !members.length) return;
+      return putUpdateGroup({
+        groupId: editGroupId,
+        memberList: members
+      });
+    },
+    {
+      onSuccess: () => Promise.all([onClose(), refetchGroups(), refetchMembers()])
+    }
+  );
+
+  const isSelected = (memberId: string) => {
+    return members.find((item) => item.tmbId === memberId);
+  };
+
+  const myRole = useMemo(() => {
+    if (userInfo?.team.permission.hasManagePer) {
+      return 'owner';
+    }
+    return members.find((item) => item.tmbId === userInfo?.team.tmbId)?.role ?? 'member';
+  }, [members, userInfo]);
+
+  const handleToggleSelect = (memberId: string) => {
+    if (
+      myRole === 'owner' &&
+      memberId === group?.members.find((item) => item.role === 'owner')?.tmbId
+    ) {
+      toast({
+        title: t('user:team.group.toast.can_not_delete_owner'),
+        status: 'error'
+      });
+      return;
+    }
+
+    if (
+      myRole === 'admin' &&
+      group?.members.find((item) => String(item.tmbId) === memberId)?.role !== 'member'
+    ) {
+      return;
+    }
+
+    if (isSelected(memberId)) {
+      setMembers(members.filter((item) => item.tmbId !== memberId));
+    } else {
+      setMembers([...members, { tmbId: memberId, role: 'member' }]);
+    }
+  };
+
+  const handleToggleAdmin = (memberId: string) => {
+    if (myRole === 'owner' && isSelected(memberId)) {
+      const oldRole = members.find((item) => item.tmbId === memberId)?.role;
+      if (oldRole === 'admin') {
+        setMembers(
+          members.map((item) => (item.tmbId === memberId ? { ...item, role: 'member' } : item))
+        );
+      } else {
+        setMembers(
+          members.map((item) => (item.tmbId === memberId ? { ...item, role: 'admin' } : item))
+        );
+      }
+    }
+  };
+
+  const isLoading = isLoadingUpdate;
+  return (
+    <MyModal
+      onClose={onClose}
+      title={t('user:team.group.manage_member')}
+      iconSrc={group?.avatar ?? DEFAULT_TEAM_AVATAR}
+      iconColor="primary.600"
+      minW="800px"
+      h={'100%'}
+      isCentered
+    >
+      <ModalBody flex={1}>
+        <Grid
+          border="1px solid"
+          borderColor="myGray.200"
+          borderRadius="0.5rem"
+          gridTemplateColumns="1fr 1fr"
+          h={'100%'}
+        >
+          <Flex flexDirection="column" p="4">
+            <SearchInput
+              placeholder={t('user:search_user')}
+              fontSize="sm"
+              bg={'myGray.50'}
+              onChange={(e) => {
+                setSearchKey(e.target.value);
+              }}
+            />
+            <MemberScrollData mt={3} flex={'1 0 0'} h={0}>
+              {filtered.map((member) => {
+                return (
+                  <HStack
+                    py="2"
+                    px={3}
+                    borderRadius={'md'}
+                    alignItems="center"
+                    key={member.tmbId}
+                    cursor={'pointer'}
+                    _hover={{
+                      bg: 'myGray.50',
+                      ...(!isSelected(member.tmbId) ? { svg: { color: 'myGray.50' } } : {})
+                    }}
+                    _notLast={{ mb: 2 }}
+                    onClick={() => handleToggleSelect(member.tmbId)}
+                  >
+                    <Checkbox
+                      isChecked={!!isSelected(member.tmbId)}
+                      icon={<MyIcon name={'common/check'} w={'12px'} />}
+                    />
+                    <Avatar src={member.avatar} w="1.5rem" borderRadius={'50%'} />
+                    <Box>{member.memberName}</Box>
+                  </HStack>
+                );
+              })}
+            </MemberScrollData>
+          </Flex>
+          <Flex borderLeft="1px" borderColor="myGray.200" flexDirection="column" p="4" h={'100%'}>
+            <Box mt={2}>{t('common:chosen') + ': ' + members.length}</Box>
+            <MemberScrollData mt={3} flex={'1 0 0'} h={0}>
+              {members.map((member) => {
+                return (
+                  <HStack
+                    onMouseEnter={() => setHoveredMemberId(member.tmbId)}
+                    onMouseLeave={() => setHoveredMemberId(undefined)}
+                    justifyContent="space-between"
+                    py="2"
+                    px={3}
+                    borderRadius={'md'}
+                    key={member.tmbId + member.role}
+                    _hover={{ bg: 'myGray.50' }}
+                    _notLast={{ mb: 2 }}
+                  >
+                    <HStack>
+                      <Avatar
+                        src={allMembers.find((item) => item.tmbId === member.tmbId)?.avatar}
+                        w="1.5rem"
+                        borderRadius={'md'}
+                      />
+                      <Box>
+                        {allMembers.find((item) => item.tmbId === member.tmbId)?.memberName}
+                      </Box>
+                    </HStack>
+                    <Box mr="auto">
+                      {(() => {
+                        if (member.role === 'owner') {
+                          return (
+                            <Tag ml={2} colorSchema="gray">
+                              {t('user:team.group.role.owner')}
+                            </Tag>
+                          );
+                        } else if (member.role === 'admin') {
+                          return (
+                            <Tag ml={2} mr="auto">
+                              {t('user:team.group.role.admin')}
+                              {myRole === 'owner' && (
+                                <MyIcon
+                                  ml={1}
+                                  name={'common/closeLight'}
+                                  w={'1rem'}
+                                  cursor={'pointer'}
+                                  _hover={{ color: 'red.600' }}
+                                  onClick={() => handleToggleAdmin(member.tmbId)}
+                                />
+                              )}
+                            </Tag>
+                          );
+                        } else if (member.role === 'member') {
+                          return (
+                            myRole === 'owner' &&
+                            hoveredMemberId === member.tmbId && (
+                              <Tag
+                                ml={2}
+                                colorSchema="yellow"
+                                cursor={'pointer'}
+                                onClick={() => handleToggleAdmin(member.tmbId)}
+                              >
+                                {t('user:team.group.set_as_admin')}
+                              </Tag>
+                            )
+                          );
+                        }
+                      })()}
+                    </Box>
+                    {(myRole === 'owner' || (myRole === 'admin' && member.role === 'member')) && (
+                      <MyIcon
+                        name={'common/closeLight'}
+                        w={'1rem'}
+                        cursor={'pointer'}
+                        _hover={{ color: 'red.600' }}
+                        onClick={() => handleToggleSelect(member.tmbId)}
+                      />
+                    )}
+                  </HStack>
+                );
+              })}
+            </MemberScrollData>
+          </Flex>
+        </Grid>
+      </ModalBody>
+      <ModalFooter>
+        <Button variant={'whiteBase'} mr={3} onClick={onClose}>
+          {t('common:common.Close')}
+        </Button>
+        <Button isLoading={isLoading} onClick={onUpdate}>
+          {t('common:common.Save')}
+        </Button>
+      </ModalFooter>
+    </MyModal>
+  );
+}
+
+export default GroupEditModal;

projects/app/src/pageComponents/account/team/GroupManage/GroupTransferOwnerModal.tsx

@@ -0,0 +1,196 @@
+import { putUpdateGroup } from '@/web/support/user/team/group/api';
+import {
+  Box,
+  Flex,
+  HStack,
+  Input,
+  ModalBody,
+  ModalFooter,
+  Button,
+  useDisclosure,
+  Checkbox
+} from '@chakra-ui/react';
+import { TeamMemberItemType } from '@fastgpt/global/support/user/team/type';
+import Avatar from '@fastgpt/web/components/common/Avatar';
+import MyModal from '@fastgpt/web/components/common/MyModal';
+import { useRequest2 } from '@fastgpt/web/hooks/useRequest';
+import { useTranslation } from 'next-i18next';
+import React, { useMemo, useState } from 'react';
+import { TeamContext } from '../context';
+import { useContextSelector } from 'use-context-selector';
+
+export type ChangeOwnerModalProps = {
+  groupId: string;
+};
+
+export function ChangeOwnerModal({
+  onClose,
+  groupId
+}: ChangeOwnerModalProps & { onClose: () => void }) {
+  const { t } = useTranslation();
+  const [inputValue, setInputValue] = React.useState('');
+  const { members: allMembers, groups, refetchGroups } = useContextSelector(TeamContext, (v) => v);
+  const group = useMemo(() => {
+    return groups.find((item) => item._id === groupId);
+  }, [groupId, groups]);
+
+  const memberList = allMembers.filter((item) => {
+    return item.memberName.toLowerCase().includes(inputValue.toLowerCase());
+  });
+
+  const OldOwnerId = useMemo(() => {
+    return group?.members.find((item) => item.role === 'owner')?.tmbId;
+  }, [group]);
+
+  const [keepAdmin, setKeepAdmin] = useState(true);
+
+  const {
+    isOpen: isOpenMemberListMenu,
+    onClose: onCloseMemberListMenu,
+    onOpen: onOpenMemberListMenu
+  } = useDisclosure();
+
+  const [selectedMember, setSelectedMember] = useState<TeamMemberItemType | null>(null);
+
+  const onChangeOwner = async (tmbId: string) => {
+    if (!group) {
+      return;
+    }
+
+    const newMemberList = group.members
+      .map((item) => {
+        if (item.tmbId === OldOwnerId) {
+          if (keepAdmin) {
+            return { tmbId: OldOwnerId, role: 'admin' };
+          }
+          return { tmbId: OldOwnerId, role: 'member' };
+        }
+        return item;
+      })
+      .filter((item) => item.tmbId !== tmbId) as any;
+
+    newMemberList.push({ tmbId, role: 'owner' });
+
+    return putUpdateGroup({
+      groupId,
+      memberList: newMemberList
+    });
+  };
+
+  const { runAsync, loading } = useRequest2(onChangeOwner, {
+    onSuccess: () => Promise.all([onClose(), refetchGroups()]),
+    successToast: t('common:permission.change_owner_success'),
+    errorToast: t('common:permission.change_owner_failed')
+  });
+
+  const onConfirm = async () => {
+    if (!selectedMember) {
+      return;
+    }
+    await runAsync(selectedMember.tmbId);
+  };
+
+  return (
+    <MyModal
+      isOpen
+      iconSrc="modal/changePer"
+      iconColor="primary.600"
+      onClose={onClose}
+      title={t('common:permission.change_owner')}
+      isLoading={loading}
+    >
+      <ModalBody>
+        <HStack>
+          <Avatar src={group?.avatar} w={'1.75rem'} borderRadius={'md'} />
+          <Box>{group?.name}</Box>
+        </HStack>
+        <Flex mt={4} justify="start" flexDirection="column">
+          <Box fontSize="14px" fontWeight="500" color="myGray.900">
+            {t('common:permission.change_owner_to')}
+          </Box>
+          <Flex mt="4" alignItems="center" position={'relative'}>
+            {selectedMember && (
+              <Avatar
+                src={selectedMember.avatar}
+                w={'20px'}
+                borderRadius={'md'}
+                position="absolute"
+                left={3}
+              />
+            )}
+            <Input
+              placeholder={t('common:permission.change_owner_placeholder')}
+              value={inputValue}
+              onChange={(e) => {
+                setInputValue(e.target.value);
+                setSelectedMember(null);
+              }}
+              onFocus={() => {
+                onOpenMemberListMenu();
+                setSelectedMember(null);
+              }}
+              {...(selectedMember && { pl: '10' })}
+            />
+          </Flex>
+          {isOpenMemberListMenu && memberList.length > 0 && (
+            <Flex
+              mt={2}
+              w={'100%'}
+              flexDirection={'column'}
+              gap={2}
+              p={1}
+              boxShadow="lg"
+              bg="white"
+              borderRadius="md"
+              zIndex={10}
+              maxH={'300px'}
+              overflow={'auto'}
+            >
+              {memberList.map((item) => (
+                <Box
+                  key={item.tmbId}
+                  p="2"
+                  _hover={{ bg: 'myGray.100' }}
+                  mx="1"
+                  borderRadius="md"
+                  cursor={'pointer'}
+                  onClickCapture={() => {
+                    setInputValue(item.memberName);
+                    setSelectedMember(item);
+                    onCloseMemberListMenu();
+                  }}
+                >
+                  <Flex align="center">
+                    <Avatar src={item.avatar} w="1.25rem" />
+                    <Box ml="2">{item.memberName}</Box>
+                  </Flex>
+                </Box>
+              ))}
+            </Flex>
+          )}
+
+          <Box mt="4">
+            <Checkbox
+              isChecked={keepAdmin}
+              onChange={(e) => {
+                setKeepAdmin(e.target.checked);
+              }}
+            >
+              {t('account_team:retain_admin_permissions')}
+            </Checkbox>
+          </Box>
+        </Flex>
+      </ModalBody>
+      <ModalFooter>
+        <HStack>
+          <Button onClick={onClose} variant={'whiteBase'}>
+            {t('common:common.Cancel')}
+          </Button>
+          <Button onClick={onConfirm}>{t('common:common.Confirm')}</Button>
+        </HStack>
+      </ModalFooter>
+    </MyModal>
+  );
+}
+
+export default ChangeOwnerModal;

projects/app/src/pageComponents/account/team/GroupManage/index.tsx

@@ -0,0 +1,276 @@
+import AvatarGroup from '@fastgpt/web/components/common/Avatar/AvatarGroup';
+import {
+  Box,
+  Button,
+  Flex,
+  HStack,
+  Table,
+  TableContainer,
+  Tbody,
+  Td,
+  Th,
+  Thead,
+  Tr,
+  useDisclosure
+} from '@chakra-ui/react';
+import { useTranslation } from 'next-i18next';
+import { useConfirm } from '@fastgpt/web/hooks/useConfirm';
+import MyBox from '@fastgpt/web/components/common/MyBox';
+import { useContextSelector } from 'use-context-selector';
+import { TeamContext } from '../context';
+import MyMenu, { MenuItemType } from '@fastgpt/web/components/common/MyMenu';
+import MyIcon from '@fastgpt/web/components/common/Icon';
+import { useUserStore } from '@/web/support/user/useUserStore';
+import { useRequest2 } from '@fastgpt/web/hooks/useRequest';
+import { deleteGroup } from '@/web/support/user/team/group/api';
+import { DefaultGroupName } from '@fastgpt/global/support/user/team/group/constant';
+import MemberTag from '../../../../components/support/user/team/Info/MemberTag';
+import MyTooltip from '@fastgpt/web/components/common/MyTooltip';
+import dynamic from 'next/dynamic';
+import { useState } from 'react';
+import IconButton from '../OrgManage/IconButton';
+import { MemberGroupType } from '@fastgpt/global/support/permission/memberGroup/type';
+
+const ChangeOwnerModal = dynamic(() => import('./GroupTransferOwnerModal'));
+const GroupInfoModal = dynamic(() => import('./GroupInfoModal'));
+const GroupManageMember = dynamic(() => import('./GroupManageMember'));
+
+function MemberTable({ Tabs }: { Tabs: React.ReactNode }) {
+  const { t } = useTranslation();
+  const { userInfo } = useUserStore();
+
+  const { groups, refetchGroups, members, refetchMembers } = useContextSelector(
+    TeamContext,
+    (v) => v
+  );
+
+  const [editGroup, setEditGroup] = useState<MemberGroupType>();
+  const {
+    isOpen: isOpenGroupInfo,
+    onOpen: onOpenGroupInfo,
+    onClose: onCloseGroupInfo
+  } = useDisclosure();
+
+  const onEditGroupInfo = (e: MemberGroupType) => {
+    setEditGroup(e);
+    onOpenGroupInfo();
+  };
+
+  const { ConfirmModal: ConfirmDeleteGroupModal, openConfirm: openDeleteGroupModal } = useConfirm({
+    type: 'delete',
+    content: t('account_team:confirm_delete_group')
+  });
+
+  const { runAsync: delDeleteGroup } = useRequest2(deleteGroup, {
+    onSuccess: () => {
+      refetchGroups();
+      refetchMembers();
+    }
+  });
+
+  const {
+    isOpen: isOpenManageGroupMember,
+    onOpen: onOpenManageGroupMember,
+    onClose: onCloseManageGroupMember
+  } = useDisclosure();
+  const onManageMember = (e: MemberGroupType) => {
+    setEditGroup(e);
+    onOpenManageGroupMember();
+  };
+
+  const hasGroupManagePer = (group: (typeof groups)[0]) =>
+    userInfo?.team.permission.hasManagePer ||
+    ['admin', 'owner'].includes(
+      group.members.find((item) => item.tmbId === userInfo?.team.tmbId)?.role ?? ''
+    );
+  const isGroupOwner = (group: (typeof groups)[0]) =>
+    userInfo?.team.permission.hasManagePer ||
+    group.members.find((item) => item.role === 'owner')?.tmbId === userInfo?.team.tmbId;
+
+  const {
+    isOpen: isOpenChangeOwner,
+    onOpen: onOpenChangeOwner,
+    onClose: onCloseChangeOwner
+  } = useDisclosure();
+  const onChangeOwner = (e: MemberGroupType) => {
+    setEditGroup(e);
+    onOpenChangeOwner();
+  };
+
+  return (
+    <>
+      <Flex justify={'space-between'} align={'center'} pb={'1rem'}>
+        {Tabs}
+        {userInfo?.team.permission.hasManagePer && (
+          <Button
+            variant={'primary'}
+            size="md"
+            borderRadius={'md'}
+            ml={3}
+            leftIcon={<MyIcon name="support/permission/collaborator" w={'14px'} />}
+            onClick={onOpenGroupInfo}
+          >
+            {t('user:team.group.create')}
+          </Button>
+        )}
+      </Flex>
+
+      <MyBox flex={'1 0 0'} overflow={'auto'}>
+        <TableContainer overflow={'unset'} fontSize={'sm'}>
+          <Table overflow={'unset'}>
+            <Thead>
+              <Tr bg={'white !important'}>
+                <Th bg="myGray.100" borderLeftRadius="6px">
+                  {t('account_team:group_name')}
+                </Th>
+                <Th bg="myGray.100">{t('account_team:owner')}</Th>
+                <Th bg="myGray.100">{t('account_team:member')}</Th>
+                <Th bg="myGray.100" borderRightRadius="6px">
+                  {t('common:common.Action')}
+                </Th>
+              </Tr>
+            </Thead>
+            <Tbody>
+              {groups?.map((group) => (
+                <Tr key={group._id} overflow={'unset'}>
+                  <Td>
+                    <HStack>
+                      <MemberTag
+                        name={
+                          group.name === DefaultGroupName
+                            ? userInfo?.team.teamName ?? ''
+                            : group.name
+                        }
+                        avatar={group.avatar}
+                      />
+                      <Box>
+                        ({group.name === DefaultGroupName ? members.length : group.members.length})
+                      </Box>
+                    </HStack>
+                  </Td>
+                  <Td>
+                    <MemberTag
+                      name={
+                        group.name === DefaultGroupName
+                          ? members.find((item) => item.role === 'owner')?.memberName ?? ''
+                          : members.find(
+                              (item) =>
+                                item.tmbId ===
+                                group.members.find((item) => item.role === 'owner')?.tmbId
+                            )?.memberName ?? ''
+                      }
+                      avatar={
+                        group.name === DefaultGroupName
+                          ? members.find((item) => item.role === 'owner')?.avatar ?? ''
+                          : members.find(
+                              (i) =>
+                                i.tmbId ===
+                                group.members.find((item) => item.role === 'owner')?.tmbId
+                            )?.avatar ?? ''
+                      }
+                    />
+                  </Td>
+                  <Td>
+                    {group.name === DefaultGroupName ? (
+                      <AvatarGroup avatars={members.map((v) => v.avatar)} groupId={group._id} />
+                    ) : hasGroupManagePer(group) ? (
+                      <MyTooltip label={t('account_team:manage_member')}>
+                        <Box cursor="pointer" onClick={() => onManageMember(group)}>
+                          <AvatarGroup
+                            avatars={group.members.map(
+                              (v) => members.find((m) => m.tmbId === v.tmbId)?.avatar ?? ''
+                            )}
+                            groupId={group._id}
+                          />
+                        </Box>
+                      </MyTooltip>
+                    ) : (
+                      <AvatarGroup
+                        avatars={group.members.map(
+                          (v) => members.find((m) => m.tmbId === v.tmbId)?.avatar ?? ''
+                        )}
+                        groupId={group._id}
+                      />
+                    )}
+                  </Td>
+                  <Td>
+                    {hasGroupManagePer(group) && group.name !== DefaultGroupName && (
+                      <MyMenu
+                        Button={<IconButton name={'more'} />}
+                        menuList={[
+                          {
+                            children: [
+                              {
+                                label: t('account_team:edit_info'),
+                                icon: 'edit',
+                                onClick: () => {
+                                  onEditGroupInfo(group);
+                                }
+                              },
+                              {
+                                label: t('account_team:manage_member'),
+                                icon: 'support/team/group',
+                                onClick: () => {
+                                  onManageMember(group);
+                                }
+                              },
+                              ...(isGroupOwner(group)
+                                ? [
+                                    {
+                                      label: t('account_team:transfer_ownership'),
+                                      icon: 'modal/changePer',
+                                      onClick: () => {
+                                        onChangeOwner(group);
+                                      },
+                                      type: 'primary' as MenuItemType
+                                    },
+                                    {
+                                      label: t('common:common.Delete'),
+                                      icon: 'delete',
+                                      onClick: () => {
+                                        openDeleteGroupModal(() => delDeleteGroup(group._id))();
+                                      },
+                                      type: 'danger' as MenuItemType
+                                    }
+                                  ]
+                                : [])
+                            ]
+                          }
+                        ]}
+                      />
+                    )}
+                  </Td>
+                </Tr>
+              ))}
+            </Tbody>
+          </Table>
+        </TableContainer>
+      </MyBox>
+
+      <ConfirmDeleteGroupModal />
+      {isOpenChangeOwner && editGroup && (
+        <ChangeOwnerModal groupId={editGroup._id} onClose={onCloseChangeOwner} />
+      )}
+      {isOpenGroupInfo && (
+        <GroupInfoModal
+          onClose={() => {
+            onCloseGroupInfo();
+            setEditGroup(undefined);
+          }}
+          editGroupId={editGroup?._id}
+        />
+      )}
+      {isOpenManageGroupMember && editGroup && (
+        <GroupManageMember
+          onClose={() => {
+            onCloseManageGroupMember();
+            setEditGroup(undefined);
+          }}
+          editGroupId={editGroup._id}
+        />
+      )}
+    </>
+  );
+}
+
+export default MemberTable;

projects/app/src/pageComponents/account/team/InviteModal.tsx

@@ -0,0 +1,90 @@
+import React, { useState } from 'react';
+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 { useRequest2 } 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';
+
+const InviteModal = ({
+  teamId,
+  onClose,
+  onSuccess
+}: {
+  teamId: string;
+  onClose: () => void;
+  onSuccess: () => void;
+}) => {
+  const { t } = useTranslation();
+  const { ConfirmModal, openConfirm } = useConfirm({
+    title: t('user:team.Invite Member Result Tip'),
+    showCancel: false
+  });
+
+  const [inviteUsernames, setInviteUsernames] = useState<string[]>([]);
+
+  const { runAsync: onInvite, loading: isLoading } = useRequest2(
+    () =>
+      postInviteTeamMember({
+        teamId,
+        usernames: inviteUsernames
+      }),
+    {
+      onSuccess(res: InviteMemberResponse) {
+        onSuccess();
+        openConfirm(
+          () => onClose(),
+          undefined,
+          <Box whiteSpace={'pre-wrap'}>
+            {t('user:team.Invite Member Success Tip', {
+              success: res.invite.length,
+              inValid: res.inValid.map((item) => item.username).join(', '),
+              inTeam: res.inTeam.map((item) => item.username).join(', ')
+            })}
+          </Box>
+        )();
+      },
+      errorToast: t('user:team.Invite Member Failed Tip')
+    }
+  );
+
+  return (
+    <MyModal
+      isOpen
+      iconSrc="common/inviteLight"
+      iconColor="primary.600"
+      title={
+        <Box>
+          <Box>{t('common:user.team.Invite Member')}</Box>
+          <Box color={'myGray.500'} fontSize={'xs'} fontWeight={'normal'}>
+            {t('common:user.team.Invite Member Tips')}
+          </Box>
+        </Box>
+      }
+      maxW={['90vw', '400px']}
+      overflow={'unset'}
+    >
+      <ModalCloseButton onClick={onClose} />
+      <ModalBody>
+        <Box mb={2}>{t('common:user.Account')}</Box>
+        <TagTextarea defaultValues={inviteUsernames} onUpdate={setInviteUsernames} />
+      </ModalBody>
+      <ModalFooter>
+        <Button
+          w={'100%'}
+          h={'34px'}
+          isDisabled={inviteUsernames.length === 0}
+          isLoading={isLoading}
+          onClick={onInvite}
+        >
+          {t('user:team.Confirm Invite')}
+        </Button>
+      </ModalFooter>
+      <ConfirmModal />
+    </MyModal>
+  );
+};
+
+export default InviteModal;

projects/app/src/pageComponents/account/team/MemberTable.tsx

@@ -0,0 +1,267 @@
+import Avatar from '@fastgpt/web/components/common/Avatar';
+import {
+  Box,
+  Button,
+  Flex,
+  HStack,
+  Table,
+  TableContainer,
+  Tbody,
+  Td,
+  Th,
+  Thead,
+  Tr,
+  useDisclosure
+} from '@chakra-ui/react';
+import { useTranslation } from 'next-i18next';
+import { useUserStore } from '@/web/support/user/useUserStore';
+import { useConfirm } from '@fastgpt/web/hooks/useConfirm';
+import { delRemoveMember } from '@/web/support/user/team/api';
+import Tag from '@fastgpt/web/components/common/Tag';
+import Icon from '@fastgpt/web/components/common/Icon';
+import GroupTags from '@/components/support/permission/Group/GroupTags';
+import { useContextSelector } from 'use-context-selector';
+import { TeamContext } from './context';
+import { useSystemStore } from '@/web/common/system/useSystemStore';
+import MyIcon from '@fastgpt/web/components/common/Icon';
+import dynamic from 'next/dynamic';
+import { useToast } from '@fastgpt/web/hooks/useToast';
+import { TeamErrEnum } from '@fastgpt/global/common/error/code/team';
+import { useRequest2 } from '@fastgpt/web/hooks/useRequest';
+import { delLeaveTeam } from '@/web/support/user/team/api';
+import { postSyncMembers } from '@/web/support/user/api';
+import MyLoading from '@fastgpt/web/components/common/MyLoading';
+import { TeamMemberRoleEnum } from '@fastgpt/global/support/user/team/constant';
+
+const InviteModal = dynamic(() => import('./InviteModal'));
+const TeamTagModal = dynamic(() => import('@/components/support/user/team/TeamTagModal'));
+
+function MemberTable({ Tabs }: { Tabs: React.ReactNode }) {
+  const { t } = useTranslation();
+  const { toast } = useToast();
+  const { userInfo, teamPlanStatus } = useUserStore();
+  const { feConfigs, setNotSufficientModalType } = useSystemStore();
+
+  const {
+    groups,
+    refetchGroups,
+    myTeams,
+    refetchTeams,
+    members,
+    refetchMembers,
+    onSwitchTeam,
+    MemberScrollData
+  } = useContextSelector(TeamContext, (v) => v);
+
+  const {
+    isOpen: isOpenTeamTagsAsync,
+    onOpen: onOpenTeamTagsAsync,
+    onClose: onCloseTeamTagsAsync
+  } = useDisclosure();
+  const { isOpen: isOpenInvite, onOpen: onOpenInvite, onClose: onCloseInvite } = useDisclosure();
+
+  const { ConfirmModal: ConfirmRemoveMemberModal, openConfirm: openRemoveMember } = useConfirm({
+    type: 'delete'
+  });
+
+  const isSyncMember = feConfigs.register_method?.includes('sync');
+
+  const { runAsync: onLeaveTeam } = useRequest2(
+    async () => {
+      const defaultTeam = myTeams.find((item) => item.defaultTeam) || myTeams[0];
+      // change to personal team
+      onSwitchTeam(defaultTeam.teamId);
+      return delLeaveTeam();
+    },
+    {
+      onSuccess() {
+        refetchTeams();
+      },
+      errorToast: t('account_team:user_team_leave_team_failed')
+    }
+  );
+  const { ConfirmModal: ConfirmLeaveTeamModal, openConfirm: openLeaveConfirm } = useConfirm({
+    content: t('account_team:confirm_leave_team')
+  });
+
+  const { runAsync: onSyncMember, loading: isSyncing } = useRequest2(postSyncMembers, {
+    onSuccess() {
+      refetchMembers();
+    },
+    successToast: t('account_team:sync_member_success'),
+    errorToast: t('account_team:sync_member_failed')
+  });
+
+  return (
+    <>
+      {isSyncing && <MyLoading />}
+      <Flex justify={'space-between'} align={'center'} pb={'1rem'}>
+        {Tabs}
+        <HStack>
+          {userInfo?.team.permission.hasManagePer && feConfigs?.show_team_chat && (
+            <Button
+              variant={'whitePrimary'}
+              size="md"
+              borderRadius={'md'}
+              ml={3}
+              leftIcon={<MyIcon name="core/dataset/tag" w={'16px'} />}
+              onClick={() => {
+                onOpenTeamTagsAsync();
+              }}
+            >
+              {t('account_team:label_sync')}
+            </Button>
+          )}
+          {userInfo?.team.permission.hasManagePer && isSyncMember && (
+            <Button
+              variant={'primary'}
+              size="md"
+              borderRadius={'md'}
+              ml={3}
+              leftIcon={<MyIcon name="common/retryLight" w={'16px'} color={'white'} />}
+              onClick={() => {
+                onSyncMember();
+              }}
+            >
+              {t('account_team:sync_immediately')}
+            </Button>
+          )}
+          {userInfo?.team.permission.hasManagePer && !isSyncMember && (
+            <Button
+              variant={'primary'}
+              size="md"
+              borderRadius={'md'}
+              ml={3}
+              leftIcon={<MyIcon name="common/inviteLight" w={'16px'} color={'white'} />}
+              onClick={() => {
+                if (
+                  teamPlanStatus?.standardConstants?.maxTeamMember &&
+                  teamPlanStatus.standardConstants.maxTeamMember <= members.length
+                ) {
+                  toast({
+                    status: 'warning',
+                    title: t('common:user.team.Over Max Member Tip', {
+                      max: teamPlanStatus.standardConstants.maxTeamMember
+                    })
+                  });
+                  setNotSufficientModalType(TeamErrEnum.teamMemberOverSize);
+                } else {
+                  onOpenInvite();
+                }
+              }}
+            >
+              {t('account_team:user_team_invite_member')}
+            </Button>
+          )}
+          {!userInfo?.team.permission.isOwner && (
+            <Button
+              variant={'whitePrimary'}
+              size="md"
+              borderRadius={'md'}
+              ml={3}
+              leftIcon={<MyIcon name={'support/account/loginoutLight'} w={'14px'} />}
+              onClick={() => openLeaveConfirm(onLeaveTeam)()}
+            >
+              {t('account_team:user_team_leave_team')}
+            </Button>
+          )}
+        </HStack>
+      </Flex>
+
+      <Box flex={'1 0 0'} overflow={'auto'}>
+        <TableContainer overflow={'unset'} fontSize={'sm'}>
+          <MemberScrollData>
+            <Table overflow={'unset'}>
+              <Thead>
+                <Tr bgColor={'white !important'}>
+                  <Th borderLeftRadius="6px" bgColor="myGray.100">
+                    {t('account_team:user_name')}
+                  </Th>
+                  <Th bgColor="myGray.100">{t('account_team:member_group')}</Th>
+                  {!isSyncMember && (
+                    <Th borderRightRadius="6px" bgColor="myGray.100">
+                      {t('common:common.Action')}
+                    </Th>
+                  )}
+                </Tr>
+              </Thead>
+              <Tbody>
+                {members?.map((item) => (
+                  <Tr key={item.userId} overflow={'unset'}>
+                    <Td>
+                      <HStack>
+                        <Avatar src={item.avatar} w={['18px', '22px']} borderRadius={'50%'} />
+                        <Box className={'textEllipsis'}>
+                          {item.memberName}
+                          {item.status === 'waiting' && (
+                            <Tag ml="2" colorSchema="yellow">
+                              {t('account_team:waiting')}
+                            </Tag>
+                          )}
+                        </Box>
+                      </HStack>
+                    </Td>
+                    <Td maxW={'300px'}>
+                      <GroupTags
+                        names={groups
+                          ?.filter((group) =>
+                            group.members.map((m) => m.tmbId).includes(item.tmbId)
+                          )
+                          .map((g) => g.name)}
+                        max={3}
+                      />
+                    </Td>
+                    {!isSyncMember && (
+                      <Td>
+                        {userInfo?.team.permission.hasManagePer &&
+                          item.role !== TeamMemberRoleEnum.owner &&
+                          item.tmbId !== userInfo?.team.tmbId && (
+                            <Icon
+                              name={'common/trash'}
+                              cursor={'pointer'}
+                              w="1rem"
+                              p="1"
+                              borderRadius="sm"
+                              _hover={{
+                                color: 'red.600',
+                                bgColor: 'myGray.100'
+                              }}
+                              onClick={() => {
+                                openRemoveMember(
+                                  () =>
+                                    delRemoveMember(item.tmbId).then(() =>
+                                      Promise.all([refetchGroups(), refetchMembers()])
+                                    ),
+                                  undefined,
+                                  t('account_team:remove_tip', {
+                                    username: item.memberName
+                                  })
+                                )();
+                              }}
+                            />
+                          )}
+                      </Td>
+                    )}
+                  </Tr>
+                ))}
+              </Tbody>
+            </Table>
+          </MemberScrollData>
+          <ConfirmRemoveMemberModal />
+        </TableContainer>
+      </Box>
+
+      <ConfirmLeaveTeamModal />
+      {isOpenInvite && userInfo?.team?.teamId && (
+        <InviteModal
+          teamId={userInfo.team.teamId}
+          onClose={onCloseInvite}
+          onSuccess={refetchMembers}
+        />
+      )}
+      {isOpenTeamTagsAsync && <TeamTagModal onClose={onCloseTeamTagsAsync} />}
+    </>
+  );
+}
+
+export default MemberTable;

projects/app/src/pageComponents/account/team/OrgManage/IconButton.tsx

@@ -0,0 +1,31 @@
+import { IconProps } from '@chakra-ui/react';
+import MyIcon from '@fastgpt/web/components/common/Icon';
+import type { IconNameType } from '@fastgpt/web/components/common/Icon/type';
+
+function IconButton({
+  name,
+  w = '1rem',
+  h = '1rem',
+  ...props
+}: {
+  name: IconNameType;
+} & IconProps) {
+  return (
+    <MyIcon
+      name={name}
+      w={w}
+      h={h}
+      transition={'background 0.1s'}
+      cursor={'pointer'}
+      p="1"
+      rounded={'sm'}
+      _hover={{
+        bg: 'myGray.05',
+        color: 'primary.600'
+      }}
+      {...props}
+    />
+  );
+}
+
+export default IconButton;

projects/app/src/pageComponents/account/team/OrgManage/OrgInfoModal.tsx

@@ -0,0 +1,162 @@
+import { useSelectFile } from '@/web/common/file/hooks/useSelectFile';
+import { postCreateOrg, putUpdateOrg } from '@/web/support/user/team/org/api';
+import { Button, HStack, Input, ModalBody, ModalFooter, Textarea } from '@chakra-ui/react';
+import { DEFAULT_ORG_AVATAR } from '@fastgpt/global/common/system/constants';
+import Avatar from '@fastgpt/web/components/common/Avatar';
+import FormLabel from '@fastgpt/web/components/common/MyBox/FormLabel';
+import MyModal from '@fastgpt/web/components/common/MyModal';
+import { useRequest2 } from '@fastgpt/web/hooks/useRequest';
+import { useTranslation } from 'next-i18next';
+import dynamic from 'next/dynamic';
+import { useForm } from 'react-hook-form';
+
+export type OrgFormType = {
+  _id: string;
+  avatar: string;
+  description?: string;
+  name: string;
+  path: string;
+  parentId?: string;
+};
+
+export const defaultOrgForm: OrgFormType = {
+  _id: '',
+  avatar: '',
+  description: '',
+  name: '',
+  path: ''
+};
+
+function OrgInfoModal({
+  editOrg,
+  onClose,
+  onSuccess
+}: {
+  editOrg: OrgFormType;
+  onClose: () => void;
+  onSuccess: () => void;
+}) {
+  const { t } = useTranslation();
+
+  const isEdit = !!editOrg._id;
+
+  const { register, handleSubmit, setValue, watch } = useForm<OrgFormType>({
+    defaultValues: {
+      name: editOrg.name,
+      avatar: editOrg.avatar,
+      description: editOrg.description
+    }
+  });
+  const avatar = watch('avatar');
+
+  const { run: onCreate, loading: isLoadingCreate } = useRequest2(
+    async (data: OrgFormType) => {
+      if (!editOrg.parentId) return;
+      return postCreateOrg({
+        name: data.name,
+        avatar: data.avatar,
+        parentId: editOrg.parentId,
+        description: data.description
+      });
+    },
+    {
+      successToast: t('common:common.Create Success'),
+      onSuccess: () => {
+        onClose();
+        onSuccess();
+      }
+    }
+  );
+
+  const { run: onUpdate, loading: isLoadingUpdate } = useRequest2(
+    async (data: OrgFormType) => {
+      if (!editOrg._id) return;
+      return putUpdateOrg({
+        orgId: editOrg._id,
+        name: data.name,
+        avatar: data.avatar,
+        description: data.description
+      });
+    },
+    {
+      successToast: t('common:common.Update Success'),
+      onSuccess: () => {
+        onClose();
+        onSuccess();
+      }
+    }
+  );
+
+  const {
+    File: AvatarSelect,
+    onOpen: onOpenSelectAvatar,
+    onSelectImage
+  } = useSelectFile({
+    fileType: '.jpg, .jpeg, .png',
+    multiple: false
+  });
+  const { loading: uploadingAvatar, run: onSelectAvatar } = useRequest2(
+    async (file: File[]) => {
+      return onSelectImage(file, {
+        maxW: 300,
+        maxH: 300
+      });
+    },
+    {
+      onSuccess: (src: string) => {
+        setValue('avatar', src);
+      }
+    }
+  );
+
+  const isLoading = uploadingAvatar || isLoadingUpdate || isLoadingCreate;
+
+  return (
+    <MyModal
+      isOpen
+      onClose={onClose}
+      title={isEdit ? t('account_team:edit_org_info') : t('account_team:create_org')}
+      iconSrc={'modal/edit'}
+    >
+      <ModalBody flex={1} overflow={'auto'} display={'flex'} flexDirection={'column'} gap={4}>
+        <FormLabel w="80px">{t('user:team.avatar_and_name')}</FormLabel>
+        <HStack>
+          <Avatar
+            src={avatar || DEFAULT_ORG_AVATAR}
+            onClick={onOpenSelectAvatar}
+            cursor={'pointer'}
+            borderRadius={'md'}
+          />
+          <Input
+            bgColor="myGray.50"
+            {...register('name', { required: true })}
+            placeholder={t('account_team:org_name')}
+          />
+        </HStack>
+        <FormLabel w="80px">{t('account_team:org_description')}</FormLabel>
+        <Textarea
+          bgColor="myGray.50"
+          {...register('description')}
+          placeholder={t('account_team:org_description')}
+        />
+      </ModalBody>
+      <ModalFooter alignItems="flex-end">
+        <Button
+          isLoading={isLoading}
+          onClick={handleSubmit((data) => {
+            if (isEdit) {
+              onUpdate(data);
+            } else {
+              onCreate(data);
+            }
+          })}
+        >
+          {isEdit ? t('common:common.Save') : t('common:new_create')}
+        </Button>
+      </ModalFooter>
+      <AvatarSelect onSelect={onSelectAvatar} />
+    </MyModal>
+  );
+}
+
+export default OrgInfoModal;

projects/app/src/pageComponents/account/team/OrgManage/OrgMemberManageModal.tsx

@@ -0,0 +1,200 @@
+import { putUpdateOrgMembers } from '@/web/support/user/team/org/api';
+import {
+  Box,
+  Button,
+  Checkbox,
+  Flex,
+  Grid,
+  HStack,
+  ModalBody,
+  ModalFooter
+} from '@chakra-ui/react';
+import type { GroupMemberRole } from '@fastgpt/global/support/permission/memberGroup/constant';
+import Avatar from '@fastgpt/web/components/common/Avatar';
+import MyIcon from '@fastgpt/web/components/common/Icon';
+import type { IconNameType } from '@fastgpt/web/components/common/Icon/type';
+import SearchInput from '@fastgpt/web/components/common/Input/SearchInput';
+import MyModal from '@fastgpt/web/components/common/MyModal';
+import { useRequest2 } from '@fastgpt/web/hooks/useRequest';
+import { useTranslation } from 'next-i18next';
+import type React from 'react';
+import { useMemo, useState } from 'react';
+import { useContextSelector } from 'use-context-selector';
+import { TeamContext } from '../context';
+import { OrgType } from '@fastgpt/global/support/user/team/org/type';
+
+export type GroupFormType = {
+  members: {
+    tmbId: string;
+    role: `${GroupMemberRole}`;
+  }[];
+};
+
+function CheckboxIcon({
+  name
+}: {
+  isChecked?: boolean;
+  isIndeterminate?: boolean;
+  name: IconNameType;
+}) {
+  return <MyIcon name={name} w="12px" />;
+}
+
+function OrgMemberManageModal({
+  currentOrg,
+  refetchOrgs,
+  onClose
+}: {
+  currentOrg: OrgType;
+  refetchOrgs: () => void;
+  onClose: () => void;
+}) {
+  const { t } = useTranslation();
+  const { members: allMembers, MemberScrollData } = useContextSelector(TeamContext, (v) => v);
+
+  const [selectedMembers, setSelectedMembers] = useState<string[]>(
+    currentOrg.members.map((item) => item.tmbId)
+  );
+
+  const [searchKey, setSearchKey] = useState('');
+  const filterMembers = useMemo(() => {
+    if (!searchKey) return allMembers;
+    const regx = new RegExp(searchKey, 'i');
+    return allMembers.filter((member) => regx.test(member.memberName));
+  }, [searchKey, allMembers]);
+
+  const { run: onUpdate, loading: isLoadingUpdate } = useRequest2(
+    () => {
+      return putUpdateOrgMembers({
+        orgId: currentOrg._id,
+        members: selectedMembers.map((tmbId) => ({
+          tmbId
+        }))
+      });
+    },
+    {
+      successToast: t('common:common.Update Success'),
+      onSuccess() {
+        refetchOrgs();
+        onClose();
+      }
+    }
+  );
+
+  const isSelected = (memberId: string) => {
+    return selectedMembers.find((tmbId) => tmbId === memberId);
+  };
+
+  const handleToggleSelect = (memberId: string) => {
+    if (isSelected(memberId)) {
+      setSelectedMembers((state) => state.filter((tmbId) => tmbId !== memberId));
+    } else {
+      setSelectedMembers((state) => [...state, memberId]);
+    }
+  };
+
+  const isLoading = isLoadingUpdate;
+
+  return (
+    <MyModal
+      isOpen
+      title={t('user:team.group.manage_member')}
+      iconSrc={currentOrg?.avatar}
+      minW="800px"
+      h={'100%'}
+      isCentered
+    >
+      <ModalBody flex={1}>
+        <Grid
+          border="1px solid"
+          borderColor="myGray.200"
+          borderRadius="0.5rem"
+          gridTemplateColumns="1fr 1fr"
+          h={'100%'}
+        >
+          <Flex flexDirection="column" p="4">
+            <SearchInput
+              placeholder={t('user:search_user')}
+              fontSize="sm"
+              bg={'myGray.50'}
+              onChange={(e) => {
+                setSearchKey(e.target.value);
+              }}
+            />
+            <Flex flexDirection="column" mt={3} flexGrow="1" overflow={'auto'} maxH={'400px'}>
+              <MemberScrollData>
+                {filterMembers.map((member) => {
+                  return (
+                    <HStack
+                      py="2"
+                      px={3}
+                      borderRadius={'md'}
+                      alignItems="center"
+                      key={member.tmbId}
+                      cursor={'pointer'}
+                      _hover={{
+                        bg: 'myGray.50',
+                        ...(!isSelected(member.tmbId) ? { svg: { color: 'myGray.50' } } : {})
+                      }}
+                      _notLast={{ mb: 2 }}
+                      onClick={() => handleToggleSelect(member.tmbId)}
+                    >
+                      <Checkbox
+                        isChecked={!!isSelected(member.tmbId)}
+                        icon={<CheckboxIcon name={'common/check'} />}
+                        pointerEvents="none"
+                      />
+                      <Avatar src={member.avatar} w="1.5rem" borderRadius={'50%'} />
+                      <Box>{member.memberName}</Box>
+                    </HStack>
+                  );
+                })}
+              </MemberScrollData>
+            </Flex>
+          </Flex>
+          <Flex borderLeft="1px" borderColor="myGray.200" flexDirection="column" p="4" h={'100%'}>
+            <Box mt={2}>{`${t('common:chosen')}:${selectedMembers.length}`}</Box>
+            <Flex mt={3} flexDirection="column" flexGrow="1" overflow={'auto'} maxH={'400px'}>
+              {selectedMembers.map((tmbId) => {
+                const member = allMembers.find((item) => item.tmbId === tmbId)!;
+                return (
+                  <HStack
+                    justifyContent="space-between"
+                    py="2"
+                    px={3}
+                    borderRadius={'md'}
+                    key={tmbId}
+                    _hover={{ bg: 'myGray.50' }}
+                    _notLast={{ mb: 2 }}
+                  >
+                    <HStack>
+                      <Avatar src={member?.avatar} w="1.5rem" borderRadius={'md'} />
+                      <Box>{member?.memberName}</Box>
+                    </HStack>
+                    <MyIcon
+                      name={'common/closeLight'}
+                      w={'1rem'}
+                      cursor={'pointer'}
+                      _hover={{ color: 'red.600' }}
+                      onClick={() => handleToggleSelect(tmbId)}
+                    />
+                  </HStack>
+                );
+              })}
+            </Flex>
+          </Flex>
+        </Grid>
+      </ModalBody>
+      <ModalFooter>
+        <Button variant={'whiteBase'} mr={3} onClick={onClose}>
+          {t('common:common.Close')}
+        </Button>
+        <Button isLoading={isLoading} onClick={onUpdate}>
+          {t('common:common.Save')}
+        </Button>
+      </ModalFooter>
+    </MyModal>
+  );
+}
+
+export default OrgMemberManageModal;

projects/app/src/pageComponents/account/team/OrgManage/OrgMoveModal.tsx

@@ -0,0 +1,74 @@
+import { putMoveOrg } from '@/web/support/user/team/org/api';
+import { Button, ModalBody, ModalFooter } from '@chakra-ui/react';
+import type { OrgType } from '@fastgpt/global/support/user/team/org/type';
+import MyModal from '@fastgpt/web/components/common/MyModal';
+import { useRequest2 } from '@fastgpt/web/hooks/useRequest';
+import { useTranslation } from 'next-i18next';
+import { useMemo, useState } from 'react';
+import OrgTree from './OrgTree';
+import dynamic from 'next/dynamic';
+import { useUserStore } from '@/web/support/user/useUserStore';
+
+function OrgMoveModal({
+  movingOrg,
+  orgs,
+  onClose,
+  onSuccess
+}: {
+  movingOrg: OrgType;
+  orgs: OrgType[];
+  onClose: () => void;
+  onSuccess: () => void;
+}) {
+  const { t } = useTranslation();
+  const [selectedOrg, setSelectedOrg] = useState<OrgType>();
+  const { userInfo } = useUserStore();
+  const team = userInfo?.team!;
+
+  const { runAsync: onMoveOrg, loading } = useRequest2(putMoveOrg, {
+    onSuccess: () => {
+      onClose();
+      onSuccess();
+    }
+  });
+
+  const filterMovingOrgs = useMemo(
+    () => orgs.filter((org) => org._id !== movingOrg._id),
+    [movingOrg._id, orgs]
+  );
+
+  return (
+    <MyModal
+      isOpen
+      onClose={onClose}
+      title={t('account_team:move_org')}
+      iconSrc="common/file/move"
+      iconColor="primary.600"
+    >
+      <ModalBody>
+        <OrgTree
+          orgs={filterMovingOrgs}
+          selectedOrg={selectedOrg}
+          setSelectedOrg={setSelectedOrg}
+        />
+      </ModalBody>
+      <ModalFooter>
+        <Button
+          isDisabled={!selectedOrg}
+          isLoading={loading}
+          onClick={() => {
+            if (!selectedOrg) return;
+            return onMoveOrg({
+              orgId: movingOrg._id,
+              targetOrgId: selectedOrg._id
+            });
+          }}
+        >
+          {t('common:common.Confirm')}
+        </Button>
+      </ModalFooter>
+    </MyModal>
+  );
+}
+
+export default OrgMoveModal;

projects/app/src/pageComponents/account/team/OrgManage/OrgTree.tsx

@@ -0,0 +1,103 @@
+import { Box, HStack, VStack } from '@chakra-ui/react';
+import type { OrgType } from '@fastgpt/global/support/user/team/org/type';
+import Avatar from '@fastgpt/web/components/common/Avatar';
+import { useToggle } from 'ahooks';
+import { useMemo } from 'react';
+import IconButton from './IconButton';
+import { getOrgChildrenPath } from '@fastgpt/global/support/user/team/org/constant';
+
+function OrgTreeNode({
+  org,
+  list,
+  selectedOrg,
+  setSelectedOrg,
+  index = 0
+}: {
+  org: OrgType;
+  list: OrgType[];
+  selectedOrg?: OrgType;
+  setSelectedOrg: (org?: OrgType) => void;
+  index?: number;
+}) {
+  const children = useMemo(
+    () => list.filter((item) => item.path === getOrgChildrenPath(org)),
+    [org, list]
+  );
+  const [isExpanded, toggleIsExpanded] = useToggle(index === 0);
+
+  return (
+    <Box userSelect={'none'}>
+      <HStack
+        borderRadius="sm"
+        _hover={{ bg: 'myGray.100' }}
+        py={1}
+        pr={2}
+        pl={index === 0 ? '0.5rem' : `${1.75 * (index - 1) + 0.5}rem`}
+        cursor={'pointer'}
+        {...(selectedOrg === org
+          ? {
+              bg: 'primary.50 !important',
+              onClick: () => setSelectedOrg(undefined)
+            }
+          : {
+              onClick: () => setSelectedOrg(org)
+            })}
+      >
+        {index > 0 && (
+          <IconButton
+            name={isExpanded ? 'common/downArrowFill' : 'common/rightArrowFill'}
+            color={'myGray.500'}
+            p={0}
+            w={'1.25rem'}
+            visibility={children.length > 0 ? 'visible' : 'hidden'}
+            onClick={(e) => {
+              e.stopPropagation();
+              toggleIsExpanded.toggle();
+            }}
+          />
+        )}
+        <HStack
+          flex={'1 0 0'}
+          onClick={() => setSelectedOrg(org)}
+          cursor={'pointer'}
+          borderRadius={'xs'}
+        >
+          <Avatar src={org.avatar} w={'1.25rem'} borderRadius={'xs'} />
+          <Box>{org.name}</Box>
+        </HStack>
+      </HStack>
+      {isExpanded &&
+        children.length > 0 &&
+        children.map((child) => (
+          <Box key={child._id} mt={0.5}>
+            <OrgTreeNode
+              org={child}
+              index={index + 1}
+              list={list}
+              selectedOrg={selectedOrg}
+              setSelectedOrg={setSelectedOrg}
+            />
+          </Box>
+        ))}
+    </Box>
+  );
+}
+
+function OrgTree({
+  orgs,
+  selectedOrg,
+  setSelectedOrg
+}: {
+  orgs: OrgType[];
+  selectedOrg?: OrgType;
+  setSelectedOrg: (org?: OrgType) => void;
+}) {
+  const root = orgs[0];
+  if (!root) return;
+
+  return (
+    <OrgTreeNode org={root} list={orgs} setSelectedOrg={setSelectedOrg} selectedOrg={selectedOrg} />
+  );
+}
+
+export default OrgTree;

projects/app/src/pageComponents/account/team/OrgManage/index.tsx

@@ -0,0 +1,369 @@
+import { useUserStore } from '@/web/support/user/useUserStore';
+import {
+  Box,
+  Divider,
+  Flex,
+  HStack,
+  Table,
+  TableContainer,
+  Tag,
+  Tbody,
+  Td,
+  Th,
+  Thead,
+  Tr,
+  VStack
+} from '@chakra-ui/react';
+import type { OrgType } from '@fastgpt/global/support/user/team/org/type';
+import Avatar from '@fastgpt/web/components/common/Avatar';
+import MyIcon from '@fastgpt/web/components/common/Icon';
+import type { IconNameType } from '@fastgpt/web/components/common/Icon/type';
+import MyMenu from '@fastgpt/web/components/common/MyMenu';
+import { useConfirm } from '@fastgpt/web/hooks/useConfirm';
+import { useRequest2 } from '@fastgpt/web/hooks/useRequest';
+import { useTranslation } from 'next-i18next';
+import { useMemo, useState } from 'react';
+import { useContextSelector } from 'use-context-selector';
+import MemberTag from '@/components/support/user/team/Info/MemberTag';
+import { TeamContext } from '../context';
+import { deleteOrg, deleteOrgMember, getOrgList } from '@/web/support/user/team/org/api';
+
+import IconButton from './IconButton';
+import { defaultOrgForm, type OrgFormType } from './OrgInfoModal';
+
+import dynamic from 'next/dynamic';
+import MyBox from '@fastgpt/web/components/common/MyBox';
+import Path from '@/components/common/folder/Path';
+import { ParentTreePathItemType } from '@fastgpt/global/common/parentFolder/type';
+import { getOrgChildrenPath } from '@fastgpt/global/support/user/team/org/constant';
+import { useSystemStore } from '@/web/common/system/useSystemStore';
+
+const OrgInfoModal = dynamic(() => import('./OrgInfoModal'));
+const OrgMemberManageModal = dynamic(() => import('./OrgMemberManageModal'));
+const OrgMoveModal = dynamic(() => import('./OrgMoveModal'));
+
+function ActionButton({
+  icon,
+  text,
+  onClick
+}: {
+  icon: IconNameType;
+  text: string;
+  onClick: () => void;
+}) {
+  return (
+    <HStack
+      gap={'8px'}
+      w="100%"
+      transition={'background 0.1s'}
+      cursor={'pointer'}
+      p="4px"
+      rounded={'sm'}
+      _hover={{
+        bg: 'myGray.05',
+        color: 'primary.600'
+      }}
+      onClick={onClick}
+    >
+      <MyIcon name={icon} w="1rem" h="1rem" />
+      <Box fontSize={'sm'}>{text}</Box>
+    </HStack>
+  );
+}
+
+function OrgTable({ Tabs }: { Tabs: React.ReactNode }) {
+  const { t } = useTranslation();
+  const { userInfo, isTeamAdmin } = useUserStore();
+
+  const { members, MemberScrollData } = useContextSelector(TeamContext, (v) => v);
+  const { feConfigs } = useSystemStore();
+
+  const isSyncMember = feConfigs.register_method?.includes('sync');
+  const [parentPath, setParentPath] = useState('');
+  const {
+    data: orgs = [],
+    loading: isLoadingOrgs,
+    refresh: refetchOrgs
+  } = useRequest2(getOrgList, {
+    manual: false,
+    refreshDeps: [userInfo?.team?.teamId]
+  });
+  const currentOrgs = useMemo(() => {
+    if (orgs.length === 0) return [];
+    // Auto select the first org(root org is team)
+    if (parentPath === '') {
+      setParentPath(getOrgChildrenPath(orgs[0]));
+      return [];
+    }
+
+    return orgs
+      .filter((org) => org.path === parentPath)
+      .map((item) => {
+        return {
+          ...item,
+          // Member + org
+          count:
+            item.members.length + orgs.filter((org) => org.path === getOrgChildrenPath(item)).length
+        };
+      });
+  }, [orgs, parentPath]);
+  const currentOrg = useMemo(() => {
+    const splitPath = parentPath.split('/');
+    const currentOrgId = splitPath[splitPath.length - 1];
+    if (!currentOrgId) return;
+
+    return orgs.find((org) => org.pathId === currentOrgId);
+  }, [orgs, parentPath]);
+
+  const paths = useMemo(() => {
+    const splitPath = parentPath.split('/').filter(Boolean);
+    return splitPath
+      .map((id) => {
+        const org = orgs.find((org) => org.pathId === id)!;
+
+        if (org.path === '') return;
+
+        return {
+          parentId: getOrgChildrenPath(org),
+          parentName: org.name
+        };
+      })
+      .filter(Boolean) as ParentTreePathItemType[];
+  }, [parentPath, orgs]);
+
+  const [editOrg, setEditOrg] = useState<OrgFormType>();
+  const [manageMemberOrg, setManageMemberOrg] = useState<OrgType>();
+  const [movingOrg, setMovingOrg] = useState<OrgType>();
+
+  // Delete org
+  const { ConfirmModal: ConfirmDeleteOrgModal, openConfirm: openDeleteOrgModal } = useConfirm({
+    type: 'delete',
+    content: t('account_team:confirm_delete_org')
+  });
+  const deleteOrgHandler = (orgId: string) => openDeleteOrgModal(() => deleteOrgReq(orgId))();
+  const { runAsync: deleteOrgReq } = useRequest2(deleteOrg, {
+    onSuccess: () => {
+      refetchOrgs();
+    }
+  });
+
+  // Delete member
+  const { ConfirmModal: ConfirmDeleteMember, openConfirm: openDeleteMemberModal } = useConfirm({
+    type: 'delete',
+    content: t('account_team:confirm_delete_member')
+  });
+  const { runAsync: deleteMemberReq } = useRequest2(deleteOrgMember, {
+    onSuccess: () => {
+      refetchOrgs();
+    }
+  });
+
+  return (
+    <>
+      <Flex justify={'space-between'} align={'center'} pb={'1rem'}>
+        {Tabs}
+      </Flex>
+      <MyBox
+        flex={'1 0 0'}
+        h={0}
+        display={'flex'}
+        flexDirection={'column'}
+        isLoading={isLoadingOrgs}
+      >
+        <Box mb={3}>
+          <Path paths={paths} rootName={userInfo?.team?.teamName} onClick={setParentPath} />
+        </Box>
+        <Flex flex={'1 0 0'} h={0} w={'100%'} gap={'4'}>
+          <MemberScrollData h={'100%'} fontSize={'sm'} flexGrow={1}>
+            {/* Table */}
+            <TableContainer>
+              <Table>
+                <Thead>
+                  <Tr bg={'white !important'}>
+                    <Th bg="myGray.100" borderLeftRadius="6px">
+                      {t('common:Name')}
+                    </Th>
+                    {!isSyncMember && (
+                      <Th bg="myGray.100" borderRightRadius="6px">
+                        {t('common:common.Action')}
+                      </Th>
+                    )}
+                  </Tr>
+                </Thead>
+                <Tbody>
+                  {currentOrgs.map((org) => (
+                    <Tr key={org._id} overflow={'unset'}>
+                      <Td>
+                        <HStack
+                          cursor={'pointer'}
+                          onClick={() => setParentPath(getOrgChildrenPath(org))}
+                        >
+                          <MemberTag name={org.name} avatar={org.avatar} />
+                          <Tag size="sm">{org.count}</Tag>
+                          <MyIcon
+                            name="core/chat/chevronRight"
+                            w={'1rem'}
+                            h={'1rem'}
+                            color={'myGray.500'}
+                          />
+                        </HStack>
+                      </Td>
+                      {isTeamAdmin && !isSyncMember && (
+                        <Td w={'6rem'}>
+                          <MyMenu
+                            trigger="hover"
+                            Button={<IconButton name="more" />}
+                            menuList={[
+                              {
+                                children: [
+                                  {
+                                    icon: 'edit',
+                                    label: t('account_team:edit_info'),
+                                    onClick: () => setEditOrg(org)
+                                  },
+                                  {
+                                    icon: 'common/file/move',
+                                    label: t('common:Move'),
+                                    onClick: () => setMovingOrg(org)
+                                  },
+                                  {
+                                    icon: 'delete',
+                                    label: t('account_team:delete'),
+                                    type: 'danger',
+                                    onClick: () => deleteOrgHandler(org._id)
+                                  }
+                                ]
+                              }
+                            ]}
+                          />
+                        </Td>
+                      )}
+                    </Tr>
+                  ))}
+                  {currentOrg?.members.map((member) => {
+                    const memberInfo = members.find((m) => m.tmbId === member.tmbId);
+                    if (!memberInfo) return null;
+
+                    return (
+                      <Tr key={member.tmbId}>
+                        <Td>
+                          <MemberTag name={memberInfo.memberName} avatar={memberInfo.avatar} />
+                        </Td>
+                        <Td w={'6rem'}>
+                          {isTeamAdmin && !isSyncMember && (
+                            <MyMenu
+                              trigger={'hover'}
+                              Button={<IconButton name="more" />}
+                              menuList={[
+                                {
+                                  children: [
+                                    {
+                                      icon: 'delete',
+                                      label: t('account_team:delete'),
+                                      type: 'danger',
+                                      onClick: () =>
+                                        openDeleteMemberModal(() =>
+                                          deleteMemberReq(currentOrg._id, member.tmbId)
+                                        )()
+                                    }
+                                  ]
+                                }
+                              ]}
+                            />
+                          )}
+                        </Td>
+                      </Tr>
+                    );
+                  })}
+                </Tbody>
+              </Table>
+            </TableContainer>
+          </MemberScrollData>
+
+          {/* Slider */}
+          {!isSyncMember && (
+            <VStack w={'180px'} alignItems={'start'}>
+              <HStack gap={'6px'}>
+                <Avatar src={currentOrg?.avatar} w={'1rem'} h={'1rem'} rounded={'xs'} />
+                <Box fontWeight={500} color={'myGray.900'}>
+                  {currentOrg?.name}
+                </Box>
+                {currentOrg?.path !== '' && (
+                  <IconButton name="edit" onClick={() => setEditOrg(currentOrg)} />
+                )}
+              </HStack>
+              <Box fontSize={'xs'}>{currentOrg?.description || t('common:common.no_intro')}</Box>
+
+              <Divider my={'20px'} />
+
+              <Box fontWeight={500} fontSize="sm" color="myGray.900">
+                {t('common:common.Action')}
+              </Box>
+              {currentOrg && isTeamAdmin && (
+                <VStack gap="13px" w="100%">
+                  <ActionButton
+                    icon="common/add2"
+                    text={t('account_team:create_sub_org')}
+                    onClick={() => {
+                      setEditOrg({
+                        ...defaultOrgForm,
+                        parentId: currentOrg?._id
+                      });
+                    }}
+                  />
+                  <ActionButton
+                    icon="common/administrator"
+                    text={t('account_team:manage_member')}
+                    onClick={() => setManageMemberOrg(currentOrg)}
+                  />
+                  {currentOrg?.path !== '' && (
+                    <>
+                      <ActionButton
+                        icon="common/file/move"
+                        text={t('account_team:move_org')}
+                        onClick={() => setMovingOrg(currentOrg)}
+                      />
+                      <ActionButton
+                        icon="delete"
+                        text={t('account_team:delete_org')}
+                        onClick={() => deleteOrgHandler(currentOrg._id)}
+                      />
+                    </>
+                  )}
+                </VStack>
+              )}
+            </VStack>
+          )}
+        </Flex>
+      </MyBox>
+
+      {!!editOrg && (
+        <OrgInfoModal
+          editOrg={editOrg}
+          onClose={() => setEditOrg(undefined)}
+          onSuccess={refetchOrgs}
+        />
+      )}
+      {!!movingOrg && (
+        <OrgMoveModal
+          orgs={orgs}
+          movingOrg={movingOrg}
+          onClose={() => setMovingOrg(undefined)}
+          onSuccess={refetchOrgs}
+        />
+      )}
+      {!!manageMemberOrg && (
+        <OrgMemberManageModal
+          currentOrg={manageMemberOrg}
+          refetchOrgs={refetchOrgs}
+          onClose={() => setManageMemberOrg(undefined)}
+        />
+      )}
+
+      <ConfirmDeleteOrgModal />
+      <ConfirmDeleteMember />
+    </>
+  );
+}
+
+export default OrgTable;

projects/app/src/pageComponents/account/team/PermissionManage/index.tsx

@@ -0,0 +1,430 @@
+import React, { useMemo } from 'react';
+import {
+  Box,
+  Checkbox,
+  HStack,
+  Table,
+  TableContainer,
+  Tbody,
+  Td,
+  Th,
+  Thead,
+  Text,
+  Tr,
+  Flex,
+  Button
+} from '@chakra-ui/react';
+import { useTranslation } from 'next-i18next';
+import { useRequest2 } from '@fastgpt/web/hooks/useRequest';
+import {
+  deleteMemberPermission,
+  getTeamClbs,
+  updateMemberPermission
+} from '@/web/support/user/team/api';
+import { useUserStore } from '@/web/support/user/useUserStore';
+import QuestionTip from '@fastgpt/web/components/common/MyTooltip/QuestionTip';
+import Avatar from '@fastgpt/web/components/common/Avatar';
+import MemberTag from '../../../../components/support/user/team/Info/MemberTag';
+import { DefaultGroupName } from '@fastgpt/global/support/user/team/group/constant';
+import {
+  TeamManagePermissionVal,
+  TeamPermissionList,
+  TeamWritePermissionVal
+} from '@fastgpt/global/support/permission/user/constant';
+import { TeamPermission } from '@fastgpt/global/support/permission/user/controller';
+import { useToggle } from 'ahooks';
+import MyIconButton from '@fastgpt/web/components/common/Icon/button';
+import MyBox from '@fastgpt/web/components/common/MyBox';
+import CollaboratorContextProvider, {
+  CollaboratorContext
+} from '@/components/support/permission/MemberManager/context';
+import MyIcon from '@fastgpt/web/components/common/Icon';
+import { useContextSelector } from 'use-context-selector';
+import { CollaboratorItemType } from '@fastgpt/global/support/permission/collaborator';
+
+function PermissionManage({
+  Tabs,
+  onOpenAddMember
+}: {
+  Tabs: React.ReactNode;
+  onOpenAddMember: () => void;
+}) {
+  const { t } = useTranslation();
+  const { userInfo } = useUserStore();
+
+  const collaboratorList = useContextSelector(
+    CollaboratorContext,
+    (state) => state.collaboratorList
+  );
+  const onUpdateCollaborators = useContextSelector(
+    CollaboratorContext,
+    (state) => state.onUpdateCollaborators
+  );
+  const onDelOneCollaborator = useContextSelector(
+    CollaboratorContext,
+    (state) => state.onDelOneCollaborator
+  );
+
+  const [isExpandMember, setExpandMember] = useToggle(true);
+  const [isExpandGroup, setExpandGroup] = useToggle(true);
+  const [isExpandOrg, setExpandOrg] = useToggle(true);
+
+  const { tmbList, groupList, orgList } = useMemo(() => {
+    const tmbList: CollaboratorItemType[] = [];
+    const groupList: CollaboratorItemType[] = [];
+    const orgList: CollaboratorItemType[] = [];
+
+    collaboratorList.forEach((item) => {
+      if (item.tmbId) {
+        tmbList.push(item);
+      } else if (item.groupId) {
+        groupList.push(item);
+      } else if (item.orgId) {
+        orgList.push(item);
+      }
+    });
+
+    return {
+      tmbList,
+      groupList,
+      orgList
+    };
+  }, [collaboratorList]);
+
+  const { runAsync: onUpdatePermission, loading: addLoading } = useRequest2(
+    async ({ id, type, per }: { id: string; type: 'add' | 'remove'; per: 'write' | 'manage' }) => {
+      const clb = collaboratorList.find(
+        (clb) => clb.tmbId === id || clb.groupId === id || clb.orgId === id
+      );
+
+      if (!clb) return;
+
+      const updatePer = per === 'write' ? TeamWritePermissionVal : TeamManagePermissionVal;
+      const permission = new TeamPermission({ per: clb.permission.value });
+      if (type === 'add') {
+        permission.addPer(updatePer);
+      } else {
+        permission.removePer(updatePer);
+      }
+
+      return onUpdateCollaborators({
+        ...(clb.tmbId && { members: [clb.tmbId] }),
+        ...(clb.groupId && { groups: [clb.groupId] }),
+        ...(clb.orgId && { orgs: [clb.orgId] }),
+        permission: permission.value
+      });
+    }
+  );
+
+  const { runAsync: onDeleteMemberPermission, loading: deleteLoading } =
+    useRequest2(onDelOneCollaborator);
+
+  const userManage = userInfo?.permission.hasManagePer;
+  const hasDeletePer = (per: TeamPermission) => {
+    if (userInfo?.permission.isOwner) return true;
+    if (userManage && !per.hasManagePer) return true;
+    return false;
+  };
+
+  return (
+    <>
+      <Flex justify={'space-between'} align={'center'} pb={'1rem'}>
+        {Tabs}
+        <Box ml="auto">
+          {/* <SearchInput
+            placeholder={t('user:search_group_org_user')}
+            w="200px"
+            value={searchKey}
+            onChange={(e) => setSearchKey(e.target.value)}
+          /> */}
+        </Box>
+        {userInfo?.team.permission.hasManagePer && (
+          <Button
+            variant={'primary'}
+            size="md"
+            borderRadius={'md'}
+            ml={3}
+            leftIcon={<MyIcon name="common/add2" w={'14px'} />}
+            onClick={onOpenAddMember}
+          >
+            {t('user:permission.Add')}
+          </Button>
+        )}
+      </Flex>
+      <MyBox isLoading={addLoading || deleteLoading}>
+        <TableContainer fontSize={'sm'}>
+          <Table>
+            <Thead>
+              <Tr bg={'white !important'}>
+                <Th bg="myGray.100" borderLeftRadius="md" maxW={'150px'}>
+                  {`${t('user:team.group.members')} / ${t('user:team.org.org')} / ${t('user:team.group.group')}`}
+                  <QuestionTip ml="1" label={t('user:team.group.permission_tip')} />
+                </Th>
+                <Th bg="myGray.100">
+                  <Box mx="auto" w="fit-content">
+                    {t('user:team.group.permission.write')}
+                  </Box>
+                </Th>
+                <Th bg="myGray.100">
+                  <Box mx="auto" w="fit-content">
+                    {t('user:team.group.permission.manage')}
+                    <QuestionTip ml="1" label={t('user:team.group.manage_tip')} />
+                  </Box>
+                </Th>
+                <Th bg="myGray.100" borderRightRadius="md">
+                  <Box mx="auto" w="fit-content">
+                    {t('common:common.Action')}
+                  </Box>
+                </Th>
+              </Tr>
+            </Thead>
+            <Tbody>
+              <>
+                <Tr userSelect={'none'}>
+                  <HStack pl={3} pt={3} pb={isExpandMember && !!tmbList.length ? 0 : 3}>
+                    <MyIconButton
+                      icon={isExpandMember ? 'common/downArrowFill' : 'common/rightArrowFill'}
+                      onClick={setExpandMember.toggle}
+                    />
+                    <Box color={'myGray.900'}>{t('user:team.group.members')}</Box>
+                  </HStack>
+                </Tr>
+                {isExpandMember &&
+                  tmbList.map((member) => (
+                    <Tr key={member.tmbId}>
+                      <Td pl={10}>
+                        <HStack>
+                          <Avatar src={member.avatar} w="1.5rem" borderRadius={'50%'} />
+                          <Box>{member.name}</Box>
+                        </HStack>
+                      </Td>
+                      <Td>
+                        <Box mx="auto" w="fit-content">
+                          <Checkbox
+                            isDisabled={member.permission.isOwner || !userManage}
+                            isChecked={member.permission.hasWritePer}
+                            onChange={(e) =>
+                              e.target.checked
+                                ? onUpdatePermission({
+                                    id: member.tmbId!,
+                                    type: 'add',
+                                    per: 'write'
+                                  })
+                                : onUpdatePermission({
+                                    id: member.tmbId!,
+                                    type: 'remove',
+                                    per: 'write'
+                                  })
+                            }
+                          />
+                        </Box>
+                      </Td>
+                      <Td>
+                        <Box mx="auto" w="fit-content">
+                          <Checkbox
+                            isDisabled={member.permission.isOwner || !userInfo?.permission.isOwner}
+                            isChecked={member.permission.hasManagePer}
+                            onChange={(e) =>
+                              e.target.checked
+                                ? onUpdatePermission({
+                                    id: member.tmbId!,
+                                    type: 'add',
+                                    per: 'manage'
+                                  })
+                                : onUpdatePermission({
+                                    id: member.tmbId!,
+                                    type: 'remove',
+                                    per: 'manage'
+                                  })
+                            }
+                          />
+                        </Box>
+                      </Td>
+                      <Td>
+                        {hasDeletePer(member.permission) &&
+                          userInfo?.team.tmbId !== member.tmbId && (
+                            <Box mx="auto" w="fit-content">
+                              <MyIconButton
+                                icon="common/trash"
+                                onClick={() =>
+                                  onDeleteMemberPermission({ tmbId: String(member.tmbId) })
+                                }
+                              />
+                            </Box>
+                          )}
+                      </Td>
+                    </Tr>
+                  ))}
+              </>
+
+              <>
+                <Tr borderBottom={'1px solid'} borderColor={'myGray.200'} />
+                <Tr userSelect={'none'}>
+                  <HStack pl={3} pt={3} pb={isExpandOrg && !!orgList.length ? 0 : 3}>
+                    <MyIconButton
+                      icon={isExpandOrg ? 'common/downArrowFill' : 'common/rightArrowFill'}
+                      onClick={setExpandOrg.toggle}
+                    />
+                    <Text>{t('user:team.org.org')}</Text>
+                  </HStack>
+                </Tr>
+                {isExpandOrg &&
+                  orgList.map((org) => (
+                    <Tr key={org.orgId}>
+                      <Td pl={10}>
+                        <MemberTag name={org.name} avatar={org.avatar} />
+                      </Td>
+                      <Td>
+                        <Box mx="auto" w="fit-content">
+                          <Checkbox
+                            isDisabled={!userManage}
+                            isChecked={org.permission.hasWritePer}
+                            onChange={(e) =>
+                              e.target.checked
+                                ? onUpdatePermission({ id: org.orgId!, type: 'add', per: 'write' })
+                                : onUpdatePermission({
+                                    id: org.orgId!,
+                                    type: 'remove',
+                                    per: 'write'
+                                  })
+                            }
+                          />
+                        </Box>
+                      </Td>
+                      <Td>
+                        <Box mx="auto" w="fit-content">
+                          <Checkbox
+                            isDisabled={!userInfo?.permission.isOwner}
+                            isChecked={org.permission.hasManagePer}
+                            onChange={(e) =>
+                              e.target.checked
+                                ? onUpdatePermission({ id: org.orgId!, type: 'add', per: 'manage' })
+                                : onUpdatePermission({
+                                    id: org.orgId!,
+                                    type: 'remove',
+                                    per: 'manage'
+                                  })
+                            }
+                          />
+                        </Box>
+                      </Td>
+                      <Td>
+                        {hasDeletePer(org.permission) && (
+                          <Box mx="auto" w="fit-content">
+                            <MyIconButton
+                              icon="common/trash"
+                              onClick={() => onDeleteMemberPermission({ orgId: org.orgId! })}
+                            />
+                          </Box>
+                        )}
+                      </Td>
+                    </Tr>
+                  ))}
+              </>
+
+              <>
+                <Tr borderBottom={'1px solid'} borderColor={'myGray.200'} />
+                <Tr userSelect={'none'}>
+                  <HStack pl={3} pt={3} pb={isExpandGroup && !!groupList.length ? 0 : 3}>
+                    <MyIconButton
+                      icon={isExpandGroup ? 'common/downArrowFill' : 'common/rightArrowFill'}
+                      onClick={setExpandGroup.toggle}
+                    />
+                    <Text>{t('user:team.group.group')}</Text>
+                  </HStack>
+                </Tr>
+                {isExpandGroup &&
+                  groupList.map((group) => (
+                    <Tr key={group.groupId}>
+                      <Td pl={10}>
+                        <MemberTag
+                          name={
+                            group.name === DefaultGroupName
+                              ? userInfo?.team.teamName ?? ''
+                              : group.name
+                          }
+                          avatar={group.avatar}
+                        />
+                      </Td>
+                      <Td>
+                        <Box mx="auto" w="fit-content">
+                          <Checkbox
+                            isDisabled={!userManage}
+                            isChecked={group.permission.hasWritePer}
+                            onChange={(e) =>
+                              e.target.checked
+                                ? onUpdatePermission({
+                                    id: group.groupId!,
+                                    type: 'add',
+                                    per: 'write'
+                                  })
+                                : onUpdatePermission({
+                                    id: group.groupId!,
+                                    type: 'remove',
+                                    per: 'write'
+                                  })
+                            }
+                          />
+                        </Box>
+                      </Td>
+                      <Td>
+                        <Box mx="auto" w="fit-content">
+                          <Checkbox
+                            isDisabled={!userInfo?.permission.isOwner}
+                            isChecked={group.permission.hasManagePer}
+                            onChange={(e) =>
+                              e.target.checked
+                                ? onUpdatePermission({
+                                    id: group.groupId!,
+                                    type: 'add',
+                                    per: 'manage'
+                                  })
+                                : onUpdatePermission({
+                                    id: group.groupId!,
+                                    type: 'remove',
+                                    per: 'manage'
+                                  })
+                            }
+                          />
+                        </Box>
+                      </Td>
+                      <Td>
+                        {hasDeletePer(group.permission) && (
+                          <Box mx="auto" w="fit-content">
+                            <MyIconButton
+                              icon="common/trash"
+                              onClick={() => onDeleteMemberPermission({ groupId: group.groupId! })}
+                            />
+                          </Box>
+                        )}
+                      </Td>
+                    </Tr>
+                  ))}
+              </>
+            </Tbody>
+          </Table>
+        </TableContainer>
+      </MyBox>
+    </>
+  );
+}
+
+export const Render = ({ Tabs }: { Tabs: React.ReactNode }) => {
+  const { userInfo } = useUserStore();
+
+  return userInfo?.team ? (
+    <CollaboratorContextProvider
+      permission={userInfo?.team.permission}
+      permissionList={TeamPermissionList}
+      onGetCollaboratorList={getTeamClbs}
+      onUpdateCollaborators={updateMemberPermission}
+      onDelOneCollaborator={deleteMemberPermission}
+      refreshDeps={[userInfo?.team.teamId]}
+      addPermissionOnly={true}
+    >
+      {({ onOpenAddMember }) => <PermissionManage Tabs={Tabs} onOpenAddMember={onOpenAddMember} />}
+    </CollaboratorContextProvider>
+  ) : null;
+};
+
+export default Render;

projects/app/src/pageComponents/account/team/SelectMember.tsx

@@ -0,0 +1,266 @@
+import React, { useMemo, useState } from 'react';
+import { Box, Checkbox, Flex, Grid, HStack } from '@chakra-ui/react';
+import MyIcon from '@fastgpt/web/components/common/Icon';
+import Avatar from '@fastgpt/web/components/common/Avatar';
+import { useTranslation } from 'next-i18next';
+import { Control, Controller } from 'react-hook-form';
+import { RequireAtLeastOne } from '@fastgpt/global/common/type/utils';
+import { useUserStore } from '@/web/support/user/useUserStore';
+import { DefaultGroupName } from '@fastgpt/global/support/user/team/group/constant';
+import SearchInput from '@fastgpt/web/components/common/Input/SearchInput';
+
+type memberType = {
+  type: 'member';
+  tmbId: string;
+  memberName: string;
+  avatar: string;
+};
+
+type groupType = {
+  type: 'group';
+  _id: string;
+  name: string;
+  avatar: string;
+};
+
+type selectedType = {
+  member: string[];
+  group: string[];
+};
+
+function SelectMember({
+  allMembers,
+  selected = { member: [], group: [] },
+  setSelected
+  // mode = 'both'
+}: {
+  allMembers: {
+    member: memberType[];
+    group: groupType[];
+  };
+  selected?: selectedType;
+  setSelected: React.Dispatch<React.SetStateAction<selectedType>>;
+  mode?: 'member' | 'group' | 'both';
+}) {
+  const [searchKey, setSearchKey] = useState('');
+  const { t } = useTranslation();
+  const { userInfo } = useUserStore();
+
+  const filtered = useMemo(() => {
+    return [
+      ...allMembers.member.filter((member) => {
+        if (member.memberName.toLowerCase().includes(searchKey.toLowerCase())) return true;
+        return false;
+      }),
+      ...allMembers.group.filter((member) => {
+        if (member.name.toLowerCase().includes(searchKey.toLowerCase())) return true;
+        return false;
+      })
+    ];
+  }, [searchKey, allMembers]);
+
+  const selectedFlated = useMemo(() => {
+    return [
+      ...allMembers.member.filter((member) => {
+        return selected.member?.includes(member.tmbId);
+      }),
+      ...allMembers.group.filter((member) => {
+        return selected.group?.includes(member._id);
+      })
+    ];
+  }, [selected, allMembers]);
+
+  const handleToggleSelect = (member: memberType | groupType) => {
+    if (member.type == 'member') {
+      if (selected.member?.indexOf(member.tmbId) == -1) {
+        setSelected({
+          member: [...selected.member, member.tmbId],
+          group: [...selected.group]
+        });
+      } else {
+        setSelected({
+          member: [...selected.member.filter((item) => item != member.tmbId)],
+          group: [...selected.group]
+        });
+      }
+    } else {
+      if (selected.group?.indexOf(member._id) == -1) {
+        setSelected({ member: [...selected.member], group: [...selected.group, member._id] });
+      } else {
+        setSelected({
+          member: [...selected.member],
+          group: [...selected.group.filter((item) => item != member._id)]
+        });
+      }
+    }
+  };
+
+  const isSelected = (member: memberType | groupType) => {
+    if (member.type == 'member') {
+      return selected.member?.includes(member.tmbId);
+    } else {
+      return selected.group?.includes(member._id);
+    }
+  };
+
+  return (
+    <Grid
+      templateColumns="1fr 1fr"
+      borderRadius="8px"
+      border="1px solid"
+      borderColor="myGray.200"
+      h={'100%'}
+    >
+      <Flex flexDirection="column" p="4" h={'100%'} overflow={'auto'}>
+        <SearchInput
+          placeholder={t('user:search_user')}
+          fontSize="sm"
+          bg={'myGray.50'}
+          onChange={(e) => {
+            setSearchKey(e.target.value);
+          }}
+        />
+        <Flex flexDirection="column" mt={3}>
+          {filtered.map((member) => {
+            return (
+              <HStack
+                py="2"
+                px={3}
+                borderRadius={'md'}
+                alignItems="center"
+                key={member.type == 'member' ? member.tmbId : member._id}
+                cursor={'pointer'}
+                _hover={{
+                  bg: 'myGray.50',
+                  ...(!isSelected(member) ? { svg: { color: 'myGray.50' } } : {})
+                }}
+                _notLast={{ mb: 2 }}
+                onClick={() => handleToggleSelect(member)}
+              >
+                <Checkbox
+                  isChecked={!!isSelected(member)}
+                  icon={<MyIcon name={'common/check'} w={'12px'} />}
+                />
+                <Avatar src={member.avatar} w="1.5rem" borderRadius={'50%'} />
+                <Box>
+                  {member.type == 'member'
+                    ? member.memberName
+                    : member.name === DefaultGroupName
+                      ? userInfo?.team.teamName
+                      : member.name}
+                </Box>
+              </HStack>
+            );
+          })}
+        </Flex>
+      </Flex>
+      <Flex
+        borderLeft="1px"
+        borderColor="myGray.200"
+        flexDirection="column"
+        p="4"
+        h={'100%'}
+        overflow={'auto'}
+      >
+        <Box mt={3}>
+          {t('common:chosen') + ': ' + Number(selected.member.length + selected.group.length)}{' '}
+        </Box>
+        <Box mt={5}>
+          {selectedFlated.map((member) => {
+            return (
+              <HStack
+                justifyContent="space-between"
+                py="2"
+                px={3}
+                borderRadius={'md'}
+                key={member.type == 'member' ? member.tmbId : member._id}
+                _hover={{ bg: 'myGray.50' }}
+                _notLast={{ mb: 2 }}
+              >
+                <Avatar src={member.avatar} w="1.5rem" borderRadius={'md'} />
+                <Box w="full">
+                  {member.type == 'member'
+                    ? member.memberName
+                    : member.name === DefaultGroupName
+                      ? userInfo?.team.teamName
+                      : member.name}
+                </Box>
+                <MyIcon
+                  name={'common/closeLight'}
+                  w={'1rem'}
+                  cursor={'pointer'}
+                  _hover={{ color: 'red.600' }}
+                  onClick={() => handleToggleSelect(member)}
+                />
+              </HStack>
+            );
+          })}
+        </Box>
+      </Flex>
+    </Grid>
+  );
+}
+
+// This function is for using with react-hook-form
+function ControllerWrapper({
+  control,
+  allMembers,
+  mode = 'both',
+  name = 'members'
+}: {
+  control: Control;
+  allMembers: RequireAtLeastOne<{ member?: memberType[]; group?: groupType[] }>;
+  mode?: 'member' | 'group' | 'both';
+  name?: string;
+}) {
+  return (
+    <Controller
+      control={control}
+      name={name}
+      render={({ field: { value: selected, onChange } }) => (
+        <SelectMember
+          mode={mode}
+          allMembers={
+            (() => {
+              switch (mode) {
+                case 'member':
+                  return { member: allMembers.member, group: [] };
+                case 'group':
+                  return { member: [], group: allMembers.group };
+                case 'both':
+                  return { member: allMembers.member, group: allMembers.group };
+              }
+            })() as Required<typeof allMembers>
+          }
+          selected={(() => {
+            switch (mode) {
+              case 'member':
+                return { member: selected, group: [] };
+              case 'group':
+                return { member: [], group: selected };
+              case 'both':
+                return { member: selected.member, group: selected.group };
+            }
+          })()}
+          setSelected={
+            (({ member, group }: selectedType, _prevState: selectedType) => {
+              switch (mode) {
+                case 'member':
+                  onChange(member);
+                  return;
+                case 'group':
+                  onChange(group);
+                  return;
+                case 'both':
+                  onChange({ member, group });
+                  return;
+              }
+            }) as any // hack: we do not need to handle prevState
+          }
+        />
+      )}
+    />
+  );
+}
+export const UnControlledSelectMember = SelectMember;
+export default ControllerWrapper;

projects/app/src/pageComponents/account/team/context.tsx

@@ -0,0 +1,138 @@
+import React, { ReactNode, useState } from 'react';
+import { createContext } from 'use-context-selector';
+import type { EditTeamFormDataType } from './EditInfoModal';
+import dynamic from 'next/dynamic';
+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 { useRequest2 } from '@fastgpt/web/hooks/useRequest';
+import { useTranslation } from 'next-i18next';
+import { getGroupList } from '@/web/support/user/team/group/api';
+import { MemberGroupListType } from '@fastgpt/global/support/permission/memberGroup/type';
+import { useScrollPagination } from '@fastgpt/web/hooks/useScrollPagination';
+
+const EditInfoModal = dynamic(() => import('./EditInfoModal'));
+
+type TeamModalContextType = {
+  myTeams: TeamTmbItemType[];
+  members: TeamMemberItemType[];
+  groups: MemberGroupListType;
+  isLoading: boolean;
+  onSwitchTeam: (teamId: string) => void;
+  setEditTeamData: React.Dispatch<React.SetStateAction<EditTeamFormDataType | undefined>>;
+
+  refetchMembers: () => void;
+  refetchTeams: () => void;
+  refetchGroups: () => void;
+  teamSize: number;
+  MemberScrollData: ReturnType<typeof useScrollPagination>['ScrollData'];
+};
+
+export const TeamContext = createContext<TeamModalContextType>({
+  myTeams: [],
+  groups: [],
+  members: [],
+  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.');
+  },
+  refetchTeams: function (): void {
+    throw new Error('Function not implemented.');
+  },
+  refetchMembers: function (): void {
+    throw new Error('Function not implemented.');
+  },
+  refetchGroups: function (): void {
+    throw new Error('Function not implemented.');
+  },
+
+  teamSize: 0,
+  MemberScrollData: () => <></>
+});
+
+export const TeamModalContextProvider = ({ children }: { children: ReactNode }) => {
+  const { t } = useTranslation();
+  const [editTeamData, setEditTeamData] = useState<EditTeamFormDataType>();
+  const { userInfo, initUserInfo } = useUserStore();
+
+  const {
+    data: myTeams = [],
+    loading: isLoadingTeams,
+    refresh: refetchTeams
+  } = useRequest2(() => getTeamList(TeamMemberStatusEnum.active), {
+    manual: false,
+    refreshDeps: [userInfo?._id]
+  });
+
+  // member action
+  const {
+    data: members = [],
+    isLoading: loadingMembers,
+    refreshList: refetchMembers,
+    total: memberTotal,
+    ScrollData: MemberScrollData
+  } = useScrollPagination(getTeamMembers, {});
+
+  const { runAsync: onSwitchTeam, loading: isSwitchingTeam } = useRequest2(
+    async (teamId: string) => {
+      await putSwitchTeam(teamId);
+      return initUserInfo();
+    },
+    {
+      errorToast: t('common:user.team.Switch Team Failed')
+    }
+  );
+
+  const {
+    data: groups = [],
+    loading: isLoadingGroups,
+    refresh: refetchGroups
+  } = useRequest2(getGroupList, {
+    manual: false,
+    refreshDeps: [userInfo?.team?.teamId]
+  });
+
+  const isLoading = isLoadingTeams || isSwitchingTeam || loadingMembers || isLoadingGroups;
+
+  const contextValue = {
+    myTeams,
+    refetchTeams,
+    isLoading,
+    onSwitchTeam,
+
+    // create | update team
+    setEditTeamData,
+    members,
+    refetchMembers,
+    groups,
+    refetchGroups,
+    teamSize: memberTotal,
+    MemberScrollData
+  };
+
+  return (
+    <TeamContext.Provider value={contextValue}>
+      {userInfo?.team?.permission && (
+        <>
+          {children}
+          {!!editTeamData && (
+            <EditInfoModal
+              defaultData={editTeamData}
+              onClose={() => setEditTeamData(undefined)}
+              onSuccess={() => {
+                refetchTeams();
+                initUserInfo();
+              }}
+            />
+          )}
+        </>
+      )}
+    </TeamContext.Provider>
+  );
+};
+
+export default TeamModalContextProvider;