From f7d4e17ae172f34daa12e6cbb13c0e4c6819837f Mon Sep 17 00:00:00 2001
From: twwu <twwu@dify.ai>
Date: Mon, 8 Sep 2025 11:06:35 +0800
Subject: [PATCH] style: improve pointer event handling in PublishToast and
 Workflow components

---
 .../rag-pipeline/components/publish-toast.tsx   |  4 ++--
 web/app/components/workflow/index.tsx           | 17 +++++++++--------
 .../components/workflow/operator/control.tsx    |  2 +-
 3 files changed, 12 insertions(+), 11 deletions(-)

diff --git a/web/app/components/rag-pipeline/components/publish-toast.tsx b/web/app/components/rag-pipeline/components/publish-toast.tsx
index 1f89b60e01..10f1e5f79a 100644
--- a/web/app/components/rag-pipeline/components/publish-toast.tsx
+++ b/web/app/components/rag-pipeline/components/publish-toast.tsx
@@ -18,7 +18,7 @@ const PublishToast = () => {
     return null
 
   return (
-    <div className='absolute bottom-[45px] left-0 right-0 z-10 flex justify-center'>
+    <div className='pointer-events-none absolute bottom-[45px] left-0 right-0 z-10 flex justify-center'>
       <div
         className='relative flex w-[420px] space-x-1 overflow-hidden rounded-xl border border-components-panel-border bg-components-panel-bg-blur p-3 shadow-lg'
       >
@@ -34,7 +34,7 @@ const PublishToast = () => {
           </div>
         </div>
         <div
-          className='flex h-6 w-6 cursor-pointer items-center justify-center'
+          className='pointer-events-auto flex h-6 w-6 cursor-pointer items-center justify-center'
           onClick={() => setHideToast(true)}
         >
           <RiCloseLine className='h-4 w-4 text-text-tertiary' />
diff --git a/web/app/components/workflow/index.tsx b/web/app/components/workflow/index.tsx
index 658343fb61..1c0c6d4545 100644
--- a/web/app/components/workflow/index.tsx
+++ b/web/app/components/workflow/index.tsx
@@ -92,6 +92,7 @@ import dynamic from 'next/dynamic'
 import useMatchSchemaType from './nodes/_base/components/variable/use-match-schema-type'
 import type { VarInInspect } from '@/types/workflow'
 import { fetchAllInspectVars } from '@/service/workflow'
+import cn from '@/utils/classnames'
 
 const Confirm = dynamic(() => import('@/app/components/base/confirm'), {
   ssr: false,
@@ -310,7 +311,7 @@ export const Workflow: FC<WorkflowProps> = memo(({
   const [vars, setVars] = useState<VarInInspect[]>([])
   useEffect(() => {
     (async () => {
-      if(!configsMap?.flowType || !configsMap?.flowId)
+      if (!configsMap?.flowType || !configsMap?.flowId)
         return
       const data = await fetchAllInspectVars(configsMap.flowType, configsMap.flowId)
       setVars(data)
@@ -318,7 +319,7 @@ export const Workflow: FC<WorkflowProps> = memo(({
     })()
   }, [configsMap?.flowType, configsMap?.flowId])
   useEffect(() => {
-    if(schemaTypeDefinitions && isLoadedVars) {
+    if (schemaTypeDefinitions && isLoadedVars) {
       fetchInspectVars({
         passInVars: true,
         vars,
@@ -346,17 +347,17 @@ export const Workflow: FC<WorkflowProps> = memo(({
   return (
     <div
       id='workflow-container'
-      className={`
-        relative h-full w-full min-w-[960px]
-        ${workflowReadOnly && 'workflow-panel-animation'}
-        ${nodeAnimation && 'workflow-node-animation'}
-      `}
+      className={cn(
+        'relative h-full w-full min-w-[960px]',
+        workflowReadOnly && 'workflow-panel-animation',
+        nodeAnimation && 'workflow-node-animation',
+      )}
       ref={workflowContainerRef}
     >
       <SyncingDataModal />
       <CandidateNode />
       <div
-        className='absolute left-0 top-0 z-10 flex w-12 items-center justify-center p-1 pl-2'
+        className='pointer-events-none absolute left-0 top-0 z-10 flex w-12 items-center justify-center p-1 pl-2'
         style={{ height: controlHeight }}
       >
         <Control />
diff --git a/web/app/components/workflow/operator/control.tsx b/web/app/components/workflow/operator/control.tsx
index 7967bf0a6c..cfc32bbc30 100644
--- a/web/app/components/workflow/operator/control.tsx
+++ b/web/app/components/workflow/operator/control.tsx
@@ -50,7 +50,7 @@ const Control = () => {
   }
 
   return (
-    <div className='flex flex-col items-center rounded-lg border-[0.5px] border-components-actionbar-border bg-components-actionbar-bg p-0.5 text-text-tertiary shadow-lg'>
+    <div className='pointer-events-auto flex flex-col items-center rounded-lg border-[0.5px] border-components-actionbar-border bg-components-actionbar-bg p-0.5 text-text-tertiary shadow-lg'>
       <AddBlock />
       <TipPopup title={t('workflow.nodes.note.addNote')}>
         <div