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/60./345/206/205/347/275/256/345/207/275/346/225/260/345/234/272/346/231/257/40./345/246/202/344/275/225/345/244/204/347/220/206Map/346/225/260/346/215/256.md

@@ -0,0 +1,137 @@
+# 如何处理Map数据
+
+## 1.Map简介
+
+Map是一种键值对的集合，Map集合中每一个元素都包含一个键(key)对象和一个值(value)对象，其中Key对象不允许重复，而Value对象可以重复，这种存储方式使得能够快速根据key查找到value。
+
+以下是本平台Map数据类型的部分适用场景：
+
+* 存储和查找：Map可以用于存储大量的键值对，快速地根据给定的键查找对应的值。
+* 缓存：Map可以用于实现缓存机制。当需要根据某个键获取对应的值时，首先检查Map中是否已经存在该键的值。如果存在，则直接返回该值；如果不存在，则根据一定的计算逻辑生成新的值，并将键值对存储在Map中，以便下次使用。
+* 数据聚合和统计：可能需要对数据进行聚合和统计操作时，例如计算总和、平均值、最大值、最小值等，可以使用Map来存储数据的属性作为键，对应的值为该属性的聚合结果。通过遍历数据集并更新Map中的键值对，可以方便地进行各种聚合和统计操作。
+
+本平台中为Map提供了以下内置函数：
+
+* Contains：判断Map中是否存在指定的key（返回布尔值）。
+* Filter：从Map中筛选符合条件的键值对，返回过滤后的新Map。
+* Get：从Map中根据key参数获取对应的value。
+* Keys：将Map中的所有key以列表的形式返回（由key组成的List）。
+* Put：为Map中添加键值对，如果添加的键值对的key已经存在，则更新value。
+* Remove：根据key参数删除Map中对应的的键值对。
+* Transform：对Map中的每个键值对进行修改，返回修改后的新Map。
+* Values：将指定Map中的所有value以列表的形式返回。
+
+有关Map函数的具体文档请参考：[内置函数-Map函数](../../20.应用开发/15.逻辑功能实现/50.内置函数使用/25.映射（Map）函数.md)
+
+## 2.操作步骤
+
+下文是一个完整的案例，在页面中创建Map变量用于存储图书信息，Map的key为图片ID号，value为图书名，使用Map相关函数实现对图书信息的增、删、改、查、过滤等操作。
+
+### 2.1 用Put内置函数为Map添加键值对
+
+新建页面变量bookMap，数据类型为Map，Map的key、value数据类型都为String。
+
+<img src="../assets/ruhechulimapshuju_0530_1.png" style="border: 1px solid #ccc;" />
+
+创建两个String类型页面变量，bookID用于存储输入的图书id，bookName用于存储输入的图书名。在页面添加两个单行输入框并分别绑定两个变量，添加一个按钮。
+
+<img src="../assets/ruhechulimapshuju_0530_2.png" style="border: 1px solid #ccc;" />
+
+使用内置函数Map函数中的Put，map参数为存储图书的Map变量，key参数为输入框绑定的图书id变量，value参数为输入框绑定的图书名变量。添加成功后可清除两个输入框绑定的变量。
+
+<img src="../assets/ruhechulimapshuju_0530_3.png" style="border: 1px solid #ccc;" />
+
+### 2.2 用Keys内置函数将Map的所有key转换为list
+
+为页面添加数据表格组件并创建两个列，表格的数据源使用内置函数中的keys函数，将存储图书信息的Map变量作为入参。
+
+该操作的目的是将Map下所有key组成的List作为数据表格的数据源。
+
+（Values函数的用法与Keys函数相似，返回的值是valus组成的List，本案例中不做介绍）
+
+<img src="../assets/ruhechulimapshuju_0530_4.png" style="border: 1px solid #ccc;" />
+
+<img src="../assets/ruhechulimapshuju_0530_5.png" style="border: 1px solid #ccc;" />
+
+### 2.3 用Get内置函数将Map中key所对应的value值查出来
+
+分别在两个表格列中添加文本组件。
+
+第一列为图书ID列，文本值绑定current下的item，即每一条key（图书ID）。
+
+<img src="../assets/ruhechulimapshuju_0530_6.png" style="border: 1px solid #ccc;" />
+
+第二列为书名列，文本值使用Map函数中的get函数，map入参为存储图书信息的Map变量，key参数为当前行的key（current下item）。
+
+该操作目的是将key（图书ID）全部展示在第一列，第二列展示根据key获得的value（图书名称）。
+
+<img src="../assets/ruhechulimapshuju_0530_7.png" style="border: 1px solid #ccc;" />
+
+<img src="../assets/ruhechulimapshuju_0530_8.png" style="border: 1px solid #ccc;" />
+
+### 2.4 用Remove内置函数删除Map中的指定项
+
+为数据表格添加第三列，第三列中放按钮组件，命名为“删除”，为按钮添加点击事件。
+
+<img src="../assets/ruhechulimapshuju_0530_9.png" style="border: 1px solid #ccc;" />
+
+点击事件中，使用内置函数Map函数下的Remove函数，map参数为存储图书信息的Map变量，key参数为当前行的key（即current下的item）。
+
+<img src="../assets/ruhechulimapshuju_0530_10.png" style="border: 1px solid #ccc;" />
+
+目前的预览效果如下图，案例未结束，跟随下文继续操作。
+
+<img src="../assets/ruhechulimapshuju_0530_11.gif" style="border: 1px solid #ccc;" />
+
+### 2.5 用Contains内置函数判断Map中指定key是否存在
+
+在页面创建单行输入和按钮组件，创建string变量并绑定至输入框，按钮添加点击事件。
+
+<img src="../assets/ruhechulimapshuju_0530_12.png" style="border: 1px solid #ccc;" />
+
+点击事件中添加if，条件内容为Map函数中的Contains函数，如果满足条件则消息提示该图书存在，否则提示不存在。
+
+<img src="../assets/ruhechulimapshuju_0530_13.png" style="border: 1px solid #ccc;" />
+
+### 2.6 用Filter内置函数筛选Map中符合条件的键值对
+
+为页面添加按钮，命名“仅保留书名长度大于5的书”，为按钮添加点击事件。
+
+<img src="../assets/ruhechulimapshuju_0530_14.png" style="border: 1px solid #ccc;" />
+
+点击事件中，使用Map函数下的Filter函数，map参数为存储图书信息的变量，右边添加筛选条件，条件为value（图书名）的长度大于5。Filter函数处理结果赋值给原map。
+
+> 说明：filter函数中下面两个文本框中的文本代表临时key变量名和临时value变量名（可以修改变量名），可以在筛选条件中使用这两个变量。
+
+<img src="../assets/ruhechulimapshuju_0530_15.png" style="border: 1px solid #ccc;" />
+
+### 2.7 用Transform内置函数批量修改Map中的键值对
+
+本案例使用Transform函数为map中所有书名添加书名号。
+
+为页面添加按钮，命名“批量添加书名号”，为按钮添加点击事件。
+
+<img src="../assets/ruhechulimapshuju_0530_16.png" style="border: 1px solid #ccc;" />
+
+点击事件中，使用Map函数下的Transform函数，map参数为存储图书信息的变量，by中的参数，key（图书ID）不做变动，value使用文本插值在value变量前后加上书名号。
+
+<img src="../assets/ruhechulimapshuju_0530_17.png" style="border: 1px solid #ccc;" />
+
+发布预览。
+
+## 3.效果演示
+
+<img src="../assets/ruhechulimapshuju_0530_18.gif" style="border: 1px solid #ccc;" />
+
+## 4.说明
+
+* 空的key也可以被添加到Map，一般情况下建议避免使用空key，添加进Map之前做有效性检查。
+* key是唯一的，重复添加key会被后面添加的覆盖掉。
+* Filter函数和Transform函数并不直接对原Map进行操作，而是会返回新Map，需要对原Map进行修改务必记得将函数返回结果赋值给原Map。
+
+<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年05月30日</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/60./345/206/205/347/275/256/345/207/275/346/225/260/345/234/272/346/231/257/50./345/246/202/344/275/225/347/224/237/346/210/220/351/232/217/346/234/272/346/225/260.md

