youngkingdom/dify
1
0
Fork 0
mirror of https://github.com/langgenius/dify.git synced 2026-05-04 01:18:05 +08:00
Code Issues Packages Projects Releases Wiki Activity

Refactor Start node UI to User Input and optimize EntryNodeContainer (#24156)

Browse Source
This commit is contained in:
lyzno1
2025-08-19 14:40:24 +08:00
committed by GitHub
parent aacea166d7
commit acfb95f9c2
6 changed files with 77 additions and 53 deletions
Download Patch File Download Diff File Expand all files Collapse all files

50
web/app/components/workflow/nodes/_base/components/entry-node-container.tsx Normal file
View File

@ -0,0 +1,50 @@
import type { FC, ReactNode } from 'react'
import { useMemo } from 'react'
import { useTranslation } from 'react-i18next'
import cn from '@/utils/classnames'
export type EntryNodeStatus = 'enabled' | 'disabled'
type EntryNodeContainerProps = {
children: ReactNode
status?: EntryNodeStatus
customLabel?: string
showIndicator?: boolean
nodeType?: 'start' | 'trigger'
}
const EntryNodeContainer: FC<EntryNodeContainerProps> = ({
children,
status = 'enabled',
customLabel,
showIndicator = true,
nodeType = 'trigger',
}) => {
const { t } = useTranslation()
const statusConfig = useMemo(() => {
const isDisabled = status === 'disabled'
const translationKey = nodeType === 'start' ? 'entryNodeStatus' : 'triggerStatus'
return {
label: customLabel || (isDisabled ? t(`workflow.${translationKey}.disabled`) : t(`workflow.${translationKey}.enabled`)),
dotColor: isDisabled ? 'bg-text-tertiary' : 'bg-green-500',
}
}, [status, customLabel, nodeType, t])
return (
<div className="w-[242px] rounded-2xl bg-workflow-block-wrapper-bg-1 px-0 pb-0 pt-0.5">
<div className="mb-0.5 flex items-center px-1.5 pt-0.5">
{showIndicator && (
<div className={cn('ml-0.5 mr-0.5 h-1.5 w-1.5 rounded-sm border border-black/15', statusConfig.dotColor)} />
)}
<span className={`text-2xs font-semibold uppercase text-text-tertiary ${!showIndicator ? 'ml-1.5' : ''}`}>
{statusConfig.label}
</span>
</div>
{children}
</div>
)
}
export default EntryNodeContainer

43
web/app/components/workflow/nodes/_base/components/trigger-container.tsx
View File

@ -1,43 +0,0 @@
import type { FC, ReactNode } from 'react'
import { useMemo } from 'react'
import { useTranslation } from 'react-i18next'
import cn from '@/utils/classnames'
export type TriggerStatus = 'enabled' | 'disabled'
type TriggerContainerProps = {
children: ReactNode
status?: TriggerStatus
customLabel?: string
}
const TriggerContainer: FC<TriggerContainerProps> = ({
children,
status = 'enabled',
customLabel,
}) => {
const { t } = useTranslation()
const statusConfig = useMemo(() => {
const isDisabled = status === 'disabled'
return {
label: customLabel || (isDisabled ? t('workflow.triggerStatus.disabled') : t('workflow.triggerStatus.enabled')),
dotColor: isDisabled ? 'bg-text-tertiary' : 'bg-green-500',
}
}, [status, customLabel, t])
return (
<div className="w-[242px] rounded-2xl bg-workflow-block-wrapper-bg-1 px-0 pb-0 pt-0.5">
<div className="mb-0.5 flex items-center px-1.5 pt-0.5">
<div className={cn('ml-0.5 mr-0.5 h-1.5 w-1.5 rounded-sm border border-black/15', statusConfig.dotColor)} />
<span className="text-2xs font-semibold uppercase text-text-tertiary">
{statusConfig.label}
</span>
</div>
{children}
</div>
)
}
export default TriggerContainer

17
web/app/components/workflow/nodes/_base/node.tsx
View File

@ -43,7 +43,7 @@ import NodeControl from './components/node-control'
import ErrorHandleOnNode from './components/error-handle/error-handle-on-node'
import RetryOnNode from './components/retry/retry-on-node'
import AddVariablePopupWithPosition from './components/add-variable-popup-with-position'
import TriggerContainer from './components/trigger-container'
import EntryNodeContainer from './components/entry-node-container'
import cn from '@/utils/classnames'
import BlockIcon from '@/app/components/workflow/block-icon'
import Tooltip from '@/app/components/base/tooltip'
@ -138,8 +138,6 @@ const BaseNode: FC<BaseNodeProps> = ({
return null
}, [data._loopIndex, data._runningStatus, t])
const isTriggerNode = TRIGGER_NODE_TYPES.includes(data.type as any)
const nodeContent = (
<div
className={cn(
@ -337,10 +335,17 @@ const BaseNode: FC<BaseNodeProps> = ({
</div>
)
return isTriggerNode ? (
<TriggerContainer status="enabled">
const isEntryNode = TRIGGER_NODE_TYPES.includes(data.type as any) || data.type === BlockEnum.Start
const isStartNode = data.type === BlockEnum.Start
return isEntryNode ? (
<EntryNodeContainer
status="enabled"
showIndicator={!isStartNode}
nodeType={isStartNode ? 'start' : 'trigger'}
>
{nodeContent}
</TriggerContainer>
</EntryNodeContainer>
) : nodeContent
}