perf: onpublish app (#2498)

2025-07-24 22:03:54 +00:00 · 2024-08-24 23:43:52 +08:00
parent fa106eb24c
commit ad63210f45
5 changed files with 129 additions and 111 deletions
--- 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,
--- 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>();
--- 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,
--- 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);
--- 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