优维低代码：编排详解菜单配置

Posted 2022-05-25 优维科技EasyOps

优维低代码技术专栏，是一个全新的、技术为主的专栏，由优维技术委员会成员执笔，基于优维7年低代码技术研发及运维成果，主要介绍低代码相关的技术原理及架构逻辑，目的是给广大运维人提供一个技术交流与学习的平台。

---

接下来我们将继续为大家详细讲解编排详解中的菜单配置。

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

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

# 在路由定义中使用 menu

因为第 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)

# 参数注入

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

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

# 分组菜单

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

• 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 后就可以看到合并后的菜单：

通过以上分享，相信你已经了解了菜单配置了。