From 9c8144e463b3c5d47a0c710493ca90eccc917052 Mon Sep 17 00:00:00 2001
From: StyleZhang <jasonapring2015@outlook.com>
Date: Mon, 26 Aug 2024 17:49:11 +0800
Subject: [PATCH] feat: parallel hover

---
 .../nodes/_base/components/node-handle.tsx    | 20 +++++++++++++++++--
 web/i18n/en-US/workflow.ts                    | 10 ++++++++++
 web/i18n/zh-Hans/workflow.ts                  | 10 ++++++++++
 web/themes/dark.css                           |  1 +
 web/themes/light.css                          |  1 +
 web/themes/tailwind-theme-var-define.ts       |  1 +
 6 files changed, 41 insertions(+), 2 deletions(-)

diff --git a/web/app/components/workflow/nodes/_base/components/node-handle.tsx b/web/app/components/workflow/nodes/_base/components/node-handle.tsx
index 50734b7eec..2e37f14d61 100644
--- a/web/app/components/workflow/nodes/_base/components/node-handle.tsx
+++ b/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'
diff --git a/web/i18n/en-US/workflow.ts b/web/i18n/en-US/workflow.ts
index 990f54d7c1..c6766e5f07 100644
--- a/web/i18n/en-US/workflow.ts
+++ b/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',
diff --git a/web/i18n/zh-Hans/workflow.ts b/web/i18n/zh-Hans/workflow.ts
index fd068b4e89..dd1e196250 100644
--- a/web/i18n/zh-Hans/workflow.ts
+++ b/web/i18n/zh-Hans/workflow.ts
@@ -78,6 +78,16 @@ const translation = {
     importFailure: '导入失败',
     importSuccess: '导入成功',
     parallelRun: '并行运行',
+    parallelTip: {
+      click: {
+        title: '点击',
+        desc: '添加节点',
+      },
+      drag: {
+        title: '拖拽',
+        desc: '连接节点',
+      },
+    },
   },
   env: {
     envPanelTitle: '环境变量',
diff --git a/web/themes/dark.css b/web/themes/dark.css
index b94124aad2..dc5b800799 100644
--- a/web/themes/dark.css
+++ b/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;
diff --git a/web/themes/light.css b/web/themes/light.css
index 80a0fa36f5..e7d817831e 100644
--- a/web/themes/light.css
+++ b/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;
diff --git a/web/themes/tailwind-theme-var-define.ts b/web/themes/tailwind-theme-var-define.ts
index caeb01b5fa..fea0ea7b83 100644
--- a/web/themes/tailwind-theme-var-define.ts
+++ b/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)',