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/30./345/272/224/347/224/250API/351/233/206/346/210/220/30./346/216/245/345/217/243/351/211/264/346/235/203/20.akSkAuth/351/211/264/346/235/203/346/226/271/345/274/217/346/200/216/344/271/210/344/275/277/347/224/250.md

@@ -0,0 +1,109 @@
+# akSkAuth鉴权方式怎么使用
+
+## **1.开放接口时akSkAuth鉴权的说明与使用**
+
+### **1.1 akSkAuth鉴权方式说明**
+
+在新建应用后，**开放接口->鉴权方式** 会自带一个鉴权方式**akSkAuth**
+
+![image-169154835277029](../assets/akskauthjianquanfangshizenmeshiyong_1.png)
+
+开放接口的akSkAuth鉴权参数说明：
+
+- ak代表Access Key（访问密钥），相当于API访问者的用户名，用于识别API访问者的身份。
+- sk 代表Secret Key（密钥），它是与访问密钥（ak）配对使用的密钥，相当于API访问者的密码，用于验证API访问者的身份和保护API请求的安全性。在进行 API 请求时，sk一般不会在调用时传递，多用于校验传递的signature是否正确。
+- timestamp（时间戳）是指当前时间的UNIX时间戳，用于防止重放攻击。
+- signature（签名）是根据ak、sk、timestamp等信息生成的签名，用于验证请求的合法性和完整性。生成签名的算法通常由接口提供者提供，并在API文档中进行描述。
+
+开放接口的akSkAuth鉴权逻辑说明：
+
+![image-169154835277029](../assets/image-169154838497831.png)
+
+该鉴权逻辑能够在header 中取 ak、timestamp、signature 字段值，sk的值可由开发者自定义，判断 signature 是否与经过md5加密后的ak+sk+timestamp值相同，如果为true，则鉴权通过，否则鉴权不通过，具体逻辑可由开发者自行修改。
+
+**鉴权结果result默认为true，如果要设置为鉴权不通过，需要显式将result设置为false**
+
+### **1.2 服务端逻辑开放为接口时如何使用鉴权**
+
+1. 选择一个服务端逻辑，点击右键 -> 开放为接口
+
+    ![image-169154847404833](../assets/akskauthjianquanfangshizenmeshiyong_2.png)
+
+2. 填写开放为接口的基本信息，然后点击下一步
+
+    ![image-169154851831135](../assets/akskauthjianquanfangshizenmeshiyong_3.png)
+
+3. 选择鉴权方式，这里选择默认的 akSkAuth，然后点击下一步
+
+    ![image-169154855214137](../assets/akskauthjianquanfangshizenmeshiyong_4.png)  
+
+4. 点击导出，完成
+
+    ![image-169154859096239](../assets/akskauthjianquanfangshizenmeshiyong_5.png)
+
+### **1.3 开放的接口怎么调用**
+
+通过Apifox、Postman等三方工具调用开放的接口
+
+向header中设置对应的ak、timestamp、signature的值，CodeWave应用开发者需要将自行设置的ak、sk、加密算法、接口文档告知调用方。下面以md5加密算法为例，通过postman调用接口。
+
+第一步，生成加密的signature，md5生成网址（也可使用其他网站或工具）：https://www.fulimama.com/md5/
+
+![image-169154862590641](../assets/image-169154862590641.png)
+
+第二步，通过工具调用接口，postman调用样例如下
+
+若填写正确的鉴权header，接口会返回200
+
+![image-169154867859043](../assets/image-169154867859043.png)
+
+若不填写鉴权header或signature不正确，接口会返回401
+
+![image-169154870710145](../assets/image-169154870710145.png)
+
+## **2.  调用外部接口时akSkAuth鉴权的说明与使用**
+
+### **2.1 调用外部接口时akSkAuth鉴权说明**
+
+在逻辑->  接口 -> 外部接口 中有鉴权方式**akSkAuth**
+
+![image-169154877887147](../assets/akskauthjianquanfangshizenmeshiyong_6.png)
+
+调用外部接口akSkAuth鉴权参数说明：
+
+- ak代表Access Key（访问密钥），相当于API访问者的用户名，用于识别API访问者的身份。
+
+- sk 代表Secret Key（密钥），它是与访问密钥（ak）配对使用的密钥，相当于API访问者的密码，用于验证API访问者的身份和保护API请求的安全性。在进行 API 请求时，sk一般不会在调用时传递，多用于校验传递的signature是否正确。
+- timestamp（时间戳）是指当前时间的UNIX时间戳，用于防止重放攻击。
+- signature（签名）是根据ak、sk、timestamp等信息生成的签名，用于验证请求的合法性和完整性。生成签名的算法通常由接口提供者提供，并在API文档中进行描述。
+
+调用外部接口akSkAuth鉴权逻辑说明：
+
+![image-169154880136349](../assets/image-169154880136349.png)
+
+这里鉴权逻辑和开放接口默认鉴权逻辑相匹配，主要是向header中设置 ak、timestamp、signature的值。其中 ak、sk 默认可由开发者自定义，timestamp默认为当前时间， signature=md5(ak+sk+timestamp)，这里这些值均在鉴权逻辑中生成，也可以作为鉴权参数传递过来。 开发者可根据调用外部接口的需求自定义鉴权逻辑。
+
+### **2.2 调用其他CodeWave应用的开放接口**
+
+由于外部接口默认鉴权逻辑akSkAuth已经向header中设置好值（请按需修改），在平台逻辑内调用接口时只需要选择对应的鉴权逻辑即可。（如果选择的鉴权逻辑有鉴权参数，这里需要输入鉴权参数，平台默认的鉴权逻辑没有鉴权参数，就无需输入）
+
+![image-169154884922551](../assets/akskauthjianquanfangshizenmeshiyong_7.png)
+
+### **2.3 通过Apifox、Postman等三方工具调用**
+
+向header中设置对应的ak、timestamp、signature的值。CodeWave应用开发者需要向接口提供方获取的ak、sk和加密算法告知调用方。下面以md5加密算法为例，通过postman调用接口。
+
+第一步，生成加密的signature，md5生成网址（也可使用其他网站或工具）：https://www.fulimama.com/md5/
+
+![image-169154888330853](../assets/image-169154888330853.png)
+
+第二步，通过工具调用接口，postman调用样例如下
+
+若填写正确的鉴权header，接口会返回200
+
+![image-169154891237155](../assets/image-169154891237155.png)
+
+若不填写鉴权header或signature不正确，接口会返回401
+
+![image-169154894765957](../assets/image-169154894765957.png)
+

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/30./345/272/224/347/224/250API/351/233/206/346/210/220/30./346/216/245/345/217/243/351/211/264/346/235/203/30./345/246/202/344/275/225/350/207/252/345/256/232/344/271/211/344/270/200/347/247/215/351/211/264/346/235/203/346/226/271/345/274/217.md

