rancherui 菜单部分源码解析

tech2022-09-27  107

由于菜单是在登录授权后的主页面一直存在,所有在 app/authenticated 模块下找

打开app/authenticated/template.hbs

app/authenticated/template.hbs 源码地址

有一个page-header组件在顶部,这个组件就是顶部菜单的内容

 

 

app/components/page-header/template.hbs 源码地址

 

所有逻辑都写在 app/components/page-header/component.js

 

重要的变量解释

pageScope  表明当前页面是什么作用于下,分为 global (全局), cluster(集群), project(项目) 一级菜单与二级菜单都会根据此变量改变。

 

updateNavTree 函数是用于处理菜单逻辑的函数

 

根据getTree() 找到  navigation-tree.js 菜单数据的相关处理方法 

 

全局搜索 bulkAdd 方法 找到 /app/instance-initializers/nav.js  此文件定义了所有的菜单数据。 

子菜单示例数据

{ scope: 'global', id: 'global-catalogs', localizedLabel: 'nav.admin.catalogs', route: 'global-admin.catalog', resource: ['catalog'], resourceScope: 'global', }

 

主菜单示例数据

{ scope: 'project', id: 'infra', localizedLabel: 'nav.infra.tab', ctx: [getProjectId], submenu: [] }

 

菜单数据的部分注释。摘自源码,可能不是最新的。 

/* Tree item options { id: 'str' (identifier to allow removal... should be unique) localizedLabel: 'i18n key', (or function that returns one) label: 'Displayed unlocalized label', (or function that returns string) icon: 'icon icon-something', condition: function() { // return true if this item should be displayed // condition can depend on anything page-header/component.js shouldUpdateNavTree() depends on } target: '_blank', (for url only) route: 'target.route.path', // as in link-to ctx: ['values', 'asContextToRoute', orFunctionThatReturnsValue, anotherFunction] qp: {a: 'hello', b: 'world'], moreCurrentWhen: ['additional.routes','for.current-when'], submenu: [ // Another tree item (only one level of submenu supported, no arbitrary depth nesting) {...}, {...} ] }, */

 

 

 

 

拿我格子衫来 认证博客专家 拿我格子衫来 范马勇次郎 琦玉君 积土成山,风雨兴焉;积水成渊,蛟龙生焉;积善成德,而神明自得,圣心备焉。故不积跬步,无以至千里;不积小流,无以成江海。骐骥一跃,不能十步;驽马十驾,功在不舍。锲而舍之,朽木不折;锲而不舍,金石可镂。蚓无爪牙之利,筋骨之强,上食埃土,下饮黄泉,用心一也。蟹六跪而二螯,非蛇鳝之穴无可寄托者,用心躁也。
最新回复(0)