rancher/ui 菜单部分源码解析

拿我格子衫来

发布于 2022-01-24 16:36:31

4000

文章被收录于专栏：TopFETopFE

由于菜单是在登录授权后的主页面一直存在，所有在 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)
      {...},
      {...}
    ]
  },
*/

本文参与腾讯云自媒体同步曝光计划，分享自作者个人站点/博客。

如有侵权请联系 cloudcommunity@tencent.com 删除

html