AI/dify
1
0
Fork 0
mirror of https://git.mirrors.martin98.com/https://github.com/langgenius/dify.git synced 2025-08-12 18:59:07 +08:00
Code Issues Packages Projects Releases Wiki Activity

fix: adjust iteration node dark style (#13051)

Browse Source
This commit is contained in:
NFish 2025-01-26 11:19:41 +08:00 committed by GitHub
parent d4be5ef9de
commit d1fc65fabc
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
9 changed files with 21 additions and 24 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
web/app/components/workflow/nodes/_base/components/node-control.tsx
View File

@ -45,13 +45,13 @@ const NodeControl: FC<NodeControlProps> = ({
`} `}
> >
<div <div
className='flex items-center px-0.5 h-6 bg-white rounded-lg border-[0.5px] border-gray-100 shadow-xs text-gray-500' className='flex items-center px-0.5 h-6 bg-components-actionbar-bg rounded-lg border-[0.5px] border-components-actionbar-border backdrop-blur-[5px] shadow-md text-text-tertiary'
onClick={e => e.stopPropagation()} onClick={e => e.stopPropagation()}
> >
{ {
canRunBySingle(data.type) && ( canRunBySingle(data.type) && (
<div <div
className='flex items-center justify-center w-5 h-5 rounded-md cursor-pointer hover:bg-black/5' className='flex items-center justify-center w-5 h-5 rounded-md cursor-pointer hover:bg-state-base-hover'
onClick={() => { onClick={() => {
handleNodeDataUpdate({ handleNodeDataUpdate({
id, id,

6
web/app/components/workflow/nodes/_base/components/panel-operator/index.tsx
View File

@ -54,12 +54,12 @@ const PanelOperator = ({
<div <div
className={` className={`
flex items-center justify-center w-6 h-6 rounded-md cursor-pointer flex items-center justify-center w-6 h-6 rounded-md cursor-pointer
hover:bg-black/5 hover:bg-state-base-hover
${open && 'bg-black/5'} ${open && 'bg-state-base-hover'}
${triggerClassName} ${triggerClassName}
`} `}
> >
<RiMoreFill className={`w-4 h-4 ${inNode ? 'text-gray-500' : 'text-gray-700'}`} /> <RiMoreFill className={'w-4 h-4 text-text-tertiary'} />
</div> </div>
</PortalToFollowElemTrigger> </PortalToFollowElemTrigger>
<PortalToFollowElemContent className='z-[11]'> <PortalToFollowElemContent className='z-[11]'>

10
web/app/components/workflow/nodes/_base/components/title-description-input.tsx
View File

@ -33,10 +33,8 @@ export const TitleInput = memo(({
value={localValue} value={localValue}
onChange={e => setLocalValue(e.target.value)} onChange={e => setLocalValue(e.target.value)}
className={` className={`
grow mr-2 px-1 h-6 text-base text-gray-900 font-semibold rounded-lg border border-transparent appearance-none outline-none grow mr-2 px-1 h-7 text-text-primary system-xl-semibold rounded-md border border-transparent appearance-none outline-none
hover:bg-gray-50 focus:shadow-xs min-w-0
focus:border-gray-300 focus:shadow-xs focus:bg-white caret-[#295EFF]
min-w-0
`} `}
placeholder={t('workflow.common.addTitle') || ''} placeholder={t('workflow.common.addTitle') || ''}
onBlur={handleBlur} onBlur={handleBlur}
@ -66,8 +64,8 @@ export const DescriptionInput = memo(({
<div <div
className={` className={`
group flex px-2 py-[5px] max-h-[60px] rounded-lg overflow-y-auto group flex px-2 py-[5px] max-h-[60px] rounded-lg overflow-y-auto
border border-transparent hover:bg-gray-50 leading-0 leading-0 bg-components-panel-bg
${focus && '!border-gray-300 shadow-xs !bg-gray-50'} ${focus && '!shadow-xs'}
`} `}
> >
<Textarea <Textarea

2
web/app/components/workflow/nodes/_base/components/variable/var-reference-picker.tsx
View File

@ -270,7 +270,7 @@ const VarReferencePicker: FC<Props> = ({
<AddButton onClick={() => { }}></AddButton> <AddButton onClick={() => { }}></AddButton>
</div> </div>
) )
: (<div ref={!isSupportConstantValue ? triggerRef : null} className={cn((open || isFocus) ? 'border-gray-300' : 'border-gray-100', 'relative group/wrap flex items-center w-full h-8', !isSupportConstantValue && 'p-1 rounded-lg bg-gray-100 border', isInTable && 'bg-transparent border-none', readonly && 'bg-components-input-bg-disabled')}> : (<div ref={!isSupportConstantValue ? triggerRef : null} className={cn((open || isFocus) ? 'border-gray-300' : 'border-gray-100', 'relative group/wrap flex items-center w-full h-8', !isSupportConstantValue && 'p-1 rounded-lg bg-components-input-bg-normal', isInTable && 'bg-transparent border-none', readonly && 'bg-components-input-bg-disabled')}>
{isSupportConstantValue {isSupportConstantValue
? <div onClick={(e) => { ? <div onClick={(e) => {
e.stopPropagation() e.stopPropagation()

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

@ -107,7 +107,7 @@ const BaseNode: FC<BaseNodeProps> = ({
'group relative pb-1 shadow-xs', 'group relative pb-1 shadow-xs',
'border border-transparent rounded-[15px]', 'border border-transparent rounded-[15px]',
data.type !== BlockEnum.Iteration && 'w-[240px] bg-workflow-block-bg', data.type !== BlockEnum.Iteration && 'w-[240px] bg-workflow-block-bg',
data.type === BlockEnum.Iteration && 'flex flex-col w-full h-full bg-[#fcfdff]/80', data.type === BlockEnum.Iteration && 'flex flex-col w-full h-full bg-workflow-block-bg-transparent border-workflow-block-border',
!data._runningStatus && 'hover:shadow-lg', !data._runningStatus && 'hover:shadow-lg',
showRunningBorder && '!border-state-accent-solid', showRunningBorder && '!border-state-accent-solid',
showSuccessBorder && '!border-state-success-solid', showSuccessBorder && '!border-state-success-solid',
@ -169,7 +169,7 @@ const BaseNode: FC<BaseNodeProps> = ({
} }
<div className={cn( <div className={cn(
'flex items-center px-3 pt-3 pb-2 rounded-t-2xl', 'flex items-center px-3 pt-3 pb-2 rounded-t-2xl',
data.type === BlockEnum.Iteration && 'bg-[rgba(250,252,255,0.9)]', data.type === BlockEnum.Iteration && 'bg-transparent',
)}> )}>
<BlockIcon <BlockIcon
className='shrink-0 mr-2' className='shrink-0 mr-2'

2
web/app/components/workflow/nodes/iteration-start/index.tsx
View File

@ -9,7 +9,7 @@ const IterationStartNode = ({ id, data }: NodeProps) => {
const { t } = useTranslation() const { t } = useTranslation()
return ( return (
<div className='group flex nodrag items-center justify-center w-11 h-11 mt-1 rounded-2xl border border-workflow-block-border bg-white'> <div className='group flex nodrag items-center justify-center w-11 h-11 mt-1 rounded-2xl border border-workflow-block-border bg-workflow-block-bg shadow-xs'>
<Tooltip popupContent={t('workflow.blocks.iteration-start')} asChild={false}> <Tooltip popupContent={t('workflow.blocks.iteration-start')} asChild={false}>
<div className='flex items-center justify-center w-6 h-6 rounded-full border-[0.5px] border-components-panel-border-subtle bg-util-colors-blue-brand-blue-brand-500'> <div className='flex items-center justify-center w-6 h-6 rounded-full border-[0.5px] border-components-panel-border-subtle bg-util-colors-blue-brand-blue-brand-500'>
<RiHome5Fill className='w-3 h-3 text-text-primary-on-surface' /> <RiHome5Fill className='w-3 h-3 text-text-primary-on-surface' />

6
web/app/components/workflow/nodes/iteration/add-block.tsx
View File

@ -49,9 +49,9 @@ const AddBlock = ({
const renderTriggerElement = useCallback((open: boolean) => { const renderTriggerElement = useCallback((open: boolean) => {
return ( return (
<div className={cn( <div className={cn(
'relative inline-flex items-center px-3 h-8 rounded-lg border-[0.5px] border-gray-50 bg-white shadow-xs cursor-pointer hover:bg-gray-200 text-[13px] font-medium text-gray-700', 'relative inline-flex items-center px-3 h-8 rounded-lg border-[0.5px] border-components-button-secondary-border bg-components-button-secondary-bg shadow-xs cursor-pointer hover:bg-components-button-secondary-bg-hover system-sm-medium text-components-button-secondary-text backdrop-blur-[5px]',
`${nodesReadOnly && '!cursor-not-allowed opacity-50'}`, `${nodesReadOnly && '!cursor-not-allowed bg-components-button-secondary-bg-disabled'}`,
open && '!bg-gray-50', open && 'bg-components-button-secondary-bg-hover',
)}> )}>
<RiAddLine className='mr-1 w-4 h-4' /> <RiAddLine className='mr-1 w-4 h-4' />
{t('workflow.common.addBlock')} {t('workflow.common.addBlock')}

4
web/app/components/workflow/nodes/iteration/node.tsx
View File

@ -43,14 +43,14 @@ const Node: FC<NodeProps<IterationNodeType>> = ({
return ( return (
<div className={cn( <div className={cn(
'relative min-w-[240px] min-h-[90px] w-full h-full rounded-2xl bg-[#F0F2F7]/90', 'relative min-w-[240px] min-h-[90px] w-full h-full rounded-2xl',
)}> )}>
<Background <Background
id={`iteration-background-${id}`} id={`iteration-background-${id}`}
className='rounded-2xl !z-0' className='rounded-2xl !z-0'
gap={[14 / zoom, 14 / zoom]} gap={[14 / zoom, 14 / zoom]}
size={2 / zoom} size={2 / zoom}
color='#E4E5E7' color='var(--color-workflow-canvas-workflow-dot-color)'
/> />
{ {
data._isCandidate && ( data._isCandidate && (

7
web/app/components/workflow/nodes/iteration/panel.tsx
View File

@ -76,7 +76,7 @@ const Panel: FC<NodePanelProps<IterationNodeType>> = ({
<Field <Field
title={t(`${i18nPrefix}.input`)} title={t(`${i18nPrefix}.input`)}
operations={( operations={(
<div className='flex items-center h-[18px] px-1 border border-black/8 rounded-[5px] text-xs font-medium text-gray-500 capitalize'>Array</div> <div className='flex items-center h-[18px] px-1 border border-divider-deep rounded-[5px] system-2xs-medium-uppercase text-text-tertiary capitalize'>Array</div>
)} )}
> >
<VarReferencePicker <VarReferencePicker
@ -94,7 +94,7 @@ const Panel: FC<NodePanelProps<IterationNodeType>> = ({
<Field <Field
title={t(`${i18nPrefix}.output`)} title={t(`${i18nPrefix}.output`)}
operations={( operations={(
<div className='flex items-center h-[18px] px-1 border border-black/8 rounded-[5px] text-xs font-medium text-gray-500 capitalize'>Array</div> <div className='flex items-center h-[18px] px-1 border border-divider-deep rounded-[5px] system-2xs-medium-uppercase text-text-tertiary capitalize'>Array</div>
)} )}
> >
<VarReferencePicker <VarReferencePicker
@ -134,8 +134,7 @@ const Panel: FC<NodePanelProps<IterationNodeType>> = ({
<div className='px-4 py-2'> <div className='px-4 py-2'>
<Field title={t(`${i18nPrefix}.errorResponseMethod`)} > <Field title={t(`${i18nPrefix}.errorResponseMethod`)} >
<Select items={responseMethod} defaultValue={inputs.error_handle_mode} onSelect={changeErrorResponseMode} allowSearch={false}> <Select items={responseMethod} defaultValue={inputs.error_handle_mode} onSelect={changeErrorResponseMode} allowSearch={false} />
</Select>
</Field> </Field>
</div> </div>