codewave-openclaw-installer 1.0.0

package/skills/smart-customer-service/docs/codewave/40./346/211/251/345/261/225/344/270/216/351/233/206/346/210/220/20./351/233/206/346/210/220/345/274/200/345/217/221/346/226/271/345/274/217/40./351/241/265/351/235/242/351/233/206/346/210/220/30.CodeWave/345/272/224/347/224/250/344/275/234/344/270/272/344/270/273/345/272/224/347/224/250/347/232/204/345/276/256/345/211/215/347/253/257/351/233/206/346/210/220(/344/271/276/345/235/244qiankun).md

@@ -0,0 +1,163 @@
+# CodeWave作为主应用的微前端集成(乾坤qiankun)
+
+## 1. 概念介绍
+
+乾坤(qiankun)是一个基于single-spa的微前端实现库，旨在帮助大家能更简单、无痛的构建一个生产可用微前端架构系统。具体可参考：[乾坤(qiankun) 官方文档](https://qiankun.umijs.org/zh/guide)。
+
+CodeWave智能开发平台搭建的应用作为主应用，可以接入其它微应用。在CodeWave应用中注册微应用时，需要配置activeRule。例如，将activeRule配置为“/dashboard/vue”。这样，当在CodeWave主应用中打开页面“/dashboard/vue/xxxx”时，微前端框架会识别该页面属于已注册的微应用。CodeWave应用会发送请求，获取微应用的HTML入口文件，并继续请求其他前端静态资源。获取前端静态资源后，就会渲染“/dashboard/vue/xxxx”页面的内容。
+
+<div class="highlight">
+
+IDE在**3.13版本**之前，若要求乾坤(qiankun)的主应用同样使用CodeWave搭建，可能会出现资源冲突的情况，此时需要有一方导出独立部署并修改代码，才可以满足需求。
+
+</div>
+
+
+
+## 2. 接入步骤
+
+### 2.1 环境准备
+
+- 安装nodejs，版本推荐16+；
+- 安装代码编辑器，推荐vscode；
+- Google浏览器，推荐Chrome v128；
+
+### 2.2 微应用
+
+1.  使用Vue CLI生成vue2应用。具体可参考：[Vue CLI](https://cli.vuejs.org/zh/#%E8%B5%B7%E6%AD%A5)-[创建一个项目](https://cli.vuejs.org/zh/#%E8%B5%B7%E6%AD%A5)。
+2.  根据乾坤(qiankun)官方文档将生成的应用改成微应用。具体可参考：[Vue 微应用](https://qiankun.umijs.org/zh/guide/tutorial#vue-%E5%BE%AE%E5%BA%94%E7%94%A8)。
+3.  用户也可直接下载demo进行试用，下载地址：[demo](https://static-vusion.nos-eastchina1.126.net/tutorial/%E6%96%87%E6%A1%A3%E4%B8%AD%E5%BF%83%E9%99%84%E4%BB%B6/%E9%A1%B5%E9%9D%A2%E9%9B%86%E6%88%90/micro-frontend_vue2-microApp-demo.zip)。
+4.  本地运行项目，执行命令如下：
+
+    安装依赖：
+
+    ```
+    npm install --legacy-peer-deps
+    ```
+
+    本地运行项目：
+
+    ```
+    npm run serve
+    ```
+
+<div class="highlight">
+
+此外，同样支持将CodeWave应用作为微应用，具体操作步骤请参考[CodeWave应用作为子应用的微前端集成](../40.页面集成/20.CodeWave应用作为子应用的微前端集成.md)。
+
+</div>
+
+
+### 2.3 主应用
+
+#### 2.3.1 创建CodeWave应用
+
+进入CodeWave智能开发平台，创建3.1以及之后版本的应用进行开发。
+
+<img src="../assets/qiankun_202501201922_1.png" class="imgStyle" style="" />
+
+#### 2.3.2 注册微应用
+
+1.  在PC端上添加应用进入后事件。
+
+    <img src="../assets/qiankun_202501201922_2.png" class="imgStyle" style="" />
+
+1.  在进入后事件逻辑里拖拽放置一个JS代码块，并输入微应用注册代码。微应用注册代码如下。注册的微应用是本地运行的Vue2项目。
+
+    <img src="../assets/qiankun_202501201922_3.png" class="imgStyle" style="" />
+
+    ```java
+    function loadScript(src) {
+        const script = document.createElement('script');
+        script.src = src;
+        const res = new Promise((res, rej) => {
+            script.onload = res;
+            script.onerror = rej;
+        });
+        document.head.appendChild(script);
+        return res;
+    }
+    const src = 'https://unpkg.com/qiankun@2.10.8/dist/index.umd.min.js';
+    await loadScript(src);
+    const { registerMicroApps, start } = window.qiankun;
+    registerMicroApps(
+    [
+        {
+        name: 'vue',
+        entry: '//localhost:8080',
+        container: '#qiankun',
+        activeRule: '/dashboard/vue',
+        },
+    ],
+    );
+    delete window.Vue;
+    start({
+    sandbox: false,
+    });
+    ```
+
+#### 2.3.3 添加微应用容器
+
+1.  在应用中dashboard总览页下添加子页面vue。
+
+    <img src="../assets/qiankun_202501201922_4.png" class="imgStyle" style="" />
+
+1.  在vue页面中拖拽放置一个锚点组件，并把锚点组件的组件名称和标识改为“qiankun”。将改锚点组件作为微应用的放置容器。
+
+    <img src="../assets/qiankun_202501201922_5.png" class="imgStyle" style="" />
+
+1.  隐藏vue页面中的子页面容器组件，可以把显示条件设置成false，注意这里不要删除子页面组件。
+
+    <img src="../assets/qiankun_202501201922_6.png" class="imgStyle" style="" />
+
+#### 2.3.4 添加子应用路由
+
+主应用需要创建一个与子应用页面对应的路由，否则会跳转到404页面。例如，子应用有一个“/dashboard/vue/about”页面，那么主应用需要在vue页面下再创建一个名为about的子页面。
+
+<img src="../assets/qiankun_202501201922_7.png" class="imgStyle" style="" />
+
+#### 2.3.5 发布预览
+
+点击预览进行发布，查看集成效果。
+
+## 3. 集成效果
+
+顶部的导航栏和左边的侧边栏，是CodeWave平台搭建出来的。页面主体是微应用。
+
+<img src="../assets/qiankun_202501201922_8.png" class="imgStyle" style="" />
+
+## 4. 常见问题
+
+### 问题
+
+当主应用访问子应用时，如果出现跨域问题，报错如下：
+
+Access to fetch at ‘<http://localhost:8080/>’ from origin ‘<http://dev-jicheng-tizzy2023.app.codewave.163.com>’ has been blocked by CORS policy: The request client is not a secure context and the resource is in more-private address space local.
+
+<img src="../assets/qiankun_202501201922_9.png" class="imgStyle" style="" />
+
+### 处理
+
+在浏览器地址栏输入chrome://flags/，跳转至对应页面。
+
+在搜索框输入并搜索Block insecure private network requests属性，将其关闭。如果此选项开启，会阻止使用HTTP进行跨域访问本地地址。
+
+<img src="../assets/qiankun_202501201922_10.png" class="imgStyle" style="" />
+
+<div style="text-align: right;font-size: 14px;">
+    <span style="color: rgb(78, 110, 142);">创建人：</span>
+    <span style="color: rgb(118, 118, 118);">有鲤</span>
+    <span style="color: rgb(78, 110, 142);margin: 0 0 0 40px;">更新时间：</span>
+    <span style="color: rgb(118, 118, 118);">2025年01月20日</span>
+</div>
+<style>
+ .highlight {
+      border: 1px solid #679CF8; /* 添加边框 */
+      border-radius: 6px;
+      background-color: #F8FCFF; /* 添加底色 */
+      padding: 10px 20px 10px 20px;
+      margin-bottom:20px;
+      margin-top:20px;
+      box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
+  }
+</style>

package/skills/smart-customer-service/docs/codewave/40./346/211/251/345/261/225/344/270/216/351/233/206/346/210/220/20./351/233/206/346/210/220/345/274/200/345/217/221/346/226/271/345/274/217/40./351/241/265/351/235/242/351/233/206/346/210/220/40.CodeWave/345/272/224/347/224/250/344/275/234/344/270/272/344/270/273/345/272/224/347/224/250/347/232/204/345/276/256/345/211/215/347/253/257/351/233/206/346/210/220(/346/227/240/347/225/214wujie).md

@@ -0,0 +1,149 @@
+# CodeWave作为主应用的微前端集成(无界wujie)
+
+## 1. 概念介绍
+
+无界(wujie)是使用 iframe 来实现应用之前的 js 隔离的微前端解决方案。无界(wujie)微前端框架的优势在于：多应用同时激活在线、组件式的使用方式、应用界别的 keep-alive、纯净无污染、性能和体积兼具、开箱即用。更多信息请参考：[无界(wujie)官方文档](https://wujie-micro.github.io/doc/guide/)。
+
+CodeWave智能开发平台搭建的应用作为主应用，可以接入其它微应用。在CodeWave应用中注册无界(wujie)微应用时，需要配置url。当url配置为子应用的制品地址，微前端框架会识别该应用属于已注册的微应用。
+
+## 2. 接入步骤
+
+### 2.1 环境准备
+
+- 安装nodejs，版本推荐16+；
+- 安装代码编辑器，推荐vscode；
+- Google浏览器，推荐Chrome v128；
+
+### 2.2 微应用
+
+1.  根据无界wujie官方文档创建一个新项目。具体可参考：[无界(wujie) - 创建一个新项目](https://wujie-micro.github.io/doc/guide/install.html)。
+2.  用户也可直接下载demo进行试用，下载地址：[demo](https://static-vusion.nos-eastchina1.126.net/tutorial/%E6%96%87%E6%A1%A3%E4%B8%AD%E5%BF%83%E9%99%84%E4%BB%B6/%E5%BE%AE%E5%89%8D%E7%AB%AF/wujie_demo.zip)。
+3.  本地运行项目，执行命令如下：
+
+    安装依赖：
+
+    ```
+    pnpm install
+    ```
+
+    进入examples/vue2，本地运行项目：
+
+    ```
+    cd examples/vue2 
+    pnpm start
+    ```
+
+
+<div class="highlight">
+
+此外，同样支持将CodeWave应用作为微应用，具体操作步骤请参考[CodeWave应用作为子应用的微前端集成](../40.页面集成/20.CodeWave应用作为子应用的微前端集成.md)。
+
+</div>
+
+### 2.3 主应用
+
+#### 2.3.1 创建CodeWave应用
+
+进入CodeWave智能开发平台，创建3.13以及之后版本的应用进行开发。
+
+<img src="../assets/wujie_202501201935_1.png" class="imgStyle" style="" />
+
+#### 2.3.2 添加微应用容器
+
+1.  添加页面作为微应用展示页面，例如在应用中dashboard总览页下添加子页面vue。
+
+    <img src="../assets/wujie_202501201935_2.png" class="imgStyle" style="" />
+
+1.  在vue页面中拖拽放置一个锚点组件，并把锚点组件的组件名称和标识改为“wujie”。将改锚点组件作为微应用的放置容器。
+
+    <img src="../assets/wujie_202501201935_3.png" class="imgStyle" style="" />
+
+#### 2.3.3 注册微应用
+
+1.  在vue页面上添加页面进入后事件。
+
+    <img src="../assets/wujie_202501201935_4.png" class="imgStyle" style="" />
+
+1.  在进入后事件逻辑里拖拽放置一个JS代码块，并输入微应用注册代码。微应用注册代码如下。注册的微应用是本地运行的Vue2项目。
+
+    <img src="../assets/wujie_202501201935_5.png" class="imgStyle" style="" />
+
+    ```java
+    function loadScript(src) {
+        const script = document.createElement('script');
+        script.src = src;
+        const res = new Promise((res, rej) => {
+            script.onload = res;
+            script.onerror = rej;
+        });
+        document.head.appendChild(script);
+        return res;
+    }
+    const src = 'https://unpkg.com/wujie@1.0.24/lib/index.js';
+    if (!window.wujie) {
+    await loadScript(src);
+    }
+    const { startApp } = window.wujie;
+    startApp({
+    name: "wujie-subapp-vue", // 可自定义
+    url: "http://localhost:7200", // 替换成子应用的制品地址即可
+    exec: true,
+    el: "#wujie", // 替换成页面中锚点的标识即可
+    sync: true,
+    });
+
+    ```
+
+    注意：
+
+    - startApp 函数参数的 url 属性：替换成子应用的制品地址。
+    - startApp 函数参数的 el 属性：换成页面中锚点的标识。
+
+#### 2.3.4 发布预览
+
+点击预览进行发布，查看集成效果。
+
+> 预览制品应用时请修改访问链接为 http 协议，否则制品无法正常显示子应用。
+
+## 3. 集成效果
+
+顶部的导航栏和左边的侧边栏，是CodeWave平台搭建出来的。页面主体是微应用。
+
+<img src="../assets/wujie_202501201935_6.png" class="imgStyle" style="" />
+
+## 4. 常见问题
+
+子应用的资源和接口的请求都在主域名发起，所以会有跨域问题，子应用必须做[cors 设置](https://developer.mozilla.org/zh-CN/docs/Web/HTTP/CORS)。
+
+```java
+app.use((req, res, next) => {
+  // 路径判断等等
+  res.set({
+    "Access-Control-Allow-Credentials": true,
+    "Access-Control-Allow-Origin": req.headers.origin || "*",
+    "Access-Control-Allow-Headers": "X-Requested-With,Content-Type",
+    "Access-Control-Allow-Methods": "PUT,POST,GET,DELETE,OPTIONS",
+    "Content-Type": "application/json; charset=utf-8",
+  });
+  // 其他操作
+});
+```
+
+
+<div style="text-align: right;font-size: 14px;">
+    <span style="color: rgb(78, 110, 142);">创建人：</span>
+    <span style="color: rgb(118, 118, 118);">有鲤</span>
+    <span style="color: rgb(78, 110, 142);margin: 0 0 0 40px;">更新时间：</span>
+    <span style="color: rgb(118, 118, 118);">2025年01月20日</span>
+</div>
+<style>
+ .highlight {
+      border: 1px solid #679CF8; /* 添加边框 */
+      border-radius: 6px;
+      background-color: #F8FCFF; /* 添加底色 */
+      padding: 10px 20px 10px 20px;
+      margin-bottom:20px;
+      margin-top:20px;
+      box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
+  }
+</style>

package/skills/smart-customer-service/docs/codewave/40./346/211/251/345/261/225/344/270/216/351/233/206/346/210/220/20./351/233/206/346/210/220/345/274/200/345/217/221/346/226/271/345/274/217/40./351/241/265/351/235/242/351/233/206/346/210/220/50.CodeWave/345/205/274/344/270/273/345/255/220/345/272/224/347/224/250/347/232/204/344/271/276/345/235/244(qiankun)/345/276/256/345/211/215/347/253/257/351/233/206/346/210/220.md

@@ -0,0 +1,313 @@
+# CodeWave兼主子应用的乾坤(qiankun)微前端集成
+
+## 1. 场景介绍
+
+本文将以乾坤(qiankun)为例，全面地介绍CodeWave应用同时作为主应用和子应用的微前端集成完整操作步骤。
+
+在微前端集成的相关介绍中，我们不难发现，CodeWave应用既能够充当微应用，也可以作为主应用。在文档[CodeWave作为子应用的微前端集成](20.CodeWave应用作为子应用的微前端集成.md)和[CodeWave作为主应用的微前端集成(乾坤qiankun)](30.CodeWave应用作为主应用的微前端集成(乾坤qiankun).md)的阐述中，我们已经分别介绍了CodeWave应用作为子应用以及作为主应用的具体操作步骤，并提供了传统代码开发应用Demo展示了集成效果。那么，只要我们将这两篇文档内对应CodeWave应用的步骤相结合，就能轻松实现两个CodeWave应用分别作为主应用和子应用的使用场景。
+
+倘若您的需求是使用无界(wujie)框架，您可以参照文档[CodeWave作为子应用的微前端集成](20.CodeWave应用作为子应用的微前端集成.md)和[CodeWave作为主应用的微前端集成(无界wujie)](40.CodeWave应用作为主应用的微前端集成(无界wujie).md)来实现CodeWave同时作为主子应用的微前端集成。
+
+倘若您的需求是使用飞冰(icestark)框架，目前暂不支持主子应用同时在CodeWave中配置，需要有一方导出独立部署并修改代码，作为传统代码开发应用。
+
+## 2. 前提条件
+
+准备两个CodeWave应用，分别作为主应用和子应用。
+
+<img src="../assets/jicheng_202502271059_1.png" class="imgStyle" style="" />
+
+## 3. 操作步骤
+
+### 3.1 子应用操作
+
+#### 集成微前端
+
+点击IDE顶部的“**集成**”按钮，打开微前端集成配置页面。
+
+<img src="../assets/jicheng_202502271059_2.png" class="imgStyle" style="" />
+
+配置信息如下：
+
+- 微前端架构：选择“乾坤”。
+- 微应用名称：子应用被集成到主应用内部时所使用的名称，例如 beta-auth。如果主应用集成了多个微应用，微应用名称必须是唯一的。
+- 页面路径前缀：用于主应用根据页面地址区分应该激活哪个微应用。例如页面路径前缀为/home时，主应用需要创建名称为home的一级页面，使子应用的页面内容显示在该路径下。
+- 接口和静态资源前缀：用以区分子应用发出的请求，主应用需要把这些请求转发到CodeWave应用后端。接口和静态资源前缀和页面路径前缀不能相相同。例如接口和静态资源前缀为/home_proxy时，需要在k8s服务器配置子应用的路由规则为/home_proxy/(.*)。
+
+由于CodeWave应用被集成到主应用后，登录页面地址、无权限页面地址和404页面地址还是使用CodeWave应用的页面，因此这几个地址不需要配置。
+
+#### 搭建子应用页面
+
+新建页面并自定义页面名称，例如将页面命名为about，在about页面下完成页面搭建。当前页面即为子应用的about页面。
+
+<img src="../assets/jicheng_202503101415_1.png" class="imgStyle" style="" />
+
+#### 解决跨域问题
+
+在“更多->系统偏好设置”中打开**使用扩展逻辑**和**按需生成接口**。
+
+<img src="../assets/jicheng_202502271059_4.png" class="imgStyle" style="" />
+
+新建两个扩展逻辑，例如CustomCorsFilter和CustomFilterConfig。注意替换逻辑中真实的包名和类名。
+
+- CustomCorsFilter
+
+<img src="../assets/micro_202509161603_3.png" class="imgStyle" style="" />
+
+```java
+package com.csforkf.subapplication.web.interceptor;
+//修改package
+//修改类名 包名.CustomCorsFilter： com.csforkf.subapplication.web.interceptor.CustomCorsFilter
+
+import javax.servlet.*;
+import javax.servlet.http.HttpServletResponse;
+import javax.servlet.http.HttpServletRequest;
+import java.io.IOException;
+import com.netease.codewave.nasl.java.tools.LogUtils;
+
+
+
+public class CustomCorsFilter implements Filter {
+
+    @Override
+    public void doFilter(ServletRequest request, ServletResponse response, FilterChain chain)
+        throws IOException, ServletException {
+        HttpServletResponse httpResponse = (HttpServletResponse) response;
+        HttpServletRequest httpRequest = (HttpServletRequest) request;
+        LogUtils.info("httpRequest:" + httpRequest.getRequestURI() + "  origin:" + (httpRequest.getHeader("Origin") == null ? "*" : httpRequest.getHeader("Origin")));
+        //如果是OPTIONS请求，直接返回200
+        if (httpRequest.getMethod().equals("OPTIONS")) {
+            // 设置自定义的CORS头部
+            httpResponse.setHeader("Access-Control-Allow-Origin", httpRequest.getHeader("Origin") == null ? "*" : httpRequest.getHeader("Origin"));
+            httpResponse.setHeader("Access-Control-Allow-Credentials", "true");
+            httpResponse.setHeader("Access-Control-Allow-Methods", "GET,POST,PUT,DELETE,OPTIONS");
+            httpResponse.setHeader("Access-Control-Allow-Headers", "Content-Type, Authorization, domainname, timezone, lcap-frontend, lcap-calllogic-uuid, env");
+            httpResponse.setHeader("Access-Control-Expose-Headers", "Content-Disposition");
+            httpResponse.setStatus(HttpServletResponse.SC_OK);
+            return;
+        }
+        // 设置自定义的CORS头部
+        httpResponse.setHeader("Access-Control-Allow-Origin", httpRequest.getHeader("Origin") == null ? "*" : httpRequest.getHeader("Origin"));
+        httpResponse.setHeader("Access-Control-Allow-Credentials", "true");
+        httpResponse.setHeader("Access-Control-Allow-Methods", "GET,POST,PUT,DELETE,OPTIONS");
+        httpResponse.setHeader("Access-Control-Allow-Headers", "Content-Type, Authorization, domainname, timezone, lcap-frontend, lcap-calllogic-uuid, env");
+        httpResponse.setHeader("Access-Control-Expose-Headers", "Content-Disposition");
+
+        // 继续请求处理
+        chain.doFilter(request, response);
+    }
+
+    // 其他方法需要实现，可以为空
+}
+```
+
+- CustomFilterConfig
+
+<img src="../assets/micro_202509161603_4.png" class="imgStyle" style="" />
+
+```java
+package com.csforkf.subapplication.config;
+//1，修改包名：package com.csforkf.subapplication.config;
+//2，修改类名：com.csforkf.subapplication.config.CustomFilterConfig
+
+//TODO：可更新包名，生成源码时按包名路径存放
+import org.springframework.boot.web.servlet.FilterRegistrationBean;
+import org.springframework.context.annotation.Bean;
+import org.springframework.context.annotation.Configuration;
+
+import com.csforkf.subapplication.web.interceptor.CustomCorsFilter;
+//3，修改路径  com.csforkf.subapplication.web.interceptor
+
+import javax.servlet.Filter;
+import javax.servlet.DispatcherType;
+
+@Configuration
+public class CustomFilterConfig {
+
+    @Bean
+    public FilterRegistrationBean<Filter> customCorsFilter() {
+        FilterRegistrationBean<Filter> registrationBean = new FilterRegistrationBean<>();
+        registrationBean.setFilter(new CustomCorsFilter());
+        registrationBean.addUrlPatterns("/*"); // 设置需要应用此过滤器的URL模式
+        registrationBean.setOrder(-10); // 设置过滤器的顺序，确保它覆盖默认的CorsFilter
+        registrationBean.setDispatcherTypes(DispatcherType.REQUEST, DispatcherType.FORWARD);
+        return registrationBean;
+    }
+}
+``` 
+
+#### 发布子应用
+
+点击发布预览，预览发布的子应用如下，等待主应用中直接集成。
+
+<img src="../assets/jicheng_202502271059_7.png" class="imgStyle" style="" />
+
+可复制子应用的访问地址，备用于在主应用操作中注册微应用。
+
+<img src="../assets/jicheng_202503101442_1.png" class="imgStyle" style="" />
+
+
+### 3.2 主应用操作
+
+#### 注册微应用
+
+在应用端上添加应用进入后事件，在事件逻辑线上拖拽放置一个JS代码块，并输入微应用注册代码。
+
+<img src="../assets/jicheng_202502271059_9.png" class="imgStyle" style="" />
+
+微应用注册代码如下：
+
+```javascript
+function loadScript(src) {
+    const script = document.createElement('script');
+    script.src = src;
+    const res = new Promise((res, rej) => {
+        script.onload = res;
+        script.onerror = rej;
+    });
+    document.head.appendChild(script);
+    return res;
+}
+// 使用乾坤框架相关的配置
+const src = 'https://unpkg.com/qiankun@2.10.8/dist/index.umd.min.js';
+await loadScript(src);
+const { registerMicroApps, start } = window.qiankun;
+// 注册微服务，微服务为子应用的地址
+registerMicroApps(
+    [
+        {
+            name: 'beta-auth',
+            entry: '//dev-subapplication-csforkf.lcap.codewave-test.163yun.com',
+            container: '#qiankun',
+            activeRule: '/home',
+        },
+    ],
+);
+
+delete window.Vue;
+
+start({
+    sandbox: true,
+});
+
+```
+
+registerMicroApps方法下微应用包含的配置信息如下：
+
+- name：微应用的名称。用于在主应用中标识该微应用，对应上文[集成微前端](#集成微前端)时配置的“微应用名称”。
+- entry：微应用的入口地址。主应用会通过这个地址加载微应用的资源，对应子应用的访问地址。子应用的访问地址即上文[发布子应用](#发布子应用)后获取的应用地址的相对路径。
+- container：微应用挂载的容器。主应用会将微应用渲染到这个 DOM 节点中，自定义命名，例如qiankun。容器名称需要与下文[添加微应用容器](#添加微应用容器)时锚点组件的组件名称和标识保持一致。
+- activeRule：激活规则。当主应用的路由匹配到该规则时，会加载并渲染对应的微应用，对应上文[集成微前端](#集成微前端)时配置的“页面路径前缀”，也可以使用更复杂的匹配规则。
+
+
+#### 添加微应用容器
+
+由于在子应用操作中，集成微前端时配置的页面路径前缀为“/home”，使子应用集成的页面内容显示在路径/home下，因此需要在主应用中添加一级页面home来生成与之对应的路径。在home页面中拖拽放置一个锚点组件，并把锚点组件的组件名称和标识改为“qiankun”，即对应注册微应用时registerMicroApps方法下的微应用挂载的容器container。该锚点组件即作为微应用的放置容器。
+
+<img src="../assets/jicheng_202502271059_10.png" class="imgStyle" style="" />
+
+#### 添加子应用路由
+
+主应用需要创建一个与子应用页面对应的路由，例如，子应用有一个“/about”页面，那么主应用需要在页面前端路径对应的home页面下再创建一个名为about的子页面。
+
+> 以此类推，当子应用中的页面为“/parent/about”，则主应用需要创建页面“/home/parent/about”。
+
+<img src="../assets/jicheng_202502271059_11.png" class="imgStyle" style="" />
+
+由于home页面需要添加子页面about，因此页面中的“子页面容器”组件不可删除，但about页面显示的内容为子应用，“子页面容器”没有实际作用，可以将其显示条件设为false。
+
+<img src="../assets/jicheng_202502271059_12.png" class="imgStyle" style="" />
+
+#### 发布主应用
+
+点击发布预览，校验集成效果。
+
+<img src="../assets/jicheng_202502271059_13.png" class="imgStyle" style="" />
+
+可复制主应用的访问地址，备用于在配置ingress操作中编辑域名。
+
+<img src="../assets/jicheng_202503101415_2.png" class="imgStyle" style="" />
+
+
+### 3.3 配置ingress
+
+微前端框架为乾坤(qiankun)时，当子应用页面请求接口，如果主应用没有把请求转发到CodeWave应用后端，则会出现接口请求转发失败的问题。需要根据上文[集成微前端](#集成微前端)时配置的“接口和静态资源前缀”，在k8s服务器中完成ingress配置。操作步骤如下：
+
+1.  登陆k8s服务器，切换至对应的平台及租户。
+
+    <img src="../assets/jicheng_202503101415_3.png" class="imgStyle" style="" />
+
+2.  进入应用程序->应用路由，查找主应用。建议根据应用标识查找，找到后点击“查看”。
+
+    <img src="../assets/jicheng_202503101415_4.png" class="imgStyle" style="" />
+
+3.  点击“编辑”按钮，配置路由。
+
+    <img src="../assets/jicheng_202503101415_5.png" class="imgStyle" style="" />
+
+4.  添加两条新的注解。勾选IngressClass时支持通过下拉框选择。
+
+    <img src="../assets/jicheng_202503101415_6.png" class="imgStyle" style="" />
+
+    <table>
+    <thead>
+      <tr>
+        <th colspan="2">注解</th>
+      </tr>
+    </thead>
+    <tbody>
+      <tr>
+        <th>nginx.ingress.kubernetes.io/rewrite-target</th>
+        <th>/$1</th>
+      </tr>
+      <tr>
+        <th>nginx.ingress.kubernetes.io/use-regex</th>
+        <th>true</th>
+      </tr>
+    </tbody>
+    </table>
+
+5.  修改路由规则。
+
+    <img src="../assets/jicheng_202503101415_7.png" class="imgStyle" style="" />
+
+    域名：主应用访问地址的相对路径，即上文[发布主应用](#发布主应用)后获取的应用地址的相对路径。
+
+    路由映射：
+    
+    <table>
+    <thead>
+        <tr>
+            <th>URL映射</th>
+            <th style="width: 50%;">服务名称</th>
+            <th>服务端口</th>
+        </tr>
+    </thead>
+    <tbody>
+        <tr>
+            <td><b>/(*)</b></td>
+            <td><b>lc-svc-parentapplication-dev-csforkf-1</b><br>根据主应用的应用地址选择，该示例仅供参考</td>
+            <td><b>8080:8080</b></td>
+        </tr>
+        <tr>
+            <td><b>/home_proxy/(*)</b><br>/home_proxy是子应用中微前端集成对应的“接口和静态资源前缀”</td>
+            <td><b>lc-svc-subapplication-dev-csforkf-1</b><br>根据子应用的应用地址选择，该示例仅供参考</td>
+            <td><b>8080:8080</b></td>
+        </tr>
+    </tbody>
+    </table>
+
+6.  点击“保存”，校验通过后点击“应用”。
+
+    <img src="../assets/jicheng_202503101415_8.png" class="imgStyle" style="" />
+
+## 4. 效果演示
+
+<img src="../assets/jicheng_202503101415_9.png" class="imgStyle" style="" />
+
+
+<div style="text-align: right;font-size: 14px;">
+    <span style="color: rgb(78, 110, 142);">创建人：</span>
+    <span style="color: rgb(118, 118, 118);">有鲤</span>
+    <span style="color: rgb(78, 110, 142);margin: 0 0 0 40px;">更新时间：</span>
+    <span style="color: rgb(118, 118, 118);">2025年02月27日</span>
+</div>