perf: Team org ui (#3499)

* perf: org ui * perf: org ui
2024-12-30 20:49:11 +08:00
parent 1fc77a126a
commit efecfd44c3
21 changed files with 505 additions and 563 deletions
--- a/projects/app/src/pages/account/team/components/GroupManage/index.tsx
+++ b/projects/app/src/pages/account/team/components/GroupManage/index.tsx
@@ -26,6 +26,7 @@ import MemberTag from '../../../../../components/support/user/team/Info/MemberTa
 import MyTooltip from '@fastgpt/web/components/common/MyTooltip';
 import dynamic from 'next/dynamic';
 import { useState } from 'react';
+import IconButton from '../OrgManage/IconButton';

 const ChangeOwnerModal = dynamic(() => import('./GroupTransferOwnerModal'));

@@ -157,7 +158,7 @@ function MemberTable({
                <Td>
                  {hasGroupManagePer(group) && group.name !== DefaultGroupName && (
                    <MyMenu
-                      Button={<MyIcon name={'edit'} cursor={'pointer'} w="1rem" />}
+                      Button={<IconButton name={'more'} />}
                      menuList={[
                        {
                          children: [
--- a/projects/app/src/pages/account/team/components/OrgManage/IconButton.tsx
+++ b/projects/app/src/pages/account/team/components/OrgManage/IconButton.tsx
@@ -1,12 +1,20 @@
+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, onClick }: { name: IconNameType; onClick: () => void }) {
+function IconButton({
+  name,
+  w = '1rem',
+  h = '1rem',
+  ...props
+}: {
+  name: IconNameType;
+} & IconProps) {
  return (
    <MyIcon
      name={name}
-      w={'1rem'}
-      h={'1rem'}
+      w={w}
+      h={h}
      transition={'background 0.1s'}
      cursor={'pointer'}
      p="1"
@@ -15,7 +23,7 @@ function IconButton({ name, onClick }: { name: IconNameType; onClick: () => void
        bg: 'myGray.05',
        color: 'primary.600'
      }}
-      onClick={onClick}
+      {...props}
    />
  );
 }
--- a/projects/app/src/pages/account/team/components/OrgManage/OrgInfoModal.tsx
+++ b/projects/app/src/pages/account/team/components/OrgManage/OrgInfoModal.tsx
@@ -4,86 +4,95 @@ import { postCreateOrg, putUpdateOrg } from '@/web/support/user/team/org/api';
 import { Button, HStack, Input, ModalBody, ModalFooter, Textarea } from '@chakra-ui/react';
 import { MongoImageTypeEnum } from '@fastgpt/global/common/file/image/constants';
 import { DEFAULT_ORG_AVATAR } from '@fastgpt/global/common/system/constants';
-import type { OrgType } from '@fastgpt/global/support/user/team/org/type';
 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 { useEffect } from 'react';
+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,
-  createOrgParentId: parentId,
  onClose,
  onSuccess
 }: {
-  editOrg?: OrgType;
-  createOrgParentId?: string;
+  editOrg: OrgFormType;
  onClose: () => void;
-  onSuccess?: () => void;
+  onSuccess: () => void;
 }) {
  const { t } = useTranslation();
-  const { File: AvatarSelect, onOpen: onOpenSelectAvatar } = useSelectFile({
-    fileType: '.jpg, .jpeg, .png',
-    multiple: false
-  });

-  const { register, handleSubmit, getValues, setValue } = useForm<OrgFormType>({
+  const isEdit = !!editOrg._id;
+
+  const { register, handleSubmit, setValue, watch } = useForm<OrgFormType>({
    defaultValues: {
-      name: '',
-      avatar: DEFAULT_ORG_AVATAR,
-      description: undefined
+      name: editOrg.name,
+      avatar: editOrg.avatar,
+      description: editOrg.description
    }
  });
-
-  useEffect(() => {
-    setValue('name', editOrg?.name ?? '');
-    setValue('avatar', editOrg?.avatar || DEFAULT_ORG_AVATAR);
-    setValue('description', editOrg?.description);
-  }, [editOrg, setValue]);
+  const avatar = watch('avatar');

  const { run: onCreate, loading: isLoadingCreate } = useRequest2(
-    (data: OrgFormType, parentId: string) => {
+    async (data: OrgFormType) => {
+      if (!editOrg.parentId) return;
      return postCreateOrg({
        name: data.name,
        avatar: data.avatar,
-        parentId,
+        parentId: editOrg.parentId,
        description: data.description
      });
    },
    {
+      successToast: t('common:common.Create Success'),
      onSuccess: () => {
        onClose();
-        onSuccess?.();
+        onSuccess();
      }
    }
  );

  const { run: onUpdate, loading: isLoadingUpdate } = useRequest2(
-    (data: OrgFormType, orgId: string) => {
+    async (data: OrgFormType) => {
+      if (!editOrg._id) return;
      return putUpdateOrg({
-        orgId,
+        orgId: editOrg._id,
        name: data.name,
        avatar: data.avatar,
        description: data.description
      });
    },
    {
+      successToast: t('common:common.Update Success'),
      onSuccess: () => {
        onClose();
-        onSuccess?.();
+        onSuccess();
      }
    }
  );

+  const { File: AvatarSelect, onOpen: onOpenSelectAvatar } = useSelectFile({
+    fileType: '.jpg, .jpeg, .png',
+    multiple: false
+  });
  const { loading: uploadingAvatar, run: onSelectAvatar } = useRequest2(
    async (file: File[]) => {
      const src = await compressImgFileAndUpload({
@@ -101,20 +110,20 @@ function OrgInfoModal({
    }
  );

-  const isLoading = uploadingAvatar;
+  const isLoading = uploadingAvatar || isLoadingUpdate || isLoadingCreate;

  return (
    <MyModal
-      isOpen={!!(editOrg || parentId)}
+      isOpen
      onClose={onClose}
-      title={editOrg ? t('account_team:edit_org_info') : t('account_team:create_org')}
-      iconSrc={editOrg?.avatar || DEFAULT_ORG_AVATAR}
+      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={getValues('avatar') || DEFAULT_ORG_AVATAR}
+            src={avatar || DEFAULT_ORG_AVATAR}
            onClick={onOpenSelectAvatar}
            cursor={'pointer'}
            borderRadius={'md'}
@@ -132,14 +141,14 @@ function OrgInfoModal({
        <Button
          isLoading={isLoading}
          onClick={handleSubmit((data) => {
-            if (editOrg) {
-              onUpdate(data, editOrg._id);
-            } else if (parentId) {
-              onCreate(data, parentId);
+            if (isEdit) {
+              onUpdate(data);
+            } else {
+              onCreate(data);
            }
          })}
        >
-          {editOrg ? t('common:common.Save') : t('common:new_create')}
+          {isEdit ? t('common:common.Save') : t('common:new_create')}
        </Button>
      </ModalFooter>
      <AvatarSelect onSelect={onSelectAvatar} />
@@ -147,4 +156,4 @@ function OrgInfoModal({
  );
 }

-export default OrgInfoModal;
+export default dynamic(() => Promise.resolve(OrgInfoModal), { ssr: false });
--- a/projects/app/src/pages/account/team/components/OrgManage/OrgMemberManageModal.tsx
+++ b/projects/app/src/pages/account/team/components/OrgManage/OrgMemberManageModal.tsx
@@ -18,9 +18,11 @@ 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 { useEffect, useMemo, useState } 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';
+import dynamic from 'next/dynamic';

 export type GroupFormType = {
  members: {
@@ -39,69 +41,67 @@ function CheckboxIcon({
  return <MyIcon name={name} w="12px" />;
 }

-function OrgMemberModal({ onClose, editOrgId }: { onClose: () => void; editOrgId?: string }) {
-  // 1. Owner can not be deleted, toast
-  // 2. Owner/Admin can manage members
-  // 3. Owner can add/remove admins
+function OrgMemberManageModal({
+  currentOrg,
+  refetchOrgs,
+  onClose
+}: {
+  currentOrg: OrgType;
+  refetchOrgs: () => void;
+  onClose: () => void;
+}) {
  const { t } = useTranslation();
-  const {
-    members: allMembers,
-    orgs,
-    refetchOrgs,
-    refetchMembers
-  } = useContextSelector(TeamContext, (v) => v);
+  const allMembers = useContextSelector(TeamContext, (v) => v.members);

-  const org = useMemo(() => orgs.find((item) => item._id === editOrgId), [editOrgId, orgs]);
-
-  const [members, setMembers] = useState<{ tmbId: string }[]>(org?.members || []);
-
-  useEffect(() => {
-    setMembers(org?.members || []);
-  }, [org]);
+  const [selectedMembers, setSelectedMembers] = useState<string[]>(
+    currentOrg.members.map((item) => item.tmbId)
+  );

  const [searchKey, setSearchKey] = useState('');
-  const filtered = useMemo(() => {
-    return [
-      ...allMembers.filter((member) => {
-        if (member.memberName.toLowerCase().includes(searchKey.toLowerCase())) return true;
-        return false;
-      })
-    ];
+  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(
-    async () => {
-      if (!editOrgId) return;
+    () => {
      return putUpdateOrgMembers({
-        orgId: editOrgId,
-        members
+        orgId: currentOrg._id,
+        members: selectedMembers.map((tmbId) => ({
+          tmbId
+        }))
      });
    },
    {
-      onSuccess: () => Promise.all([onClose(), refetchOrgs(), refetchMembers()])
+      successToast: t('common:common.Update Success'),
+      onSuccess() {
+        refetchOrgs();
+        onClose();
+      }
    }
  );

  const isSelected = (memberId: string) => {
-    return members.find((item) => item.tmbId === memberId);
+    return selectedMembers.find((tmbId) => tmbId === memberId);
  };

  const handleToggleSelect = (memberId: string) => {
    if (isSelected(memberId)) {
-      setMembers(members.filter((item) => item.tmbId !== memberId));
+      setSelectedMembers((state) => state.filter((tmbId) => tmbId !== memberId));
    } else {
-      setMembers([...members, { tmbId: memberId }]);
+      setSelectedMembers((state) => [...state, memberId]);
    }
  };

  const isLoading = isLoadingUpdate;
+
  return (
    <MyModal
      onClose={onClose}
-      isOpen={!!editOrgId}
+      isOpen
      title={t('user:team.group.manage_member')}
-      iconSrc={org?.avatar}
-      iconColor="primary.600"
+      iconSrc={currentOrg?.avatar}
      minW="800px"
      h={'100%'}
      isCentered
@@ -124,7 +124,7 @@ function OrgMemberModal({ onClose, editOrgId }: { onClose: () => void; editOrgId
              }}
            />
            <Flex flexDirection="column" mt={3} flexGrow="1" overflow={'auto'} maxH={'400px'}>
-              {filtered.map((member) => {
+              {filterMembers.map((member) => {
                return (
                  <HStack
                    py="2"
@@ -153,35 +153,30 @@ function OrgMemberModal({ onClose, editOrgId }: { onClose: () => void; editOrgId
            </Flex>
          </Flex>
          <Flex borderLeft="1px" borderColor="myGray.200" flexDirection="column" p="4" h={'100%'}>
-            <Box mt={2}>{`${t('common:chosen')}:${members.length}`}</Box>
+            <Box mt={2}>{`${t('common:chosen')}:${selectedMembers.length}`}</Box>
            <Flex mt={3} flexDirection="column" flexGrow="1" overflow={'auto'} maxH={'400px'}>
-              {members.map((member) => {
+              {selectedMembers.map((tmbId) => {
+                const member = allMembers.find((item) => item.tmbId === tmbId)!;
                return (
                  <HStack
                    justifyContent="space-between"
                    py="2"
                    px={3}
                    borderRadius={'md'}
-                    key={member.tmbId}
+                    key={tmbId}
                    _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>
+                      <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(member.tmbId)}
+                      onClick={() => handleToggleSelect(tmbId)}
                    />
                  </HStack>
                );
@@ -199,4 +194,4 @@ function OrgMemberModal({ onClose, editOrgId }: { onClose: () => void; editOrgId
  );
 }

-export default OrgMemberModal;
+export default dynamic(() => Promise.resolve(OrgMemberManageModal), { ssr: false });
--- a/projects/app/src/pages/account/team/components/OrgManage/OrgMoveModal.tsx
+++ b/projects/app/src/pages/account/team/components/OrgManage/OrgMoveModal.tsx
@@ -1,75 +1,69 @@
-import { putMoveOrg, putMoveOrgMember } from '@/web/support/user/team/org/api';
+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 type { TeamTmbItemType } from '@fastgpt/global/support/user/team/type';
 import MyModal from '@fastgpt/web/components/common/MyModal';
 import { useRequest2 } from '@fastgpt/web/hooks/useRequest';
 import { useTranslation } from 'next-i18next';
-import { useState } from 'react';
+import { useMemo, useState } from 'react';
 import OrgTree from './OrgTree';
+import dynamic from 'next/dynamic';
+import { useUserStore } from '@/web/support/user/useUserStore';

 function OrgMoveModal({
  movingOrg,
-  movingTmb,
  orgs,
-  team,
  onClose,
  onSuccess
 }: {
-  movingOrg?: OrgType;
-  movingTmb?: { tmbId: string; orgId: string };
+  movingOrg: OrgType;
  orgs: OrgType[];
-  team: TeamTmbItemType;
  onClose: () => void;
  onSuccess: () => void;
 }) {
  const { t } = useTranslation();
-  const [selectedOrg, selectOrg] = useState<OrgType>();
+  const [selectedOrg, setSelectedOrg] = useState<OrgType>();
+  const { userInfo } = useUserStore();
+  const team = userInfo?.team!;

-  const { runAsync: moveOrg, loading: loadingOrg } = useRequest2(putMoveOrg, {
+  const { runAsync: onMoveOrg, loading } = useRequest2(putMoveOrg, {
    onSuccess: () => {
      onClose();
      onSuccess();
    }
  });

-  const { runAsync: moveTmb, loading: loadingTmb } = useRequest2(putMoveOrgMember, {
-    onSuccess: () => {
-      onClose();
-      onSuccess();
-    }
-  });
-
-  const handleConfirm = () => {
-    if (!selectedOrg) return;
-    if (movingTmb) {
-      moveTmb({ orgId: movingTmb.orgId, tmbId: movingTmb.tmbId, newOrgId: selectedOrg._id });
-    } else if (movingOrg) {
-      moveOrg(movingOrg._id, selectedOrg._id);
-    }
-  };
-
-  const loading = loadingOrg || loadingTmb;
+  const filterMovingOrgs = useMemo(
+    () => orgs.filter((org) => org._id !== movingOrg._id),
+    [movingOrg._id, orgs]
+  );

  return (
    <MyModal
-      isOpen={!!movingOrg || !!movingTmb}
+      isOpen
      onClose={onClose}
-      title={movingOrg ? t('account_team:move_org') : t('account_team:move_member')}
+      title={t('account_team:move_org')}
      iconSrc="common/file/move"
-      iconColor="blue.600"
+      iconColor="primary.600"
    >
      <ModalBody>
        <OrgTree
-          orgs={orgs}
-          teamName={team.teamName}
-          teamAvatar={team.avatar}
+          orgs={filterMovingOrgs}
          selectedOrg={selectedOrg}
-          selectOrg={selectOrg}
+          setSelectedOrg={setSelectedOrg}
        />
      </ModalBody>
      <ModalFooter>
-        <Button isDisabled={!selectedOrg} isLoading={loading} onClick={() => handleConfirm()}>
+        <Button
+          isDisabled={!selectedOrg}
+          isLoading={loading}
+          onClick={() => {
+            if (!selectedOrg) return;
+            return onMoveOrg({
+              orgId: movingOrg._id,
+              targetOrgId: selectedOrg._id
+            });
+          }}
+        >
          {t('common:common.Confirm')}
        </Button>
      </ModalFooter>
@@ -77,4 +71,4 @@ function OrgMoveModal({
  );
 }

-export default OrgMoveModal;
+export default dynamic(() => Promise.resolve(OrgMoveModal), { ssr: false });
--- a/projects/app/src/pages/account/team/components/OrgManage/OrgTree.tsx
+++ b/projects/app/src/pages/account/team/components/OrgManage/OrgTree.tsx
@@ -1,114 +1,101 @@
-import { Box, HStack, Text, VStack } from '@chakra-ui/react';
+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, useState } from 'react';
+import { useMemo } from 'react';
 import IconButton from './IconButton';

 function OrgTreeNode({
  org,
  list,
  selectedOrg,
-  selectOrg,
-  indent = 0
+  setSelectedOrg,
+  index = 0
 }: {
  org: OrgType;
  list: OrgType[];
  selectedOrg?: OrgType;
-  selectOrg?: (org?: OrgType) => void;
-  indent?: number;
+  setSelectedOrg: (org?: OrgType) => void;
+  index?: number;
 }) {
  const children = useMemo(
    () => list.filter((item) => item.path === `${org.path}/${org._id}`),
    [org, list]
  );
-  const [isExpanded, toggleIsExpanded] = useToggle(false);
+  const [isExpanded, toggleIsExpanded] = useToggle(index === 0);

  return (
-    <VStack alignItems={'start'} w="full" gap={'8px'}>
+    <Box userSelect={'none'}>
      <HStack
-        w="full"
-        _hover={{ bgColor: selectedOrg === org ? 'blue.200' : 'gray.100' }}
-        borderRadius="4px"
-        boxSizing="border-box"
-        py="4px"
-        pl={`calc(${indent}rem + 4px)`}
-        transition={'background 0.1s'}
-        {...(selectedOrg === org ? { bgColor: 'blue.100' } : {})}
+        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)
+            })}
      >
-        {children.length > 0 ? (
+        {index > 0 && (
          <IconButton
            name={isExpanded ? 'common/downArrowFill' : 'common/rightArrowFill'}
-            onClick={() => toggleIsExpanded.toggle()}
+            color={'myGray.500'}
+            p={0}
+            w={'1.25rem'}
+            visibility={children.length > 0 ? 'visible' : 'hidden'}
+            onClick={(e) => {
+              e.stopPropagation();
+              toggleIsExpanded.toggle();
+            }}
          />
-        ) : (
-          <Box w={'1rem'} h={'1rem'} m="1" />
        )}
-        <HStack onClick={() => selectOrg?.(org)} cursor="pointer">
-          <Avatar src={org.avatar} w="20px" h="20px" rounded={'50%'} />
-          <Text>{org.name}</Text>
+        <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) => (
-          <OrgTreeNode
-            key={child._id}
-            org={child}
-            indent={indent + 1}
-            list={list}
-            selectedOrg={selectedOrg}
-            selectOrg={selectOrg}
-          />
+          <Box key={child._id} mt={0.5}>
+            <OrgTreeNode
+              org={child}
+              index={index + 1}
+              list={list}
+              selectedOrg={selectedOrg}
+              setSelectedOrg={setSelectedOrg}
+            />
+          </Box>
        ))}
-    </VStack>
+    </Box>
  );
 }

 function OrgTree({
  orgs,
-  teamName,
-  teamAvatar,
  selectedOrg,
-  selectOrg
+  setSelectedOrg
 }: {
  orgs: OrgType[];
-  teamAvatar: string;
-  teamName: string;
  selectedOrg?: OrgType;
-  selectOrg?: (org?: OrgType) => void;
+  setSelectedOrg: (org?: OrgType) => void;
 }) {
  const root = orgs[0];
-  if (!root) return null;
-  const children = useMemo(
-    () => orgs.filter((item) => item.path === `${root.path}/${root._id}`),
-    [root, orgs]
-  );
+  if (!root) return;
+
  return (
-    <VStack alignItems={'start'} gap={'8px'}>
-      <HStack
-        w="full"
-        onClick={() => selectOrg?.(root)}
-        cursor="pointer"
-        _hover={{ bgColor: selectedOrg === root ? 'blue.200' : 'gray.100' }}
-        borderRadius="4px"
-        p="4px"
-        transition={'background 0.1s'}
-        {...(selectedOrg === root ? { bgColor: 'blue.100' } : {})}
-      >
-        <Avatar src={teamAvatar} w="20px" h="20px" rounded={'50%'} />
-        <Text>{teamName}</Text>
-      </HStack>
-      {children.map((child) => (
-        <OrgTreeNode
-          key={child._id}
-          org={child}
-          list={orgs}
-          selectOrg={selectOrg}
-          selectedOrg={selectedOrg}
-        />
-      ))}
-    </VStack>
+    <OrgTreeNode org={root} list={orgs} setSelectedOrg={setSelectedOrg} selectedOrg={selectedOrg} />
  );
 }

--- a/projects/app/src/pages/account/team/components/OrgManage/index.tsx
+++ b/projects/app/src/pages/account/team/components/OrgManage/index.tsx
@@ -2,22 +2,18 @@ import { deleteOrg, deleteOrgMember } from '@/web/support/user/team/org/api';
 import { useUserStore } from '@/web/support/user/useUserStore';
 import {
  Box,
-  Breadcrumb,
-  BreadcrumbItem,
-  BreadcrumbLink,
  Divider,
+  Flex,
  HStack,
  Table,
  TableContainer,
  Tag,
  Tbody,
  Td,
-  Text,
  Th,
  Thead,
  Tr,
-  VStack,
-  useDisclosure
+  VStack
 } from '@chakra-ui/react';
 import type { OrgType } from '@fastgpt/global/support/user/team/org/type';
 import Avatar from '@fastgpt/web/components/common/Avatar';
@@ -27,14 +23,21 @@ 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 { useEffect, useMemo, useState } from 'react';
+import { useMemo, useState } from 'react';
 import { useContextSelector } from 'use-context-selector';
-import MemberTag from '../../../../../components/support/user/team/Info/MemberTag';
+import MemberTag from '@/components/support/user/team/Info/MemberTag';
 import { TeamContext } from '../context';
+import { getOrgList } from '@/web/support/user/team/org/api';
+
 import IconButton from './IconButton';
-import OrgInfoModal from './OrgInfoModal';
-import OrgMemberModal from './OrgMemberModal';
+import OrgInfoModal, { defaultOrgForm, OrgFormType } from './OrgInfoModal';
+import OrgMemberManageModal from './OrgMemberManageModal';
+
 import OrgMoveModal from './OrgMoveModal';
+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';

 function ActionButton({
  icon,
@@ -59,118 +62,101 @@ function ActionButton({
      }}
      onClick={onClick}
    >
-      <MyIcon name={icon} w="16px" h="16px" p="1" />
-      <Text fontSize={'12px'} lineHeight={'16px'}>
-        {text}
-      </Text>
+      <MyIcon name={icon} w="1rem" h="1rem" />
+      <Box fontSize={'sm'}>{text}</Box>
    </HStack>
  );
 }

 function MemberTable() {
  const { t } = useTranslation();
-  const { userInfo } = useUserStore();
+  const { userInfo, isTeamAdmin } = useUserStore();

-  const { orgs, refetchOrgs, members, refetchMembers, isLoading } = useContextSelector(
-    TeamContext,
-    (v) => v
-  );
-  const [currentOrg, setCurrentOrg] = useState<OrgType>();
+  const { members } = useContextSelector(TeamContext, (v) => v);

-  // Set current org by hash
-  useEffect(() => {
-    const hash = window.location.hash.substring(1);
-    const initialOrg = orgs.find((org) => org._id === hash) || orgs[0];
-    setCurrentOrg(initialOrg);
-  }, [orgs, isLoading]);
-  // Update hash when current org changes
-  useEffect(() => {
-    if (currentOrg) {
-      window.location.hash = currentOrg._id;
+  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 [];
+    if (parentPath === '') {
+      setParentPath(`/${orgs[0]._id}`);
+      return [];
    }
-  }, [currentOrg]);
+    return orgs
+      .filter((org) => org.path === parentPath)
+      .map((item) => {
+        return {
+          ...item,
+          count:
+            item.members.length +
+            orgs.filter((org) => org.path === `${item.path}/${item._id}`).length
+        };
+      });
+  }, [orgs, parentPath]);
+  const currentOrg = useMemo(() => {
+    const splitPath = parentPath.split('/');
+    const currentOrgId = splitPath[splitPath.length - 1];
+    if (!currentOrgId) return;

-  const currentPath = useMemo<{ path: string; parents: OrgType[] }>(
-    () => ({
-      path: currentOrg ? `${currentOrg.path}/${currentOrg._id}` : '',
-      parents: currentOrg
-        ? currentOrg.path
-            .split('/')
-            .filter(Boolean)
-            .map((orgId) => orgs.find((org) => org._id === orgId)!)
-        : []
-    }),
-    [orgs, currentOrg]
-  );
+    return orgs.find((org) => org._id === currentOrgId);
+  }, [orgs, parentPath]);
+  const paths = useMemo(() => {
+    const splitPath = parentPath.split('/').filter(Boolean);
+    return splitPath
+      .map((id) => {
+        const org = orgs.find((org) => org._id === id)!;

-  const orgList = useMemo(
-    () =>
-      orgs
-        .filter((org) => org.path === currentPath.path)
-        .map((org) => {
-          // calc org members count
-          let count = org.members.length;
-          for (const item of orgs.filter((item) =>
-            item.path.startsWith(`${org.path}/${org._id}`)
-          )) {
-            count += item.members.length;
-          }
+        if (org.path === '') return;

-          return { ...org, count };
-        }),
-    [orgs, currentPath]
-  );
+        return {
+          parentId: `${org.path}/${org._id}`,
+          parentName: org.name
+        };
+      })
+      .filter(Boolean) as ParentTreePathItemType[];
+  }, [parentPath, orgs]);

-  const [editOrg, setEditOrg] = useState<OrgType | undefined>();
-  const [editMemberOrgId, setEditMemberOrgId] = useState<string | undefined>();
-  const [movingOrg, setMovingOrg] = useState<OrgType | undefined>();
-  const [movingTmb, setMovingTmb] = useState<{ tmbId: string; orgId: string } | undefined>();
-  const [createOrgParentId, setCreateOrgParentId] = useState<string | undefined>();
+  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: deleteOrgReq } = useRequest2(deleteOrg, {
-    onSuccess: () => {
-      refetchOrgs();
-      refetchMembers();
-    }
-  });
  const { runAsync: deleteMemberReq } = useRequest2(deleteOrgMember, {
    onSuccess: () => {
      refetchOrgs();
-      refetchMembers();
    }
  });

-  const deleteOrgHandler = (orgId: string) => openDeleteOrgModal(() => deleteOrgReq(orgId))();
-  const deleteMemberHandler = (orgId: string, tmbId: string) =>
-    openDeleteMemberModal(() => deleteMemberReq(orgId, tmbId))();
-
  return (
-    <VStack>
-      <Breadcrumb mr={'auto'}>
-        {currentPath.parents.map((parent) => (
-          <BreadcrumbItem key={parent._id}>
-            <BreadcrumbLink onClick={() => setCurrentOrg(parent)}>
-              {parent.path === '' ? userInfo?.team.teamName : parent.name}
-            </BreadcrumbLink>
-          </BreadcrumbItem>
-        ))}
-        <BreadcrumbItem isCurrentPage>
-          <BreadcrumbLink color="myGray.900" fontWeight={500}>
-            {currentOrg?.path === '' ? userInfo?.team.teamName : currentOrg?.name}
-          </BreadcrumbLink>
-        </BreadcrumbItem>
-      </Breadcrumb>
-      <HStack w={'100%'} gap={'16px'} alignItems={'start'}>
+    <MyBox isLoading={isLoadingOrgs}>
+      <Box mb={3}>
+        <Path paths={paths} rootName={userInfo?.team?.teamName} onClick={setParentPath} />
+      </Box>
+      <Flex w={'100%'} gap={'4'}>
+        {/* Table */}
        <TableContainer overflow={'unset'} fontSize={'sm'} flexGrow={1}>
          <Table overflow={'unset'}>
            <Thead>
@@ -184,94 +170,86 @@ function MemberTable() {
              </Tr>
            </Thead>
            <Tbody>
-              {orgList.map((org) => (
+              {currentOrgs.map((org) => (
                <Tr key={org._id} overflow={'unset'}>
                  <Td>
-                    <HStack w="fit-content" cursor={'pointer'} onClick={() => setCurrentOrg(org)}>
+                    <HStack
+                      cursor={'pointer'}
+                      onClick={() => setParentPath(`${org.path}/${org._id}`)}
+                    >
                      <MemberTag name={org.name} avatar={org.avatar} />
                      <Tag size="sm">{org.count}</Tag>
                      <MyIcon
                        name="core/chat/chevronRight"
-                        w={'12px'}
-                        h={'12px'}
-                        color={'myGray.400'}
+                        w={'1rem'}
+                        h={'1rem'}
+                        color={'myGray.500'}
                      />
                    </HStack>
                  </Td>
-
                  <Td w={'6rem'}>
-                    <MyMenu
-                      trigger="click"
-                      Button={
-                        <MyIcon name="more" w={'1rem'} cursor={'pointer'} p="1" rounded={'sm'} />
-                      }
-                      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)
-                            }
-                          ]
-                        }
-                      ]}
-                    />
+                    {isTeamAdmin && (
+                      <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} overflow={'unset'}>
+                  <Tr key={member.tmbId}>
                    <Td>
                      <MemberTag name={memberInfo.memberName} avatar={memberInfo.avatar} />
                    </Td>
                    <Td w={'6rem'}>
-                      <MyMenu
-                        trigger={'click'}
-                        Button={
-                          <MyIcon name="more" w={'1rem'} cursor={'pointer'} p="1" rounded={'sm'} />
-                        }
-                        menuList={[
-                          {
-                            children: [
-                              // {
-                              //   icon: 'edit',
-                              //   label: t('account_team:remark'),
-                              //   onClick: () => {
-                              //     // TODO
-                              //     console.log(member.tmbId);
-                              //   }
-                              // },
-                              {
-                                icon: 'common/file/move',
-                                label: t('common:Move'),
-                                onClick: () =>
-                                  setMovingTmb({ tmbId: member.tmbId, orgId: currentOrg!._id })
-                              },
-                              {
-                                icon: 'delete',
-                                label: t('account_team:delete'),
-                                type: 'danger',
-                                onClick: () => deleteMemberHandler(currentOrg!._id, member.tmbId)
-                              }
-                            ]
-                          }
-                        ]}
-                      />
+                      {isTeamAdmin && (
+                        <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>
                );
@@ -279,92 +257,87 @@ function MemberTable() {
            </Tbody>
          </Table>
        </TableContainer>
-
-        <VStack w={'220px'} alignItems={'start'}>
+        {/* Slider */}
+        <VStack w={'180px'} alignItems={'start'}>
          <HStack gap={'6px'}>
-            <Avatar
-              src={currentOrg?.path === '' ? userInfo?.team.avatar : currentOrg?.avatar}
-              w={'16px'}
-              h={'16px'}
-              rounded={'20%'}
-            />
-            <Text fontWeight={500} fontSize={'14px'} color={'myGray.900'} lineHeight={'20px'}>
-              {currentOrg?.path === '' ? userInfo?.team.teamName : currentOrg?.name}
-            </Text>
+            <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>
-          <Text fontSize={12} lineHeight={'16px'} w={'full'}>
-            {currentOrg?.description ?? t('common:common.no_intro')}
-          </Text>
+          <Box fontSize={'xs'}>{currentOrg?.description || t('common:common.no_intro')}</Box>

          <Divider my={'20px'} />

-          <Text fontWeight={500} mb="13px" fontSize="14px" color="myGray.900" lineHeight="20px">
+          <Box fontWeight={500} fontSize="sm" color="myGray.900">
            {t('common:common.Action')}
-          </Text>
-          <VStack gap="13px" w="100%">
-            <ActionButton
-              icon="common/add2"
-              text={t('account_team:create_sub_org')}
-              onClick={() => {
-                setCreateOrgParentId(currentOrg?._id);
-              }}
-            />
-            <ActionButton
-              icon="common/administrator"
-              text={t('account_team:manage_member')}
-              onClick={() => setEditMemberOrgId(currentOrg?._id)}
-            />
-            {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>
+          </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
+                  });
+                }}
+              />
+              {currentOrg?.path !== '' && (
+                <>
+                  <ActionButton
+                    icon="common/administrator"
+                    text={t('account_team:manage_member')}
+                    onClick={() => setManageMemberOrg(currentOrg)}
+                  />
+                  <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>
-      </HStack>
-      <OrgInfoModal
-        editOrg={editOrg}
-        createOrgParentId={createOrgParentId}
-        onClose={() => {
-          setEditOrg(undefined);
-          setCreateOrgParentId(undefined);
-        }}
-        onSuccess={() => {
-          refetchOrgs();
-          refetchMembers();
-        }}
-      />
-      <OrgMoveModal
-        orgs={orgs}
-        team={userInfo?.team!}
-        movingOrg={movingOrg}
-        movingTmb={movingTmb}
-        onClose={() => {
-          setMovingOrg(undefined);
-          setMovingTmb(undefined);
-        }}
-        onSuccess={() => {
-          refetchOrgs();
-          refetchMembers();
-        }}
-      />
-      <OrgMemberModal editOrgId={editMemberOrgId} onClose={() => setEditMemberOrgId(undefined)} />
+      </Flex>
+
+      {!!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 />
-    </VStack>
+    </MyBox>
  );
 }

-export default MemberTable;
+export default dynamic(() => Promise.resolve(MemberTable), { ssr: false });
--- a/projects/app/src/pages/account/team/components/context.tsx
+++ b/projects/app/src/pages/account/team/components/context.tsx
@@ -9,7 +9,6 @@ import type { TeamTmbItemType, TeamMemberItemType } from '@fastgpt/global/suppor
 import { useRequest2 } from '@fastgpt/web/hooks/useRequest';
 import { useTranslation } from 'next-i18next';
 import { getGroupList } from '@/web/support/user/team/group/api';
-import { getOrgList } from '@/web/support/user/team/org/api';
 import { MemberGroupListType } from '@fastgpt/global/support/permission/memberGroup/type';
 import { OrgType } from '@fastgpt/global/support/user/team/org/type';

@@ -19,7 +18,6 @@ type TeamModalContextType = {
  myTeams: TeamTmbItemType[];
  members: TeamMemberItemType[];
  groups: MemberGroupListType;
-  orgs: OrgType[];
  isLoading: boolean;
  onSwitchTeam: (teamId: string) => void;
  setEditTeamData: React.Dispatch<React.SetStateAction<EditTeamFormDataType | undefined>>;
@@ -27,7 +25,6 @@ type TeamModalContextType = {
  refetchMembers: () => void;
  refetchTeams: () => void;
  refetchGroups: () => void;
-  refetchOrgs: () => void;
  searchKey: string;
  setSearchKey: React.Dispatch<React.SetStateAction<string>>;
  teamSize: number;
@@ -37,7 +34,6 @@ export const TeamContext = createContext<TeamModalContextType>({
  myTeams: [],
  groups: [],
  members: [],
-  orgs: [],
  isLoading: false,
  onSwitchTeam: function (_teamId: string): void {
    throw new Error('Function not implemented.');
@@ -54,9 +50,6 @@ export const TeamContext = createContext<TeamModalContextType>({
  refetchGroups: function (): void {
    throw new Error('Function not implemented.');
  },
-  refetchOrgs: function (): void {
-    throw new Error('Function not implemented.');
-  },

  searchKey: '',
  setSearchKey: function (_value: React.SetStateAction<string>): void {
@@ -115,17 +108,7 @@ export const TeamModalContextProvider = ({ children }: { children: ReactNode })
    refreshDeps: [userInfo?.team?.teamId]
  });

-  const {
-    data: orgs = [],
-    loading: isLoadingOrgs,
-    refresh: refetchOrgs
-  } = useRequest2(getOrgList, {
-    manual: false,
-    refreshDeps: [userInfo?.team?.teamId]
-  });
-
-  const isLoading =
-    isLoadingTeams || isSwitchingTeam || loadingMembers || isLoadingGroups || isLoadingOrgs;
+  const isLoading = isLoadingTeams || isSwitchingTeam || loadingMembers || isLoadingGroups;

  const contextValue = {
    myTeams,
@@ -141,8 +124,6 @@ export const TeamModalContextProvider = ({ children }: { children: ReactNode })
    refetchMembers,
    groups,
    refetchGroups,
-    orgs,
-    refetchOrgs,
    teamSize: members.length
  };