dh-pole/src/layout/components/SiderBlock.tsx

import React from 'react';
import {Layout, Menu} from "antd";
import {
  BorderBottomOutlined,
  HeatMapOutlined, MacCommandOutlined, OneToOneOutlined, SlidersOutlined,
  UploadOutlined,
  UserOutlined,
  VideoCameraOutlined, WindowsOutlined
} from "@ant-design/icons";
import CollapsedStore from "../../store/CollapsedStore.ts";
import {observer} from "mobx-react-lite";
import {useLocation, useNavigate} from "react-router-dom";
import {MyItemType} from "../../pages/UniService/type.ts";

function SiderBlock() {
  const { Sider} = Layout;
  const navigate = useNavigate();
  const menuItems:MyItemType[] = [
    {
      key: '1',
      icon: <UserOutlined />,
      label: '统一服务',
      to:'/'
    },
    {
      key: '2',
      icon: <VideoCameraOutlined />,
      label: '报警联动',
      to:'/alarm'
    },
    {
      key: '3',
      icon: <UploadOutlined />,
      label: '设备接入',
      to:'/devicesInsert'
    },
    {
      key: '4',
      icon: <BorderBottomOutlined />,
      label: '阈值修改',
      to:'/threshold'
    },
    {
      key: '5',
      icon: <HeatMapOutlined />,
      label: '报警查看处理',
      to:'/CheckProcess'
    },
    {
      key: '6',
      icon: <SlidersOutlined />,
      label: '参数监测',
      to:'/monitor'
    },
    {
      key: '7',
      icon: <WindowsOutlined />,
      label: '远程控制',
      to:'/remoteControl'
    },
    {
      key: '8',
      icon: <MacCommandOutlined />,
      label: '远程自检',
      to:'/remoteCheck'
    },
    {
      key: '9',
      icon: <OneToOneOutlined />,
      label: '定时任务',
      to:'/timingTask'
    },
    {
      key: '10',
      icon: <VideoCameraOutlined />,
      label: '历史统计',
      to:'/history'
    },
  ];
  const selectedKeys = ['1'];
  const {pathname} = useLocation();
  const currentMenu = menuItems.find(item => item.to == pathname);
  if (currentMenu) {
    selectedKeys[0] = currentMenu.key;
  }
  const onMenuSelect = ({key}) => {
    const item:MyItemType | undefined= menuItems.find(item => item.key === key);
    if (item) {
      if(item.to){
        navigate(item.to)
      }
    }
  };
  return (
    <>
      <Sider trigger={null} collapsible collapsed={CollapsedStore.collapsed}>
        <div className={'text-white text-center p-20px font-900 text-18px bg-gray bg-op-80 m-20px rounded-lg'}>
          {!CollapsedStore.collapsed?
            (<div className={'flex flex-col items-center'}>
              <div className={'w-50px h-50px m-auto'}>
                <img className={'w-full h-full'} src={'./src/assets/灯杆.png'}/>
              </div>
              <span className={'line-clamp-1'}>智慧灯杆系统</span>
            </div>):
            <img className={'w-30px h-20px translate-x--13px'} src={'./src/assets/灯杆.png'}/>}
        </div>
        <Menu
          theme="dark"
          mode="inline"
          defaultSelectedKeys={selectedKeys}
          onSelect={onMenuSelect}
          items={menuItems.map(item => ({
            key: item.key,
            icon: item.icon,
            label: item.label,
          }))}
        />
      </Sider>
    </>
  );
}

export default observer(SiderBlock);