chore: team, orgs, search and so on (#3807)

* feat: clb search support username, memberName, contacts

* feat: popup org names

* feat: update team member table

* feat: restore the member

* feat: search user in team member table

* feat: bind contact

* feat: export members

* feat: org tab could delete member

* feat: org table search

* feat: team notification account bind

* feat: permission tab search

* fix: wecom sso

* chore(init): copy notificationAccount to user.contact

* chore: adjust

* fix: ts error

* fix: useConfirm iconColor customization

* pref: fe

* fix: style

* fix: fix team member manage

* pref: enlarge team member pagesize

* pref: initv4822

* fix: pageSize

* pref: initscritpt

projects/app/src/components/support/permission/MemberManager/MemberItemCard.tsx

@@ -0,0 +1,67 @@
+import React from 'react';
+import { Box, Checkbox, HStack, VStack } from '@chakra-ui/react';
+import Avatar from '@fastgpt/web/components/common/Avatar';
+import PermissionTags from './PermissionTags';
+import { PermissionValueType } from '@fastgpt/global/support/permission/type';
+import MyIcon from '@fastgpt/web/components/common/Icon';
+import OrgTags from '../../user/team/OrgTags';
+
+function MemberItemCard({
+  avatar,
+  key,
+  onChange,
+  isChecked,
+  onDelete,
+  name,
+  permission,
+  orgs
+}: {
+  avatar: string;
+  key: string;
+  onChange: () => void;
+  isChecked?: boolean;
+  onDelete?: () => void;
+  name: string;
+  permission?: PermissionValueType;
+  orgs?: string[];
+}) {
+  return (
+    <>
+      <HStack
+        justifyContent="space-between"
+        alignItems="center"
+        key={key}
+        px="3"
+        py="2"
+        borderRadius="sm"
+        _hover={{
+          bgColor: 'myGray.50',
+          cursor: 'pointer'
+        }}
+        onClick={onChange}
+      >
+        {isChecked !== undefined && <Checkbox isChecked={isChecked} pointerEvents="none" />}
+        <Avatar src={avatar} w="1.5rem" borderRadius={'50%'} />
+
+        <VStack w="full" gap={0}>
+          <Box w="full">{name}</Box>
+          <Box w="full">{orgs && orgs.length > 0 && <OrgTags orgs={orgs} />}</Box>
+        </VStack>
+        {permission && <PermissionTags permission={permission} />}
+        {onDelete !== undefined && (
+          <MyIcon
+            name="common/closeLight"
+            w="1rem"
+            cursor={'pointer'}
+            _hover={{
+              color: 'red.600'
+            }}
+            onClick={onDelete}
+          />
+        )}
+      </HStack>
+    </>
+  );
+}
+
+export default MemberItemCard;

projects/app/src/components/support/permission/MemberManager/MemberModal.tsx

@@ -37,6 +37,8 @@ import { getTeamMembers } from '@/web/support/user/team/api';
 import { getGroupList } from '@/web/support/user/team/group/api';
 import { getOrgList } from '@/web/support/user/team/org/api';
 import { useScrollPagination } from '@fastgpt/web/hooks/useScrollPagination';
+import MemberItemCard from './MemberItemCard';
+import { GetSearchUserGroupOrg } from '@/web/support/user/api';
 
 const HoverBoxStyle = {
   bgColor: 'myGray.50',
@@ -72,6 +74,12 @@ function MemberModal({
 
   const [parentPath, setParentPath] = useState('');
 
+  const { data: searchedData } = useRequest2(() => GetSearchUserGroupOrg(searchText), {
+    manual: false,
+    throttleWait: 500,
+    refreshDeps: [searchText]
+  });
+
   const paths = useMemo(() => {
     const splitPath = parentPath.split('/').filter(Boolean);
     return splitPath
@@ -97,7 +105,10 @@ function MemberModal({
     return orgs.find((org) => org.pathId === currentOrgId);
   }, [orgs, parentPath]);
   const filterOrgs: (OrgType & { count?: number })[] = useMemo(() => {
-    if (searchText) return orgs.filter((item) => item.name.includes(searchText));
+    if (searchText && searchedData) {
+      const orgids = searchedData.orgs.map((item) => item._id);
+      return orgs.filter((org) => orgids.includes(String(org._id)));
+    }
     if (!searchText && filterClass !== 'org') return [];
     if (parentPath === '') {
       setParentPath(`/${orgs[0].pathId}`);
@@ -110,27 +121,34 @@ function MemberModal({
         count:
           item.members.length + orgs.filter((org) => org.path === getOrgChildrenPath(item)).length
       }));
-  }, [orgs, searchText, filterClass, parentPath]);
+  }, [searchText, filterClass, parentPath, orgs, searchedData]);
 
   const [selectedMemberIdList, setSelectedMembers] = useState<string[]>([]);
   const filterMembers = useMemo(() => {
-    if (searchText) return members.filter((item) => item.memberName.includes(searchText));
+    if (searchText) {
+      return searchedData?.members;
+    }
     if (!searchText && filterClass !== 'member' && filterClass !== 'org') return [];
-
     if (currentOrg && filterClass === 'org') {
       return members.filter((item) => currentOrg.members.find((v) => v.tmbId === item.tmbId));
     }
 
     return members;
-  }, [members, searchText, filterClass, currentOrg]);
+  }, [members, searchedData, searchText, filterClass, currentOrg]);
 
   const [selectedGroupIdList, setSelectedGroupIdList] = useState<string[]>([]);
   const filterGroups = useMemo(() => {
-    if (searchText) return groups.filter((item) => item.name.includes(searchText));
+    if (searchText) {
+      return searchedData?.groups.map((item) => ({
+        groupName: item.name,
+        _id: item.id,
+        ...item
+      }));
+    }
     if (!searchText && filterClass !== 'group') return [];
 
     return groups;
-  }, [groups, searchText, filterClass]);
+  }, [searchText, filterClass, groups, searchedData]);
 
   const permissionList = useContextSelector(CollaboratorContext, (v) => v.permissionList);
   const getPerLabelList = useContextSelector(CollaboratorContext, (v) => v.getPerLabelList);
