feat: 新增菜单图标, 搜索组件

src/layout/appmain/index.tsx

@@ -1,4 +1,4 @@
-import '../../assets/styles/appmain.scss'
+import '@/assets/styles/appmain.scss'
 import { Outlet } from "react-router-dom";
 
 export default function AppMain() {

src/layout/index.tsx

@@ -1,14 +1,28 @@
+import { useEffect } from "react";
 import { Layout } from 'antd'
-import { useSelector } from 'react-redux'
+import { useDispatch, useSelector } from 'react-redux'
 import SideBar from "./sidebar";
 import Navbar from "./navbar";
 import AppMain from "./appmain";
 import '../assets/styles/layout.scss'
+import { addRoutes, getAsyncRouters } from '../stores/permission';
 
 const { Header, Sider, Content } = Layout;
 
 export default function LayOut() {
   const collapsed = useSelector((store: any) => store.sidebar)
+  const dispatch = useDispatch()
+  const requestAsyncRoutes = async () => {
+    const { payload } = await dispatch(getAsyncRouters() as any)
+    dispatch(addRoutes(payload))
+  }
+  useEffect(()=>{
+    requestAsyncRoutes()
+  }, [])
+
+  window.addEventListener('unload', ()=>{
+    requestAsyncRoutes()
+  })
   return(
     <Layout className="layout-box">
       <Sider trigger={null} collapsible collapsed={collapsed}>

src/layout/sidebar/Menuicon.tsx

@@ -0,0 +1,19 @@
+import { useMemo } from "react"
+
+interface IMenuIconProps {
+  prefix?: string
+  name: string
+  color?: string,
+  size?: number | string
+}
+export default function Menuicon(props: IMenuIconProps) {
+  const { prefix = 'icon', name, color, size = 16 } = props
+  const symbolId = useMemo(() => `#${prefix}-${name}`, [prefix, name])
+  return (
+    <span className="anticon">
+      <svg aria-hidden="true" width={size} height={size} fill={color}  >
+        <use href={symbolId} fill={color} />
+      </svg>
+    </span>
+  )
+}