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/110./345/246/202/344/275/225/344/275/277/347/224/250/345/212/250/346/200/201/351/200/211/351/241/271/345/215/241.md

@@ -0,0 +1,165 @@
+# 如何使用动态选项卡
+
+## 1. 场景介绍
+
+旨在实现左侧导航栏和选项卡联动的效果。即点击左侧导航栏项，可新开标签页，通过选项卡项呈现具体内容。具体如下图：
+
+<img src="../assets/dtxxk_0528_1434_1.gif" style="" />
+
+## 2. 设计思路
+
+实现点击左侧导航栏项，可新开标签页，侧边栏与选项卡之间需有唯一的字段，用于获取对应的显示标题以及URL等数据。因此，两侧以值作为判定的唯一的字段。
+
+1. 为侧边栏项绑定值，此处，以学生信息和班级信息为例。学生信息侧边栏项的值为“1”，班级信息侧边栏项的值为“2”。详见步骤4.1。
+2. 可以通过选项卡组件实现当前场景，为确保动态选项卡展示内容，需创建所需的数据结构、绑定数据源以及动态选项卡相关属性。详见步骤4.2。
+3. 在进入总览页时，需获取侧边栏项的信息，若存储数据库中，可通过查询获取，此案例在进入页面时事件中为其初始化。详见步骤4.3。
+4. 当需要用户进入时有默认标签页，如首页、个人工作台等场景时，可在进入页面时将所需默认展示的页面添加到动态选项卡的数据源中。详见步骤4.4。此步骤可按照实际需求选做。
+5. 为实现侧边栏与动态选项卡之间的数据联动，即点击侧边栏项后新开对应的标签页，需创建点击事件，并在点击事件中向动态选项卡的数据源中添加对应的标题、相对路径等属性。详见步骤4.5。
+6. 当动态选项卡中没有标签项被打开时，跳转至父级页面。详见步骤4.6。此步骤可按照实际需求选做。
+7. 发布预览并查看最终效果。详见步骤4.7。
+
+## 3. 前提条件
+
+* 添加两个子页面，作为选项卡中展示的页面。两个页面的相对路径分别为`/dashboard/studentInfo`和`/dashboard/classInfo`。
+* 修改侧边导航栏项文本，即分别用于导航到如上两个子页面。
+
+<img src="../assets/dtxxk_0528_1434_2.jpg" style="" />
+
+## 4. 操作步骤
+
+### 4.1 为侧边栏项绑定值
+
+为侧边栏项绑定值，学生信息的值绑定为“1”，班级信息的值绑定为”2“。
+
+<img src="../assets/dtxxk_0528_1434_3.jpg" style="" />
+
+<img src="../assets/dtxxk_0528_1434_4.png" style="" />
+
+### 4.2 创建数据结构、绑定数据源及属性
+
+1. 在总览页中拖拽选项卡组件至页面中，并选择“动态数据源”，选择“动态数据源”时默认打开选项卡的“使用路由”属性。
+
+   <img src="../assets/dtxxk_0528_1434_5.png" style="" />
+
+   说明：
+   由于选中不同的标签页时均借助子页面容器来展示子页面，因此建议拖拽选项卡后将子页面容器置于 选项卡下方 或 选项卡内容插槽中。
+   动态选项卡需绑定数据源。数据源为`List<T>`类型，例如：`List<TabStructure>`。具体内容见下述步骤。
+
+   <img src="../assets/dtxxk_0528_1434_6.png" style="" />
+2. 新建数据结构TabStructure，添加一些属性用于设置动态选项卡相关的数据。
+
+   <img src="../assets/dtxxk_0528_1434_7.png" style="" />
+
+   数据结构中包含四个属性，分别为：
+
+   * 标签项标题显示文本title，数据类型为String；
+   * 标题项内容值contentUrl，数据类型为String；
+   * 标签项标题值字段value，数据类型为String；
+   * 标签项是否可关闭closeable ，数据类型为Boolean。
+3. 在总览页下，新建局部变量tabDataSource，设置数据类型为List。
+
+   <img src="../assets/dtxxk_0528_1434_8.png" style="" />
+4. 选中页面上的选项卡组件，找到右侧属性中的数据源，开启数据源的编辑表达式功能并绑定数据源为局部变量tabDataSource，将局部变量tabDataSource作为选项卡的数据源。
+
+   <img src="../assets/dtxxk_0528_1434_9.png" style="" />
+5. 编辑选项卡的属性。
+
+   * “标签项标题”属性，点击选择title。此属性作用为标识每个标签项的标题文本，例如：学生信息。
+   * “标签项标签值字段”属性，点击选择value。此属性作用为标识每个标签项的值，例如：1。
+   * “标签项内容值字段”属性，点击选择contentUrl，此属性作用为标识当前打开的标签项的相对路径，例如：/dashboard/studentInfo。
+   * “标签项可关闭”属性，点击选择closeable，此属性作用为标识标签项是否可关闭，类型为Boolean，若为true，则可关闭；若为false则不可关闭，可按照需求设置。若无此需求，只需统一设置为可关闭或不可关闭，可通过下方属性“可关闭”统一设置。
+
+   <img src="../assets/dtxxk_0528_1434_10.png" style="" />
+
+   <img src="../assets/dtxxk_0528_1434_11.png" style="" />
+6. 新建局部变量tabValue，作为选项卡选择后获取的值，其数据类型与“标签项标题值字段”相同；找到选项卡的“值”属性，绑定此局部变量。至此，可以通过局部变量tabValue控制选项卡选中哪一个标签项，也可以在切换标签项时动态更新局部变量tabValue的值。
+
+   <img src="../assets/dtxxk_0528_1434_12.jpg" style="" />
+
+### 4.3 初始化侧边栏项相关信息
+
+1. 使用Map类型的局部变量存储侧边栏中的每个侧边栏项显示的标题、值以及相对路径，便于通过侧边栏项的值获取对应标题及路径。
+
+   a. 新建数据结构MenuStructure，在数据结构中创建两条属性title和contentUrl，分别用于存储侧边栏项标题和侧边栏项路径。
+
+   <img src="../assets/dtxxk_0528_1434_13.png" style="" />
+
+   b. 新建局部变量menuDataSource，类型为Map。用于构建侧边栏项的值与其对应的标题、路径的关系。
+
+   <img src="../assets/dtxxk_0528_1434_14.png" style="" />
+2. 选中总览页，在右侧事件中，点击“+”，添加进入时事件。
+
+   <img src="../assets/dtxxk_0528_1434_15.png" style="" />
+3. 编写事件逻辑，初始化侧边栏相关数据。
+
+   a. 使用内置函数Put为局部变量menuDataSource添加键值对，其中key为侧边栏项学生信息对应的值，此处以“1”为例；value为使用“新建”组件新建的数据结构MenuStructure，title属性对应“学生信息”、contentUrl属性对应子页面的相对路径“/dashboard/studentInfo”。
+
+   <img src="../assets/dtxxk_0528_1434_16.png" style="" />
+
+   b. 重复上一步骤，添加侧边栏项班级信息。
+
+   <img src="../assets/dtxxk_0528_1434_17.png" style="" />
+
+### 4.4 进入页面时设置默认标签页（选做）
+
+进入页面时，设置默认标签页。此处默认标签页以“学生信息”为例。
+
+在页面的进入时事件中，调用内置函数Add向动态选项卡的数据源tabDataSource中添加数据，数据item需要新建数据结构TabStructure，并初始化数据为“学生信息”对应的标题、相对路径等内容。例如：
+
+*   在侧边栏项中定义“学生信息”时，存储在局部变量menuDataSource中的key为1，即同步“学生信息”对应的值value为1；
+*   使用内置函数Get从局部变量menuDataSource中获取key为1的MenuStructure类型数据，其title属性即对应“学生信息”的标题；
+*   使用内置函数Get从局部变量menuDataSource中获取key为1的MenuStructure类型数据，其contentUrl属性即对应“学生信息”的相对路径；
+*   侧边栏项“学生信息”对应的closeable为true，该标签页支持关闭。
+
+<img src="../assets/dtxxk_0528_1434_18.png" style="" />
+
+### 4.5 实现侧边栏与动态选项卡数据联动
+
+为实现侧边栏与动态选项卡之间的数据联动，点击侧边栏项需向动态选项卡的数据源tabDataSource中添加对应的标题、相对路径等字段。具体操作如下：
+
+1. 选中侧边栏，在右侧事件中添加“选择后”事件。
+
+   <img src="../assets/dtxxk_0528_1434_19.png" style="" />
+2. 分析：判断动态选项卡的数据源中是否包含当前选择的侧边栏项的值，若不包含，则将其添加到动态选项卡的数据源中，若已经包含则无需重复添加，仅根据当前选择的侧边栏项选中选项卡中对应的标签项。
+
+   a. 使用内置函数Filter查询选项卡的数据源中值与当前选择的侧边栏项的值相同的列表，即判断条件为item.value = event.value；使用内置函数HasValue判断查询列表是否为空，列表为空时即表示当前选择的侧边栏项的值不包含在选项卡的数据源中；使用If组件为判断结果分流。
+
+   <img src="../assets/dtxxk_0528_1434_20.png" style="" />
+
+   b. 当If流向no分支，即当前选择的侧边栏项的值不包含在选项卡的数据源中，此时使用内置函数Add将侧边栏项的相关数据添加到动态选项卡的数据源中，Add的使用方法参考**步骤4.4**。标签项的值为选择的侧边栏项的值，即event.value。
+
+   <img src="../assets/dtxxk_0528_1434_21.png" style="" />
+3. 分支结束后，将当前选择的侧边栏项的值赋值给动态选项卡的“值”属性。用于切换选项卡中标签项的选中项。
+
+   <img src="../assets/dtxxk_0528_1434_22.png" style="" />
+
+### 4.6 选项卡为空时跳转父级页面（选做）
+
+当选项卡中的标签项被全部删除时，选项卡即无选中值。为防止选项卡中展示页面无法对应识别，建议通过以下思路优化展示效果。
+
+* 方法1：当选项卡中只有一个标签项时，标签项禁止删除。
+* 方法2：当选项卡中标签项被全部删除时，跳转至父级页面，即不展示子页面内容。
+
+方法2具体操作如下：
+
+1. 选中选项卡，在右侧事件中添加“关闭后”事件。
+
+   <img src="../assets/dtxxk_0528_1434_23.png" style="" />
+2. 在事件中使用内置函数HasValue判断选项卡的数据源tabDataSource是否为空，为空时使用跳转页面组件跳转至父页面/dashboard。
+
+   <img src="../assets/dtxxk_0528_1434_24.png" style="" />
+
+### 4.7 发布预览并查看最终效果
+
+## 5. 效果演示
+
+最终演示结果如下图：
+
+<img src="../assets/dtxxk_0528_1434_25.gif" 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月13日</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/120./345/246/202/344/275/225/350/216/267/345/217/226/347/211/271/345/256/232/346/227/245/346/234/237/347/232/204/346/237/220/344/270/252/345/233/272/345/256/232/346/227/266/351/227/264/347/202/271.md

