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/40./347/273/204/344/273/266/345/234/272/346/231/257/40./345/205/266/344/273/226/347/273/204/344/273/266/345/234/272/346/231/257/020./345/246/202/344/275/225/344/275/277/347/224/250/344/270/212/344/274/240/347/273/204/344/273/266/344/270/212/344/274/240/345/233/276/347/211/207/345/222/214/346/226/207/344/273/266.md

@@ -0,0 +1,172 @@
+# 如何使用上传组件上传图片和文件
+
+## 1. 场景介绍
+
+文件上传组件常用于上传本地图片和文件，例如：
+
+* 图片浏览：上传头像、产品图片，以便在网页中展示图片。
+* 文件共享：上传附件供他人下载，实现传播文件的功能。
+
+## 2. 设计思路
+
+本案例目标：在表单中输入作品信息，可上传多张图片，上传多份作品文件，在数据表格中浏览作品信息。
+
+实现思路：新建实体用于存放作品信息，拖拽生成表单与数据表格，表单项中的作品图片和作品文件使用文件上传组件，数据表格中的作品图片和作品文件使用文件上传组件并设置禁用（仅用于展示而不能操作）。
+
+## 3. 操作步骤
+
+1. 新建作品实体，添加字段：作品名称、作品预览图、作品工程文件。预览图和工程文件的数据类型使用String文本（文件上传后会返回一个字符串）。
+
+   考虑到文件较多或文件名较长时可能文本会比较长，这里将String的最大长度调大。
+
+   <img src="../assets/sctphwj_0527_1638_1.png" style="border: 1px solid #ccc;" />
+2. 拖拽实体到页面上生成数据表格，选择“列表(全)”
+
+   <img src="../assets/sctphwj_0527_1638_2.png" style="border: 1px solid #ccc;" />
+3. 回到页面，修改弹窗中的表单。删除作品图片的输入框，拖拽文件上传组件到表单项，选择“单文件卡片”。（选择多图片按钮也可以实现上传图片后预览图片的效果）
+
+   <img src="../assets/sctphwj_0527_1638_3.png" style="border: 1px solid #ccc;" />
+4. 修改文件上传组件的值为变量的作品图片字段。
+
+   <img src="../assets/sctphwj_0527_1638_4.png" style="border: 1px solid #ccc;" />
+5. 开启“多文件上传”。
+
+   <img src="../assets/sctphwj_0527_1638_5.png" style="border: 1px solid #ccc;" />
+6. 对工程文件项重复上述操作，删除工程文件的输入框，拖拽文件上传组件到表单项，选择“单个文件按钮”，修改文件上传组件的值为变量的工程文件字段，开启多文件上传选项。
+
+   注意：带按钮的文件上传组件，是在文件上传组件的基础上在内部添加了按钮，查看和修改属性时注意选择的对象应该是文件上传而不是按钮。
+
+   <img src="../assets/sctphwj_0527_1638_6.png" style="border: 1px solid #ccc;" />
+
+   <img src="../assets/sctphwj_0527_1638_7.png" style="border: 1px solid #ccc;" />
+
+   <img src="../assets/sctphwj_0527_1638_8.png" style="border: 1px solid #ccc;" />
+7. 在数据表格的作品图片表格列中添加文件上传组件，选择“单文件卡片”，修改值为实体的作品图片字段。
+
+   <img src="../assets/sctphwj_0527_1638_9.png" style="border: 1px solid #ccc;" />
+
+   <img src="../assets/sctphwj_0527_1638_10.png" style="border: 1px solid #ccc;" />
+
+   <img src="../assets/sctphwj_0527_1638_11.png" style="border: 1px solid #ccc;" />
+8. 开启只读，防止在数据表格中进行增删操作。
+
+   <img src="../assets/sctphwj_0527_1638_12.png" style="border: 1px solid #ccc;" />
+9. 对工程文件列重复上述操作，在数据表格的工程文件列添加文件上传组件，选择“单个文件按钮”。添加后删除文件上传组件中的按钮，修改值为实体的工程文件字段，开启只读。
+
+   <img src="../assets/sctphwj_0527_1638_13.png" style="border: 1px solid #ccc;" />
+
+   <img src="../assets/sctphwj_0527_1638_14.png" style="border: 1px solid #ccc;" />
+
+   <img src="../assets/sctphwj_0527_1638_15.png" style="border: 1px solid #ccc;" />
+10. 操作结束，发布预览。
+
+## 4. 效果演示
+
+<img src="../assets/sctphwj_0527_1638_16.gif" style="border: 1px solid #ccc;" />
+
+## 5. 说明
+
+### 5.1 列表类型
+
+文件上传组件的类型不仅在生成组件时可选，也可以后续在属性的“列表类型”中切换。
+
+<img src="../assets/sctphwj_0527_1638_17.png" style="border: 1px solid #ccc;" />
+
+### 5.2 转换器
+
+转换器决定文件上传组件上传文件后返回的数据参数格式，有两种选择：
+
+- JSON：上传文件后返回的String字符串是以 JSON 格式表示的，这种格式包含了较多的文件信息，如文件名、文件UID、文件地址等。
+
+
+- URL字符串：仅包含文件链接地址，多个文件地址使用英文逗号连接。
+
+在某些场景中，用户可能只需要保留文件的链接地址，而不需要其他文件信息，使用 URL 字符串可能更合适，它只提供简单的文件链接列表，避免了冗余的信息。
+
+JSON 格式可以提供更多的文件属性，使用户能够更灵活地处理文件上传的返回结果。
+
+<img src="../assets/rhsysc_202406191956_1.png" class="imgStyle" style="" />
+
+<details>
+      <summary title="点击展开JSON格式数据参数示例：" style="font-weight: bold; color: #679CF8; cursor: pointer;">
+          点击展开JSON格式数据参数示例：
+      </summary>
+
+```JSON
+[
+    {
+        "uid": 1718762072510,
+        "status": "success",
+        "name": "h5-template_gallery_1_1_20240619095437436.png",
+        "size": 1528322,
+        "percent": 100,
+        "showProgress": false,
+        "url": ../assetsupload/app/h5-template_gallery_1_1_20240619095437436.png",
+        "response": {
+            "code": 200,
+            "success": true,
+            "msg": "success",
+            "result": "http://dev.documentseven.dogfood.lcap.163yun.com/upload/app/h5-template_gallery_1_1_20240619095437436.png",
+            "filePath": ../assetsupload/app/h5-template_gallery_1_1_20240619095437436.png"
+        }
+    },
+    {
+        "uid": 1718762072540,
+        "status": "success",
+        "name": "h5-template_gallery_1_2_20240619095437123.png",
+        "size": 1138455,
+        "percent": 100,
+        "showProgress": false,
+        "url": ../assetsupload/app/h5-template_gallery_1_2_20240619095437123.png",
+        "response": {
+            "code": 200,
+            "success": true,
+            "msg": "success",
+            "result": "http://dev.documentseven.dogfood.lcap.163yun.com/upload/app/h5-template_gallery_1_2_20240619095437123.png",
+            "filePath": ../assetsupload/app/h5-template_gallery_1_2_20240619095437123.png"
+        }
+    }
+]
+```
+
+</details>
+
+<details>
+    <summary title="什么是NASL">
+    点击展开 URL格式数据参考示例：
+    </summary>
+
+```JSON
+/upload/app/h5-template_gallery_1_1_20240619100057811.png,/upload/app/h5-template_gallery_1_2_20240619100058377.png
+```
+
+</details>
+
+
+<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>
+             
+<style>
+/* 折叠块加边框、背景色、边距 */
+details {
+      margin-top: 15px;
+      margin-bottom: 15px;
+      border: 1px solid #679CF8; /* 添加边框 */
+      border-radius: 6px;
+      background-color: #F8FCFF; /* 添加底色 */
+      padding: 10px 10px 10px 40px;
+      box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
+  }
+
+/* 折叠块标题不需要内边距 */
+details summary {  
+    margin: 0 0 0 -20px;
+    font-weight: bold;
+    color: #679CF8;
+    cursor: pointer;
+  }
+</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/40./347/273/204/344/273/266/345/234/272/346/231/257/40./345/205/266/344/273/226/347/273/204/344/273/266/345/234/272/346/231/257/025./345/246/202/344/275/225/345/234/250/344/270/212/344/274/240/346/226/207/344/273/266/346/227/266/346/240/241/351/252/214/346/226/207/344/273/266/345/220/215/345/220/210/346/263/225/346/200/247.md

