admin/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

8
web/app/components/plugins/install-plugin/base/installed.tsx
View File

@@ -30,10 +30,10 @@ const Installed: FC<Props> = ({
}
return (
<>
<div className='flex flex-col px-6 py-3 justify-center items-start gap-4 self-stretch'>
<p className='text-text-secondary system-md-regular'>{(isFailed && errMsg) ? errMsg : t(`plugin.installModal.${isFailed ? 'installFailedDesc' : 'installedSuccessfullyDesc'}`)}</p>
<div className='flex flex-col items-start justify-center gap-4 self-stretch px-6 py-3'>
<p className='system-md-regular text-text-secondary'>{(isFailed && errMsg) ? errMsg : t(`plugin.installModal.${isFailed ? 'installFailedDesc' : 'installedSuccessfullyDesc'}`)}</p>
{payload && (
<div className='flex p-2 items-start content-start gap-1 self-stretch flex-wrap rounded-2xl bg-background-section-burn'>
<div className='flex flex-wrap content-start items-start gap-1 self-stretch rounded-2xl bg-background-section-burn p-2'>
<Card
className='w-full'
payload={isMarketPayload ? pluginManifestInMarketToPluginProps(payload as PluginManifestInMarket) : pluginManifestToCardPluginProps(payload as PluginDeclaration)}
@@ -45,7 +45,7 @@ const Installed: FC<Props> = ({
)}
</div>
{/* Action Buttons */}
<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
variant='primary'
className='min-w-[72px]'

14
web/app/components/plugins/install-plugin/base/loading-error.tsx
View File

@@ -16,23 +16,23 @@ const LoadingError: FC = () => {
checked={false}
disabled
/>
<div className='grow relative p-4 pb-3 border-[0.5px] border-components-panel-border bg-components-panel-on-panel-item-bg hover-bg-components-panel-on-panel-item-bg rounded-xl shadow-xs'>
<div className='hover-bg-components-panel-on-panel-item-bg relative grow rounded-xl border-[0.5px] border-components-panel-border bg-components-panel-on-panel-item-bg p-4 pb-3 shadow-xs'>
<div className="flex">
<div
className='relative flex w-10 h-10 p-1 justify-center items-center gap-2 rounded-[10px]
border-[0.5px] border-state-destructive-border bg-state-destructive-hover backdrop-blur-sm'>
<div className='flex w-5 h-5 justify-center items-center'>
className='relative flex h-10 w-10 items-center justify-center gap-2 rounded-[10px] border-[0.5px]
border-state-destructive-border bg-state-destructive-hover p-1 backdrop-blur-sm'>
<div className='flex h-5 w-5 items-center justify-center'>
<Group className='text-text-quaternary' />
</div>
<div className='absolute bottom-[-4px] right-[-4px] rounded-full border-[2px] border-components-panel-bg bg-state-destructive-solid'>
<RiCloseLine className='w-3 h-3 text-text-primary-on-surface' />
<RiCloseLine className='h-3 w-3 text-text-primary-on-surface' />
</div>
</div>
<div className="ml-3 grow">
<div className="flex items-center h-5 system-md-semibold text-text-destructive">
<div className="system-md-semibold flex h-5 items-center text-text-destructive">
{t('plugin.installModal.pluginLoadError')}
</div>
<div className='mt-0.5 system-xs-regular text-text-tertiary'>
<div className='system-xs-regular mt-0.5 text-text-tertiary'>
{t('plugin.installModal.pluginLoadErrorDesc')}
</div>
</div>

2
web/app/components/plugins/install-plugin/base/loading.tsx
View File

@@ -11,7 +11,7 @@ const Loading = () => {
checked={false}
disabled
/>
<div className='grow relative p-4 pb-3 border-[0.5px] border-components-panel-border bg-components-panel-on-panel-item-bg hover-bg-components-panel-on-panel-item-bg rounded-xl shadow-xs'>
<div className='hover-bg-components-panel-on-panel-item-bg relative grow rounded-xl border-[0.5px] border-components-panel-border bg-components-panel-on-panel-item-bg p-4 pb-3 shadow-xs'>
<Placeholder
wrapClassName='w-full'
/>

6
web/app/components/plugins/install-plugin/install-bundle/index.tsx
View File

@@ -52,11 +52,11 @@ const InstallBundle: FC<Props> = ({
<Modal
isShow={true}
onClose={foldAnimInto}
className={cn(modalClassName, 'flex min-w-[560px] p-0 flex-col items-start rounded-2xl border-[0.5px] border-components-panel-border bg-components-panel-bg shadows-shadow-xl')}
className={cn(modalClassName, 'shadows-shadow-xl flex min-w-[560px] flex-col items-start rounded-2xl border-[0.5px] border-components-panel-border bg-components-panel-bg p-0')}
closable
>
<div className='flex 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'>
<div className='flex items-start gap-2 self-stretch pb-3 pl-6 pr-14 pt-6'>
<div className='title-2xl-semi-bold self-stretch text-text-primary'>
{getTitle()}
</div>
</div>

12
web/app/components/plugins/install-plugin/install-bundle/steps/install.tsx
View File

@@ -76,11 +76,11 @@ const Install: FC<Props> = ({
}
return (
<>
<div className='flex flex-col px-6 py-3 justify-center items-start gap-4 self-stretch'>
<div className='text-text-secondary system-md-regular'>
<div className='flex flex-col items-start justify-center gap-4 self-stretch px-6 py-3'>
<div className='system-md-regular text-text-secondary'>
<p>{t(`${i18nPrefix}.${selectedPluginsNum > 1 ? 'readyToInstallPackages' : 'readyToInstallPackage'}`, { num: selectedPluginsNum })}</p>
</div>
<div className='w-full p-2 rounded-2xl bg-background-section-burn space-y-1'>
<div className='w-full space-y-1 rounded-2xl bg-background-section-burn p-2'>
<InstallMulti
allPlugins={allPlugins}
selectedPlugins={selectedPlugins}
@@ -92,7 +92,7 @@ const Install: FC<Props> = ({
</div>
{/* Action Buttons */}
{!isHideButton && (
<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'>
{!canInstall && (
<Button variant='secondary' className='min-w-[72px]' onClick={onCancel}>
{t('common.operation.cancel')}
@@ -100,11 +100,11 @@ const Install: FC<Props> = ({
)}
<Button
variant='primary'
className='min-w-[72px] flex space-x-0.5'
className='flex min-w-[72px] space-x-0.5'
disabled={!canInstall || isInstalling || selectedPlugins.length === 0}
onClick={handleInstall}
>
{isInstalling && <RiLoader2Line className='w-4 h-4 animate-spin-slow' />}
{isInstalling && <RiLoader2Line className='h-4 w-4 animate-spin-slow' />}
<span>{t(`${i18nPrefix}.${isInstalling ? 'installing' : 'install'}`)}</span>
</Button>
</div>

6
web/app/components/plugins/install-plugin/install-bundle/steps/installed.tsx
View File

@@ -26,9 +26,9 @@ const Installed: FC<Props> = ({
const { getIconUrl } = useGetIcon()
return (
<>
<div className='flex flex-col px-6 py-3 justify-center items-start gap-4 self-stretch'>
<div className='flex flex-col items-start justify-center gap-4 self-stretch px-6 py-3'>
{/* <p className='text-text-secondary system-md-regular'>{(isFailed && errMsg) ? errMsg : t(`plugin.installModal.${isFailed ? 'installFailedDesc' : 'installedSuccessfullyDesc'}`)}</p> */}
<div className='flex p-2 items-start content-start gap-1 self-stretch flex-wrap rounded-2xl bg-background-section-burn space-y-1'>
<div className='flex flex-wrap content-start items-start gap-1 space-y-1 self-stretch rounded-2xl bg-background-section-burn p-2'>
{list.map((plugin, index) => {
return (
<Card
@@ -48,7 +48,7 @@ const Installed: FC<Props> = ({
</div>
{/* Action Buttons */}
{!isHideButton && (
<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
variant='primary'
className='min-w-[72px]'

14
web/app/components/plugins/install-plugin/install-from-github/index.tsx
View File

@@ -168,16 +168,16 @@ const InstallFromGitHub: React.FC<InstallFromGitHubProps> = ({ updatePayload, on
<Modal
isShow={true}
onClose={foldAnimInto}
className={cn(modalClassName, `flex min-w-[560px] p-0 flex-col items-start rounded-2xl border-[0.5px]
border-components-panel-border bg-components-panel-bg shadows-shadow-xl`)}
className={cn(modalClassName, `shadows-shadow-xl flex min-w-[560px] flex-col items-start rounded-2xl border-[0.5px]
border-components-panel-border bg-components-panel-bg p-0`)}
closable
>
<div className='flex pt-6 pl-6 pb-3 pr-14 items-start gap-2 self-stretch'>
<div className='flex flex-col items-start gap-1 grow'>
<div className='self-stretch text-text-primary title-2xl-semi-bold'>
<div className='flex items-start gap-2 self-stretch pb-3 pl-6 pr-14 pt-6'>
<div className='flex grow flex-col items-start gap-1'>
<div className='title-2xl-semi-bold self-stretch text-text-primary'>
{getTitle()}
</div>
<div className='self-stretch text-text-tertiary system-xs-regular'>
<div className='system-xs-regular self-stretch text-text-tertiary'>
{!([InstallStepFromGitHub.uploadFailed, InstallStepFromGitHub.installed, InstallStepFromGitHub.installFailed].includes(state.step)) && t('plugin.installFromGitHub.installNote')}
</div>
</div>
@@ -189,7 +189,7 @@ const InstallFromGitHub: React.FC<InstallFromGitHubProps> = ({ updatePayload, on
errMsg={errorMsg}
onCancel={onClose}
/>
: <div className={`flex px-6 py-3 flex-col justify-center items-start self-stretch ${state.step === InstallStepFromGitHub.installed ? 'gap-2' : 'gap-4'}`}>
: <div className={`flex flex-col items-start justify-center self-stretch px-6 py-3 ${state.step === InstallStepFromGitHub.installed ? 'gap-2' : 'gap-4'}`}>
{state.step === InstallStepFromGitHub.setUrl && (
<SetURL
repoUrl={state.repoUrl}

10
web/app/components/plugins/install-plugin/install-from-github/steps/loaded.tsx
View File

@@ -143,10 +143,10 @@ const Loaded: React.FC<LoadedProps> = ({
return (
<>
<div className='text-text-secondary system-md-regular'>
<div className='system-md-regular text-text-secondary'>
<p>{t(`${i18nPrefix}.readyToInstall`)}</p>
</div>
<div className='flex p-2 items-start content-start gap-1 self-stretch flex-wrap rounded-2xl bg-background-section-burn'>
<div className='flex flex-wrap content-start items-start gap-1 self-stretch rounded-2xl bg-background-section-burn p-2'>
<Card
className='w-full'
payload={pluginManifestToCardPluginProps(payload as PluginDeclaration)}
@@ -157,7 +157,7 @@ const Loaded: React.FC<LoadedProps> = ({
/>}
/>
</div>
<div className='flex justify-end items-center gap-2 self-stretch mt-4'>
<div className='mt-4 flex items-center justify-end gap-2 self-stretch'>
{!isInstalling && (
<Button variant='secondary' className='min-w-[72px]' onClick={onBack}>
{t('plugin.installModal.back')}
@@ -165,11 +165,11 @@ const Loaded: React.FC<LoadedProps> = ({
)}
<Button
variant='primary'
className='min-w-[72px] flex space-x-0.5'
className='flex min-w-[72px] space-x-0.5'
onClick={handleInstall}
disabled={isInstalling || isLoading}
>
{isInstalling && <RiLoader2Line className='w-4 h-4 animate-spin-slow' />}
{isInstalling && <RiLoader2Line className='h-4 w-4 animate-spin-slow' />}
<span>{t(`${i18nPrefix}.${isInstalling ? 'installing' : 'install'}`)}</span>
</Button>
</div>

6
web/app/components/plugins/install-plugin/install-from-github/steps/selectPackage.tsx
View File

@@ -72,7 +72,7 @@ const SelectPackage: React.FC<SelectPackageProps> = ({
<>
<label
htmlFor='version'
className='flex flex-col justify-center items-start self-stretch text-text-secondary'
className='flex flex-col items-start justify-center self-stretch text-text-secondary'
>
<span className='system-sm-semibold'>{t(`${i18nPrefix}.selectVersion`)}</span>
</label>
@@ -86,7 +86,7 @@ const SelectPackage: React.FC<SelectPackageProps> = ({
/>
<label
htmlFor='package'
className='flex flex-col justify-center items-start self-stretch text-text-secondary'
className='flex flex-col items-start justify-center self-stretch text-text-secondary'
>
<span className='system-sm-semibold'>{t(`${i18nPrefix}.selectPackage`)}</span>
</label>
@@ -98,7 +98,7 @@ const SelectPackage: React.FC<SelectPackageProps> = ({
placeholder={t(`${i18nPrefix}.selectPackagePlaceholder`) || ''}
popupClassName='w-[512px] z-[1001]'
/>
<div className='flex justify-end items-center gap-2 self-stretch mt-4'>
<div className='mt-4 flex items-center justify-end gap-2 self-stretch'>
{!isEdit
&& <Button
variant='secondary'

10
web/app/components/plugins/install-plugin/install-from-github/steps/setURL.tsx
View File

@@ -17,7 +17,7 @@ const SetURL: React.FC<SetURLProps> = ({ repoUrl, onChange, onNext, onCancel })
<>
<label
htmlFor='repoUrl'
className='flex flex-col justify-center items-start self-stretch text-text-secondary'
className='flex flex-col items-start justify-center self-stretch text-text-secondary'
>
<span className='system-sm-semibold'>{t('plugin.installFromGitHub.gitHubRepo')}</span>
</label>
@@ -27,12 +27,12 @@ const SetURL: React.FC<SetURLProps> = ({ repoUrl, onChange, onNext, onCancel })
name='repoUrl'
value={repoUrl}
onChange={e => onChange(e.target.value)}
className='flex items-center self-stretch rounded-lg border border-components-input-border-active
bg-components-input-bg-active shadows-shadow-xs p-2 gap-[2px] flex-grow overflow-hidden
text-components-input-text-filled text-ellipsis system-sm-regular'
className='shadows-shadow-xs system-sm-regular flex grow items-center gap-[2px]
self-stretch overflow-hidden text-ellipsis rounded-lg border border-components-input-border-active
bg-components-input-bg-active p-2 text-components-input-text-filled'
placeholder='Please enter GitHub repo URL'
/>
<div className='flex justify-end items-center gap-2 self-stretch mt-4'>
<div className='mt-4 flex items-center justify-end gap-2 self-stretch'>
<Button
variant='secondary'
className='min-w-[72px]'

6
web/app/components/plugins/install-plugin/install-from-local-package/index.tsx
View File

@@ -86,11 +86,11 @@ const InstallFromLocalPackage: React.FC<InstallFromLocalPackageProps> = ({
<Modal
isShow={true}
onClose={foldAnimInto}
className={cn(modalClassName, 'flex min-w-[560px] p-0 flex-col items-start rounded-2xl border-[0.5px] border-components-panel-border bg-components-panel-bg shadows-shadow-xl')}
className={cn(modalClassName, 'shadows-shadow-xl flex min-w-[560px] flex-col items-start rounded-2xl border-[0.5px] border-components-panel-border bg-components-panel-bg p-0')}
closable
>
<div className='flex 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'>
<div className='flex items-start gap-2 self-stretch pb-3 pl-6 pr-14 pt-6'>
<div className='title-2xl-semi-bold self-stretch text-text-primary'>
{getTitle()}
</div>
</div>

12
web/app/components/plugins/install-plugin/install-from-local-package/steps/install.tsx
View File

@@ -105,8 +105,8 @@ const Installed: FC<Props> = ({
return (
<>
<div className='flex flex-col px-6 py-3 justify-center items-start gap-4 self-stretch'>
<div className='text-text-secondary system-md-regular'>
<div className='flex flex-col items-start justify-center gap-4 self-stretch px-6 py-3'>
<div className='system-md-regular text-text-secondary'>
<p>{t(`${i18nPrefix}.readyToInstall`)}</p>
<p>
<Trans
@@ -115,7 +115,7 @@ const Installed: FC<Props> = ({
/>
</p>
</div>
<div className='flex p-2 items-start content-start gap-1 self-stretch flex-wrap rounded-2xl bg-background-section-burn'>
<div className='flex flex-wrap content-start items-start gap-1 self-stretch rounded-2xl bg-background-section-burn p-2'>
<Card
className='w-full'
payload={pluginManifestToCardPluginProps(payload)}
@@ -128,7 +128,7 @@ const Installed: FC<Props> = ({
</div>
</div>
{/* Action Buttons */}
<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'>
{!isInstalling && (
<Button variant='secondary' className='min-w-[72px]' onClick={handleCancel}>
{t('common.operation.cancel')}
@@ -136,11 +136,11 @@ const Installed: FC<Props> = ({
)}
<Button
variant='primary'
className='min-w-[72px] flex space-x-0.5'
className='flex min-w-[72px] space-x-0.5'
disabled={isInstalling || isLoading}
onClick={handleInstall}
>
{isInstalling && <RiLoader2Line className='w-4 h-4 animate-spin-slow' />}
{isInstalling && <RiLoader2Line className='h-4 w-4 animate-spin-slow' />}
<span>{t(`${i18nPrefix}.${isInstalling ? 'installing' : 'install'}`)}</span>
</Button>
</div>

10
web/app/components/plugins/install-plugin/install-from-local-package/steps/uploading.tsx
View File

@@ -59,16 +59,16 @@ const Uploading: FC<Props> = ({
}, [])
return (
<>
<div className='flex flex-col px-6 py-3 justify-center items-start gap-4 self-stretch'>
<div className='flex flex-col items-start justify-center gap-4 self-stretch px-6 py-3'>
<div className='flex items-center gap-1 self-stretch'>
<RiLoader2Line className='text-text-accent w-4 h-4 animate-spin-slow' />
<div className='text-text-secondary system-md-regular'>
<RiLoader2Line className='h-4 w-4 animate-spin-slow text-text-accent' />
<div className='system-md-regular text-text-secondary'>
{t(`${i18nPrefix}.uploadingPackage`, {
packageName: fileName,
})}
</div>
</div>
<div className='flex p-2 items-start content-start gap-1 self-stretch flex-wrap rounded-2xl bg-background-section-burn'>
<div className='flex flex-wrap content-start items-start gap-1 self-stretch rounded-2xl bg-background-section-burn p-2'>
<Card
className='w-full'
payload={{ name: fileName } as any}
@@ -80,7 +80,7 @@ const Uploading: FC<Props> = ({
</div>
{/* Action Buttons */}
<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 variant='secondary' className='min-w-[72px]' onClick={onCancel}>
{t('common.operation.cancel')}
</Button>

6
web/app/components/plugins/install-plugin/install-from-marketplace/index.tsx
View File

@@ -73,11 +73,11 @@ const InstallFromMarketplace: React.FC<InstallFromMarketplaceProps> = ({
isShow={true}
onClose={foldAnimInto}
wrapperClassName='z-[9999]'
className={cn(modalClassName, 'flex min-w-[560px] p-0 flex-col items-start rounded-2xl border-[0.5px] border-components-panel-border bg-components-panel-bg shadows-shadow-xl')}
className={cn(modalClassName, 'shadows-shadow-xl flex min-w-[560px] flex-col items-start rounded-2xl border-[0.5px] border-components-panel-border bg-components-panel-bg p-0')}
closable
>
<div className='flex 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'>
<div className='flex items-start gap-2 self-stretch pb-3 pl-6 pr-14 pt-6'>
<div className='title-2xl-semi-bold self-stretch text-text-primary'>
{getTitle()}
</div>
</div>

12
web/app/components/plugins/install-plugin/install-from-marketplace/steps/install.tsx
View File

@@ -119,11 +119,11 @@ const Installed: FC<Props> = ({
return (
<>
<div className='flex flex-col px-6 py-3 justify-center items-start gap-4 self-stretch'>
<div className='text-text-secondary system-md-regular'>
<div className='flex flex-col items-start justify-center gap-4 self-stretch px-6 py-3'>
<div className='system-md-regular text-text-secondary'>
<p>{t(`${i18nPrefix}.readyToInstall`)}</p>
</div>
<div className='flex p-2 items-start content-start gap-1 self-stretch flex-wrap rounded-2xl bg-background-section-burn'>
<div className='flex flex-wrap content-start items-start gap-1 self-stretch rounded-2xl bg-background-section-burn p-2'>
<Card
className='w-full'
payload={pluginManifestInMarketToPluginProps(payload as PluginManifestInMarket)}
@@ -136,7 +136,7 @@ const Installed: FC<Props> = ({
</div>
</div>
{/* Action Buttons */}
<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'>
{!isInstalling && (
<Button variant='secondary' className='min-w-[72px]' onClick={handleCancel}>
{t('common.operation.cancel')}
@@ -144,11 +144,11 @@ const Installed: FC<Props> = ({
)}
<Button
variant='primary'
className='min-w-[72px] flex space-x-0.5'
className='flex min-w-[72px] space-x-0.5'
disabled={isInstalling || isLoading}
onClick={handleInstall}
>
{isInstalling && <RiLoader2Line className='w-4 h-4 animate-spin-slow' />}
{isInstalling && <RiLoader2Line className='h-4 w-4 animate-spin-slow' />}
<span>{t(`${i18nPrefix}.${isInstalling ? 'installing' : 'install'}`)}</span>
</Button>
</div>