初始化fateverse

src/layout/appmain/index.tsx

@@ -0,0 +1,11 @@
+import React from "react";
+import '../../assets/styles/appmain.scss'
+import { Outlet } from "react-router-dom";
+
+export default function AppMain() {
+  return(
+    <section className="app-container">
+      <Outlet></Outlet>
+    </section>
+  )
+}

src/layout/index.tsx

@@ -0,0 +1,41 @@
+import React, { useEffect } from "react";
+import { Layout } from 'antd'
+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}>
+        <SideBar/>
+      </Sider>
+      <Layout>
+        <Header className="navbar-box">
+          <Navbar/>
+        </Header>
+        <Content>
+          <AppMain/>
+        </Content>
+      </Layout>
+    </Layout>
+  )
+}

src/layout/navbar/index.tsx

@@ -0,0 +1,29 @@
+import { Button } from 'antd'
+import {
+  MenuFoldOutlined,
+  MenuUnfoldOutlined,
+} from '@ant-design/icons';
+import React from 'react'
+import { useSelector, useDispatch } from 'react-redux'
+import { setCollapsed } from '../../stores/sidebar';
+
+export default function Navbar() {
+  // 获取状态
+  const collapsed = useSelector((store: any) => store.sidebar)
+  // 通过dispatch派发事件
+  const dispatch = useDispatch()
+  return (
+    <>
+      <Button
+        type="text"
+        icon={collapsed ? <MenuUnfoldOutlined /> : <MenuFoldOutlined />}
+        onClick={() => {dispatch(setCollapsed())}}
+        style={{
+          fontSize: '16px',
+          width: 64,
+          height: 64,
+        }}
+      />
+    </>
+  )
+}

src/layout/sidebar/index.tsx

@@ -0,0 +1,41 @@
+import { Menu } from 'antd'
+import React, {Fragment, useEffect, useState} from 'react'
+import { useDispatch, useSelector } from 'react-redux';
+import { generateMenu } from '../../permission';
+import { useNavigate } from 'react-router-dom';
+
+export default function SideBar() {
+  const navigate = useNavigate()
+  const routes: [] = useSelector((store: any)=>store.permission)
+  const dispatch = useDispatch()
+  const [menuItem, setMenuItem] = useState<Array<any>>([{
+    key: '/',
+    label: '首页',
+    title: '首页',
+    icon: ''
+  }])
+  const getMenu = () => {
+    if(routes.length) {
+      const roleMenu = generateMenu(routes as any)
+      setMenuItem([...menuItem, ...roleMenu])
+    }
+  }
+  const goPage = (val: any) => {
+    navigate(val.key)
+  }
+  useEffect(()=>{
+    getMenu()
+  }, [routes.length])
+  return (
+    <Fragment>
+      <div style={{height: '64px', display: 'flex', justifyContent: 'center', alignItems: 'center'}}>FateVerse</div>
+      <Menu
+        theme="dark"
+        mode="inline"
+        defaultSelectedKeys={['1']}
+        items={menuItem}
+        onClick={goPage}
+      />
+    </Fragment>
+  )
+}