Team group (#2864)

* feat(member-group): Team (#2616)

* feat: member-group schema define

* feat(fe): create group

* feat: add group edit modal

* feat(fe): add avatar group component

* feat: edit group
fix: permission select menu style

* feat: bio-mode support for select-member component

* fix: avatar group key unique

* feat: group manage

* feat: divide member into group and clbs

* feat: finish team permission

* chore: adjust

* fix: get clbs

* perf: groups code

* pref: member group for team (#2706)

* chore: fe adjust
fix: remove the member from groups when removing from team
feat: change the groups avatar when updating the team's avatar

* chore: DefaultGroupName as a constant string ''

* fix: create default group when create team for root

* feat: comment

* feat: 4811 init

* pref: member group for team (#2732)

* chore: default group name

* feat: get default group when get by tmbid

* feat(fe): adjust

* member ui

* fix: delete group (#2736)

* perf: init4811

* pref: member group (#2818)

* fix: update clb per then refetch clb list

* fix: calculate group permission

* feat(fe): group tag

* refactor(fe): team and group manage

* feat: manage group member

* feat: add group transfer owner modal

* feat: group manage member

* chore: adjust the file structure

* pref: member group

* chore: adjust fe style

* fix: ts error

* chore: fe adjust

* chore: fe adjust

* chore: adjust

* chore: adjust the code

* perf: i18n and schema name

* pref: member-group (#2862)

* feat: group list ordered by updateTime

* fix: transfer ownership of group when deleting member

* fix: i18n fix

* feat: can not set member as admin/owner when user is not active

* fix: GroupInfoModal hover input do not change color

* fix(fe): searchinput do not scroll

* perf: team group ui

* doc

* remove enum

---------

Co-authored-by: Finley Ge <32237950+FinleyGe@users.noreply.github.com>

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

@@ -2,12 +2,12 @@ import {
   ButtonProps,
   Flex,
   Menu,
-  MenuButton,
   MenuList,
   Box,
   Radio,
   useOutsideClick,
-  HStack
+  HStack,
+  MenuButton
 } from '@chakra-ui/react';
 import React, { useMemo, useRef, useState } from 'react';
 import MyIcon from '@fastgpt/web/components/common/Icon';
@@ -46,18 +46,17 @@ function PermissionSelect({
   offset = [0, 5],
   Button,
   width = 'auto',
-  onDelete,
-  ...props
+  onDelete
 }: PermissionSelectProps) {
   const { t } = useTranslation();
   const { permission, permissionList } = useContextSelector(CollaboratorContext, (v) => v);
-  const ref = useRef<HTMLDivElement>(null);
-  const closeTimer = useRef<any>();
+  const ref = useRef<HTMLButtonElement>(null);
+  const closeTimer = useRef<NodeJS.Timeout>();
 
   const [isOpen, setIsOpen] = useState(false);
 
   const permissionSelectList = useMemo(() => {
-    const list = Object.entries(permissionList).map(([key, value]) => {
+    const list = Object.entries(permissionList).map(([_, value]) => {
       return {
         name: value.name,
         value: value.value,
@@ -85,15 +84,15 @@ function PermissionSelect({
 
     return permissionList['read'].value;
   }, [permissionList, value]);
-  const selectedMultipleValues = useMemo(() => {
-    const per = new Permission({ per: value });
-
-    return permissionSelectList.multipleCheckBoxList
-      .filter((item) => {
-        return per.checkPer(item.value);
-      })
-      .map((item) => item.value);
-  }, [permissionSelectList.multipleCheckBoxList, value]);
+  // const selectedMultipleValues = useMemo(() => {
+  //   const per = new Permission({ per: value });
+  //
+  //   return permissionSelectList.multipleCheckBoxList
+  //     .filter((item) => {
+  //       return per.checkPer(item.value);
+  //     })
+  //     .map((item) => item.value);
+  // }, [permissionSelectList.multipleCheckBoxList, value]);
 
   const onSelectPer = (per: PermissionValueType) => {
     if (per === value) return;
@@ -111,7 +110,7 @@ function PermissionSelect({
   return (
     <Menu offset={offset} isOpen={isOpen} autoSelect={false} direction={'ltr'}>
       <Box
-        ref={ref}
+        w="fit-content"
         onMouseEnter={() => {
           if (trigger === 'hover') {
             setIsOpen(true);
@@ -126,7 +125,8 @@ function PermissionSelect({
           }
         }}
       >
-        <Box
+        <MenuButton
+          ref={ref}
           position={'relative'}
           onClickCapture={() => {
             if (trigger === 'click') {
@@ -134,25 +134,8 @@ function PermissionSelect({
             }
           }}
         >
-          <MenuButton
-            w={'100%'}
-            h={'100%'}
-            position={'absolute'}
-            top={0}
-            right={0}
-            bottom={0}
-            left={0}
-          />
-          <Flex
-            alignItems={'center'}
-            justifyContent={'center'}
-            position={'relative'}
-            cursor={'pointer'}
-            userSelect={'none'}
-          >
-            {Button}
-          </Flex>
-        </Box>
+          {Button}
+        </MenuButton>
         <MenuList
           minW={isOpen ? `${width}px !important` : 0}
           p="3"