@@ -0,0 +1,95 @@
+# 如何在上传文件时校验文件名合法性
+
+## 场景介绍
+
+在使用文件上传组件上传文件时，需要限制所上传的文件名称，要求文件名必须符合某种规则。
+
+可通过文件上传组件的“文件校验”属性来实现，文件校验属性可接受一个表达式，当表达式的输出结果为空字符串或null时表示校验通过，输出结果为有效文本时表示校验不通过，组件上将会展示该文本。
+
+<img src="../assets/ruhezaishangchuanwenjianshijiaoyanwenjianminghefaxing_202508061634_1.png" class="imgStyle" style="" />        
+
+文件校验属性中可以使用file.name变量来获取待上传的文件名称。
+
+<img src="../assets/ruhezaishangchuanwenjianshijiaoyanwenjianminghefaxing_202508061634_2.png" class="imgStyle" style="" />        
+
+效果如下，校验失败时将阻止上传文件并予以提示。
+
+<img src="../assets/ruhezaishangchuanwenjianshijiaoyanwenjianminghefaxing_202508061634_3.png" class="imgStyle" style="" />        
+
+## 使用示例
+
+### 使用匹配组件
+
+简单用法是使用匹配组件来判断文件名，例如判断文件名是否等于特定文本或者限制名称长度。
+
+如下图所示，限制上传的文件名称必须小于10个字符，为true时输出null，表示校验通过；为false时输出提示文本。
+
+<img src="../assets/ruhezaishangchuanwenjianshijiaoyanwenjianminghefaxing_202508061634_4.png" class="imgStyle" style="" />        
+
+### 使用JS表达式
+
+进阶用法，使用自定义表达式可以编写JS代码来实现文件名校验，例如用正则表达式来判断文件名是否合法。
+
+需要使用“自定义”组件，编写一段精简的JS代码来返回空值或警告文本。
+
+<img src="../assets/ruhezaishangchuanwenjianshijiaoyanwenjianminghefaxing_202508061634_5.png" class="imgStyle" style="" />        
+
+代码如下所示，校验文件名中是否包含邮箱。
+
+```
+/[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,}/.test(file.name) ? null : '文件名中未包含邮箱'
+```
+
+### 使用JS表达式调用JS函数
+
+当自定义表达式中的JS难以完整业务所需的文件名校验时，需要结合更复杂的JS或者低代码逻辑，这种情况下可以在页面中注册一个JS函数，并在“文件校验”属性中调用该JS函数来校验文件名。
+
+1. 添加页面进入后事件，使用JS代码块注册一个JS函数，如下所示
+
+   <img src="../assets/ruhezaishangchuanwenjianshijiaoyanwenjianminghefaxing_202508061634_6.png" class="imgStyle" style="" />        
+
+   代码如下所示，校验文件名中是否包含邮箱。
+
+   ```
+   this.checkFileNameIsEmail = function (fileName) {
+   
+     // 邮箱正则表达式
+     const emailRegex = /[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,}/;
+   
+     if (emailRegex.test(fileName)) {
+       return ''; // 校验通过，返回空字符串或null即可
+     }
+     else return '文件名中未包含邮箱'; // 校验不通过，返回提示信息
+   
+   }
+   ```
+
+2. 在文件校验属性中通过“自定义”组件来调用该函数
+
+   <img src="../assets/ruhezaishangchuanwenjianshijiaoyanwenjianminghefaxing_202508061634_7.png" class="imgStyle" style="" />        
+
+   代码如下所示。
+
+   ```
+   this.checkFileNameIsEmail(file.name)
+   ```
+
+如果需要结合低代码逻辑，则需要在注册的JS代码块函数中去调用低代码逻辑。
+
+## 补充说明
+
+除了文件名file.name属性以外，其他的文件属性file字段在“文件校验”中基本上没有使用场景，完整的file属性说明如下：
+
+- status：在“文件校验”属性中无此属性值。
+- url：在“文件校验”属性中无此属性值。
+- name：待上传文件的名称，如`归档文件.zpi`、`我的照片.png`。
+- size：待上传文件的字节大小（Byte），如4KB的文件其size值是4096。
+- type：待上传文件的MIME类型，注意，该属性不是指文件的后缀类型，通常不使用该字段来判断文件类型，判断文件类型通常需要截取file.name中的文件后缀。MIME类型的示例如：`text/plain`、`application/x-zip-compressed`、`application/vnd.openxmlformats-officedocument.wordprocessingml.document`
+
+<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年08月06日</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/40./347/273/204/344/273/266/345/234/272/346/231/257/40./345/205/266/344/273/226/347/273/204/344/273/266/345/234/272/346/231/257/050./345/246/202/344/275/225/345/260/206/344/270/212/344/274/240/347/232/204excel/346/225/260/346/215/256/345/257/274/345/205/245/345/210/260/345/256/236/344/275/223/344/270/255.md