@@ -0,0 +1,57 @@
+# 如何自定义一种鉴权方式
+
+为了让开发者理解搭建过程，通过调用[阿里云API市场身份实名认证接口](https://market.aliyun.com/products/57000002/cmapi026109.html?spm=5176.2020520132.101.3.c6137218EaphpJ#sku=yuncode20109000025)来讲解实现过程
+
+## 1. 阿里云API市场身份实名认证接口文档
+
+请求方式：POST
+
+调用地址:`http (s)://eid.shumaidata.com/eid/check`
+
+鉴权请求参数（Headers）：
+
+| 名称          | 类型   | 是否必须 | 描述                 |
+| ------------- | ------ | -------- | -------------------- |
+| Authorization | STRING | 必选     | "APPCODE " + appCode |
+
+请求参数（Query）
+
+| 名称   | 类型   | 是否必须 | 描述     |
+| ------ | ------ | -------- | -------- |
+| idcard | STRING | 必选     | 身份证号 |
+| name   | STRING | 必选     | 姓名     |
+
+## 2. 在应用API管理中录入接口信息
+
+将API导入到平台中，操作步骤可参照：[第三方API导入操作](../20.第三方API导入案例.md)。
+
+## 3. 在CodeWave平台的IDE内调用接口
+
+调用上一步录入的接口，鉴权方式选择新增鉴权方式“authentication1”
+
+<img src="../assets/ruhezidingyiyizhongjianquanfangshi_0611_1.png" style="width:600px;border: 1px solid #ccc;" />
+
+## 4. 编辑外部接口下新增的鉴权方式“authentication1”
+
+- key设置为阿里云接口文档鉴权要求的“Authorization”
+- value设置为阿里云接口文档鉴权要求的APPCODE+appCode
+- 将key和value通过内置函数添加到request.headers（headers为map结构）中
+
+<img src="../assets/ruhezidingyiyizhongjianquanfangshi_0611_2.png" style="border: 1px solid #ccc;" />
+
+## 5. 通过接口调试验证鉴权方式
+
+点击“查看全部接口”，进入接口详情页。
+
+<img src="../assets/ruhezidingyiyizhongjianquanfangshi_0611_3.png" style="width:600px;border: 1px solid #ccc;" />
+
+选择接口调试，设置调试需要的请求值，然后点击按钮开始调试，等待调试结果返回。
+
+<img src="../assets/ruhezidingyiyizhongjianquanfangshi_0611_4.png" style="border: 1px solid #ccc;" />
+
+<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);">2024年06月11日</span>
+</div>

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/10./344/273/200/344/271/210/346/230/257/345/276/256/345/211/215/347/253/257/351/233/206/346/210/220.md

