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

packages/web/components/common/MySelect/index.tsx

@@ -21,7 +21,15 @@ import type { ButtonProps, MenuItemProps } from '@chakra-ui/react';
 import MyIcon from '../Icon';
 import { useRequest2 } from '../../../hooks/useRequest';
 import MyDivider from '../MyDivider';
+import { useScrollPagination } from '../../../hooks/useScrollPagination';
 
+/** 选择组件 Props 类型
+ * value: 选中的值
+ * placeholder: 占位符
+ * list: 列表数据
+ * isLoading: 是否加载中
+ * ScrollData: 分页滚动数据控制器 [useScrollPagination] 的返回值
+ * */
 export type SelectProps<T = any> = ButtonProps & {
   value?: T;
   placeholder?: string;
@@ -34,6 +42,7 @@ export type SelectProps<T = any> = ButtonProps & {
   }[];
   isLoading?: boolean;
   onchange?: (val: T) => any | Promise<any>;
+  ScrollData?: ReturnType<typeof useScrollPagination>['ScrollData'];
 };
 
 const MySelect = <T = any,>(
@@ -44,6 +53,7 @@ const MySelect = <T = any,>(
     list = [],
     onchange,
     isLoading = false,
+    ScrollData,
     ...props
   }: SelectProps<T>,
   ref: ForwardedRef<{
@@ -154,39 +164,45 @@ const MySelect = <T = any,>(
           maxH={'40vh'}
           overflowY={'auto'}
         >
-          {list.map((item, i) => (
-            <Box key={i}>
-              <MenuItem
-                {...menuItemStyles}
-                {...(value === item.value
-                  ? {
-                      ref: SelectedItemRef,
-                      color: 'primary.700',
-                      bg: 'myGray.100',
-                      fontWeight: '600'
+          {(() => {
+            const component = list.map((item, i) => (
+              <Box key={i}>
+                <MenuItem
+                  {...menuItemStyles}
+                  {...(value === item.value
+                    ? {
+                        ref: SelectedItemRef,
+                        color: 'primary.700',
+                        bg: 'myGray.100',
+                        fontWeight: '600'
+                      }
+                    : {
+                        color: 'myGray.900'
+                      })}
+                  onClick={() => {
+                    if (onChange && value !== item.value) {
+                      onChange(item.value);
                     }
-                  : {
-                      color: 'myGray.900'
-                    })}
-                onClick={() => {
-                  if (onChange && value !== item.value) {
-                    onChange(item.value);
-                  }
-                }}
-                whiteSpace={'pre-wrap'}
-                fontSize={'sm'}
-                display={'block'}
-              >
-                <Box>{item.label}</Box>
-                {item.description && (
-                  <Box color={'myGray.500'} fontSize={'xs'}>
-                    {item.description}
-                  </Box>
-                )}
-              </MenuItem>
-              {item.showBorder && <MyDivider my={2} />}
-            </Box>
-          ))}
+                  }}
+                  whiteSpace={'pre-wrap'}
+                  fontSize={'sm'}
+                  display={'block'}
+                >
+                  <Box>{item.label}</Box>
+                  {item.description && (
+                    <Box color={'myGray.500'} fontSize={'xs'}>
+                      {item.description}
+                    </Box>
+                  )}
+                </MenuItem>
+                {item.showBorder && <MyDivider my={2} />}
+              </Box>
+            ));
+            if (ScrollData) {
+              return <ScrollData>{component}</ScrollData>;
+            }
+            return component;
+          })()}
         </MenuList>
       </Menu>
     </Box>

packages/web/components/common/UserBox/index.tsx

@@ -0,0 +1,23 @@
+import { Box, HStack, type StackProps } from '@chakra-ui/react';
+import { SourceMemberType } from '@fastgpt/global/support/user/type';
+import React from 'react';
+import Avatar from '../Avatar';
+import { useTranslation } from 'next-i18next';
+import Tag from '../Tag';
+
+export type UserBoxProps = {
+  sourceMember: SourceMemberType;
+  avatarSize?: string;
+} & StackProps;
+function UserBox({ sourceMember, avatarSize = '1.25rem', ...props }: UserBoxProps) {
+  const { t } = useTranslation();
+  return (
+    <HStack space="1" {...props}>
+      <Avatar src={sourceMember.avatar} w={avatarSize} />
+      <Box>{sourceMember.name}</Box>
+      {sourceMember.status === 'leave' && <Tag color="gray">{t('account_team:leaved')}</Tag>}
+    </HStack>
+  );
+}
+
+export default React.memo(UserBox);