@@ -0,0 +1,40 @@
+# 如何获取特定日期的固定时间点
+
+## 1. 场景介绍
+
+在搭建应用过程中，常常会遇到需要结合日期选择器获取特定日期某个固定时间点的需求。例如，在财务报表生成、库存盘点时间记录等场景下，需明确指定日期的某一时刻，例如选择2024年1月1日，获取该日的零点作为数据统计的起始时间点。
+
+## 2. 前提条件
+
+页面已有用于选择指定日期的日期选择组件和用于展示格式化的选择结果的文本组件（midnight变量存储展示结果）
+
+<img src="../assets/ruhehuoqutedingriqidegudingshijiandian_202502071836_1.png" class="imgStyle" style="" />
+
+## 3. 操作步骤
+
+### 3.1 获取选择的日期值
+
+选中日期选择组件，在右侧组件属性面板中为组件添加“值变化时”事件。
+
+<img src="../assets/ruhehuoqutedingriqidegudingshijiandian_202502071836_2.png" class="imgStyle" style="" />
+
+在日期选择组件的“值变化”事件中获取选中日期值。
+
+<img src="../assets/ruhehuoqutedingriqidegudingshijiandian_202502071836_3.png" class="imgStyle" style="" />
+
+### 3.2 格式化选择的日期
+
+编辑日期选择组件的值变化事件逻辑，通过Convert内置函数将日期选择器选择的日期转换为日期时间格式，并通过Format内置函数将其格式化为"yyyy-MM-dd 00:00:00"的字符串格式，同时将结果存储在midnight变量中。
+
+<img src="../assets/ruhehuoqutedingriqidegudingshijiandian_202502071836_4.png" class="imgStyle" style="" />
+
+## 4. 效果演示
+
+<img src="../assets/ruhehuoqutedingriqidegudingshijiandian_202502071836_5.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);">2025年02月07日</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/130./345/246/202/344/275/225/346/240/271/346/215/256/346/227/266/351/227/264/345/214/272/351/227/264/345/257/271/346/225/260/346/215/256/350/277/233/350/241/214/347/255/233/351/200/211.md

