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

UI enhancements for workflow checklist component (#24647)

Browse Source
This commit is contained in:
lyzno1
2025-08-28 10:10:10 +08:00
committed by GitHub
parent c90dad566f
commit add6b79231
14 changed files with 132 additions and 24 deletions
Download Patch File Download Diff File Expand all files Collapse all files

34
web/app/components/workflow/header/checklist.tsx
View File

@ -29,7 +29,8 @@ import {
import {
ChecklistSquare,
} from '@/app/components/base/icons/src/vender/line/general'
import { AlertTriangle } from '@/app/components/base/icons/src/vender/line/alertsAndFeedback'
import { Warning } from '@/app/components/base/icons/src/vender/line/alertsAndFeedback'
import { IconR } from '@/app/components/base/icons/src/vender/line/arrows'
type WorkflowChecklistProps = {
disabled: boolean
@ -93,17 +94,17 @@ const WorkflowChecklist = ({
<RiCloseLine className='h-4 w-4 text-text-tertiary' />
</div>
</div>
<div className='py-2'>
<div className='pb-2'>
{
!!needWarningNodes.length && (
<>
<div className='px-4 text-xs text-text-tertiary'>{t('workflow.panel.checklistTip')}</div>
<div className='px-4 pt-1 text-xs text-text-tertiary'>{t('workflow.panel.checklistTip')}</div>
<div className='px-4 py-2'>
{
needWarningNodes.map(node => (
<div
key={node.id}
className='mb-2 cursor-pointer rounded-lg border-[0.5px] border-components-panel-border bg-components-panel-bg shadow-xs last-of-type:mb-0'
className='group mb-2 cursor-pointer rounded-lg border-[0.5px] border-components-panel-border bg-components-panel-bg shadow-xs last-of-type:mb-0'
onClick={() => {
handleNodeSelect(node.id)
setOpen(false)
@ -118,13 +119,24 @@ const WorkflowChecklist = ({
<span className='grow truncate'>
{node.title}
</span>
<div className='flex h-4 w-[50px] items-center justify-center gap-1 opacity-0 transition-opacity duration-200 group-hover:opacity-100'>
<span className='text-xs font-medium leading-4 text-primary-600'>
{t('workflow.panel.goTo')}
</span>
<IconR className='h-3.5 w-3.5 text-primary-600' />
</div>
</div>
<div className='border-t-[0.5px] border-divider-regular'>
<div
className={cn(
'rounded-b-lg border-t-[0.5px] border-divider-regular',
(node.unConnected || node.errorMessage) && 'bg-gradient-to-r from-components-badge-bg-orange-soft to-transparent',
)}
>
{
node.unConnected && (
<div className='px-3 py-2 last:rounded-b-lg'>
<div className='flex text-xs leading-[18px] text-text-tertiary'>
<AlertTriangle className='mr-2 mt-[3px] h-3 w-3 text-[#F79009]' />
<div className='px-3 py-1 first:pt-1.5 last:pb-1.5'>
<div className='flex text-xs leading-4 text-text-tertiary'>
<Warning className='mr-2 mt-[2px] h-3 w-3 text-[#F79009]' />
{t('workflow.common.needConnectTip')}
</div>
</div>
@ -132,9 +144,9 @@ const WorkflowChecklist = ({
}
{
node.errorMessage && (
<div className='px-3 py-2 last:rounded-b-lg'>
<div className='flex text-xs leading-[18px] text-text-tertiary'>
<AlertTriangle className='mr-2 mt-[3px] h-3 w-3 text-[#F79009]' />
<div className='px-3 py-1 first:pt-1.5 last:pb-1.5'>
<div className='flex text-xs leading-4 text-text-tertiary'>
<Warning className='mr-2 mt-[2px] h-3 w-3 text-[#F79009]' />
{node.errorMessage}
</div>
</div>