@@ -146,6 +164,7 @@ function MemberModal({
     CollaboratorContext,
     (v) => v.onUpdateCollaborators
   );
+
   const { runAsync: onConfirm, loading: isUpdating } = useRequest2(
     () =>
       onUpdateCollaborators({
@@ -210,6 +229,7 @@ function MemberModal({
       iconSrc={addOnly ? 'keyPrimary' : 'modal/AddClb'}
       title={addOnly ? t('user:team.add_permission') : t('user:team.add_collaborator')}
       minW="800px"
+      maxW={'60vw'}
       h={'100%'}
       maxH={'90vh'}
       isCentered
@@ -300,136 +320,122 @@ function MemberModal({
                 </Box>
               )}
 
-              {filterClass && (
-                <ScrollData
-                  flexDirection={'column'}
-                  gap={1}
-                  userSelect={'none'}
-                  height={'fit-content'}
-                >
-                  {filterOrgs.map((org) => {
-                    const onChange = () => {
-                      setSelectedOrgIdList((state) => {
-                        if (state.includes(org._id)) {
-                          return state.filter((v) => v !== org._id);
-                        }
-                        return [...state, org._id];
-                      });
-                    };
-                    const collaborator = collaboratorList?.find((v) => v.orgId === org._id);
-                    return (
-                      <HStack
-                        justifyContent="space-between"
-                        key={org._id}
-                        py="2"
-                        px="3"
-                        borderRadius="sm"
-                        alignItems="center"
-                        _hover={HoverBoxStyle}
-                        onClick={onChange}
-                      >
-                        <Checkbox
-                          isChecked={selectedOrgIdList.includes(org._id)}
-                          pointerEvents="none"
-                        />
-                        <MyAvatar src={org.avatar} w="1.5rem" borderRadius={'50%'} />
-                        <HStack ml="2" w="full" gap="5px">
-                          <Text>{org.name}</Text>
-                          {org.count && (
-                            <>
-                              <Tag size="sm" my="auto">
-                                {org.count}
-                              </Tag>
-                            </>
-                          )}
-                        </HStack>
-                        <PermissionTags permission={collaborator?.permission.value} />
+              <ScrollData
+                flexDirection={'column'}
+                gap={1}
+                userSelect={'none'}
+                height={'fit-content'}
+              >
+                {filterOrgs?.map((org) => {
+                  const onChange = () => {
+                    setSelectedOrgIdList((state) => {
+                      if (state.includes(org._id)) {
+                        return state.filter((v) => v !== org._id);
+                      }
+                      return [...state, org._id];
+                    });
+                  };
+                  const collaborator = collaboratorList?.find((v) => v.orgId === org._id);
+                  return (
+                    <HStack
+                      justifyContent="space-between"
+                      key={org._id}
+                      py="2"
+                      px="3"
+                      borderRadius="sm"
+                      alignItems="center"
+                      _hover={HoverBoxStyle}
+                      onClick={onChange}
+                    >
+                      <Checkbox
+                        isChecked={selectedOrgIdList.includes(org._id)}
+                        pointerEvents="none"
+                      />
+                      <MyAvatar src={org.avatar} w="1.5rem" borderRadius={'50%'} />
+                      <HStack ml="2" w="full" gap="5px">
+                        <Text>{org.name}</Text>
                         {org.count && (
-                          <MyIcon
-                            name="core/chat/chevronRight"
-                            w="16px"
-                            p="4px"
-                            rounded={'6px'}
-                            _hover={{
-                              bgColor: 'myGray.200'
-                            }}
-                            onClick={(e) => {
-                              setParentPath(getOrgChildrenPath(org));
-                              e.stopPropagation();
-                            }}
-                          />
+                          <>
+                            <Tag size="sm" my="auto">
+                              {org.count}
+                            </Tag>
+                          </>
                         )}
                       </HStack>
-                    );
-                  })}
-                  {filterMembers.map((member) => {
-                    const onChange = () => {
-                      setSelectedMembers((state) => {
-                        if (state.includes(member.tmbId)) {
-                          return state.filter((v) => v !== member.tmbId);
-                        }
-                        return [...state, member.tmbId];
-                      });
-                    };
-                    const collaborator = collaboratorList?.find((v) => v.tmbId === member.tmbId);
-                    return (
-                      <HStack
-                        justifyContent="space-between"
-                        key={member.tmbId}
-                        py="2"
-                        px="3"
-                        borderRadius="sm"
-                        alignItems="center"
-                        _hover={HoverBoxStyle}
-                        onClick={onChange}
-                      >
-                        <Checkbox
-                          isChecked={selectedMemberIdList.includes(member.tmbId)}
-                          pointerEvents="none"
+                      <PermissionTags permission={collaborator?.permission.value} />
+                      {org.count && (
+                        <MyIcon
+                          name="core/chat/chevronRight"
+                          w="16px"
+                          p="4px"
+                          rounded={'6px'}
+                          _hover={{
+                            bgColor: 'myGray.200'
+                          }}
+                          onClick={(e) => {
+                            setParentPath(getOrgChildrenPath(org));
+                            e.stopPropagation();
+                          }}
                         />
-                        <MyAvatar src={member.avatar} w="1.5rem" borderRadius={'50%'} />
-                        <Box w="full" ml="2">
-                          {member.memberName}
-                        </Box>
-                        <PermissionTags permission={collaborator?.permission.value} />
-                      </HStack>
-                    );
-                  })}
-                  {filterGroups.map((group) => {
-                    const onChange = () => {
-                      setSelectedGroupIdList((state) => {
-                        if (state.includes(group._id)) {
-                          return state.filter((v) => v !== group._id);
-                        }
-                        return [...state, group._id];
-                      });
-                    };
-                    const collaborator = collaboratorList?.find((v) => v.groupId === group._id);
-                    return (
-                      <HStack
-                        justifyContent="space-between"
-                        key={group._id}
-                        py="2"
-                        px="3"
-                        borderRadius="sm"
-                        alignItems="center"
-                        _hover={HoverBoxStyle}
-                        onClick={onChange}
-                      >
-                        <Checkbox
-                          isChecked={selectedGroupIdList.includes(group._id)}
-                          pointerEvents="none"
-                        />
-                        <MyAvatar src={group.avatar} w="1.5rem" borderRadius={'50%'} />
-                        <Box ml="2" w="full">
-                          {group.name === DefaultGroupName ? userInfo?.team.teamName : group.name}
-                        </Box>
-                        <PermissionTags permission={collaborator?.permission.value} />
-                      </HStack>
-                    );
-                  })}
-                </ScrollData>
-              )}
+                      )}
+                    </HStack>
+                  );
+                })}
+                {filterMembers?.map((member) => {
+                  const onChange = () => {
+                    setSelectedMembers((state) => {
+                      if (state.includes(member.tmbId)) {
+                        return state.filter((v) => v !== member.tmbId);
+                      }
+                      return [...state, member.tmbId];
+                    });
+                  };
+                  const collaborator = collaboratorList?.find((v) => v.tmbId === member.tmbId);
+                  const memberOrgs = orgs.filter((org) =>
+                    org.members.find((v) => String(v.tmbId) === String(member.tmbId))
+                  );
+                  const memberPathIds = memberOrgs.map((org) =>
+                    (org.path + '/' + org.pathId).split('/').slice(0)
+                  );
+                  const memberOrgNames = memberPathIds.map((pathIds) =>
+                    pathIds.map((id) => orgs.find((v) => v.pathId === id)?.name).join('/')
+                  );
+                  return (
+                    <MemberItemCard
+                      avatar={member.avatar}
+                      key={member.tmbId}
+                      name={member.memberName}
+                      permission={collaborator?.permission.value}
+                      onChange={onChange}
+                      isChecked={selectedMemberIdList.includes(member.tmbId)}
+                      orgs={memberOrgNames}
+                    />
+                  );
+                })}
+                {filterGroups?.map((group) => {
+                  const onChange = () => {
+                    setSelectedGroupIdList((state) => {
+                      if (state.includes(group._id)) {
+                        return state.filter((v) => v !== group._id);
+                      }
+                      return [...state, group._id];
+                    });
+                  };
+                  const collaborator = collaboratorList?.find((v) => v.groupId === group._id);
+                  return (
+                    <MemberItemCard
+                      avatar={group.avatar}
+                      key={group._id}
+                      name={
+                        group.name === DefaultGroupName ? userInfo?.team.teamName ?? '' : group.name
+                      }
+                      permission={collaborator?.permission.value}
+                      onChange={onChange}
+                      isChecked={selectedGroupIdList.includes(group._id)}
+                    />
+                  );
+                })}
+              </ScrollData>
             </Flex>
           </Flex>
 
@@ -441,29 +447,27 @@ function MemberModal({
             <Flex flexDirection="column" mt="2" gap={1} overflow={'auto'} flex={'1 0 0'} h={0}>
               {selectedList.map((item) => {
                 return (
-                  <HStack
-                    justifyContent="space-between"
+                  <MemberItemCard
                     key={item.id}
-                    py="2"
-                    px="3"
-                    borderRadius="sm"
-                    alignItems="center"
-                    _hover={HoverBoxStyle}
-                  >
-                    <MyAvatar src={item.avatar} w="1.5rem" borderRadius={'50%'} />
-                    <Box w="full" ml="2">
-                      {item.name}
-                    </Box>
-                    <MyIcon
-                      name="common/closeLight"
-                      w="1rem"
-                      cursor={'pointer'}
-                      _hover={{
-                        color: 'red.600'
-                      }}
-                      onClick={item.onDelete}
-                    />
-                  </HStack>
+                    avatar={item.avatar}
+                    name={item.name ?? ''}
+                    onChange={item.onDelete}
+                    onDelete={item.onDelete}
+                    orgs={(() => {
+                      if (!item.id.startsWith('member-')) return [];
+                      const id = item.id.replace('member-', '');
+                      const memberOrgs = orgs.filter((org) =>
+                        org.members.find((v) => v.tmbId === id)
+                      );
+                      const memberPathIds = memberOrgs.map((org) =>
+                        (org.path + '/' + org.pathId).split('/').slice(0)
+                      );
+                      const memberOrgNames = memberPathIds.map((pathIds) =>
+                        pathIds.map((id) => orgs.find((v) => v.pathId === id)?.name).join('/')
+                      );
+                      return memberOrgNames;
+                    })()}
+                  />
                 );
               })}
             </Flex>

projects/app/src/components/support/user/inform/UpdateContactModal.tsx

@@ -4,34 +4,48 @@ import MyModal from '@fastgpt/web/components/common/MyModal';
 import { useTranslation } from 'next-i18next';
 import { useForm } from 'react-hook-form';
 import { useRequest2 } from '@fastgpt/web/hooks/useRequest';
-import { updateNotificationAccount } from '@/web/support/user/api';
+import { updateContact, updateNotificationAccount } from '@/web/support/user/api';
 import Icon from '@fastgpt/web/components/common/Icon';
 import { useSendCode } from '@/web/support/user/hooks/useSendCode';
 import { useUserStore } from '@/web/support/user/useUserStore';
 import { useSystemStore } from '@/web/common/system/useSystemStore';
 
 type FormType = {
-  account: string;
+  contact: string;
   verifyCode: string;
 };
 
-const UpdateNotificationModal = ({ onClose }: { onClose: () => void }) => {
+const UpdateContactModal = ({
+  onClose,
+  mode
+}: {
+  onClose: () => void;
+  mode: 'contact' | 'notification_account';
+}) => {
   const { t } = useTranslation();
   const { initUserInfo } = useUserStore();
   const { feConfigs } = useSystemStore();
 
   const { register, handleSubmit, watch } = useForm<FormType>({
     defaultValues: {
-      account: '',
+      contact: '',
       verifyCode: ''
     }
   });
-  const account = watch('account');
+
+  const account = watch('contact');
   const verifyCode = watch('verifyCode');
 
   const { runAsync: onSubmit, loading: isLoading } = useRequest2(
     (data: FormType) => {
-      return updateNotificationAccount(data);
+      if (mode === 'contact') {
+        return updateContact(data);
+      } else {
+        return updateNotificationAccount({
+          account: data.contact,
+          verifyCode: data.verifyCode
+        });
+      }
     },
     {
       onSuccess() {
@@ -62,7 +76,11 @@ const UpdateNotificationModal = ({ onClose }: { onClose: () => void }) => {
         isOpen
         iconSrc="common/settingLight"
         w={'32rem'}
-        title={t('common:support.user.info.notification_receiving_hint')}
+        title={
+          mode === 'notification_account'
+            ? t('common:support.user.info.notification_receiving_hint')
+            : t('account_info:contact')
+        }
       >
         <ModalBody px={10}>
           <Flex flexDirection="column">
@@ -75,7 +93,7 @@ const UpdateNotificationModal = ({ onClose }: { onClose: () => void }) => {
               <Input
                 flex={1}
                 bg={'myGray.50'}
-                {...register('account', { required: true })}
+                {...register('contact', { required: true })}
                 placeholder={placeholder}
               ></Input>
             </Flex>
@@ -108,4 +126,4 @@ const UpdateNotificationModal = ({ onClose }: { onClose: () => void }) => {
   );
 };
 
-export default UpdateNotificationModal;
+export default UpdateContactModal;

projects/app/src/components/support/user/team/OrgTags/index.tsx

@@ -0,0 +1,39 @@
+import { Box, Flex, VStack } from '@chakra-ui/react';
+import MyPopover from '@fastgpt/web/components/common/MyPopover';
+import MyTooltip from '@fastgpt/web/components/common/MyTooltip';
+import Tag from '@fastgpt/web/components/common/Tag';
+import React from 'react';
+
+function OrgTags({ orgs, type = 'simple' }: { orgs: string[]; type?: 'simple' | 'tag' }) {
+  return (
+    <MyTooltip
+      label={
+        <VStack gap="1" alignItems={'start'}>
+          {orgs.map((org, index) => (
+            <Box key={index} fontSize="sm" fontWeight={400} color="myGray.500">
+              {org.slice(1)}
+            </Box>
+          ))}
+        </VStack>
+      }
+    >
+      {type === 'simple' ? (
+        <Box fontSize="sm" fontWeight={400} w="full" color="myGray.500" whiteSpace={'nowrap'}>
+          {orgs
+            .map((org) => org.split('/').pop())
+            .join(', ')
+            .slice(0, 30)}
+          {orgs.length > 1 && '...'}
+        </Box>
+      ) : (
+        <Flex direction="row" gap="1" p="2" alignItems={'start'} wrap={'wrap'}>
+          {orgs.map((org, index) => (
+            <Tag key={index}>{org.split('/').pop()}</Tag>
+          ))}
+        </Flex>
+      )}
+    </MyTooltip>
+  );
+}
+
+export default OrgTags;