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

EASYOPS_youwei · · 535 次点击 · · 开始浏览    

 

优维低代码技术专栏,是一个全新的、技术为主的专栏,由优维技术委员会成员执笔,基于优维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 后就可以看到合并后的菜单:

 

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


有疑问加站长微信联系(非本文作者)

入群交流(和以上内容无关):加入Go大咖交流群,或添加微信:liuxiaoyan-s 备注:入群;或加QQ群:692541889

535 次点击  
加入收藏 微博
添加一条新回复 (您需要 登录 后才能回复 没有账号 ?)
  • 请尽量让自己的回复能够对别人有帮助
  • 支持 Markdown 格式, **粗体**、~~删除线~~、`单行代码`
  • 支持 @ 本站用户;支持表情(输入 : 提示),见 Emoji cheat sheet
  • 图片支持拖拽、截图粘贴等方式上传