@@ -0,0 +1,103 @@
+# 如何根据时间区间对数据进行筛选
+
+## 1. 场景介绍
+
+在实际场景中，很多时候需要根据特定的时间范围筛选所需的数据，从而进行更加精确的分析和处理。本文将列举如下两个场景进行介绍。
+
+- 场景一：筛选创建时间（DateTime类型）在日期区间（Date类型）内的数据。
+- 场景二：筛选开始日期和截止日期在所选日期区间内的数据。
+
+## 2. 前提条件
+
+已有工单实体Ticket，包含DateTime类型的创建时间createdTime，以及Date类型的开始日期startDate和截止日期dueDate。并在工单管理页面TicketList中拖拽实体选择列表（全），生成数据表格及增删改查等内容。
+
+<img src="../assets/genjushijianqujianduishujujinxingshaixuan_202408161527_1.png" class="imgStyle" style="" />
+
+<img src="../assets/genjushijianqujianduishujujinxingshaixuan_202408161527_2.png" class="imgStyle" style="" />
+
+## 3. 操作步骤
+
+### 3.1 场景一
+
+筛选创建时间（DateTime类型）在日期区间（Date类型）内的数据，操作步骤如下：
+
+1.  在页面中选中表单中一个表单项，点击创建副本，并将复制出的表单项中的文本修改为创建时间。
+
+      <img src="../assets/genjushijianqujianduishujujinxingshaixuan_202408161527_3.png" class="imgStyle" style="" />
+
+1.  删除该表单项中的原本的内容，拖拽放置日期选择器，并打开属性中的区间选择。
+
+      <img src="../assets/genjushijianqujianduishujujinxingshaixuan_202408161527_4.png" class="imgStyle" style="" />
+
+1.  在页面中创建Date类型的局部变量date1和date2，并分别绑定给日期选择器的起始值和结束值。
+
+      <img src="../assets/genjushijianqujianduishujujinxingshaixuan_202408161527_5.png" class="imgStyle" style="" />
+
+1.  在点击查询时处理数据，例如当用户选择的日期区间为2024年1月1日-2024年1月2日，需将其转化为日期时间类型2024年1月1日00时00分00秒-2024年1月2日23时59分59秒。所以，在页面中创建DateTime类型的局部变量datetime1和datetime2。点击查询按钮，打开其自带的点击事件reload。
+
+      <img src="../assets/genjushijianqujianduishujujinxingshaixuan_202408161527_6.png" class="imgStyle" style="" />
+
+1.  在点击事件的调用逻辑上方，拖拽变量datetime1生成赋值组件，在赋值组件右侧放置如下图所示内容。右侧的内容的含义为先将date1转化为DateTime日期时间类型，再通过Format内置函数，将其格式化为“yyyy-MM-dd 00:00:00”，表示取当天的零点。最后再将格式化后的值转化为DateTime日期时间类型。
+
+      <img src="../assets/genjushijianqujianduishujujinxingshaixuan_202408161527_7.png" class="imgStyle" style="" />
+
+1.  在点击事件的调用逻辑上方，再拖拽变量datetime2生成赋值组件，在赋值组件右侧放置如下图所示内容。右侧的内容与步骤5中的类似，区别在于Format内置函数中的日期时间格式为“yyyy-MM-dd 23:59:59”，表示取当天的23:59:59。
+
+      <img src="../assets/genjushijianqujianduishujujinxingshaixuan_202408161527_8.png" class="imgStyle" style="" />
+
+1.  返回页面，点击数据表格，在属性中打开数据源属性，并通过定位至该逻辑进入所绑定的服务端逻辑。
+
+      <img src="../assets/genjushijianqujianduishujujinxingshaixuan_202408161527_9.png" class="imgStyle" style="" />
+
+      <img src="../assets/genjushijianqujianduishujujinxingshaixuan_202408161527_10.png" class="imgStyle" style="" />
+
+1.  进入数据源所绑定的服务端逻辑后，为该逻辑添加两个DateTime类型的输入参数datetime1和datetime2，并双击逻辑中的数据查询组件进入筛选条件，增加如下图所示的筛选条件，意为筛选创建时间在区间内的数据。
+
+      <img src="../assets/genjushijianqujianduishujujinxingshaixuan_202408161527_11.png" class="imgStyle" style="" />
+
+1.  返回页面后选中数据表格，找到并打开数据源属性，在调用逻辑的参数中分别放置页面下的局部变量datetime1和datetime2。
+
+      <img src="../assets/genjushijianqujianduishujujinxingshaixuan_202408161527_12.png" class="imgStyle" style="" />
+
+1.  点击右上角预览进行发布预览。发布完成后即可看到效果如图所示，在选择区间点击查询按钮后，即可筛选所选时间区间内创建的数据。
+
+      <img src="../assets/genjushijianqujianduishujujinxingshaixuan_202408161527_13.png" class="imgStyle" style="" />
+
+### 3.2 场景二
+
+筛选开始日期和截止日期在所选日期区间内的数据，操作步骤如下：
+
+1.  添加表单项，放置日期选择器，添加局部变量等操作，可参考3.1中的步骤1至步骤3，并将表单项的文本修改为时间范围。
+
+      <img src="../assets/genjushijianqujianduishujujinxingshaixuan_202408161527_14.png" class="imgStyle" style="" />
+
+1.  点击数据表格，在属性中打开数据源属性，并通过定位至该逻辑进入所绑定的服务端逻辑。
+
+      <img src="../assets/genjushijianqujianduishujujinxingshaixuan_202408161527_9.png" class="imgStyle" style="" />
+
+      <img src="../assets/genjushijianqujianduishujujinxingshaixuan_202408161527_10.png" class="imgStyle" style="" />
+
+1.  进入数据源所绑定的服务端逻辑后，为该逻辑添加两个Date类型的输入参数date1和date2，并双击逻辑中的数据查询组件进入筛选条件，增加如下图所示的筛选条件，意为筛选开始时间和截至时间在区间内的数据。
+
+      <img src="../assets/genjushijianqujianduishujujinxingshaixuan_202408161527_17.png" class="imgStyle" style="" />
+
+1.  返回页面后选中数据表格，找到并打开数据源属性，在调用逻辑的参数中分别放置页面下的局部变量date1和date2。
+
+      <img src="../assets/genjushijianqujianduishujujinxingshaixuan_202408161527_18.png" class="imgStyle" style="" />
+
+1.  点击右上角预览进行发布预览。发布完成后即可看到效果如图所示，在选择区间点击查询按钮后，即可筛选开始日期和截止日期在所选日期区间的数据。
+
+      <img src="../assets/genjushijianqujianduishujujinxingshaixuan_202408161527_19.png" class="imgStyle" style="" />
+
+## 4. 说明
+
+- 当遇到需筛选DateTime类型的数据时，除需要高精度的场景，通常建议使用场景一中的方式，即让用户只需选择日期来筛选数据，以提升用户体验。但如果需要精确到时分秒，可以直接使用时间选择器，时间选择的操作和日期选择类似。
+- 除操作步骤中使用一个日期选择组件，并打开其区间选择的属性之外，还可以使用两个日期选择组件来实现区间的功能，但需注意判断结束日期不能小于开始日期。
+
+
+<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月08日</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/140./345/246/202/344/275/225/346/233/264/346/224/271/346/215/242/350/241/214/346/226/207/346/234/254/344/271/213/351/227/264/347/232/204/351/227/264/350/267/235.md

