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

56 lines
2.0 KiB
TypeScript
Raw Normal View History

2024-03-12 18:53:51 +08:00
import './menu-with-top-button.css'
2024-04-29 17:22:26 +08:00
import { IMenuWithTopButton } from "../../interfaces/menu/IMenuWithTopButton.ts";
import objImg from '../../static/left/obj.png'
import newImg from '../../static/left/new.png'
2024-05-07 17:00:32 +08:00
import { useNavigate } from 'react-router-dom';
2024-04-29 17:22:26 +08:00
import {
RightOutlined
} from '@ant-design/icons';
2024-03-12 18:53:51 +08:00
export default function MenuWithTopButton(props: IMenuWithTopButton) {
2024-05-07 17:00:32 +08:00
const navugate = useNavigate()
2024-04-29 17:22:26 +08:00
2024-03-12 18:53:51 +08:00
const list = props.list.map((item, index) => (
2024-04-28 11:04:03 +08:00
// 创建项目下三个选项
2024-04-01 20:39:22 +08:00
<li className={item.active ? 'active' : ''} key={item.id} onClick={(e) => {
2024-03-12 18:53:51 +08:00
props.handleListItem(e, index, item);
2024-05-07 17:00:32 +08:00
navugate('/home')
2024-03-12 18:53:51 +08:00
}}>
2024-04-29 17:22:26 +08:00
{item.icon ? (<img src={item.icon} className="menu-icon" alt="加载失败" />) : <></>}
2024-03-12 18:53:51 +08:00
<span className="menu-name">{item.name}</span>
2024-04-29 17:22:26 +08:00
<span className='topIcon'><RightOutlined /></span>
2024-03-12 18:53:51 +08:00
</li>
));
return (
<div className="menu-with-top-button">
2024-04-28 11:04:03 +08:00
{/* button 是三个黄色按钮 */}
2024-04-29 17:22:26 +08:00
<div className='top'>
<div className='top-lift'>
<img src={objImg} alt="" />
<div> {props.button.name}</div>
</div>
<div className='top-right' onClick={(e) => {
props.button.handle(e);
2024-05-07 17:00:32 +08:00
// 当点击创建时其他按钮默认为不被选中
// props.list.forEach(item => item.active = false);
// console.log(props.list);
2024-04-29 17:22:26 +08:00
}}>
<img src={newImg} alt="" />
<div></div>
</div>
</div>
{/* <button className="btn btn-orange top-button"
2024-03-12 18:53:51 +08:00
onClick={(e) => {
props.button.handle(e);
2024-04-29 17:22:26 +08:00
console.log(e);
2024-03-12 18:53:51 +08:00
}}
>
{props.button.name}
2024-04-29 17:22:26 +08:00
</button> */}
2024-03-12 18:53:51 +08:00
<ul>{list}</ul>
</div>
)
}