codewave-openclaw-installer 1.0.0

package/skills/smart-customer-service/docs/codewave/80./345/270/270/350/247/201/345/234/272/346/231/257/346/241/210/344/276/213/80./344/270/232/345/212/241/345/234/272/346/231/257/125./345/246/202/344/275/225/345/260/206/346/225/260/346/215/256/346/237/245/350/257/242/347/273/223/346/236/234/347/232/204/347/261/273/345/236/213/350/275/254/346/215/242/344/270/272/345/256/236/344/275/223/346/225/260/347/273/204.md

@@ -0,0 +1,29 @@
+# 如何将数据查询结果的类型转换为实体数组
+
+## 1. 场景介绍
+
+当进行数据查询操作后，得到的查询结果数据类型与实际所需的数据类型不相符时，IDE 下方问题窗口会提示 “参数类型不一致！” 。比如这里提到的查询结果为`List<{student: Student}>`类型，而所需结果是`List<Student>`（ `List<实体>`）类型，这种差异就需要通过合适的方式来解决，以确保数据能在后续操作中正确使用。
+
+<img src="../assets/ruhezhuanhuanchaxunjieguoshujuleixing_202411191530_1.png" class="imgStyle" style="" />
+
+## 2. 实现思路
+
+在平台中可以使用内置函数Transform转换数据类型。内置函数Transform用于根据by定义的处理方式对列表的每一项数据进行处理，得到新项，返回新项构成的列表，详情可参见：[列表（List）函数 - Transform](../../20.应用开发/15.逻辑功能实现/50.内置函数使用/20.列表（List）函数.md)。
+
+<img src="../assets/ruhezhuanhuanchaxunjieguoshujuleixing_202411191530_2.png" class="imgStyle" style="" />
+
+## 3. 操作步骤
+
+使用内置函数转换原始数据结构，拖拽内置函数组件至赋值组件右侧插槽，选择Transform内置函数。
+
+- list参数插槽放置原有数据查询组件，即要处理的原始数据。
+- by参数插槽放置变量与常量组件选择item.student。
+
+<img src="../assets/ruhezhuanhuanchaxunjieguoshujuleixing_202411191530_3.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);">2024年11月19日</span>
+</div>

package/skills/smart-customer-service/docs/codewave/80./345/270/270/350/247/201/345/234/272/346/231/257/346/241/210/344/276/213/80./344/270/232/345/212/241/345/234/272/346/231/257/130./345/246/202/344/275/225/350/216/267/345/217/226JSON/351/207/214/351/235/242/347/232/204/346/237/220/344/270/252/345/261/236/346/200/247.md

@@ -0,0 +1,49 @@
+# 如何获取JSON里面的某个属性
+
+## 1. 场景介绍
+
+在实际应用中，可能会从数据库查询结果或API调用中获得 JSON 文本数据，并希望从中提取特定的属性来进行进一步处理或展示。这种情况下，需要将 JSON 文本解析为特定的数据结构，并从中获取所需的属性。
+
+## 2. 前提条件
+
+- 已有一个JSON 文本
+
+    ```JSON
+    {
+    "name": "Alice",
+    "age": 30, 
+    "city": "New York"
+    }
+    ```
+
+- 已有与JSON文本对应的数据结构JsonStructure。
+
+    <img src="../assets/rhhqjs_202406171538_1.png" class="imgStyle" style="" />
+
+## 3. 操作步骤
+
+1. 新建页面逻辑dataProcessingLogic，并添加局部变量jsonText（用于暂存已有JSON 文本）、局部变量structuralData（用于暂存转换后的数据结构）和输出参数result。
+
+   <img src="../assets/rhhqjs_202406171538_2.png" class="imgStyle" style="" />
+2. 使用局部变量jsonText暂存JSON 文本，本案例直接使用已有JSON 文本数据，实际应用时请根据具体需求获取原始需要转换的数据。
+
+   <img src="../assets/rhhqjs_202406171538_3.png" class="imgStyle" style="" />
+3. 将已有JSON 文本数据反序列化为JsonStructure数据结构并赋值给structuralData局部变量。
+
+   <img src="../assets/rhhqjs_202406171538_4.png" class="imgStyle" style="" />
+4. 现在如果想要获取JSON 里的某个属性即可通过structuralData局部变量获取。
+
+   如下获取JSON中的name属性：
+
+   <img src="../assets/rhhqjs_202406171538_5.png" class="imgStyle" style="" />
+
+## 4. 说明
+
+- 逻辑组件JSON反序列化用于将JSON文本转换成实体或数据结构，常用于将数据库中查询到的JSON文本或API调用后获取到的文本转换成指定格式的数据。详情可参见：[其他 - JSON反序列化](../../20.应用开发/15.逻辑功能实现/50.内置函数使用/40.其他函数.md)。
+
+<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年6月17日</span>
+</div>

