对接导航栏¶

以容器管理（开发代号 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 启动时会使用如下参数：

start({
  sandbox: {
    experimentalStyleIsolation: true,
  },
  // 去除子应用中的favicon防止在Firefox中覆盖父应用的favicon
  getTemplate: (template) => template.replaceAll(/<link\s* rel="[\w\s]*icon[\w\s]*"\s*( href=".*?")?\s*\/?>/g, ''),
});

请参阅前端团队出具的 GProduct 对接 demo tar 包。

对接导航栏¶

对接方法¶

评论