feat: parallel hover

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

@@ -9,6 +9,7 @@ import {
   Handle,
   Position,
 } from 'reactflow'
+import { useTranslation } from 'react-i18next'
 import { BlockEnum } from '../../../types'
 import type { Node } from '../../../types'
 import BlockSelector from '../../../block-selector'
@@ -19,6 +20,7 @@ import {
   useNodesReadOnly,
 } from '../../../hooks'
 import { useStore } from '../../../store'
+import Tooltip from '@/app/components/base/tooltip'
 
 type NodeHandleProps = {
   handleId: string
@@ -112,6 +114,7 @@ export const NodeSourceHandle = memo(({
   handleClassName,
   nodeSelectorClassName,
 }: NodeHandleProps) => {
+  const { t } = useTranslation()
   const notInitialWorkflow = useStore(s => s.notInitialWorkflow)
   const [open, setOpen] = useState(false)
   const { handleNodeAdd } = useNodesInteractions()
@@ -146,7 +149,20 @@ export const NodeSourceHandle = memo(({
   }, [notInitialWorkflow, data.type])
 
   return (
-    <>
+    <Tooltip
+      popupContent={(
+        <div className='system-xs-regular text-text-tertiary'>
+          <div>
+            <span className='system-xs-medium text-text-secondary'>{t('workflow.common.parallelTip.click.title')}</span>
+            {t('workflow.common.parallelTip.click.desc')}
+          </div>
+          <div>
+            <span className='system-xs-medium text-text-secondary'>{t('workflow.common.parallelTip.drag.title')}</span>
+            {t('workflow.common.parallelTip.drag.desc')}
+          </div>
+        </div>
+      )}
+    >
       <Handle
         id={handleId}
         type='source'
@@ -180,7 +196,7 @@ export const NodeSourceHandle = memo(({
           )
         }
       </Handle>
-    </>
+    </Tooltip>
   )
 })
 NodeSourceHandle.displayName = 'NodeSourceHandle'

web/i18n/en-US/workflow.ts

@@ -78,6 +78,16 @@ const translation = {
     importFailure: 'Import failure',
     importSuccess: 'Import success',
     parallelRun: 'Parallel Run',
+    parallelTip: {
+      click: {
+        title: 'Click',
+        desc: ' to add',
+      },
+      drag: {
+        title: 'Drag',
+        desc: ' to connect',
+      },
+    },
   },
   env: {
     envPanelTitle: 'Environment Variables',

web/i18n/zh-Hans/workflow.ts

@@ -78,6 +78,16 @@ const translation = {
     importFailure: '导入失败',
     importSuccess: '导入成功',
     parallelRun: '并行运行',
+    parallelTip: {
+      click: {
+        title: '点击',
+        desc: '添加节点',
+      },
+      drag: {
+        title: '拖拽',
+        desc: '连接节点',
+      },
+    },
   },
   env: {
     envPanelTitle: '环境变量',

web/themes/dark.css

@@ -316,6 +316,7 @@ html[data-theme="dark"] {
   --color-workflow-block-border: #FFFFFF14;
   --color-workflow-block-parma-bg: #FFFFFF0D;
   --color-workflow-block-bg: #27272B;
+  --color-workflow-block-border-highlight: #C8CEDA33;
 
   --color-workflow-canvas-workflow-dot-color: #8585AD26;
   --color-workflow-canvas-workflow-bg: #1D1D20;

web/themes/light.css

@@ -316,6 +316,7 @@ html[data-theme="light"] {
   --color-workflow-block-border: #FFFFFF;
   --color-workflow-block-parma-bg: #F2F4F7;
   --color-workflow-block-bg: #FCFCFD;
+  --color-workflow-block-border-highlight: #155AEF24;
 
   --color-workflow-canvas-workflow-dot-color: #8585AD26;
   --color-workflow-canvas-workflow-bg: #F2F4F7;

web/themes/tailwind-theme-var-define.ts

@@ -316,6 +316,7 @@ const vars = {
   'workflow-block-border': 'var(--color-workflow-block-border)',
   'workflow-block-parma-bg': 'var(--color-workflow-block-parma-bg)',
   'workflow-block-bg': 'var(--color-workflow-block-bg)',
+  'workflow-block-border-highlight': 'var(--color-workflow-block-border-highlight)',
 
   'workflow-canvas-workflow-dot-color': 'var(--color-workflow-canvas-workflow-dot-color)',
   'workflow-canvas-workflow-bg': 'var(--color-workflow-canvas-workflow-bg)',