package/skills/smart-customer-service/docs/codewave/80./345/270/270/350/247/201/345/234/272/346/231/257/346/241/210/344/276/213/80./344/270/232/345/212/241/345/234/272/346/231/257/133./345/246/202/344/275/225/345/256/236/347/216/260/344/270/215/345/220/214/346/235/203/351/231/220/350/264/246/345/217/267/347/231/273/345/275/225/345/220/216/350/267/263/350/275/254/345/210/260/344/270/215/345/220/214/351/241/265/351/235/242.md

@@ -0,0 +1,69 @@
+# 如何实现不同权限账号登录后跳转到不同页面
+
+## 场景介绍
+
+不同角色的账号在登录后需要跳转到不同的页面。当账号的角色为教师时，登录后跳转到教师首页；当账号的角色为教师以外时，登录后跳转到学生首页。
+
+本案例的判断跳转页面的条件为账号对应的角色名称（角色实体的name字段），开发者实现该场景时可根据实际需要进行调整，例如，可以将用户账号所拥有的权限或资源以及其他自定义数据作为判断跳转页面的条件。
+
+## 前置准备
+
+已创建角色及相关账号。
+
+<img src="../assets/ruheshixianbutongquanxianzhanghaodengluhoutiaozhuandaobutongyemian_202406191400_1.png" class="imgStyle" style="" />
+
+已创建不同角色登录后需要跳转的页面。
+
+<img src="../assets/ruheshixianbutongquanxianzhanghaodengluhoutiaozhuandaobutongyemian_202406191400_2.png" class="imgStyle" style="" />
+
+## 操作步骤
+
+1.  创建服务端逻辑，该逻辑用于根据userId查询账号所对应的角色名称列表。
+
+    为逻辑添加输出参数。
+
+    <img src="../assets/ruheshixianbutongquanxianzhanghaodengluhoutiaozhuandaobutongyemian_202406191400_3.png" class="imgStyle" style="" />
+
+2.  添加List\<String>类型的局部变量roleList，使用数据查询组件并赋值给roleList变量，用于查询账号所拥有的角色。
+
+    <img src="../assets/ruheshixianbutongquanxianzhanghaodengluhoutiaozhuandaobutongyemian_202406191400_4.png" class="imgStyle" style="" />
+
+3.  双击数据查询组件进入编辑界面，查询数据源为用户角色中间表（LCAPUserRoleMapping）和角色表（LCAPRole）。
+
+    <img src="../assets/ruheshixianbutongquanxianzhanghaodengluhoutiaozhuandaobutongyemian_202406191400_5.png" class="imgStyle" style="" />
+
+4.  筛选条件为用户角色中间表（LCAPUserRoleMapping）的userId属性等于服务端全局变量currentUser的userId属性。
+
+    > currentUser代表接口调用方的用户信息，当从页面调用服务端逻辑时，可在服务端逻辑中使用currentUser读取页面所登录的用户信息。详细介绍可参考[服务端全局变量](../../20.应用开发/15.逻辑功能实现/90.服务端全局变量.md)
+
+    <img src="../assets/ruheshixianbutongquanxianzhanghaodengluhoutiaozhuandaobutongyemian_202406191400_6.png" class="imgStyle" style="" />
+
+5.  对查询结果列表进行循环，将每一项的角色名称使用Add函数添加到输出参数中。
+
+    <img src="../assets/ruheshixianbutongquanxianzhanghaodengluhoutiaozhuandaobutongyemian_202406191400_7.png" class="imgStyle" style="" />
+
+6.  打开登录页面，选中登录组件，添加“登陆成功后”事件。
+
+    <img src="../assets/ruheshixianbutongquanxianzhanghaodengluhoutiaozhuandaobutongyemian_202406191400_8.png" class="imgStyle" style="" />
+
+7.  在登陆成功后事件中调用上文创建的服务端逻辑，查询出当前登录用户的角色列表，使用内置函数Contains判断角色列表中是否包含“教师”角色，如果有则跳转到教师首页，否则跳转到学生首页。
+
+    <img src="../assets/ruheshixianbutongquanxianzhanghaodengluhoutiaozhuandaobutongyemian_202406191400_9.png" class="imgStyle" style="" />
+
+## 效果演示
+
+当登录账号有教师角色时，会跳转到教师首页。
+
+<img src="../assets/ruheshixianbutongquanxianzhanghaodengluhoutiaozhuandaobutongyemian_202406191400_10.gif" class="imgStyle" style="" />
+
+登录账号不为教师角色时，跳转到学生首页。
+
+<img src="../assets/ruheshixianbutongquanxianzhanghaodengluhoutiaozhuandaobutongyemian_202406191400_11.gif" 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);">2024年6月19日</span>
+</div>
+                