@@ -0,0 +1,56 @@
+# 如何将上传的Excel数据导入到实体中
+
+## 1. 场景介绍
+
+使用文件上传功能可以将Excel文件导入到已存在的实体中，作用是让用户可以将已有的表格数据批量上传到数据库中，例如：
+
+* 可以将存放在Excel中其他渠道收集的用户信息一次性录入到实体。
+* 将从旧数据库或其他平台中导出为Excel文件的财务数据上传到实体中。
+
+## 2. 设计思路
+
+本案例目标：使用文件上传组件将Excel文件中的学生信息导入到实体中。
+
+实现思路：新建实体用于存放学生信息并生成展示数据的数据表格；为页面添加文件上传组件，上传组件的上传路径为新建实体的import，上传成功后刷新表格；在自己的设备上新建Excel表格文件，表头使用实体的标题，填入几行数据，保存文件并上传。
+
+## 3. 操作步骤
+
+1. 新建学生信息实体。
+
+   <img src="../assets/excel_0527_1644_1.png" style="border: 1px solid #ccc;" />
+2. 拖拽实体到页面并选择列表（全），用于生成展示数据的数据表格。
+
+   <img src="../assets/excel_0527_1644_2.png" style="border: 1px solid #ccc;" />
+3. 拖拽生成文件上传组件到页面上并选择“单个文件按钮”；修改文件上传中的按钮文本提示该按钮用于上传Excel文件。
+
+   <img src="../assets/excel_0527_1644_3.png" style="border: 1px solid #ccc;" />
+4. 选择文件上传组件，选择属性中的上传地址，在列表中选择上面新建的实体。
+
+   注意：由于按钮与文件上传组件嵌套在一起，此处应选择文件上传组件而不是按钮组件。
+
+   <img src="../assets/excel_0527_1644_4.png" style="border: 1px solid #ccc;" />
+5. 为了避免误上传非Excel文件，“修改支持上传的文件类型”为.xls和.xlsx，使用英文逗号拼接。
+
+   <img src="../assets/excel_0527_1644_5.png" style="border: 1px solid #ccc;" />
+6. 若无需在文件上传组件下方展示上传的文件名称、文件大小等信息，可以关闭“显示文件列表”属性。
+
+   <img src="../assets/excel_0527_1644_6.png" style="border: 1px solid #ccc;" />
+7. 上传表格文件后会自动导入数据，为了同步刷新表格，为文件上传组件添加上传成功后事件，在事件中调用表格的组件逻辑reload重新加载表格。
+
+   <img src="../assets/excel_0527_1644_7.png" style="border: 1px solid #ccc;" />
+
+   <img src="../assets/excel_0527_1644_8.png" style="border: 1px solid #ccc;" />
+8. 发布预览效果。
+9. 新建Excel文件，表头与实体的标题或名称相同，填入几条数据。在应用页面上传该文件即可导入表格内容到实体中。
+
+   <img src="../assets/excel_0527_1644_9.png" style="border: 1px solid #ccc;" />
+
+## 4. 效果演示
+
+<img src="../assets/excel_0527_1644_10.gif" style="border: 1px solid #ccc;" />
+
+## 5. 说明
+
+* Excel文件中表头行的内容需要与实体属性对应，若导入的Excel中表头行没有和实体属性中的名称或标题对应上，则导入结果会被忽略不作处理。
+* Excel文件中传入的某个字段类型与实体中字段类型不匹配，上传后可能会导致解析报错，例如：实体中年龄属性为Integer整数类型，Excel中传入的年龄列中含有中文数字，可能会存在解析异常。
+* 实体字段中有枚举类型时，上传的excel对应列中的值需要是枚举的**枚举值**，而不是枚举的标题。

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/40./347/273/204/344/273/266/345/234/272/346/231/257/40./345/205/266/344/273/226/347/273/204/344/273/266/345/234/272/346/231/257/060./345/246/202/344/275/225/344/270/272/346/240/221/345/275/242/350/247/206/345/233/276/346/267/273/345/212/240/346/225/260/346/215/256/346/272/220.md