@@ -0,0 +1,26 @@
+# 如何更改换行文本之间的间距
+
+## 1. 场景介绍
+
+在网页设计中，合理设置换行文本之间的间距可以提升文本的可读性和页面的美观度。比如在文章内容展示、产品介绍、导航栏文字等场景中，都可能需要根据设计需求来调整换行文本的间距，以适应不同的布局和视觉效果，为用户提供更好的阅读体验。
+
+## 2. 操作步骤
+
+**单文本行间距设置**：选择需要调整换行间距的文本，设置选中文本组件的自定义样式属性为 line-height: 1.5，此时文本行间距都会变为当前文本高度的1.5倍。
+
+<img src="../assets/genggaiwenbenjianju_202502061020_1.png" class="imgStyle" style="" />
+
+**页面内所有文本行间距设置**：选择页面最外层组件，设置选中组件的自定义样式属性为 line-height: 1.5，此时该页面内所有文本行间距都会变为当前文本高度的1.5倍。
+
+<img src="../assets/genggaiwenbenjianju_202502061020_2.png" class="imgStyle" style="" />
+
+## 3. 其他说明
+
+line-height属性的值可以是具体的长度值（如px、em等）、倍数或者无单位的数字。无单位的数字会基于字体大小进行相对计算，比较常用且具有较好的兼容性。
+
+<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月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/150./345/246/202/344/275/225/345/256/236/347/216/260loading/357/274/210/345/212/240/350/275/275/345/212/250/347/224/273/357/274/211.md