package/skills/smart-customer-service/docs/codewave/80./345/270/270/350/247/201/345/234/272/346/231/257/346/241/210/344/276/213/80./344/270/232/345/212/241/345/234/272/346/231/257/140./345/246/202/344/275/225/344/275/277/347/224/250/347/273/204/344/273/266/345/240/206/345/217/240.md

@@ -0,0 +1,62 @@
+# 如何使用组件堆叠
+
+## 1. 场景介绍
+
+在 CodeWave 智能开发平台中，组件堆叠是创建复杂用户界面布局的常见方式。通过将不同页面组件叠加，可形成更具交互性和吸引力的界面设计。以 CodeWave 智能开发平台官网首页为例，如果要构建一个产品展示页面，通常需要将产品宣传图片、平台标题以及可视化开发入口按钮等不同的页面组件进行堆叠。
+
+<img src="../assets/rhsyzj_202406241055_1.png" class="imgStyle" style="" />
+
+## 2. 实现思路
+
+在CodeWave智能开发平台可以通过自由布局来实现组件堆叠。[自由布局](../../20.应用开发/10.页面设计/20.PC端Vue2组件说明（默认）/01.布局/050.自由布局.md)、[线性布局](../../20.应用开发/10.页面设计/20.PC端Vue2组件说明（默认）/01.布局/020.线性布局.md)一样等布局组件，可以用来进行页面布局。本案例主要讲解自由布局如何实现组件堆叠，在平台中自由布局可以用来搭建任何类型的网页，但它尤其适合那些对页面还原度要求比较高，页面布局效果比较丰富的网页。
+
+## 3. 操作步骤
+
+1.  选择布局组件：在 CodeWave 智能开发平台的页面组件面板中，查找并选中自由布局组件。接着，将其拖入页面中，并根据实际需求，调整自由布局样式的属性，比如组件的宽度和高度等。
+
+    <img src="../assets/rhsyzj_202406241055_2.png" class="imgStyle" style="" />
+
+1.  将所需的组件按照层次关系和显示顺序，拖拽放置到自由布局组件内部，并设置各组件的属性，如大小、颜色等，以达到理想的效果。
+
+    - 拖入图片组件，并设置组件的属性：
+
+        <img src="../assets/rhsyzj_202406241055_3.png" class="imgStyle" style="" />
+
+        <img src="../assets/rhsyzj_202406241055_4.png" class="imgStyle" style="" />
+
+    - 拖入文本组件，并设置组件的属性：
+
+        <img src="../assets/rhsyzj_202406241055_5.png" class="imgStyle" style="" />
+
+    - 拖入按钮组件，并设置组件的属性：
+
+        <img src="../assets/rhsyzj_202406241055_6.png" class="imgStyle" style="" />
+
+    需要注意的是，以上仅挑选了个别操作进行演示。在具体的应用过程中，请依据实际需求以及各组件的使用说明，自行准确地设置各组件对应的属性，从而实现完美的界面设计。
+
+1.  调整组件位置：根据设计需求，通过拖拽或设置组件属性等方式将组件放置在合适的位置。
+
+    - 通过设置属性调整组件位置：
+
+        <img src="../assets/rhsyzj_202406241055_7.png" class="imgStyle" style="" />
+
+    - 通过拖拽调整组件位置：
+
+        <img src="../assets/rhsyzj_202406241055_8.gif" class="imgStyle" style="" />
+
+## 4. 效果演示
+
+<img src="../assets/rhsyzj_202406241055_9.png" class="imgStyle" style="" />
+
+## 5. 补充说明
+
+- 在进行组件堆叠时，需注意组件之间的层次关系和显示顺序，以确保不同组件的功能和样式相互配合。
+
+
+<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月24日</span>
+</div>
+                