@@ -0,0 +1,45 @@
+# **如何生成随机数**
+
+## **1. 场景介绍**
+
+在抽奖活动中，现场共100位嘉宾，使用随机数用来生成中奖号码，保证公平性和随机性。
+
+## **2. 操作步骤**
+
+1. 新建抽奖页面，并拖拽按钮组件、文本组件至页面如下图所示，用于实现点击按钮时通过文本展示中奖号码。
+
+    <img src="../assets/scsjs_0528_1518_1.png" style="border: 1px solid #ccc;" />
+
+2. 新建局部变量prizeNumber，数据类型为Integer整数，用于存储中奖号码。
+
+    <img src="../assets/scsjs_0528_1518_2.png" style="border: 1px solid #ccc;" />
+
+3. 选中文本组件，在右侧属性中找到“文本”属性，开启编辑表达式功能，进入编辑表达式界面绑定局部变量prizeNumber。
+
+    <img src="../assets/scsjs_0528_1518_3.png" style="border: 1px solid #ccc;" />
+
+    <img src="../assets/scsjs_0528_1518_4.png" style="border: 1px solid #ccc;" />
+
+4. 选中按钮，在右侧事件中，添加“点击”事件。
+
+    <img src="../assets/scsjs_0528_1518_5.png" style="border: 1px solid #ccc;" />
+
+5. 在事件中，将局部变量prizeNumber拖拽至线上，生成赋值组件。
+
+    <img src="../assets/scsjs_0528_1518_6.png" style="border: 1px solid #ccc;" />
+
+6. 在组件中，选择内置函数组件，放置在赋值组件右侧。
+
+    <img src="../assets/scsjs_0528_1518_7.png" style="border: 1px solid #ccc;" />
+
+7. 选择RandomInt产生随机整数内置函数。
+
+    <img src="../assets/scsjs_0528_1518_8.png" style="border: 1px solid #ccc;" />
+
+8. 内置函数RandomInt的参数start和end分别为1和100，即随机选择1～100之间的随机整数。
+
+    <img src="../assets/scsjs_0528_1518_9.png" style="border: 1px solid #ccc;" />
+
+## **3. 效果演示**
+
+<img src="../assets/scsjs_0528_1518_10.gif" 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/60./345/206/205/347/275/256/345/207/275/346/225/260/345/234/272/346/231/257/60./345/246/202/344/275/225/345/260/206/346/236/232/344/270/276/347/261/273/345/236/213/347/232/204/345/200/274/350/275/254/346/215/242/345/275/242/345/274/217/345/261/225/347/244/272.md

