Skip to content

赵月辉 / fastgpt-migrated

Go to a project
Commit 33d77cf3 by DigHuang Committed by GitHub
Options

refactor(web): upgrade v2 MyModal padding layout and migrate skill workspace modals (#6987) 

* refactor(web): refactor MyModal and migrate its usages

* refactor(app): migrate modals to v2 MyModal with skill dashboard

* refactor(modal): modal spacing; standardize scrollbars

* refactor(modal): clean up custom padding and icon props on MyModal migrations
parent ee440d9a
Showing with 412 additions and 386 deletions
packages/web/components/common/MyModal/EditFolderModal.tsx
...@@ -68,31 +68,37 @@ const EditFolderModal = ({ ...@@ -68,31 +68,37 @@ const EditFolderModal = ({
<MyModal <MyModal
isOpen isOpen
onClose={onClose} onClose={onClose}
iconSrc="common/folderFill"
title={typeMap.title} title={typeMap.title}
size={'md'} size={'md'}
contentPx={'32px'} isCentered
contentPy={'32px'}
borderRadius={'10px'} borderRadius={'10px'}
closeOnOverlayClick={false} closeOnOverlayClick={false}
footer={
<>
<Button variant={'whiteBase'} onClick={onClose}>
{t('common:Cancel')}
</Button>
<Button isLoading={loading} onClick={handleSubmit(onSave)}>
{t('common:Confirm')}
</Button>
</>
}
> >
<Flex flexDirection={'column'} gap={6}> <Flex flexDirection={'column'} gap={6}>
<Box> <Box>
<FormLabel mb={2}>{t('common:input_name')}</FormLabel> <FormLabel mb={2}>{t('common:input_name')}</FormLabel>
<Input {...register('name', { required: true })} autoFocus maxLength={100} /> <Input {...register('name', { required: true })} size={'sm'} autoFocus maxLength={100} />
</Box> </Box>
<Box> <Box>
<FormLabel mb={2}>{t('common:folder_description')}</FormLabel> <FormLabel mb={2}>{t('common:folder_description')}</FormLabel>
<Textarea {...register('intro')} h={'100px'} minH={'100px'} maxLength={200} /> <Textarea
{...register('intro')}
h={'100px'}
minH={'100px'}
maxLength={200}
resize={'vertical'}
/>
</Box> </Box>
<Flex justifyContent={'flex-end'} gap={3}>
<Button variant={'whiteBase'} onClick={onClose}>
{t('common:Cancel')}
</Button>
<Button isLoading={loading} onClick={handleSubmit(onSave)}>
{t('common:Confirm')}
</Button>
</Flex>
</Flex> </Flex>
</MyModal> </MyModal>
); );
......
packages/web/components/v2/common/MyModal/index.tsx
import React, { useMemo } from 'react'; import React from 'react';
import { import {
Modal, Modal,
ModalOverlay, ModalOverlay,
...@@ -6,20 +6,15 @@ import { ...@@ -6,20 +6,15 @@ import {
ModalCloseButton, ModalCloseButton,
type ModalContentProps, type ModalContentProps,
Box, Box,
type ImageProps, Flex,
Flex type FlexProps,
type BoxProps
} from '@chakra-ui/react'; } from '@chakra-ui/react';
import MyBox from '../../../common/MyBox'; import MyBox from '../../../common/MyBox';
import { useSystem } from '../../../../hooks/useSystem'; import { useSystem } from '../../../../hooks/useSystem';
import Avatar from '../../../common/Avatar';
export interface MyModalProps extends ModalContentProps { export interface MyModalProps extends ModalContentProps {
iconSrc?: string;
iconColor?: ImageProps['color'];
title?: any; title?: any;
contentPx?: ModalContentProps['px'];
contentPy?: ModalContentProps['py'];
headerPx?: ModalContentProps['px'];
isCentered?: boolean; isCentered?: boolean;
isLoading?: boolean; isLoading?: boolean;
isOpen?: boolean; isOpen?: boolean;
...@@ -27,41 +22,43 @@ export interface MyModalProps extends ModalContentProps { ...@@ -27,41 +22,43 @@ export interface MyModalProps extends ModalContentProps {
closeOnOverlayClick?: boolean; closeOnOverlayClick?: boolean;
size?: 'sm' | 'md' | 'lg'; size?: 'sm' | 'md' | 'lg';
showCloseButton?: boolean; showCloseButton?: boolean;
footer?: React.ReactNode;
headerStyles?: FlexProps;
bodyStyles?: BoxProps;
footerStyles?: FlexProps;
} }
const sizeMap = {
sm: {
w: '400px'
},
md: {
w: '560px'
},
lg: {
w: '800px'
}
};
const MyModal = ({ const MyModal = ({
isOpen = true, isOpen = true,
onClose, onClose,
iconSrc,
title, title,
children, children,
isCentered, isCentered,
isLoading, isLoading,
closeOnOverlayClick = true, closeOnOverlayClick = true,
iconColor,
size = 'sm', size = 'sm',
showCloseButton = true, showCloseButton = true,
contentPx = '8', headerStyles,
contentPy = '8', bodyStyles,
headerPx = 0, footerStyles,
footer,
...props ...props
}: MyModalProps) => { }: MyModalProps) => {
const { isPc } = useSystem(); const { isPc } = useSystem();
const sizeData = useMemo(() => { const sizeData = sizeMap[size] || sizeMap.sm;
const map = {
sm: {
w: '400px'
},
md: {
w: '560px'
},
lg: {
w: '800px'
}
};
return map[size];
}, [size]);
return ( return (
<Modal <Modal
...@@ -83,41 +80,39 @@ const MyModal = ({ ...@@ -83,41 +80,39 @@ const MyModal = ({
position={'relative'} position={'relative'}
maxH={'80vh'} maxH={'80vh'}
boxShadow={'3.5'} boxShadow={'3.5'}
px={contentPx} px={0}
py={contentPy} py={0}
display={'flex'}
flexDirection={'column'}
containerProps={{ containerProps={{
zIndex: props.zIndex zIndex: props.zIndex
}} }}
{...props} {...props}
> >
{onClose && <ModalCloseButton position={'absolute'} fontSize={'xs'} top={3} right={3} />} {onClose && showCloseButton && (
<ModalCloseButton position={'absolute'} fontSize={'xs'} top={3} right={3} />
)}
{!!title && ( {!!title && (
<Flex <Flex
alignItems={'center'} alignItems={'center'}
fontSize={'lg'} fontSize={'lg'}
fontWeight={'500'} fontWeight={'500'}
mb={6} px={8}
py={0} pt={8}
px={headerPx} pb={0}
gap={3} gap={3}
{...headerStyles}
> >
{iconSrc && ( <Box
<> color="black"
<Avatar fontWeight={'500'}
color={iconColor} fontSize={'20px'}
objectFit={'contain'} lineHeight={'26px'}
alt="" letterSpacing={'0.15px'}
src={iconSrc} >
w={'20px'}
borderRadius={'sm'}
/>
</>
)}
<Box color="black" fontWeight={'500'}>
{title} {title}
</Box> </Box>
<Box flex={1} />
</Flex> </Flex>
)} )}
...@@ -127,9 +122,33 @@ const MyModal = ({ ...@@ -127,9 +122,33 @@ const MyModal = ({
h={'100%'} h={'100%'}
display={'flex'} display={'flex'}
flexDirection={'column'} flexDirection={'column'}
px={8}
pt={title ? 6 : 8}
pb={footer ? 6 : 8}
fontSize={'14px'}
lineHeight={'20px'}
letterSpacing={'0.25px'}
color={'myGray.900'}
{...bodyStyles}
> >
{children} {children}
</MyBox> </MyBox>
{!!footer && (
<Flex
justifyContent={'flex-end'}
gap={3}
px={8}
pb={8}
pt={0}
fontSize={'12px'}
lineHeight={'16px'}
letterSpacing={'0.5px'}
{...footerStyles}
>
{footer}
</Flex>
)}
</ModalContent> </ModalContent>
</Modal> </Modal>
); );
......
packages/web/hooks/useConfirm.tsx
...@@ -169,15 +169,7 @@ export const useConfirm = (props?: { ...@@ -169,15 +169,7 @@ export const useConfirm = (props?: {
const finalVariant = customConfirmButtonVariant || map.variant; const finalVariant = customConfirmButtonVariant || map.variant;
return ( return (
<MyModal <MyModal isOpen={isOpen} onClose={handleClose} isCentered size={'sm'} borderRadius={'10px'}>
isOpen={isOpen}
onClose={handleClose}
isCentered
size={'sm'}
contentPx={'32px'}
contentPy={'32px'}
borderRadius={'10px'}
>
<Flex direction={'column'} gap={'24px'}> <Flex direction={'column'} gap={'24px'}>
<HStack spacing={'12px'} align={'center'}> <HStack spacing={'12px'} align={'center'}>
<Flex <Flex
......
projects/app/src/components/common/Modal/EditResourceModal.tsx
import React, { useCallback } from 'react'; import React, { useCallback } from 'react';
import { ModalFooter, ModalBody, Input, Button, Box, Textarea, HStack } from '@chakra-ui/react'; import { Input, Button, Box, Textarea, Flex } from '@chakra-ui/react';
import MyModal from '@fastgpt/web/components/common/MyModal/index'; import MyModal from '@fastgpt/web/components/v2/common/MyModal';
import { useTranslation } from 'next-i18next'; import { useTranslation } from 'next-i18next';
import { useRequest } from '@fastgpt/web/hooks/useRequest'; import { useRequest } from '@fastgpt/web/hooks/useRequest';
import FormLabel from '@fastgpt/web/components/common/MyBox/FormLabel'; import FormLabel from '@fastgpt/web/components/common/MyBox/FormLabel';
...@@ -36,7 +36,7 @@ const EditResourceModal = ({ ...@@ -36,7 +36,7 @@ const EditResourceModal = ({
const { runAsync: onSave, loading } = useRequest( const { runAsync: onSave, loading } = useRequest(
(data: EditResourceInfoFormType) => onEdit(data), (data: EditResourceInfoFormType) => onEdit(data),
{ {
onSuccess: (res) => { onSuccess: () => {
onClose(); onClose();
} }
} }
...@@ -52,40 +52,68 @@ const EditResourceModal = ({ ...@@ -52,40 +52,68 @@ const EditResourceModal = ({
useUploadAvatar(getUploadAvatarPresignedUrl, { onSuccess: afterUploadAvatar }); useUploadAvatar(getUploadAvatarPresignedUrl, { onSuccess: afterUploadAvatar });
return ( return (
<MyModal isOpen onClose={onClose} iconSrc={avatar} title={title}> <MyModal
<ModalBody> isOpen
onClose={onClose}
title={title}
size={'sm'}
isCentered
closeOnOverlayClick={false}
footer={
<>
<Button variant={'whiteBase'} onClick={onClose}>
{t('common:Cancel')}
</Button>
<Button isLoading={loading} onClick={handleSubmit(onSave)}>
{t('common:Confirm')}
</Button>
</>
}
>
<Flex flexDirection={'column'} gap={6}>
{/* 图标 & 名称 */}
<Box> <Box>
<FormLabel mb={1}>{t('common:core.app.Name and avatar')}</FormLabel> <FormLabel mb={2}>{t('common:core.app.Name and avatar')}</FormLabel>
<HStack spacing={4}> <Flex alignItems={'center'}>
<MyTooltip label={t('common:set_avatar')}> <MyTooltip label={t('common:set_avatar')}>
<Avatar <Flex
flex={'0 0 2rem'} borderRadius={'6px'}
src={avatar} w={'34px'}
w={'2rem'} h={'34px'}
h={'2rem'} border={'1px solid'}
borderColor={'myGray.200'}
justifyContent={'center'}
alignItems={'center'}
mr={3}
p={'4px'}
cursor={'pointer'} cursor={'pointer'}
borderRadius={'sm'}
onClick={handleAvatarSelectorOpen} onClick={handleAvatarSelectorOpen}
/> >
<Avatar src={avatar} w={'24px'} borderRadius={'6px'} />
</Flex>
</MyTooltip> </MyTooltip>
<Input <Input
flex={1}
size={'sm'}
{...register('name', { required: true })} {...register('name', { required: true })}
bg={'myGray.50'}
autoFocus autoFocus
maxLength={100} maxLength={100}
/> />
</HStack> </Flex>
</Box> </Box>
<Box mt={4}>
<FormLabel mb={1}>{t('common:Intro')}</FormLabel> {/* 介绍 */}
<Textarea {...register('intro')} bg={'myGray.50'} maxLength={200} /> <Box>
<FormLabel mb={2}>{t('common:Intro')}</FormLabel>
<Textarea
{...register('intro')}
h={'90px'}
minH={'90px'}
maxLength={200}
resize={'vertical'}
/>
</Box> </Box>
</ModalBody> </Flex>
<ModalFooter>
<Button isLoading={loading} onClick={handleSubmit(onSave)} px={6}>
{t('common:Confirm')}
</Button>
</ModalFooter>
<AvatarUploader /> <AvatarUploader />
</MyModal> </MyModal>
......
projects/app/src/components/common/Modal/SaveAndPublishModal.tsx
import { Box, Button, Input, ModalBody, ModalFooter } from '@chakra-ui/react'; import { Box, Button, Input, Flex } from '@chakra-ui/react';
import { formatTime2YMDHMS } from '@fastgpt/global/common/string/time'; import { formatTime2YMDHMS } from '@fastgpt/global/common/string/time';
import MyModal from '@fastgpt/web/components/common/MyModal'; import MyModal from '@fastgpt/web/components/v2/common/MyModal';
import { useForm } from 'react-hook-form'; import { useForm } from 'react-hook-form';
import { useTranslation } from 'next-i18next'; import { useTranslation } from 'next-i18next';
import FormLabel from '@fastgpt/web/components/common/MyBox/FormLabel';
type FormType = { type FormType = {
versionName: string; versionName: string;
...@@ -29,40 +30,41 @@ const SaveAndPublishModal = ({ ...@@ -29,40 +30,41 @@ const SaveAndPublishModal = ({
return ( return (
<MyModal <MyModal
title={title || t('common:core.workflow.Save and publish')} title={title || t('common:core.workflow.Save and publish')}
iconSrc={'core/workflow/publish'}
maxW={'400px'}
isOpen isOpen
onClose={onClose} onClose={onClose}
isCentered
footer={
<>
<Button onClick={onClose} variant={'whiteBase'}>
{t('common:Cancel')}
</Button>
<Button
isLoading={isLoading}
onClick={handleSubmit(async (data) => {
await onConfirm(data.versionName);
})}
>
{t('common:Confirm')}
</Button>
</>
}
> >
<ModalBody> <Flex flexDirection={'column'} gap={6}>
<Box mb={2.5} color={'myGray.900'} fontSize={'14px'} fontWeight={'500'}> <Box>
{t('common:Name')} <FormLabel mb={2}>{t('common:Name')}</FormLabel>
</Box>
<Box mb={3}>
<Input <Input
size={'sm'}
autoFocus autoFocus
placeholder={t('app:app.Version name')} placeholder={t('app:app.Version name')}
bg={'myWhite.600'}
{...register('versionName', { {...register('versionName', {
required: t('app:app.version_name_tips') required: t('app:app.version_name_tips')
})} })}
/> />
</Box> </Box>
<Box fontSize={'14px'}>{t('app:app.version_publish_tips')}</Box> <Box fontSize={'12px'} color={'myGray.500'} mt={-2}>
</ModalBody> {t('app:app.version_publish_tips')}
<ModalFooter gap={3}> </Box>
<Button onClick={onClose} variant={'whiteBase'}> </Flex>
{t('common:Cancel')}
</Button>
<Button
isLoading={isLoading}
onClick={handleSubmit(async (data) => {
await onConfirm(data.versionName);
})}
>
{t('common:Confirm')}
</Button>
</ModalFooter>
</MyModal> </MyModal>
); );
}; };
......
projects/app/src/components/common/folder/MoveModal.tsx
import React, { useState } from 'react'; import React, { useState } from 'react';
import MyModal from '@fastgpt/web/components/common/MyModal'; import MyModal from '@fastgpt/web/components/v2/common/MyModal';
import { useTranslation } from 'next-i18next'; import { useTranslation } from 'next-i18next';
import { Box, Button, Flex, ModalBody, ModalFooter } from '@chakra-ui/react'; import { Box, Button, Flex } from '@chakra-ui/react';
import { import {
type GetResourceFolderListProps, type GetResourceFolderListProps,
type GetResourceFolderListItemResponse, type GetResourceFolderListItemResponse,
...@@ -165,25 +165,41 @@ const MoveModal = ({ moveResourceId, title, server, onConfirm, onClose, moveHint ...@@ -165,25 +165,41 @@ const MoveModal = ({ moveResourceId, title, server, onConfirm, onClose, moveHint
return ( return (
<MyModal <MyModal
isLoading={folderList.length === 0} isLoading={folderList.length === 0}
iconSrc="/imgs/modal/move.svg"
isOpen isOpen
w={'30rem'} size={'md'}
title={title} title={title}
onClose={onClose} onClose={onClose}
isCentered
bodyStyles={{
flex: '1 0 0',
minH: '400px'
}}
footer={
<>
<Button variant={'whiteBase'} onClick={onClose}>
{t('common:Cancel')}
</Button>
<Button isLoading={confirming} isDisabled={!selectedId} onClick={onConfirmSelect}>
{t('common:Confirm')}
</Button>
</>
}
> >
<ModalBody flex={'1 0 0'} overflow={'auto'} minH={'400px'}> {moveHint && (
{moveHint && ( <Box mb={3}>
<Box mb={1}> <LightTip text={moveHint} />
<LightTip text={moveHint} /> </Box>
</Box> )}
)} <Box
border={'1px solid'}
borderColor={'myGray.200'}
borderRadius={'md'}
p={3}
flex={'1 0 0'}
overflowY={'auto'}
>
<RenderList list={folderList} /> <RenderList list={folderList} />
</ModalBody> </Box>
<ModalFooter>
<Button isLoading={confirming} isDisabled={!selectedId} onClick={onConfirmSelect}>
{t('common:Confirm')}
</Button>
</ModalFooter>
</MyModal> </MyModal>
); );
}; };
......
projects/app/src/components/core/ai/requestId/index.tsx
...@@ -58,12 +58,12 @@ export const RequestIdDetailModal = ({ onClose, requestId }: RequestIdDetailModa ...@@ -58,12 +58,12 @@ export const RequestIdDetailModal = ({ onClose, requestId }: RequestIdDetailModa
maxW={['90vw', '1080px']} maxW={['90vw', '1080px']}
h={['90vh', '80vh']} h={['90vh', '80vh']}
maxH={['90vh', '700px']} maxH={['90vh', '700px']}
px={0}
py={8} py={8}
headerPx={'32px'} headerStyles={{ px: '32px' }}
bodyStyles={{ px: '32px' }}
> >
{record && ( {record && (
<Flex height={'100%'} mx={'32px'} gap={4}> <Flex height={'100%'} gap={4}>
<Flex flex={1} flexDirection={'column'} gap={2} minW={0}> <Flex flex={1} flexDirection={'column'} gap={2} minW={0}>
<Box <Box
fontSize={'12px'} fontSize={'12px'}
......
projects/app/src/components/core/chat/components/WholeResponseModal/index.tsx
...@@ -31,9 +31,9 @@ const WholeResponseModal = ({ onClose, dataId }: { onClose: () => void; dataId: ...@@ -31,9 +31,9 @@ const WholeResponseModal = ({ onClose, dataId }: { onClose: () => void; dataId:
maxW={['90vw', '880px']} maxW={['90vw', '880px']}
h={['90vh', '80vh']} h={['90vh', '80vh']}
maxH={['90vh', '700px']} maxH={['90vh', '700px']}
px={0}
py={8} py={8}
headerPx={'32px'} headerStyles={{ px: '32px' }}
bodyStyles={{ px: 0 }}
title={ title={
<Flex alignItems={'center'} gap={2}> <Flex alignItems={'center'} gap={2}>
<Box fontSize={'20px'} lineHeight={'26px'} letterSpacing={'0.15px'} fontWeight={500}> <Box fontSize={'20px'} lineHeight={'26px'} letterSpacing={'0.15px'} fontWeight={500}>
......
projects/app/src/components/support/permission/ChangeOwnerModal/index.tsx
import { GetSearchUserGroupOrg } from '@/web/support/user/api'; import { GetSearchUserGroupOrg } from '@/web/support/user/api';
import { getTeamMembers } from '@/web/support/user/team/api'; import { getTeamMembers } from '@/web/support/user/team/api';
import { import { Box, Flex, HStack, Input, Button, useDisclosure } from '@chakra-ui/react';
Box,
Flex,
HStack,
Input,
ModalBody,
ModalFooter,
Button,
useDisclosure
} from '@chakra-ui/react';
import { type TeamMemberItemType } from '@fastgpt/global/support/user/team/type'; import { type TeamMemberItemType } from '@fastgpt/global/support/user/team/type';
import Avatar from '@fastgpt/web/components/common/Avatar'; import Avatar from '@fastgpt/web/components/common/Avatar';
import Icon from '@fastgpt/web/components/common/Icon'; import Icon from '@fastgpt/web/components/common/Icon';
import MyModal from '@fastgpt/web/components/common/MyModal'; import MyModal from '@fastgpt/web/components/v2/common/MyModal';
import MyTag from '@fastgpt/web/components/common/Tag'; import MyTag from '@fastgpt/web/components/common/Tag';
import { useRequest } from '@fastgpt/web/hooks/useRequest'; import { useRequest } from '@fastgpt/web/hooks/useRequest';
import { useScrollPagination } from '@fastgpt/web/hooks/useScrollPagination'; import { useScrollPagination } from '@fastgpt/web/hooks/useScrollPagination';
...@@ -79,98 +70,97 @@ export function ChangeOwnerModal({ ...@@ -79,98 +70,97 @@ export function ChangeOwnerModal({
return ( return (
<MyModal <MyModal
isOpen isOpen
iconSrc="modal/changePer"
iconColor="primary.600"
onClose={onClose} onClose={onClose}
title={t('common:permission.change_owner')} title={t('common:permission.change_owner')}
isLoading={loading} isLoading={loading}
> isCentered
<ModalBody> footer={
<HStack> <HStack spacing={3}>
<Avatar src={avatar} w={'1.75rem'} borderRadius={'md'} />
<Box>{name}</Box>
</HStack>
<Flex mt={4} justify="start" flexDirection="column">
<Box fontSize="14px" fontWeight="500">
{t('common:permission.change_owner_to')}
</Box>
<Flex mt="4" alignItems="center" position={'relative'}>
{selectedMember && (
<Avatar
src={selectedMember.avatar}
w={'20px'}
borderRadius={'md'}
position="absolute"
left={3}
/>
)}
<Input
placeholder={t('common:permission.change_owner_placeholder')}
value={inputValue}
onChange={(e) => {
setInputValue(e.target.value);
setSelectedMember(null);
}}
onFocus={() => {
onOpenMemberListMenu();
setSelectedMember(null);
}}
{...(selectedMember && { pl: '10' })}
/>
</Flex>
{isOpenMemberListMenu && memberList.length > 0 && (
<Flex
mt={2}
w={'100%'}
flexDirection={'column'}
gap={2}
p={1}
boxShadow="lg"
bg="white"
borderRadius="md"
zIndex={10}
maxH={'300px'}
overflow={'auto'}
>
<ScrollData>
{memberList.map((item) => (
<Box
key={item.tmbId}
p="2"
_hover={{ bg: 'myGray.100' }}
mx="1"
borderRadius="md"
cursor={'pointer'}
onClickCapture={() => {
setInputValue(item.memberName);
setSelectedMember(item);
onCloseMemberListMenu();
}}
>
<Flex align="center">
<Avatar src={item.avatar} w="1.25rem" />
<Box ml="2">{item.memberName}</Box>
</Flex>
</Box>
))}
</ScrollData>
</Flex>
)}
<MyTag mt="4" colorSchema="blue">
<Icon name="common/info" w="1rem" />
<Box ml="2">{t('common:permission.change_owner_tip')}</Box>
</MyTag>
</Flex>
</ModalBody>
<ModalFooter>
<HStack>
<Button onClick={onClose} variant={'whiteBase'}> <Button onClick={onClose} variant={'whiteBase'}>
{t('common:Cancel')} {t('common:Cancel')}
</Button> </Button>
<Button onClick={onConfirm}>{t('common:Confirm')}</Button> <Button onClick={onConfirm} isDisabled={!selectedMember}>
{t('common:Confirm')}
</Button>
</HStack> </HStack>
</ModalFooter> }
>
<HStack>
<Avatar src={avatar} w={'1.75rem'} borderRadius={'md'} />
<Box>{name}</Box>
</HStack>
<Flex mt={4} justify="start" flexDirection="column">
<Box fontSize="14px" fontWeight="500">
{t('common:permission.change_owner_to')}
</Box>
<Flex mt="4" alignItems="center" position={'relative'}>
{selectedMember && (
<Avatar
src={selectedMember.avatar}
w={'20px'}
borderRadius={'md'}
position="absolute"
left={3}
/>
)}
<Input
placeholder={t('common:permission.change_owner_placeholder')}
value={inputValue}
onChange={(e) => {
setInputValue(e.target.value);
setSelectedMember(null);
}}
onFocus={() => {
onOpenMemberListMenu();
setSelectedMember(null);
}}
{...(selectedMember && { pl: '10' })}
/>
</Flex>
{isOpenMemberListMenu && memberList.length > 0 && (
<Flex
mt={2}
w={'100%'}
flexDirection={'column'}
gap={2}
p={1}
boxShadow="lg"
bg="white"
borderRadius="md"
zIndex={10}
maxH={'300px'}
overflow={'auto'}
>
<ScrollData>
{memberList.map((item) => (
<Box
key={item.tmbId}
p="2"
_hover={{ bg: 'myGray.100' }}
mx="1"
borderRadius="md"
cursor={'pointer'}
onClickCapture={() => {
setInputValue(item.memberName);
setSelectedMember(item);
onCloseMemberListMenu();
}}
>
<Flex align="center">
<Avatar src={item.avatar} w="1.25rem" />
<Box ml="2">{item.memberName}</Box>
</Flex>
</Box>
))}
</ScrollData>
</Flex>
)}
<MyTag mt="4" colorSchema="blue">
<Icon name="common/info" w="1rem" />
<Box ml="2">{t('common:permission.change_owner_tip')}</Box>
</MyTag>
</Flex>
</MyModal> </MyModal>
); );
} }
......
projects/app/src/components/support/permission/ConfigPerModal/index.tsx
import React from 'react'; import React from 'react';
import MyModal from '@fastgpt/web/components/common/MyModal'; import MyModal from '@fastgpt/web/components/v2/common/MyModal';
import { useTranslation } from 'next-i18next'; import { useTranslation } from 'next-i18next';
import CollaboratorContextProvider, { import CollaboratorContextProvider, {
type MemberManagerInputPropsType type MemberManagerInputPropsType
} from '../MemberManager/context'; } from '../MemberManager/context';
import { Box, Button, Flex, HStack, ModalBody, useDisclosure } from '@chakra-ui/react'; import { Box, Button, Flex, HStack, useDisclosure } from '@chakra-ui/react';
import Avatar from '@fastgpt/web/components/common/Avatar'; import Avatar from '@fastgpt/web/components/common/Avatar';
import MyIcon from '@fastgpt/web/components/common/Icon'; import MyIcon from '@fastgpt/web/components/common/Icon';
import ResumeInherit from '../ResumeInheritText'; import ResumeInherit from '../ResumeInheritText';
...@@ -44,69 +44,62 @@ const ConfigPerModal = ({ ...@@ -44,69 +44,62 @@ const ConfigPerModal = ({
return ( return (
<> <>
<MyModal <MyModal isOpen onClose={onClose} title={t('common:permission.Permission config')} isCentered>
isOpen <HStack>
iconSrc="keyPrimary" <Avatar src={avatar} w={'1.75rem'} borderRadius={'md'} />
onClose={onClose} <Box>{name}</Box>
title={t('common:permission.Permission config')} </HStack>
> {!isInheritPermission && (
<ModalBody> <Box mt={3}>
<HStack> <ResumeInherit onResume={resumeInheritPermission} />
<Avatar src={avatar} w={'1.75rem'} borderRadius={'md'} /> </Box>
<Box>{name}</Box> )}
</HStack> <Box mt={4}>
{!isInheritPermission && ( <CollaboratorContextProvider
<Box mt={3}> {...managePer}
<ResumeInherit onResume={resumeInheritPermission} /> refetchResource={refetchResource}
</Box> isInheritPermission={isInheritPermission}
)} hasParent={hasParent}
>
{({ MemberListCard, onOpenManageModal }) => {
return (
<>
<Flex
alignItems="center"
flexDirection="row"
justifyContent="space-between"
w="full"
>
<Box fontSize={'sm'}>{t('common:permission.Collaborator')}</Box>
<Button
size="sm"
variant="whitePrimary"
leftIcon={<MyIcon w="4" name="common/settingLight" />}
onClick={onOpenManageModal}
>
{t('common:permission.Manage')}
</Button>
</Flex>
<MemberListCard mt={2} p={1.5} bg="myGray.100" borderRadius="md" />
</>
);
}}
</CollaboratorContextProvider>
</Box>
{onChangeOwner && (
<Box mt={4}> <Box mt={4}>
<CollaboratorContextProvider <Button
{...managePer} size="md"
refetchResource={refetchResource} variant="whitePrimary"
isInheritPermission={isInheritPermission} onClick={onOpenChangeOwnerModal}
hasParent={hasParent} w="full"
borderRadius="md"
leftIcon={<MyIcon w="4" name="common/lineChange" />}
> >
{({ MemberListCard, onOpenManageModal }) => { {t('common:permission.change_owner')}
return ( </Button>
<>
<Flex
alignItems="center"
flexDirection="row"
justifyContent="space-between"
w="full"
>
<Box fontSize={'sm'}>{t('common:permission.Collaborator')}</Box>
<Button
size="sm"
variant="whitePrimary"
leftIcon={<MyIcon w="4" name="common/settingLight" />}
onClick={onOpenManageModal}
>
{t('common:permission.Manage')}
</Button>
</Flex>
<MemberListCard mt={2} p={1.5} bg="myGray.100" borderRadius="md" />
</>
);
}}
</CollaboratorContextProvider>
</Box> </Box>
{onChangeOwner && ( )}
<Box mt={4}>
<Button
size="md"
variant="whitePrimary"
onClick={onOpenChangeOwnerModal}
w="full"
borderRadius="md"
leftIcon={<MyIcon w="4" name="common/lineChange" />}
>
{t('common:permission.change_owner')}
</Button>
</Box>
)}
</ModalBody>
</MyModal> </MyModal>
{isChangeOwnerModalOpen && onChangeOwner && ( {isChangeOwnerModalOpen && onChangeOwner && (
<ChangeOwnerModal <ChangeOwnerModal
......
projects/app/src/pageComponents/dashboard/skill/CreateSkillModal.tsx
...@@ -84,10 +84,19 @@ const CreateSkillModal = ({ parentId, onClose }: Props) => { ...@@ -84,10 +84,19 @@ const CreateSkillModal = ({ parentId, onClose }: Props) => {
onClose={onClose} onClose={onClose}
title={t('skill:create_skill')} title={t('skill:create_skill')}
size={'md'} size={'md'}
contentPx={'32px'} isCentered
contentPy={'32px'}
borderRadius={'10px'} borderRadius={'10px'}
closeOnOverlayClick={false} closeOnOverlayClick={false}
footer={
<>
<Button variant={'whiteBase'} onClick={onClose}>
{t('common:Cancel')}
</Button>
<Button isLoading={isCreating} onClick={handleSubmit((data) => onCreate(data))}>
{t('common:Confirm')}
</Button>
</>
}
> >
<Flex flexDirection={'column'} gap={6}> <Flex flexDirection={'column'} gap={6}>
{/* 图标 & 名称 */} {/* 图标 & 名称 */}
...@@ -182,15 +191,6 @@ const CreateSkillModal = ({ parentId, onClose }: Props) => { ...@@ -182,15 +191,6 @@ const CreateSkillModal = ({ parentId, onClose }: Props) => {
/> />
</Box> </Box>
</Flex> </Flex>
<Flex justifyContent={'flex-end'} gap={3} mt={6}>
<Button variant={'whiteBase'} onClick={onClose}>
{t('common:Cancel')}
</Button>
<Button isLoading={isCreating} onClick={handleSubmit((data) => onCreate(data))}>
{t('common:Confirm')}
</Button>
</Flex>
</MyModal> </MyModal>
<AvatarUploader /> <AvatarUploader />
</> </>
......
projects/app/src/pageComponents/dashboard/skill/ImportSkillModal.tsx
...@@ -14,6 +14,7 @@ import { useSystemStore } from '@/web/common/system/useSystemStore'; ...@@ -14,6 +14,7 @@ import { useSystemStore } from '@/web/common/system/useSystemStore';
import { useUploadAvatar } from '@fastgpt/web/common/file/hooks/useUploadAvatar'; import { useUploadAvatar } from '@fastgpt/web/common/file/hooks/useUploadAvatar';
import { getUploadAvatarPresignedUrl } from '@/web/common/file/api'; import { getUploadAvatarPresignedUrl } from '@/web/common/file/api';
import { type FieldErrors, useForm } from 'react-hook-form'; import { type FieldErrors, useForm } from 'react-hook-form';
import FormLabel from '@fastgpt/web/components/common/MyBox/FormLabel';
const ACCEPT_TYPES = '.zip,.tar,.tar.gz'; const ACCEPT_TYPES = '.zip,.tar,.tar.gz';
const DEFAULT_SKILL_AVATAR = 'core/skill/default'; const DEFAULT_SKILL_AVATAR = 'core/skill/default';
...@@ -166,32 +167,45 @@ const ImportSkillModal = ({ parentId, onClose, onSuccess }: Props) => { ...@@ -166,32 +167,45 @@ const ImportSkillModal = ({ parentId, onClose, onSuccess }: Props) => {
isOpen isOpen
onClose={onClose} onClose={onClose}
title={t('skill:import_skill')} title={t('skill:import_skill')}
iconSrc="common/importLight"
iconColor={'primary.600'}
size={'md'} size={'md'}
contentPx={'32px'} isCentered
contentPy={'32px'}
borderRadius={'10px'} borderRadius={'10px'}
closeOnOverlayClick={false} closeOnOverlayClick={false}
footer={
<>
<Button variant={'whiteBase'} onClick={onClose}>
{t('common:Cancel')}
</Button>
<Button isLoading={isImporting} onClick={handleSubmit(handleImport, handleInvalid)}>
{t('common:Confirm')}
</Button>
</>
}
> >
<Flex flexDirection={'column'} gap={6}> <Flex flexDirection={'column'} gap={6}>
<Box color={'myGray.800'} fontWeight={'bold'}> <Box>
{t('common:input_name')} <FormLabel mb={2}>{t('common:input_name')}</FormLabel>
<Flex mt={2} alignItems={'center'}> <Flex alignItems={'center'}>
<MyTooltip label={t('common:set_avatar')}> <MyTooltip label={t('common:set_avatar')}>
<Avatar <Flex
flexShrink={0} borderRadius={'6px'}
src={avatar} w={'34px'}
w={['1.75rem', '2.25rem']} h={'34px'}
h={['1.75rem', '2.25rem']} border={'1px solid'}
borderColor={'myGray.200'}
justifyContent={'center'}
alignItems={'center'}
mr={3}
p={'4px'}
cursor={'pointer'} cursor={'pointer'}
borderRadius={'md'}
onClick={handleAvatarSelectorOpen} onClick={handleAvatarSelectorOpen}
/> >
<Avatar src={avatar} w={'24px'} borderRadius={'6px'} />
</Flex>
</MyTooltip> </MyTooltip>
<Input <Input
flex={1} flex={1}
ml={3} size={'sm'}
autoFocus autoFocus
placeholder={t('skill:skill_name_placeholder')} placeholder={t('skill:skill_name_placeholder')}
{...register('name', { {...register('name', {
...@@ -272,14 +286,6 @@ const ImportSkillModal = ({ parentId, onClose, onSuccess }: Props) => { ...@@ -272,14 +286,6 @@ const ImportSkillModal = ({ parentId, onClose, onSuccess }: Props) => {
</Flex> </Flex>
)} )}
<FileInput onSelect={(files) => files[0] && handleFile(files[0])} /> <FileInput onSelect={(files) => files[0] && handleFile(files[0])} />
<Flex justifyContent={'flex-end'} gap={3}>
<Button variant={'whiteBase'} onClick={onClose}>
{t('common:Cancel')}
</Button>
<Button isLoading={isImporting} onClick={handleSubmit(handleImport, handleInvalid)}>
{t('common:Confirm')}
</Button>
</Flex>
</Flex> </Flex>
</MyModal> </MyModal>
<AvatarUploader /> <AvatarUploader />
......
projects/app/src/pageComponents/dataset/detail/components/InputDataModal/index.tsx
...@@ -2,7 +2,6 @@ import React from 'react'; ...@@ -2,7 +2,6 @@ import React from 'react';
import { Box, Flex } from '@chakra-ui/react'; import { Box, Flex } from '@chakra-ui/react';
import { useTranslation } from 'next-i18next'; import { useTranslation } from 'next-i18next';
import MyModal from '@fastgpt/web/components/v2/common/MyModal'; import MyModal from '@fastgpt/web/components/v2/common/MyModal';
import MyBox from '@fastgpt/web/components/common/MyBox';
import DataInputPanel from './DataInputPanel'; import DataInputPanel from './DataInputPanel';
import IndexInputPanel from './IndexInputPanel'; import IndexInputPanel from './IndexInputPanel';
import { TabEnum, useInputDataModal, type InputDataType } from './useInputDataModal'; import { TabEnum, useInputDataModal, type InputDataType } from './useInputDataModal';
...@@ -67,9 +66,9 @@ const InputDataModal = ({ ...@@ -67,9 +66,9 @@ const InputDataModal = ({
borderRadius={'10px'} borderRadius={'10px'}
bg={'white'} bg={'white'}
boxShadow={'3.5'} boxShadow={'3.5'}
contentPx={[5, '32px']} px={[5, '32px']}
contentPy={[5, '32px']} py={[5, '32px']}
headerPx={0} headerStyles={{ px: 0 }}
title={ title={
<Box <Box
className={'textEllipsis'} className={'textEllipsis'}
...@@ -87,12 +86,13 @@ const InputDataModal = ({ ...@@ -87,12 +86,13 @@ const InputDataModal = ({
{collection.sourceName || t('common:unknow_source')} {collection.sourceName || t('common:unknow_source')}
</Box> </Box>
} }
isLoading={initLoading}
overflow={'hidden'}
> >
<MyBox <Box
display={'flex'} display={'flex'}
flexDir={'column'} flexDir={'column'}
isLoading={initLoading} flex={'1 0 0'}
h={'100%'}
minH={['300px', showTabs ? '506px' : '450px']} minH={['300px', showTabs ? '506px' : '450px']}
overflow={'hidden'} overflow={'hidden'}
> >
...@@ -179,7 +179,7 @@ const InputDataModal = ({ ...@@ -179,7 +179,7 @@ const InputDataModal = ({
</Flex> </Flex>
</Flex> </Flex>
)} )}
</MyBox> </Box>
</MyModal> </MyModal>
); );
}; };
......
projects/app/src/pageComponents/dataset/list/CreateModal.tsx
...@@ -94,11 +94,23 @@ const CreateModal = ({ ...@@ -94,11 +94,23 @@ const CreateModal = ({
isOpen isOpen
onClose={onClose} onClose={onClose}
size={'md'} size={'md'}
iconSrc={DatasetTypeMap[type].avatar} isCentered
title={t('dataset:create_dataset_title', { name: t(DatasetTypeMap[type].label) })} title={t('dataset:create_dataset_title', { name: t(DatasetTypeMap[type].label) })}
contentPx={'32px'}
contentPy={'32px'}
borderRadius={'10px'} borderRadius={'10px'}
footer={
<>
<Button variant={'whiteBase'} fontSize={'12px'} onClick={onClose}>
{t('common:Close')}
</Button>
<Button
fontSize={'12px'}
isLoading={creating}
onClick={handleSubmit((data) => onclickCreate(data))}
>
{t('common:Create')}
</Button>
</>
}
> >
<Flex <Flex
flexDirection={'column'} flexDirection={'column'}
...@@ -265,19 +277,6 @@ const CreateModal = ({ ...@@ -265,19 +277,6 @@ const CreateModal = ({
</Box> </Box>
)} )}
<Flex mt={6} w={'100%'} justifyContent={'flex-end'} gap={3}>
<Button variant={'whiteBase'} fontSize={'12px'} onClick={onClose}>
{t('common:Close')}
</Button>
<Button
fontSize={'12px'}
isLoading={creating}
onClick={handleSubmit((data) => onclickCreate(data))}
>
{t('common:Create')}
</Button>
</Flex>
<ComplianceTip pb={0} pt={0} px={0} type={'dataset'} /> <ComplianceTip pb={0} pt={0} px={0} type={'dataset'} />
<AvatarUploader /> <AvatarUploader />
......
projects/app/src/web/styles/reset.scss
...@@ -29,36 +29,15 @@ svg { ...@@ -29,36 +29,15 @@ svg {
margin: 0; margin: 0;
} }
::-webkit-scrollbar { * {
width: 8px; scrollbar-color: rgba(189, 193, 197, 0.7) transparent;
height: 8px; scrollbar-width: auto;
}
::-webkit-scrollbar-track {
background: transparent;
border-radius: 2px;
}
::-webkit-scrollbar-thumb {
background: rgba(189, 193, 197, 0.7);
border-radius: 2px;
}
::-webkit-scrollbar-thumb:hover {
background: rgba(189, 193, 197, 1);
} }
:root { :root {
--lexical-indent-base-value: 24px; --lexical-indent-base-value: 24px;
} }
div {
&::-webkit-scrollbar-thumb {
background: rgba(189, 193, 197, 0.7) !important;
transition: background 1s;
}
&::-webkit-scrollbar-thumb:hover {
background: rgba(189, 193, 197, 1) !important;
}
}
input::placeholder, input::placeholder,
textarea::placeholder { textarea::placeholder {
font-size: var(--chakra-fontSizes-mini); font-size: var(--chakra-fontSizes-mini);
...@@ -79,10 +58,6 @@ textarea::placeholder { ...@@ -79,10 +58,6 @@ textarea::placeholder {
html { html {
font-size: 14px; font-size: 14px;
} }
::-webkit-scrollbar {
width: 2px;
height: 2px;
}
} }
@supports (bottom: constant(safe-area-inset-bottom)) or (bottom: env(safe-area-inset-bottom)) { @supports (bottom: constant(safe-area-inset-bottom)) or (bottom: env(safe-area-inset-bottom)) {
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or sign in to comment