feats

src/index.less

@@ -29,9 +29,10 @@ html, body, #root {
   background-color: #f0f2f5;
 }
 
-.layout-background {
+.layout-sidebar {
   background-color: var(--theme-color);
   color: var(--theme-front);
+  box-shadow: 2px 0 8px 0 rgba(29,35,41,.05);
 }
 
 

src/layouts/AuthLayout/components/Header/Logo.jsx

@@ -1,14 +1,15 @@
 import React from 'react';
-import { useModel } from '@/store'
+import { NavLink } from "react-router-dom";
+import { useModel } from '@/store';
 
 export default (props) => {
 
   const { config } = useModel('system');
 
   return (
-    <div className='logo'>
+    <NavLink className='logo'  to="/">
       <img src="./logo.png" alt="" />
       <h3>{config.shorName}</h3>
-    </div>
+    </NavLink>
   )
 }

src/layouts/AuthLayout/components/Header/User.jsx

@@ -79,7 +79,7 @@ export default (props) => {
   return (
     <Dropdown overlay={menu}>
       <div className="user-info">
-        <Avatar src="https://joeschmoe.io/api/v1/random" />
+        <Avatar size={24} src="https://joeschmoe.io/api/v1/random" />
         <span className='font'>{user.name}</span>
         <ChangePassword ref={passRef} />
       </div>

src/layouts/AuthLayout/components/SiderBar.jsx

@@ -9,7 +9,7 @@ export default (props) => {
   const { theme } = useModel('system');
 
   return (
-    <Sider className='layout-background' theme={theme} collapsible >
+    <Sider className='layout-sidebar' theme={theme} collapsible width={240} >
       <Menus theme={theme}/>
     </Sider>
   )

src/layouts/AuthLayout/style.less

@@ -1,4 +1,5 @@
 .layout-header {
+  height: 48px;
   box-sizing: border-box;
   padding: 0;
   display: flex;
@@ -17,7 +18,7 @@
     }
 
     img {
-      width: 36px;
+      width: 28px;
       vertical-align: middle;
       margin-right: 1em;
     }

src/pages/sample/home/index.jsx

@@ -20,19 +20,19 @@ export default (props) => {
       <Banner />
 
       <Row gutter={24} style={{ marginTop: '24px' }}>
-        <Col span={18}>
+        <Col span={16}>
           <AreaChart style={chartStyle}/>
         </Col>
-        <Col span={6}>
+        <Col span={8}>
           <RadarChart style={chartStyle}/>
         </Col>
       </Row>
 
       <Row gutter={24} style={{ marginTop: '24px' }}>
-        <Col span={6}>
+        <Col span={8}>
           <PieChart style={chartStyle}/>
         </Col>
-        <Col span={18}>
+        <Col span={16}>
           <BarChart style={chartStyle}/>
         </Col>
       </Row>

src/routes/menus.jsx

@@ -37,6 +37,7 @@ const getMenuItems = (dts = [], fullPath = '/') => {
         key: path,
         label: item.meta.title,
         title: item.meta.title,
+        icon: item.meta.icon,
       },
       children && { children },
     )

src/routes/routes.jsx

@@ -1,3 +1,12 @@
+import {
+  AppstoreOutlined,
+  ContainerOutlined,
+  DesktopOutlined,
+  MailOutlined,
+  MenuFoldOutlined,
+  MenuUnfoldOutlined,
+  PieChartOutlined,
+} from '@ant-design/icons';
 import AuthLayout from "@/layouts/AuthLayout";
 import Login from '@/pages/login';
 import Page404 from '@/pages/404';
@@ -22,11 +31,20 @@ export default [
         index: true,
         element: <Home />,
       },
+      {
+        path: "home",
+        element: <Home />,
+        meta: {
+          title: '首页',
+          icon: <DesktopOutlined />,
+        },
+      },
       {
         path: "form",
         element: <BasicForm />,
         meta: {
           title: '表单',
+          icon: <AppstoreOutlined />,
         },
       },
       {
@@ -34,13 +52,7 @@ export default [
         element: <BasicTable />,
         meta: {
           title: '表格',
-        },
-      },
-      {
-        path: "home",
-        element: <Home />,
-        meta: {
-          title: 'Home',
+          icon: <ContainerOutlined />,
         },
       },
       {