Skip to content

赵月辉 / fastgpt-migrated

Go to a project
Commit 51b98df4 by archer
Options

perf: ui

parent ba737622
Showing with 83 additions and 74 deletions
client/src/components/Avatar/index.tsx
...@@ -9,7 +9,7 @@ const Avatar = ({ w = '30px', ...props }: ImageProps) => { ...@@ -9,7 +9,7 @@ const Avatar = ({ w = '30px', ...props }: ImageProps) => {
fallbackSrc={LOGO_ICON} fallbackSrc={LOGO_ICON}
fallbackStrategy={'onError'} fallbackStrategy={'onError'}
borderRadius={'50%'} borderRadius={'50%'}
objectFit={'cover'} objectFit={'contain'}
alt="" alt=""
w={w} w={w}
h={w} h={w}
......
client/src/components/Layout/index.tsx
...@@ -86,7 +86,7 @@ const Layout = ({ children }: { children: JSX.Element }) => { ...@@ -86,7 +86,7 @@ const Layout = ({ children }: { children: JSX.Element }) => {
<Auth>{children}</Auth> <Auth>{children}</Auth>
) : ( ) : (
<Flex h={'100%'} flexDirection={'column'}> <Flex h={'100%'} flexDirection={'column'}>
<Box flex={'1 0 0'} h={0} overflow={'overlay'}> <Box flex={'1 0 0'} h={0}>
<Auth>{children}</Auth> <Auth>{children}</Auth>
</Box> </Box>
<Box h={'50px'} borderTop={'1px solid rgba(0,0,0,0.1)'}> <Box h={'50px'} borderTop={'1px solid rgba(0,0,0,0.1)'}>
......
client/src/components/PageContainer/index.tsx
...@@ -6,12 +6,11 @@ const PageContainer = ({ children, ...props }: BoxProps) => { ...@@ -6,12 +6,11 @@ const PageContainer = ({ children, ...props }: BoxProps) => {
return ( return (
<Box bg={'myGray.100'} h={'100%'} p={[0, 5]} px={[0, 6]} {...props}> <Box bg={'myGray.100'} h={'100%'} p={[0, 5]} px={[0, 6]} {...props}>
<Box <Box
flex={1}
h={'100%'} h={'100%'}
bg={'white'} bg={'white'}
borderRadius={['', '2xl']} borderRadius={[0, '2xl']}
border={['', theme.borders.lg]} border={['none', theme.borders.lg]}
overflowY={'auto'} overflow={'overlay'}
> >
{children} {children}
</Box> </Box>
......
client/src/pages/api/user/getBill.ts
...@@ -27,8 +27,8 @@ export default async function handler(req: NextApiRequest, res: NextApiResponse) ...@@ -27,8 +27,8 @@ export default async function handler(req: NextApiRequest, res: NextApiResponse)
const where = { const where = {
userId, userId,
time: { time: {
$gte: new Date(dateStart).setHours(0, 0, 0, 0), $gte: dateStart,
$lte: new Date(dateEnd).setHours(23, 59, 59, 999) $lte: dateEnd
} }
}; };
......
client/src/pages/app/detail/components/API.tsx
...@@ -3,6 +3,7 @@ import { Box, Divider, Flex, useTheme, Button, Skeleton, useDisclosure } from '@ ...@@ -3,6 +3,7 @@ import { Box, Divider, Flex, useTheme, Button, Skeleton, useDisclosure } from '@
import { useCopyData } from '@/utils/tools'; import { useCopyData } from '@/utils/tools';
import dynamic from 'next/dynamic'; import dynamic from 'next/dynamic';
import MyIcon from '@/components/Icon'; import MyIcon from '@/components/Icon';
import { useGlobalStore } from '@/store/global';
const APIKeyModal = dynamic(() => import('@/components/APIKeyModal'), { const APIKeyModal = dynamic(() => import('@/components/APIKeyModal'), {
ssr: false ssr: false
...@@ -19,13 +20,15 @@ const API = ({ appId }: { appId: string }) => { ...@@ -19,13 +20,15 @@ const API = ({ appId }: { appId: string }) => {
} = useDisclosure(); } = useDisclosure();
const [isLoaded, setIsLoaded] = useState(false); const [isLoaded, setIsLoaded] = useState(false);
const { isPc } = useGlobalStore();
useEffect(() => { useEffect(() => {
setBaseUrl(`${location.origin}/api/openapi`); setBaseUrl(`${location.origin}/api/openapi`);
}, []); }, []);
return ( return (
<Flex flexDirection={'column'} pt={[0, 5]} h={'100%'}> <Flex flexDirection={'column'} pt={[0, 5]} h={'100%'}>
<Box display={['none', 'flex']} px={5} alignItems={'center'}> <Flex px={5} alignItems={'center'}>
<Box flex={1}> <Box flex={1}>
AppId: AppId:
<Box <Box
...@@ -38,32 +41,36 @@ const API = ({ appId }: { appId: string }) => { ...@@ -38,32 +41,36 @@ const API = ({ appId }: { appId: string }) => {
{appId} {appId}
</Box> </Box>
</Box> </Box>
<Flex {isPc && (
bg={'myWhite.600'} <>
py={2} <Flex
px={4} bg={'myWhite.600'}
borderRadius={'md'} py={2}
cursor={'pointer'} px={4}
onClick={() => copyData(baseUrl, '已复制 API 地址')} borderRadius={'md'}
> cursor={'pointer'}
<Box border={theme.borders.md} px={2} borderRadius={'md'} fontSize={'sm'}> onClick={() => copyData(baseUrl, '已复制 API 地址')}
API服务器 >
</Box> <Box border={theme.borders.md} px={2} borderRadius={'md'} fontSize={'sm'}>
<Box ml={2} color={'myGray.900'} fontSize={['sm', 'md']}> API服务器
{baseUrl} </Box>
</Box> <Box ml={2} color={'myGray.900'} fontSize={['sm', 'md']}>
</Flex> {baseUrl}
<Button </Box>
ml={3} </Flex>
leftIcon={<MyIcon name={'apikey'} w={'16px'} color={''} />} <Button
variant={'base'} ml={3}
onClick={onOpenAPIModal} leftIcon={<MyIcon name={'apikey'} w={'16px'} color={''} />}
> variant={'base'}
API 秘钥 onClick={onOpenAPIModal}
</Button> >
</Box> API 秘钥
</Button>
</>
)}
</Flex>
<Divider mt={3} /> <Divider mt={3} />
<Box flex={1}> <Box flex={'1 0 0'} h={0}>
<Skeleton h="100%" isLoaded={isLoaded} fadeDuration={2}> <Skeleton h="100%" isLoaded={isLoaded} fadeDuration={2}>
<iframe <iframe
style={{ style={{
......
client/src/pages/app/detail/components/Settings.tsx
...@@ -66,7 +66,7 @@ const Settings = ({ appId }: { appId: string }) => { ...@@ -66,7 +66,7 @@ const Settings = ({ appId }: { appId: string }) => {
return ( return (
<Flex h={'100%'} flexDirection={'column'} position={'relative'}> <Flex h={'100%'} flexDirection={'column'} position={'relative'}>
<Box w={'100%'} pt={[0, 7]} px={[2, 5, 8]}> <Box w={'100%'} pt={[0, 7]} px={[3, 5, 8]}>
<Grid gridTemplateColumns={['1fr', 'repeat(2,1fr)']} gridGap={[2, 4, 6]}> <Grid gridTemplateColumns={['1fr', 'repeat(2,1fr)']} gridGap={[2, 4, 6]}>
<Box> <Box>
<Box mb={2} fontSize={['md', 'xl']}> <Box mb={2} fontSize={['md', 'xl']}>
......
client/src/pages/app/detail/components/edit/components/ChatTest.tsx
...@@ -8,7 +8,7 @@ import React, { ...@@ -8,7 +8,7 @@ import React, {
useImperativeHandle, useImperativeHandle,
ForwardedRef ForwardedRef
} from 'react'; } from 'react';
import { Box, Flex, IconButton, useOutsideClick } from '@chakra-ui/react'; import { Box, Flex, IconButton } from '@chakra-ui/react';
import MyIcon from '@/components/Icon'; import MyIcon from '@/components/Icon';
import { FlowModuleTypeEnum } from '@/constants/flow'; import { FlowModuleTypeEnum } from '@/constants/flow';
import { streamFetch } from '@/api/fetch'; import { streamFetch } from '@/api/fetch';
...@@ -35,7 +35,6 @@ const ChatTest = ( ...@@ -35,7 +35,6 @@ const ChatTest = (
}, },
ref: ForwardedRef<ChatTestComponentRef> ref: ForwardedRef<ChatTestComponentRef>
) => { ) => {
const BoxRef = useRef(null);
const ChatBoxRef = useRef<ComponentRef>(null); const ChatBoxRef = useRef<ComponentRef>(null);
const isOpen = useMemo(() => modules && modules.length > 0, [modules]); const isOpen = useMemo(() => modules && modules.length > 0, [modules]);
...@@ -67,13 +66,6 @@ const ChatTest = ( ...@@ -67,13 +66,6 @@ const ChatTest = (
[app._id, app.name, modules] [app._id, app.name, modules]
); );
useOutsideClick({
ref: BoxRef,
handler: () => {
onClose();
}
});
useImperativeHandle(ref, () => ({ useImperativeHandle(ref, () => ({
resetChatTest() { resetChatTest() {
ChatBoxRef.current?.resetHistory([]); ChatBoxRef.current?.resetHistory([]);
...@@ -84,7 +76,6 @@ const ChatTest = ( ...@@ -84,7 +76,6 @@ const ChatTest = (
return ( return (
<> <>
<Flex <Flex
ref={BoxRef}
zIndex={3} zIndex={3}
flexDirection={'column'} flexDirection={'column'}
position={'absolute'} position={'absolute'}
...@@ -136,6 +127,7 @@ const ChatTest = ( ...@@ -136,6 +127,7 @@ const ChatTest = (
left={0} left={0}
bottom={0} bottom={0}
right={0} right={0}
onClick={onClose}
/> />
</> </>
); );
......
client/src/pages/app/detail/components/edit/components/TemplateList.tsx
...@@ -3,6 +3,7 @@ import { Box, Flex, useOutsideClick } from '@chakra-ui/react'; ...@@ -3,6 +3,7 @@ import { Box, Flex, useOutsideClick } from '@chakra-ui/react';
import { ModuleTemplates } from '@/constants/flow/ModuleTemplate'; import { ModuleTemplates } from '@/constants/flow/ModuleTemplate';
import type { AppModuleTemplateItemType } from '@/types/app'; import type { AppModuleTemplateItemType } from '@/types/app';
import type { XYPosition } from 'reactflow'; import type { XYPosition } from 'reactflow';
import { useGlobalStore } from '@/store/global';
import Avatar from '@/components/Avatar'; import Avatar from '@/components/Avatar';
const ModuleStoreList = ({ const ModuleStoreList = ({
...@@ -14,15 +15,7 @@ const ModuleStoreList = ({ ...@@ -14,15 +15,7 @@ const ModuleStoreList = ({
onAddNode: (e: { template: AppModuleTemplateItemType; position: XYPosition }) => void; onAddNode: (e: { template: AppModuleTemplateItemType; position: XYPosition }) => void;
onClose: () => void; onClose: () => void;
}) => { }) => {
const BoxRef = useRef(null); const { isPc } = useGlobalStore();
useOutsideClick({
ref: BoxRef,
handler: () => {
onClose();
}
});
return ( return (
<> <>
<Box <Box
...@@ -33,17 +26,17 @@ const ModuleStoreList = ({ ...@@ -33,17 +26,17 @@ const ModuleStoreList = ({
left={0} left={0}
bottom={0} bottom={0}
w={'360px'} w={'360px'}
></Box> onClick={onClose}
/>
<Flex <Flex
zIndex={3} zIndex={3}
ref={BoxRef}
flexDirection={'column'} flexDirection={'column'}
position={'absolute'} position={'absolute'}
top={'65px'} top={'65px'}
left={0} left={0}
pb={4} pb={4}
h={isOpen ? 'calc(100% - 100px)' : '0'} h={isOpen ? 'calc(100% - 100px)' : '0'}
w={isOpen ? '360px' : '0'} w={isOpen ? ['100%', '360px'] : '0'}
bg={'white'} bg={'white'}
boxShadow={'3px 0 20px rgba(0,0,0,0.2)'} boxShadow={'3px 0 20px rgba(0,0,0,0.2)'}
borderRadius={'20px'} borderRadius={'20px'}
...@@ -51,11 +44,11 @@ const ModuleStoreList = ({ ...@@ -51,11 +44,11 @@ const ModuleStoreList = ({
transition={'.2s ease'} transition={'.2s ease'}
userSelect={'none'} userSelect={'none'}
> >
<Box w={'330px'} py={4} px={5} fontSize={'xl'} fontWeight={'bold'}> <Box w={['100%', '330px']} py={4} px={5} fontSize={'xl'} fontWeight={'bold'}>
系统模块 系统模块
</Box> </Box>
<Box flex={'1 0 0'} overflow={'overlay'}> <Box flex={'1 0 0'} overflow={'overlay'}>
<Box w={'330px'} mx={'auto'}> <Box w={['100%', '330px']} mx={'auto'}>
{ModuleTemplates.map((item) => {ModuleTemplates.map((item) =>
item.list.map((item) => ( item.list.map((item) => (
<Flex <Flex
...@@ -73,6 +66,14 @@ const ModuleStoreList = ({ ...@@ -73,6 +66,14 @@ const ModuleStoreList = ({
position: { x: e.clientX, y: e.clientY } position: { x: e.clientX, y: e.clientY }
}); });
}} }}
onClick={(e) => {
if (isPc) return;
onAddNode({
template: item,
position: { x: e.clientX, y: e.clientY }
});
onClose();
}}
> >
<Avatar src={item.logo} w={'34px'} objectFit={'contain'} borderRadius={'0'} /> <Avatar src={item.logo} w={'34px'} objectFit={'contain'} borderRadius={'0'} />
<Box ml={5} flex={'1 0 0'}> <Box ml={5} flex={'1 0 0'}>
......
client/src/pages/app/detail/index.tsx
...@@ -67,7 +67,7 @@ const AppDetail = ({ currentTab }: { currentTab: `${TabEnum}` }) => { ...@@ -67,7 +67,7 @@ const AppDetail = ({ currentTab }: { currentTab: `${TabEnum}` }) => {
return ( return (
<PageContainer> <PageContainer>
<Box display={['block', 'flex']} h={'100%'}> <Flex flexDirection={['column', 'row']} h={'100%'}>
{/* pc tab */} {/* pc tab */}
<Box <Box
display={['none', 'flex']} display={['none', 'flex']}
...@@ -121,7 +121,7 @@ const AppDetail = ({ currentTab }: { currentTab: `${TabEnum}` }) => { ...@@ -121,7 +121,7 @@ const AppDetail = ({ currentTab }: { currentTab: `${TabEnum}` }) => {
</Box> </Box>
{/* phone tab */} {/* phone tab */}
<Box display={['block', 'none']} textAlign={'center'} px={5} py={3}> <Box display={['block', 'none']} textAlign={'center'} px={5} py={3}>
<Box className="textlg" fontSize={'3xl'} fontWeight={'bold'}> <Box className="textlg" fontSize={'xl'} fontWeight={'bold'}>
{appDetail.name} {appDetail.name}
</Box> </Box>
<Tabs <Tabs
...@@ -140,12 +140,12 @@ const AppDetail = ({ currentTab }: { currentTab: `${TabEnum}` }) => { ...@@ -140,12 +140,12 @@ const AppDetail = ({ currentTab }: { currentTab: `${TabEnum}` }) => {
}} }}
/> />
</Box> </Box>
<Box flex={1} h={'100%'}> <Box flex={'1 0 0'} h={[0, '100%']} overflow={['overlay', '']}>
{currentTab === TabEnum.settings && <Settings appId={appId} />} {currentTab === TabEnum.settings && <Settings appId={appId} />}
{currentTab === TabEnum.API && <API appId={appId} />} {currentTab === TabEnum.API && <API appId={appId} />}
{currentTab === TabEnum.share && <Share appId={appId} />} {currentTab === TabEnum.share && <Share appId={appId} />}
</Box> </Box>
</Box> </Flex>
</PageContainer> </PageContainer>
); );
}; };
......
client/src/pages/app/list/component/CreateModal.tsx
...@@ -22,6 +22,7 @@ import { useToast } from '@/hooks/useToast'; ...@@ -22,6 +22,7 @@ import { useToast } from '@/hooks/useToast';
import { postCreateApp } from '@/api/app'; import { postCreateApp } from '@/api/app';
import { useRouter } from 'next/router'; import { useRouter } from 'next/router';
import { appTemplates } from '@/constants/flow/ModuleTemplate'; import { appTemplates } from '@/constants/flow/ModuleTemplate';
import { useGlobalStore } from '@/store/global';
import Avatar from '@/components/Avatar'; import Avatar from '@/components/Avatar';
import MyTooltip from '@/components/MyTooltip'; import MyTooltip from '@/components/MyTooltip';
...@@ -37,6 +38,7 @@ const CreateModal = ({ onClose, onSuccess }: { onClose: () => void; onSuccess: ( ...@@ -37,6 +38,7 @@ const CreateModal = ({ onClose, onSuccess }: { onClose: () => void; onSuccess: (
const { toast } = useToast(); const { toast } = useToast();
const router = useRouter(); const router = useRouter();
const theme = useTheme(); const theme = useTheme();
const { isPc } = useGlobalStore();
const { register, setValue, getValues, handleSubmit } = useForm<FormType>({ const { register, setValue, getValues, handleSubmit } = useForm<FormType>({
defaultValues: { defaultValues: {
avatar: '/icon/logo.png', avatar: '/icon/logo.png',
...@@ -100,9 +102,9 @@ const CreateModal = ({ onClose, onSuccess }: { onClose: () => void; onSuccess: ( ...@@ -100,9 +102,9 @@ const CreateModal = ({ onClose, onSuccess }: { onClose: () => void; onSuccess: (
); );
return ( return (
<Modal isOpen onClose={onClose}> <Modal isOpen onClose={onClose} isCentered={!isPc}>
<ModalOverlay /> <ModalOverlay />
<ModalContent w={'700px'} maxW={'90vw'}> <ModalContent maxW={'min(700px,90vw)'}>
<ModalHeader fontSize={'2xl'}>创建属于你的 AI 应用</ModalHeader> <ModalHeader fontSize={'2xl'}>创建属于你的 AI 应用</ModalHeader>
<ModalBody> <ModalBody>
<Box color={'myGray.800'} fontWeight={'bold'}> <Box color={'myGray.800'} fontWeight={'bold'}>
...@@ -121,19 +123,20 @@ const CreateModal = ({ onClose, onSuccess }: { onClose: () => void; onSuccess: ( ...@@ -121,19 +123,20 @@ const CreateModal = ({ onClose, onSuccess }: { onClose: () => void; onSuccess: (
</MyTooltip> </MyTooltip>
<Input <Input
ml={4} ml={4}
autoFocus
bg={'myWhite.600'} bg={'myWhite.600'}
{...register('name', { {...register('name', {
required: '应用名不能为空~' required: '应用名不能为空~'
})} })}
/> />
</Flex> </Flex>
<Box mt={7} mb={3} color={'myGray.800'} fontWeight={'bold'}> <Box mt={[4, 7]} mb={[0, 3]} color={'myGray.800'} fontWeight={'bold'}>
从模板中选择 从模板中选择
</Box> </Box>
<Grid <Grid
userSelect={'none'} userSelect={'none'}
gridTemplateColumns={['repeat(1,1fr)', 'repeat(2,1fr)']} gridTemplateColumns={['repeat(1,1fr)', 'repeat(2,1fr)']}
gridGap={4} gridGap={[2, 4]}
> >
{appTemplates.map((item) => ( {appTemplates.map((item) => (
<Card <Card
......
client/src/pages/kb/list/index.tsx
...@@ -141,6 +141,14 @@ const Kb = () => { ...@@ -141,6 +141,14 @@ const Kb = () => {
</Card> </Card>
))} ))}
</Grid> </Grid>
{myKbList.length === 0 && (
<Flex mt={'35vh'} flexDirection={'column'} alignItems={'center'}>
<MyIcon name="empty" w={'48px'} h={'48px'} color={'transparent'} />
<Box mt={2} color={'myGray.500'}>
还没有知识库，快去创建一个吧！
</Box>
</Flex>
)}
<ConfirmChild /> <ConfirmChild />
</PageContainer> </PageContainer>
); );
......
client/src/pages/number/components/BillTable.tsx
...@@ -39,8 +39,8 @@ const BillTable = () => { ...@@ -39,8 +39,8 @@ const BillTable = () => {
} = usePagination<UserBillType>({ } = usePagination<UserBillType>({
api: getUserBills, api: getUserBills,
params: { params: {
dateStart: dateRange.from, dateStart: new Date(dateRange.from || new Date()).setHours(0, 0, 0, 0),
dateEnd: dateRange.to dateEnd: new Date(dateRange.to || new Date()).setHours(23, 59, 59, 999)
} }
}); });
...@@ -85,14 +85,14 @@ const BillTable = () => { ...@@ -85,14 +85,14 @@ const BillTable = () => {
</Box> </Box>
</Flex> </Flex>
)} )}
<Flex w={'100%'} mt={4} justifyContent={'flex-end'}> <Flex w={'100%'} mt={4} justifyContent={'flex-end'} flexWrap={'wrap'}>
<DateRangePicker <DateRangePicker
defaultDate={dateRange} defaultDate={dateRange}
position="top" position="top"
onChange={setDateRange} onChange={setDateRange}
onSuccess={() => getData(1)} onSuccess={() => getData(1)}
/> />
<Box ml={2}> <Box ml={[0, 2]} mt={[3, 0]} w={['100%', 'auto']}>
<Pagination /> <Pagination />
</Box> </Box>
</Flex> </Flex>
......
client/src/pages/number/index.tsx
import React, { useCallback, useRef, useState } from 'react'; import React, { useCallback, useRef } from 'react';
import { Card, Box, Flex, Button, Input, Grid, useDisclosure } from '@chakra-ui/react'; import { Card, Box, Flex, Button, Grid, useDisclosure } from '@chakra-ui/react';
import { useForm } from 'react-hook-form'; import { useForm } from 'react-hook-form';
import { UserUpdateParams } from '@/types/user'; import { UserUpdateParams } from '@/types/user';
import { putUserInfo, getPromotionInitData } from '@/api/user'; import { putUserInfo, getPromotionInitData } from '@/api/user';
...@@ -14,7 +14,6 @@ import dynamic from 'next/dynamic'; ...@@ -14,7 +14,6 @@ import dynamic from 'next/dynamic';
import { useSelectFile } from '@/hooks/useSelectFile'; import { useSelectFile } from '@/hooks/useSelectFile';
import { compressImg } from '@/utils/file'; import { compressImg } from '@/utils/file';
import { getErrText, useCopyData } from '@/utils/tools'; import { getErrText, useCopyData } from '@/utils/tools';
import { authOpenAiKey } from '@/utils/plugin/openai';
import Loading from '@/components/Loading'; import Loading from '@/components/Loading';
import Avatar from '@/components/Avatar'; import Avatar from '@/components/Avatar';
......
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