chore: node and panel single run stop not work

web/app/components/workflow/nodes/_base/components/node-control.tsx

@@ -13,7 +13,7 @@ import {
   useNodesInteractions,
   useNodesSyncDraft,
 } from '../../../hooks'
-import type { Node } from '../../../types'
+import { type Node, NodeRunningStatus } from '../../../types'
 import { canRunBySingle } from '../../../utils'
 import PanelOperator from './panel-operator'
 import {
@@ -31,7 +31,7 @@ const NodeControl: FC<NodeControlProps> = ({
   const { handleNodeDataUpdate } = useNodeDataUpdate()
   const { handleNodeSelect } = useNodesInteractions()
   const { handleSyncWorkflowDraft } = useNodesSyncDraft()
-
+  const isSingleRunning = data._singleRunningStatus === NodeRunningStatus.Running
   const handleOpenChange = useCallback((newOpen: boolean) => {
     setOpen(newOpen)
   }, [])
@@ -53,11 +53,15 @@ const NodeControl: FC<NodeControlProps> = ({
             <div
               className='flex h-5 w-5 cursor-pointer items-center justify-center rounded-md hover:bg-state-base-hover'
               onClick={() => {
+                const nextData: Record<string, any> = {
+                  _isSingleRun: !isSingleRunning,
+                }
+                if(isSingleRunning)
+                  nextData._singleRunningStatus = undefined
+
                 handleNodeDataUpdate({
                   id,
-                  data: {
-                    _isSingleRun: !data._isSingleRun,
-                  },
+                  data: nextData,
                 })
                 handleNodeSelect(id)
                 if (!data._isSingleRun)
@@ -65,7 +69,7 @@ const NodeControl: FC<NodeControlProps> = ({
               }}
             >
               {
-                data._isSingleRun
+                isSingleRunning
                   ? <Stop className='h-3 w-3' />
                   : (
                     <Tooltip

web/app/components/workflow/nodes/_base/components/workflow-panel/index.tsx

@@ -44,7 +44,7 @@ import {
   hasRetryNode,
 } from '@/app/components/workflow/utils'
 import Tooltip from '@/app/components/base/tooltip'
-import { BlockEnum, type Node } from '@/app/components/workflow/types'
+import { BlockEnum, type Node, NodeRunningStatus } from '@/app/components/workflow/types'
 import { useStore as useAppStore } from '@/app/components/app/store'
 import { useStore } from '@/app/components/workflow/store'
 import Tab, { TabType } from './tab'
@@ -56,6 +56,7 @@ import { NODES_EXTRA_DATA } from '@/app/components/workflow/constants'
 import { useLogs } from '@/app/components/workflow/run/hooks'
 import PanelWrap from '../before-run-form/panel-wrap'
 import SpecialResultPanel from '@/app/components/workflow/run/special-result-panel'
+import { Stop } from '@/app/components/base/icons/src/vender/line/mediaAndDevices'
 
 type BasePanelProps = {
   children: ReactNode
@@ -73,6 +74,8 @@ const BasePanel: FC<BasePanelProps> = ({
   const { showMessageLogModal } = useAppStore(useShallow(state => ({
     showMessageLogModal: state.showMessageLogModal,
   })))
+    const isSingleRunning = data._singleRunningStatus === NodeRunningStatus.Running
+
   const showSingleRunPanel = useStore(s => s.showSingleRunPanel)
   const workflowCanvasWidth = useStore(s => s.workflowCanvasWidth)
   const nodePanelWidth = useStore(s => s.nodePanelWidth)
@@ -126,6 +129,7 @@ const BasePanel: FC<BasePanelProps> = ({
   const { saveStateToHistory } = useWorkflowHistory()
 
   const {
+    handleNodeDataUpdate,
     handleNodeDataUpdateWithSyncDraft,
   } = useNodeDataUpdate()
 
@@ -265,12 +269,29 @@ const BasePanel: FC<BasePanelProps> = ({
                   <Tooltip
                     popupContent={t('workflow.panel.runThisStep')}
                     popupClassName='mr-1'
+                    disabled={isSingleRunning}
                   >
                     <div
                       className='mr-1 flex h-6 w-6 cursor-pointer items-center justify-center rounded-md hover:bg-state-base-hover'
-                      onClick={handleSingleRun}
+                      onClick={() => {
+                        if(isSingleRunning) {
+                          handleNodeDataUpdate({
+                            id,
+                            data: {
+                              _isSingleRun: false,
+                              _singleRunningStatus: undefined,
+                            },
+                          })
+                        }
+                        else {
+                          handleSingleRun()
+                        }
+                      }}
                     >
-                      <RiPlayLargeLine className='h-4 w-4 text-text-tertiary' />
+                      {
+                        isSingleRunning ? <Stop className='h-4 w-4 text-text-tertiary' />
+                        : <RiPlayLargeLine className='h-4 w-4 text-text-tertiary' />
+                      }
                     </div>
                   </Tooltip>
                 )