From ad63210f457be50cea7cb35e5d879ee5dfd44333 Mon Sep 17 00:00:00 2001
From: Archer <545436317@qq.com>
Date: Sat, 24 Aug 2024 23:43:52 +0800
Subject: [PATCH] perf: onpublish app (#2498)

---
 .../app/detail/components/Plugin/Header.tsx   | 75 ++++++++++---------
 .../detail/components/SimpleApp/Header.tsx    | 11 ++-
 .../app/detail/components/Workflow/Header.tsx | 75 +++++++++++--------
 .../WorkflowPublishHistoriesSlider.tsx        | 71 +++++++++---------
 .../pages/app/detail/components/context.tsx   |  8 +-
 5 files changed, 129 insertions(+), 111 deletions(-)

diff --git a/projects/app/src/pages/app/detail/components/Plugin/Header.tsx b/projects/app/src/pages/app/detail/components/Plugin/Header.tsx
index 8d4c0361bd..d9be268528 100644
--- a/projects/app/src/pages/app/detail/components/Plugin/Header.tsx
+++ b/projects/app/src/pages/app/detail/components/Plugin/Header.tsx
@@ -1,4 +1,4 @@
-import React, { useCallback, useEffect, useMemo, useState } from 'react';
+import React, { useCallback, useMemo, useState } from 'react';
 import {
   Box,
   Flex,
@@ -39,14 +39,20 @@ const Header = () => {
   const router = useRouter();
   const { toast } = useToast();
 
-  const { appDetail, onPublish, currentTab } = useContextSelector(AppContext, (v) => v);
+  const { appDetail, onSaveApp, currentTab } = useContextSelector(AppContext, (v) => v);
   const isV2Workflow = appDetail?.version === 'v2';
-  const { isOpen, onOpen, onClose } = useDisclosure();
+
+  const {
+    isOpen: isOpenBackConfirm,
+    onOpen: onOpenBackConfirm,
+    onClose: onCloseBackConfirm
+  } = useDisclosure();
   const {
     isOpen: isSaveAndPublishModalOpen,
     onOpen: onSaveAndPublishModalOpen,
     onClose: onSaveAndPublishModalClose
   } = useDisclosure();
+
   const [isSave, setIsSave] = useState(false);
 
   const {
@@ -94,7 +100,7 @@ const Header = () => {
       const data = flowData2StoreData();
 
       if (data) {
-        await onPublish({
+        await onSaveApp({
           ...data,
           isPublish,
           versionName,
@@ -157,34 +163,9 @@ const Header = () => {
             name={'common/leftArrowLight'}
             w={'1.75rem'}
             cursor={'pointer'}
-            onClick={isPublished ? onBack : onOpen}
+            onClick={isPublished ? onBack : onOpenBackConfirm}
           />
-          <MyModal
-            isOpen={isOpen}
-            onClose={onClose}
-            iconSrc="common/warn"
-            title={t('common:common.Exit')}
-            w={'400px'}
-          >
-            <ModalBody>
-              <Box>{t('workflow:workflow.exit_tips')}</Box>
-            </ModalBody>
-            <ModalFooter gap={3}>
-              <Button variant={'whiteDanger'} onClick={onBack}>
-                {t('common:common.Exit Directly')}
-              </Button>
-              <Button
-                isLoading={loading}
-                onClick={async () => {
-                  await onClickSave({});
-                  onClose();
-                  onBack();
-                }}
-              >
-                {t('common:common.Save_and_exit')}
-              </Button>
-            </ModalFooter>
-          </MyModal>
+
           {/* app info */}
           <Box ml={1}>
             <AppCard isPublished={isPublished} showSaveStatus={isV2Workflow} />
@@ -313,6 +294,32 @@ const Header = () => {
             }}
           />
         )}
+        <MyModal
+          isOpen={isOpenBackConfirm}
+          onClose={onCloseBackConfirm}
+          iconSrc="common/warn"
+          title={t('common:common.Exit')}
+          w={'400px'}
+        >
+          <ModalBody>
+            <Box>{t('workflow:workflow.exit_tips')}</Box>
+          </ModalBody>
+          <ModalFooter gap={3}>
+            <Button variant={'whiteDanger'} onClick={onBack}>
+              {t('common:common.Exit Directly')}
+            </Button>
+            <Button
+              isLoading={loading}
+              onClick={async () => {
+                await onClickSave({});
+                onCloseBackConfirm();
+                onBack();
+              }}
+            >
+              {t('common:common.Save_and_exit')}
+            </Button>
+          </ModalFooter>
+        </MyModal>
       </>
     );
   }, [
@@ -320,9 +327,9 @@ const Header = () => {
     currentTab,
     isPublished,
     onBack,
-    onOpen,
-    isOpen,
-    onClose,
+    isOpenBackConfirm,
+    onOpenBackConfirm,
+    onCloseBackConfirm,
     t,
     loading,
     isV2Workflow,
diff --git a/projects/app/src/pages/app/detail/components/SimpleApp/Header.tsx b/projects/app/src/pages/app/detail/components/SimpleApp/Header.tsx
index b06324a7a8..32ad9c7110 100644
--- a/projects/app/src/pages/app/detail/components/SimpleApp/Header.tsx
+++ b/projects/app/src/pages/app/detail/components/SimpleApp/Header.tsx
@@ -22,6 +22,7 @@ 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';
 
 const Header = ({
   appForm,
@@ -34,7 +35,7 @@ const Header = ({
   const { isPc } = useSystem();
   const router = useRouter();
   const { toast } = useToast();
-  const { appId, appDetail, onPublish, currentTab } = useContextSelector(AppContext, (v) => v);
+  const { appId, appDetail, onSaveApp, currentTab } = useContextSelector(AppContext, (v) => v);
 
   const { data: paths = [] } = useRequest2(() => getAppFolderPath(appId), {
     manual: false,
@@ -71,18 +72,20 @@ const Header = ({
   const onSubmitPublish = useCallback(
     async (data: AppSimpleEditFormType) => {
       const { nodes, edges } = form2AppWorkflow(data, t);
-      await onPublish({
+      await onSaveApp({
         nodes,
         edges,
         chatConfig: data.chatConfig,
-        type: AppTypeEnum.simple
+        type: AppTypeEnum.simple,
+        isPublish: true,
+        versionName: formatTime2YMDHMS(new Date())
       });
       toast({
         status: 'success',
         title: t('app:publish_success')
       });
     },
-    [onPublish, t, toast]
+    [onSaveApp, t, toast]
   );
 
   const [historiesDefaultData, setHistoriesDefaultData] = useState<InitProps>();
diff --git a/projects/app/src/pages/app/detail/components/Workflow/Header.tsx b/projects/app/src/pages/app/detail/components/Workflow/Header.tsx
index 8d4c0361bd..e0bb9e84ad 100644
--- a/projects/app/src/pages/app/detail/components/Workflow/Header.tsx
+++ b/projects/app/src/pages/app/detail/components/Workflow/Header.tsx
@@ -39,9 +39,13 @@ const Header = () => {
   const router = useRouter();
   const { toast } = useToast();
 
-  const { appDetail, onPublish, currentTab } = useContextSelector(AppContext, (v) => v);
+  const { appDetail, onSaveApp, currentTab } = useContextSelector(AppContext, (v) => v);
   const isV2Workflow = appDetail?.version === 'v2';
-  const { isOpen, onOpen, onClose } = useDisclosure();
+  const {
+    isOpen: isOpenBackConfirm,
+    onOpen: onOpenBackConfirm,
+    onClose: onCloseBackConfirm
+  } = useDisclosure();
   const {
     isOpen: isSaveAndPublishModalOpen,
     onOpen: onSaveAndPublishModalOpen,
@@ -94,7 +98,7 @@ const Header = () => {
       const data = flowData2StoreData();
 
       if (data) {
-        await onPublish({
+        await onSaveApp({
           ...data,
           isPublish,
           versionName,
@@ -157,34 +161,9 @@ const Header = () => {
             name={'common/leftArrowLight'}
             w={'1.75rem'}
             cursor={'pointer'}
-            onClick={isPublished ? onBack : onOpen}
+            onClick={isPublished ? onBack : onOpenBackConfirm}
           />
-          <MyModal
-            isOpen={isOpen}
-            onClose={onClose}
-            iconSrc="common/warn"
-            title={t('common:common.Exit')}
-            w={'400px'}
-          >
-            <ModalBody>
-              <Box>{t('workflow:workflow.exit_tips')}</Box>
-            </ModalBody>
-            <ModalFooter gap={3}>
-              <Button variant={'whiteDanger'} onClick={onBack}>
-                {t('common:common.Exit Directly')}
-              </Button>
-              <Button
-                isLoading={loading}
-                onClick={async () => {
-                  await onClickSave({});
-                  onClose();
-                  onBack();
-                }}
-              >
-                {t('common:common.Save_and_exit')}
-              </Button>
-            </ModalFooter>
-          </MyModal>
+
           {/* app info */}
           <Box ml={1}>
             <AppCard isPublished={isPublished} showSaveStatus={isV2Workflow} />
@@ -313,6 +292,36 @@ const Header = () => {
             }}
           />
         )}
+        <MyModal
+          isOpen={isOpenBackConfirm}
+          onClose={onCloseBackConfirm}
+          iconSrc="common/warn"
+          title={t('common:common.Exit')}
+          w={'400px'}
+        >
+          <ModalBody>
+            <Box>{t('workflow:workflow.exit_tips')}</Box>
+          </ModalBody>
+          <ModalFooter gap={3}>
+            <Button variant={'whiteDanger'} onClick={onBack}>
+              {t('common:common.Exit Directly')}
+            </Button>
+            <Button
+              isLoading={loading}
+              onClick={async () => {
+                await onClickSave({});
+                onCloseBackConfirm();
+                onBack();
+                toast({
+                  status: 'success',
+                  title: t('app:saved_success')
+                });
+              }}
+            >
+              {t('common:common.Save_and_exit')}
+            </Button>
+          </ModalFooter>
+        </MyModal>
       </>
     );
   }, [
@@ -320,9 +329,9 @@ const Header = () => {
     currentTab,
     isPublished,
     onBack,
-    onOpen,
-    isOpen,
-    onClose,
+    isOpenBackConfirm,
+    onOpenBackConfirm,
+    onCloseBackConfirm,
     t,
     loading,
     isV2Workflow,
diff --git a/projects/app/src/pages/app/detail/components/WorkflowPublishHistoriesSlider.tsx b/projects/app/src/pages/app/detail/components/WorkflowPublishHistoriesSlider.tsx
index 96922cef3d..68077d6e99 100644
--- a/projects/app/src/pages/app/detail/components/WorkflowPublishHistoriesSlider.tsx
+++ b/projects/app/src/pages/app/detail/components/WorkflowPublishHistoriesSlider.tsx
@@ -28,13 +28,11 @@ import { versionListResponse } from '@/pages/api/core/app/version/listWorkflow';
 const WorkflowPublishHistoriesSlider = ({ onClose }: { onClose: () => void }) => {
   const { t } = useTranslation();
   const [currentTab, setCurrentTab] = useState<'myEdit' | 'teamCloud'>('myEdit');
-  const [isLoading, setIsLoading] = useState(false);
 
   return (
     <>
       <CustomRightDrawer
         onClose={() => onClose()}
-        isLoading={isLoading}
         title={
           (
             <>
@@ -58,7 +56,7 @@ const WorkflowPublishHistoriesSlider = ({ onClose }: { onClose: () => void }) =>
         showMask={false}
         overflow={'unset'}
       >
-        {currentTab === 'myEdit' ? <MyEdit /> : <TeamCloud setIsLoading={setIsLoading} />}
+        {currentTab === 'myEdit' ? <MyEdit /> : <TeamCloud />}
       </CustomRightDrawer>
     </>
   );
@@ -81,14 +79,17 @@ const MyEdit = () => {
             h={'30px'}
             onClick={async () => {
               const initialSnapshot = past[past.length - 1];
+
               const res = await saveSnapshot({
                 pastNodes: initialSnapshot.nodes,
                 pastEdges: initialSnapshot.edges,
                 chatConfig: initialSnapshot.chatConfig,
                 customTitle: t(`app:app.version_initial_copy`)
               });
-              if (!res) return;
-              resetSnapshot(initialSnapshot);
+              if (res) {
+                resetSnapshot(initialSnapshot);
+              }
+
               toast({
                 title: t('workflow:workflow.Switch_success'),
                 status: 'success'
@@ -120,8 +121,9 @@ const MyEdit = () => {
                   chatConfig: item.chatConfig,
                   customTitle: `${t('app:app.version_copy')}-${item.title}`
                 });
-                if (!res) return;
-                resetSnapshot(item);
+                if (res) {
+                  resetSnapshot(item);
+                }
                 toast({
                   title: t('workflow:workflow.Switch_success'),
                   status: 'success'
@@ -169,7 +171,7 @@ const MyEdit = () => {
   );
 };
 
-const TeamCloud = ({ setIsLoading }: { setIsLoading: (value: boolean) => void }) => {
+const TeamCloud = () => {
   const { t } = useTranslation();
   const { appDetail } = useContextSelector(AppContext, (v) => v);
   const { saveSnapshot, resetSnapshot } = useContextSelector(WorkflowContext, (v) => v);
@@ -194,39 +196,36 @@ const TeamCloud = ({ setIsLoading }: { setIsLoading: (value: boolean) => void })
   const [isEditing, setIsEditing] = useState(false);
   const { toast } = useToast();
 
-  const onChangeVersion = async (versionItem: versionListResponse) => {
-    setIsLoading(true);
-    const versionDetail = await getAppVersionDetail(versionItem._id, versionItem.appId);
-    setIsLoading(false);
-    if (!versionDetail) return;
-    const state = {
-      nodes: versionDetail.nodes?.map((item) => storeNode2FlowNode({ item })),
-      edges: versionDetail.edges?.map((item) => storeEdgesRenderEdge({ edge: item })),
-      title: versionItem.versionName,
-      chatConfig: versionDetail.chatConfig
-    };
+  const { runAsync: onChangeVersion, loading: isLoadingVersion } = useRequest2(
+    async (versionItem: versionListResponse) => {
+      const versionDetail = await getAppVersionDetail(versionItem._id, versionItem.appId);
 
-    const res = await saveSnapshot({
-      pastNodes: state.nodes,
-      pastEdges: state.edges,
-      chatConfig: state.chatConfig,
-      customTitle: `${t('app:app.version_copy')}-${state.title}`
-    });
+      if (!versionDetail) return;
 
-    if (!res) {
-      return toast({
-        title: t('workflow:workflow.Switch_failed'),
-        status: 'warning'
+      const state = {
+        nodes: versionDetail.nodes?.map((item) => storeNode2FlowNode({ item })),
+        edges: versionDetail.edges?.map((item) => storeEdgesRenderEdge({ edge: item })),
+        title: versionItem.versionName,
+        chatConfig: versionDetail.chatConfig
+      };
+
+      await saveSnapshot({
+        pastNodes: state.nodes,
+        pastEdges: state.edges,
+        chatConfig: state.chatConfig,
+        customTitle: `${t('app:app.version_copy')}-${state.title}`
+      });
+
+      resetSnapshot(state);
+      toast({
+        title: t('workflow:workflow.Switch_success'),
+        status: 'success'
       });
     }
-    resetSnapshot(state);
-    toast({
-      title: t('workflow:workflow.Switch_success'),
-      status: 'success'
-    });
-  };
+  );
+
   return (
-    <ScrollList isLoading={isLoading} flex={'1 0 0'} px={5}>
+    <ScrollList isLoading={isLoading || isLoadingVersion} flex={'1 0 0'} px={5}>
       {list.map((data, index) => {
         const item = data.data;
         const firstPublishedIndex = list.findIndex((data) => data.data.isPublish);
diff --git a/projects/app/src/pages/app/detail/components/context.tsx b/projects/app/src/pages/app/detail/components/context.tsx
index 0673e8e0a9..ee0e97d6e4 100644
--- a/projects/app/src/pages/app/detail/components/context.tsx
+++ b/projects/app/src/pages/app/detail/components/context.tsx
@@ -35,7 +35,7 @@ type AppContextType = {
   onOpenInfoEdit: () => void;
   onOpenTeamTagModal: () => void;
   onDelApp: () => void;
-  onPublish: (data: PostPublishAppProps) => Promise<void>;
+  onSaveApp: (data: PostPublishAppProps) => Promise<void>;
   appLatestVersion:
     | {
         nodes: StoreNodeItemType[];
@@ -70,7 +70,7 @@ export const AppContext = createContext<AppContextType>({
   onDelApp: function (): void {
     throw new Error('Function not implemented.');
   },
-  onPublish: function (data: PostPublishAppProps): Promise<void> {
+  onSaveApp: function (data: PostPublishAppProps): Promise<void> {
     throw new Error('Function not implemented.');
   },
   appLatestVersion: undefined,
@@ -150,7 +150,7 @@ const AppContextProvider = ({ children }: { children: ReactNode }) => {
     }));
   });
 
-  const { runAsync: onPublish } = useRequest2(async (data: PostPublishAppProps) => {
+  const { runAsync: onSaveApp } = useRequest2(async (data: PostPublishAppProps) => {
     await postPublishApp(appId, data);
     setAppDetail((state) => ({
       ...state,
@@ -190,7 +190,7 @@ const AppContextProvider = ({ children }: { children: ReactNode }) => {
     onOpenInfoEdit,
     onOpenTeamTagModal,
     onDelApp,
-    onPublish,
+    onSaveApp,
     appLatestVersion,
     reloadAppLatestVersion,
     reloadApp