@@ -0,0 +1,106 @@
+# 如何将枚举类型的值转换形式展示
+
+## 1. 场景介绍
+
+在展示数据列表时，可能需要将枚举值以更直观、更友好的形式呈现给用户，同时保留原始值用于数据过滤和排序操作。
+
+例如，在显示项目进度的详情页面中，将枚举（新建、进行中、待验收、结束）转换为结构体，通过枚举结构体中的枚举标题和值设置[线性进度条组件](../../20.应用开发/10.页面设计/20.PC端Vue2组件说明（默认）/80.图表/198.线形进度条.md)属性。
+
+<img src="../assets/jiangmeijuleixingdezhizhuanhuanxingshizhanshi_202408161536_1.png" class="imgStyle" style="" />
+
+## 2. 前提条件
+
+已有基础页面，已有基础数据，其中状态数据类型为枚举类型。
+
+<img src="../assets/jiangmeijuleixingdezhizhuanhuanxingshizhanshi_202408161536_2.png" class="imgStyle" style="" />
+
+状态枚举详情：
+
+<img src="../assets/jiangmeijuleixingdezhizhuanhuanxingshizhanshi_202408161536_3.png" class="imgStyle" style="" />
+
+## 3. 实现目标
+
+将数据表格状态列的数据新增进度条的形式展示。
+
+<img src="../assets/jiangmeijuleixingdezhizhuanhuanxingshizhanshi_202408161536_1.png" class="imgStyle" style="" />
+
+## 4. 操作步骤
+
+### 4.1 添加组件
+
+1.  将布局组件拖入数据表格-状态列组件插槽，选择多行排布。
+
+    <img src="../assets/jiangmeijuleixingdezhizhuanhuanxingshizhanshi_202408161536_5.png" class="imgStyle" style="" />
+
+1.  将数据表格-状态列组件插槽内原有文本组件放置在多行布局中的首个线性布局中，然后在第二个线性布局中放置线性进度条组件。
+
+    <img src="../assets/jiangmeijuleixingdezhizhuanhuanxingshizhanshi_202408161536_6.png" class="imgStyle" style="" />
+
+### 4.2 设置组件属性
+
+#### 当前进度属性
+
+选中线性进度条组件，设置线性进度条组件的当前进度属性。
+
+<img src="../assets/jiangmeijuleixingdezhizhuanhuanxingshizhanshi_202408161536_7.png" class="imgStyle" style="" />
+
+在当前进度表达式编辑页面，拖拽内置函数组件至页面编辑区，并选择枚举函数EnumltemToStructure。
+
+<div class="highlight">
+
+EnumltemToStructure功能介绍：
+
+EnumltemToStructure用于获取枚举项对应的原始值和文本，它会将枚举类型的值转换为 { text: String 文本, value: String 文本 } 或 { text: String 文本, value: Integer 整数 } 类型的结构体，value 的类型由枚举原始值的数据类型决定。
+
+</div>
+
+<img src="../assets/jiangmeijuleixingdezhizhuanhuanxingshizhanshi_202408161536_8.png" class="imgStyle" style="" />
+
+将内置函数输入参数设置为“当前行数据-状态枚举”。
+
+<img src="../assets/jiangmeijuleixingdezhizhuanhuanxingshizhanshi_202408161536_9.png" class="imgStyle" style="" />
+
+设置内置函数返回值为value。
+
+当前EnumltemToStructure内置函数默认返回值为 { text: String 文本, value: Integer 整数 } 类，但线性进度条组件的选中值仅需要返回值中的value值，所以此时需要设置内置函数的返回值为value属性，返回值示例：5。
+
+<img src="../assets/jiangmeijuleixingdezhizhuanhuanxingshizhanshi_202408161536_10.png" class="imgStyle" style="" />
+
+<img src="../assets/jiangmeijuleixingdezhizhuanhuanxingshizhanshi_202408161536_11.png" class="imgStyle" style="" />
+
+#### 工具提示属性
+
+选中线性进度条组件，设置线性进度条组件的工具提示属性。
+
+<img src="../assets/jiangmeijuleixingdezhizhuanhuanxingshizhanshi_202408161536_12.png" class="imgStyle" style="" />
+
+在工具属性表达式编辑区放置一个文本组件，输入提示文本并拼接所需展示数据（枚举值和标题）。
+
+<img src="../assets/jiangmeijuleixingdezhizhuanhuanxingshizhanshi_202408161536_13.png" class="imgStyle" style="" />
+
+## 5. 效果演示
+
+<img src="../assets/jiangmeijuleixingdezhizhuanhuanxingshizhanshi_202408161536_1.png" class="imgStyle" style="" />
+
+## 6.说明
+
+本案例中的一系列操作仅影响枚举值的页面展示效果，不会更改原始数据。因此，数据表格的数据过滤和排序操作保持不变。
+
+<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月16日</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/70./345/270/203/345/261/200/344/270/216/346/240/267/345/274/217/345/234/272/346/231/257/010./346/220/255/345/273/272/344/270/200/344/270/252dashboard/346/250/241/346/235/277.md

