system-copyright-react/src/components/menu/MenuWithTopButton.tsx

import './menu-with-top-button.css'
import { IMenuListItem, IMenuWithTopButton } from "../../interfaces/menu/IMenuWithTopButton.ts";
import objImg from '../../static/left/obj.png'
import newImg from '../../static/left/new.png'
import refunimg from '../../static/refun.png'
import correctionImg from '../../static/correction.png'
import { useNavigate } from 'react-router-dom';
import {
    RightOutlined
} from '@ant-design/icons';
import { getMenuActive, setMenuActive } from './../../util/cache'
import { useEffect, useState } from 'react'
export default function MenuWithTopButton(props: IMenuWithTopButton) {
    const navugate = useNavigate()
    const [menuItem, setMenuItem] = useState<IMenuListItem[]>([])
    useEffect(() => {
        setMenuItem(
            props.list.map((m) => {
                if (getMenuActive()) {
                    if (getMenuActive() == m.id) {
                        m['active'] = true
                    } else {
                        m['active'] = false
                    }
                }
                return m
            })
        )
    }, [getMenuActive()])

    const list = menuItem.map((item, index) => (
        // 创建项目下三个选项
        <li className={item.active ? 'active' : ''} key={item.id} onClick={(e) => {
            props.handleListItem(e, index, item);
            setMenuActive(item.id)
            if (props.button.name == '项目') {
                // props.enableBelongpeople()
                navugate('/home', {
                    state: {
                        keyword: props.keywords,
                        name: props.type,
                        chargeAdditionals: props.chargeAdditionals,
                        tagDataId: props.tagDataId,
                        authorId: props.authorId
                    }
                })
            }
            if (props.button.name == '退款') {
                // props.disableBelongpeople()
                navugate('/refun', {
                    state: {
                        type: item.id
                    }
                })
            }
            if (props.button.name == '补正') {
                // props.disableBelongpeople()
                navugate('/correction', {
                    state: {
                        type: item.id == 'Correction-PENDING' ? 'PENDING' : item.id == 'Correction-APPROVED' ? 'APPROVED' : item.id == 'Correction-REJECTED' ? 'REJECTED' : item.id == 'Correction-CANCELED' ? 'CANCELED' : ''
                    }
                })
            }

        }}>

            {item.icon ? (<img src={item.icon} className="menu-icon" alt="加载失败" />) : <></>}
            <span className="menu-name">{item.name}</span>
            <span className='topIcon'><RightOutlined /></span>
        </li>
    ));

    return (
        <div className="menu-with-top-button">
            {/* button 是三个黄色按钮 */}
            <div className='top'>
                <div className='top-lift'>
                    <img src={objImg} alt="" style={{ display: props.button.name == '项目' ? 'block' : 'none' }} />
                    <img src={refunimg} alt="" style={{ display: props.button.name == '退款' ? 'block' : 'none', width: 16 }} />
                    <img src={correctionImg} alt="" style={{ display: props.button.name == '补正' ? 'block' : 'none', width: 16 }} />

                    <div> {props.button.name}</div>
                </div>
                <div className='top-right' onClick={(e) => {
                    props.button.handle(e);
                    // 当点击创建时其他按钮默认为不被选中
                    // props.list.forEach(item => item.active = false);
                    // console.log(props.list);
                    // setMenuActive('ALL')
                    if (props.button.name == '项目') {
                        // setMenuActive('ALL')

                    }
                    if (props.button.name == '退款' ){
                        setMenuActive('PENDING')
                        navugate('/refun', {
                            state: {
                                type: 'PENDING'
                            }
                        })

                    }
                    if (props.button.name == '补正' ){
                        setMenuActive('Correction-PENDING')
                        navugate('/correction', {
                            state: {
                                type: 'PENDING'
                            }
                        })
                    }
                }}>
                    {/* refunimg */}
                    <img src={newImg} alt="" />
                    <div style={{ display: props.button.name == '项目' ? 'block' : 'none' }}>创建</div>
                    <div style={{ display: props.button.name == '退款' ? 'block' : 'none' }}>申请</div>
                    <div style={{ display: props.button.name == '补正' ? 'block' : 'none' }}>申请</div>
                </div>
            </div>
            {/* <button className="btn btn-orange top-button"
                    onClick={(e) => {
                        props.button.handle(e);
                        console.log(e);
                        
                    }}
            >
                {props.button.name}
            </button> */}
            <ul style={{}}>{list}</ul>
        </div>
    )
}