opensource/dify
2
0
Fork 0
mirror of https://github.com/langgenius/dify.git synced 2026-07-21 18:58:35 +08:00
Code Issues Packages Projects Releases Wiki Activity

fix: incorrect backgroud when dark mode and no plugins (#38378)

Browse Source 
Co-authored-by: yyh <yuanyouhuilyz@gmail.com>
This commit is contained in:
非法操作 2026-07-03 16:21:50 +08:00 committed by GitHub
parent 5cb76f5eff
commit 81cc43b753
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
2 changed files with 11 additions and 30 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

17
web/app/components/plugins/plugin-page/empty/__tests__/index.spec.tsx
View File

@ -135,7 +135,7 @@ describe('Empty Component', () => {
describe('Rendering', () => {
it('should render basic structure correctly', async () => {
// Arrange & Act
const { container } = render(<Empty />)
render(<Empty />)
await flushEffects()
// Assert - file input
@ -144,10 +144,6 @@ describe('Empty Component', () => {
expect(fileInput.style.display).toBe('none')
expect(fileInput.accept).toBe('.difypkg,.difybndl')
// Assert - skeleton cards (20 in the grid + 1 icon container)
const skeletonCards = container.querySelectorAll('.rounded-xl.bg-components-card-bg')
expect(skeletonCards.length).toBeGreaterThanOrEqual(20)
// Assert - group icon container
const iconContainer = document.querySelector('.size-14')
expect(iconContainer).toBeInTheDocument()
@ -170,12 +166,6 @@ describe('Empty Component', () => {
expect(container.querySelector('.i-custom-vender-integrations-trigger-active')).toBeInTheDocument()
expect(container.querySelector('.i-custom-vender-integrations-trigger')).not.toBeInTheDocument()
const skeletonGrid = container.querySelector('.grid')
expect(skeletonGrid).toHaveClass('max-w-[1600px]', 'px-6', 'gap-x-[7px]', 'gap-y-[15px]', 'pt-2')
const skeletonCards = container.querySelectorAll('.h-\\[72px\\].rounded-lg')
expect(skeletonCards).toHaveLength(22)
const buttons = screen.getAllByRole('button')
buttons.forEach(button => expect(button).toHaveClass('h-8', 'w-full', 'justify-start'))
})
@ -191,8 +181,6 @@ describe('Empty Component', () => {
expect(container.querySelector('.i-ri-drag-drop-line')).toBeInTheDocument()
expect(container.firstElementChild).toHaveClass('bg-components-panel-bg')
const skeletonGrid = container.querySelector('.grid')
expect(skeletonGrid).toHaveClass('max-w-[1600px]', 'px-6', 'gap-x-[7px]', 'gap-y-[15px]', 'pt-2')
expect(container.querySelector('.items-center')).toBeInTheDocument()
expect(container.querySelector('.-translate-y-7')).not.toBeInTheDocument()
expect(container.querySelector('.i-custom-vender-integrations-agent-strategy-active')).toHaveClass('size-6', 'shrink-0')
@ -208,9 +196,6 @@ describe('Empty Component', () => {
expect(screen.getByText('plugin.installModal.dropIntegrationToInstall')).toBeInTheDocument()
expect(container.querySelector('.i-ri-drag-drop-line')).toBeInTheDocument()
const skeletonGrid = container.querySelector('.grid')
expect(skeletonGrid).toHaveClass('max-w-[1600px]', 'px-6', 'gap-x-[7px]', 'gap-y-[15px]', 'pt-2')
expect(skeletonGrid).toHaveStyle({ background: 'radial-gradient(ellipse at 50% 48%, #F3F4F7 0%, #FFFFFF 58%)' })
expect(container.querySelector('.i-custom-vender-integrations-extension-active')).toHaveClass('size-6', 'shrink-0')
})
})

24
web/app/components/plugins/plugin-page/empty/index.tsx
View File

@ -132,26 +132,22 @@ const Empty = ({
: isIntegrationsExtension
? t('list.noExtensionFound', { ns: 'plugin' })
: text
const placeholderItemCount = isIntegrationsCategory ? 14 : 20
return (
<div className="relative z-0 w-full grow bg-components-panel-bg">
{/* skeleton */}
<div
aria-hidden
className={cn(
'absolute top-0 left-1/2 z-10 grid h-full -translate-x-1/2 grid-cols-2 content-start overflow-hidden',
isIntegrationsCategory ? 'gap-x-[7px] gap-y-[15px] pt-2' : 'gap-2',
'pointer-events-none absolute top-0 left-1/2 z-10 grid h-full -translate-x-1/2 grid-cols-2 content-start gap-2 overflow-hidden',
contentFrameClassName,
)}
style={isIntegrationsCategory
? { background: 'radial-gradient(ellipse at 50% 48%, #F3F4F7 0%, #FFFFFF 58%)' }
: undefined}
>
{Array.from({ length: isIntegrationsCategory ? 22 : 20 }).fill(0).map((_, i) => (
<div key={i} className={cn(isIntegrationsCategory ? 'h-[72px] rounded-lg bg-[#F9FAFB]/[0.52]' : 'h-24 rounded-xl bg-components-card-bg')} />
{Array.from({ length: placeholderItemCount }, (_, i) => (
<div key={i} className={cn(isIntegrationsCategory ? 'h-24 rounded-lg bg-background-section-burn/30' : 'h-24 rounded-xl bg-components-card-bg')} />
))}
</div>
{/* mask */}
<div className="absolute z-20 size-full bg-linear-to-b from-components-panel-bg-transparent to-components-panel-bg" />
<div aria-hidden className="pointer-events-none absolute inset-0 z-20 bg-linear-to-b from-components-panel-bg-transparent to-components-panel-bg" />
<div className={cn(
'relative z-30 flex h-full',
showDropInstallTip ? 'flex-col' : 'items-center justify-center',
@ -170,9 +166,9 @@ const Empty = ({
>
<div className="flex flex-col items-center gap-y-3">
<div className={cn(
'relative -z-10 flex items-center justify-center border-dashed bg-components-card-bg',
'relative -z-10 flex items-center justify-center border-dashed bg-components-card-bg backdrop-blur-md',
isIntegrationsCategory
? 'size-[60px] rounded-[13px] border-[0.667px] border-divider-deep shadow-xl shadow-shadow-shadow-5'
? 'size-14 rounded-xl border border-divider-regular'
: 'size-14 rounded-xl border border-divider-deep shadow-xl shadow-shadow-shadow-5',
)}
>
@ -196,11 +192,11 @@ const Empty = ({
</>
)}
</div>
<div className={cn(isIntegrationsCategory ? 'system-sm-regular text-text-primary' : 'system-md-regular text-text-tertiary')}>
<div className={cn(isIntegrationsCategory ? 'system-sm-regular text-text-tertiary' : 'system-md-regular text-text-tertiary')}>
{emptyText}
</div>
</div>
<div className={cn('flex flex-col', isIntegrationsCategory ? 'w-[200px]' : 'w-[236px]')}>
<div className="flex w-[236px] flex-col">
<input
type="file"
ref={fileInputRef}