package/skills/smart-customer-service/docs/codewave/80./345/270/270/350/247/201/345/234/272/346/231/257/346/241/210/344/276/213/80./344/270/232/345/212/241/345/234/272/346/231/257/145./345/246/202/344/275/225/345/256/236/347/216/260/345/212/250/346/200/201/345/261/225/347/244/272/350/241/250/346/240/274/350/241/214/346/240/267/345/274/217.md

@@ -0,0 +1,148 @@
+# 如何实现动态展示表格行样式
+
+## 1. 场景介绍
+
+已有如下数据表格，希望实现如下两点样式需求。
+
+- 原始效果：
+
+<img src="../assets/dongtaizhanshibiaogexingyangshi_202408201701_1.png" class="imgStyle" style="" />
+
+**需求一：根据项目状态展示表格行的背景色。**
+
+例如当项目状态为已废弃时，表格行背景色为#ebebeb；当项目状态为已完成时，表格行背景色为#26bd7180；当项目状态为已暂停时，表格行背景色为#f2495780。
+
+- 期望效果：
+
+<img src="../assets/dongtaizhanshibiaogexingyangshi_202408201701_2.png" class="imgStyle" style="" />
+
+**需求二：自定义表格行边框样式。**
+
+例如表格行边框为宽度1px的黑色虚线。
+
+- 期望效果：
+
+<img src="../assets/dongtaizhanshibiaogexingyangshi_202408201701_3.png" class="imgStyle" style="" />
+
+## 2. 前提条件
+
+已有项目实体Project包含以下属性，在页面中拖拽生成列表（全）。
+
+- name：存储项目的名称，String类型。
+- status：存储项目的状态，枚举类型。
+
+<img src="../assets/dongtaizhanshibiaogexingyangshi_202408201701_4.png" class="imgStyle" style="" />
+
+<img src="../assets/dongtaizhanshibiaogexingyangshi_202408201701_5.png" class="imgStyle" style="" />
+
+实体Project的属性status的数据类型ProjectEnum参考值如下：
+
+<img src="../assets/dongtaizhanshibiaogexingyangshi_202408201701_6.png" class="imgStyle" style="" />
+
+## 3. 操作步骤
+
+### 3.1 编辑表格行动态样式
+
+1.  选中数据表格，进入数据表格的“表格行动态样式”属性的编辑表达式界面。
+
+    <img src="../assets/dongtaizhanshibiaogexingyangshi_202408201701_7.png" class="imgStyle" style="" />
+
+1.  编辑表达式时默认包含匿名数据结构`<backgroundColor:String,color:String>`。其中backgroundColor属性用于匹配背景颜色，color属性用于匹配文字颜色。
+
+    <img src="../assets/dongtaizhanshibiaogexingyangshi_202408201701_8.png" class="imgStyle" style="" />
+
+### 3.2 设置表格行背景色
+
+1.  向初始化backgroundColor属性的文本框中拖拽匹配组件，匹配值为current.item.project.status。即表示根据项目状态来匹配背景颜色。
+
+    <img src="../assets/dongtaizhanshibiaogexingyangshi_202408201701_9.png" class="imgStyle" style="" />
+
+1.  填写匹配的结果，例如匹配枚举值为已完成时输入结果#26bd7180。值为空时表示维持默认颜色。
+
+    <img src="../assets/dongtaizhanshibiaogexingyangshi_202408201701_10.png" class="imgStyle" style="" />
+
+### 3.3 设置表格行边框
+
+1.  为匿名数据结构新增属性，命名为border，用于匹配表格行边框的CSS样式。
+
+    <img src="../assets/dongtaizhanshibiaogexingyangshi_202408201701_11.png" class="imgStyle" style="" />
+
+1.  使用文本组件初始化border属性的样式值为“1px dashed black“，即宽度1px的黑色虚线边框。
+
+    <img src="../assets/dongtaizhanshibiaogexingyangshi_202408201701_12.png" class="imgStyle" style="" />
+
+1.  发布预览效果。
+
+## 4. 效果演示
+
+<img src="../assets/dongtaizhanshibiaogexingyangshi_202408201701_13.gif" class="imgStyle" style="" />
+
+## 5. 其他说明
+
+在“表格行动态样式”的编辑表达式中，匿名数据结构的属性名实质上充当了映射角色，它们精确对应着表格行的CSS属性名称。而这些属性名所关联的值，则直接对应于这些CSS属性所期望的具体样式值，从而实现了对表格行样式的动态初始化。
+
+常见CSS属性名称如下：
+
+<div class="highlight">
+
+命名时注意使用小驼峰命名法。
+
+</div>
+
+| 属性名                     | 描述                                  |
+| :---------------------- | :---------------------------------- |
+| backgroundColor         | 背景色，如#337eff、rgba(51,126,255,1)等    |
+| color                   | 文字颜色，如#000000、black或rgba(0,0,0,1)等  |
+| fontSize                | 文字大小，如24px                          |
+| borderTopStyle          | 顶部边框样式，如solid、dashed或dotted         |
+| borderTopColor          | 顶部边框颜色，如#337eff、rgba(51,126,255,1)等 |
+| borderTopWidth          | 顶部边框宽度，如1px                         |
+| borderBottomStyle       | 底部边框样式，如solid、dashed或dotted         |
+| borderBottomColor       | 底部边框颜色，如#337eff、rgba(51,126,255,1)等 |
+| borderBottomWidth       | 底部边框宽度，如1px                         |
+| borderLeftStyle         | 左侧边框样式，如solid、dashed或dotted         |
+| borderLeftColor         | 左侧边框颜色，如#337eff、rgba(51,126,255,1)等 |
+| borderLeftWidth         | 左侧边框宽度，如1px                         |
+| borderRightStyle        | 右侧边框样式，如solid、dashed或dotted         |
+| borderRightColor        | 右侧边框颜色，如#337eff、rgba(51,126,255,1)等 |
+| borderRightWidth        | 右侧边框宽度，如1px                         |
+| borderTopLeftRadius     | 左上角边框圆角半径，如5px                      |
+| borderTopRightRadius    | 右上角边框圆角半径，如5px                      |
+| borderBottomLeftRadius  | 左下角边框圆角半径，如5px                      |
+| borderBottomRightRadius | 右下角边框圆角半径，如5px                      |
+| height                  | 高度，如42px                            |
+| paddingTop              | 上内边距，如10px                          |
+| paddingBottom           | 下内边距，如10px                          |
+| paddingLeft             | 左内边距，如10px                          |
+| paddingRight            | 右内边距，如10px                          |
+
+<div class="highlight">
+
+CSS属性的写法是灵活多样的：
+
+例如borderTopStyle、borderTopColor、borderTopWidth可以合并书写为borderTop，"borderTop：2px solid black"即表示将顶部边框设为2像素宽度的黑色实线边框。
+
+其次需要注意，无论是单独书写还是合并书写，都需要指定边框样式才能使边框显示，因为默认的边框样式是none。
+
+可前往[w3schools](https://www.w3schools.com/jsref/dom_obj_style.asp)学习更多CSS知识。
+
+</div>
+
+<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年08月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/80./345/270/270/350/247/201/345/234/272/346/231/257/346/241/210/344/276/213/80./344/270/232/345/212/241/345/234/272/346/231/257/145./345/246/202/344/275/225/345/260/206/345/233/276/347/211/207/344/270/212/344/274/240/345/210/260/345/256/236/344/275/223.md

@@ -0,0 +1,78 @@
+# 如何将图片上传到实体
+
+## 1. 场景介绍
+
+在许多应用场景中，需要将图片上传并与特定的实体进行关联。例如，在一个电子商务平台中，商品实体可能需要关联展示图片；在一个社交网络应用中，用户实体可能需要上传头像图片。那么，该如何将图片上传到实体数据中呢？
+
+## 2. 实现思路
+
+通过[文件上传](../../20.应用开发/10.页面设计/20.PC端Vue2组件说明（默认）/60.表单/158.文件上传.md)组件，将图片信息暂时存储，再调用[实体的创建或更新逻辑](../../20.应用开发/15.逻辑功能实现/10.逻辑IDE/15.逻辑分类/25.实体逻辑.md)将图片信息添加到实体数据中。
+
+<img src="../assets/ruhejiangtupianshangchuandaoshiti_202408281527_1.png" class="imgStyle" style="" />
+
+## 3. 前提条件
+
+已有商品信息实体，包含商品名称、商品图片、商品单价等属性。
+
+<img src="../assets/ruhejiangtupianshangchuandaoshiti_202408281527_2.png" class="imgStyle" style="" />
+
+## 4. 操作步骤
+
+### 4.1 基础页面构建
+
+拖拽实体至页面，选择列表（全）。这样可以快速构建出一个包含商品信息的基础页面，为后续的操作提供基础布局。
+
+<img src="../assets/ruhejiangtupianshangchuandaoshiti_202408281527_3.gif" class="imgStyle" style="" />
+
+### 4.2 图片上传设置
+
+1.  将“修改/创建”弹窗中商品图表单项内原有组件移除，再在该表单项内拖拽放置一个文档上传组件，选择单文件上传。
+
+    <img src="../assets/ruhejiangtupianshangchuandaoshiti_202408281527_4.gif" class="imgStyle" style="" />
+
+1.  选中“文件上传组件”，将组件的值属性绑定为input.img。
+
+    点击“值”属性输入框右侧按钮，进入表达式编辑页面。
+
+    <img src="../assets/ruhejiangtupianshangchuandaoshiti_202408281527_5.png" class="imgStyle" style="" />
+
+    将该组件的值属性绑定为 “input.img”，同时开启 “将组件输入赋值给变量” 设置。
+
+    开启 “将组件输入赋值给变量” 设置，用于确保文件上传组件的输入能够正确地被赋值给指定的变量。文件上传组件通常会包含用户选择的文件信息，通过将其输入赋值给变量，可以在后续的逻辑中方便访问和处理这个文件。例如，可以对上传的图片进行进一步的操作，如将图片信息保存到特定的存储位置等。
+
+    <img src="../assets/ruhejiangtupianshangchuandaoshiti_202408281527_6.png" class="imgStyle" style="" />
+
+1.  将文件上传组件“转换器”属性设置为URL字符串，即将上传文件后“值”属性为设置URL字符串对应的链接地址，方便在页面中直接引用和展示图片。
+
+    URL字符串格式参考如下：
+    ```
+    /upload/app/5acfe257-4edb-472f-b27c-9f74b1f49e11/block\_20240828103817902.png
+    ```
+    <img src="../assets/ruhejiangtupianshangchuandaoshiti_202408281527_7.png" class="imgStyle" style="" />
+
+### 4.3 图片回显处理
+
+为了在数据表格中直观地展示已上传的商品图片，需要进行以下操作：
+
+1.  移除“商品图”表格列中原有组件，添加一个图片展示组件，该组件可以根据商品实体中的img属性（图片URL）进行图片的加载和显示。
+
+    <img src="../assets/ruhejiangtupianshangchuandaoshiti_202408281527_8.gif" class="imgStyle" style="" />
+
+1.  将“图片展示”组件的值属性绑定为 “current.item.product.img”，即当前商品对应的图片URL。
+
+    <img src="../assets/ruhejiangtupianshangchuandaoshiti_202408281527_9.png" class="imgStyle" style="" />
+
+    <img src="../assets/ruhejiangtupianshangchuandaoshiti_202408281527_10.png" class="imgStyle" style="" />
+
+## 5. 效果演示
+
+商品图片的上传和列表展示。
+
+<img src="../assets/ruhejiangtupianshangchuandaoshiti_202408281527_11.gif" 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);">2024年08月28日</span>
+</div>

