Skip to main content
Version: 2.x

菜单配置

为 Micro App 配置菜单主要有两种方式：

  • 在路由定义中使用 menu 配置菜单（[Storyboard.routes.menu]）；
  • 在 Next Builder 上配置菜单（并在路由菜单定义中使用 menuId / subMenuId 引用）。

在路由定义中使用 menu​

"menu": {
  "sidebarMenu": {
    "title": "APP 管理",
    "link": "${APP.homepage}",
    "icon": {
      "lib": "easyops",
      "category": "app",
      "icon": "mysql-resource"
    },
    "defaultCollapsed": false,
    "menuItems": [
      {
        "icon": {
          "lib": "fa",
          "icon": "info-circle"
        },
        "text": "基本信息",
        "to": "${APP.homepage}/${instanceId}/detail"
      },
      {
        "icon": {
          "lib": "fa",
          "icon": "sitemap"
        },
        "text": "集群实例",
        "to": "${APP.homepage}/${instanceId}/nodes",
        "exact": true
      }
    ]
  }
}

因为第 1 个路由的menu配置比较简单，故这里抽取第 2 个路由的配置来做讲解更合适

  • sidebarMenu：左侧菜单的配置，这里主要注意几个配置：
    • title左侧菜单一级标题
    • link左侧菜单一级链接
    • icon的配置，详细可见icon 配置说明。
    • defaultCollapsed表示初始进入页面是否收起左侧菜单，对于微应用首页，这个配置一般为true
    • menuItems：有顺序的子菜单列表
      • icon：如上所说
      • text：注意这里是text，而上面是title，不要写错
      • to：链接地址，注意这里是to，而上面是link。注意，如果这里需要直接挂载外链地址，则用href。
      • exact：菜单高亮逻辑，是否精确匹配全路径。这里要注意，有些页面是有子页面的，在子页面的时候，菜单也需要高亮，一个典型的例子是详情页面(/demo/xxx/detail)里面嵌了编辑页面(/demo/xxx/detail/edit)

参数注入​

{
  "icon": {
    "lib": "fa",
    "icon": "info-circle"
  },
  "text": "基本信息",
  "to": "${APP.homepage}/${instanceId}/detail"
}

注意to的写法，里面用到了${APP.homepage}和${instanceId}

  • ${APP.homepage}：表示使用 app 的 homepage 参数
  • ${instanceId}：表示使用该页面路由的instanceId参数，当前页面路由是"path": "${APP.homepage}/:instanceId"

分组菜单​

"menuItems": [
  {
    "icon": {
      "lib": "fa",
      "icon": "info-circle"
    },
    "text": "基本信息",
    "to": "${APP.homepage}/${instanceId}/detail"
  },
  {
    "icon": {
      "lib": "fa",
      "icon": "sitemap"
    },
    "text": "集群实例",
    "to": "${APP.homepage}/${instanceId}/nodes",
    "exact": true
  },
  {
    "type": "group",
    "title": "我是一个分组菜单",
    "items": [
      {
        "icon": {
          "lib": "fa",
          "icon": "sitemap"
        },
        "text": "aaa",
        "to": "/aaa"
      },
      {
        "icon": {
          "lib": "fa",
          "icon": "sitemap"
        },
        "text": "bbb",
        "to": "/bb",
      }
    ]
  }
]

我们基于上面的示例再加上分组菜单

  • type: type的默认值为default，故之前没写的时候，其实都是default，这里设置为group表示是一个分组菜单，你还可以设置为subMenu表示是一个分组折叠菜单
  • title：注意type设置为group或subMenu的时候，设置此分组标题的时候，是设置title而不是text
  • items：子菜单列表，他的配置跟之前讲解一样。

注意，菜单是可以嵌套的，也即是说你可以分组里面再嵌套分组，可以尝试下看看效果。

更多配置见路由菜单定义。

在 Next Builder 中配置菜单​

Next Builder 中的菜单管理提供了在界面上配置菜单及二级菜单的能力，同时可以方便的在多个 Micro App 之间共享或扩展菜单。

在 Next Builder > Resources > Menus 里可以配置多个菜单，每个菜单可以有最多两级菜单项。菜单和菜单项的配置内容和上一节「在路由定义中使用 menu」中的内容大体上一致。

菜单配置好后，就可以在 Storyboard 的路由菜单定义中通过 menuId / subMenuId 引用它。

在多个 Micro App 之间共享或扩展菜单​

可以在任意一个 Micro App 中引用其它 Micro App 定义的菜单，将 menuId / subMenuId 设置为指定的菜单 ID 即可。

另外，在不同的 Micro App 中可以定义同一个菜单 ID，其中一个 Micro App 的菜单为 main，其它的为 inject，这时可以理解为其它 Micro App 为 Main Micro App 扩展了菜单项。

例如，在仓库管理这个 Micro App 中，定义了一个二级菜单，包含“文件”和“设置”两个菜单项。在另一个 Micro App 部署管理中，可以为前述二级菜单扩展一个菜单项“Deploy”，这时，我们可以也定义一个相同 ID 的菜单，并选择 Inject 类型，为它添加菜单项“Deploy”，然后在 Build & push 后就可以看到合并后的菜单：

Screen shot of menu example