完成首页导航

package.json

@@ -3,7 +3,6 @@
   "version": "0.1.0",
   "private": true,
   "dependencies": {
-    "@ant-design/compatible": "^5.1.1",
     "@reduxjs/toolkit": "^1.9.1",
     "@testing-library/jest-dom": "^5.16.5",
     "@testing-library/react": "^13.4.0",

src/assets/icons.tsx

@@ -0,0 +1,34 @@
+import React from "react";
+export const Logo=()=>(
+    <svg version="1.1" id="图层_1" xmlns="http://www.w3.org/2000/svg" xmlnsXlink="http://www.w3.org/1999/xlink" x="0px"
+         y="0px" width="32px" height="32px"
+         viewBox="0 0 512 512" style={{}} xmlSpace="preserve">
+        <path style={{fill: '#3C94D9'}} d="M351.9,53.2H101.8c-21.4,0-38.7,17.3-38.7,38.7v341.8c0,13.2,10.7,23.9,23.9,23.9c5,0,10-1.6,14.1-4.6
+	l42.3-30.7l37.8,27.4c1.6,1.2,3.9,1.2,5.5,0l37.8-27.4l38,27.6c1.6,1.2,3.7,1.2,5.3,0.1c-20-23.2-32.1-53.4-32.1-86.3
+	c0-73.1,59.3-132.4,132.4-132.4c7.7,0,15.2,0.7,22.5,1.9V91.9C390.6,70.6,373.3,53.2,351.9,53.2L351.9,53.2z M207.6,311.3h-62.1
+	c-12,0-21.8-9.7-21.8-21.8s9.7-21.8,21.8-21.8c0,0,0,0,0,0h62.1c12,0,21.8,9.7,21.8,21.8S219.6,311.3,207.6,311.3
+	C207.6,311.3,207.6,311.3,207.6,311.3z M283.2,229.8H145.5c-12,0-21.8-9.7-21.8-21.8c0-12,9.7-21.8,21.8-21.8c0,0,0,0,0,0h137.7
+	c12,0,21.8,9.7,21.8,21.8C305,220,295.2,229.8,283.2,229.8C283.2,229.8,283.2,229.8,283.2,229.8z M308.3,151.5H145.5
+	c-12,0-21.8-9.7-21.8-21.8c0-12,9.7-21.8,21.8-21.8c0,0,0,0,0,0h162.8c12,0,21.8,9.7,21.8,21.8C330.1,141.7,320.4,151.5,308.3,151.5
+	C308.3,151.5,308.3,151.5,308.3,151.5z"/>
+        <path style={{fill: '#2880D1'}} d="M368.1,269.2c-52.2,0-94.6,42.3-94.6,94.6s42.3,94.6,94.6,94.6s94.6-42.3,94.6-94.6S420.4,269.2,368.1,269.2z
+	 M411.9,382.4c8.6,0,15.6,7,15.6,15.6s-7,15.6-15.6,15.6H384v13c0,8.6-7,15.6-15.6,15.6s-15.6-7-15.6-15.6v-13h-27.9
+	c-8.6,0-15.6-7-15.6-15.6s7-15.6,15.6-15.6h27.9v-8.8h-27.9c-8.6,0-15.6-7-15.6-15.6s7-15.6,15.6-15.6h7.8l-14.5-15.7
+	c-5.8-6.3-5.5-16.1,0.8-22c6.3-5.8,16.1-5.5,22,0.8l27.2,29.4l26.5-31.9c5.5-6.6,15.3-7.5,21.9-2c0,0,0,0,0,0
+	c6.6,5.5,7.5,15.3,2,21.9c0,0,0,0,0,0l-16.2,19.4h9.4c8.6,0,15.6,7,15.6,15.6s-7,15.6-15.6,15.6H384v8.8L411.9,382.4L411.9,382.4z"
+        />
+        <path style={{fill: '#3C94D9'}} d="M273.5,363.8c0,26.1,10.6,49.7,27.6,66.8c7.1-5.5,13.9-11.3,20.5-17.4c-8.4-1.8-13.8-10.1-12-18.5
+	c1.5-7.2,7.9-12.3,15.2-12.3h26l1.9-2.3v-6.5H325c-8.6,0-15.6-7-15.6-15.6s7-15.6,15.6-15.6h7.8l-14.5-15.7
+	c-5.8-6.3-5.5-16.1,0.8-22c6.3-5.8,16.1-5.5,22,0.8l27.2,29.4l26.5-31.9c1.9-2.3,4.2-3.8,6.8-4.7c2.7-6.6,5.2-13.3,7.5-20
+	c-12.8-6.1-26.8-9.3-41-9.3C315.9,269.2,273.5,311.6,273.5,363.8L273.5,363.8z"/>
+        <path style={{fill: '#579FDA'}} d="M283.2,229.8H145.5c-12,0-21.8-9.7-21.8-21.8c0-12,9.7-21.8,21.8-21.8c0,0,0,0,0,0h137.7
+	c10.2,0,18.8,7.1,21.1,16.6c9.7-19.8,17.5-40.7,23-62.5c-3.8,6.9-11.1,11.2-19,11.2H145.5c-12,0-21.8-9.7-21.8-21.8
+	c0-12,9.7-21.8,21.8-21.8c0,0,0,0,0,0h162.8c11.7,0,21.2,9.2,21.7,20.8c4.8-22.1,7.3-45,7.3-68.6c0-2.3-0.1-4.7-0.1-7H101.8
+	c-21.4,0-38.7,17.3-38.7,38.7v288.3c96.1-14.8,178.3-71.9,227-151.6C287.9,229.4,285.6,229.8,283.2,229.8L283.2,229.8z M207.6,311.3
+	h-62.1c-12,0-21.8-9.7-21.8-21.8s9.7-21.8,21.8-21.8c0,0,0,0,0,0h62.1c12,0,21.8,9.7,21.8,21.8S219.6,311.3,207.6,311.3
+	C207.6,311.3,207.6,311.3,207.6,311.3z"/>
+        <path style={{fill: '#76B1E4'}} d="M123.8,206.6c0.8-11.3,10.2-20.3,21.7-20.3h3.2c11.9-10.8,23.1-22.4,33.3-34.8h-36.5c-12,0-21.8-9.7-21.8-21.8
+	c0-12,9.7-21.8,21.8-21.8c0,0,0,0,0,0h66.8c10-17.3,18.5-35.6,25.2-54.7H101.8c-21.4,0-38.7,17.3-38.7,38.7v149.8
+	C84.7,232.2,105,220.4,123.8,206.6L123.8,206.6z"/>
+</svg>
+)

src/index.tsx

@@ -8,6 +8,7 @@ import {store, persistor} from './models/store';
 import {RouterProvider} from "react-router-dom";
 import router from "./router/router";
 import {PersistGate} from 'redux-persist/integration/react'
+import {ConfigProvider} from "antd";
 
 const root = ReactDOM.createRoot(
     document.getElementById('root') as HTMLElement
@@ -16,7 +17,17 @@ root.render(
     <React.StrictMode>
         <Provider store={store}>
             <PersistGate loading={null} persistor={persistor}>
-                <RouterProvider router={router}/>
+                <ConfigProvider theme={{
+                    token: {
+                        colorPrimary: "#1890ff",
+                        colorSuccess: "#52c41a",
+                        colorWarning: "#faad14",
+                        colorInfo: "#1890ff",
+                        wireframe: false
+                    }
+                }}>
+                    <RouterProvider router={router}/>
+                </ConfigProvider>
             </PersistGate>
         </Provider>
     </React.StrictMode>

src/pages/HomeView.tsx

@@ -1,23 +1,84 @@
 import React, {FC, useEffect} from 'react';
-import { Button } from 'antd';
+import {UploadOutlined, UserOutlined, VideoCameraOutlined} from '@ant-design/icons';
+import {Layout, Menu, theme, Typography } from 'antd';
 import {useAppSelector} from "../models/hooks";
 import {getToken, store} from "../models/store";
-import {useNavigate} from "react-router-dom";
+import {Link, Outlet, useNavigate} from "react-router-dom";
+import Icon from '@ant-design/icons';
+import {Logo} from "../assets/icons";
+
+const { Title } = Typography;
+const {Header, Content, Footer, Sider} = Layout;
 
 function HomeView() {
     const token = useAppSelector(getToken);
     const navigate = useNavigate();
-    console.log( store.getState())
+    console.log(store.getState())
+
+    let items = [{
+        key: "/invoice/mine",
+        //icon: React.createElement(UserOutlined),
+        label: <Link to="/invoice/mine">我的发票</Link>
+    }, {
+        key: "/reimbursement/mine",
+        //icon: React.createElement(UserOutlined),
+        label: <Link to="/reimbursement/mine">我的报销</Link>,
+    },{
+        key: "/invoice/management",
+        //icon: React.createElement(UserOutlined),
+        label: <Link to="/reimbursement/mine">发票管理</Link>,
+    },{
+        key: "/reimbursement/management",
+        //icon: React.createElement(UserOutlined),
+        label: <Link to="/reimbursement/mine">报销审批</Link>,
+    },{
+        key: "/stat",
+        //icon: React.createElement(UserOutlined),
+        label: <Link to="/reimbursement/mine">财务统计</Link>,
+    }]
+
+    const {
+        token: { colorBgContainer, colorPrimary },
+    } = theme.useToken();
+
     useEffect(() => {
-        if(token.accessToken===''){
+        if (token.accessToken === '') {
             console.log("redirect")
             navigate("/login")
         }
     }, []);
     return (
-        <div className="HomeView">
+        <Layout style={{height: '100%'}}>
-            <p>{token.accessToken}</p>
+            <Sider
-        </div>
+                width={208}
+                style={{ background: colorBgContainer }}
+                breakpoint="lg"
+                collapsedWidth="0"
+                onBreakpoint={(broken) => {
+                    console.log(broken);
+                }}
+                onCollapse={(collapsed, type) => {
+                    console.log(collapsed, type);
+                }}
+            >
+                <div style={{height: '32px',margin: '17px 0 17px 0', display: 'flex', justifyContent: 'center', alignItems: 'center'}}>
+                    <Icon component={Logo}/>
+                    <span style={{color: colorPrimary, fontSize: '16px', fontWeight: 'bold', marginLeft: '4px'}}>智能财务报销系统</span>
+                </div>
+                <Menu
+                    mode="inline"
+                    defaultSelectedKeys={['/invoice/mine']}
+                    items={items}
+                />
+            </Sider>
+            <Layout>
+                <Header style={{height: '48px', padding: 0, background: colorBgContainer }}/>
+                <Content style={{margin: '24px 16px 0'}}>
+                    <Outlet />
+                </Content>
+                <Footer style={{textAlign: 'center'}}></Footer>
+            </Layout>
+        </Layout>
     )
 }
 

src/pages/Invoice/mine/InvoiceListView.tsx

@@ -1,9 +1,9 @@
 import {Card, Dropdown, List,Menu,Input,Button,Radio,Divider} from "antd";
 import type { MenuProps } from 'antd';
-import { Icon } from '@ant-design/compatible'
+//import { Icon } from '@ant-design/compatible'
 import { DownOutlined,UploadOutlined } from '@ant-design/icons';
 import React, {ReactElement, JSXElementConstructor, ReactFragment, ReactPortal,useState } from "react";
-import {Invoice} from "../../models/Staff"
+import {Invoice} from "../../../models/Staff"
 import {  Space, Typography } from 'antd';
 import {SizeType} from "antd/es/config-provider/SizeContext";
 const {Meta} = Card;

src/pages/reimbursement/mine/MyReimbursement.tsx

@@ -0,0 +1,6 @@
+function MyReimbursement() {
+    return(
+        <div>我的报销</div>
+    )
+}
+export default MyReimbursement

src/router/router.tsx

@@ -1,7 +1,8 @@
 import {createBrowserRouter, redirect} from "react-router-dom";
-import LoginView from "../pages/Login/LoginView";
+import LoginView from "../pages/login/LoginView";
 import HomeView from "../pages/HomeView";
-import InvoiceListView from "../pages/Invoice/InvoiceListView";
+import InvoiceListView from "../pages/Invoice/mine/InvoiceListView";
+import MyReimbursement from "../pages/reimbursement/mine/MyReimbursement";
 
 const router = createBrowserRouter([
     {
@@ -11,11 +12,17 @@ const router = createBrowserRouter([
     {
         path: "/",
         element: <HomeView/>,
+        children: [
+            {
+                path: "invoice/mine",
+                element: <InvoiceListView />,
+            },
+            {
+                path: "reimbursement/mine",
+                element: <MyReimbursement />,
+            },
+        ],
     },
-    {
-        path: "/list",
-        element: <InvoiceListView/>,
-    }
 ]);
 
 export default router