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

style: update UI components for improved consistency and accessibility

Browse Source
This commit is contained in:
twwu 2025-01-10 18:02:35 +08:00
parent 5b8e211c9a
commit 894a039a3e
4 changed files with 29 additions and 28 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -33,9 +33,10 @@ 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-6 system-xl-semibold text-text-primary rounded-lg border border-transparent appearance-none outline-none
hover:bg-gray-50 placeholder:text-text-placeholder
focus:border-gray-300 focus:shadow-xs focus:bg-white caret-[#295EFF] bg-transparent hover:bg-state-base-hover
focus:border-components-input-border-active focus:shadow-xs shadow-shadow-shadow-3 focus:bg-components-input-active caret-[#295EFF]
min-w-0 min-w-0
`} `}
placeholder={t('workflow.common.addTitle') || ''} placeholder={t('workflow.common.addTitle') || ''}
@ -66,8 +67,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 border border-transparent bg-transparent hover:bg-state-base-hover leading-0
${focus && '!border-gray-300 shadow-xs !bg-gray-50'} ${focus && '!border-components-input-border-active shadow-xs shadow-shadow-shadow-3 !bg-components-input-bg-active'}
`} `}
> >
<Textarea <Textarea
@ -77,9 +78,9 @@ export const DescriptionInput = memo(({
onFocus={handleFocus} onFocus={handleFocus}
onBlur={handleBlur} onBlur={handleBlur}
className={` className={`
w-full text-xs text-gray-900 leading-[18px] bg-transparent w-full text-xs text-text-primary leading-[18px] bg-transparent
appearance-none outline-none resize-none appearance-none outline-none resize-none
placeholder:text-gray-400 caret-[#295EFF] placeholder:text-text-placeholder caret-[#295EFF]
`} `}
placeholder={t('workflow.common.addDescription') || ''} placeholder={t('workflow.common.addDescription') || ''}
autoSize autoSize

24
web/app/components/workflow/nodes/start/components/var-item.tsx
View File

@ -5,11 +5,11 @@ import { useBoolean, useHover } from 'ahooks'
import { useTranslation } from 'react-i18next' import { useTranslation } from 'react-i18next'
import { import {
RiDeleteBinLine, RiDeleteBinLine,
RiEditLine,
} from '@remixicon/react' } from '@remixicon/react'
import InputVarTypeIcon from '../../_base/components/input-var-type-icon' import InputVarTypeIcon from '../../_base/components/input-var-type-icon'
import type { InputVar, MoreInfo } from '@/app/components/workflow/types' import type { InputVar, MoreInfo } from '@/app/components/workflow/types'
import { Variable02 } from '@/app/components/base/icons/src/vender/solid/development' import { Variable02 } from '@/app/components/base/icons/src/vender/solid/development'
import { Edit03 } from '@/app/components/base/icons/src/vender/solid/general'
import Badge from '@/app/components/base/badge' import Badge from '@/app/components/base/badge'
import ConfigVarModal from '@/app/components/app/configuration/config-var/config-modal' import ConfigVarModal from '@/app/components/app/configuration/config-var/config-modal'
@ -46,12 +46,12 @@ const VarItem: FC<Props> = ({
hideEditVarModal() hideEditVarModal()
}, [onChange, hideEditVarModal]) }, [onChange, hideEditVarModal])
return ( return (
<div ref={ref} className='flex items-center h-8 justify-between px-2.5 bg-white rounded-lg border border-gray-200 shadow-xs cursor-pointer hover:shadow-md'> <div ref={ref} className='flex items-center h-8 justify-between px-2.5 bg-components-panel-on-panel-item-bg rounded-lg border border-components-panel-border-subtle shadow-xs cursor-pointer hover:shadow-md shadow-shadow-shadow-3'>
<div className='flex items-center space-x-1 grow w-0'> <div className='flex items-center space-x-1 grow w-0'>
<Variable02 className='w-3.5 h-3.5 text-primary-500' /> <Variable02 className='w-3.5 h-3.5 text-text-accent' />
<div title={payload.variable} className='shrink-0 max-w-[130px] truncate text-[13px] font-medium text-gray-700'>{payload.variable}</div> <div title={payload.variable} className='shrink-0 max-w-[130px] truncate system-sm-medium text-text-secondary'>{payload.variable}</div>
{payload.label && (<><div className='shrink-0 text-xs font-medium text-gray-400'>·</div> {payload.label && (<><div className='shrink-0 system-xs-regular text-text-quaternary'>·</div>
<div title={payload.label as string} className='max-w-[130px] truncate text-[13px] font-medium text-gray-500'>{payload.label as string}</div> <div title={payload.label as string} className='max-w-[130px] truncate system-xs-medium text-text-tertiary'>{payload.label as string}</div>
</>)} </>)}
{showLegacyBadge && ( {showLegacyBadge && (
<Badge <Badge
@ -66,18 +66,18 @@ const VarItem: FC<Props> = ({
? ( ? (
<> <>
{payload.required && ( {payload.required && (
<div className='mr-2 text-xs font-normal text-gray-500'>{t('workflow.nodes.start.required')}</div> <Badge className='mr-2' uppercase>{t('workflow.nodes.start.required')}</Badge>
)} )}
<InputVarTypeIcon type={payload.type} className='w-3.5 h-3.5 text-gray-500' /> <InputVarTypeIcon type={payload.type} className='w-3 h-3 text-text-tertiary' />
</> </>
) )
: (!readonly && ( : (!readonly && (
<> <>
<div onClick={showEditVarModal} className='mr-1 p-1 rounded-md cursor-pointer hover:bg-black/5'> <div onClick={showEditVarModal} className='mr-1 p-1 cursor-pointer'>
<Edit03 className='w-4 h-4 text-gray-500' /> <RiEditLine className='w-4 h-4 text-text-tertiary' />
</div> </div>
<div onClick={onRemove} className='p-1 rounded-md cursor-pointer hover:bg-black/5'> <div onClick={onRemove} className='p-1 cursor-pointer'>
<RiDeleteBinLine className='w-4 h-4 text-gray-500' /> <RiDeleteBinLine className='w-4 h-4 text-text-tertiary' />
</div> </div>
</> </>
))} ))}

2
web/app/components/workflow/nodes/start/components/var-list.tsx
View File

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

16
web/app/components/workflow/nodes/start/panel.tsx
View File

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