对接导航栏¶
以容器管理(开发代号 kpanda
)为例,对接到导航栏。
对接后的预期效果如图:
对接方法¶
参照以下步骤对接 GProduct:
-
通过 GProductNavigator CR 将容器管理的各功能项注册到导航栏菜单。
apiVersion: ghippo.io/v1alpha1 kind: GProductNavigator metadata: name: kpanda spec: gproduct: kpanda name: 容器管理 localizedName: zh-CN: 容器管理 en-US: Container Management url: /kpanda category: 容器 # (1) iconUrl: /kpanda/nav-icon.png order: 10 # (2) menus: - name: 备份管理 localizedName: zh-CN: 备份管理 en-US: Backup Management iconUrl: /kpanda/bkup-icon.png url: /kpanda/backup
- 当前只支持概览、工作台、容器、微服务、数据服务、管理,六选一
- 数字越大排在越上面
全局管理的导航栏 category 配置在 ConfigMap,暂时不能以注册方式增加,需要联系全局管理团队来添加。
-
kpanda
前端作为微前端接入到 DCE 5.0 父应用 Anakin 中前端使用 qiankun 来接入子应用 UI, 可以参考快速上手。
在注册 GProductNavigator CR 后,接口会生成对应的注册信息,供前端父应用注册使用。 例如
kpanda
就会生成以下注册信息:{ "id": "kpanda", "title": "容器管理", "url": "/kpanda", "uiAssetsUrl": "/ui/kpanda/", // 结尾的/是必须的 "needImportLicense": false },
以上注册信息与 qiankun 子应用信息字段的对应关系是:
{ name: id, entry: uiAssetsUrl, container: '#container', activeRule: url, loader, props: globalProps, }
container 和 loader 由前端父应用提供,子应用无需关心。 props 会提供一个包含用户基本信息、子产品注册信息等的 pinia store。
qiankun 启动时会使用如下参数:
请参阅前端团队出具的 GProduct 对接 demo tar 包。