【无标题】1

import React, { useState } from 'react';
import 'antd/dist/antd.css';
import './index.css';
import {
  AppstoreOutlined,
  ContainerOutlined,
  DesktopOutlined,
  MailOutlined,
  MenuFoldOutlined,
  MenuUnfoldOutlined,
  PieChartOutlined,
  UserOutlined,
} from '@ant-design/icons';
import { Button, Menu } from 'antd';

function getItem(label, key, icon, children, type) {
  return {
    key,
    icon,
    children,
    label,
    type,
  };
}
const items = [
  getItem('Option 1', '1', <PieChartOutlined />),
  getItem('Option 2', '2', <DesktopOutlined />),
  getItem('Option 3', '3', <ContainerOutlined />),
  getItem('Navigation One', 'sub1', <MailOutlined />, [
    getItem('Option 5', '5'),
    getItem('Option 6', '6'),
    getItem('Option 7', '7'),
    getItem('Option 8', '8'),
  ]),
  getItem('Navigation Two', 'sub2', <AppstoreOutlined />, [
    getItem('Option 9', '9'),
    getItem('Option 10', '10'),
    getItem('Submenu', 'sub3', null, [getItem('Option 11', '11'), getItem('Option 12', '12')]),
  ]),
];
const menuList = [{
  "id": 1,
  "label": "首页",
  "key": "/home",
  "pagepermisson": 1,
  "grade": 1,
  "children": []
},
{
  "id": 2,
  "label": "用户管理",
  "key": "/user-manage",
  "pagepermisson": 1,
  "grade": 1,
  "children": [
    {
      "id": 3,
      "label": "添加用户",
      "rightId": 2,
      "key": "/user-manage/add",
      "grade": 2
    },
    {
      "id": 4,
      "label": "删除用户",
      "rightId": 2,
      "key": "/user-manage/delete",
      "grade": 2
    },
    {
      "id": 5,
      "label": "修改用户",
      "rightId": 2,
      "key": "/user-manage/update",
      "grade": 2
    },
    {
      "id": 6,
      "label": "用户列表",
      "rightId": 2,
      "key": "/user-manage/list",
      "pagepermisson": 1,
      "grade": 2,
      "children": [
        {"id": 64,
        "label": "用户列表1",
        "rightId": 6,
        "key": "/user-manage/list1",}
      ]
    }
  ]
},
{
  "id": 7,
  "label": "权限管理",
  "key": "/right-manage",
  "pagepermisson": 1,
  "grade": 1,
  "children": [
    {
      "id": 8,
      "label": "角色列表",
      "rightId": 7,
      "key": "/right-manage/role/list",
      "pagepermisson": 1,
      "grade": 2
    },
    {
      "id": 9,
      "label": "权限列表",
      "rightId": 7,
      "key": "/right-manage/right/list",
      "pagepermisson": 1,
      "grade": 2
    },
    {
      "id": 10,
      "label": "修改角色",
      "rightId": 7,
      "key": "/right-manage/role/update",
      "grade": 2
    },
    {
      "id": 11,
      "label": "删除角色",
      "rightId": 7,
      "key": "/right-manage/role/delete",
      "grade": 2
    },
    {
      "id": 12,
      "label": "修改权限",
      "rightId": 7,
      "key": "/right-manage/right/update",
      "grade": 2
    },
    {
      "id": 13,
      "label": "删除权限",
      "rightId": 7,
      "key": "/right-manage/right/delete",
      "grade": 2
    }
  ]
},
{
  "id": 14,
  "label": "新闻管理",
  "key": "/news-manage",
  "pagepermisson": 1,
  "grade": 1,
  "children": [
    {
      "id": 15,
      "label": "新闻列表",
      "rightId": 14,
      "key": "/news-manage/list",
      "grade": 2
    },
    {
      "id": 16,
      "label": "撰写新闻",
      "rightId": 14,
      "key": "/news-manage/add",
      "grade": 2,
      "pagepermisson": 1
    },
    {
      "id": 17,
      "label": "新闻更新",
      "rightId": 14,
      "key": "/news-manage/update/:id",
      "grade": 2,
      "routepermisson": 1
    },
    {
      "id": 18,
      "label": "新闻预览",
      "rightId": 14,
      "key": "/news-manage/preview/:id",
      "grade": 2,
      "routepermisson": 1
    },
    {
      "id": 19,
      "label": "草稿箱",
      "rightId": 14,
      "key": "/news-manage/draft",
      "pagepermisson": 1,
      "grade": 2
    },
    {
      "id": 20,
      "label": "新闻分类",
      "rightId": 14,
      "key": "/news-manage/category",
      "pagepermisson": 1,
      "grade": 2
    }
  ]
},
{
  "id": 21,
  "label": "审核管理",
  "key": "/audit-manage",
  "pagepermisson": 1,
  "grade": 1,
  "children": [
    {
      "id": 22,
      "label": "审核新闻",
      "rightId": 21,
      "key": "/audit-manage/audit",
      "pagepermisson": 1,
      "grade": 2
    },
    {
      "id": 23,
      "label": "审核列表",
      "rightId": 21,
      "key": "/audit-manage/list",
      "pagepermisson": 1,
      "grade": 2
    }
  ]
},
{
  "id": 24,
  "label": "发布管理",
  "key": "/publish-manage",
  "pagepermisson": 1,
  "grade": 1,
  "children": [
    {
      "id": 25,
      "label": "待发布",
      "rightId": 24,
      "key": "/publish-manage/unpublished",
      "pagepermisson": 1,
      "grade": 2
    },
    {
      "id": 26,
      "label": "已发布",
      "rightId": 24,
      "key": "/publish-manage/published",
      "pagepermisson": 1,
      "grade": 2
    },
    {
      "id": 27,
      "label": "已下线",
      "rightId": 24,
      "key": "/publish-manage/sunset",
      "pagepermisson": 1,
      "grade": 2
    }
  ]
}];
const renderMenu = (menuList) => {
  const items = [];
  menuList?.forEach((item) => {
    const child = [];
    if (item.children?.length > 0) {
      item.children.forEach((itemchildren) => {
          child.push(getItem((
            <i style={{ fontStyle: 'normal' }}>
              {itemchildren.label}
            </i>
          ), itemchildren.key,))
      })
      items.push(getItem((
        <i style={{ fontStyle: 'normal' }}>
          {item.label}
        </i>
      ), item.key, <UserOutlined />, child))
    } else {
      items.push(getItem((
        <i style={{ fontStyle: 'normal' }}>
          {item.label}
        </i>
      ), item.key, <UserOutlined />))
    }
  })
  return items
};
const App = () => {
  const [collapsed, setCollapsed] = useState(false);
  const toggleCollapsed = () => {
    setCollapsed(!collapsed);
  };
  return (
    <div
      style={{
        width: 256,
      }}
    >
      <Button
        type="primary"
        onClick={toggleCollapsed}
        style={{
          marginBottom: 16,
        }}
      >
        {collapsed ? <MenuUnfoldOutlined /> : <MenuFoldOutlined />}
      </Button>
      <Menu
        defaultSelectedKeys={['1']}
        defaultOpenKeys={['sub1']}
        mode="inline"
        theme="dark"
        inlineCollapsed={collapsed}
        items={renderMenu(menuList)}
      />
    </div>
  );
};
export default App;