mirror of
http://112.124.100.131/huang.ze/ebiz-dify-ai.git
synced 2025-12-10 19:36:53 +08:00
Chore: frontend infrastructure upgrade (#16420)
Co-authored-by: NFish <douxc512@gmail.com> Co-authored-by: zxhlyh <jasonapring2015@outlook.com> Co-authored-by: twwu <twwu@dify.ai> Co-authored-by: jZonG <jzongcode@gmail.com>
This commit is contained in:
Joel
@@ -178,44 +178,44 @@ const WorkflowToolConfigureButton = ({
|
||||
<Divider type='horizontal' className='h-[1px] bg-divider-subtle' />
|
||||
{(!published || !isLoading) && (
|
||||
<div className={cn(
|
||||
'group bg-background-section-burn rounded-lg transition-colors',
|
||||
disabled ? 'shadow-xs opacity-30 cursor-not-allowed' : 'cursor-pointer',
|
||||
'group rounded-lg bg-background-section-burn transition-colors',
|
||||
disabled ? 'cursor-not-allowed opacity-30 shadow-xs' : 'cursor-pointer',
|
||||
!disabled && !published && 'hover:bg-state-accent-hover',
|
||||
)}>
|
||||
{isCurrentWorkspaceManager
|
||||
? (
|
||||
<div
|
||||
className='flex justify-start items-center gap-2 p-2 pl-2.5'
|
||||
className='flex items-center justify-start gap-2 p-2 pl-2.5'
|
||||
onClick={() => !disabled && !published && setShowModal(true)}
|
||||
>
|
||||
<RiHammerLine className={cn('relative w-4 h-4 text-text-secondary', !disabled && !published && 'group-hover:text-text-accent')} />
|
||||
<RiHammerLine className={cn('relative h-4 w-4 text-text-secondary', !disabled && !published && 'group-hover:text-text-accent')} />
|
||||
<div
|
||||
title={t('workflow.common.workflowAsTool') || ''}
|
||||
className={cn('grow shrink basis-0 system-sm-medium text-text-secondary truncate', !disabled && !published && 'group-hover:text-text-accent')}
|
||||
className={cn('system-sm-medium shrink grow basis-0 truncate text-text-secondary', !disabled && !published && 'group-hover:text-text-accent')}
|
||||
>
|
||||
{t('workflow.common.workflowAsTool')}
|
||||
</div>
|
||||
{!published && (
|
||||
<span className='shrink-0 px-1 py-0.5 border border-divider-deep rounded-[5px] bg-components-badge-bg-dimm system-2xs-medium-uppercase text-text-tertiary'>
|
||||
<span className='system-2xs-medium-uppercase shrink-0 rounded-[5px] border border-divider-deep bg-components-badge-bg-dimm px-1 py-0.5 text-text-tertiary'>
|
||||
{t('workflow.common.configureRequired')}
|
||||
</span>
|
||||
)}
|
||||
</div>)
|
||||
: (
|
||||
<div
|
||||
className='flex justify-start items-center gap-2 p-2 pl-2.5'
|
||||
className='flex items-center justify-start gap-2 p-2 pl-2.5'
|
||||
>
|
||||
<RiHammerLine className='w-4 h-4 text-text-tertiary' />
|
||||
<RiHammerLine className='h-4 w-4 text-text-tertiary' />
|
||||
<div
|
||||
title={t('workflow.common.workflowAsTool') || ''}
|
||||
className='grow shrink basis-0 system-sm-medium truncate text-text-tertiary'
|
||||
className='system-sm-medium shrink grow basis-0 truncate text-text-tertiary'
|
||||
>
|
||||
{t('workflow.common.workflowAsTool')}
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
{published && (
|
||||
<div className='px-2.5 py-2 border-t-[0.5px] border-divider-regular'>
|
||||
<div className='border-t-[0.5px] border-divider-regular px-2.5 py-2'>
|
||||
<div className='flex justify-between gap-x-2'>
|
||||
<Button
|
||||
size='small'
|
||||
@@ -232,7 +232,7 @@ const WorkflowToolConfigureButton = ({
|
||||
onClick={() => router.push('/tools?category=workflow')}
|
||||
>
|
||||
{t('workflow.common.manageInTools')}
|
||||
<RiArrowRightUpLine className='ml-1 w-4 h-4' />
|
||||
<RiArrowRightUpLine className='ml-1 h-4 w-4' />
|
||||
</Button>
|
||||
</div>
|
||||
{outdated && <div className='mt-1 text-xs leading-[18px] text-text-warning'>
|
||||
|
||||
@@ -18,21 +18,21 @@ const ConfirmModal = ({ show, onConfirm, onClose }: ConfirmModalProps) => {
|
||||
|
||||
return (
|
||||
<Modal
|
||||
className={cn('p-8 max-w-[600px] w-[600px]')}
|
||||
className={cn('w-[600px] max-w-[600px] p-8')}
|
||||
isShow={show}
|
||||
onClose={() => { }}
|
||||
>
|
||||
<div className='absolute right-4 top-4 p-2 cursor-pointer' onClick={onClose}>
|
||||
<RiCloseLine className='w-4 h-4 text-text-tertiary' />
|
||||
<div className='absolute right-4 top-4 cursor-pointer p-2' onClick={onClose}>
|
||||
<RiCloseLine className='h-4 w-4 text-text-tertiary' />
|
||||
</div>
|
||||
<div className='w-12 h-12 p-3 bg-background-section rounded-xl border-[0.5px] border-divider-regular shadow-xl'>
|
||||
<AlertTriangle className='w-6 h-6 text-[rgb(247,144,9)]' />
|
||||
<div className='h-12 w-12 rounded-xl border-[0.5px] border-divider-regular bg-background-section p-3 shadow-xl'>
|
||||
<AlertTriangle className='h-6 w-6 text-[rgb(247,144,9)]' />
|
||||
</div>
|
||||
<div className='relative mt-3 text-xl font-semibold leading-[30px] text-text-primary'>{t('tools.createTool.confirmTitle')}</div>
|
||||
<div className='my-1 text-text-tertiary text-sm leading-5'>
|
||||
<div className='my-1 text-sm leading-5 text-text-tertiary'>
|
||||
{t('tools.createTool.confirmTip')}
|
||||
</div>
|
||||
<div className='pt-6 flex justify-end items-center'>
|
||||
<div className='flex items-center justify-end pt-6'>
|
||||
<div className='flex items-center'>
|
||||
<Button className='mr-2' onClick={onClose}>{t('common.operation.cancel')}</Button>
|
||||
<Button variant="warning" onClick={onConfirm}>{t('common.operation.confirm')}</Button>
|
||||
|
||||
@@ -126,15 +126,15 @@ const WorkflowToolAsModal: FC<Props> = ({
|
||||
height='calc(100vh - 16px)'
|
||||
headerClassName='!border-b-divider'
|
||||
body={
|
||||
<div className='flex flex-col h-full'>
|
||||
<div className='grow h-0 overflow-y-auto px-6 py-3 space-y-4'>
|
||||
<div className='flex h-full flex-col'>
|
||||
<div className='h-0 grow space-y-4 overflow-y-auto px-6 py-3'>
|
||||
{/* name & icon */}
|
||||
<div>
|
||||
<div className='py-2 system-sm-medium text-text-primary'>{t('tools.createTool.name')} <span className='ml-1 text-red-500'>*</span></div>
|
||||
<div className='system-sm-medium py-2 text-text-primary'>{t('tools.createTool.name')} <span className='ml-1 text-red-500'>*</span></div>
|
||||
<div className='flex items-center justify-between gap-3'>
|
||||
<AppIcon size='large' onClick={() => { setShowEmojiPicker(true) }} className='cursor-pointer' iconType='emoji' icon={emoji.content} background={emoji.background} />
|
||||
<Input
|
||||
className='grow h-10'
|
||||
className='h-10 grow'
|
||||
placeholder={t('tools.createTool.toolNamePlaceHolder')!}
|
||||
value={label}
|
||||
onChange={e => setLabel(e.target.value)}
|
||||
@@ -143,7 +143,7 @@ const WorkflowToolAsModal: FC<Props> = ({
|
||||
</div>
|
||||
{/* name for tool call */}
|
||||
<div>
|
||||
<div className='flex items-center py-2 system-sm-medium text-text-primary'>
|
||||
<div className='system-sm-medium flex items-center py-2 text-text-primary'>
|
||||
{t('tools.createTool.nameForToolCall')} <span className='ml-1 text-red-500'>*</span>
|
||||
<Tooltip
|
||||
popupContent={
|
||||
@@ -165,7 +165,7 @@ const WorkflowToolAsModal: FC<Props> = ({
|
||||
</div>
|
||||
{/* description */}
|
||||
<div>
|
||||
<div className='py-2 system-sm-medium text-text-primary'>{t('tools.createTool.description')}</div>
|
||||
<div className='system-sm-medium py-2 text-text-primary'>{t('tools.createTool.description')}</div>
|
||||
<Textarea
|
||||
placeholder={t('tools.createTool.descriptionPlaceholder') || ''}
|
||||
value={description}
|
||||
@@ -174,24 +174,24 @@ const WorkflowToolAsModal: FC<Props> = ({
|
||||
</div>
|
||||
{/* Tool Input */}
|
||||
<div>
|
||||
<div className='py-2 system-sm-medium text-text-primary'>{t('tools.createTool.toolInput.title')}</div>
|
||||
<div className='rounded-lg border border-divider-regular w-full overflow-x-auto'>
|
||||
<table className='w-full leading-[18px] text-xs text-text-secondary font-normal'>
|
||||
<thead className='text-text-tertiary uppercase'>
|
||||
<div className='system-sm-medium py-2 text-text-primary'>{t('tools.createTool.toolInput.title')}</div>
|
||||
<div className='w-full overflow-x-auto rounded-lg border border-divider-regular'>
|
||||
<table className='w-full text-xs font-normal leading-[18px] text-text-secondary'>
|
||||
<thead className='uppercase text-text-tertiary'>
|
||||
<tr className='border-b border-divider-regular'>
|
||||
<th className="p-2 pl-3 font-medium w-[156px]">{t('tools.createTool.toolInput.name')}</th>
|
||||
<th className="p-2 pl-3 font-medium w-[102px]">{t('tools.createTool.toolInput.method')}</th>
|
||||
<th className="w-[156px] p-2 pl-3 font-medium">{t('tools.createTool.toolInput.name')}</th>
|
||||
<th className="w-[102px] p-2 pl-3 font-medium">{t('tools.createTool.toolInput.method')}</th>
|
||||
<th className="p-2 pl-3 font-medium">{t('tools.createTool.toolInput.description')}</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{parameters.map((item, index) => (
|
||||
<tr key={index} className='border-b last:border-0 border-divider-regular'>
|
||||
<td className="p-2 pl-3 max-w-[156px]">
|
||||
<tr key={index} className='border-b border-divider-regular last:border-0'>
|
||||
<td className="max-w-[156px] p-2 pl-3">
|
||||
<div className='text-[13px] leading-[18px]'>
|
||||
<div title={item.name} className='flex'>
|
||||
<span className='font-medium text-text-primary truncate'>{item.name}</span>
|
||||
<span className='shrink-0 pl-1 text-[#ec4a0a] text-xs leading-[18px]'>{item.required ? t('tools.createTool.toolInput.required') : ''}</span>
|
||||
<span className='truncate font-medium text-text-primary'>{item.name}</span>
|
||||
<span className='shrink-0 pl-1 text-xs leading-[18px] text-[#ec4a0a]'>{item.required ? t('tools.createTool.toolInput.required') : ''}</span>
|
||||
</div>
|
||||
<div className='text-text-tertiary'>{item.type}</div>
|
||||
</div>
|
||||
@@ -199,9 +199,9 @@ const WorkflowToolAsModal: FC<Props> = ({
|
||||
<td>
|
||||
{item.name === '__image' && (
|
||||
<div className={cn(
|
||||
'flex items-center gap-1 min-h-[56px] px-3 py-2 h-9 bg-transparent cursor-default',
|
||||
'flex h-9 min-h-[56px] cursor-default items-center gap-1 bg-transparent px-3 py-2',
|
||||
)}>
|
||||
<div className={cn('grow text-[13px] leading-[18px] text-text-secondary truncate')}>
|
||||
<div className={cn('grow truncate text-[13px] leading-[18px] text-text-secondary')}>
|
||||
{t('tools.createTool.toolInput.methodParameter')}
|
||||
</div>
|
||||
</div>
|
||||
@@ -210,10 +210,10 @@ const WorkflowToolAsModal: FC<Props> = ({
|
||||
<MethodSelector value={item.form} onChange={value => handleParameterChange('form', value, index)} />
|
||||
)}
|
||||
</td>
|
||||
<td className="p-2 pl-3 text-text-tertiary w-[236px]">
|
||||
<td className="w-[236px] p-2 pl-3 text-text-tertiary">
|
||||
<input
|
||||
type='text'
|
||||
className='w-full text-text-secondary text-[13px] leading-[18px] font-normal bg-transparent outline-none appearance-none caret-primary-600 placeholder:text-text-quaternary'
|
||||
className='w-full appearance-none bg-transparent text-[13px] font-normal leading-[18px] text-text-secondary caret-primary-600 outline-none placeholder:text-text-quaternary'
|
||||
placeholder={t('tools.createTool.toolInput.descriptionPlaceholder')!}
|
||||
value={item.description}
|
||||
onChange={e => handleParameterChange('description', e.target.value, index)}
|
||||
@@ -227,12 +227,12 @@ const WorkflowToolAsModal: FC<Props> = ({
|
||||
</div>
|
||||
{/* Tags */}
|
||||
<div>
|
||||
<div className='py-2 system-sm-medium text-text-primary'>{t('tools.createTool.toolInput.label')}</div>
|
||||
<div className='system-sm-medium py-2 text-text-primary'>{t('tools.createTool.toolInput.label')}</div>
|
||||
<LabelSelector value={labels} onChange={handleLabelSelect} />
|
||||
</div>
|
||||
{/* Privacy Policy */}
|
||||
<div>
|
||||
<div className='py-2 system-sm-medium text-text-primary'>{t('tools.createTool.privacyPolicy')}</div>
|
||||
<div className='system-sm-medium py-2 text-text-primary'>{t('tools.createTool.privacyPolicy')}</div>
|
||||
<Input
|
||||
className='h-10'
|
||||
value={privacyPolicy}
|
||||
@@ -240,7 +240,7 @@ const WorkflowToolAsModal: FC<Props> = ({
|
||||
placeholder={t('tools.createTool.privacyPolicyPlaceholder') || ''} />
|
||||
</div>
|
||||
</div>
|
||||
<div className={cn((!isAdd && onRemove) ? 'justify-between' : 'justify-end', 'mt-2 shrink-0 flex py-4 px-6 rounded-b-[10px] bg-background-section-burn border-t border-divider-regular')} >
|
||||
<div className={cn((!isAdd && onRemove) ? 'justify-between' : 'justify-end', 'mt-2 flex shrink-0 rounded-b-[10px] border-t border-divider-regular bg-background-section-burn px-6 py-4')} >
|
||||
{!isAdd && onRemove && (
|
||||
<Button variant='warning' onClick={onRemove}>{t('common.operation.delete')}</Button>
|
||||
)}
|
||||
|
||||
@@ -34,37 +34,37 @@ const MethodSelector: FC<MethodSelectorProps> = ({
|
||||
className='block'
|
||||
>
|
||||
<div className={cn(
|
||||
'flex items-center gap-1 min-h-[56px] px-3 py-2 h-9 bg-transparent cursor-pointer hover:bg-background-section-burn',
|
||||
'flex h-9 min-h-[56px] cursor-pointer items-center gap-1 bg-transparent px-3 py-2 hover:bg-background-section-burn',
|
||||
open && '!bg-background-section-burn hover:bg-background-section-burn',
|
||||
)}>
|
||||
<div className={cn('grow text-[13px] leading-[18px] text-text-secondary truncate')}>
|
||||
<div className={cn('grow truncate text-[13px] leading-[18px] text-text-secondary')}>
|
||||
{value === 'llm' ? t('tools.createTool.toolInput.methodParameter') : t('tools.createTool.toolInput.methodSetting')}
|
||||
</div>
|
||||
<div className='shrink-0 ml-1 text-text-secondary opacity-60'>
|
||||
<div className='ml-1 shrink-0 text-text-secondary opacity-60'>
|
||||
<RiArrowDownSLine className='h-4 w-4' />
|
||||
</div>
|
||||
</div>
|
||||
</PortalToFollowElemTrigger>
|
||||
<PortalToFollowElemContent className='z-[1040]'>
|
||||
<div className='relative w-[320px] bg-components-panel-bg-blur backdrop-blur-sm rounded-lg border-[0.5px] border-components-panel-border shadow-lg'>
|
||||
<div className='relative w-[320px] rounded-lg border-[0.5px] border-components-panel-border bg-components-panel-bg-blur shadow-lg backdrop-blur-sm'>
|
||||
<div className='p-1'>
|
||||
<div className='pl-3 pr-2 py-2.5 rounded-lg hover:bg-components-panel-on-panel-item-bg-hover cursor-pointer' onClick={() => onChange('llm')}>
|
||||
<div className='flex item-center gap-1'>
|
||||
<div className='shrink-0 w-4 h-4'>
|
||||
{value === 'llm' && <Check className='shrink-0 w-4 h-4 text-text-accent' />}
|
||||
<div className='cursor-pointer rounded-lg py-2.5 pl-3 pr-2 hover:bg-components-panel-on-panel-item-bg-hover' onClick={() => onChange('llm')}>
|
||||
<div className='item-center flex gap-1'>
|
||||
<div className='h-4 w-4 shrink-0'>
|
||||
{value === 'llm' && <Check className='h-4 w-4 shrink-0 text-text-accent' />}
|
||||
</div>
|
||||
<div className='text-[13px] text-text-secondary font-medium leading-[18px]'>{t('tools.createTool.toolInput.methodParameter')}</div>
|
||||
<div className='text-[13px] font-medium leading-[18px] text-text-secondary'>{t('tools.createTool.toolInput.methodParameter')}</div>
|
||||
</div>
|
||||
<div className='pl-5 text-text-tertiary text-[13px] leading-[18px]'>{t('tools.createTool.toolInput.methodParameterTip')}</div>
|
||||
<div className='pl-5 text-[13px] leading-[18px] text-text-tertiary'>{t('tools.createTool.toolInput.methodParameterTip')}</div>
|
||||
</div>
|
||||
<div className='pl-3 pr-2 py-2.5 rounded-lg hover:bg-components-panel-on-panel-item-bg-hover cursor-pointer' onClick={() => onChange('form')}>
|
||||
<div className='flex item-center gap-1'>
|
||||
<div className='shrink-0 w-4 h-4'>
|
||||
{value === 'form' && <Check className='shrink-0 w-4 h-4 text-text-accent' />}
|
||||
<div className='cursor-pointer rounded-lg py-2.5 pl-3 pr-2 hover:bg-components-panel-on-panel-item-bg-hover' onClick={() => onChange('form')}>
|
||||
<div className='item-center flex gap-1'>
|
||||
<div className='h-4 w-4 shrink-0'>
|
||||
{value === 'form' && <Check className='h-4 w-4 shrink-0 text-text-accent' />}
|
||||
</div>
|
||||
<div className='text-[13px] text-text-secondary font-medium leading-[18px]'>{t('tools.createTool.toolInput.methodSetting')}</div>
|
||||
<div className='text-[13px] font-medium leading-[18px] text-text-secondary'>{t('tools.createTool.toolInput.methodSetting')}</div>
|
||||
</div>
|
||||
<div className='pl-5 text-text-tertiary text-[13px] leading-[18px]'>{t('tools.createTool.toolInput.methodSettingTip')}</div>
|
||||
<div className='pl-5 text-[13px] leading-[18px] text-text-tertiary'>{t('tools.createTool.toolInput.methodSettingTip')}</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
Reference in New Issue
Block a user