@@ -0,0 +1,67 @@
+# 如何为树形视图添加数据源
+
+## 1. 场景介绍
+
+树形视图通常用于展示有层级关系的数据，例如以下场景：
+
+* 文件目录结构（如文件系统、文件夹嵌套等）
+* 组织架构（如公司层级结构、团队项目分配等）
+* 生物分类（如物种分类、家族树等）
+* 国家地区（如国家与省份、城市与区县的关系等）
+* 菜单导航（如网站导航、应用菜单等）
+
+任何具有树形结构的数据都可以使用树形组件来呈现。树形组件可以完整展现层级关系，并具有展开、收起、选择等交互功能，帮助用户更好地理解和操作数据。
+
+## 2. 设计思路
+
+本案例目标：使用树形视图添加数据源，展示公司的组织架构，即部门的层次关系。
+
+实现思路：要实现树形关系，实体中必须至少有一个字段用于表明它的上级或下级，本案例中使用公司部门实体的parentID字段表明该部门的上级部门。新建实体用于存放公司部门信息，创建树形视图，设置树形视图的数据属性，数据源为查询所有部门，选项文本为部门名、值字段为部门ID、父级值字段为部门上级部门ID。
+
+## 3. 操作步骤
+
+### 3.1 配置树形视图
+
+1. 创建公司部门实体，添加字段：部门名称、上级部门ID。
+
+   <img src="../assets/sxstu_0527_1644_1.png" style="border: 1px solid #ccc;" />
+2. 拖拽实体到页面并选择列表（全）来生成数据表格；在组件面板中找到树形视图拖拽到页面生成
+
+   <img src="../assets/sxstu_0527_1644_2.png" style="border: 1px solid #ccc;" />
+3. 添加服务端逻辑，为逻辑添加输出参数，使用数据查询查出所有公司部门并赋值给输出参数。
+
+   <img src="../assets/sxstu_0527_1644_3.png" style="border: 1px solid #ccc;" />
+4. 为树形视图添加数据源，开启动态绑定后点击“请选择表达式”进入数据源界面，使用调用逻辑组件调用上述新增的服务端逻辑。
+
+   <img src="../assets/sxstu_0527_1644_4.png" style="border: 1px solid #ccc;" />
+
+   <img src="../assets/sxstu_0527_1644_5.png" style="border: 1px solid #ccc;" />
+5. 配置其他数据属性：选项文本是树节点上显示的文本，在本案例中就是部门名称；值字段是树节点的值，也就是部门ID、即主键；父级值字段用于匹配将哪一个节点作为父级，也就是父级ID。
+
+   <img src="../assets/sxstu_0527_1644_6.png" style="border: 1px solid #ccc;" />
+
+至此，树形视图的数据源配置完成。为了更方便树形节点的创建，下面介绍在数据表格中新建/修改部门时，如何选择其他部门作为其上级部门。
+
+### 3.2 实现上级部门的选择
+
+1. 打开创建/修改部门的弹窗，移除弹窗中上级部门的输入框，拖拽实体到表单项中选择“选择框”以生成选择器。
+
+   <img src="../assets/sxstu_0527_1644_7.png" style="border: 1px solid #ccc;" />
+2. 选择器的选中值绑定为要表单要提交数据中的上级部门ID；文本字段和值字段一般是生成选择器后自动生成，注意此处文本字段为部门名称，值字段为部门ID且必须为部门ID、即选择的部门的ID作为创建/修改部门的父级部门。
+
+   <img src="../assets/sxstu_0527_1644_8.png" style="border: 1px solid #ccc;" />
+3. 弹窗中的创建按钮、修改按钮和数据表格中删除按钮的点击事件中添加树形视图的reload逻辑，使其在数据变动后刷新树形视图。
+
+   <img src="../assets/sxstu_0527_1644_9.png" style="border: 1px solid #ccc;" />
+4. 发布预览效果。
+
+## 4. 效果演示
+
+<img src="../assets/sxstu_0527_1644_10.gif" style="border: 1px solid #ccc;" />
+
+## 5. 说明
+
+* 树的根节点通常不需要父级ID或将父级ID设置为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/40./347/273/204/344/273/266/345/234/272/346/231/257/40./345/205/266/344/273/226/347/273/204/344/273/266/345/234/272/346/231/257/065./345/246/202/344/275/225/344/275/277/347/224/250/351/200/211/351/241/271/345/215/241/347/273/204/344/273/266/345/256/236/347/216/260/345/244/232/351/241/265/347/255/276/345/261/225/347/244/272.md

