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}
onChange={e => setLocalValue(e.target.value)}
className={`
grow mr-2 px-1 h-6 text-base text-gray-900 font-semibold rounded-lg border border-transparent appearance-none outline-none
hover:bg-gray-50
focus:border-gray-300 focus:shadow-xs focus:bg-white caret-[#295EFF]
grow mr-2 px-1 h-6 system-xl-semibold text-text-primary rounded-lg border border-transparent appearance-none outline-none
placeholder:text-text-placeholder
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
`}
placeholder={t('workflow.common.addTitle') || ''}
@ -66,8 +67,8 @@ export const DescriptionInput = memo(({
<div
className={`
group flex px-2 py-[5px] max-h-[60px] rounded-lg overflow-y-auto
border border-transparent hover:bg-gray-50 leading-0
${focus && '!border-gray-300 shadow-xs !bg-gray-50'}
border border-transparent bg-transparent hover:bg-state-base-hover leading-0
${focus && '!border-components-input-border-active shadow-xs shadow-shadow-shadow-3 !bg-components-input-bg-active'}
`}
>
<Textarea
@ -77,9 +78,9 @@ export const DescriptionInput = memo(({
onFocus={handleFocus}
onBlur={handleBlur}
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
placeholder:text-gray-400 caret-[#295EFF]
placeholder:text-text-placeholder caret-[#295EFF]
`}
placeholder={t('workflow.common.addDescription') || ''}
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 {
RiDeleteBinLine,
RiEditLine,
} from '@remixicon/react'
import InputVarTypeIcon from '../../_base/components/input-var-type-icon'
import type { InputVar, MoreInfo } from '@/app/components/workflow/types'
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 ConfigVarModal from '@/app/components/app/configuration/config-var/config-modal'
@ -46,12 +46,12 @@ const VarItem: FC<Props> = ({
hideEditVarModal()
}, [onChange, hideEditVarModal])
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'>
<Variable02 className='w-3.5 h-3.5 text-primary-500' />
<div title={payload.variable} className='shrink-0 max-w-[130px] 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='w-3.5 h-3.5 text-text-accent' />
<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 system-xs-regular text-text-quaternary'>·</div>
<div title={payload.label as string} className='max-w-[130px] truncate system-xs-medium text-text-tertiary'>{payload.label as string}</div>
</>)}
{showLegacyBadge && (
<Badge
@ -66,18 +66,18 @@ const VarItem: FC<Props> = ({
? (
<>
{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 && (
<>
<div onClick={showEditVarModal} className='mr-1 p-1 rounded-md cursor-pointer hover:bg-black/5'>
<Edit03 className='w-4 h-4 text-gray-500' />
<div onClick={showEditVarModal} className='mr-1 p-1 cursor-pointer'>
<RiEditLine className='w-4 h-4 text-text-tertiary' />
</div>
<div onClick={onRemove} className='p-1 rounded-md cursor-pointer hover:bg-black/5'>
<RiDeleteBinLine className='w-4 h-4 text-gray-500' />
<div onClick={onRemove} className='p-1 cursor-pointer'>
<RiDeleteBinLine className='w-4 h-4 text-text-tertiary' />
</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) {
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')}
</div>
)

16
web/app/components/workflow/nodes/start/panel.tsx
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='system-xs-regular 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='system-xs-regular 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='system-xs-regular 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='system-xs-regular 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='system-xs-regular 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='system-xs-regular 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='system-xs-regular 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='system-xs-regular text-text-tertiary'>
String
</div>
}