@@ -0,0 +1,47 @@
+# 搭建一个dashboard模板
+
+## 需求场景
+
+dashboard页面（总览页）是常用的页面模板之一，本案例实现手动制作自定义总览页，并生成局部模板。
+
+## 操作步骤
+
+### 搭建dashboard页面
+
+1.  在IDE中创建空白页面。
+
+    <img src="../assets/dajianyigedashboardmuban_0604_1.png" style="border: 1px solid #ccc;" />
+
+2.  拖拽分栏布局组件至页面中，选择所需的布局方式，本案例选择为“两栏-左侧固定”。
+
+    <img src="../assets/dajianyigedashboardmuban_0604_2.png" style="border: 1px solid #ccc;" />
+
+3.  拖拽导航栏组件放置在布局栏的上侧。
+
+    <img src="../assets/dajianyigedashboardmuban_0604_3.png" style="border: 1px solid #ccc;" />
+
+4.  拖拽侧边栏组件放置在布局栏的左侧。
+
+    <img src="../assets/dajianyigedashboardmuban_0604_4.png" style="border: 1px solid #ccc;" />
+
+5.  将页面自带的子页面容器拖拽至布局栏中，确保总览页下的子页面可以在中间区域显示。
+
+    <img src="../assets/dajianyigedashboardmuban_0604_5.gif" style="border: 1px solid #ccc;" />
+
+6.  点击IDE上方“更多”按钮，打开自定义主题样式，自定义更改导航菜单样式，更改完成后点击右上角保存，再点击左上角即可返回开发界面。
+
+    <img src="../assets/dajianyigedashboardmuban_0724_1.png" style="border: 1px solid #ccc;" />
+
+    <img src="../assets/dajianyigedashboardmuban_0724_2.png" style="border: 1px solid #ccc;" />
+
+### 发布局部模板
+
+1.  点击应用信息与操作栏目的更多按钮，选择**发布为局部模板**。
+
+    > 局部模板的复用与管理请参见[局部模板](../../20.应用开发/30.资产复用/20.局部模板.md)。
+
+    <img src="../assets/dajianyigedashboardmuban_0724_3.png" style="border: 1px solid #ccc;" />
+
+2.  填入模板信息并勾选相关能力后，单击**发布**按钮即可完成局部模板创建。
+
+    <img src="../assets/dajianyigedashboardmuban_0604_9.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/70./345/270/203/345/261/200/344/270/216/346/240/267/345/274/217/345/234/272/346/231/257/020./345/212/250/346/200/201/346/230/276/347/244/272/346/226/207/346/234/254/351/242/234/350/211/262.md