@@ -0,0 +1,49 @@
+# 如何实现loading（加载动画）
+
+## 1. 场景介绍
+
+在各类应用程序中，加载动画是一种常见的交互元素，用于向用户反馈系统正在执行某些操作，避免用户在等待过程中产生焦虑或误以为系统出现故障。加载动画的常见场景如下：
+
+- 网页加载：用户访问网页，获取页面资源耗时，加载动画让用户了解加载状态，避免面对空白页面。如电商首页，因资源多加载久，加载动画可增强用户耐心。
+
+
+
+- 数据请求与刷新：应用执行数据请求或用户刷新内容时，数据传输处理需时间，加载动画告知用户数据在更新，如社交 APP 刷新动态、在线办公软件加载文档。
+- 页面切换与导航：单页应用切换页面或视图，虽无需重载网页，但涉及组件渲染与数据填充，加载动画实现平滑过渡，让用户感知应用响应，如企业管理系统切换业务模块页面。
+
+## 2. 操作步骤
+
+1.  在需要显示加载动画的位置，添加一个[线性布局](../../../20.应用开发/10.页面设计/20.PC端Vue2组件说明（默认）/01.布局/020.线性布局.md)组件。
+
+    <img src="../assets/x20ruheshixianloadingjiazaidonghua_202502061609_1.png" class="imgStyle" style="" />
+
+1.  在需要显示加载动画的交互逻辑处调用线性布局的openLoading组件逻辑，如在点击“开始加载”事件逻辑中调用openLoading组件逻辑。
+
+    <img src="../assets/x20ruheshixianloadingjiazaidonghua_202502061609_2.png" class="imgStyle" style="" />
+
+1.  为了便于演示，本案例在点击“开始加载”后设置了延时一秒钟关闭加载动画。当点击“开始加载”按钮后，加载动画会持续显示一秒钟，随后自动关闭。在实际应用场景中，务必确保在相关操作完成后及时关闭加载动画，以免影响用户体验。
+
+    <img src="../assets/x20ruheshixianloadingjiazaidonghua_202502061609_3.png" class="imgStyle" style="" />
+
+## 3. 效果演示
+
+<img src="../assets/x20ruheshixianloadingjiazaidonghua_202502061609_4.gif" class="imgStyle" style="" />
+
+## 4. 其他说明
+
+线性布局自带的loading支持通过组件的“状态属性”设置基础样式。
+
+<img src="../assets/x20ruheshixianloadingjiazaidonghua_202502061609_5.png" class="imgStyle" style="" />
+
+- 加载中图标：线性布局加载中状态所显示的图标。
+- 加载中图标旋转：开启后，在线性布局加载时图标会旋转。
+- 加载中文案：加载中状态显示的提示文案。
+
+<img src="../assets/x20ruheshixianloadingjiazaidonghua_202502061609_6.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月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/50./351/200/273/350/276/221/345/234/272/346/231/257/10./345/246/202/344/275/225/351/200/232/350/277/207/345/214/271/351/205/215/347/273/204/344/273/266/345/256/236/347/216/260/345/217/230/351/207/217/345/200/274/347/232/204/345/210/244/346/226/255.md

