feats

src/App.css

   filter: drop-shadow(0 0 2em #61dafbaa);
 }
 
+
 @keyframes logo-spin {
   from {
     transform: rotate(0deg);

src/index.css → src/index.less

   background-color: var(--theme-color);
   color: var(--theme-front);
 }
+
+
+main {
+  &.ant-layout-content {
+    & > div {
+      height: 100%;
+    }
+  }
+}

src/main.jsx

 import React from 'react'
 import ReactDOM from 'react-dom/client'
 import Router from './routes/Router'
-import './index.css'
+import './index.less'
 import { Provider } from './store'
 
 ReactDOM.createRoot(document.getElementById('root')).render(

src/pages/404/index.jsx

+import React from 'react';
+import { Button, Result } from 'antd';
+import { NavLink } from "react-router-dom";
+
+const style = {
+  display: 'grid',
+  placeItems: 'center',
+  height: '100%'
+}
+
+export default (props) => {
+  return (
+    <div style={style}>
+      <Result
+        status="404"
+        title="404"
+        subTitle="页面不存在"
+        extra={<NavLink to="/" replace><Button type="primary">返回首页</Button></NavLink>}
+      />
+    </div>
+  )
+}

src/pages/login/LoginForm.jsx

   return (
     <Form form={form} layout="vertical">
       <Form.Item label="用户名" required>
-        <Input placeholder="请输入用户名" />
+        <Input placeholder="请输入用户名" style={{ borderRadius: '4px' }} />
       </Form.Item>
       <Form.Item label="密 码" required>
-        <Input.Password placeholder="请输入密码" />
+        <Input.Password placeholder="请输入密码" style={{ borderRadius: '4px' }} />
       </Form.Item>
       <Form.Item>
-        <Button type="primary" size='large' style={{ width: '100%', marginTop: '24px' }}>登录</Button>
+        <Button type="primary" size='large' style={{ width: '100%', marginTop: '24px', borderRadius: '4px' }}>登录</Button>
       </Form.Item>
     </Form>
   )

src/pages/login/style.less

   .login-card {
     width: 900px;
     height: 600px;
-    border-radius: 8px;
+    border-radius: 4px;
     overflow: hidden;
     box-shadow: 2px 2px 6px rgba(0, 0, 0, 0.2);
     

src/routes/routes.jsx

 import AuthLayout from "@/layouts/AuthLayout"
 import Home from "@/pages/Home"
 import Login from '@/pages/login'
+import Page404 from '@/pages/404'
 
 export default [
   {
         menu: {
           title: 'Home',
         },
+      },
+      {
+        path: '*',
+        element: <Page404 />
       }
     ],
   },
   {
     path: '/login',
     element: <Login />,
+  },
+  {
+    path: '*',
+    element: <Page404 />
   }
 ]