Skip to content

Latest commit

 

History

History
110 lines (91 loc) · 2.6 KB

3-12-Menu-introduction.md

File metadata and controls

110 lines (91 loc) · 2.6 KB

简体中文 | English

用途

  • 点击后直接跳转到相应页面

  • 配置控制台的左侧菜单项

    控制台

  • 配置管理平台的左侧菜单项

    管理平台

  • 支持一级菜单带图标

  • 支持二级菜单展开

  • 支持路由变更后菜单选中项自动切换

  • 支持右侧内容中面包屑的自动处理

代码位置

  • 控制台的菜单配置src/layouts/menu.jsx
  • 管理平台的菜单配置src/layouts/admin-menu.jsx

如何使用

  • 控制台与管理平台的菜单配置，采用相同的配置结构
  • 返回一个 renderMenu 函数，函数返回一个配置数组

一级菜单的配置

  • path

    • 一级菜单对应的路由

  • name

    • 一级菜单对应的名称
    • 菜单项中显示的名称
    • 面包屑中一级菜单对应的名称

  • key

    • 一级菜单对应的 ID 值
    • 要求具有唯一性

  • icon

    • 一级菜单对应的图标
    • 菜单完全展开时，显示图标与名称
    • 菜单折叠时，只显示图标

  • hasBreadcrumb

    • 页面是否展示面包屑
    • 默认展示面包屑
    • 以首页为例，hasBreadcrumb: false

  • hasChildren

    • 一级菜单是否含有子菜单
    • 默认值为true
    • 一级菜单可以不包含二级菜单，以首页为例
    {
  path: '/base/overview',
  name: t('Home'),
  key: '/home',
  icon: <HomeOutlined />,
  hasBreadcrumb: false,
  hasChildren: false,
}

    • 一级菜单默认包含二级菜单，以计算为例

      {
    path: '/compute',
    name: t('Compute'),
    key: '/compute',
    icon: <DesktopOutlined />,
    children: [...]
  }

二级菜单的配置

  • 二级菜单配置在一级菜单的children中

  • 详情页、创建页面等不需要展示在菜单项中的页面，配置在二级菜单的children中

  • 以云主机类型为例

    {
    path: '/compute/flavor',
    name: t('Flavor'),
    key: '/compute/flavor',
    level: 1,
    children: [
      {
        path: /^\/compute\/flavor\/detail\/.[^/]+$/,
        name: t('Flavor Detail'),
        key: 'flavor-detail',
        level: 2,
      },
    ],
  },

  • path

    • 菜单对应的路由

  • name

    • 菜单对应的名称
    • 菜单项中显示的名称
    • 面包屑中菜单对应的名称

  • key

    • 菜单对应的 ID 值
    • 要求具有唯一性

  • level

    • 二级菜单的level=1
    • 二级菜单的children中的菜单配置level=2