@@ -0,0 +1,28 @@
+# **如何通过匹配组件实现变量值的判断**
+
+## **1. 场景介绍**
+
+匹配组件可根据变量、表达式的值或类型进行匹配，若匹配一致则执行该分支。例如：在商品列表中根据不同商品类型使标签展示不同颜色。
+
+## **2. 操作步骤**
+
+1. 已有商品管理页面如下图所示。其中商品实体中商品状态字段为枚举类型，在表格中使用标签展示。
+
+   <img src="../assets/pppdbl_0528_1447_1.png" style="border: 1px solid #ccc;" />
+2. 选中数据表格中的标签组件，在右侧属性栏中找到背景颜色属性，点击进入编辑表达式。
+
+   <img src="../assets/pppdbl_0528_1447_2.png" style="border: 1px solid #ccc;" />
+3. 在编辑表达式界面中拖拽匹配组件，并在上方拖入商品状态对应的变量 `current.commodity.state`，平台会根据枚举的枚举项自动生成分支，分别对应各个枚举值。然后再各分支下拖入文本组件并输入各枚举值对应显示的颜色，支持简单单词和十六进制颜色码两种方式。
+
+   <img src="../assets/pppdbl_0528_1447_3.png" style="border: 1px solid #ccc;" />
+4. 退出编辑表达式后，发布预览效果，效果如下图所示。
+
+   <img src="../assets/pppdbl_0528_1447_4.png" style="border: 1px solid #ccc;" />
+
+## **3. 说明**
+
+1. 动态显示颜色时，需发布后才能预览效果。
+2. 匹配组件可用在编辑表达式时或逻辑中。
+3. 当匹配值的数据类型为枚举类型、Boolean类型此类有穷序列集时，平台能够根据匹配值可能返回的结果自动生成分支；当匹配值的数据类型为其他，用于可以自定义分支的数量、自定义匹配的内容。
+
+<img src="../assets/pppdbl_0528_1447_5.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/50./351/200/273/350/276/221/345/234/272/346/231/257/110./345/246/202/344/275/225/350/277/233/350/241/214/351/235/236/347/251/272/345/210/244/346/226/255.md