@@ -0,0 +1,48 @@
+# 如何使用选项卡组件实现多页签展示
+
+## 1. 场景介绍
+
+选项卡组件通常用于以下场景：
+
+* 导航菜单：选项卡组件可以用作主导航菜单，让用户在不同的页面或模块之间进行切换。每个选项卡代表一个独立的页面或功能。
+* 内容分类：如果一个页面需要展示多类内容，但空间有限，选项卡组件可以在不同的页签中展示不同分类的内容，例如在选项卡中分别创建页签展示商品的介绍、评价、晒图。
+
+本案例使用选项卡组件展示不同的图片，点击页签即切换展示不同类型的图片。
+
+## 2. 操作步骤
+
+1.  拖拽选项卡组件到页面，样式选择“基本用法”即可。
+
+    <img src="../assets/xxkdyzs_0527_1707_1.png" style="border: 1px solid #ccc;" />
+
+1.  选中选项卡后，点击左上角出现的加号，点击“添加子选项”按钮。
+
+    <img src="../assets/xxkdyzs_0527_1707_2.png" style="border: 1px solid #ccc;" />
+
+1.  修改标签页上的文本，改为不同的图片的分类。
+
+    <img src="../assets/xxkdyzs_0527_1707_3.png" style="border: 1px solid #ccc;" />
+
+1.  点击选中标签页，删除标签页下默认生成的文本，每个标签页下都删除。
+
+    <img src="../assets/xxkdyzs_0527_1707_4.png" style="border: 1px solid #ccc;" />
+
+1.  为标签页容器中添加图片展示组件，本案例在标签页内使用三等份栅格布局，在每个栅格中添加图片展示组件。
+
+    <img src="../assets/xxkdyzs_0527_1707_5.png" style="border: 1px solid #ccc;" />
+
+1.  其他每个标签页也添加图片展示，并将图片地址修改为对应类型的图片链接（为了方便操作，可在修改完一个标签页后复制栅格布局到其他标签页下）。
+
+    <img src="../assets/xxkdyzs_0527_1707_6.png" style="border: 1px solid #ccc;" />
+
+1.  完成后发布预览效果。
+
+## 3. 效果演示
+
+<img src="../assets/xxkdyzs_0527_1707_7.gif" style="border: 1px solid #ccc;" />
+
+## 4. 说明
+
+* 在标签页下添加组件时注意组件有成功放到标签页下的容器内，而不是放在了选项卡下方。
+
+<img src="../assets/xxkdyzs_0527_1707_8.png" style="border: 1px solid #ccc;" />

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/40./347/273/204/344/273/266/345/234/272/346/231/257/40./345/205/266/344/273/226/347/273/204/344/273/266/345/234/272/346/231/257/068./345/246/202/344/275/225/344/275/277/347/224/250/346/255/245/351/252/244/346/235/241/347/273/204/344/273/266/345/261/225/347/244/272/346/265/201/347/250/213/346/255/245/351/252/244.md

