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 = ({
<MyModal
isOpen
onClose={onClose}
iconSrc="common/folderFill"
title={typeMap.title}
size={'md'}
contentPx={'32px'}
contentPy={'32px'}
isCentered
borderRadius={'10px'}
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>
<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>
<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>
<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>
</MyModal>
);
......
packages/web/components/v2/common/MyModal/index.tsx
import React, { useMemo } from 'react';
import React from 'react';
import {
Modal,
ModalOverlay,
......@@ -6,20 +6,15 @@ import {
ModalCloseButton,
type ModalContentProps,
Box,
type ImageProps,
Flex
Flex,
type FlexProps,
type BoxProps
} from '@chakra-ui/react';
import MyBox from '../../../common/MyBox';
import { useSystem } from '../../../../hooks/useSystem';
import Avatar from '../../../common/Avatar';
export interface MyModalProps extends ModalContentProps {
iconSrc?: string;
iconColor?: ImageProps['color'];
title?: any;
contentPx?: ModalContentProps['px'];
contentPy?: ModalContentProps['py'];
headerPx?: ModalContentProps['px'];
isCentered?: boolean;
isLoading?: boolean;
isOpen?: boolean;
......@@ -27,41 +22,43 @@ export interface MyModalProps extends ModalContentProps {
closeOnOverlayClick?: boolean;
size?: 'sm' | 'md' | 'lg';
showCloseButton?: boolean;
footer?: React.ReactNode;
headerStyles?: FlexProps;
bodyStyles?: BoxProps;
footerStyles?: FlexProps;
}
const sizeMap = {
sm: {
w: '400px'
},
md: {
w: '560px'
},
lg: {
w: '800px'
}
};
const MyModal = ({
isOpen = true,
onClose,
iconSrc,
title,
children,
isCentered,
isLoading,
closeOnOverlayClick = true,
iconColor,
size = 'sm',
showCloseButton = true,
contentPx = '8',
contentPy = '8',
headerPx = 0,
headerStyles,
bodyStyles,
footerStyles,
footer,
...props
}: MyModalProps) => {
const { isPc } = useSystem();
const sizeData = useMemo(() => {
const map = {
sm: {
w: '400px'
},
md: {
w: '560px'
},
lg: {
w: '800px'
}
};
return map[size];
}, [size]);
const sizeData = sizeMap[size] || sizeMap.sm;
return (
<Modal
......@@ -83,41 +80,39 @@ const MyModal = ({
position={'relative'}
maxH={'80vh'}
boxShadow={'3.5'}
px={contentPx}
py={contentPy}
px={0}
py={0}
display={'flex'}
flexDirection={'column'}
containerProps={{
zIndex: props.zIndex
}}
{...props}
>
{onClose && <ModalCloseButton position={'absolute'} fontSize={'xs'} top={3} right={3} />}
{onClose && showCloseButton && (
<ModalCloseButton position={'absolute'} fontSize={'xs'} top={3} right={3} />
)}
{!!title && (
<Flex
alignItems={'center'}
fontSize={'lg'}
fontWeight={'500'}
mb={6}
py={0}
px={headerPx}
px={8}
pt={8}
pb={0}
gap={3}
{...headerStyles}
>
{iconSrc && (
<>
<Avatar
color={iconColor}
objectFit={'contain'}
alt=""
src={iconSrc}
w={'20px'}
borderRadius={'sm'}
/>
</>
)}
<Box color="black" fontWeight={'500'}>
<Box
color="black"
fontWeight={'500'}
fontSize={'20px'}
lineHeight={'26px'}
letterSpacing={'0.15px'}
>
{title}
</Box>
<Box flex={1} />
</Flex>
)}
......@@ -127,9 +122,33 @@ const MyModal = ({
h={'100%'}
display={'flex'}
flexDirection={'column'}
px={8}
pt={title ? 6 : 8}
pb={footer ? 6 : 8}
fontSize={'14px'}
lineHeight={'20px'}
letterSpacing={'0.25px'}
color={'myGray.900'}
{...bodyStyles}
>
{children}
</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>
</Modal>
);
......
packages/web/hooks/useConfirm.tsx
......@@ -169,15 +169,7 @@ export const useConfirm = (props?: {
const finalVariant = customConfirmButtonVariant || map.variant;
return (
<MyModal
isOpen={isOpen}
onClose={handleClose}
isCentered
size={'sm'}
contentPx={'32px'}
contentPy={'32px'}
borderRadius={'10px'}
>
<MyModal isOpen={isOpen} onClose={handleClose} isCentered size={'sm'} borderRadius={'10px'}>
<Flex direction={'column'} gap={'24px'}>
<HStack spacing={'12px'} align={'center'}>
<Flex
......
projects/app/src/components/common/Modal/EditResourceModal.tsx
import React, { useCallback } from 'react';
import { ModalFooter, ModalBody, Input, Button, Box, Textarea, HStack } from '@chakra-ui/react';
import MyModal from '@fastgpt/web/components/common/MyModal/index';
import { Input, Button, Box, Textarea, Flex } from '@chakra-ui/react';
import MyModal from '@fastgpt/web/components/v2/common/MyModal';
import { useTranslation } from 'next-i18next';
import { useRequest } from '@fastgpt/web/hooks/useRequest';
import FormLabel from '@fastgpt/web/components/common/MyBox/FormLabel';
......@@ -36,7 +36,7 @@ const EditResourceModal = ({
const { runAsync: onSave, loading } = useRequest(
(data: EditResourceInfoFormType) => onEdit(data),
{
onSuccess: (res) => {
onSuccess: () => {
onClose();
}
}
......@@ -52,40 +52,68 @@ const EditResourceModal = ({
useUploadAvatar(getUploadAvatarPresignedUrl, { onSuccess: afterUploadAvatar });
return (
<MyModal isOpen onClose={onClose} iconSrc={avatar} title={title}>
<ModalBody>
<MyModal
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>
<FormLabel mb={1}>{t('common:core.app.Name and avatar')}</FormLabel>
<HStack spacing={4}>
<FormLabel mb={2}>{t('common:core.app.Name and avatar')}</FormLabel>
<Flex alignItems={'center'}>
<MyTooltip label={t('common:set_avatar')}>
<Avatar
flex={'0 0 2rem'}
src={avatar}
w={'2rem'}
h={'2rem'}
<Flex
borderRadius={'6px'}
w={'34px'}
h={'34px'}
border={'1px solid'}
borderColor={'myGray.200'}
justifyContent={'center'}
alignItems={'center'}
mr={3}
p={'4px'}
cursor={'pointer'}
borderRadius={'sm'}
onClick={handleAvatarSelectorOpen}
/>
>
<Avatar src={avatar} w={'24px'} borderRadius={'6px'} />
</Flex>
</MyTooltip>
<Input
flex={1}
size={'sm'}
{...register('name', { required: true })}
bg={'myGray.50'}
autoFocus
maxLength={100}
/>
</HStack>
</Flex>
</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>
</ModalBody>
<ModalFooter>
<Button isLoading={loading} onClick={handleSubmit(onSave)} px={6}>
{t('common:Confirm')}
</Button>
</ModalFooter>
</Flex>
<AvatarUploader />
</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 MyModal from '@fastgpt/web/components/common/MyModal';
import MyModal from '@fastgpt/web/components/v2/common/MyModal';
import { useForm } from 'react-hook-form';
import { useTranslation } from 'next-i18next';
import FormLabel from '@fastgpt/web/components/common/MyBox/FormLabel';
type FormType = {
versionName: string;
......@@ -29,40 +30,41 @@ const SaveAndPublishModal = ({
return (
<MyModal
title={title || t('common:core.workflow.Save and publish')}
iconSrc={'core/workflow/publish'}
maxW={'400px'}
isOpen
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>
<Box mb={2.5} color={'myGray.900'} fontSize={'14px'} fontWeight={'500'}>
{t('common:Name')}
</Box>
<Box mb={3}>
<Flex flexDirection={'column'} gap={6}>
<Box>
<FormLabel mb={2}>{t('common:Name')}</FormLabel>
<Input
size={'sm'}
autoFocus
placeholder={t('app:app.Version name')}
bg={'myWhite.600'}
{...register('versionName', {
required: t('app:app.version_name_tips')
})}
/>
</Box>
<Box fontSize={'14px'}>{t('app:app.version_publish_tips')}</Box>
</ModalBody>
<ModalFooter gap={3}>
<Button onClick={onClose} variant={'whiteBase'}>
{t('common:Cancel')}
</Button>
<Button
isLoading={isLoading}
onClick={handleSubmit(async (data) => {
await onConfirm(data.versionName);
})}
>
{t('common:Confirm')}
</Button>
</ModalFooter>
<Box fontSize={'12px'} color={'myGray.500'} mt={-2}>
{t('app:app.version_publish_tips')}
</Box>
</Flex>
</MyModal>
);
};
......
projects/app/src/components/common/folder/MoveModal.tsx
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 { Box, Button, Flex, ModalBody, ModalFooter } from '@chakra-ui/react';
import { Box, Button, Flex } from '@chakra-ui/react';
import {
type GetResourceFolderListProps,
type GetResourceFolderListItemResponse,
......@@ -165,25 +165,41 @@ const MoveModal = ({ moveResourceId, title, server, onConfirm, onClose, moveHint
return (
<MyModal
isLoading={folderList.length === 0}
iconSrc="/imgs/modal/move.svg"
isOpen
w={'30rem'}
size={'md'}
title={title}
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 && (
<Box mb={1}>
<LightTip text={moveHint} />
</Box>
)}
{moveHint && (
<Box mb={3}>
<LightTip text={moveHint} />
</Box>
)}
<Box
border={'1px solid'}
borderColor={'myGray.200'}
borderRadius={'md'}
p={3}
flex={'1 0 0'}
overflowY={'auto'}
>
<RenderList list={folderList} />
</ModalBody>
<ModalFooter>
<Button isLoading={confirming} isDisabled={!selectedId} onClick={onConfirmSelect}>
{t('common:Confirm')}
</Button>
</ModalFooter>
</Box>
</MyModal>
);
};
......
projects/app/src/components/core/ai/requestId/index.tsx
......@@ -58,12 +58,12 @@ export const RequestIdDetailModal = ({ onClose, requestId }: RequestIdDetailModa
maxW={['90vw', '1080px']}
h={['90vh', '80vh']}
maxH={['90vh', '700px']}
px={0}
py={8}
headerPx={'32px'}
headerStyles={{ px: '32px' }}
bodyStyles={{ px: '32px' }}
>
{record && (
<Flex height={'100%'} mx={'32px'} gap={4}>
<Flex height={'100%'} gap={4}>
<Flex flex={1} flexDirection={'column'} gap={2} minW={0}>
<Box
fontSize={'12px'}
......
projects/app/src/components/core/chat/components/WholeResponseModal/index.tsx
......@@ -31,9 +31,9 @@ const WholeResponseModal = ({ onClose, dataId }: { onClose: () => void; dataId:
maxW={['90vw', '880px']}
h={['90vh', '80vh']}
maxH={['90vh', '700px']}
px={0}
py={8}
headerPx={'32px'}
headerStyles={{ px: '32px' }}
bodyStyles={{ px: 0 }}
title={
<Flex alignItems={'center'} gap={2}>
<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 { getTeamMembers } from '@/web/support/user/team/api';
import {
Box,
Flex,
HStack,
Input,
ModalBody,
ModalFooter,
Button,
useDisclosure
} from '@chakra-ui/react';
import { Box, Flex, HStack, Input, Button, useDisclosure } from '@chakra-ui/react';
import { type TeamMemberItemType } from '@fastgpt/global/support/user/team/type';
import Avatar from '@fastgpt/web/components/common/Avatar';
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 { useRequest } from '@fastgpt/web/hooks/useRequest';
import { useScrollPagination } from '@fastgpt/web/hooks/useScrollPagination';
......@@ -79,98 +70,97 @@ export function ChangeOwnerModal({
return (
<MyModal
isOpen
iconSrc="modal/changePer"
iconColor="primary.600"
onClose={onClose}
title={t('common:permission.change_owner')}
isLoading={loading}
>
<ModalBody>
<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>
</ModalBody>
<ModalFooter>
<HStack>
isCentered
footer={
<HStack spacing={3}>
<Button onClick={onClose} variant={'whiteBase'}>
{t('common:Cancel')}
</Button>
<Button onClick={onConfirm}>{t('common:Confirm')}</Button>
<Button onClick={onConfirm} isDisabled={!selectedMember}>
{t('common:Confirm')}
</Button>
</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>
);
}
......
projects/app/src/components/support/permission/ConfigPerModal/index.tsx
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 CollaboratorContextProvider, {
type MemberManagerInputPropsType
} 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 MyIcon from '@fastgpt/web/components/common/Icon';
import ResumeInherit from '../ResumeInheritText';
......@@ -44,69 +44,62 @@ const ConfigPerModal = ({
return (
<>
<MyModal
isOpen
iconSrc="keyPrimary"
onClose={onClose}
title={t('common:permission.Permission config')}
>
<ModalBody>
<HStack>
<Avatar src={avatar} w={'1.75rem'} borderRadius={'md'} />
<Box>{name}</Box>
</HStack>
{!isInheritPermission && (
<Box mt={3}>
<ResumeInherit onResume={resumeInheritPermission} />
</Box>
)}
<MyModal isOpen onClose={onClose} title={t('common:permission.Permission config')} isCentered>
<HStack>
<Avatar src={avatar} w={'1.75rem'} borderRadius={'md'} />
<Box>{name}</Box>
</HStack>
{!isInheritPermission && (
<Box mt={3}>
<ResumeInherit onResume={resumeInheritPermission} />
</Box>
)}
<Box mt={4}>
<CollaboratorContextProvider
{...managePer}
refetchResource={refetchResource}
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}>
<CollaboratorContextProvider
{...managePer}
refetchResource={refetchResource}
isInheritPermission={isInheritPermission}
hasParent={hasParent}
<Button
size="md"
variant="whitePrimary"
onClick={onOpenChangeOwnerModal}
w="full"
borderRadius="md"
leftIcon={<MyIcon w="4" name="common/lineChange" />}
>
{({ 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>
{t('common:permission.change_owner')}
</Button>
</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>
{isChangeOwnerModalOpen && onChangeOwner && (
<ChangeOwnerModal
......
projects/app/src/pageComponents/dashboard/skill/CreateSkillModal.tsx
......@@ -84,10 +84,19 @@ const CreateSkillModal = ({ parentId, onClose }: Props) => {
onClose={onClose}
title={t('skill:create_skill')}
size={'md'}
contentPx={'32px'}
contentPy={'32px'}
isCentered
borderRadius={'10px'}
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}>
{/* 图标 & 名称 */}
......@@ -182,15 +191,6 @@ const CreateSkillModal = ({ parentId, onClose }: Props) => {
/>
</Box>
</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>
<AvatarUploader />
</>
......
projects/app/src/pageComponents/dashboard/skill/ImportSkillModal.tsx
......@@ -14,6 +14,7 @@ import { useSystemStore } from '@/web/common/system/useSystemStore';
import { useUploadAvatar } from '@fastgpt/web/common/file/hooks/useUploadAvatar';
import { getUploadAvatarPresignedUrl } from '@/web/common/file/api';
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 DEFAULT_SKILL_AVATAR = 'core/skill/default';
......@@ -166,32 +167,45 @@ const ImportSkillModal = ({ parentId, onClose, onSuccess }: Props) => {
isOpen
onClose={onClose}
title={t('skill:import_skill')}
iconSrc="common/importLight"
iconColor={'primary.600'}
size={'md'}
contentPx={'32px'}
contentPy={'32px'}
isCentered
borderRadius={'10px'}
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}>
<Box color={'myGray.800'} fontWeight={'bold'}>
{t('common:input_name')}
<Flex mt={2} alignItems={'center'}>
<Box>
<FormLabel mb={2}>{t('common:input_name')}</FormLabel>
<Flex alignItems={'center'}>
<MyTooltip label={t('common:set_avatar')}>
<Avatar
flexShrink={0}
src={avatar}
w={['1.75rem', '2.25rem']}
h={['1.75rem', '2.25rem']}
<Flex
borderRadius={'6px'}
w={'34px'}
h={'34px'}
border={'1px solid'}
borderColor={'myGray.200'}
justifyContent={'center'}
alignItems={'center'}
mr={3}
p={'4px'}
cursor={'pointer'}
borderRadius={'md'}
onClick={handleAvatarSelectorOpen}
/>
>
<Avatar src={avatar} w={'24px'} borderRadius={'6px'} />
</Flex>
</MyTooltip>
<Input
flex={1}
ml={3}
size={'sm'}
autoFocus
placeholder={t('skill:skill_name_placeholder')}
{...register('name', {
......@@ -272,14 +286,6 @@ const ImportSkillModal = ({ parentId, onClose, onSuccess }: Props) => {
</Flex>
)}
<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>
</MyModal>
<AvatarUploader />
......
projects/app/src/pageComponents/dataset/detail/components/InputDataModal/index.tsx
......@@ -2,7 +2,6 @@ import React from 'react';
import { Box, Flex } from '@chakra-ui/react';
import { useTranslation } from 'next-i18next';
import MyModal from '@fastgpt/web/components/v2/common/MyModal';
import MyBox from '@fastgpt/web/components/common/MyBox';
import DataInputPanel from './DataInputPanel';
import IndexInputPanel from './IndexInputPanel';
import { TabEnum, useInputDataModal, type InputDataType } from './useInputDataModal';
......@@ -67,9 +66,9 @@ const InputDataModal = ({
borderRadius={'10px'}
bg={'white'}
boxShadow={'3.5'}
contentPx={[5, '32px']}
contentPy={[5, '32px']}
headerPx={0}
px={[5, '32px']}
py={[5, '32px']}
headerStyles={{ px: 0 }}
title={
<Box
className={'textEllipsis'}
......@@ -87,12 +86,13 @@ const InputDataModal = ({
{collection.sourceName || t('common:unknow_source')}
</Box>
}
isLoading={initLoading}
overflow={'hidden'}
>
<MyBox
<Box
display={'flex'}
flexDir={'column'}
isLoading={initLoading}
h={'100%'}
flex={'1 0 0'}
minH={['300px', showTabs ? '506px' : '450px']}
overflow={'hidden'}
>
......@@ -179,7 +179,7 @@ const InputDataModal = ({
</Flex>
</Flex>
)}
</MyBox>
</Box>
</MyModal>
);
};
......
projects/app/src/pageComponents/dataset/list/CreateModal.tsx
......@@ -94,11 +94,23 @@ const CreateModal = ({
isOpen
onClose={onClose}
size={'md'}
iconSrc={DatasetTypeMap[type].avatar}
isCentered
title={t('dataset:create_dataset_title', { name: t(DatasetTypeMap[type].label) })}
contentPx={'32px'}
contentPy={'32px'}
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
flexDirection={'column'}
......@@ -265,19 +277,6 @@ const CreateModal = ({
</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'} />
<AvatarUploader />
......
projects/app/src/web/styles/reset.scss
......@@ -29,36 +29,15 @@ svg {
margin: 0;
}
::-webkit-scrollbar {
width: 8px;
height: 8px;
}
::-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);
* {
scrollbar-color: rgba(189, 193, 197, 0.7) transparent;
scrollbar-width: auto;
}
:root {
--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,
textarea::placeholder {
font-size: var(--chakra-fontSizes-mini);
......@@ -79,10 +58,6 @@ textarea::placeholder {
html {
font-size: 14px;
}
::-webkit-scrollbar {
width: 2px;
height: 2px;
}
}
@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