@@ -0,0 +1,79 @@
+# 如何进行非空判断
+
+## 1. 场景介绍
+
+在编程和数据处理中，经常需要判断某个变量、数组、字符串等是否为空。非空判断是确保程序能够正确处理各种情况，避免出现错误和异常的重要操作。例如，在用户输入信息的处理中，如果没有进行非空判断，可能会导致程序崩溃或者产生不正确的结果。
+
+## 2. 操作示例
+
+### 基础类型
+
+基础类型是最基本的数据类型，是构建更复杂数据类型的基础，这些基础类型通常用于存储和处理不同种类的数据，从而实现各种各样的功能和应用程序。
+
+平台提供7种基础类型：
+
+- Boolean 布尔值：表示真（true）或假（false），通常用于条件判断。
+- Integer 整数：表示没有小数部分的数字，可以是正数、负数或零，可表示的最大长度约19个数字。
+- Decimal 小数：表示带有小数部分的数字，能够提供更高的精度，通常用于科学计算、货币计算和其他需要精度较高的场景。
+- String 字符串：表示一串字符，通常用于文本处理和数据存储。
+- Date 日期：表示具体的日期，通常用于仅日期处理和数据存储。
+- Time 时间：表示具体的时间，通常用于仅时间处理和数据存储。
+- DateTime 日期时间：表示具体的日期和时间，通常用于日期和时间的处理和数据存储。
+
+通过判断基础类型的数据是否不等于null，来决定后续执行yes/no分支的操作：
+
+<img src="../assets/ruhejinxingfeikongpanduan_202410141608_1.png" class="imgStyle" style="" />
+
+通过内置函数HasValue判断基础类型的数据是否为有效值，来决定后续执行yes/no分支的操作：
+
+<img src="../assets/ruhejinxingfeikongpanduan_202410141608_2.png" class="imgStyle" style="" />
+
+### 集合类型
+
+集合类型是编程语言中常见的数据结构，用于存储和操作多个值。平台提供的集合类型包括List和Map。
+
+#### `List<T>`类型
+
+`List<T>`列表由一组有序的元素组成，可以通过索引来访问其中的元素。列表通常用于存储和操作一组相关的值，例如一组人员信息列表或一组数字的列表。
+
+`List<T>`中的元素T可以是任意类型，可以嵌套`List<T>`，即`List<List<T>>`>，也可以使用联合类型。
+
+通过判断`List<T>`类型的数据列表长度是否不等于0，来决定后续执行yes/no分支的操作：
+
+<img src="../assets/ruhejinxingfeikongpanduan_202410141608_3.png" class="imgStyle" style="" />
+
+通过内置函数HasValue判断`List<T>`类型的数据是否为有效值，来决定后续执行yes/no分支的操作：
+
+<img src="../assets/ruhejinxingfeikongpanduan_202410141608_4.png" class="imgStyle" style="" />
+
+#### `Map<K, V>`类型
+
+映射由一组键值对组成，其中每个键（Key）都唯一地映射到一个值（Value）。映射通常用于存储和操作一组相关联的键值对，例如一个单词和其出现次数的映射。
+
+K只能从基础类型中的Boolean、Integer、Decimal、String 中选择，V可以是任意类型，可以嵌套Map，即`Map<K,Map<K,V>>`，也可以使用联合类型。
+通过判断`Map<K, V`>类型的数据列表长度是否不等于0，来决定后续执行yes/no分支的操作：
+
+<img src="../assets/ruhejinxingfeikongpanduan_202410141608_5.png" class="imgStyle" style="" />
+
+通过内置函数HasValue判断`Map<K, V>`类型的数据是否为有效值，来决定后续执行yes/no分支的操作：
+
+<img src="../assets/ruhejinxingfeikongpanduan_202410141608_6.png" class="imgStyle" style="" />
+
+### 自定义类型
+
+平台中的自定义类型包含自行创建/平台自带的[实体](../../20.应用开发/05.数据建模/20.实体/010.实体介绍.md)、[枚举](../../20.应用开发/05.数据建模/30.枚举.md)、[数据结构](../../20.应用开发/05.数据建模/25.数据结构.md)、匿名数据结构。
+
+通过判断自定义类型的数据是否不等于null，来决定后续执行yes/no分支的操作：
+
+<img src="../assets/ruhejinxingfeikongpanduan_202410141608_7.png" class="imgStyle" style="" />
+
+通过内置函数HasValue判断自定义类型的数据是否为有效值，来决定后续执行yes/no分支的操作：
+
+<img src="../assets/ruhejinxingfeikongpanduan_202410141608_8.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年10月14日</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/50./351/200/273/350/276/221/345/234/272/346/231/257/20./345/246/202/344/275/225/344/275/277/347/224/250/345/276/252/347/216/257/347/273/204/344/273/266/345/256/236/347/216/260/346/225/260/347/273/204/345/244/204/347/220/206/357/274/210while/345/222/214foreach/357/274/211.md

