hz/ebiz-dify-ai
1
0
Fork 0
mirror of http://112.124.100.131/huang.ze/ebiz-dify-ai.git synced 2025-12-12 04:16:54 +08:00
Code Issues Packages Projects Releases Wiki Activity

Chore: frontend infrastructure upgrade (#16420)

Browse Source 
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
2025-03-21 17:41:03 +08:00
committed by GitHub
parent e61415223b
commit 7709d9df20
1435 changed files with 13372 additions and 11612 deletions
Download Patch File Download Diff File Expand all files Collapse all files

10
web/app/components/datasets/external-api/external-api-modal/Form.tsx
View File

@@ -50,8 +50,8 @@ const Form: FC<FormProps> = React.memo(({
return (
<div key={variable} className={cn(itemClassName, 'flex flex-col items-start gap-1 self-stretch')}>
<div className="flex justify-between items-center w-full">
<label className={cn(fieldLabelClassName, 'text-text-secondary system-sm-semibold')} htmlFor={variable}>
<div className="flex w-full items-center justify-between">
<label className={cn(fieldLabelClassName, 'system-sm-semibold text-text-secondary')} htmlFor={variable}>
{label[i18n.language] || label.en_US}
{required && <span className='ml-1 text-red-500'>*</span>}
</label>
@@ -60,9 +60,9 @@ const Form: FC<FormProps> = React.memo(({
href={'https://docs.dify.ai/guides/knowledge-base/external-knowledge-api-documentation' || '/'}
target='_blank'
rel='noopener noreferrer'
className='text-text-accent body-xs-regular flex items-center'
className='body-xs-regular flex items-center text-text-accent'
>
<RiBookOpenLine className='w-3 h-3 text-text-accent mr-1' />
<RiBookOpenLine className='mr-1 h-3 w-3 text-text-accent' />
{t('dataset.externalAPIPanelDocumentation')}
</a>
)}
@@ -81,7 +81,7 @@ const Form: FC<FormProps> = React.memo(({
}
return (
<form className={cn('flex flex-col justify-center items-start gap-4 self-stretch', className)}>
<form className={cn('flex flex-col items-start justify-center gap-4 self-stretch', className)}>
{formSchemas.map(formSchema => renderField(formSchema))}
</form>
)

38
web/app/components/datasets/external-api/external-api-modal/index.tsx
View File

@@ -116,31 +116,31 @@ const AddExternalAPIModal: FC<AddExternalAPIModalProps> = ({ data, onSave, onCan
return (
<PortalToFollowElem open>
<PortalToFollowElemContent className='w-full h-full z-[60]'>
<PortalToFollowElemContent className='z-[60] h-full w-full'>
<div className='fixed inset-0 flex items-center justify-center bg-black/[.25]'>
<div className='flex relative w-[480px] flex-col items-start bg-components-panel-bg rounded-2xl border-[0.5px] border-components-panel-border shadows-shadow-xl'>
<div className='flex flex-col pt-6 pl-6 pb-3 pr-14 items-start gap-2 self-stretch'>
<div className='self-stretch text-text-primary title-2xl-semi-bold flex-grow'>
<div className='shadows-shadow-xl relative flex w-[480px] flex-col items-start rounded-2xl border-[0.5px] border-components-panel-border bg-components-panel-bg'>
<div className='flex flex-col items-start gap-2 self-stretch pb-3 pl-6 pr-14 pt-6'>
<div className='title-2xl-semi-bold grow self-stretch text-text-primary'>
{
isEditMode ? t('dataset.editExternalAPIFormTitle') : t('dataset.createExternalAPI')
}
</div>
{isEditMode && (datasetBindings?.length ?? 0) > 0 && (
<div className='text-text-tertiary system-xs-regular flex items-center'>
<div className='system-xs-regular flex items-center text-text-tertiary'>
{t('dataset.editExternalAPIFormWarning.front')}
<span className='text-text-accent cursor-pointer flex items-center'>
<span className='flex cursor-pointer items-center text-text-accent'>
&nbsp;{datasetBindings?.length} {t('dataset.editExternalAPIFormWarning.end')}&nbsp;
<Tooltip
popupClassName='flex items-center self-stretch w-[320px]'
popupContent={
<div className='p-1'>
<div className='flex pt-1 pb-0.5 pl-2 pr-3 items-start self-stretch'>
<div className='text-text-tertiary system-xs-medium-uppercase'>{`${datasetBindings?.length} ${t('dataset.editExternalAPITooltipTitle')}`}</div>
<div className='flex items-start self-stretch pb-0.5 pl-2 pr-3 pt-1'>
<div className='system-xs-medium-uppercase text-text-tertiary'>{`${datasetBindings?.length} ${t('dataset.editExternalAPITooltipTitle')}`}</div>
</div>
{datasetBindings?.map(binding => (
<div key={binding.id} className='flex px-2 py-1 items-center gap-1 self-stretch'>
<RiBook2Line className='w-4 h-4 text-text-secondary' />
<div className='text-text-secondary system-sm-medium'>{binding.name}</div>
<div key={binding.id} className='flex items-center gap-1 self-stretch px-2 py-1'>
<RiBook2Line className='h-4 w-4 text-text-secondary' />
<div className='system-sm-medium text-text-secondary'>{binding.name}</div>
</div>
))}
</div>
@@ -148,22 +148,22 @@ const AddExternalAPIModal: FC<AddExternalAPIModalProps> = ({ data, onSave, onCan
asChild={false}
position='bottom'
>
<RiInformation2Line className='w-3.5 h-3.5' />
<RiInformation2Line className='h-3.5 w-3.5' />
</Tooltip>
</span>
</div>
)}
</div>
<ActionButton className='absolute top-5 right-5' onClick={onCancel}>
<RiCloseLine className='w-[18px] h-[18px] text-text-tertiary flex-shrink-0' />
<ActionButton className='absolute right-5 top-5' onClick={onCancel}>
<RiCloseLine className='h-[18px] w-[18px] shrink-0 text-text-tertiary' />
</ActionButton>
<Form
value={formData}
onChange={handleDataChange}
formSchemas={formSchemas}
className='flex px-6 py-3 flex-col justify-center items-start gap-4 self-stretch'
className='flex flex-col items-start justify-center gap-4 self-stretch px-6 py-3'
/>
<div className='flex p-6 pt-5 justify-end items-center gap-2 self-stretch'>
<div className='flex items-center justify-end gap-2 self-stretch p-6 pt-5'>
<Button type='button' variant='secondary' onClick={onCancel}>
{t('dataset.externalAPIForm.cancel')}
</Button>
@@ -184,10 +184,10 @@ const AddExternalAPIModal: FC<AddExternalAPIModalProps> = ({ data, onSave, onCan
{t('dataset.externalAPIForm.save')}
</Button>
</div>
<div className='flex px-2 py-3 justify-center items-center gap-1 self-stretch rounded-b-2xl
border-t-[0.5px] border-divider-subtle bg-background-soft text-text-tertiary system-xs-regular'
<div className='system-xs-regular flex items-center justify-center gap-1 self-stretch rounded-b-2xl border-t-[0.5px]
border-divider-subtle bg-background-soft px-2 py-3 text-text-tertiary'
>
<RiLock2Fill className='w-3 h-3 text-text-quaternary' />
<RiLock2Fill className='h-3 w-3 text-text-quaternary' />
{t('dataset.externalAPIForm.encrypted.front')}
<a
className='text-text-accent'

28
web/app/components/datasets/external-api/external-api-panel/index.tsx
View File

@@ -39,39 +39,39 @@ const ExternalAPIPanel: React.FC<ExternalAPIPanelProps> = ({ onClose }) => {
return (
<div
tabIndex={-1}
className={cn('absolute top-14 right-0 bottom-2 flex z-10 outline-none')}
className={cn('absolute bottom-2 right-0 top-14 z-10 flex outline-none')}
>
<div
className={cn(
'relative flex flex-col w-[420px] bg-components-panel-bg-alt rounded-l-2xl h-full border border-components-panel-border',
'relative flex h-full w-[420px] flex-col rounded-l-2xl border border-components-panel-border bg-components-panel-bg-alt',
)}
>
<div className='flex items-start self-stretch p-4 pb-0'>
<div className='flex flex-col items-start gap-1 flex-grow'>
<div className='self-stretch text-text-primary system-xl-semibold'>{t('dataset.externalAPIPanelTitle')}</div>
<div className='self-stretch text-text-tertiary body-xs-regular'>{t('dataset.externalAPIPanelDescription')}</div>
<a className='flex justify-center items-center gap-1 self-stretch cursor-pointer' href='https://docs.dify.ai/guides/knowledge-base/external-knowledge-api-documentation' target='_blank'>
<RiBookOpenLine className='w-3 h-3 text-text-accent' />
<div className='flex-grow text-text-accent body-xs-regular'>{t('dataset.externalAPIPanelDocumentation')}</div>
<div className='flex grow flex-col items-start gap-1'>
<div className='system-xl-semibold self-stretch text-text-primary'>{t('dataset.externalAPIPanelTitle')}</div>
<div className='body-xs-regular self-stretch text-text-tertiary'>{t('dataset.externalAPIPanelDescription')}</div>
<a className='flex cursor-pointer items-center justify-center gap-1 self-stretch' href='https://docs.dify.ai/guides/knowledge-base/external-knowledge-api-documentation' target='_blank'>
<RiBookOpenLine className='h-3 w-3 text-text-accent' />
<div className='body-xs-regular grow text-text-accent'>{t('dataset.externalAPIPanelDocumentation')}</div>
</a>
</div>
<div className='flex items-center'>
<ActionButton onClick={() => onClose()}>
<RiCloseLine className='w-4 h-4 text-text-tertiary' />
<RiCloseLine className='h-4 w-4 text-text-tertiary' />
</ActionButton>
</div>
</div>
<div className='flex px-4 py-3 flex-col justify-center items-start gap-2 self-stretch'>
<div className='flex flex-col items-start justify-center gap-2 self-stretch px-4 py-3'>
<Button
variant={'primary'}
className='flex justify-center items-center px-3 py-2 gap-0.5'
className='flex items-center justify-center gap-0.5 px-3 py-2'
onClick={handleOpenExternalAPIModal}
>
<RiAddLine className='w-4 h-4 text-components-button-primary-text' />
<div className='text-components-button-primary-text system-sm-medium'>{t('dataset.createExternalAPI')}</div>
<RiAddLine className='h-4 w-4 text-components-button-primary-text' />
<div className='system-sm-medium text-components-button-primary-text'>{t('dataset.createExternalAPI')}</div>
</Button>
</div>
<div className='flex py-0 px-4 flex-col items-start gap-1 flex-grow self-stretch'>
<div className='flex grow flex-col items-start gap-1 self-stretch px-4 py-0'>
{isLoading
? (
<Loading />

16
web/app/components/datasets/external-api/external-knowledge-api-card/index.tsx
View File

@@ -105,20 +105,20 @@ const ExternalKnowledgeAPICard: React.FC<ExternalKnowledgeAPICardProps> = ({ api
return (
<>
<div className={`flex p-2 pl-3 items-start self-stretch rounded-lg border-[0.5px]
border-components-panel-border-subtle bg-components-panel-on-panel-item-bg
shadows-shadow-xs ${isHovered ? 'bg-state-destructive-hover border-state-destructive-border' : ''}`}
<div className={`shadows-shadow-xs flex items-start self-stretch rounded-lg border-[0.5px] border-components-panel-border-subtle
bg-components-panel-on-panel-item-bg p-2
pl-3 ${isHovered ? 'border-state-destructive-border bg-state-destructive-hover' : ''}`}
>
<div className='flex py-1 flex-col justify-center items-start gap-1.5 flex-grow'>
<div className='flex grow flex-col items-start justify-center gap-1.5 py-1'>
<div className='flex items-center gap-1 self-stretch text-text-secondary'>
<ApiConnectionMod className='w-4 h-4' />
<ApiConnectionMod className='h-4 w-4' />
<div className='system-sm-medium'>{api.name}</div>
</div>
<div className='self-stretch text-text-tertiary system-xs-regular'>{api.settings.endpoint}</div>
<div className='system-xs-regular self-stretch text-text-tertiary'>{api.settings.endpoint}</div>
</div>
<div className='flex items-start gap-1'>
<ActionButton onClick={handleEditClick}>
<RiEditLine className='w-4 h-4 text-text-tertiary hover:text-text-secondary' />
<RiEditLine className='h-4 w-4 text-text-tertiary hover:text-text-secondary' />
</ActionButton>
<ActionButton
className='hover:bg-state-destructive-hover'
@@ -126,7 +126,7 @@ const ExternalKnowledgeAPICard: React.FC<ExternalKnowledgeAPICardProps> = ({ api
onMouseEnter={() => setIsHovered(true)}
onMouseLeave={() => setIsHovered(false)}
>
<RiDeleteBinLine className='w-4 h-4 text-text-tertiary hover:text-text-destructive' />
<RiDeleteBinLine className='h-4 w-4 text-text-tertiary hover:text-text-destructive' />
</ActionButton>
</div>
</div>