@@ -0,0 +1,30 @@
+# 动态显示文本颜色
+
+## 需求场景
+
+使文本组件能根据所展示的文本内容，显示不同的颜色，以下图为例，不同的客户类型需要显示不同的文本颜色。
+
+![](../assets/dongtaixianshiwenbenyanse_0530_1.png)
+
+## 操作步骤
+
+1. 在数据表格中选择枚举类型的客户类型字段，点击文本组件，在属性中找到字体颜色并打开。
+
+   ![](../assets/dongtaixianshiwenbenyanse_0530_2.png)
+
+
+2. 拖入匹配组件，选择变量为`current.item.customer.customerType`的客户类型字段，系统会根据枚举自动生成匹配项，拖拽文本组件放置在箭头下方，可输入简单英文颜色或十六进制颜色代码。
+
+   ![](../assets/dongtaixianshiwenbenyanse_0530_3.png)
+
+3. 发布即可预览动态文本颜色效果。
+
+   ![](../assets/dongtaixianshiwenbenyanse_0530_4.png)
+
+   
+<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年05月30日</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/70./345/270/203/345/261/200/344/270/216/346/240/267/345/274/217/345/234/272/346/231/257/025./345/246/202/344/275/225/350/207/252/345/256/232/344/271/211/345/255/227/344/275/223.md

@@ -0,0 +1,68 @@
+# 如何自定义字体
+
+## 1. 场景介绍
+
+应用提供的基础字体样式不满足需求时，如何引入新的字体，让文本呈现更贴合场景需求与审美偏好。
+![image](../assets/ruhezidingyiziti_1.png)
+
+## 2. 操作步骤
+
+### 2.1 引入字体
+
+1. 为应用端添加“应用进入后”事件。
+
+   ![image](../assets/ruhezidingyiziti_2.png)
+
+2. 在事件中使用JS代码块，动态注册自定义字体。
+
+   ![image](../assets/ruhezidingyiziti_3.png)
+
+具体代码如下：
+
+1. **创建样式载体**：`document.createElement('style')`先在内存中创建一个空的`标签，作为存放自定义字体样式规则的容器；`
+2. - **定义字体规则**：通过`style.innerHTML`写入`@font-face`核心规则，即 CSS 中自定义字体的标准语法：
+
+    - `font-family`为字体命名（如 ' 方正盛世楷书 '），后续页面样式中只需引用这个名称就能使用该字体；
+    - `src`指定字体文件的网络地址，同时提供 TTF、WOFF2 两种格式时浏览器会自动选择兼容性更好的格式加载，确保不同设备 / 浏览器都能正常显示；
+
+
+3. **生效字体规则**：`document.head.appendChild(style)`将包含字体规则的`标签插入到页面中，使自定义字体生效。`
+
+```
+const style = document.createElement('style');
+
+// 设置 CSS 块的内容
+style.innerHTML = `
+
+@font-face {
+  font-family: '方正盛世楷书';
+  src: 
+  url('https://battle.dahua.163yun.com/user/battle/FZSHENGSKSJW_CU.subset.TTF') format('truetype'),
+  url('https://battle.dahua.163yun.com/user/battle/FZSHENGSKSJW_CU.subset.woff2') format('woff2')
+}
+
+`;
+
+// 将 style 标签插入到 head 元素中
+document.head.appendChild(style);
+```
+
+### 2.2 使用字体
+
+选择需要自定义字体的组件，在“样式 -> 自定义”中写入CSS，通过设置`font-family: '字体名称'`（如`font-family: '方正盛世楷书'`），即可直接使用已引入的自定义字体。
+![image](../assets/ruhezidingyiziti_4.png)
+注意事项：
+
+- JS代码块无法直接在IDE中运行，建议通过“预览”功能查看最终字体效果。
+- 若`@font-face`中`url`指向的字体文件地址与当前应用域名不一致，可能会触发浏览器跨域访问限制，导致字体文件加载失败。最佳解决方案为联系字体文件所在服务器的运维人员，在该服务器配置跨域访问权限（核心为设置`Access-Control-Allow-Origin`响应头），允许当前网页域名访问该字体资源。
+
+## 3. 效果演示
+
+![image](../assets/ruhezidingyiziti_5.png)
+
+<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年12月09日</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/70./345/270/203/345/261/200/344/270/216/346/240/267/345/274/217/345/234/272/346/231/257/030./345/246/202/344/275/225/344/275/277/347/224/250/350/207/252/347/224/261/345/270/203/345/261/200/346/220/255/345/273/272/351/241/265/351/235/242.md

