初始化

2025-09-13 16:18:30 +08:00
commit 754f4d97b3
91 changed files with 29581 additions and 0 deletions
--- a/src/component/Header/LayoutHeader.jsx
+++ b/src/component/Header/LayoutHeader.jsx
@ -0,0 +1,104 @@
+import React from 'react';
+import {Badge, Button, Dropdown, Flex, Layout, Modal, Space, theme} from "antd";
+import {DownOutlined, KeyOutlined, LogoutOutlined, MailOutlined, UserOutlined} from "@ant-design/icons";
+import {useNavigate} from "react-router-dom";
+import ChangePasswordModal from "./ChangePasswordModal";
+
+function LayoutHeader(props) {
+    const {
+        token: {colorBgContainer, borderRadiusLG, colorBgBase},
+    } = theme.useToken();
+
+    const navigate = useNavigate();
+
+    const {profile, commonAxios, messageApi} = props;
+    const [changePasswordModalOpen, setChangePasswordModalOpen] = React.useState(false);
+
+    const logout = () => {
+        Modal.confirm({
+            title: '确认退出登录吗？',
+            onOk: () => {
+                commonAxios.post('/api/auth/logout').then(res => {
+                    localStorage.removeItem('token');
+                    navigate('/auth/login');
+                })
+            },
+            onCancel: () => {
+
+            }
+        });
+    }
+
+    const accountItems = [
+        {
+            label: (
+                <div onClick={() => setChangePasswordModalOpen(true)}>修改密码</div>
+            ),
+            icon: <KeyOutlined/>,
+            key: 'changePassword',
+        },
+        {
+            type: 'divider',
+        },
+        {
+            label: <div onClick={logout}>退出登录</div>,
+            key: 'logout',
+            icon: <LogoutOutlined/>,
+            danger: true,
+        },
+    ];
+
+    return (
+        <div>
+            <ChangePasswordModal commonAxios={commonAxios} messageApi={messageApi} open={changePasswordModalOpen}
+                                 setOpen={setChangePasswordModalOpen} closable={true}/>
+            <Layout.Header
+                style={{
+                    height: '64px',
+                    background: colorBgBase
+                }}
+            >
+                <div
+                    style={{
+                        display: 'flex',
+                        justifyContent: 'space-between',
+                        alignItems: 'center',
+                        height: '100%'
+                    }}
+                >
+                    <a href={'/overview'} style={{height: '100%', color: 'black'}}>
+                        <Flex justify={'flex-start'} style={{height: '100%'}} align={"center"}>
+
+                            <img style={{width: 'auto', height: '80%'}} src={'/hrbnu_logo.png'}
+                                 alt={'哈师大logo'}/>
+                            <h2 style={{marginLeft: '20px'}}>工作量精算管家</h2>
+
+                        </Flex>
+                    </a>
+                    <Flex justify={"flex-start"} align={"center"} gap={"large"}>
+                        <a hidden>
+                            <Badge count={0}>
+                                <MailOutlined style={{fontSize: '15px'}}/>
+                            </Badge>
+                        </a>
+                        <Dropdown
+                            menu={{
+                                items: accountItems,
+                            }}
+                        >
+                            <Button type={'text'}>
+                                <Space>
+                                    <UserOutlined/>
+                                    {profile.staffNumber}{profile.name}
+                                    <DownOutlined/>
+                                </Space>
+                            </Button>
+                        </Dropdown>
+                    </Flex>
+                </div>
+            </Layout.Header>
+        </div>
+    );
+}
+
+export default LayoutHeader;