Skip to content

赵月辉 / fastgpt-migrated

Go to a project
Commit 35718b1f by archer
Options

perf: app edit

parent c16e2b8d
Showing with 99 additions and 231 deletions
client/src/components/Icon/icons/back.svg
<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1683436459815" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="1278" xmlns:xlink="http://www.w3.org/1999/xlink" width="64" height="64"><path d="M377.04830749 512.02677874l395.88826112-382.68981248c23.33363769-22.59430969 23.33363769-59.16132466 0-81.68344804-23.33247261-22.5582171-61.18836224-22.5582171-84.52083485 0L250.30081877 471.19378659c-23.29754397 22.5582171-23.29754397 59.14385977 0 81.63105451l438.11491385 423.52280349c11.70233003 11.27968995 26.99767353 16.91837099 42.29534607 16.91837098 15.29883648 0 30.59418112-5.63984498 42.22548878-16.95446471 23.33363769-22.5582171 23.33363769-59.07283854 0-81.63105451L377.04830749 512.02677874" p-id="1279"></path></svg> <?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1683436459815" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="1278" xmlns:xlink="http://www.w3.org/1999/xlink" ><path d="M377.04830749 512.02677874l395.88826112-382.68981248c23.33363769-22.59430969 23.33363769-59.16132466 0-81.68344804-23.33247261-22.5582171-61.18836224-22.5582171-84.52083485 0L250.30081877 471.19378659c-23.29754397 22.5582171-23.29754397 59.14385977 0 81.63105451l438.11491385 423.52280349c11.70233003 11.27968995 26.99767353 16.91837099 42.29534607 16.91837098 15.29883648 0 30.59418112-5.63984498 42.22548878-16.95446471 23.33363769-22.5582171 23.33363769-59.07283854 0-81.63105451L377.04830749 512.02677874" p-id="1279"></path></svg>
\ No newline at end of file \ No newline at end of file
client/src/constants/flow/ModuleTemplate.ts
...@@ -371,7 +371,11 @@ export const EmptyModule: FlowModuleTemplateType = { ...@@ -371,7 +371,11 @@ export const EmptyModule: FlowModuleTemplateType = {
export const ModuleTemplates = [ export const ModuleTemplates = [
{ {
label: '输入模块', label: '输入模块',
list: [UserInputModule, HistoryModule, VariableModule, UserGuideModule] list: [UserInputModule, HistoryModule]
},
{
label: '引导模块',
list: [UserGuideModule, VariableModule]
}, },
{ {
label: '内容生成', label: '内容生成',
......
client/src/pages/app/detail/components/AdEdit/components/TemplateList.tsx
import React from 'react'; import React, { useMemo } from 'react';
import { Box, Flex } from '@chakra-ui/react'; import { Box, Flex } from '@chakra-ui/react';
import { ModuleTemplates } from '@/constants/flow/ModuleTemplate'; import { ModuleTemplates } from '@/constants/flow/ModuleTemplate';
import { FlowModuleTemplateType } from '@/types/flow'; import { FlowModuleTemplateType } from '@/types/flow';
import type { XYPosition } from 'reactflow'; import type { Node, XYPosition } from 'reactflow';
import { useGlobalStore } from '@/store/global'; import { useGlobalStore } from '@/store/global';
import type { AppModuleItemType } from '@/types/app';
import Avatar from '@/components/Avatar'; import Avatar from '@/components/Avatar';
import { FlowModuleTypeEnum } from '@/constants/flow';
const ModuleTemplateList = ({ const ModuleTemplateList = ({
nodes,
isOpen, isOpen,
onAddNode, onAddNode,
onClose onClose
}: { }: {
nodes?: Node<AppModuleItemType>[];
isOpen: boolean; isOpen: boolean;
onAddNode: (e: { template: FlowModuleTemplateType; position: XYPosition }) => void; onAddNode: (e: { template: FlowModuleTemplateType; position: XYPosition }) => void;
onClose: () => void; onClose: () => void;
}) => { }) => {
const { isPc } = useGlobalStore(); const { isPc } = useGlobalStore();
const filterTemplates = useMemo(() => {
const guideModulesIndex = ModuleTemplates.findIndex((item) => item.label === '引导模块');
const guideModule: {
label: string;
list: FlowModuleTemplateType[];
} = JSON.parse(JSON.stringify(ModuleTemplates[guideModulesIndex]));
if (nodes?.find((item) => item.type === FlowModuleTypeEnum.userGuide)) {
const index = guideModule.list.findIndex(
(item) => item.flowType === FlowModuleTypeEnum.userGuide
);
guideModule.list.splice(index, 1);
}
if (nodes?.find((item) => item.type === FlowModuleTypeEnum.variable)) {
const index = guideModule.list.findIndex(
(item) => item.flowType === FlowModuleTypeEnum.variable
);
guideModule.list.splice(index, 1);
}
return [
...ModuleTemplates.slice(0, guideModulesIndex),
guideModule,
...ModuleTemplates.slice(guideModulesIndex + 1)
];
}, [nodes]);
return ( return (
<> <>
<Box <Box
...@@ -49,7 +81,7 @@ const ModuleTemplateList = ({ ...@@ -49,7 +81,7 @@ const ModuleTemplateList = ({
</Box> </Box>
<Box flex={'1 0 0'} overflow={'overlay'}> <Box flex={'1 0 0'} overflow={'overlay'}>
<Box w={['100%', '330px']} mx={'auto'}> <Box w={['100%', '330px']} mx={'auto'}>
{ModuleTemplates.map((item) => {filterTemplates.map((item) =>
item.list.map((item) => ( item.list.map((item) => (
<Flex <Flex
key={item.name} key={item.name}
...@@ -68,11 +100,11 @@ const ModuleTemplateList = ({ ...@@ -68,11 +100,11 @@ const ModuleTemplateList = ({
}} }}
onClick={(e) => { onClick={(e) => {
if (isPc) return; if (isPc) return;
onClose();
onAddNode({ onAddNode({
template: item, template: item,
position: { x: e.clientX, y: e.clientY } 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'} />
......
client/src/pages/app/detail/components/AdEdit/index.tsx
...@@ -95,12 +95,12 @@ const AppEdit = ({ app, fullScreen, onFullScreen }: Props) => { ...@@ -95,12 +95,12 @@ const AppEdit = ({ app, fullScreen, onFullScreen }: Props) => {
const { x, y, zoom } = useViewport(); const { x, y, zoom } = useViewport();
const [nodes, setNodes, onNodesChange] = useNodesState<FlowModuleItemType>([]); const [nodes, setNodes, onNodesChange] = useNodesState<FlowModuleItemType>([]);
const [edges, setEdges, onEdgesChange] = useEdgesState([]); const [edges, setEdges, onEdgesChange] = useEdgesState([]);
const [loaded, setLoaded] = useState(false);
const { const {
isOpen: isOpenTemplate, isOpen: isOpenTemplate,
onOpen: onOpenTemplate, onOpen: onOpenTemplate,
onClose: onCloseTemplate onClose: onCloseTemplate
} = useDisclosure(); } = useDisclosure();
const [testModules, setTestModules] = useState<AppModuleItemType[]>(); const [testModules, setTestModules] = useState<AppModuleItemType[]>();
const onFixView = useCallback(() => { const onFixView = useCallback(() => {
...@@ -111,6 +111,48 @@ const AppEdit = ({ app, fullScreen, onFullScreen }: Props) => { ...@@ -111,6 +111,48 @@ const AppEdit = ({ app, fullScreen, onFullScreen }: Props) => {
}, 100); }, 100);
}, []); }, []);
const flow2AppModules = useCallback(() => {
const modules: AppModuleItemType[] = nodes.map((item) => ({
moduleId: item.data.moduleId,
position: item.position,
flowType: item.data.flowType,
inputs: item.data.inputs.map((item) => ({
key: item.key,
value: item.value,
connected: item.type !== FlowInputItemTypeEnum.target
})),
outputs: item.data.outputs.map((item) => ({
key: item.key,
targets: [] as FlowOutputTargetItemType[]
}))
}));
// update inputs and outputs
modules.forEach((module) => {
module.inputs.forEach((input) => {
input.connected =
input.connected ||
!!edges.find(
(edge) => edge.target === module.moduleId && edge.targetHandle === input.key
);
});
module.outputs.forEach((output) => {
output.targets = edges
.filter(
(edge) =>
edge.source === module.moduleId &&
edge.sourceHandle === output.key &&
edge.targetHandle
)
.map((edge) => ({
moduleId: edge.target,
key: edge.targetHandle || ''
}));
});
});
return modules;
}, [edges, nodes]);
const onChangeNode = useCallback( const onChangeNode = useCallback(
({ moduleId, key, type = 'inputs', value, valueKey = 'value' }: FlowModuleItemChangeProps) => { ({ moduleId, key, type = 'inputs', value, valueKey = 'value' }: FlowModuleItemChangeProps) => {
setNodes((nodes) => setNodes((nodes) =>
...@@ -176,48 +218,6 @@ const AppEdit = ({ app, fullScreen, onFullScreen }: Props) => { ...@@ -176,48 +218,6 @@ const AppEdit = ({ app, fullScreen, onFullScreen }: Props) => {
}, },
[onChangeNode, onDelNode, setNodes, x, y, zoom] [onChangeNode, onDelNode, setNodes, x, y, zoom]
); );
const flow2AppModules = useCallback(() => {
const modules: AppModuleItemType[] = nodes.map((item) => ({
moduleId: item.data.moduleId,
position: item.position,
flowType: item.data.flowType,
inputs: item.data.inputs.map((item) => ({
key: item.key,
value: item.value,
connected: item.type !== FlowInputItemTypeEnum.target
})),
outputs: item.data.outputs.map((item) => ({
key: item.key,
targets: [] as FlowOutputTargetItemType[]
}))
}));
// update inputs and outputs
modules.forEach((module) => {
module.inputs.forEach((input) => {
input.connected =
input.connected ||
!!edges.find(
(edge) => edge.target === module.moduleId && edge.targetHandle === input.key
);
});
module.outputs.forEach((output) => {
output.targets = edges
.filter(
(edge) =>
edge.source === module.moduleId &&
edge.sourceHandle === output.key &&
edge.targetHandle
)
.map((edge) => ({
moduleId: edge.target,
key: edge.targetHandle || ''
}));
});
});
return modules;
}, [edges, nodes]);
const onDelConnect = useCallback( const onDelConnect = useCallback(
(id: string) => { (id: string) => {
setEdges((state) => state.filter((item) => item.id !== id)); setEdges((state) => state.filter((item) => item.id !== id));
...@@ -274,7 +274,6 @@ const AppEdit = ({ app, fullScreen, onFullScreen }: Props) => { ...@@ -274,7 +274,6 @@ const AppEdit = ({ app, fullScreen, onFullScreen }: Props) => {
) )
); );
setLoaded(true);
onFixView(); onFixView();
}, },
[onDelConnect, setEdges, setNodes, onFixView, onChangeNode, onDelNode] [onDelConnect, setEdges, setNodes, onFixView, onChangeNode, onDelNode]
...@@ -296,10 +295,10 @@ const AppEdit = ({ app, fullScreen, onFullScreen }: Props) => { ...@@ -296,10 +295,10 @@ const AppEdit = ({ app, fullScreen, onFullScreen }: Props) => {
> >
{fullScreen ? ( {fullScreen ? (
<> <>
<MyTooltip label={'取消全屏'} offset={[10, 10]}> <MyTooltip label={'返回'} offset={[10, 10]}>
<IconButton <IconButton
size={'sm'} size={'sm'}
icon={<MyIcon name={'fullScreenLight'} w={['14px', '16px']} />} icon={<MyIcon name={'back'} w={'14px'} />}
borderRadius={'md'} borderRadius={'md'}
borderColor={'myGray.300'} borderColor={'myGray.300'}
variant={'base'} variant={'base'}
...@@ -425,7 +424,12 @@ const AppEdit = ({ app, fullScreen, onFullScreen }: Props) => { ...@@ -425,7 +424,12 @@ const AppEdit = ({ app, fullScreen, onFullScreen }: Props) => {
<Controls position={'bottom-right'} style={{ display: 'flex' }} showInteractive={false} /> <Controls position={'bottom-right'} style={{ display: 'flex' }} showInteractive={false} />
</ReactFlow> </ReactFlow>
<TemplateList isOpen={isOpenTemplate} onAddNode={onAddNode} onClose={onCloseTemplate} /> <TemplateList
isOpen={isOpenTemplate}
nodes={nodes}
onAddNode={onAddNode}
onClose={onCloseTemplate}
/>
<ChatTest <ChatTest
ref={ChatTestRef} ref={ChatTestRef}
modules={testModules} modules={testModules}
......
client/src/pages/app/detail/components/OverView.tsx deleted 100644 → 0
import React, { useCallback, useState } from 'react';
import { Box, Flex, Button, Grid, useTheme, IconButton } from '@chakra-ui/react';
import { useQuery } from '@tanstack/react-query';
import { useRouter } from 'next/router';
import { useUserStore } from '@/store/user';
import { useToast } from '@/hooks/useToast';
import { useLoading } from '@/hooks/useLoading';
import { delModelById } from '@/api/app';
import { useConfirm } from '@/hooks/useConfirm';
import { AppSchema } from '@/types/mongoSchema';
import dynamic from 'next/dynamic';
import Avatar from '@/components/Avatar';
import MyIcon from '@/components/Icon';
import TotalUsage from './Charts/TotalUsage';
import MyTooltip from '@/components/MyTooltip';
const InfoModal = dynamic(() => import('./InfoModal'));
const OverView = ({ appId }: { appId: string }) => {
const theme = useTheme();
const { toast } = useToast();
const router = useRouter();
const { Loading, setIsLoading } = useLoading();
const { appDetail, loadAppDetail } = useUserStore();
const { openConfirm, ConfirmChild } = useConfirm({
content: '确认删除该应用?'
});
const [settingAppInfo, setSettingAppInfo] = useState<AppSchema>();
/* 点击删除 */
const handleDelModel = useCallback(async () => {
if (!appDetail) return;
setIsLoading(true);
try {
await delModelById(appDetail._id);
toast({
title: '删除成功',
status: 'success'
});
router.replace(`/app/list`);
} catch (err: any) {
toast({
title: err?.message || '删除失败',
status: 'error'
});
}
setIsLoading(false);
}, [appDetail, setIsLoading, toast, router]);
// load app data
useQuery([appId], () => loadAppDetail(appId, true), {
enabled: false
});
return (
<Box h={'100%'} display={['block', 'flex']} flexDirection={'column'} position={'relative'}>
<Grid
gridTemplateColumns={['1fr', 'repeat(2,1fr)']}
gridGap={[2, 4, 6]}
pt={[0, 7]}
px={[3, 5, 8]}
>
<Box>
<Box mb={2} fontSize={['md', 'xl']}>
基本信息
</Box>
<Box
border={theme.borders.base}
borderRadius={'lg'}
px={5}
py={4}
bg={'myBlue.100'}
position={'relative'}
>
<Flex alignItems={'center'} py={2}>
<MyTooltip label={'选择头像'}>
<Avatar src={appDetail.avatar} borderRadius={'md'} w={'28px'} />
</MyTooltip>
<Box ml={3} fontWeight={'bold'} fontSize={'lg'}>
{appDetail.name}
</Box>
<IconButton
className="delete"
position={'absolute'}
top={4}
right={4}
size={'sm'}
icon={<MyIcon name={'delete'} w={'14px'} />}
variant={'base'}
borderRadius={'md'}
aria-label={'delete'}
_hover={{
bg: 'myGray.100',
color: 'red.600'
}}
onClick={openConfirm(handleDelModel)}
/>
</Flex>
<Box
h={'68px'}
flex={1}
my={2}
className={'textEllipsis3'}
wordBreak={'break-all'}
color={'myGray.600'}
>
{appDetail.intro || '快来给应用一个介绍~'}
</Box>
<Flex>
<Button
size={['sm', 'md']}
variant={'base'}
leftIcon={<MyIcon name={'chatLight'} w={'16px'} />}
onClick={() => router.push(`/chat?appId=${appId}`)}
>
对话
</Button>
<Button
mx={3}
size={['sm', 'md']}
variant={'base'}
leftIcon={<MyIcon name={'shareLight'} w={'16px'} />}
onClick={() => {
router.replace({
query: {
appId,
currentTab: 'share'
}
});
}}
>
分享
</Button>
<Button
size={['sm', 'md']}
variant={'base'}
leftIcon={<MyIcon name={'settingLight'} w={'16px'} />}
onClick={() => setSettingAppInfo(appDetail)}
>
设置
</Button>
</Flex>
</Box>
</Box>
<Flex flexDirection={'column'}>
<Box mb={2} fontSize={['md', 'xl']}>
近 14 日消费
</Box>
<Box flex={'1 0 0'} boxShadow={theme.shadows.base} borderRadius={'lg'} px={5} py={4}>
<TotalUsage appId={appId} />
</Box>
</Flex>
</Grid>
{settingAppInfo && (
<InfoModal defaultApp={settingAppInfo} onClose={() => setSettingAppInfo(undefined)} />
)}
<ConfirmChild />
<Loading fixed={false} />
</Box>
);
};
export default OverView;
client/src/pages/app/detail/index.tsx
...@@ -9,16 +9,12 @@ import { useQuery } from '@tanstack/react-query'; ...@@ -9,16 +9,12 @@ import { useQuery } from '@tanstack/react-query';
import Tabs from '@/components/Tabs'; import Tabs from '@/components/Tabs';
import SideTabs from '@/components/SideTabs'; import SideTabs from '@/components/SideTabs';
import OverView from './components/OverView';
import Avatar from '@/components/Avatar'; import Avatar from '@/components/Avatar';
import MyIcon from '@/components/Icon'; import MyIcon from '@/components/Icon';
import PageContainer from '@/components/PageContainer'; import PageContainer from '@/components/PageContainer';
import Loading from '@/components/Loading'; import Loading from '@/components/Loading';
import BasicEdit from './components/BasicEdit';
const BasicEdit = dynamic(() => import('./components/BasicEdit'), {
ssr: false,
loading: () => <Loading />
});
const AdEdit = dynamic(() => import('./components/AdEdit'), { const AdEdit = dynamic(() => import('./components/AdEdit'), {
ssr: false, ssr: false,
loading: () => <Loading /> loading: () => <Loading />
...@@ -31,7 +27,6 @@ const API = dynamic(() => import('./components/API'), { ...@@ -31,7 +27,6 @@ const API = dynamic(() => import('./components/API'), {
}); });
enum TabEnum { enum TabEnum {
'overview' = 'overview',
'basicEdit' = 'basicEdit', 'basicEdit' = 'basicEdit',
'adEdit' = 'adEdit', 'adEdit' = 'adEdit',
'share' = 'share', 'share' = 'share',
...@@ -59,8 +54,7 @@ const AppDetail = ({ currentTab }: { currentTab: `${TabEnum}` }) => { ...@@ -59,8 +54,7 @@ const AppDetail = ({ currentTab }: { currentTab: `${TabEnum}` }) => {
const tabList = useMemo( const tabList = useMemo(
() => [ () => [
{ label: '概览', id: TabEnum.overview, icon: 'overviewLight' }, { label: '简易配置', id: TabEnum.basicEdit, icon: 'overviewLight' },
{ label: '简易编排', id: TabEnum.basicEdit, icon: 'edit' },
{ label: '高级编排', id: TabEnum.adEdit, icon: 'settingLight' }, { label: '高级编排', id: TabEnum.adEdit, icon: 'settingLight' },
{ label: '链接分享', id: TabEnum.share, icon: 'shareLight' }, { label: '链接分享', id: TabEnum.share, icon: 'shareLight' },
{ label: 'API访问', id: TabEnum.API, icon: 'apiLight' }, { label: 'API访问', id: TabEnum.API, icon: 'apiLight' },
...@@ -174,13 +168,12 @@ const AppDetail = ({ currentTab }: { currentTab: `${TabEnum}` }) => { ...@@ -174,13 +168,12 @@ const AppDetail = ({ currentTab }: { currentTab: `${TabEnum}` }) => {
/> />
</Box> </Box>
<Box flex={'1 0 0'} h={[0, '100%']} overflow={['overlay', '']}> <Box flex={'1 0 0'} h={[0, '100%']} overflow={['overlay', '']}>
{currentTab === TabEnum.overview && <OverView appId={appId} />}
{currentTab === TabEnum.basicEdit && <BasicEdit appId={appId} />} {currentTab === TabEnum.basicEdit && <BasicEdit appId={appId} />}
{currentTab === TabEnum.adEdit && appDetail && ( {currentTab === TabEnum.adEdit && appDetail && (
<AdEdit <AdEdit
app={appDetail} app={appDetail}
fullScreen={true} fullScreen={true}
onFullScreen={() => setCurrentTab(TabEnum.overview)} onFullScreen={() => setCurrentTab(TabEnum.basicEdit)}
/> />
)} )}
{currentTab === TabEnum.API && <API appId={appId} />} {currentTab === TabEnum.API && <API appId={appId} />}
...@@ -192,7 +185,7 @@ const AppDetail = ({ currentTab }: { currentTab: `${TabEnum}` }) => { ...@@ -192,7 +185,7 @@ const AppDetail = ({ currentTab }: { currentTab: `${TabEnum}` }) => {
}; };
export async function getServerSideProps(context: any) { export async function getServerSideProps(context: any) {
const currentTab = context?.query?.currentTab || TabEnum.overview; const currentTab = context?.query?.currentTab || TabEnum.basicEdit;
return { return {
props: { currentTab } props: { currentTab }
......
client/src/pages/chat/components/SliderApps.tsx
...@@ -21,7 +21,7 @@ const SliderApps = ({ appId }: { appId: string }) => { ...@@ -21,7 +21,7 @@ const SliderApps = ({ appId }: { appId: string }) => {
px={3} px={3}
borderRadius={'md'} borderRadius={'md'}
_hover={{ bg: 'myGray.200' }} _hover={{ bg: 'myGray.200' }}
onClick={() => router.push('/app/list')} onClick={() => router.back()}
> >
<IconButton <IconButton
mr={3} mr={3}
......
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