feat: admin frontend - React + Vite, auth pages, user management, roles, permissions, webhooks, devices, logs

frontend/admin/src/pages/NotFoundPage/NotFoundPage.test.tsx

@@ -0,0 +1,30 @@
+import { render, screen } from '@testing-library/react'
+import userEvent from '@testing-library/user-event'
+import { describe, expect, it, vi } from 'vitest'
+
+import { NotFoundPage } from './NotFoundPage'
+
+const navigateMock = vi.fn()
+
+vi.mock('react-router-dom', async () => {
+  const actual = await vi.importActual<typeof import('react-router-dom')>('react-router-dom')
+  return {
+    ...actual,
+    useNavigate: () => navigateMock,
+  }
+})
+
+describe('NotFoundPage', () => {
+  it('renders the 404 state and routes users back to the dashboard', async () => {
+    const user = userEvent.setup()
+
+    render(<NotFoundPage />)
+
+    expect(screen.getByText('404')).toBeInTheDocument()
+    expect(screen.getByText('抱歉，您访问的页面不存在')).toBeInTheDocument()
+
+    await user.click(screen.getByRole('button', { name: '返回首页' }))
+
+    expect(navigateMock).toHaveBeenCalledWith('/dashboard')
+  })
+})

frontend/admin/src/pages/NotFoundPage/NotFoundPage.tsx

@@ -0,0 +1,31 @@
+/**
+ * 404 页面
+ */
+
+import { Result, Button } from 'antd'
+import { useNavigate } from 'react-router-dom'
+
+export function NotFoundPage() {
+  const navigate = useNavigate()
+
+  return (
+    <div style={{
+      height: '100vh',
+      display: 'flex',
+      alignItems: 'center',
+      justifyContent: 'center',
+      background: 'var(--color-canvas)',
+    }}>
+      <Result
+        status="404"
+        title="404"
+        subTitle="抱歉，您访问的页面不存在"
+        extra={
+          <Button type="primary" onClick={() => navigate('/dashboard')}>
+            返回首页
+          </Button>
+        }
+      />
+    </div>
+  )
+}

frontend/admin/src/pages/NotFoundPage/index.ts

@@ -0,0 +1 @@
+export { NotFoundPage } from './NotFoundPage'