perf: scroll page code

This commit is contained in:
archer
2025-01-13 13:40:42 +08:00
parent ec0cef09a2
commit 62bcff2ff0
14 changed files with 302 additions and 250 deletions

View File

@@ -61,72 +61,81 @@ const Team = () => {
return (
<AccountContainer isLoading={isLoading}>
{/* header */}
<Flex
w={'100%'}
h={'3.5rem'}
px={'1.56rem'}
py={'0.56rem'}
borderBottom={'1px solid'}
borderColor={'myGray.200'}
bg={'myGray.25'}
align={'center'}
gap={6}
justify={'space-between'}
>
<Flex align={'center'}>
<Flex gap={2} color={'myGray.900'}>
<Icon name="support/user/usersLight" w={'1.25rem'} h={'1.25rem'} />
<Box fontWeight={'500'} fontSize={'1rem'}>
{t('account:team')}
</Box>
</Flex>
<Flex align={'center'} ml={6}>
<TeamSelector height={'28px'} />
</Flex>
{userInfo?.team?.role === TeamMemberRoleEnum.owner && (
<Flex align={'center'} justify={'center'} ml={2} p={'0.44rem'}>
<MyIcon
name="edit"
w="18px"
cursor="pointer"
_hover={{
color: 'primary.500'
}}
onClick={() => {
if (!userInfo?.team) return;
setEditTeamData({
id: userInfo.team.teamId,
name: userInfo.team.teamName,
avatar: userInfo.team.avatar
});
}}
/>
<Flex h={'100%'} flexDirection={'column'}>
{/* header */}
<Flex
w={'100%'}
h={'3.5rem'}
px={'1.56rem'}
py={'0.56rem'}
borderBottom={'1px solid'}
borderColor={'myGray.200'}
bg={'myGray.25'}
align={'center'}
gap={6}
justify={'space-between'}
>
<Flex align={'center'}>
<Flex gap={2} color={'myGray.900'}>
<Icon name="support/user/usersLight" w={'1.25rem'} h={'1.25rem'} />
<Box fontWeight={'500'} fontSize={'1rem'}>
{t('account:team')}
</Box>
</Flex>
)}
<Flex align={'center'} ml={6}>
<TeamSelector height={'28px'} />
</Flex>
{userInfo?.team?.role === TeamMemberRoleEnum.owner && (
<Flex align={'center'} justify={'center'} ml={2} p={'0.44rem'}>
<MyIcon
name="edit"
w="18px"
cursor="pointer"
_hover={{
color: 'primary.500'
}}
onClick={() => {
if (!userInfo?.team) return;
setEditTeamData({
id: userInfo.team.teamId,
name: userInfo.team.teamName,
avatar: userInfo.team.avatar
});
}}
/>
</Flex>
)}
</Flex>
<Box
float={'right'}
color={'myGray.900'}
h={'1.25rem'}
px={'0.5rem'}
py={'0.125rem'}
fontSize={'0.75rem'}
borderRadius={'1.25rem'}
bg={'myGray.150'}
>
{t('account_team:total_team_members', { amount: teamSize })}
</Box>
</Flex>
{/* table */}
<Box
float={'right'}
color={'myGray.900'}
h={'1.25rem'}
px={'0.5rem'}
py={'0.125rem'}
fontSize={'0.75rem'}
borderRadius={'1.25rem'}
bg={'myGray.150'}
py={'1.5rem'}
px={'2rem'}
flex={'1 0 0'}
display={'flex'}
flexDirection={'column'}
overflow={'auto'}
>
{t('account_team:total_team_members', { amount: teamSize })}
{teamTab === TeamTabEnum.member && <MemberTable Tabs={Tabs} />}
{teamTab === TeamTabEnum.org && <OrgManage Tabs={Tabs} />}
{teamTab === TeamTabEnum.group && <GroupManage Tabs={Tabs} />}
{teamTab === TeamTabEnum.permission && <PermissionManage Tabs={Tabs} />}
</Box>
</Flex>
{/* table */}
<Box py={'1.5rem'} px={'2rem'}>
{teamTab === TeamTabEnum.member && <MemberTable Tabs={Tabs} />}
{teamTab === TeamTabEnum.org && <OrgManage Tabs={Tabs} />}
{teamTab === TeamTabEnum.group && <GroupManage Tabs={Tabs} />}
{teamTab === TeamTabEnum.permission && <PermissionManage Tabs={Tabs} />}
</Box>
</AccountContainer>
);
};