@@ -0,0 +1,35 @@
+# 什么是微前端集成
+
+## 1. 概念介绍
+
+微前端（Micro Frontends）这个概念来源于ThoughtWorks公司的[技术雷达报告](https://www.thoughtworks.com/radar/techniques/micro-frontends)。微前端将一个大型、复杂的前端应用拆分成多个独立的子应用，但又保持用户体验的一致性。每个子应用可由独立的团队进行开发，并允许使用不同的技术栈进行开发，也可独立测试和部署。这样可以提高开发速度、降低维护成本，并促进团队之间的协作。
+
+## 2. 微前端集成的优势
+
+1.  模块化开发：微前端将前端应用拆分为小的独立模块，使得应用更易于开发、维护和扩展。
+2.  独立部署：每个微前端应用都可以独立部署，使得应用的上线和更新更加灵活和快速。
+3.  技术栈多样化：不同的微前端应用可以使用不同的技术栈，使得团队可以选择最适合自己的技术栈来开发应用。
+4.  共享资源：微前端应用可以共享资源，例如组件、样式和数据等，避免了重复开发和维护的工作。
+5.  提高团队协作效率：微前端应用可以由不同的团队开发和维护，使得团队之间的协作更加高效。
+6.  提高用户体验：微前端应用可以独立升级和部署，使得用户可以更快地获得新的功能和体验。
+
+CodeWave平台搭建的应用可以做为子应用，集成到其它主应用。CodeWave平台提供了集成配置页面。简单配置后，CodeWave平台会根据选择的微前端框架在生成的代码中加入对应的集成代码。CodeWave平台支持乾坤、飞冰和无界微前端框架，并可扩展支持其它微前端框架。
+
+**乾坤（qiankun）**
+
+乾坤是一个基于 single-spa 的微前端实现库，旨在帮助大家能更简单、无痛的构建一个生产可用微前端架构系统。更多信息请参考：[乾坤官方文档](https://qiankun.umijs.org/zh/guide)。
+
+**飞冰（icestark）**
+
+飞冰是一个面向大型系统的微前端解决方案。飞冰在保证一个系统的操作体验基础上，实现各个微应用的独立开发和发版，主应用通过飞冰管理微应用的注册和渲染，将整个系统彻底解耦。更多信息请参考：[飞冰官方文档](https://micro-frontends.ice.work/docs/guide/)。
+
+**无界（wujie）**
+
+无界是使用 iframe 来实现应用之前的 js 隔离的微前端解决方案。无界微前端框架的优势在于：多应用同时激活在线、组件式的使用方式、应用界别的 keep-alive、纯净无污染、性能和体积兼具、开箱即用。更多信息请参考：[无界官方文档](https://wujie-micro.github.io/doc/guide/)。
+
+<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>

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/20.CodeWave/345/272/224/347/224/250/344/275/234/344/270/272/345/255/220/345/272/224/347/224/250/347/232/204/345/276/256/345/211/215/347/253/257/351/233/206/346/210/220.md

@@ -0,0 +1,379 @@
+# CodeWave作为子应用的微前端集成
+
+本章节将介绍如何配置微前端集成。
+
+## 1. 环境准备
+
+1.  安装node.js。
+2.  安装yarn。
+
+## 2. 操作步骤
+
+### 2.1 搭建CodeWave子应用
+
+1.  创建一个CodeWave应用，添加2个页面 Student 和 Teacher，也可添加其他页面，页面内容可随意添加。Student 页面设置为首页。
+2.  Student 页面打开权限控制，需要登陆后才可以访问。Teacher 页面打开权限控制，并且清空当前页面的授权角色，任何账号访问 Teacher 页面都会跳转到无权限页面。
+
+<img src="../assets/ziyingyong_202501201850_1.png" class="imgStyle" style="" />
+
+<img src="../assets/ziyingyong_202501201850_2.png" class="imgStyle" style="" />
+
+### 2.2 配置微前端集成参数
+
+点击IDE顶部的“**集成**”按钮，打开微前端集成配置页面，参数修改后需要CodeWave应用发布后才会生效。
+
+<img src="../assets/ziyingyong_202501201850_3.png" class="imgStyle" style="" />
+
+选择使用的微前端框架之后，CodeWave平台生成应用代码时会添加微前端框架相关的代码和配置。当CodeWave应用作为微应用被集成到其它主应用内部时，会根据这些配置对CodeWave应用做调整。当然，如果集成了微前端框架，但是直接访问CodeWave应用时，这些配置是不会生效的。
+
+上图中配置的微应用名称’“qz” ，页面前缀路径"/qz"，接口和静态资源前缀"/qz-proxy"。若在页面修改配置，请关联修改demo中配置。
+
+
+<div class="highlight">
+
+由于 **无界(wujie)** 不需要监听路由变化来决定子应用的渲染，因此不需要设置“页面路径前缀”和“接口和静态资源前缀”选项；若使用**乾坤(qiankun)**、**飞冰(icestark)**，上述配置项均会在下面的demo中使用。
+
+</div>
+
+微前端集成的配置有以下几个：
+
+- 微应用名称：CodeWave应用被集成到主应用内部时所使用的名称。如果主应用集成了多个微应用，微应用名称必须是唯一的。
+- 页面路径前缀：用于主应用根据页面地址区分应该激活哪个微应用。页面路径前缀必填，且不得为 “/”。
+- 接口和静态资源前缀：用以区分是CodeWave应用发出的请求，主应用需要把这些请求转发到CodeWave应用后端。接口和静态资源前缀必填，且不得为 “/”。接口和静态资源前缀也不能和页面路径前缀一样。
+- 登录页面地址：用于未登录跳转对应的登录页面，若集成后继续使用CodeWave应用的登录页，地址不需要配置。
+- 无权限页面地址：用于无权限跳转对应的无权限页面，若集成后继续使用CodeWave应用的无权限页，地址不需要配置。
+- 404页面地址：用于页面不存在跳转对应的404页面，若集成后继续使用CodeWave应用的404页，地址不需要配置。
+
+CodeWave应用检测到用户未登录、用户无权限、页面不存在时，会跳转到对应的登录页面、无权限页面、404页面。如果CodeWave应用被集成到主应用后，这3个页面还是使用CodeWave应用的页面，那么这几个地址不需要配置。如果主应用提供了对应的页面，那么用户需要配置这几个地址。如果主应用这几个页面的地址是动态计算的，或者是弹窗的话，则在可以在主应用的代码中设置以下几个方法，loginFn、noAuthFn 或 notFoundFn。 这几个方法的优先级高于配置页面填写的地址。
+
+```javascript
+   window.LcapMicro = window.LcapMicro || {};
+   Object.assign(window.LcapMicro, {
+     loginFn() {},
+     noAuthFn() {},
+     notFoundFn() {},
+   });
+```
+
+### 2.3 解决子应用跨域问题
+
+子应用的资源和接口的请求都在主域名发起，所以会有跨域问题，子应用必须做[cors 设置](https://developer.mozilla.org/zh-CN/docs/Web/HTTP/CORS)。当CodeWave应用作为子应用，则可以通过设置服务端扩展逻辑，来在 Http 请求返回头部加上 CORS 相关设置。
+
+<div class="highlight">
+
+前提条件：在“更多->系统偏好设置”中打开**使用扩展逻辑**；同时，为了防止扩展逻辑编译失败，打开**按需生成接口**。
+
+<img src="../assets/ziyingyong_202501201850_4.png" class="imgStyle" style="" />
+
+</div>
+
+
+新建两个扩展逻辑，例如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;
+    }
+}
+``` 
+
+### 2.4 发布CodeWave应用
+
+应用发布后，即可生效微前端配置。
+
+## 3. 主应用Demo配置
+
+<div class="highlight">
+
+示例中的主应用demo非CodeWave应用。
+
+若要求乾坤(qiankun)或无界(wujie)的主应用同样使用CodeWave搭建，请参考文档：
+
+- [CodeWave应用作为主应用的微前端集成(乾坤qiankun)](30.CodeWave应用作为主应用的微前端集成(乾坤qiankun).md)
+- [CodeWave应用作为主应用的微前端集成(无界wujie)](30.CodeWave应用作为主应用的微前端集成(乾坤qiankun).md)
+
+若要求飞冰(icestark)的主应用同样使用CodeWave搭建，可能会出现资源冲突的情况，此时需要有一方导出独立部署并修改代码，才可以满足需求。
+
+</div>
+
+
+### 乾坤(qiankun)主应用 Demo配置
+
+乾坤(qiankun)主应用 demo 是基于[乾坤(qiankun) 项目](https://github.com/umijs/qiankun)修改的。
+
+> 点击下载：[乾坤(qiankun)主应用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_20230629_qiankun%20demo.zip)
+
+1.  请在`examples\main\index.html`文件中修改侧边栏配置，添加CodeWave应用的页面链接。
+
+      <img src="../assets/ziyingyong_202501201850_7.png" class="imgStyle" style="" />
+
+1.  请在`examples\main\webpack.config.js`文件中修改请求转发配置
+
+      <div class="highlight">
+
+      “/qz-proxy” 为微前端集成配置页面填写的接口和静态资源前缀。target 为CodeWave应用的访问地址。主应用需要转发带这个前缀的请求到CodeWave应用。
+      注意，以下配置只在本地调试时生效。部署到测试或生成环境时，请求转发一般是在 nginx 或 ingress 配置。
+
+      点击下载：[nginx请求转发配置参考](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/nginx%E8%AF%B7%E6%B1%82%E8%BD%AC%E5%8F%91%E9%85%8D%E7%BD%AE%E5%8F%82%E8%80%83.zip)。
+
+      </div>
+
+      <img src="../assets/ziyingyong_202501201850_8.png" class="imgStyle" style="" />
+
+2.  请在`examples\main\index.js`文件中修改以下配置，用于注册微应用，关闭 sandbox。
+
+      name参数 “qz” 就是微前端集成配置页面填写的微应用名称。activeRule参数 “/qz” 就是微前端集成配置页面填写的页面路径前缀。主应用根据这个前缀来决定激活哪个子应用。
+
+      <img src="../assets/ziyingyong_202501201850_9.png" class="imgStyle" style="width:400px" />
+
+      如果打开 sandbox，乾坤(qiankun)会拦截加载的代码并在 sandbox 中执行代码。但是，乾坤(qiankun)在处理异步加载的代码时，不能保证代码的执行顺序。而CodeWave应用的大部分静态资源都是异步加载，执行顺序错乱会导致代码执行报错。
+
+      <img src="../assets/ziyingyong_202501201850_10.png" class="imgStyle" style="width:400px" />
+
+3.  安装依赖库，启动本地服务后，访问 <http://localhost:7099>。由于demo包含的模块较多，启动可能较慢。
+
+      请在demo目录下执行以下命令：
+
+      ```
+      $ yarn install 
+      $ yarn examples:install 
+      $ yarn examples:start
+      ```
+
+      <img src="../assets/ziyingyong_202501201850_11.png" class="imgStyle" style="" />
+
+      左侧菜单栏是主应用，右侧的内容是由CodeWave平台搭建的子应用。当点击Student菜单时，如果未登录，则会跳转到登录页；如果已登录，则会展示上图。当点击NoAuth菜单时，则会跳转到无权限页面。点击NotFound菜单，则会跳转到404页面。如果这几个页面的地址没有配置，则会跳转到CodeWave应用的对应页面；如果已经进行了配置，则会跳转到配置的页面地址。
+
+### 飞冰(icestark)主应用 Demo配置
+
+飞冰(icestark)主应用 demo 是基于[飞冰脚手架](undefined)生成的项目修改。
+
+> 点击下载：[飞冰(icestark)主应用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_20230629_icestark%20demo.zip)
+
+1.  请在`icestark-layout\src\layouts\BasicLayout.vue`文件中修改侧边栏配置，添加CodeWave应用的页面链接。
+
+      <img src="../assets/ziyingyong_202501201850_12.png" class="imgStyle" style="" />
+
+1.  请在`icestark-layout\vite.config.ts`文件中修改请求转发配置。
+
+      <div class="highlight">
+
+      “/qz-proxy” 为微前端集成配置页面填写的接口和静态资源前缀。target 为CodeWave应用的访问地址。主应用需要转发带这个前缀的请求到CodeWave应用。
+      注意，以下配置只在本地调试时生效。部署到测试或生成环境时，请求转发一般是在 nginx 或 ingress 配置。
+
+      </div>
+      
+      <img src="../assets/ziyingyong_202501201850_13.png" class="imgStyle" style="" />
+
+2.  请在`icestark-layout\src\pages\App.vue`文件中修改以下配置，用于注册微应用。
+
+      name 参数 “qz” 就是微前端集成配置页面填写的微应用名称。activePath 参数"/qz" 就是微前端集成配置页面填写的页面路径前缀。主应用根据这个前缀来决定激活哪个子应用。
+
+      <img src="../assets/ziyingyong_202501201850_14.png" class="imgStyle" style="width:400px" />
+
+3.  安装依赖库，启动本地服务后，访问 <http://localhost:3000>。
+
+      请在demo目录下执行以下命令：
+
+      ```
+      npm i && npm run dev
+      ```
+
+      <img src="../assets/ziyingyong_202501201850_15.png" class="imgStyle" style="" />
+
+      左侧菜单栏是主应用，右侧的内容是由CodeWave平台搭建的子应用。当点击Student菜单时，如果未登录，则会跳转到登录页；如果已登录，则会展示上图。当点击NoAuth菜单时，则会跳转到无权限页面。点击NotFound菜单，则会跳转到404页面。如果这几个页面的地址没有配置，则会跳转到CodeWave应用的对应页面；如果已经进行了配置，则会跳转到配置的页面地址。
+
+### 无界(wujie)主应用 Demo配置
+
+无界(wujie)主应用 demo 是基于[无界wujie 项目](https://github.com/Tencent/wujie/tree/master/examples/main-vue)修改的。
+
+> 点击下载：[无界(wujie)主应用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)
+
+
+1.  发布应用后，请在`\main-vue\src\views\Multiple.vue` 文件中修改url地址，用于注册微应用。
+
+      <img src="../assets/ziyingyong_202501201850_16.png" class="imgStyle" style="" />
+
+      <img src="../assets/ziyingyong_202501201850_17.png" class="imgStyle" style="" />
+
+2.  安装依赖库，启动本地服务后，访问 <http://localhost:8000>。
+
+      请在demo目录下执行以下命令：
+      ```
+      pnpm install // 依赖安装
+      cd examples/main-vue 
+      pnpm start
+      ```
+
+      <img src="../assets/ziyingyong_202501201850_18.png" class="imgStyle" style="" />
+
+## 4. 源码导出与微前端集成
+
+CodeWave应用也可以通过导出源码的方式进行部署，并且导出源码同时支持微前端集成，具体使用步骤如下：
+
+1.  导出源码：导出方式选择 源码，源码形式选择：后端代码+前端代码。
+
+      <img src="../assets/ziyingyong_202501201850_19.png" class="imgStyle" style="" />
+
+2.  启动服务：如何部署导出的源码可参考[应用导出源码并部署](../../../30.应用生命周期管理/100.应用导出与部署/20.应用导出源码并部署.md)。
+
+      如果只是要查看微前端集成效果的话，可以只启动前端服务。
+
+      1. 进入目录 client/pc
+      2. 修改 vue.config.js 文件，将本地接口代理改为CodeWave平台部署后的地址，比如
+
+            <img src="../assets/ziyingyong_202501201850_20.png" class="imgStyle" style="" />
+
+      3. 安装依赖库，启动服务
+
+         ```
+         npm i && npm run serve
+         ```
+
+      访问 <http://localhost:8810/>， 可以查看启动的前端服务。
+
+3.  请按照主应用Demo配置说明来配置主应用，同时修改请求转发的target及entry信息。
+
+      <img src="../assets/ziyingyong_202501201850_21.png" class="imgStyle" style="width:400px" />
+
+      <img src="../assets/ziyingyong_202501201850_22.png" class="imgStyle" style="width:400px" />
+
+1.  请修改examples\main\index.js配置文件，启动应用。
+
+      <img src="../assets/ziyingyong_202501201850_23.png" class="imgStyle" style="width:400px" />
+
+      <div class="highlight">
+
+      注意：乾坤(qiankun)提供了一个实验性的样式隔离特性，当 experimentalStyleIsolation 被设置为 true 时，乾坤(qiankun) 会改写子应用所添加的样式为所有样式规则增加一个特殊的选择器规则来限定其影响范围，可参考：[乾坤 API 说明](https://qiankun.umijs.org/zh/api#startopts)。
+
+      这个特性，CodeWave平台直接部署的应用是不支持开启，只有导出源码可以支持。一般不建议开启该特性。
+
+      如果需要开启的，需要手动修改导出的源码，请启用src/main.js文件中下面这行注释代码。
+
+      <img src="../assets/ziyingyong_202501201850_24.png" class="imgStyle" style="" />
+
+      同理导出的源码也支持飞冰(icestark)框架的微前端集成，只需要参考飞冰(icestark)主应用Demo中的请求转发配置修改target和entry即可。
+
+      </div>
+
+
+
+2.  请参考[主应用Demo配置](#3-主应用demo配置)，安装依赖库及启动主应用。
+
+## 5. 其他说明
+
+- 当主应用和子应用都使用微前端时，可能会出现资源冲突的情况，此时需要有一方导出独立部署，才可以满足需求。在实际应用中，只有一部分是依托在平台的，当各个系统都需要用微前端的时候，需进行独立部署并修改代码。
+- 2.22版本之前的CodeWave应用使用微前端集成，需要将应用升级至2.22以上版本，登录扩展组件升级至1.2.2以上版本。
+
+   应用升级步骤可参考：[应用升级与回退](../../../30.应用生命周期管理/080.应用的升级与回退.md)。
+
+   登录扩展组件升级步骤如下：
+
+   1.  应用ide找到“系统偏好设置”。
+
+         <img src="../assets/ziyingyong_202501201850_25.png" class="imgStyle" style="" />
+
+   1.  找到扩展组件管理，点击"编辑"。
+
+         <img src="../assets/ziyingyong_202501201850_26.png" class="imgStyle" style="width:400px" />
+
+   1.  更新登录扩展组件版本。
+
+         <img src="../assets/ziyingyong_202501201850_27.png" class="imgStyle" style="width:400px" />
+
+<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>