feat(integrations): add unavailable page fallback

web/app/(commonLayout)/integrations/[[...slug]]/not-found.tsx

@@ -0,0 +1,7 @@
+import PageUnavailable from '@/app/components/base/page-unavailable'
+
+const IntegrationsNotFound = () => {
+  return <PageUnavailable className="h-full w-full bg-components-panel-bg" />
+}
+
+export default IntegrationsNotFound

web/app/components/base/__tests__/page-unavailable.spec.tsx

@@ -0,0 +1,17 @@
+import { render, screen } from '@testing-library/react'
+import PageUnavailable from '../page-unavailable'
+
+describe('PageUnavailable', () => {
+  it('renders the page unavailable message', () => {
+    render(<PageUnavailable />)
+
+    expect(screen.getByRole('heading', { level: 1 })).toHaveTextContent('404')
+    expect(screen.getByText('common.pageUnavailable')).toBeInTheDocument()
+  })
+
+  it('applies custom className', () => {
+    const { container } = render(<PageUnavailable className="h-full w-full" />)
+
+    expect(container.firstElementChild).toHaveClass('h-full', 'w-full')
+  })
+})

web/app/components/base/page-unavailable.tsx

@@ -0,0 +1,28 @@
+'use client'
+
+import { cn } from '@langgenius/dify-ui/cn'
+import { useTranslation } from 'react-i18next'
+
+type PageUnavailableProps = {
+  className?: string
+}
+
+const PageUnavailable = ({ className }: PageUnavailableProps) => {
+  const { t } = useTranslation()
+
+  return (
+    <div className={cn('flex h-screen w-screen items-center justify-center', className)}>
+      <h1
+        className="mr-5 h-[50px] shrink-0 pr-5 text-[24px] leading-[50px] font-medium"
+        style={{
+          borderRight: '1px solid rgba(0,0,0,.3)',
+        }}
+      >
+        404
+      </h1>
+      <div className="text-sm">{t('pageUnavailable', { ns: 'common' })}</div>
+    </div>
+  )
+}
+
+export default PageUnavailable