chore: UserBox

labring · Jan 11, 2025 · 35412de · 35412de
1 parent f046b99
commit 35412de
Show file tree

Hide file tree

Showing 4 changed files with 19 additions and 49 deletions.
diff --git a/packages/web/components/common/UserBox/index.tsx b/packages/web/components/common/UserBox/index.tsx
@@ -1,4 +1,4 @@
-import { Box, HStack } from '@chakra-ui/react';
+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';
@@ -7,22 +7,15 @@ import Tag from '../Tag';
 
 export type UserBoxProps = {
   sourceMember: SourceMemberType;
-  fontSize?: string;
   avatarSize?: string;
-};
-function UserBox({
-  sourceMember,
-  fontSize = 'sm',
-  avatarSize: AvatarWidth = '1.25rem'
-}: UserBoxProps) {
+} & StackProps;
+function UserBox({ sourceMember, avatarSize = '1.25rem', ...props }: UserBoxProps) {
   const { t } = useTranslation();
   return (
-    <HStack>
-      <Avatar src={sourceMember.avatar} w={AvatarWidth} />
-      <Box fontSize={fontSize} ml={1}>
-        {sourceMember.name}
-        {sourceMember.status === 'leave' && <Tag color="gray">{t('account_team:leaved')}</Tag>}
-      </Box>
+    <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>
   );
 }

diff --git a/projects/app/src/pages/app/detail/components/PublishHistoriesSlider.tsx b/projects/app/src/pages/app/detail/components/PublishHistoriesSlider.tsx
@@ -22,6 +22,7 @@ import { useRequest2 } from '@fastgpt/web/hooks/useRequest';
 import { useToast } from '@fastgpt/web/hooks/useToast';
 import type { AppVersionSchemaType, VersionListItemType } from '@fastgpt/global/core/app/version';
 import type { SimpleAppSnapshotType } from './SimpleApp/useSnapshots';
+import UserBox from '@fastgpt/web/components/common/UserBox';
 
 const PublishHistoriesSlider = <T extends SimpleAppSnapshotType | WorkflowSnapshotsType>({
   onClose,
@@ -269,24 +270,9 @@ const TeamCloud = ({
             >
               {() => (
                 <Flex alignItems={'center'} h={'full'} pl={5} gap={3}>
-                  <Box>
-                    <Avatar
-                      src={data.data.sourceMember.avatar}
-                      borderRadius={'50%'}
-                      w={'36px'}
-                      h={'36px'}
-                    />
-                  </Box>
-                  <Box>
-                    <Box fontSize={'14px'} color={'myGray.900'}>
-                      {data.data.sourceMember.name}
-                      {data.data.sourceMember.status === 'leave' && (
-                        <Tag color="gray">{t('account_team:leaved')}</Tag>
-                      )}
-                    </Box>
-                    <Box fontSize={'12px'} color={'myGray.500'}>
-                      {formatTime2YMDHMS(item.time)}
-                    </Box>
+                  <UserBox sourceMember={data.data.sourceMember} avatarSize="36px" fontSize="sm" />
+                  <Box fontSize={'12px'} color={'myGray.500'}>
+                    {formatTime2YMDHMS(item.time)}
                   </Box>
                 </Flex>
               )}

diff --git a/projects/app/src/pages/app/list/components/List.tsx b/projects/app/src/pages/app/list/components/List.tsx
@@ -35,6 +35,7 @@ import { formatTimeToChatTime } from '@fastgpt/global/common/string/time';
 import { useSystem } from '@fastgpt/web/hooks/useSystem';
 import { useChatStore } from '@/web/core/chat/context/useChatStore';
 import { RequireOnlyOne } from '@fastgpt/global/common/type/utils';
+import UserBox from '@fastgpt/web/components/common/UserBox';
 const HttpEditModal = dynamic(() => import('./HttpPluginEditModal'));
 
 const ListItem = () => {
@@ -221,13 +222,7 @@ const ListItem = () => {
                   color={'myGray.500'}
                 >
                   <HStack spacing={3.5}>
-                    <HStack spacing={1}>
-                      <Avatar src={app.sourceMember.avatar} w={'0.875rem'} borderRadius={'50%'} />
-                      <Box maxW={'150px'} className="textEllipsis">
-                        {app.sourceMember.name}
-                      </Box>
-                    </HStack>
-
+                    <UserBox sourceMember={app.sourceMember} fontSize="xs" avatarSize="1.25rem" />
                     <PermissionIconText
                       private={app.private}
                       color={'myGray.500'}

diff --git a/projects/app/src/pages/dataset/list/component/List.tsx b/projects/app/src/pages/dataset/list/component/List.tsx
@@ -31,6 +31,7 @@ import { useTranslation } from 'next-i18next';
 import { useSystem } from '@fastgpt/web/hooks/useSystem';
 import SideTag from './SideTag';
 import { getModelProvider } from '@fastgpt/global/core/ai/provider';
+import UserBox from '@fastgpt/web/components/common/UserBox';
 
 const EditResourceModal = dynamic(() => import('@/components/common/Modal/EditResourceModal'));
 
@@ -258,16 +259,11 @@ function List() {
                     color={'myGray.500'}
                   >
                     <HStack spacing={3.5}>
-                      <HStack spacing={1}>
-                        <Avatar
-                          src={dataset.sourceMember.avatar}
-                          w={'0.875rem'}
-                          borderRadius={'50%'}
-                        />
-                        <Box maxW={'150px'} className="textEllipsis" fontSize={'mini'}>
-                          {dataset.sourceMember.name}
-                        </Box>
-                      </HStack>
+                      <UserBox
+                        sourceMember={dataset.sourceMember}
+                        fontSize="xs"
+                        avatarSize="1.25rem"
+                      />
                       <PermissionIconText
                         flexShrink={0}
                         private={dataset.private}