youngkingdom/dify
1
0
Fork 0
mirror of https://github.com/langgenius/dify.git synced 2026-05-27 20:36:18 +08:00
Code Issues Packages Projects Releases Wiki Activity

refactor(install): improve layout and scrolling behavior for plugin installation step

Browse Source
This commit is contained in:
CodingOnStar
2026-05-15 11:01:13 +08:00
parent 7da1b4cf04
commit 44b75ccdf0
2 changed files with 16 additions and 4 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@ -265,6 +265,18 @@ describe('Install Component', () => {
expect(screen.getByTestId('all-plugins-count')).toHaveTextContent('2')
})
it('should make the plugin list scrollable inside the modal body', () => {
render(<Install {...defaultProps} />)
expect(screen.getByTestId('install-multi').parentElement).toHaveClass('overflow-y-auto')
})
it('should constrain the install step so the plugin list can scroll with many items', () => {
const { container } = render(<Install {...defaultProps} />)
expect(container.firstElementChild).toHaveClass('min-h-0', 'flex-1', 'overflow-hidden')
})
it('should show singular text when one plugin is selected', async () => {
render(<Install {...defaultProps} />)

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

@ -170,12 +170,12 @@ const Install: FC<Props> = ({
const { canInstallPluginFromMarketplace } = useCanInstallPluginFromMarketplace()
return (
<>
<div className="flex flex-col items-start justify-center gap-4 self-stretch px-6 py-3">
<div className="flex min-h-0 flex-1 flex-col self-stretch overflow-hidden">
<div className="flex min-h-0 flex-1 flex-col items-start justify-center gap-4 self-stretch overflow-hidden px-6 py-3">
<div className="system-md-regular text-text-secondary">
<p>{t(`${i18nPrefix}.${selectedPluginsNum > 1 ? 'readyToInstallPackages' : 'readyToInstallPackage'}`, { ns: 'plugin', num: selectedPluginsNum })}</p>
</div>
<div className="w-full space-y-1 rounded-2xl bg-background-section-burn p-2">
<div className="flex min-h-0 w-full flex-1 flex-col gap-1 overflow-y-auto rounded-2xl bg-background-section-burn p-2">
<InstallMulti
ref={installMultiRef}
allPlugins={allPlugins}
@ -218,7 +218,7 @@ const Install: FC<Props> = ({
</div>
)}
</>
</div>
)
}
export default React.memo(Install)