@@ -0,0 +1,31 @@
+# 如何使用循环组件实现数组处理（_while和foreach_）
+
+## 1. 场景介绍
+
+生成一个长度为10的随机数数组，并为数组的每一项的值加5。
+
+## 2. 操作步骤
+
+1. 在页面下创建两个局部变量listInt和listIntAdd，数据类型为`List<Integer>`，分别用于存储生成的随机数数组和为随机数数组的每个值加5后生成的新数组。在页面中放置两个文本组件和一个按钮组件，两个文本组件分别绑定两个局部变量，用于展示数组；按钮用于触发生成随机数数组的事件，如下图所示：
+
+   <img src="../assets/whileforeach_0528_1451_1.png" style="border: 1px solid #ccc;" />
+2. 选中按钮组件，在右侧属性栏中的事件中添加点击事件。在事件逻辑中拖拽While组件，在While循环条件中拖拽比较运算符“<”，左侧放置变量listInt下的属性length，右侧放置数字原子项并输入10。表示当数组长度小于10的时候执行循环。
+
+   <img src="../assets/whileforeach_0528_1451_2.png" style="border: 1px solid #ccc;" />
+3. 拖拽内置函数放置在While循环中并选择内置函数Add，参数list为局部变量listInt，参数item为使用内置函数Random生成的0～100之间的随机数。表示生成0～100的随机数添加至数组listInt中。
+
+   <img src="../assets/whileforeach_0528_1451_3.png" style="border: 1px solid #ccc;" />
+4. 在While循环的下方拖拽Foreach逻辑组件，循环列表为局部变量listInt。平台会自动生成索引设置，其中索引的起始值为0，结束值为列表长度，表示循环列表每一项。
+
+   <img src="../assets/whileforeach_0528_1451_4.png" style="border: 1px solid #ccc;" />
+5. 在Foreach循环中，放置内置函数Add。参数list为局部变量listIntAdd；参数item中拖拽算数运算“+”，左侧选择变量item，表示列表listInt的项，右侧放置数字组件并输入5。表示给列表listInt中的每一项加5，并添加到列表listIntAdd中。
+
+   <img src="../assets/whileforeach_0528_1451_5.png" style="border: 1px solid #ccc;" />
+6. 发布预览查看效果，点击按钮后可以看到生成了包含10个随机数的数组以及每项加5的新数组。
+
+   <img src="../assets/whileforeach_0528_1451_6.png" style="border: 1px solid #ccc;" />
+
+## 3. 说明
+
+1. 在进行数组循环操作时，需要根据实际情况做非空判断。
+2. 除循环外，平台内置多种数组处理的内置函数，相关文档请参考[列表（List）函数](../../20.应用开发/15.逻辑功能实现/50.内置函数使用/20.列表（List）函数.md)。

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/50./351/200/273/350/276/221/345/234/272/346/231/257/30./345/246/202/344/275/225/345/256/236/347/216/260/346/226/207/346/234/254/346/213/274/346/216/245.md

@@ -0,0 +1,49 @@
+# 如何实现文本拼接
+
+## 1. 场景介绍
+
+在本平台进行逻辑编辑时，可通过在文本组件的表达式中拖拽或输入等方式拼接其他表达式。例如，自动生成单号场景下，可使用文本组件将获取的当前日期时间值与随机数进行拼接形成订单编号，单号示例“202502071706025228”。
+
+<img src="../assets/ruheshixianwenbenpinjie_202502071856_1.png" class="imgStyle" style="" />
+
+## 2. 前提条件
+
+随机生成订单号功能模块基础样式已搭建完成，暂未实现点击“直接生成”按钮生成订单号功能。局部变量orderNumber，用于动态显示订单号。
+
+<img src="../assets/ruheshixianwenbenpinjie_202502071856_2.png" class="imgStyle" style="" />
+
+## 3. 操作步骤
+
+1.  选中“直接生成”按钮组件，在右侧属性栏的事件中添加点击事件并生成事件逻辑click。
+
+    <img src="../assets/ruheshixianwenbenpinjie_202502071856_3.png" class="imgStyle" style="" />
+
+1.  将页面orderNumber局部变量拖拽至逻辑中生成赋值组件，并拖拽文本组件至赋值右侧。
+
+    <img src="../assets/ruheshixianwenbenpinjie_202502071856_4.png" class="imgStyle" style="" />
+
+1.  拖拽内置函数放置在文本组件内，选择Format，将指定格式化字段设置为CurrDateTime内置函数（当前日期时间），并设置格式化为日期时间，同时更改日期时间格式为“yyyyMMddHHmmss”，表示将日期格式化为例如“20250207170602”的文本。
+
+    <img src="../assets/ruheshixianwenbenpinjie_202502071856_5.png" class="imgStyle" style="" />
+
+1.  再次拖拽内置函数放置在文本组件中Format内置函数右侧，选择RandomInt，在start、end参数中分别拖入数字组件，输入1000和9999，表示从1000到9999的四位随机数。
+
+    <img src="../assets/ruheshixianwenbenpinjie_202502071856_6.png" class="imgStyle" style="" />
+
+1.  发布进行预览后，在制品应用中点击“直接生成”按钮即可生成编号。
+
+    <img src="../assets/ruheshixianwenbenpinjie_202502071856_7.gif" class="imgStyle" style="" />
+
+## 4. 其他说明
+
+1.  文本组件插槽中可以直接输入内容或回车，也可放置变量、调用逻辑、调用接口、内置函数等有返回值的表达式。
+2.  文本组件不可单独在逻辑中使用，需配合其他组件使用。
+3.  文本组件支持在表达式中通过拖拽快捷操作拼接其他表达式。
+4.  文本组件的返回类型为String类型。
+
+<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月07日</span>
+</div>