package/skills/smart-customer-service/docs/codewave/80./345/270/270/350/247/201/345/234/272/346/231/257/346/241/210/344/276/213/80./344/270/232/345/212/241/345/234/272/346/231/257/150./344/270/212/344/274/240/345/233/276/347/211/207/346/227/266/345/246/202/344/275/225/350/256/276/347/275/256/345/277/205/345/241/253.md

@@ -0,0 +1,36 @@
+# 上传图片时如何设置必填
+
+## 1. 场景介绍
+
+在许多应用程序中，上传图片是一个常见的功能需求。有时，为了确保数据的完整性或满足特定的业务逻辑，需要将上传图片的操作设置为必填项。例如，在一个商品管理系统中，添加商品时必须上传商品的图片以便更好地展示商品信息。
+
+## 2. 实现思路
+
+平台内置组件-表单提供表单必填校验，可通过将表单项设置为必填项，从而在提交表单时，发起表单校验，有关表单的详细使用说明请参见：[表单](../../20.应用开发/10.页面设计/20.PC端Vue2组件说明（默认）/60.表单/010.表单.md)。
+
+## 3. 操作步骤
+
+>本案例着重讲解上传图片时如何设置必填，有关上传图片基础页面的构建可参见场景：[如何将图片上传到实体 ](../../80.常见场景案例/80.业务场景/145.如何将图片上传到实体.md)。
+
+选中商品信息录入表单的商品图表单项。
+
+开启表单项的“必填”属性。
+
+<img src="../assets/shangchuantupianshiruheshezhibitian_202408281522_1.png" class="imgStyle" style="" />
+
+设置其“验证规则”为“required”，即该表单项不得为空。有关表单的验证规则详细说明请参见：[验证规则](../../20.应用开发/10.页面设计/35.验证规则.md)。
+
+<img src="../assets/shangchuantupianshiruheshezhibitian_202408281522_2.png" class="imgStyle" style="" />
+
+<img src="../assets/shangchuantupianshiruheshezhibitian_202408281522_3.png" class="imgStyle" style="" />
+
+## 4. 效果演示
+
+<img src="../assets/shangchuantupianshiruheshezhibitian_202408281522_4.gif" 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);">2024年08月28日</span>
+</div>

