rancher/ui 菜单部分源码解析

骑猪看日落 2022-12-03 09:42 163阅读 0赞

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

打开**app/authenticated/template.hbs**

[app/authenticated/template.hbs 源码地址][app_authenticated_template.hbs]

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

![20200903094524440.png][]

[app/components/page-header/template.hbs 源码地址][app_components_page-header_template.hbs]

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

重要的变量解释

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

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

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

全局搜索 bulkAdd 方法 找到 [/app/instance-initializers/nav.js][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)
          {...},
          {...}
        ]
      },
    */

[app_authenticated_template.hbs]: https://github.com/rancher/ui/blob/master/app/authenticated/template.hbs
[20200903094524440.png]: /images/20221123/7bc921d5c32d4d78a7a757ac6d2916c8.png
[app_components_page-header_template.hbs]: https://github.com/rancher/ui/blob/master/app/components/page-header/template.hbs
[app_components_page-header_component.js]: https://github.com/rancher/ui/blob/master/app/components/page-header/component.js
[navigation-tree.js]: https://github.com/rancher/ui/blob/master/lib/shared/addon/utils/navigation-tree.js
[app_instance-initializers_nav.js]: https://github.com/rancher/ui/blob/master/app/instance-initializers/nav.js