Skip to content

赵月辉 / fastgpt-migrated

Go to a project
Commit 6bb10ca1 by heheer Committed by GitHub
Options

perf: optimize simple app history (#2782) 

* simple app history

* ui

* extract context content into hooks
parent 7aa75f8e
Showing with 380 additions and 364 deletions
packages/web/components/common/Icon/constants.ts
......@@ -40,6 +40,7 @@ export const iconPaths = {
'common/language/en': () => import('./icons/common/language/en.svg'),
'common/language/zh': () => import('./icons/common/language/zh.svg'),
'common/leftArrowLight': () => import('./icons/common/leftArrowLight.svg'),
'common/line': () => import('./icons/common/line.svg'),
'common/lineChange': () => import('./icons/common/lineChange.svg'),
'common/linkBlue': () => import('./icons/common/linkBlue.svg'),
'common/list': () => import('./icons/common/list.svg'),
......
packages/web/components/common/Icon/icons/common/line.svg 0 → 100644
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 5 12" fill="none">
<path d="M4.42017 1.30151L0.999965 10.6984" stroke="#DFE2EA" stroke-linecap="round"/>
</svg>
\ No newline at end of file
packages/web/components/common/MyDrawer/CustomRightDrawer.tsx
......@@ -16,6 +16,8 @@ const CustomRightDrawer = ({
iconSrc,
title,
maxW = ['90vw', '30vw'],
top = 16,
bottom = 0,
children,
isLoading,
showMask = true,
......@@ -31,8 +33,8 @@ const CustomRightDrawer = ({
zIndex={100}
maxW={maxW}
w={'100%'}
top={'60px'}
bottom={0}
top={top}
bottom={bottom}
borderLeftRadius={'lg'}
border={'base'}
boxShadow={'2'}
......
projects/app/src/components/common/folder/Path.tsx
......@@ -2,6 +2,7 @@ import { Box, BoxProps, Flex } from '@chakra-ui/react';
import { ParentTreePathItemType } from '@fastgpt/global/common/parentFolder/type';
import React, { useMemo } from 'react';
import { useTranslation } from 'next-i18next';
import MyIcon from '@fastgpt/web/components/common/Icon';
const FolderPath = (props: {
paths: ParentTreePathItemType[];
......@@ -35,7 +36,7 @@ const FolderPath = (props: {
return paths.length === 0 && !!FirstPathDom ? (
<>{FirstPathDom}</>
) : (
<Flex flex={1} ml={-1.5}>
<Flex flex={1}>
{concatPaths.map((item, i) => (
<Flex key={item.parentId || i} alignItems={'center'}>
<Box
......@@ -51,6 +52,7 @@ const FolderPath = (props: {
}
: {
cursor: 'pointer',
fontWeight: 'medium',
color: 'myGray.500',
_hover: {
bg: 'myGray.100',
......@@ -64,9 +66,7 @@ const FolderPath = (props: {
{item.parentName}
</Box>
{i !== concatPaths.length - 1 && (
<Box mx={1.5} color={'myGray.500'}>
/
</Box>
<MyIcon name={'common/line'} color={'myGray.500'} mx={1} width={'5px'} />
)}
</Flex>
))}
......
projects/app/src/pages/app/detail/components/Plugin/Header.tsx
import React, { useCallback, useEffect, useMemo, useState } from 'react';
import React, { useCallback, useMemo, useState } from 'react';
import {
Box,
Flex,
......@@ -22,18 +22,16 @@ import { useRouter } from 'next/router';
import AppCard from '../WorkflowComponents/AppCard';
import { uiWorkflow2StoreWorkflow } from '../WorkflowComponents/utils';
import { useSystem } from '@fastgpt/web/hooks/useSystem';
import MyPopover from '@fastgpt/web/components/common/MyPopover';
import MyBox from '@fastgpt/web/components/common/MyBox';
import { useRequest2 } from '@fastgpt/web/hooks/useRequest';
import MyModal from '@fastgpt/web/components/common/MyModal';
import { compareSnapshot } from '@/web/core/workflow/utils';
import SaveAndPublishModal from '../WorkflowComponents/Flow/components/SaveAndPublish';
import { formatTime2YMDHMS } from '@fastgpt/global/common/string/time';
import { useToast } from '@fastgpt/web/hooks/useToast';
import { useDebounceEffect } from 'ahooks';
import { useSystemStore } from '@/web/common/system/useSystemStore';
import SaveButton from '../Workflow/components/SaveButton';
const PublishHistories = dynamic(() => import('../WorkflowPublishHistoriesSlider'));
const PublishHistories = dynamic(() => import('../PublishHistoriesSlider'));
const Header = () => {
const { t } = useTranslation();
......@@ -48,12 +46,6 @@ const Header = () => {
onOpen: onOpenBackConfirm,
onClose: onCloseBackConfirm
} = useDisclosure();
const {
isOpen: isSaveAndPublishModalOpen,
onOpen: onSaveAndPublishModalOpen,
onClose: onSaveAndPublishModalClose
} = useDisclosure();
const [isSave, setIsSave] = useState(false);
const {
flowData2StoreData,
......@@ -65,7 +57,9 @@ const Header = () => {
edges,
past,
future,
setPast
setPast,
saveSnapshot,
resetSnapshot
} = useContextSelector(WorkflowContext, (v) => v);
const { lastAppListRouteType } = useSystemStore();
......@@ -225,81 +219,11 @@ const Header = () => {
{t('common:core.workflow.Run')}
</Button>
{!historiesDefaultData && (
<MyPopover
placement={'bottom-end'}
hasArrow={false}
offset={[2, 4]}
w={'116px'}
onOpenFunc={() => setIsSave(true)}
onCloseFunc={() => setIsSave(false)}
trigger={'hover'}
Trigger={
<Button
size={'sm'}
rightIcon={
<MyIcon
name={isSave ? 'core/chat/chevronUp' : 'core/chat/chevronDown'}
w={['14px', '16px']}
/>
}
>
<Box>{t('common:common.Save')}</Box>
</Button>
}
>
{({ onClose }) => (
<MyBox p={1.5}>
<MyBox
display={'flex'}
size={'md'}
px={1}
py={1.5}
rounded={'4px'}
_hover={{ color: 'primary.600', bg: 'rgba(17, 24, 36, 0.05)' }}
cursor={'pointer'}
isLoading={loading}
onClick={async () => {
await onClickSave({});
toast({
status: 'success',
title: t('app:saved_success'),
position: 'top-right'
});
onClose();
setIsSave(false);
}}
>
<MyIcon name={'core/workflow/upload'} w={'16px'} mr={2} />
<Box fontSize={'sm'}>{t('common:core.workflow.Save to cloud')}</Box>
</MyBox>
<Flex
px={1}
py={1.5}
rounded={'4px'}
_hover={{ color: 'primary.600', bg: 'rgba(17, 24, 36, 0.05)' }}
cursor={'pointer'}
onClick={() => {
const data = flowData2StoreDataAndCheck();
if (data) {
onSaveAndPublishModalOpen();
}
onClose();
setIsSave(false);
}}
>
<MyIcon name={'core/workflow/publish'} w={'16px'} mr={2} />
<Box fontSize={'sm'}>{t('common:core.workflow.Save and publish')}</Box>
{isSaveAndPublishModalOpen && (
<SaveAndPublishModal
isLoading={loading}
onClose={onSaveAndPublishModalClose}
onClickSave={onClickSave}
/>
)}
</Flex>
</MyBox>
)}
</MyPopover>
<SaveButton
isLoading={loading}
onClickSave={onClickSave}
checkData={flowData2StoreDataAndCheck}
/>
)}
</HStack>
)}
......@@ -309,6 +233,9 @@ const Header = () => {
onClose={() => {
setHistoriesDefaultData(undefined);
}}
past={past}
saveSnapshot={saveSnapshot}
resetSnapshot={resetSnapshot}
/>
)}
<MyModal
......@@ -356,16 +283,12 @@ const Header = () => {
loading,
isV2Workflow,
historiesDefaultData,
isSave,
onClickSave,
setHistoriesDefaultData,
appDetail.chatConfig,
flowData2StoreDataAndCheck,
setWorkflowTestData,
isSaveAndPublishModalOpen,
onSaveAndPublishModalClose,
toast,
onSaveAndPublishModalOpen
toast
]);
return Render;
......
projects/app/src/pages/app/detail/components/RouteTab.tsx
......@@ -3,13 +3,11 @@ import React, { useCallback, useMemo } from 'react';
import { AppContext, TabEnum } from './context';
import { useRouter } from 'next/router';
import { useTranslation } from 'next-i18next';
import { useI18n } from '@/web/context/I18n';
import { useContextSelector } from 'use-context-selector';
import { AppTypeEnum } from '@fastgpt/global/core/app/constants';
const RouteTab = () => {
const { t } = useTranslation();
const { appT } = useI18n();
const router = useRouter();
const { appDetail, currentTab } = useContextSelector(AppContext, (v) => v);
......@@ -28,20 +26,21 @@ const RouteTab = () => {
const tabList = useMemo(
() => [
{
label: appDetail.type === AppTypeEnum.plugin ? appT('setting_plugin') : appT('setting_app'),
label:
appDetail.type === AppTypeEnum.plugin ? t('app:setting_plugin') : t('app:setting_app'),
id: TabEnum.appEdit
},
...(appDetail.permission.hasManagePer
? [
{
label: appT('publish_channel'),
label: t('app:publish_channel'),
id: TabEnum.publish
},
{ label: appT('chat_logs'), id: TabEnum.logs }
{ label: t('app:chat_logs'), id: TabEnum.logs }
]
: [])
],
[appDetail.permission.hasManagePer, appDetail.type, appT]
[appDetail.permission.hasManagePer, appDetail.type]
);
return (
......@@ -51,6 +50,7 @@ const RouteTab = () => {
key={tab.id}
px={2}
py={0.5}
fontWeight={'medium'}
{...(currentTab === tab.id
? {
color: 'primary.700'
......
projects/app/src/pages/app/detail/components/SimpleApp/Edit.tsx
......@@ -15,21 +15,46 @@ import { cardStyles } from '../constants';
import styles from './styles.module.scss';
import { useSystem } from '@fastgpt/web/hooks/useSystem';
import { storeEdgesRenderEdge, storeNode2FlowNode } from '@/web/core/workflow/utils';
import { useTranslation } from 'next-i18next';
import { uiWorkflow2StoreWorkflow } from '../WorkflowComponents/utils';
import { SnapshotsType } from '../WorkflowComponents/context';
const Edit = ({
appForm,
setAppForm
setAppForm,
past,
saveSnapshot
}: {
appForm: AppSimpleEditFormType;
setAppForm: React.Dispatch<React.SetStateAction<AppSimpleEditFormType>>;
past: SnapshotsType[];
saveSnapshot: (
this: any,
{ pastNodes, pastEdges, chatConfig, customTitle, isSaved }: any
) => Promise<boolean>;
}) => {
const { isPc } = useSystem();
const { loadAllDatasets } = useDatasetStore();
const { appDetail } = useContextSelector(AppContext, (v) => v);
const { t } = useTranslation();
// show selected dataset
useMount(() => {
loadAllDatasets();
saveSnapshot({
pastNodes: appDetail.modules?.map((item) => storeNode2FlowNode({ item, t })),
pastEdges: appDetail.edges?.map((item) => storeEdgesRenderEdge({ edge: item })),
chatConfig: appDetail.chatConfig,
isSaved: true
});
if (past.length > 0) {
const storeWorkflow = uiWorkflow2StoreWorkflow(past[0]);
const currentAppForm = appWorkflow2Form({ ...storeWorkflow, chatConfig: past[0].chatConfig });
setAppForm(currentAppForm);
return;
}
setAppForm(
appWorkflow2Form({
nodes: appDetail.modules,
......@@ -52,7 +77,7 @@ const Edit = ({
display={['block', 'flex']}
flex={'1 0 0'}
h={0}
pt={[2, 1.5]}
mt={[4, 0]}
gap={1}
borderRadius={'lg'}
overflowY={['auto', 'unset']}
......@@ -73,7 +98,7 @@ const Edit = ({
</Box>
</Box>
{isPc && (
<Box {...cardStyles} boxShadow={'3'} flex={'2 0 0'} w={0}>
<Box {...cardStyles} boxShadow={'3'} flex={'2 0 0'} w={0} mb={3}>
<ChatTest appForm={appForm} />
</Box>
)}
......
projects/app/src/pages/app/detail/components/SimpleApp/Header.tsx
import React, { useCallback, useMemo, useState } from 'react';
import React, { useCallback, useState } from 'react';
import { useContextSelector } from 'use-context-selector';
import { AppContext } from '../context';
import FolderPath from '@/components/common/folder/Path';
import { useRequest2 } from '@fastgpt/web/hooks/useRequest';
import { getAppFolderPath } from '@/web/core/app/api/app';
import { Box, Button, Flex, IconButton } from '@chakra-ui/react';
import { Box, Flex, IconButton } from '@chakra-ui/react';
import { useRouter } from 'next/router';
import RouteTab from '../RouteTab';
import { useTranslation } from 'next-i18next';
import PopoverConfirm from '@fastgpt/web/components/common/MyPopover/PopoverConfirm';
import { AppSimpleEditFormType } from '@fastgpt/global/core/app/type';
import { AppTypeEnum } from '@fastgpt/global/core/app/constants';
import { form2AppWorkflow } from '@/web/core/app/utils';
import { TabEnum } from '../context';
import PublishHistoriesSlider, { type InitProps } from '../PublishHistoriesSlider';
import { appWorkflow2Form } from '@fastgpt/global/core/app/utils';
import MyIcon from '@fastgpt/web/components/common/Icon';
import { compareWorkflow } from '@/web/core/workflow/utils';
import MyTag from '@fastgpt/web/components/common/Tag/index';
import { publishStatusStyle } from '../constants';
import MyTooltip from '@fastgpt/web/components/common/MyTooltip';
import { useSystem } from '@fastgpt/web/hooks/useSystem';
import { useToast } from '@fastgpt/web/hooks/useToast';
import { formatTime2YMDHMS } from '@fastgpt/global/common/string/time';
import { useSystemStore } from '@/web/common/system/useSystemStore';
import { useDatasetStore } from '@/web/core/dataset/store/dataset';
import SaveButton from '../Workflow/components/SaveButton';
import dynamic from 'next/dynamic';
import { useDebounceEffect } from 'ahooks';
import { InitProps, SnapshotsType } from '../WorkflowComponents/context';
import { appWorkflow2Form } from '@fastgpt/global/core/app/utils';
import {
compareSnapshot,
storeEdgesRenderEdge,
storeNode2FlowNode
} from '@/web/core/workflow/utils';
import { uiWorkflow2StoreWorkflow } from '../WorkflowComponents/utils';
const PublishHistories = dynamic(() => import('../PublishHistoriesSlider'));
const Header = ({
appForm,
setAppForm
setAppForm,
past,
setPast,
saveSnapshot
}: {
appForm: AppSimpleEditFormType;
setAppForm: React.Dispatch<React.SetStateAction<AppSimpleEditFormType>>;
setAppForm: (form: AppSimpleEditFormType) => void;
past: SnapshotsType[];
setPast: (value: React.SetStateAction<SnapshotsType[]>) => void;
saveSnapshot: (
this: any,
{ pastNodes, pastEdges, chatConfig, customTitle, isSaved }: any
) => Promise<boolean>;
}) => {
const { t } = useTranslation();
const { isPc } = useSystem();
const router = useRouter();
const { toast } = useToast();
const { appId, appDetail, onSaveApp, currentTab } = useContextSelector(AppContext, (v) => v);
const { lastAppListRouteType } = useSystemStore();
const { allDatasets } = useDatasetStore();
......@@ -45,8 +60,10 @@ const Header = ({
manual: false,
refreshDeps: [appId]
});
const onclickRoute = useCallback(
const onClickRoute = useCallback(
(parentId: string) => {
localStorage.removeItem(`${appDetail._id}-past`);
router.push({
pathname: '/app/list',
query: {
......@@ -58,58 +75,98 @@ const Header = ({
[router, lastAppListRouteType]
);
const isPublished = useMemo(() => {
const data = form2AppWorkflow(appForm, t);
return compareWorkflow(
{
nodes: appDetail.modules,
edges: [],
chatConfig: appDetail.chatConfig
},
{
nodes: data.nodes,
edges: [],
chatConfig: data.chatConfig
}
);
}, [appDetail.chatConfig, appDetail.modules, appForm, allDatasets, t]);
const [isPublished, setIsPublished] = useState(false);
const onSubmitPublish = useCallback(
async (data: AppSimpleEditFormType) => {
const { nodes, edges } = form2AppWorkflow(data, t);
const { runAsync: onClickSave, loading } = useRequest2(
async ({
isPublish,
versionName = formatTime2YMDHMS(new Date())
}: {
isPublish?: boolean;
versionName?: string;
}) => {
const { nodes, edges } = form2AppWorkflow(appForm, t);
await onSaveApp({
nodes,
edges,
chatConfig: data.chatConfig,
chatConfig: appForm.chatConfig,
type: AppTypeEnum.simple,
isPublish: true,
versionName: formatTime2YMDHMS(new Date())
isPublish,
versionName
});
toast({
status: 'success',
title: t('app:publish_success'),
position: 'top-right'
setPast((prevPast) =>
prevPast.map((item, index) =>
index === 0
? {
...item,
isSaved: true
}
: item
)
);
}
);
const [historiesDefaultData, setHistoriesDefaultData] = useState<InitProps>();
const resetSnapshot = (data: SnapshotsType) => {
const storeWorkflow = uiWorkflow2StoreWorkflow(data);
const currentAppForm = appWorkflow2Form({ ...storeWorkflow, chatConfig: data.chatConfig });
setAppForm(currentAppForm);
};
useDebounceEffect(
() => {
const data = form2AppWorkflow(appForm, t);
saveSnapshot({
pastNodes: data.nodes?.map((item) => storeNode2FlowNode({ item, t })),
pastEdges: data.edges?.map((item) => storeEdgesRenderEdge({ edge: item })),
chatConfig: data.chatConfig
});
},
[onSaveApp, t, toast]
[appForm],
{ wait: 500 }
);
const [historiesDefaultData, setHistoriesDefaultData] = useState<InitProps>();
useDebounceEffect(
() => {
const savedSnapshot = past.find((snapshot) => snapshot.isSaved);
const data = form2AppWorkflow(appForm, t);
const val = compareSnapshot(
{
nodes: savedSnapshot?.nodes,
edges: [],
chatConfig: savedSnapshot?.chatConfig
},
{
nodes: data.nodes?.map((item) => storeNode2FlowNode({ item, t })),
edges: [],
chatConfig: data.chatConfig
}
);
setIsPublished(val);
},
[past],
{ wait: 500 }
);
return (
<Box>
<Box h={14}>
{!isPc && (
<Flex pt={2} justifyContent={'center'}>
<Flex justifyContent={'center'}>
<RouteTab />
</Flex>
)}
<Flex pt={[2, 3]} alignItems={'flex-start'} position={'relative'}>
<Flex w={'full'} alignItems={'center'} position={'relative'} h={'full'}>
<Box flex={'1'}>
<FolderPath
rootName={t('app:all_apps')}
paths={paths}
hoverStyle={{ color: 'primary.600' }}
onClick={onclickRoute}
onClick={onClickRoute}
fontSize={'14px'}
/>
</Box>
{isPc && (
......@@ -156,36 +213,23 @@ const Header = ({
});
}}
/>
<PopoverConfirm
showCancel
content={t('common:core.app.Publish Confirm')}
Trigger={
<Box>
<MyTooltip label={t('common:core.app.Publish app tip')}>
<Button isDisabled={isPublished}>{t('common:core.app.Publish')}</Button>
</MyTooltip>
</Box>
}
onConfirm={() => onSubmitPublish(appForm)}
/>
<SaveButton isLoading={loading} onClickSave={onClickSave} />
</>
)}
</Flex>
)}
</Flex>
{!!historiesDefaultData && (
<PublishHistoriesSlider
initData={({ nodes, chatConfig }) => {
setAppForm(
appWorkflow2Form({
nodes,
chatConfig
})
);
{historiesDefaultData && currentTab === TabEnum.appEdit && (
<PublishHistories
onClose={() => {
setHistoriesDefaultData(undefined);
}}
onClose={() => setHistoriesDefaultData(undefined)}
defaultData={historiesDefaultData}
past={past}
saveSnapshot={saveSnapshot}
resetSnapshot={resetSnapshot}
top={14}
bottom={3}
/>
)}
</Box>
......
projects/app/src/pages/app/detail/components/SimpleApp/index.tsx
......@@ -9,13 +9,15 @@ import dynamic from 'next/dynamic';
import { Box, Flex } from '@chakra-ui/react';
import { useBeforeunload } from '@fastgpt/web/hooks/useBeforeunload';
import { useTranslation } from 'next-i18next';
import useSnapshots from './useSnapshots';
const Logs = dynamic(() => import('../Logs/index'));
const PublishChannel = dynamic(() => import('../Publish'));
const SimpleEdit = () => {
const { t } = useTranslation();
const { currentTab } = useContextSelector(AppContext, (v) => v);
const { currentTab, appDetail } = useContextSelector(AppContext, (v) => v);
const { past, setPast, saveSnapshot } = useSnapshots(appDetail._id);
const [appForm, setAppForm] = useState(getDefaultAppForm());
......@@ -24,12 +26,18 @@ const SimpleEdit = () => {
});
return (
<Flex h={'100%'} flexDirection={'column'} px={[3, 0]} pr={[3, 3]} pb={3}>
<Header appForm={appForm} setAppForm={setAppForm} />
<Flex h={'100%'} flexDirection={'column'} px={[3, 0]} pr={[3, 3]}>
<Header
appForm={appForm}
setAppForm={setAppForm}
past={past}
setPast={setPast}
saveSnapshot={saveSnapshot}
/>
{currentTab === TabEnum.appEdit ? (
<Edit appForm={appForm} setAppForm={setAppForm} />
<Edit appForm={appForm} setAppForm={setAppForm} past={past} saveSnapshot={saveSnapshot} />
) : (
<Box flex={'1 0 0'} h={0} mt={4}>
<Box flex={'1 0 0'} h={0} mt={[4, 0]}>
{currentTab === TabEnum.publish && <PublishChannel />}
{currentTab === TabEnum.logs && <Logs />}
</Box>
......
projects/app/src/pages/app/detail/components/SimpleApp/useSnapshots.tsx 0 → 100644
import { useLocalStorageState, useMemoizedFn } from 'ahooks';
import { SnapshotsType } from '../WorkflowComponents/context';
import { SetStateAction } from 'react';
import { compareSnapshot } from '@/web/core/workflow/utils';
import { formatTime2YMDHMS } from '@fastgpt/global/common/string/time';
const useSnapshots = (appId: string) => {
const [past, setPast] = useLocalStorageState<SnapshotsType[]>(`${appId}-past-simple`, {
defaultValue: [],
listenStorageChange: true
}) as [SnapshotsType[], (value: SetStateAction<SnapshotsType[]>) => void];
const saveSnapshot = useMemoizedFn(
async ({ pastNodes, pastEdges, chatConfig, customTitle, isSaved }) => {
const pastState = past[0];
const isPastEqual = compareSnapshot(
{
nodes: pastNodes,
edges: pastEdges,
chatConfig: chatConfig
},
{
nodes: pastState?.nodes,
edges: pastState?.edges,
chatConfig: pastState?.chatConfig
}
);
if (isPastEqual) return false;
setPast((past) => [
{
nodes: pastNodes,
edges: pastEdges,
title: customTitle || formatTime2YMDHMS(new Date()),
chatConfig,
isSaved
},
...past.slice(0, 199)
]);
return true;
}
);
return { past, setPast, saveSnapshot };
};
export default useSnapshots;
projects/app/src/pages/app/detail/components/Workflow/Header.tsx
......@@ -22,18 +22,16 @@ import { useRouter } from 'next/router';
import AppCard from '../WorkflowComponents/AppCard';
import { uiWorkflow2StoreWorkflow } from '../WorkflowComponents/utils';
import { useSystem } from '@fastgpt/web/hooks/useSystem';
import MyPopover from '@fastgpt/web/components/common/MyPopover';
import MyBox from '@fastgpt/web/components/common/MyBox';
import { useRequest2 } from '@fastgpt/web/hooks/useRequest';
import MyModal from '@fastgpt/web/components/common/MyModal';
import { compareSnapshot } from '@/web/core/workflow/utils';
import SaveAndPublishModal from '../WorkflowComponents/Flow/components/SaveAndPublish';
import { formatTime2YMDHMS } from '@fastgpt/global/common/string/time';
import { useToast } from '@fastgpt/web/hooks/useToast';
import { useDebounceEffect } from 'ahooks';
import { useSystemStore } from '@/web/common/system/useSystemStore';
import SaveButton from './components/SaveButton';
const PublishHistories = dynamic(() => import('../WorkflowPublishHistoriesSlider'));
const PublishHistories = dynamic(() => import('../PublishHistoriesSlider'));
const Header = () => {
const { t } = useTranslation();
......@@ -48,12 +46,6 @@ const Header = () => {
onOpen: onOpenBackConfirm,
onClose: onCloseBackConfirm
} = useDisclosure();
const {
isOpen: isSaveAndPublishModalOpen,
onOpen: onSaveAndPublishModalOpen,
onClose: onSaveAndPublishModalClose
} = useDisclosure();
const [isSave, setIsSave] = useState(false);
const {
flowData2StoreData,
......@@ -65,7 +57,9 @@ const Header = () => {
edges,
past,
future,
setPast
setPast,
saveSnapshot,
resetSnapshot
} = useContextSelector(WorkflowContext, (v) => v);
const { lastAppListRouteType } = useSystemStore();
......@@ -227,81 +221,11 @@ const Header = () => {
{t('common:core.workflow.Run')}
</Button>
{!historiesDefaultData && (
<MyPopover
placement={'bottom-end'}
hasArrow={false}
offset={[2, 4]}
w={'116px'}
onOpenFunc={() => setIsSave(true)}
onCloseFunc={() => setIsSave(false)}
trigger={'hover'}
Trigger={
<Button
size={'sm'}
rightIcon={
<MyIcon
name={isSave ? 'core/chat/chevronUp' : 'core/chat/chevronDown'}
w={['14px', '16px']}
/>
}
>
<Box>{t('common:common.Save')}</Box>
</Button>
}
>
{({ onClose }) => (
<MyBox p={1.5}>
<MyBox
display={'flex'}
size={'md'}
px={1}
py={1.5}
rounded={'4px'}
_hover={{ color: 'primary.600', bg: 'rgba(17, 24, 36, 0.05)' }}
cursor={'pointer'}
isLoading={loading}
onClick={async () => {
await onClickSave({});
toast({
status: 'success',
title: t('app:saved_success'),
position: 'top-right'
});
onClose();
setIsSave(false);
}}
>
<MyIcon name={'core/workflow/upload'} w={'16px'} mr={2} />
<Box fontSize={'sm'}>{t('common:core.workflow.Save to cloud')}</Box>
</MyBox>
<Flex
px={1}
py={1.5}
rounded={'4px'}
_hover={{ color: 'primary.600', bg: 'rgba(17, 24, 36, 0.05)' }}
cursor={'pointer'}
onClick={() => {
const data = flowData2StoreDataAndCheck();
if (data) {
onSaveAndPublishModalOpen();
}
onClose();
setIsSave(false);
}}
>
<MyIcon name={'core/workflow/publish'} w={'16px'} mr={2} />
<Box fontSize={'sm'}>{t('common:core.workflow.Save and publish')}</Box>
{isSaveAndPublishModalOpen && (
<SaveAndPublishModal
isLoading={loading}
onClose={onSaveAndPublishModalClose}
onClickSave={onClickSave}
/>
)}
</Flex>
</MyBox>
)}
</MyPopover>
<SaveButton
isLoading={loading}
onClickSave={onClickSave}
checkData={flowData2StoreDataAndCheck}
/>
)}
</HStack>
)}
......@@ -311,8 +235,12 @@ const Header = () => {
onClose={() => {
setHistoriesDefaultData(undefined);
}}
past={past}
saveSnapshot={saveSnapshot}
resetSnapshot={resetSnapshot}
/>
)}
<MyModal
isOpen={isOpenBackConfirm}
onClose={onCloseBackConfirm}
......@@ -358,16 +286,13 @@ const Header = () => {
loading,
isV2Workflow,
historiesDefaultData,
isSave,
onClickSave,
setHistoriesDefaultData,
appDetail.chatConfig,
flowData2StoreDataAndCheck,
setWorkflowTestData,
isSaveAndPublishModalOpen,
onSaveAndPublishModalClose,
toast,
onSaveAndPublishModalOpen
past
]);
return Render;
......
projects/app/src/pages/app/detail/components/Workflow/components/SaveButton.tsx 0 → 100644
import { Box, Button, Flex, useDisclosure } from '@chakra-ui/react';
import MyPopover from '@fastgpt/web/components/common/MyPopover';
import React, { useState } from 'react';
import MyIcon from '@fastgpt/web/components/common/Icon';
import { useTranslation } from 'next-i18next';
import MyBox from '@fastgpt/web/components/common/MyBox';
import { useToast } from '@fastgpt/web/hooks/useToast';
import SaveAndPublishModal from '../../WorkflowComponents/Flow/components/SaveAndPublish';
import { StoreNodeItemType } from '@fastgpt/global/core/workflow/type/node';
import { StoreEdgeItemType } from '@fastgpt/global/core/workflow/type/edge';
const SaveButton = ({
isLoading,
onClickSave,
checkData
}: {
isLoading: boolean;
onClickSave: (options: { isPublish?: boolean; versionName?: string }) => Promise<void>;
checkData?: (hideTip?: boolean) =>
| {
nodes: StoreNodeItemType[];
edges: StoreEdgeItemType[];
}
| undefined;
}) => {
const { t } = useTranslation();
const [isSave, setIsSave] = useState(false);
const { toast } = useToast();
const {
isOpen: isSaveAndPublishModalOpen,
onOpen: onSaveAndPublishModalOpen,
onClose: onSaveAndPublishModalClose
} = useDisclosure();
return (
<MyPopover
placement={'bottom-end'}
hasArrow={false}
offset={[2, 4]}
w={'116px'}
onOpenFunc={() => setIsSave(true)}
onCloseFunc={() => setIsSave(false)}
trigger={'hover'}
Trigger={
<Button
size={'sm'}
rightIcon={
<MyIcon
name={isSave ? 'core/chat/chevronUp' : 'core/chat/chevronDown'}
w={['14px', '16px']}
/>
}
>
<Box>{t('common:common.Save')}</Box>
</Button>
}
>
{({ onClose }) => (
<Box p={1.5}>
<MyBox
display={'flex'}
size={'md'}
px={1}
py={1.5}
rounded={'4px'}
_hover={{ color: 'primary.600', bg: 'rgba(17, 24, 36, 0.05)' }}
cursor={'pointer'}
isLoading={isLoading}
onClick={async () => {
await onClickSave({});
toast({
status: 'success',
title: t('app:saved_success'),
position: 'top-right'
});
onClose();
setIsSave(false);
}}
>
<MyIcon name={'core/workflow/upload'} w={'16px'} mr={2} />
<Box fontSize={'sm'}>{t('common:core.workflow.Save to cloud')}</Box>
</MyBox>
<Flex
px={1}
py={1.5}
rounded={'4px'}
_hover={{ color: 'primary.600', bg: 'rgba(17, 24, 36, 0.05)' }}
cursor={'pointer'}
onClick={() => {
const canOpen = !checkData || checkData();
if (canOpen) {
onSaveAndPublishModalOpen();
}
onClose();
setIsSave(false);
}}
>
<MyIcon name={'core/workflow/publish'} w={'16px'} mr={2} />
<Box fontSize={'sm'}>{t('common:core.workflow.Save and publish')}</Box>
{isSaveAndPublishModalOpen && (
<SaveAndPublishModal
isLoading={isLoading}
onClose={onSaveAndPublishModalClose}
onClickSave={onClickSave}
/>
)}
</Flex>
</Box>
)}
</MyPopover>
);
};
export default React.memo(SaveButton);
projects/app/src/pages/app/detail/components/WorkflowComponents/context.tsx
......@@ -39,7 +39,7 @@ import { defaultRunningStatus } from './constants';
import { checkNodeRunStatus } from '@fastgpt/global/core/workflow/runtime/utils';
import { EventNameEnum, eventBus } from '@/web/common/utils/eventbus';
import { getHandleId } from '@fastgpt/global/core/workflow/utils';
import { AppChatConfigType } from '@fastgpt/global/core/app/type';
import { AppChatConfigType, AppSchema } from '@fastgpt/global/core/app/type';
import { AppContext } from '@/pages/app/detail/components/context';
import ChatTest from './Flow/ChatTest';
import { useDisclosure } from '@chakra-ui/react';
......@@ -47,7 +47,6 @@ import { uiWorkflow2StoreWorkflow } from './utils';
import { useTranslation } from 'next-i18next';
import { useRequest2 } from '@fastgpt/web/hooks/useRequest';
import { formatTime2YMDHMS, formatTime2YMDHMW } from '@fastgpt/global/common/string/time';
import type { InitProps } from '@/pages/app/detail/components/PublishHistoriesSlider';
import { cloneDeep } from 'lodash';
import { SetState } from 'ahooks/lib/createUseStorageState';
......@@ -60,6 +59,18 @@ export type SnapshotsType = {
chatConfig: AppChatConfigType;
isSaved?: boolean;
};
export type SaveSnapshotParams = {
pastNodes?: Node[];
pastEdges?: Edge[];
customTitle?: string;
chatConfig?: AppChatConfigType;
};
export type InitProps = {
nodes: AppSchema['modules'];
edges: AppSchema['edges'];
chatConfig: AppSchema['chatConfig'];
};
type WorkflowContextType = {
appId?: string;
basicNodeTemplates: FlowNodeTemplateType[];
......
projects/app/src/pages/app/detail/components/context.tsx
import { Dispatch, ReactNode, SetStateAction, useCallback, useState } from 'react';
import { Dispatch, ReactNode, SetStateAction, useCallback, useEffect, useState } from 'react';
import { createContext } from 'use-context-selector';
import { defaultApp } from '@/web/core/app/constants';
import { delAppById, getAppDetailById, putAppById } from '@/web/core/app/api';
......@@ -11,7 +11,6 @@ import { useRequest2 } from '@fastgpt/web/hooks/useRequest';
import dynamic from 'next/dynamic';
import { useDisclosure } from '@chakra-ui/react';
import { useConfirm } from '@fastgpt/web/hooks/useConfirm';
import { useI18n } from '@/web/context/I18n';
import type { StoreNodeItemType } from '@fastgpt/global/core/workflow/type/node';
import type { StoreEdgeItemType } from '@fastgpt/global/core/workflow/type/edge';
......
projects/app/src/web/core/app/api/version.ts
......@@ -15,8 +15,8 @@ export const getAppLatestVersion = (data: getLatestVersionQuery) =>
export const postPublishApp = (appId: string, data: PostPublishAppProps) =>
POST(`/core/app/version/publish?appId=${appId}`, data);
export const getPublishList = (data: PaginationProps<{ appId: string }>) =>
POST<PaginationResponse<AppVersionSchemaType>>('/core/app/version/list', data);
// export const getPublishList = (data: PaginationProps<{ appId: string }>) =>
// POST<PaginationResponse<AppVersionSchemaType>>('/core/app/version/list', data);
export const getWorkflowVersionList = (data: PaginationProps<{ appId: string }>) =>
POST<PaginationResponse<versionListResponse>>('/core/app/version/listWorkflow', data);
......@@ -24,8 +24,8 @@ export const getWorkflowVersionList = (data: PaginationProps<{ appId: string }>)
export const getAppVersionDetail = (versionId: string, appId: string) =>
GET<AppVersionSchemaType>(`/core/app/version/detail?versionId=${versionId}&appId=${appId}`);
export const postRevertVersion = (appId: string, data: PostRevertAppProps) =>
POST(`/core/app/version/revert?appId=${appId}`, data);
// export const postRevertVersion = (appId: string, data: PostRevertAppProps) =>
// POST(`/core/app/version/revert?appId=${appId}`, data);
export const updateAppVersion = (data: UpdateAppVersionBody) =>
POST(`/core/app/version/update`, data);
projects/app/src/web/core/workflow/utils.ts
......@@ -438,94 +438,6 @@ export const getLatestNodeTemplate = (
return updatedNode;
};
type WorkflowType = {
nodes: StoreNodeItemType[];
edges: StoreEdgeItemType[];
chatConfig: AppChatConfigType;
};
export const compareWorkflow = (workflow1: WorkflowType, workflow2: WorkflowType) => {
const clone1 = cloneDeep(workflow1);
const clone2 = cloneDeep(workflow2);
if (!isEqual(clone1.edges, clone2.edges)) {
console.log('Edge not equal');
return false;
}
if (
clone1.chatConfig &&
clone2.chatConfig &&
!isEqual(
{
welcomeText: clone1.chatConfig?.welcomeText || '',
variables: clone1.chatConfig?.variables || [],
questionGuide: clone1.chatConfig?.questionGuide || false,
ttsConfig: clone1.chatConfig?.ttsConfig || undefined,
whisperConfig: clone1.chatConfig?.whisperConfig || undefined,
scheduledTriggerConfig: clone1.chatConfig?.scheduledTriggerConfig || undefined,
chatInputGuide: clone1.chatConfig?.chatInputGuide || undefined,
fileSelectConfig: clone1.chatConfig?.fileSelectConfig || undefined
},
{
welcomeText: clone2.chatConfig?.welcomeText || '',
variables: clone2.chatConfig?.variables || [],
questionGuide: clone2.chatConfig?.questionGuide || false,
ttsConfig: clone2.chatConfig?.ttsConfig || undefined,
whisperConfig: clone2.chatConfig?.whisperConfig || undefined,
scheduledTriggerConfig: clone2.chatConfig?.scheduledTriggerConfig || undefined,
chatInputGuide: clone2.chatConfig?.chatInputGuide || undefined,
fileSelectConfig: clone2.chatConfig?.fileSelectConfig || undefined
}
)
) {
console.log('chatConfig not equal');
return false;
}
const formatNodes = (nodes: StoreNodeItemType[]) => {
return nodes
.filter((node) => {
if (!node) return;
if ([FlowNodeTypeEnum.systemConfig].includes(node.flowNodeType)) return;
return true;
})
.map((node) => ({
flowNodeType: node.flowNodeType,
inputs: node.inputs.map((input) => ({
key: input.key,
selectedTypeIndex: input.selectedTypeIndex ?? 0,
renderTypeLis: input.renderTypeList,
valueType: input.valueType,
value: input.value ?? undefined
})),
outputs: node.outputs.map((item) => ({
key: item.key,
type: item.type,
value: item.value ?? undefined
})),
name: node.name,
intro: node.intro,
avatar: node.avatar,
version: node.version,
position: node.position
}));
};
const node1 = formatNodes(clone1.nodes);
const node2 = formatNodes(clone2.nodes);
// console.log(node1);
// console.log(node2);
node1.forEach((node, i) => {
if (!isEqual(node, node2[i])) {
console.log('node not equal');
}
});
return isEqual(node1, node2);
};
export const compareSnapshot = (
snapshot1: {
nodes: Node<FlowNodeItemType, string | undefined>[] | undefined;
......
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