perf: disabled change version when change version name (#2497)

* perf: disabled change version when change version name

* fix

* fix

* toast condition

projects/app/src/pages/app/detail/components/WorkflowComponents/Flow/NodeTemplatesModal.tsx

@@ -123,7 +123,7 @@ const NodeTemplatesModal = ({ isOpen, onClose }: ModuleTemplateListProps) => {
     },
     {
       manual: false,
-      refreshDeps: [members, basicNodeTemplates, nodeList, hasToolNode, templateType]
+      refreshDeps: [basicNodeTemplates, nodeList, hasToolNode, templateType]
     }
   );
   const {
@@ -168,7 +168,7 @@ const NodeTemplatesModal = ({ isOpen, onClose }: ModuleTemplateListProps) => {
         setParentId(parentId);
         setTemplateType(type);
       },
-      refreshDeps: [searchKey, templateType]
+      refreshDeps: [members, searchKey, templateType]
     }
   );
 

projects/app/src/pages/app/detail/components/WorkflowComponents/Flow/components/FlowController.tsx

@@ -1,5 +1,5 @@
 import React, { useEffect, useMemo } from 'react';
-import { Background, ControlButton, MiniMap, Panel, useReactFlow } from 'reactflow';
+import { Background, ControlButton, MiniMap, Panel, useReactFlow, useViewport } from 'reactflow';
 import { useContextSelector } from 'use-context-selector';
 import { WorkflowContext } from '../../context';
 import MyTooltip from '@fastgpt/web/components/common/MyTooltip';
@@ -7,9 +7,11 @@ import MyIcon from '@fastgpt/web/components/common/Icon';
 import { Box } from '@chakra-ui/react';
 import { useTranslation } from 'react-i18next';
 import styles from './index.module.scss';
+import { maxZoom, minZoom } from '..';
 
 const FlowController = React.memo(function FlowController() {
   const { fitView, zoomIn, zoomOut } = useReactFlow();
+  const { zoom } = useViewport();
   const { undo, redo, canRedo, canUndo } = useContextSelector(WorkflowContext, (v) => v);
   const { t } = useTranslation();
 
@@ -111,6 +113,7 @@ const FlowController = React.memo(function FlowController() {
               onClick={() => zoomOut()}
               style={buttonStyle}
               className={`${styles.customControlButton}`}
+              disabled={zoom <= minZoom}
             >
               <MyIcon name={'common/subtract'} />
             </ControlButton>
@@ -124,6 +127,7 @@ const FlowController = React.memo(function FlowController() {
               onClick={() => zoomIn()}
               style={buttonStyle}
               className={`${styles.customControlButton}`}
+              disabled={zoom >= maxZoom}
             >
               <MyIcon name={'common/addLight'} />
             </ControlButton>
@@ -145,7 +149,7 @@ const FlowController = React.memo(function FlowController() {
         <Background />
       </>
     );
-  }, [isMac, t, undo, buttonStyle, canUndo, redo, canRedo, zoomOut, zoomIn, fitView]);
+  }, [isMac, t, undo, buttonStyle, canUndo, redo, canRedo, zoom, zoomOut, zoomIn, fitView]);
 
   return Render;
 });

projects/app/src/pages/app/detail/components/WorkflowComponents/Flow/hooks/useWorkflow.tsx

@@ -259,15 +259,8 @@ export const useWorkflow = () => {
   const { t } = useTranslation();
 
   const { isDowningCtrl } = useKeyboard();
-  const {
-    setConnectingEdge,
-    nodes,
-    setNodes,
-    onNodesChange,
-    setEdges,
-    onEdgesChange,
-    setHoverEdgeId
-  } = useContextSelector(WorkflowContext, (v) => v);
+  const { setConnectingEdge, nodes, onNodesChange, setEdges, onEdgesChange, setHoverEdgeId } =
+    useContextSelector(WorkflowContext, (v) => v);
 
   /* helper line */
   const [helperLineHorizontal, setHelperLineHorizontal] = useState<THelperLine>();

projects/app/src/pages/app/detail/components/WorkflowComponents/Flow/index.tsx

@@ -18,6 +18,9 @@ import { useWorkflow } from './hooks/useWorkflow';
 import HelperLines from './components/HelperLines';
 import FlowController from './components/FlowController';
 
+export const minZoom = 0.1;
+export const maxZoom = 1.5;
+
 const NodeSimple = dynamic(() => import('./nodes/NodeSimple'));
 const nodeTypes: Record<FlowNodeTypeEnum, any> = {
   [FlowNodeTypeEnum.emptyNode]: NodeSimple,
@@ -112,8 +115,8 @@ const Workflow = () => {
           fitView
           nodes={nodes}
           edges={edges}
-          minZoom={0.1}
-          maxZoom={1.5}
+          minZoom={minZoom}
+          maxZoom={maxZoom}
           defaultEdgeOptions={defaultEdgeOptions}
           elevateEdgesOnSelect
           connectionLineStyle={connectionLineStyle}

projects/app/src/pages/app/detail/components/WorkflowPublishHistoriesSlider.tsx

@@ -86,6 +86,7 @@ const MyEdit = () => {
                 chatConfig: initialSnapshot.chatConfig,
                 customTitle: t(`app:app.version_initial_copy`)
               });
+
               if (res) {
                 resetSnapshot(initialSnapshot);
               }
@@ -124,6 +125,7 @@ const MyEdit = () => {
                 if (res) {
                   resetSnapshot(item);
                 }
+
                 toast({
                   title: t('workflow:workflow.Switch_success'),
                   status: 'success'
@@ -245,7 +247,7 @@ const TeamCloud = () => {
             _hover={{
               bg: 'primary.50'
             }}
-            onClick={() => onChangeVersion(item)}
+            onClick={() => editIndex === undefined && onChangeVersion(item)}
           >
             <MyPopover
               trigger="hover"