fix: node handle tooltip

This commit is contained in:
StyleZhang 2024-09-30 15:23:04 +08:00
parent b67b81bf8f
commit d2971e84bb

View File

@ -24,7 +24,6 @@ import {
import { import {
useStore, useStore,
} from '../../../store' } from '../../../store'
import Tooltip from '@/app/components/base/tooltip'
type NodeHandleProps = { type NodeHandleProps = {
handleId: string handleId: string
@ -154,26 +153,12 @@ export const NodeSourceHandle = memo(({
}, [notInitialWorkflow, data.type, isChatMode]) }, [notInitialWorkflow, data.type, isChatMode])
return ( 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 <Handle
id={handleId} id={handleId}
type='source' type='source'
position={Position.Right} position={Position.Right}
className={` className={`
!w-4 !h-4 !bg-transparent !rounded-none !outline-none !border-none z-[1] group/handle !w-4 !h-4 !bg-transparent !rounded-none !outline-none !border-none z-[1]
after:absolute after:w-0.5 after:h-2 after:right-1.5 after:top-1 after:bg-primary-500 after:absolute after:w-0.5 after:h-2 after:right-1.5 after:top-1 after:bg-primary-500
hover:scale-125 transition-all hover:scale-125 transition-all
${!connected && 'after:opacity-0'} ${!connected && 'after:opacity-0'}
@ -182,6 +167,18 @@ export const NodeSourceHandle = memo(({
isConnectable={isConnectable} isConnectable={isConnectable}
onClick={handleHandleClick} onClick={handleHandleClick}
> >
<div className='hidden group-hover/handle:block absolute left-1/2 -top-1 -translate-y-full -translate-x-1/2 p-1.5 border-[0.5px] border-components-panel-border bg-components-tooltip-bg rounded-lg shadow-lg'>
<div className='system-xs-regular text-text-tertiary'>
<div className=' whitespace-nowrap'>
<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>
</div>
{ {
isConnectable && !getNodesReadOnly() && ( isConnectable && !getNodesReadOnly() && (
<BlockSelector <BlockSelector
@ -201,7 +198,6 @@ export const NodeSourceHandle = memo(({
) )
} }
</Handle> </Handle>
</Tooltip>
) )
}) })
NodeSourceHandle.displayName = 'NodeSourceHandle' NodeSourceHandle.displayName = 'NodeSourceHandle'