rancher/ui 菜单部分源码解析_rancher的icon-CSDN博客

本文链接：https://blog.csdn.net/github_35631540/article/details/108376065

本文深入解析了一款应用程序中导航菜单的实现逻辑，包括菜单数据结构、处理函数及如何根据用户权限动态更新菜单项。通过分析源代码，揭示了菜单项的条件显示、路由配置和资源权限管理。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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