system-copyright-react/src/layout/head/Head.tsx

import './head.css'
import BalanceHead from '../../components/balance/BalanceHead.tsx';
import RechargeHead from '../../components/recharge/RechargeHead.tsx';
import { Dropdown, MenuProps, message, Modal, Space, Spin } from "antd";
import { DownOutlined, UserOutlined, KeyOutlined, LogoutOutlined, AccountBookOutlined } from "@ant-design/icons";
import { useContext, useEffect, useState } from "react";
import { put } from "../../util/AjaxUtils.ts";
import { GlobalContext, GlobalDispatchContext, reloadUser } from "../../context/GlobalContext.ts";
import UserEdit from "../../components/user/UserEdit.tsx";
import PasswordChange from "../../components/password/PasswordChange.tsx";
// import headRightBg from '../../assets/head-right-bg.png';
import InvoiceList from "../../components/invoice/InvoiceList.tsx";
import logoImg from '../../static/head/logo.png'
import userImg from '../../static/homeimg/userimg.png'
import { reMenuActive } from '../../util/cache';

export default function Head() {
    const globalContext = useContext(GlobalContext);
    const globalDispatchContext = useContext(GlobalDispatchContext);
    const [messageApi, contextHolder] = message.useMessage();
    const [modal, modalHolder] = Modal.useModal();
    const [loading, setLoading] = useState<boolean>(false);
    const [isSelfModalOpen, setIsSelfModalOpen] = useState(false);
    const [isPasswordModalOpen, setIsPasswordModalOpen] = useState(false);
    const [isInvoiceModalOpen, setIsInvoiceModalOpen] = useState(false);

    useEffect(() => {
        reloadUser(messageApi, globalDispatchContext).then((data) => {
            if (!data.hasUserInfo) {
                setIsSelfModalOpen(true);
            }
        });
    }, [globalContext.user]);

    const items: MenuProps['items'] = [
        {
            key: 'userinfo',
            label: (
                <div className="dropdown-item">
                    <UserOutlined />
                    <span className="title">个人信息</span>
                </div>
            ),
            onClick: () => {
                setIsSelfModalOpen(true);
            }
        },
        {
            key: 'changePass',
            label: (
                <div className="dropdown-item">
                    <KeyOutlined />
                    <span className="title">修改密码</span>
                </div>
            ),
            onClick: () => {
                setIsPasswordModalOpen(true);
            }
        },
        {
            key: 'invoice',
            label: (
                <div className="dropdown-item">
                    <AccountBookOutlined />
                    <span className="title">发票管理</span>
                </div>
            ),
            onClick: () => {
                setIsInvoiceModalOpen(true);
            }
        },
        {
            key: 'logout',
            label: (
                <div className="dropdown-item">
                    <LogoutOutlined />
                    <span className="title">退出系统</span>
                </div>
            ),
            onClick: () => {
                reMenuActive()

                window.location.href = '/copyright/logout'
            }
        },
    ]

    return (
        <>
            <div className="head">
                <div className="center">
                    <div className="left">
                        {/* <span className="sys-title">AI引擎软著</span>
                        <Divider type="vertical"/>
                        <span className="sys-title-sub">软件著作权一站式服务平台</span> */}
                        <img src={logoImg} alt="" />
                    </div>
                    {/* <div className="right" style={{backgroundImage: `url(${headRightBg})`}}> */}
                    <div className="right">
                        <BalanceHead />
                        <RechargeHead />
                        {/*<MessageHead/>*/}
                        <div style={{ display: 'flex', alignContent: 'center', padding: '0 10px', cursor: 'pointer' }}>
                            <div style={{ width: '50px', height: '50px', borderRadius: '25px',  marginLeft: '20px', marginRight: '10px' }} >
                                <img src={userImg} alt=""  width={50} height={50}/>
                            </div>
                            <Dropdown menu={{
                                items: items
                            }}>
                                <Space>
                                    {/* 您好：{globalContext.user.nickname} */}
                                    个人中心
                                    <DownOutlined />
                                </Space>
                            </Dropdown>
                        </div>
                    </div>
                </div>
            </div>
            <Modal open={isSelfModalOpen}
                title="个人信息"
                footer={false}
                onCancel={() => {
                    if (!globalContext.user.hasUserInfo) {
                        messageApi.info('请完善个人信息');
                        return;
                    }
                    setIsSelfModalOpen(false)
                }}>
                <UserEdit handleConfirm={(data) => {
                    modal.confirm({
                        title: '提示',
                        content: '确定保存吗？',
                        okText: '确认',
                        cancelText: '取消',
                        okButtonProps: {
                            style: {
                                backgroundColor: 'var(--color-primary)'
                            }
                        },
                        onOk: () => {
                            setIsSelfModalOpen(false);
                            put({
                                messageApi,
                                url: '/api/user-info/update-self',
                                body: data,
                                onBefore() {
                                    setLoading(true);
                                },
                                onSuccess() {
                                    messageApi.success('修改成功');
                                },
                                onFinally() {
                                    setLoading(false);
                                }
                            })
                        }
                    });
                }} />
            </Modal>
            <Modal open={isPasswordModalOpen}
                title="修改密码"
                footer={false}
                onCancel={() => {
                    setIsPasswordModalOpen(false)
                }}>
                <PasswordChange handleConfirm={(data) => {
                    modal.confirm({
                        title: '提示',
                        content: '确定修改吗？',
                        okText: '确认',
                        cancelText: '取消',
                        okButtonProps: {
                            style: {
                                backgroundColor: 'var(--color-primary)'
                            }
                        },
                        onOk: () => {
                            put({
                                messageApi,
                                url: '/api/user/update-password',
                                body: data,
                                onBefore() {
                                    setLoading(true);
                                },
                                onSuccess() {
                                    setIsPasswordModalOpen(false);
                                    messageApi.success('修改成功，重新登录生效');
                                },
                                onFinally() {
                                    setLoading(false);
                                }
                            })
                        }
                    });
                }} />
            </Modal>
            <Modal open={isInvoiceModalOpen}
                title="发票管理"
                width={1100}
                footer={false}
                onCancel={() => setIsInvoiceModalOpen(false)}
            >
                <InvoiceList />
            </Modal>
            <Spin tip="正在提交..." spinning={loading} fullscreen />
            {contextHolder}
            {modalHolder}
        </>
    )
}