完成首页导航
parent
2b001a957e
commit
b650eb0f5e
|
@ -3,7 +3,6 @@
|
||||||
"version": "0.1.0",
|
"version": "0.1.0",
|
||||||
"private": true,
|
"private": true,
|
||||||
"dependencies": {
|
"dependencies": {
|
||||||
"@ant-design/compatible": "^5.1.1",
|
|
||||||
"@reduxjs/toolkit": "^1.9.1",
|
"@reduxjs/toolkit": "^1.9.1",
|
||||||
"@testing-library/jest-dom": "^5.16.5",
|
"@testing-library/jest-dom": "^5.16.5",
|
||||||
"@testing-library/react": "^13.4.0",
|
"@testing-library/react": "^13.4.0",
|
||||||
|
|
|
@ -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>
|
||||||
|
)
|
|
@ -8,6 +8,7 @@ import {store, persistor} from './models/store';
|
||||||
import {RouterProvider} from "react-router-dom";
|
import {RouterProvider} from "react-router-dom";
|
||||||
import router from "./router/router";
|
import router from "./router/router";
|
||||||
import {PersistGate} from 'redux-persist/integration/react'
|
import {PersistGate} from 'redux-persist/integration/react'
|
||||||
|
import {ConfigProvider} from "antd";
|
||||||
|
|
||||||
const root = ReactDOM.createRoot(
|
const root = ReactDOM.createRoot(
|
||||||
document.getElementById('root') as HTMLElement
|
document.getElementById('root') as HTMLElement
|
||||||
|
@ -16,7 +17,17 @@ root.render(
|
||||||
<React.StrictMode>
|
<React.StrictMode>
|
||||||
<Provider store={store}>
|
<Provider store={store}>
|
||||||
<PersistGate loading={null} persistor={persistor}>
|
<PersistGate loading={null} persistor={persistor}>
|
||||||
|
<ConfigProvider theme={{
|
||||||
|
token: {
|
||||||
|
colorPrimary: "#1890ff",
|
||||||
|
colorSuccess: "#52c41a",
|
||||||
|
colorWarning: "#faad14",
|
||||||
|
colorInfo: "#1890ff",
|
||||||
|
wireframe: false
|
||||||
|
}
|
||||||
|
}}>
|
||||||
<RouterProvider router={router}/>
|
<RouterProvider router={router}/>
|
||||||
|
</ConfigProvider>
|
||||||
</PersistGate>
|
</PersistGate>
|
||||||
</Provider>
|
</Provider>
|
||||||
</React.StrictMode>
|
</React.StrictMode>
|
||||||
|
|
|
@ -1,13 +1,46 @@
|
||||||
import React, {FC, useEffect} from 'react';
|
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 {useAppSelector} from "../models/hooks";
|
||||||
import {getToken, store} from "../models/store";
|
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() {
|
function HomeView() {
|
||||||
const token = useAppSelector(getToken);
|
const token = useAppSelector(getToken);
|
||||||
const navigate = useNavigate();
|
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(() => {
|
useEffect(() => {
|
||||||
if (token.accessToken === '') {
|
if (token.accessToken === '') {
|
||||||
console.log("redirect")
|
console.log("redirect")
|
||||||
|
@ -15,9 +48,37 @@ function HomeView() {
|
||||||
}
|
}
|
||||||
}, []);
|
}, []);
|
||||||
return (
|
return (
|
||||||
<div className="HomeView">
|
<Layout style={{height: '100%'}}>
|
||||||
<p>{token.accessToken}</p>
|
<Sider
|
||||||
|
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>
|
</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>
|
||||||
)
|
)
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
|
@ -1,9 +1,9 @@
|
||||||
import {Card, Dropdown, List,Menu,Input,Button,Radio,Divider} from "antd";
|
import {Card, Dropdown, List,Menu,Input,Button,Radio,Divider} from "antd";
|
||||||
import type { MenuProps } 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 { DownOutlined,UploadOutlined } from '@ant-design/icons';
|
||||||
import React, {ReactElement, JSXElementConstructor, ReactFragment, ReactPortal,useState } from "react";
|
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 { Space, Typography } from 'antd';
|
||||||
import {SizeType} from "antd/es/config-provider/SizeContext";
|
import {SizeType} from "antd/es/config-provider/SizeContext";
|
||||||
const {Meta} = Card;
|
const {Meta} = Card;
|
|
@ -0,0 +1,6 @@
|
||||||
|
function MyReimbursement() {
|
||||||
|
return(
|
||||||
|
<div>我的报销</div>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
export default MyReimbursement
|
|
@ -1,7 +1,8 @@
|
||||||
import {createBrowserRouter, redirect} from "react-router-dom";
|
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 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([
|
const router = createBrowserRouter([
|
||||||
{
|
{
|
||||||
|
@ -11,11 +12,17 @@ const router = createBrowserRouter([
|
||||||
{
|
{
|
||||||
path: "/",
|
path: "/",
|
||||||
element: <HomeView/>,
|
element: <HomeView/>,
|
||||||
|
children: [
|
||||||
|
{
|
||||||
|
path: "invoice/mine",
|
||||||
|
element: <InvoiceListView />,
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
path: "/list",
|
path: "reimbursement/mine",
|
||||||
element: <InvoiceListView/>,
|
element: <MyReimbursement />,
|
||||||
}
|
},
|
||||||
|
],
|
||||||
|
},
|
||||||
]);
|
]);
|
||||||
|
|
||||||
export default router
|
export default router
|
Loading…
Reference in New Issue