estel/dify
1
0
Fork 0
Code Issues Pull Requests Actions 1 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

12
web/app/components/header/account-setting/api-based-extension-page/empty.tsx
View File

@@ -8,18 +8,18 @@ const Empty = () => {
const { t } = useTranslation()
return (
<div className='mb-2 p-6 rounded-xl bg-background-section'>
<div className='flex items-center justify-center mb-3 w-10 h-10 rounded-[10px] bg-components-card-bg-alt backdrop-blur-sm border-[0.5px] border-components-card-border shadow-lg'>
<RiPuzzle2Line className='w-5 h-5 text-text-accent' />
<div className='mb-2 rounded-xl bg-background-section p-6'>
<div className='mb-3 flex h-10 w-10 items-center justify-center rounded-[10px] border-[0.5px] border-components-card-border bg-components-card-bg-alt shadow-lg backdrop-blur-sm'>
<RiPuzzle2Line className='h-5 w-5 text-text-accent' />
</div>
<div className='mb-1 text-text-secondary system-sm-medium'>{t('common.apiBasedExtension.title')}</div>
<div className='system-sm-medium mb-1 text-text-secondary'>{t('common.apiBasedExtension.title')}</div>
<a
className='flex items-center system-xs-regular text-text-accent'
className='system-xs-regular flex items-center text-text-accent'
href={t('common.apiBasedExtension.linkUrl') || '/'}
target='_blank' rel='noopener noreferrer'
>
{t('common.apiBasedExtension.link')}
<RiExternalLinkLine className='ml-1 w-3 h-3' />
<RiExternalLinkLine className='ml-1 h-3 w-3' />
</a>
</div>
)

2
web/app/components/header/account-setting/api-based-extension-page/index.tsx
View File

@@ -47,7 +47,7 @@ const ApiBasedExtensionPage = () => {
className='w-full'
onClick={handleOpenApiBasedExtensionModal}
>
<RiAddLine className='mr-1 w-4 h-4' />
<RiAddLine className='mr-1 h-4 w-4' />
{t('common.apiBasedExtension.add')}
</Button>
</div>

8
web/app/components/header/account-setting/api-based-extension-page/item.tsx
View File

@@ -37,23 +37,23 @@ const Item: FC<ItemProps> = ({
}
return (
<div className='group flex items-center mb-2 px-4 py-2 border-[0.5px] border-transparent rounded-xl bg-components-input-bg-normal hover:border-components-input-border-active hover:shadow-xs'>
<div className='group mb-2 flex items-center rounded-xl border-[0.5px] border-transparent bg-components-input-bg-normal px-4 py-2 hover:border-components-input-border-active hover:shadow-xs'>
<div className='grow'>
<div className='mb-0.5 text-[13px] font-medium text-text-secondary'>{data.name}</div>
<div className='text-xs text-text-tertiary'>{data.api_endpoint}</div>
</div>
<div className='hidden group-hover:flex items-center'>
<div className='hidden items-center group-hover:flex'>
<Button
className='mr-1'
onClick={handleOpenApiBasedExtensionModal}
>
<RiEditLine className='mr-1 w-4 h-4' />
<RiEditLine className='mr-1 h-4 w-4' />
{t('common.operation.edit')}
</Button>
<Button
onClick={() => setShowDeleteConfirm(true)}
>
<RiDeleteBinLine className='mr-1 w-4 h-4' />
<RiDeleteBinLine className='mr-1 h-4 w-4' />
{t('common.operation.delete')}
</Button>
</div>

20
web/app/components/header/account-setting/api-based-extension-page/modal.tsx
View File

@@ -75,7 +75,7 @@ const ApiBasedExtensionModal: FC<ApiBasedExtensionModalProps> = ({
<Modal
isShow
onClose={() => { }}
className='!p-8 !pb-6 !max-w-none !w-[640px]'
className='!w-[640px] !max-w-none !p-8 !pb-6'
>
<div className='mb-2 text-xl font-semibold text-text-primary'>
{
@@ -85,49 +85,49 @@ const ApiBasedExtensionModal: FC<ApiBasedExtensionModalProps> = ({
}
</div>
<div className='py-2'>
<div className='leading-9 text-sm font-medium text-text-primary'>
<div className='text-sm font-medium leading-9 text-text-primary'>
{t('common.apiBasedExtension.modal.name.title')}
</div>
<input
value={localeData.name || ''}
onChange={e => handleDataChange('name', e.target.value)}
className='block px-3 w-full h-9 bg-components-input-bg-normal rounded-lg text-sm text-text-primary outline-none appearance-none'
className='block h-9 w-full appearance-none rounded-lg bg-components-input-bg-normal px-3 text-sm text-text-primary outline-none'
placeholder={t('common.apiBasedExtension.modal.name.placeholder') || ''}
/>
</div>
<div className='py-2'>
<div className='flex justify-between items-center h-9 text-sm font-medium text-text-primary'>
<div className='flex h-9 items-center justify-between text-sm font-medium text-text-primary'>
{t('common.apiBasedExtension.modal.apiEndpoint.title')}
<a
href={t('common.apiBasedExtension.linkUrl') || '/'}
target='_blank' rel='noopener noreferrer'
className='group flex items-center text-xs text-text-accent font-normal'
className='group flex items-center text-xs font-normal text-text-accent'
>
<BookOpen01 className='mr-1 w-3 h-3' />
<BookOpen01 className='mr-1 h-3 w-3' />
{t('common.apiBasedExtension.link')}
</a>
</div>
<input
value={localeData.api_endpoint || ''}
onChange={e => handleDataChange('api_endpoint', e.target.value)}
className='block px-3 w-full h-9 bg-components-input-bg-normal rounded-lg text-sm text-text-primary outline-none appearance-none'
className='block h-9 w-full appearance-none rounded-lg bg-components-input-bg-normal px-3 text-sm text-text-primary outline-none'
placeholder={t('common.apiBasedExtension.modal.apiEndpoint.placeholder') || ''}
/>
</div>
<div className='py-2'>
<div className='leading-9 text-sm font-medium text-text-primary'>
<div className='text-sm font-medium leading-9 text-text-primary'>
{t('common.apiBasedExtension.modal.apiKey.title')}
</div>
<div className='flex items-center'>
<input
value={localeData.api_key || ''}
onChange={e => handleDataChange('api_key', e.target.value)}
className='block grow mr-2 px-3 h-9 bg-components-input-bg-normal rounded-lg text-sm text-text-primary outline-none appearance-none'
className='mr-2 block h-9 grow appearance-none rounded-lg bg-components-input-bg-normal px-3 text-sm text-text-primary outline-none'
placeholder={t('common.apiBasedExtension.modal.apiKey.placeholder') || ''}
/>
</div>
</div>
<div className='flex items-center justify-end mt-6'>
<div className='mt-6 flex items-center justify-end'>
<Button
onClick={onCancel}
className='mr-2'

26
web/app/components/header/account-setting/api-based-extension-page/selector.tsx
View File

@@ -54,40 +54,40 @@ const ApiBasedExtensionSelector: FC<ApiBasedExtensionSelectorProps> = ({
{
currentItem
? (
<div className='flex items-center justify-between pl-3 pr-2.5 h-9 bg-components-input-bg-normal rounded-lg cursor-pointer'>
<div className='flex h-9 cursor-pointer items-center justify-between rounded-lg bg-components-input-bg-normal pl-3 pr-2.5'>
<div className='text-sm text-text-primary'>{currentItem.name}</div>
<div className='flex items-center'>
<div className='mr-1.5 w-[270px] text-xs text-text-quaternary truncate text-right'>
<div className='mr-1.5 w-[270px] truncate text-right text-xs text-text-quaternary'>
{currentItem.api_endpoint}
</div>
<RiArrowDownSLine className={`w-4 h-4 text-text-secondary ${!open && 'opacity-60'}`} />
<RiArrowDownSLine className={`h-4 w-4 text-text-secondary ${!open && 'opacity-60'}`} />
</div>
</div>
)
: (
<div className='flex items-center justify-between pl-3 pr-2.5 h-9 bg-components-input-bg-normal rounded-lg text-sm text-text-quaternary cursor-pointer'>
<div className='flex h-9 cursor-pointer items-center justify-between rounded-lg bg-components-input-bg-normal pl-3 pr-2.5 text-sm text-text-quaternary'>
{t('common.apiBasedExtension.selector.placeholder')}
<RiArrowDownSLine className={`w-4 h-4 text-text-secondary ${!open && 'opacity-60'}`} />
<RiArrowDownSLine className={`h-4 w-4 text-text-secondary ${!open && 'opacity-60'}`} />
</div>
)
}
</PortalToFollowElemTrigger>
<PortalToFollowElemContent className='w-[calc(100%-32px)] max-w-[576px] z-[102]'>
<div className='w-full rounded-lg border-[0.5px] border-components-panel-border bg-components-panel-bg shadow-lg z-10'>
<PortalToFollowElemContent className='z-[102] w-[calc(100%-32px)] max-w-[576px]'>
<div className='z-10 w-full rounded-lg border-[0.5px] border-components-panel-border bg-components-panel-bg shadow-lg'>
<div className='p-1'>
<div className='flex items-center justify-between px-3 pt-2 pb-1'>
<div className='flex items-center justify-between px-3 pb-1 pt-2'>
<div className='text-xs font-medium text-text-tertiary'>
{t('common.apiBasedExtension.selector.title')}
</div>
<div
className='flex items-center text-xs text-text-accent cursor-pointer'
className='flex cursor-pointer items-center text-xs text-text-accent'
onClick={() => {
setOpen(false)
setShowAccountSettingModal({ payload: 'api-based-extension' })
}}
>
{t('common.apiBasedExtension.selector.manage')}
<ArrowUpRight className='ml-0.5 w-3 h-3' />
<ArrowUpRight className='ml-0.5 h-3 w-3' />
</div>
</div>
<div className='max-h-[250px] overflow-y-auto'>
@@ -95,7 +95,7 @@ const ApiBasedExtensionSelector: FC<ApiBasedExtensionSelectorProps> = ({
data?.map(item => (
<div
key={item.id}
className='px-3 py-1.5 w-full cursor-pointer hover:stroke-state-base-hover rounded-md text-left'
className='w-full cursor-pointer rounded-md px-3 py-1.5 text-left hover:stroke-state-base-hover'
onClick={() => handleSelect(item.id!)}
>
<div className='text-sm text-text-primary'>{item.name}</div>
@@ -108,13 +108,13 @@ const ApiBasedExtensionSelector: FC<ApiBasedExtensionSelectorProps> = ({
<div className='h-[1px] bg-divider-regular' />
<div className='p-1'>
<div
className='flex items-center px-3 h-8 text-sm text-text-accent cursor-pointer'
className='flex h-8 cursor-pointer items-center px-3 text-sm text-text-accent'
onClick={() => {
setOpen(false)
setShowApiBasedExtensionModal({ payload: {}, onSaveCallback: () => mutate() })
}}
>
<RiAddLine className='mr-2 w-4 h-4' />
<RiAddLine className='mr-2 h-4 w-4' />
{t('common.operation.add')}
</div>
</div>