优维低代码技术专栏,是一个全新的、技术为主的专栏,由优维技术委员会成员执笔,基于优维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 后就可以看到合并后的菜单:
通过以上分享,相信你已经了解了菜单配置了。
有疑问加站长微信联系(非本文作者)