estel/dify
1
0
Fork 0
Code Issues Pull Requests Actions 1 Packages Projects Releases Wiki Activity

Feat: workflow dark mode (#17785)

Browse Source
This commit is contained in:
KVOJJJin
2025-04-10 17:15:48 +08:00
committed by GitHub
parent 636a0ba37f
commit 17a26da1e6
75 changed files with 324 additions and 368 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -79,37 +79,37 @@ const WorkflowChecklist = ({
</PortalToFollowElemTrigger>
<PortalToFollowElemContent className='z-[12]'>
<div
className='w-[420px] overflow-y-auto rounded-2xl border-[0.5px] border-black/5 bg-white shadow-lg'
className='w-[420px] overflow-y-auto rounded-2xl border-[0.5px] border-components-panel-border bg-components-panel-bg shadow-lg'
style={{
maxHeight: 'calc(2 / 3 * 100vh)',
}}
>
<div className='text-md sticky top-0 z-[1] flex h-[44px] items-center bg-white pl-4 pr-3 pt-3 font-semibold text-gray-900'>
<div className='text-md sticky top-0 z-[1] flex h-[44px] items-center bg-components-panel-bg pl-4 pr-3 pt-3 font-semibold text-text-primary'>
<div className='grow'>{t('workflow.panel.checklist')}{needWarningNodes.length ? `(${needWarningNodes.length})` : ''}</div>
<div
className='flex h-6 w-6 shrink-0 cursor-pointer items-center justify-center'
onClick={() => setOpen(false)}
>
<RiCloseLine className='h-4 w-4 text-gray-500' />
<RiCloseLine className='h-4 w-4 text-text-tertiary' />
</div>
</div>
<div className='py-2'>
{
!!needWarningNodes.length && (
<>
<div className='px-4 text-xs text-gray-400'>{t('workflow.panel.checklistTip')}</div>
<div className='px-4 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-gray-200 bg-white shadow-xs last-of-type:mb-0'
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'
onClick={() => {
handleNodeSelect(node.id)
setOpen(false)
}}
>
<div className='flex h-9 items-center p-2 text-xs font-medium text-gray-700'>
<div className='flex h-9 items-center p-2 text-xs font-medium text-text-secondary'>
<BlockIcon
type={node.type}
className='mr-1.5'
@@ -119,11 +119,11 @@ const WorkflowChecklist = ({
{node.title}
</span>
</div>
<div className='border-t-[0.5px] border-t-black/2'>
<div className='border-t-[0.5px] border-divider-regular'>
{
node.unConnected && (
<div className='rounded-b-lg bg-gray-25 px-3 py-2'>
<div className='flex text-xs leading-[18px] text-gray-500'>
<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]' />
{t('workflow.common.needConnectTip')}
</div>
@@ -132,8 +132,8 @@ const WorkflowChecklist = ({
}
{
node.errorMessage && (
<div className='rounded-b-lg bg-gray-25 px-3 py-2'>
<div className='flex text-xs leading-[18px] text-gray-500'>
<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]' />
{node.errorMessage}
</div>
@@ -150,8 +150,8 @@ const WorkflowChecklist = ({
}
{
!needWarningNodes.length && (
<div className='mx-4 mb-3 rounded-lg bg-gray-50 py-4 text-center text-xs text-gray-400'>
<ChecklistSquare className='mx-auto mb-[5px] h-8 w-8 text-gray-300' />
<div className='mx-4 mb-3 rounded-lg bg-components-panel-bg py-4 text-center text-xs text-text-tertiary'>
<ChecklistSquare className='mx-auto mb-[5px] h-8 w-8 text-text-quaternary' />
{t('workflow.panel.checklistResolved')}
</div>
)