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

Co-authored-by: yyh <yuanyouhuilyz@gmail.com>

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

@@ -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')
     })
   })

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

@@ -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',
+          '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',
-          isIntegrationsCategory ? 'gap-x-[7px] gap-y-[15px] pt-2' : 'gap-2',
           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) => (
+        {Array.from({ length: placeholderItemCount }, (_, i) => (
-          <div key={i} className={cn(isIntegrationsCategory ? 'h-[72px] rounded-lg bg-[#F9FAFB]/[0.52]' : 'h-24 rounded-xl bg-components-card-bg')} />
+          <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 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="absolute z-20 size-full 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}