@@ -0,0 +1,146 @@
+# 如何使用步骤条组件展示流程步骤
+
+## 1. 场景介绍
+
+步骤条由一系列有序的步骤节点组成，用户可以按照指定的顺序逐步完成流程，步骤条旨在帮助用户在复杂的流程中清晰地展示和导航每个步骤，常用于以下场景：
+
+1.  购物流程：在线购物过程中，步骤条可以引导用户完成选择商品、添加到购物车、填写配送地址、选择支付方式等一系列步骤。
+2.  表单填写：当用户需要填写表单时，步骤条可以将表单分解为多个步骤，使用户能够逐步填写，例如分别在不同步骤中填写个人资料、教育背景、项目经历等。
+3.  预约流程：在医院、美容院等预约服务的场景中，步骤条可以指导用户选择日期、选择服务项目、填写个人信息等。
+4.  快递跟踪：在快递服务中，步骤条可以展示包裹所处的不同状态，如已揽收、运输中、派送中等，让用户清晰了解包裹的进展。
+
+本案例使用步骤条组件制作“申请试用产品”的表单输入流程，表单流程分为四步：填写公司信息、填写联系人、填写申请理由、完成。
+
+## 2. 设计思路
+
+表单流程需要根据步骤条组件当前的步骤状态来展示表单的内容。
+
+1.  设计每一个步骤阶段需要展示的内容。详见步骤3.1和3.2。
+2.  使用按钮来切换当前的步骤状态。详见步骤3.3。
+   
+<div class="highlight">
+
+在实现一个支持通过按钮来动态切换步骤状态的步骤条组件时，还需要注意处理边界条件和交互的流畅性：
+
+- 通过“上一步”和“下一步”按钮来动态地改变当前步骤；
+- 当步骤处于第一步时“上一步”按钮被隐藏，避免用户尝试回到不存在的上一步；
+- 当步骤处于最后一步时“下一步”按钮被隐藏，避免用户尝试进入不存在的下一步；
+
+本示例通过步骤条组件的可访问属性来实现步骤条以及按钮组件的状态更新。相关可访问属性介绍如下：
+
+- value（当前步骤）：Integer类型。记录当前处于选中状态的步骤索引，索引的起始值为0。
+- isFirst（第一步）：Boolean类型。指示当前步骤是否为第一步。
+- isLast（最后一步）：Boolean类型。指示当前步骤是否为最后一步。
+
+<img src="../assets/rhsybztzjzslcbz_202407081703_1.png" class="imgStyle" style="width:600px;" />
+
+</div>
+
+## 3. 操作步骤
+
+### 3.1 搭建步骤条框架
+
+1.  拖动步骤条组件到页面生成。（此处将步骤条放在了多行排布的线性布局中，为下面的内容分隔间距。）
+
+      <img src="../assets/rhsybztzjzslcbz_202407081703_2.png" class="imgStyle" style="" />
+
+1.  默认生成的步骤条自带三个步骤条项，可以根据自己的需求进行添加或删除。
+
+      本案例流程要显示四个步骤，需要有四个步骤条项。选中步骤条，点击左上角加号，添加一个步骤条子组件。
+
+      <img src="../assets/rhsybztzjzslcbz_202407081703_3.png" class="imgStyle" style="" />
+
+      （可选）如需删除步骤条项，可以点击该项，点击上方出现的删除图标即可删除。
+
+      <img src="../assets/rhsybztzjzslcbz_202407081703_4.png" class="imgStyle" style="" />
+
+1.  修改默认的步骤条文本为：公司信息、联系人、申请理由、完成。
+
+      <img src="../assets/rhsybztzjzslcbz_202407081703_5.png" class="imgStyle" style="" />
+
+1.  放置文本组件到步骤条标题下方，填写步骤条提示信息，文本内容自行定义。
+
+      <img src="../assets/rhsybztzjzslcbz_202407081703_6.png" class="imgStyle" style="" />
+
+### 3.2 搭建步骤条项内容
+
+1.  点击第一个步骤条项下面才会切换到第一个步骤条对应的展示容器，在容器中放置表单，自行设置间距。
+
+      此处只是模拟表单提交，不做真实表单和验证。
+
+      <img src="../assets/rhsybztzjzslcbz_202407081703_7.png" class="imgStyle" style="" />
+
+1.  同样的，点击第二个步骤条项以切换到第二个步骤的展示容器，放置输入组件。
+
+      <img src="../assets/rhsybztzjzslcbz_202407081703_8.png" class="imgStyle" style="" />
+
+1.  第三个步骤，操作同上。
+
+      <img src="../assets/rhsybztzjzslcbz_202407081703_9.png" class="imgStyle" style="" />
+
+1.  最后一个步骤是“完成”，表单的输入到此结束已经算作提交，此处使用大字体提示已经完成申请。
+
+      <img src="../assets/rhsybztzjzslcbz_202407081703_10.png" class="imgStyle" style="" />
+
+### 3.3 实现步骤条项跳转
+
+1.  在进入页面时设置默认步骤。本示例为了进入页面时默认进行到第一个步骤条项，为页面添加进入时事件，在事件中为步骤条的可访问属性value（当前步骤）赋值0。
+
+      <img src="../assets/rhsybztzjzslcbz_202407081703_11.png" class="imgStyle" style="" />
+
+1.  在步骤条下面添加两个按钮，文本为“上一步”和“下一步”，分别用于跳转到上一个步骤和下一个步骤。
+
+      <img src="../assets/rhsybztzjzslcbz_202407081703_12.png" class="imgStyle" style="" />
+
+1.  为“上一步”按钮添加点击事件，在逻辑中让步骤条的可访问属性value（当前步骤）减一。即返回上一个步骤。
+
+      <img src="../assets/rhsybztzjzslcbz_202407081703_13.png" class="imgStyle" style="" />
+
+1.  同样的，为“下一步”按钮添加点击事件，在逻辑中让步骤条的可访问属性value（当前步骤）加一。即执行下一个步骤。
+
+      <img src="../assets/rhsybztzjzslcbz_202407081703_14.png" class="imgStyle" style="" />
+
+1.  为“上一步”按钮设置显示条件，条件是：非第一步时显示，即步骤条的可访问属性isFirst（第一步）为false时实现条件为true。使用“非”运算使显示条件与可访问属性isFirst（第一步）的值相反即可。
+
+      <img src="../assets/rhsybztzjzslcbz_202407081703_15.png" class="imgStyle" style="" />
+
+      <img src="../assets/rhsybztzjzslcbz_202407081703_16.png" class="imgStyle" style="" />
+
+1.  为“下一步”按钮设置显示条件，条件是：非最后一步时显示，即步骤条的可访问属性isLast（最后一步）为false时实现条件为true。使用“非”运算使显示条件与可访问属性isLast（最后一步）的值相反即可。
+
+      <img src="../assets/rhsybztzjzslcbz_202407081703_17.png" class="imgStyle" style="" />
+
+1.  由于点击不同的步骤条项可以直接跳到该流程，为了阻止直接跳到最后一个步骤“完成”，为最后一个步骤条项开启属性中的“只读”。
+
+      <img src="../assets/rhsybztzjzslcbz_202407081703_18.png" class="imgStyle" style="" />
+
+1.  发布预览。
+
+## 4. 效果演示
+
+<img src="../assets/rhsybztzjzslcbz_202407081703_19.gif" class="imgStyle" style="" />
+
+## 5. 说明
+
+- 步骤条的值从0开始，当前步骤为0表示进入到第一个步骤，步骤值为1表示进入到第二个步骤。
+
+
+<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年07月08日</span>
+</div>
+                
+<style>
+ .highlight {
+      border: 1px solid #679CF8; /* 添加边框 */
+      border-radius: 6px;
+      background-color: #F8FCFF; /* 添加底色 */
+      padding: 20px;
+      margin-bottom:20px;
+      margin-top:20px;
+      box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
+  }
+</style>
+