Feat: workflow dark mode (#17785)

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

View File

@@ -47,12 +47,12 @@ const VarItem: FC<Props> = ({
hideEditVarModal()
}, [onChange, hideEditVarModal])
return (
<div ref={ref} className='flex h-8 cursor-pointer items-center justify-between rounded-lg border border-gray-200 bg-white px-2.5 shadow-xs hover:shadow-md'>
<div ref={ref} className='flex h-8 cursor-pointer items-center justify-between rounded-lg border border-components-panel-border-subtle bg-components-panel-on-panel-item-bg px-2.5 shadow-xs hover:shadow-md'>
<div className='flex w-0 grow items-center space-x-1'>
<Variable02 className='h-3.5 w-3.5 text-primary-500' />
<div title={payload.variable} className='max-w-[130px] shrink-0 truncate text-[13px] font-medium text-gray-700'>{payload.variable}</div>
{payload.label && (<><div className='shrink-0 text-xs font-medium text-gray-400'>·</div>
<div title={payload.label as string} className='max-w-[130px] truncate text-[13px] font-medium text-gray-500'>{payload.label as string}</div>
<Variable02 className='h-3.5 w-3.5 text-text-accent' />
<div title={payload.variable} className='max-w-[130px] shrink-0 truncate text-[13px] font-medium text-text-secondary'>{payload.variable}</div>
{payload.label && (<><div className='shrink-0 text-xs font-medium text-text-quaternary'>·</div>
<div title={payload.label as string} className='max-w-[130px] truncate text-[13px] font-medium text-text-tertiary'>{payload.label as string}</div>
</>)}
{showLegacyBadge && (
<Badge
@@ -67,18 +67,18 @@ const VarItem: FC<Props> = ({
? (
<>
{payload.required && (
<div className='mr-2 text-xs font-normal text-gray-500'>{t('workflow.nodes.start.required')}</div>
<div className='mr-2 text-xs font-normal text-text-tertiary'>{t('workflow.nodes.start.required')}</div>
)}
<InputVarTypeIcon type={payload.type} className='h-3.5 w-3.5 text-gray-500' />
<InputVarTypeIcon type={payload.type} className='h-3.5 w-3.5 text-text-tertiary' />
</>
)
: (!readonly && (
<>
<div onClick={showEditVarModal} className='mr-1 cursor-pointer rounded-md p-1 hover:bg-black/5'>
<Edit03 className='h-4 w-4 text-gray-500' />
<div onClick={showEditVarModal} className='mr-1 cursor-pointer rounded-md p-1 hover:bg-state-base-hover'>
<Edit03 className='h-4 w-4 text-text-tertiary' />
</div>
<div onClick={onRemove} className='cursor-pointer rounded-md p-1 hover:bg-black/5'>
<RiDeleteBinLine className='h-4 w-4 text-gray-500' />
<div onClick={onRemove} className='group cursor-pointer rounded-md p-1 hover:bg-state-destructive-hover'>
<RiDeleteBinLine className='h-4 w-4 text-text-tertiary group-hover:text-text-destructive' />
</div>
</>
))}

View File

@@ -46,7 +46,7 @@ const VarList: FC<Props> = ({
if (list.length === 0) {
return (
<div className='flex h-[42px] items-center justify-center rounded-md bg-gray-50 text-xs font-normal leading-[18px] text-gray-500'>
<div className='flex h-[42px] items-center justify-center rounded-md bg-components-panel-bg text-xs font-normal leading-[18px] text-text-tertiary'>
{t('workflow.nodes.start.noVarTip')}
</div>
)

View File

@@ -20,15 +20,15 @@ const Node: FC<NodeProps<StartNodeType>> = ({
<div className='mb-1 px-3 py-1'>
<div className='space-y-0.5'>
{variables.map(variable => (
<div key={variable.variable} className='flex h-6 items-center justify-between space-x-1 rounded-md bg-gray-100 px-1 text-xs font-normal text-gray-700'>
<div key={variable.variable} className='flex h-6 items-center justify-between space-x-1 rounded-md bg-workflow-block-parma-bg px-1'>
<div className='flex w-0 grow items-center space-x-1'>
<Variable02 className='h-3.5 w-3.5 shrink-0 text-primary-500' />
<span className='w-0 grow truncate text-xs font-normal text-gray-700'>{variable.variable}</span>
<Variable02 className='h-3.5 w-3.5 shrink-0 text-text-accent' />
<span className='system-xs-regular w-0 grow truncate text-text-secondary'>{variable.variable}</span>
</div>
<div className='ml-1 flex items-center space-x-1'>
{variable.required && <span className='text-xs font-normal uppercase text-gray-500'>{t(`${i18nPrefix}.required`)}</span>}
<InputVarTypeIcon type={variable.type} className='h-3 w-3 text-gray-500' />
{variable.required && <span className='system-2xs-regular-uppercase text-text-tertiary'>{t(`${i18nPrefix}.required`)}</span>}
<InputVarTypeIcon type={variable.type} className='h-3 w-3 text-text-tertiary' />
</div>
</div>
))}

View File

@@ -64,7 +64,7 @@ const Panel: FC<NodePanelProps<StartNodeType>> = ({
variable: 'sys.query',
} as any}
rightContent={
<div className='text-xs font-normal text-gray-500'>
<div className='text-xs font-normal text-text-tertiary'>
String
</div>
}
@@ -78,7 +78,7 @@ const Panel: FC<NodePanelProps<StartNodeType>> = ({
variable: 'sys.files',
} as any}
rightContent={
<div className='text-xs font-normal text-gray-500'>
<div className='text-xs font-normal text-text-tertiary'>
Array[File]
</div>
}
@@ -92,7 +92,7 @@ const Panel: FC<NodePanelProps<StartNodeType>> = ({
variable: 'sys.dialogue_count',
} as any}
rightContent={
<div className='text-xs font-normal text-gray-500'>
<div className='text-xs font-normal text-text-tertiary'>
Number
</div>
}
@@ -103,7 +103,7 @@ const Panel: FC<NodePanelProps<StartNodeType>> = ({
variable: 'sys.conversation_id',
} as any}
rightContent={
<div className='text-xs font-normal text-gray-500'>
<div className='text-xs font-normal text-text-tertiary'>
String
</div>
}
@@ -117,7 +117,7 @@ const Panel: FC<NodePanelProps<StartNodeType>> = ({
variable: 'sys.user_id',
} as any}
rightContent={
<div className='text-xs font-normal text-gray-500'>
<div className='text-xs font-normal text-text-tertiary'>
String
</div>
}
@@ -128,7 +128,7 @@ const Panel: FC<NodePanelProps<StartNodeType>> = ({
variable: 'sys.app_id',
} as any}
rightContent={
<div className='text-xs font-normal text-gray-500'>
<div className='text-xs font-normal text-text-tertiary'>
String
</div>
}
@@ -139,7 +139,7 @@ const Panel: FC<NodePanelProps<StartNodeType>> = ({
variable: 'sys.workflow_id',
} as any}
rightContent={
<div className='text-xs font-normal text-gray-500'>
<div className='text-xs font-normal text-text-tertiary'>
String
</div>
}
@@ -150,7 +150,7 @@ const Panel: FC<NodePanelProps<StartNodeType>> = ({
variable: 'sys.workflow_run_id',
} as any}
rightContent={
<div className='text-xs font-normal text-gray-500'>
<div className='text-xs font-normal text-text-tertiary'>
String
</div>
}