style: improve pointer event handling in PublishToast and Workflow components (#25339)

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' />

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 />

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