@@ -0,0 +1,60 @@
+# 如何使用自由布局搭建页面
+
+## 1. 场景介绍
+
+[自由布局](../../20.应用开发/10.页面设计/20.PC端Vue2组件说明（默认）/01.布局/050.自由布局.md)组件是一种布局容器，它和平台现有的[栅格布局](../../20.应用开发/10.页面设计/20.PC端Vue2组件说明（默认）/01.布局/030.栅格布局.md)、[线性布局](../../20.应用开发/10.页面设计/20.PC端Vue2组件说明（默认）/01.布局/020.线性布局.md)一样，可以用来进行页面布局。与栅格布局和线性布局不同，自由布局给予了开发者极大的灵活性。它没有固定的网格结构或线性排列规则的束缚，能够根据具体的设计需求进行高度定制化的页面布局。
+
+在平台中，可以利用自由布局来搭建任何类型的网页，它尤其适合那些对页面还原度要求比较高，页面布局效果比较丰富的网页。以下示例将演示如何使用自由布局搭建页面。
+
+## 2. 实现思路
+
+<img src="../assets/ruheshiyongziyoubujudajianyemian_202410151459_1.png" class="imgStyle" style="" />
+
+## 3. 操作步骤
+
+### 3.1 规划页面布局
+
+在开始使用自由布局之前，先对要搭建的页面进行规划。确定自由布局组件主要内容区域的位置和大小。
+
+<img src="../assets/ruheshiyongziyoubujudajianyemian_202410151459_2.png" class="imgStyle" style="" />
+
+选择自由布局组件：在平台的页面组件面板中，查找并选择自由布局组件，在页面中拖入一个自由布局组件，可以在任何需要的位置拖入自由布局组件，并根据具体需求调整自由布局样式属性。
+
+<img src="../assets/ruheshiyongziyoubujudajianyemian_202410151459_3.png" class="imgStyle" style="" />
+
+### 3.2 添加页面元素
+
+将所需的组件拖拽放置到自由布局组件内部，并根据具体需求调整组件样式，如下动图所示拖拽按钮放置到指定位置。
+
+<img src="../assets/ruheshiyongziyoubujudajianyemian_202410151459_4.gif" class="imgStyle" style="" />
+
+### 3.3 调整内部组件位置和大小
+
+根据规划好的布局，调整每个组件的位置和大小。可以通过拖动组件、设置边距、调整尺寸等方式来实现精确的布局控制。
+
+<img src="../assets/ruheshiyongziyoubujudajianyemian_202410151459_5.gif" class="imgStyle" style="" />
+
+对于需要层次关系的元素，可以使用自由布局组件可嵌套自由布局组件实现，如下：
+
+<img src="../assets/ruheshiyongziyoubujudajianyemian_202410151459_6.png" class="imgStyle" style="" />
+
+### 3.4 发布预览
+
+平台提供预览功能，可以通过这一功能查看页面在不同设备上的展示效果，以便及时调整和优化布局。
+
+<img src="../assets/ruheshiyongziyoubujudajianyemian_202410151459_7.png" class="imgStyle" style="" />
+
+## 4. 效果演示
+
+<img src="../assets/ruheshiyongziyoubujudajianyemian_202410151459_8.png" class="imgStyle" style="" />
+
+## 5. 说明
+
+本案例仅仅是针对自由布局组件基础功能展开的介绍。对于较为复杂的布局和功能方面的需求，建议参考自由布局使用文档：[自由布局](../../20.应用开发/10.页面设计/20.PC端Vue2组件说明（默认）/01.布局/050.自由布局.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年10月15日</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/70./345/270/203/345/261/200/344/270/216/346/240/267/345/274/217/345/234/272/346/231/257/040./345/246/202/344/275/225/344/275/277/347/224/250JS/344/273/243/347/240/201/345/235/227/344/277/256/346/224/271CSS/346/240/267/345/274/217.md

@@ -0,0 +1,100 @@
+# 如何使用JS代码块修改CSS样式
+
+## 1. 场景介绍
+
+在表单提交场景下，点击按钮后需要有一些视觉反馈来提示用户提交操作正在进行或者已完成等情况，比如改变按钮的背景色、文字颜色、添加一些动画效果等。
+
+<img src="../assets/JsCss_202412111352_1.gif" class="imgStyle" style="" />
+
+## 2. 实现思路
+
+通过在按钮的点击事件中设置JS代码块改变按钮组件样式。
+
+<img src="../assets/JsCss_202412111352_2.png" class="imgStyle" style="" />
+
+## 3. 操作步骤
+
+<div class="yellowBlock">
+
+前提条件：页面以及业务功能已开发完成，仅需要为提交按钮添加表单提交成功时的动效。
+
+</div>
+
+1.  选中需添加动效的按钮，如本案例中的“提交”按钮，复制组件名称，进入其“点击”事件逻辑。
+
+    <img src="../assets/JsCss_202412111352_3.png" class="imgStyle" style="" />
+
+1.  更改“提交”按钮的点击事件逻辑，拖入JS代码块并填写JavaScript代码。
+
+    <img src="../assets/JsCss_202412111352_4.png" class="imgStyle" style="" />
+
+    JavaScript代码示例：
+
+    ```javascript
+    // 获取组件对应的DOM元素
+    const targetEl = this.$refs['button_1'].$el; /* button_1为组件名称 */
+    const anchorClassName = 'form-submit-feedback';
+    
+    if (targetEl) {
+        // 为组件添加类名
+        targetEl.classList.add(anchorClassName);
+    }
+    
+    const style = document.createElement('style');
+    
+    // 基于anchorClassName前缀，设置 CSS 块的内容，适配表单提交场景并修改样式
+    style.innerHTML = `
+      .${anchorClassName} {
+            background-color: #808080!important; /* 背景色改为灰色 */
+            border-color: #808080!important; /* 边框色改为灰色 */
+            pointer-events: none!important; /* 添加禁选效果，禁止再次点击 */
+            animation: submitButtonAnimation 0.3s ease-in-out; /* 添加动画效果 */
+        }
+    
+        @keyframes submitButtonAnimation {
+            0% {
+                transform: scale(1);
+            }
+            50% {
+                transform: scale(1.1);
+            }
+            100% {
+                transform: scale(1);
+            }
+        }
+    `;
+    
+    // 将 style 标签插入到 head 元素中
+    document.head.appendChild(style);
+    ```
+
+1.  发布预览。
+
+## 4. 效果演示
+
+当点击 “提交” 按钮后，按钮会立即产生以下视觉变化：
+
+- 按钮的背景色、边框颜色会变为灰色（颜色值为#808080），整体色调统一，表示提交操作已执行且按钮处于不可再次操作的状态感。
+- 按钮会出现一个短暂的放大动画效果，先从原始大小放大到1.1倍（通过scale(1.1)实现），然后再恢复到原始大小（scale(1)），动画持续时间为0.3秒，使得按钮的状态变化更加明显，让用户清晰地感知到表单提交操作正在进行或者已经完成。
+- 鼠标指针移动到按钮上时，按钮处于禁选状态（pointer-events: none），即无法再次点击按钮，避免用户重复提交等误操作。
+
+<img src="../assets/JsCss_202412111352_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);">2024年12月11日</span>
+</div>
+
+<style>
+  .yellowBlock {
+    /* color: #FFFFFF; */
+    border-left-width: 0.5rem;
+    border-left-style: solid;
+    padding: 0.1rem 1.5rem;
+    margin:1rem 0;
+    background-color: #fcf5e1;
+    border-color: #eaaa08;
+  }
+</style>