package/skills/smart-customer-service/docs/codewave/80./345/270/270/350/247/201/345/234/272/346/231/257/346/241/210/344/276/213/80./344/270/232/345/212/241/345/234/272/346/231/257/160./345/246/202/344/275/225/345/234/250/345/210/207/346/215/242H5/351/241/265/351/235/242/346/227/266/344/277/256/346/224/271/347/210/266/351/241/265/351/235/242/344/270/255/347/232/204/346/240/207/351/242/230.md

@@ -0,0 +1,48 @@
+# 如何在切换H5页面时修改父页面中的标题
+
+## 1. 场景介绍
+
+在平台开发的 H5 应用中，有时需要在切换页面时动态地修改父页面的标题，以便更好地反映当前页面的内容或满足特定的业务需求。例如，在一个多页面的电商应用中，当用户从商品列表页切换到商品详情页时，修改父页面标题可以明确显示当前正在查看的商品信息，提升用户体验和应用的可读性。
+
+## 2. 前提条件
+
+已有基础父子页面，页面标题固定展示。
+
+<img src="../assets/ruhezaiqiehuanH5yemianshixiugaifuyemianzhongdebiaoti_202408281736_1.gif" class="imgStyle" style="" />
+
+## 3. 操作步骤
+
+### 3.1 添加前端全局变量
+
+添加一个前端全局变量，命名为 “pageTitle”，并将其数据类型设置为 “String 文本类型”。前端全局变量可以在整个应用端中被访问和使用，通常用于存储一些在多个页面之间需要共享的数据，并在页面之间传递这些数据。
+
+<img src="../assets/ruhezaiqiehuanH5yemianshixiugaifuyemianzhongdebiaoti_202408281736_2.png" class="imgStyle" style="" />
+
+### 3.2 动态绑定标题文本
+
+将原本固定展示的标题文本 “CodeWave”，通过动态绑定的方式与前端全局变量 “pageTitle” 关联起来。用于，后续通过修改 “pageTitle” 的值来动态改变页面标题。
+
+<img src="../assets/ruhezaiqiehuanH5yemianshixiugaifuyemianzhongdebiaoti_202408281736_3.png" class="imgStyle" style="" />
+
+<img src="../assets/ruhezaiqiehuanH5yemianshixiugaifuyemianzhongdebiaoti_202408281736_4.png" class="imgStyle" style="" />
+
+### 3.3 为子页面添加事件逻辑
+
+为所有子页面添加“进入时”事件逻辑。这个事件会在用户进入子页面时触发。
+
+<img src="../assets/ruhezaiqiehuanH5yemianshixiugaifuyemianzhongdebiaoti_202408281736_5.png" class="imgStyle" style="" />
+
+编辑子页面的 “进入时” 事件逻辑，将子页面的标题赋值给前端全局变量 “pageTitle”。例如，如果子页面标题为 “商品”，则将 “商品” 赋值给 “pageTitle”。确保所有子页面都添加了这个 “进入时” 事件逻辑，以便在切换到任何子页面时都能正确更新父页面标题。
+
+<img src="../assets/ruhezaiqiehuanH5yemianshixiugaifuyemianzhongdebiaoti_202408281736_6.png" class="imgStyle" style="" />
+
+## 4. 效果演示
+
+<img src="../assets/ruhezaiqiehuanH5yemianshixiugaifuyemianzhongdebiaoti_202408281736_7.gif" 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);">2024年08月28日</span>
+</div>

