outman/dify
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: local and bundle support hide anim

Browse Source
This commit is contained in:
Joel 2025-01-09 11:16:33 +08:00
parent 9822445c1e
commit 192af8df9f
6 changed files with 49 additions and 7 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -6,6 +6,8 @@ import { InstallStep } from '../../types'
import type { Dependency } from '../../types'
import ReadyToInstall from './ready-to-install'
import { useTranslation } from 'react-i18next'
import useHideLogic from '../hooks/use-hide-logic'
import cn from '@/utils/classnames'
const i18nPrefix = 'plugin.installModal'
@ -30,6 +32,13 @@ const InstallBundle: FC<Props> = ({
const { t } = useTranslation()
const [step, setStep] = useState<InstallStep>(installType === InstallType.fromMarketplace ? InstallStep.readyToInstall : InstallStep.uploading)
const {
modalClassName,
foldAnimInto,
setIsInstalling,
handleStartToInstall,
} = useHideLogic(onClose)
const getTitle = useCallback(() => {
if (step === InstallStep.uploadFailed)
return t(`${i18nPrefix}.uploadFailed`)
@ -42,8 +51,8 @@ const InstallBundle: FC<Props> = ({
return (
<Modal
isShow={true}
onClose={onClose}
className='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'
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')}
closable
>
<div className='flex pt-6 pl-6 pb-3 pr-14 items-start gap-2 self-stretch'>
@ -54,6 +63,8 @@ const InstallBundle: FC<Props> = ({
<ReadyToInstall
step={step}
onStepChange={setStep}
onStartToInstall={handleStartToInstall}
setIsInstalling={setIsInstalling}
allPlugins={fromDSLPayload}
onClose={onClose}
/>

8
web/app/components/plugins/install-plugin/install-bundle/ready-to-install.tsx
View File

@ -9,6 +9,8 @@ import type { Dependency, InstallStatusResponse, Plugin } from '../../types'
type Props = {
step: InstallStep
onStepChange: (step: InstallStep) => void,
onStartToInstall: () => void
setIsInstalling: (isInstalling: boolean) => void
allPlugins: Dependency[]
onClose: () => void
isFromMarketPlace?: boolean
@ -17,6 +19,8 @@ type Props = {
const ReadyToInstall: FC<Props> = ({
step,
onStepChange,
onStartToInstall,
setIsInstalling,
allPlugins,
onClose,
isFromMarketPlace,
@ -27,13 +31,15 @@ const ReadyToInstall: FC<Props> = ({
setInstallStatus(installStatus)
setInstalledPlugins(plugins)
onStepChange(InstallStep.installed)
}, [onStepChange])
setIsInstalling(false)
}, [onStepChange, setIsInstalling])
return (
<>
{step === InstallStep.readyToInstall && (
<Install
allPlugins={allPlugins}
onCancel={onClose}
onStartToInstall={onStartToInstall}
onInstalled={handleInstalled}
isFromMarketPlace={isFromMarketPlace}
/>

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

@ -12,6 +12,7 @@ const i18nPrefix = 'plugin.installModal'
type Props = {
allPlugins: Dependency[]
onStartToInstall?: () => void
onInstalled: (plugins: Plugin[], installStatus: InstallStatusResponse[]) => void
onCancel: () => void
isFromMarketPlace?: boolean
@ -20,6 +21,7 @@ type Props = {
const Install: FC<Props> = ({
allPlugins,
onStartToInstall,
onInstalled,
onCancel,
isFromMarketPlace,
@ -65,6 +67,7 @@ const Install: FC<Props> = ({
},
})
const handleInstall = () => {
onStartToInstall?.()
installOrUpdate({
payload: allPlugins.filter((_d, index) => selectedIndexes.includes(index)),
plugin: selectedPlugins,

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

@ -9,6 +9,8 @@ import { useTranslation } from 'react-i18next'
import useGetIcon from '@/app/components/plugins/install-plugin/base/use-get-icon'
import ReadyToInstallPackage from './ready-to-install'
import ReadyToInstallBundle from '../install-bundle/ready-to-install'
import useHideLogic from '../hooks/use-hide-logic'
import cn from '@/utils/classnames'
const i18nPrefix = 'plugin.installModal'
@ -31,6 +33,13 @@ const InstallFromLocalPackage: React.FC<InstallFromLocalPackageProps> = ({
const isBundle = file.name.endsWith('.difybndl')
const [dependencies, setDependencies] = useState<Dependency[]>([])
const {
modalClassName,
foldAnimInto,
setIsInstalling,
handleStartToInstall,
} = useHideLogic(onClose)
const getTitle = useCallback(() => {
if (step === InstallStep.uploadFailed)
return t(`${i18nPrefix}.uploadFailed`)
@ -76,8 +85,8 @@ const InstallFromLocalPackage: React.FC<InstallFromLocalPackageProps> = ({
return (
<Modal
isShow={true}
onClose={onClose}
className='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'
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')}
closable
>
<div className='flex pt-6 pl-6 pb-3 pr-14 items-start gap-2 self-stretch'>
@ -99,6 +108,8 @@ const InstallFromLocalPackage: React.FC<InstallFromLocalPackageProps> = ({
<ReadyToInstallBundle
step={step}
onStepChange={setStep}
onStartToInstall={handleStartToInstall}
setIsInstalling={setIsInstalling}
onClose={onClose}
allPlugins={dependencies}
/>
@ -106,6 +117,8 @@ const InstallFromLocalPackage: React.FC<InstallFromLocalPackageProps> = ({
<ReadyToInstallPackage
step={step}
onStepChange={setStep}
onStartToInstall={handleStartToInstall}
setIsInstalling={setIsInstalling}
onClose={onClose}
uniqueIdentifier={uniqueIdentifier}
manifest={manifest}

11
web/app/components/plugins/install-plugin/install-from-local-package/ready-to-install.tsx
View File

@ -10,6 +10,8 @@ import useRefreshPluginList from '../hooks/use-refresh-plugin-list'
type Props = {
step: InstallStep
onStepChange: (step: InstallStep) => void,
onStartToInstall: () => void
setIsInstalling: (isInstalling: boolean) => void
onClose: () => void
uniqueIdentifier: string | null,
manifest: PluginDeclaration | null,
@ -20,6 +22,8 @@ type Props = {
const ReadyToInstall: FC<Props> = ({
step,
onStepChange,
onStartToInstall,
setIsInstalling,
onClose,
uniqueIdentifier,
manifest,
@ -31,13 +35,15 @@ const ReadyToInstall: FC<Props> = ({
const handleInstalled = useCallback(() => {
onStepChange(InstallStep.installed)
refreshPluginList(manifest)
}, [manifest, onStepChange, refreshPluginList])
setIsInstalling(false)
}, [manifest, onStepChange, refreshPluginList, setIsInstalling])
const handleFailed = useCallback((errorMsg?: string) => {
onStepChange(InstallStep.installFailed)
setIsInstalling(false)
if (errorMsg)
onError(errorMsg)
}, [onError, onStepChange])
}, [onError, onStepChange, setIsInstalling])
return (
<>
@ -49,6 +55,7 @@ const ReadyToInstall: FC<Props> = ({
onCancel={onClose}
onInstalled={handleInstalled}
onFailed={handleFailed}
onStartToInstall={onStartToInstall}
/>
)
}

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

@ -85,6 +85,8 @@ const InstallFromMarketplace: React.FC<InstallFromMarketplaceProps> = ({
<ReadyToInstallBundle
step={step}
onStepChange={setStep}
onStartToInstall={handleStartToInstall}
setIsInstalling={setIsInstalling}
onClose={onClose}
allPlugins={dependencies!}
isFromMarketPlace