对接导航栏¶

以容器管理（开发代号 kpanda ）为例，对接到导航栏。

对接后的预期效果如图：

对接方法¶

参照以下步骤对接 GProduct：

1. 通过 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
   

   1. 当前只支持概览、工作台、容器、微服务、数据服务、管理，六选一
   2. 数字越大排在越上面

   全局管理的导航栏 category 配置在 ConfigMap，暂时不能以注册方式增加，需要联系全局管理团队来添加。

2. kpanda 前端作为微前端接入到 AI 算力中心父应用 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 包。