package/skills/smart-customer-service/docs/codewave/80./345/270/270/350/247/201/345/234/272/346/231/257/346/241/210/344/276/213/80./344/270/232/345/212/241/345/234/272/346/231/257/170./345/246/202/344/275/225/345/256/236/347/216/260/345/234/250/350/276/223/345/205/245/346/241/206/345/206/205/345/233/236/350/275/246/346/237/245/350/257/242/346/225/260/346/215/256.md

@@ -0,0 +1,76 @@
+# 如何实现在输入框内回车查询数据
+
+## 1. 场景介绍
+
+在许多应用程序中，输入框回车查询数据的功能非常常见。以商品管理页面为例，用户输入商品名称后按回车键，系统应迅速查询并展示相关商品列表，这极大地提高了制品用户的操作效率和体验。
+
+<img src="../assets/shurukuangneihuichechaxunshuju_202411071357_1.gif" class="imgStyle" style="" />
+
+## 2. 实现思路
+
+<img src="../assets/shurukuangneihuichechaxunshuju_202411071357_2.png" class="imgStyle" style="" />
+
+## 3. 操作步骤
+
+### 3.1 创建实体
+
+- name：商品名称，String文本类型。
+- img：商品图，String文本类型。
+- price：商品单价，Decimal 小数。
+
+<img src="../assets/shurukuangneihuichechaxunshuju_202411071357_3.png" class="imgStyle" style="" />
+
+### 3.2 构建基础页面
+
+#### 3.2.1 拖拽商品实体生成页面元素
+
+将商品实体拖拽到页面上，选择数据列表（全）。这一步操作会自动在页面上生成与商品实体相关的展示组件，包括显示商品名称、图片、价格等信息的元素。
+
+<img src="../assets/shurukuangneihuichechaxunshuju_202411071357_4.png" class="imgStyle" style="" />
+
+#### 3.2.2 调整页面元素
+
+1.  替换不符合需求组件：根据具体的设计需求和功能要求，对页面上的组件进行替换。例如，如果 “单行输入” 组件不符合当前的交互需求，可以将其替换为 “文件上传” 组件。
+
+    <img src="../assets/shurukuangneihuichechaxunshuju_202411071357_5.gif" class="imgStyle" style="" />
+
+    在进行组件替换时，需要考虑新组件的属性设置和数据绑定，确保其能够正确地与其他页面元素协同工作。
+
+    <img src="../assets/shurukuangneihuichechaxunshuju_202411071357_6.png" class="imgStyle" style="" />
+
+1.  移除多余组件：为了简化页面布局和提高用户体验，需要移除一些多余的组件。在本案例中，为了便于演示 “输入框回车查询数据场景效果”，将“查询”按钮移除。
+
+    <img src="../assets/shurukuangneihuichechaxunshuju_202411071357_7.png" class="imgStyle" style="" />
+
+    在移除组件时，需要注意该组件是否与其他页面元素存在关联或依赖关系。如果有，需要在移除前后进行适当的调整或处理，以确保页面的正常功能不受影响。
+
+### 3.3 监听输入框的键盘事件
+
+选中商品名称输入框，为其添加键盘按下事件逻辑。
+
+<img src="../assets/shurukuangneihuichechaxunshuju_202411071357_8.png" class="imgStyle" style="" />
+
+编辑事件逻辑，调用[ compareKeyboardInput ](../../20.应用开发/15.逻辑功能实现/10.逻辑IDE/15.逻辑分类/60.系统逻辑.md#comparekeyboardinput)系统逻辑，检查制品用户是否按下了'Enter'键（回车键），当检测到'Enter'键被按下时，调用数据表格的reload 组件逻辑，重新加载数据表格组件。
+
+<img src="../assets/shurukuangneihuichechaxunshuju_202411071357_9.png" class="imgStyle" style="" />
+
+### 3.4 发布预览
+
+至此，已经实现“用户输入商品名称后按回车键，数据表格显示相关的商品列表，可以通过发布预览，调试功能。
+
+<img src="../assets/shurukuangneihuichechaxunshuju_202411071357_10.png" class="imgStyle" style="" />
+
+发布预览页面后，先录入商品数据，然后再进行功能调试。
+
+<img src="../assets/shurukuangneihuichechaxunshuju_202411071357_11.gif" class="imgStyle" style="" />
+
+## 4. 效果演示
+
+<img src="../assets/shurukuangneihuichechaxunshuju_202411071357_1.gif" 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);">2024年11月07日</span>
+</div>