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/001./346/212/230/347/272/277/345/233/276.md

@@ -0,0 +1,105 @@
+# 折线图
+
+## 1. 场景介绍
+
+折线图可以清晰地展示数据的趋势变化，有助于分析数据的变化趋势，例如曲线的上升或下降趋势等；可以同时展示多组数据的趋势，方便进行对比分析，了解数据之间的关系。
+
+在现有近15天最高温度、最低温度、平均温度数据的情况下，
+
+1. 通过折线图展示杭州近15天的平均温度的变化趋势。
+2. 通过折线图展示杭州近15天的最高温度、最低温度的变化趋势。
+
+## 2. 前提条件
+
+使用前需先导入echarts依赖库。
+
+方法一：点击IDE界面上方“更多”，打开下拉菜单，在依赖库管理中搜索echarts依赖库，在搜索到的依赖库列中中点击"导入依赖库"即可。
+
+<img src="../assets/zxt_0530_1103_1.png" style="border: 1px solid #ccc;" />
+
+方法二：点击组件列表上方"搜资产“，搜索echarts依赖库，在搜索到的相关资产中点击"导入"即可。
+
+<img src="../assets/zxt_0530_1103_2.png" style="border: 1px solid #ccc;" />
+
+## 3. 数据准备
+
+1. 已有气温实体Temperature，添加属性如下：
+
+   <img src="../assets/zxt_0530_1103_3.png" style="border: 1px solid #ccc;" />
+
+   * maxTemperature：最高温度，Decimal小数类型。
+   * minTemperature：最低温度，Decimal小数类型。
+   * avgTemperature：平均温度，Decimal小数类型。
+   * maxTemperature：预报日期，Date日期类型。
+
+2. 拖拽实体到目标页面，并选择列表（全）。用于生成数据表格后展示数据。
+
+   <img src="../assets/zxt_0530_1103_4.png" style="border: 1px solid #ccc;" />
+
+   参考数据如下：
+
+   <img src="../assets/zxt_0530_1103_5.png" style="border: 1px solid #ccc;" />
+
+## 4. 操作步骤
+
+### 4.1 场景1操作步骤
+
+1. 在温度统计页面中，将扩展组件-echarts依赖库组件中的折线图拖拽至页面中。
+
+   <img src="../assets/zxt_0530_1103_6.png" style="border: 1px solid #ccc;" />
+2. 在服务端逻辑中，构建数据源。在逻辑中创建一个服务端逻辑loadLineView，并新建输出参数result，将创建好的输出参数拖入逻辑线中生成赋值组件。
+
+   <img src="../assets/zxt_0530_1103_7.png" style="border: 1px solid #ccc;" />
+3. 拖拽数据查询组件至赋值组件右侧，并双击编辑。在数据查询组件的查询数据源中分别拖入温度实体，并点击实体，选择所需的列，如：平均温度avgTemperature，预报日期forecastDate。
+
+   <img src="../assets/zxt_0530_1103_8.png" style="border: 1px solid #ccc;" />
+
+   <img src="../assets/zxt_0530_1103_9.png" style="border: 1px solid #ccc;" />
+4. 在页面中选中折线图组件，在左侧属性中打开折线图数据源的编辑表达式功能，使用调用逻辑组件调用服务端逻辑loadLineView作为折线图的数据源。
+
+   <img src="../assets/zxt_0530_1103_10.png" style="border: 1px solid #ccc;" />
+
+   <img src="../assets/zxt_0530_1103_11.png" style="border: 1px solid #ccc;" />
+5. 修改折线图组件属性中的“维度”和“度量”。维度设置为forecastDate，对应数据查询中所查询出的预报日期；度量设置为avgTemperature，对应数据查询中所查询出的平均温度。
+
+   说明：若想同时展示多组数据的趋势，即折线图上显示两根及以上折线，可通过修改度量实现。多个度量可以用“,”分隔，具体操作步骤可参照折线图场景2。
+
+   <img src="../assets/zxt_0530_1103_12.png" style="border: 1px solid #ccc;" />
+6. 修改折线图“图表标题”、“X轴标题“、”Y轴标题“属性。另可根据自身需求在属性或样式中修改折线图样式，修改完成后发布预览效果。
+
+   <img src="../assets/zxt_0530_1103_13.png" style="border: 1px solid #ccc;" />
+
+### 4.2 场景2操作步骤
+
+通过折线图展示近15天的最高温度、最低温度的变化趋势。
+
+1. 在温度统计页面中，将扩展组件-echarts依赖库组件中的折线图拖拽至页面中。
+
+   <img src="../assets/zxt_0530_1103_14.png" style="border: 1px solid #ccc;" />
+2. 在服务端逻辑中，构建数据源。在逻辑中创建一个服务端逻辑loadLineView1，并新建输出参数result，将创建好的输出参数拖入逻辑线中生成赋值。
+
+   <img src="../assets/zxt_0530_1103_15.png" style="border: 1px solid #ccc;" />
+3. 拖拽数据查询组件至赋值组件右侧，并双击编辑。在数据查询组件的查询数据源中分别拖入温度实体，并点击实体，选择统计所需的列，如：最高温度maxTemperature，最低温度minTemperature，预报日期forecastDate。
+
+   <img src="../assets/zxt_0530_1103_16.png" style="border: 1px solid #ccc;" />
+
+   <img src="../assets/zxt_0530_1103_17.png" style="border: 1px solid #ccc;" />
+4. 在页面中选中折线图组件，在左侧属性中打开折线图数据源的编辑表达式功能，使用调用逻辑组件调用服务端逻辑loadLineView1作为折线图的数据源。
+
+   <img src="../assets/zxt_0530_1103_18.png" style="border: 1px solid #ccc;" />
+
+   <img src="../assets/zxt_0530_1103_19.png" style="border: 1px solid #ccc;" />
+5. 修改折线图组件属性中的维度为forecastDate，对应数据查询中所查询出的预报日期；度量为maxTemperature,minTemperature，对应数据查询中所查询出的最高温度和最低温度。
+
+   说明：多个度量可以“,”分隔，如下图所示
+
+   <img src="../assets/zxt_0530_1103_20.png" style="border: 1px solid #ccc;" />
+6. 修改折线图“图表标题”、“X轴标题“、”Y轴标题“属性。另可根据自身需求在属性或样式中修改折线图样式，修改完成后发布预览效果。
+
+<img src="../assets/zxt_0530_1103_21.png" style="border: 1px solid #ccc;" />
+
+## 5. 效果演示
+
+最终预览展示结果如下图：
+
+<img src="../assets/zxt_0530_1103_22.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/003./351/200/232/347/224/250/345/233/276.md

@@ -0,0 +1,268 @@
+# **通用图**
+
+## 场景说明
+
+通用图是CodeWave平台集成的ECharts插件，能实现数据可视化，提供直观，生动，可交互，可个性化定制的数据可视化图表。
+
+## 使用说明
+
+1.在页面中，将扩展组件echarts依赖库组件中的通用图拖拽至页面中。
+
+![image](../assets/tongyongtu_33_1.png)
+
+2.在页面下新建String类型局部变量option，并绑定为通用图的option配置项。
+
+![image](../assets/tongyongtu_33_2.png)
+
+3.在页面下新建页面逻辑loadEcharts，作为通用图的options配置项的数据来源。其中option配置可以参考Echarts官网，复制需要的JS代码粘贴到平台的JS代码块组件中。
+
+![image](../assets/tongyongtu_33_3.png)
+
+> 注：因平台中作为配置项使用的局部变量option的作用域是当前页面，在逻辑中使用需在option前添加“this.”
+
+![image](../assets/tongyongtu_33_4.png)
+
+option配置项中的常见术语如下：
+
+|  title  | 标题  |
+| :-----: | :---: |
+| legend  | 图例  |
+| tooltip | 提示  |
+|  xAxis  | x轴线 |
+|  yAxis  | y轴线 |
+| series  | 系列  |
+|  data   | 数据  |
+
+> 更多术语请参考速查手册：<https://echarts.apache.org/zh/cheat-sheet.html>
+
+4.在页面下新增页面事件-进入时，在事件逻辑中，使用调用逻辑组件调用load逻辑和通用图的reload逻辑。
+
+![image](../assets/tongyongtu_33_5.png)
+
+5.参考效果如下。
+
+![image](../assets/tongyongtu_33_6.png)
+
+以上内容对通用图组件的使用作简单介绍，接下来根据具体场景分析**如何实现固定图例**和**如何实现动态图例**。
+
+## 如何实现固定图例
+
+### 1.场景介绍
+
+当option配置项中的series数组的数量在开发时能确定，例如柱状图体已知每个维度体现几种柱形、饼状图体已知分配数量。此时数据构造只需要根据图例数量生成对应长度的List，即柱状图/折线图生成List\<Integer>类型数据，饼图生成List\<value\:Integer,name\:String>类型数据，其中value指饼图所占数值且支持自动计算百分比、name指饼图每项名称。
+
+以下示例希望通过柱状图统计学生信息实体Information中各个年龄的学生按照总数量、男生数量、女生数量三个维度的分布情况。
+
+### 2.数据准备
+
+已有学生信息实体Information数据表如下：
+
+![image](../assets/tongyongtu_33_7.png)
+
+新建如下数据结构StudentAgeDistributionStructure：
+
+![image](../assets/tongyongtu_33_8.png)
+
+*   ageList：用于存放实体Information数据表中所有不同的年龄，List\<Integer>类型。
+*   countList：用于存放实体Information数据表中各年龄对应的总人数，List\<Integer>类型。List长度与ageList保持一致。
+*   manList：用于存放实体Information数据表中各年龄对应的男生人数，List\<Integer>类型。List长度与ageList保持一致。
+*   womenList：用于存放实体Information数据表中各年龄对应的女生人数，List\<Integer>类型。List长度与ageList保持一致。
+
+新建服务端逻辑，通过数据查询的**分组聚合**将实体按照年龄分组，获取年龄列表和总人数列表，再根据不同的**筛选条件**获取男生人数列表和女生人数列表。将四个列表分别赋值到数据结构StudentAgeDistributionStructure类型的输出参数的对应属性中：
+
+![image](../assets/tongyongtu_33_9.png)
+
+### 3.操作步骤
+
+1.绑定配置项option。
+
+![image](../assets/tongyongtu_33_10.jpg)
+
+2.配置option数据来源。
+
+![image](../assets/tongyongtu_33_11.png)
+
+其中option配置可参考Echarts官网中的类似效果，通过修改官网提供的JS代码快速完成需要的option配置：
+
+![image](../assets/tongyongtu_33_12.png)
+
+修改后JS代码参考如下：
+
+> 配置信息中的barData即页面逻辑中的局部变量barData。且平台中option配置绑定页面变量，需要在前面加“this.“。
+
+    this.option = {
+        legend:{
+            data:['总数量','男生','女生']
+        },
+        grid:{
+            left:'3%',
+            right:'4%',
+            bottom:'3%',
+            containLabel: true
+        },
+        xAxis: [
+            {
+                type: 'category',
+                data: barData.ageList,
+                axisTick: {
+                    alignWithLabel: true
+                }
+            }
+        ],
+        yAxis: [
+            {
+                type: 'value',
+                boundaryGap: [0, 0.01]
+            }
+        ],
+        series: [
+            {
+                name: '总数量',
+                type: 'bar',
+                data: barData.countList
+            },
+            {
+                name: '男生',
+                type: 'bar',
+                data: barData.manList
+            },
+            {
+                name: '女生',
+                type: 'bar',
+                data: barData.womenList
+            }
+        ]
+    };
+
+3.在进入页面时调用页面逻辑并重新加载通用图。![image](../assets/tongyongtu_33_13.png)
+
+### 4.效果演示
+
+![image](../assets/tongyongtu_33_14.png)
+
+## 如何实现动态图例
+
+### 1.场景介绍
+
+当option配置项中的series数组的数量在开发时不能确定，例如柱状图体现为每个维度的柱形数量是动态决定的，饼状图体现为饼图数量是动态的。此时需要一个数据结构作为series的配置项。
+
+以下示例希望通过柱状图统计销售实体SalesVolume中各产品销售额按照选择的月份维度的分布情况。
+
+### 2.数据准备
+
+已有销售实体SalesVolume数据表如下：
+
+![image](../assets/tongyongtu_33_15.png)
+
+根据series需要的配置项新建如下数据结构EchartsSeriesStructure：
+
+![image](../assets/tongyongtu_33_16.png)
+
+新建服务端逻辑loadSalesVolumeProduct，通过数据查询的**分组聚合**将实体按照商品名称分组，获取商品列表：
+
+![image](../assets/tongyongtu_33_17.png)
+
+新建服务端逻辑loadSalesVolumeAll，查询实体的全部数据：
+
+![image](../assets/tongyongtu_33_18.png)
+
+新建表单，用于获取选择的月份列表：
+
+![image](../assets/tongyongtu_33_19.png)
+
+### 3.操作步骤
+
+1.绑定配置项option。
+
+![image](../assets/tongyongtu_33_20.png)
+
+2.配置option数据来源。
+
+2.1获取服务端逻辑查询数据。
+
+![image](../assets/tongyongtu_33_21.png)
+
+2.2根据商品信息循环生成该商品对应的series配置。
+
+![image](../assets/tongyongtu_33_22.png)
+
+2.3生成seriesList，作为option中完整的series的配置列表。在商品列表循环中循环查询该商品每个月对应的收入额并加入到该商品的收入额列表，收入额列表即数据结构EchartsSeriesStructure中的data属性，生成所有商品的series配置后，将所有配置加入到一个集合，即seriesList列表。![image](../assets/tongyongtu_33_23.png)
+
+2.4通过JS代码块完成option配置。
+
+![image](../assets/tongyongtu_33_24.png)
+
+与实现固定图例同理，option配置可参考Echarts官网中的类似效果，通过修改官网提供的JS代码快速完成需要的option配置。修改后的JS代码参考如下：
+
+> 配置信息中的barData、monthList、seriesList即页面或逻辑中的局部变量，页面上的变量需添加“this."。
+
+```javascript
+this.option = {
+    legend:{
+        data: barData.list
+    },
+    grid:{
+        left:'3%',
+        right:'4%',
+        bottom:'3%',
+        containLabel: true
+    },
+    xAxis: [
+        {
+            type: 'category',
+            data: this.monthList,
+            axisTick: {
+                alignWithLabel: true
+            }
+        }
+    ],
+    yAxis: [
+        {
+            type: 'value',
+            boundaryGap: [0, 0.01]
+        }
+    ],
+    series: seriesList
+};
+```
+
+3.在点击查询按钮时调用页面逻辑并重新加载通用图。
+
+![image](../assets/tongyongtu_33_25.png)
+
+### 4.效果演示
+
+![image](../assets/tongyongtu_33_26.gif)
+
+## 常用配置
+
+在配置option时，除了xAxis、yAxis、series等图表基础配置项外，也可以添加其他可能需要的配置，部分配置参考如下：
+
+### 颜色配置
+
+可以将color配置项设置为一个由色值组成的数组，以配置一个颜色轮盘。
+
+#### 全局配置color配置项方法
+
+![image](../assets/tongyongtu_33_27.png)
+
+#### 局部配置color配置项方法
+
+![image](../assets/tongyongtu_33_28.png)
+
+### 工具栏配置
+
+工具栏配置项常用JS写法如下：
+
+    toolbox:{
+    	feature:{
+    	saveAsImage:{}, // 保存为图片
+    	dataView:{}, //数据视图
+    	restore:{}, // 重置功能
+    	dataZoom:{}, // 区域缩放
+    	magicType:{
+    		type:['line','bar']    // 切换图表类型
+    		}
+    	}	
+    }
+

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/005./346/237/261/347/212/266/345/233/276.md

@@ -0,0 +1,72 @@
+# 柱状图
+
+柱状图是数据可视化的一种常规方式，通常用来比较两个或以上的数据用于较小的数据集分析。
+
+## 1. 场景介绍
+
+在现有数据班级信息、学生信息的情况下，使用柱状图展示各个班级下学生总数。
+
+## 2. 前提条件
+
+使用前需先导入echarts依赖库。
+
+方法一：点击IDE界面上方“更多”，打开下拉菜单，在依赖库管理中搜索echarts依赖库，在搜索到的依赖库列中中点击"导入依赖库"即可。
+
+<img src="../assets/zzt_0530_1334_1.png" style="border: 1px solid #ccc;" />
+
+方法二：点击组件列表上方"搜资产“，搜索echarts依赖库，在搜索到的相关资产中点击"导入"即可。
+
+<img src="../assets/zzt_0530_1334_2.png" style="border: 1px solid #ccc;" />
+
+## 3. 数据准备
+
+1. 已有班级实体。
+
+   <img src="../assets/zzt_0530_1334_3.png" style="border: 1px solid #ccc;" />
+2. 已有学生实体。其中包含Integer类型属性关联班级实体的主键id，即该属性用于记录学生所属班级。
+
+   <img src="../assets/zzt_0530_1334_4.png" style="border: 1px solid #ccc;" />
+3. 拖拽学生实体到目标页面，并选择列表（全）。用于生成数据表格后展示数据。
+
+   <img src="../assets/zzt_0530_1334_5.png" style="border: 1px solid #ccc;" />
+
+   参考数据如下：
+
+   <img src="../assets/zzt_0530_1334_6.png" style="border: 1px solid #ccc;" />
+
+## 4. 操作步骤
+
+1. 在学生统计页面中，将扩展组件-echarts依赖库组件中的柱状图拖拽至页面中。
+
+   <img src="../assets/zzt_0530_1334_7.png" style="border: 1px solid #ccc;" />
+2. 在服务端逻辑中，构建数据源。在逻辑中创建一个服务端逻辑loadBarView，并新建输出参数result，将创建好的输出参数拖入逻辑线中生成赋值。
+
+   <img src="../assets/zzt_0530_1334_8.png" style="border: 1px solid #ccc;" />
+3. 拖拽数据查询组件至赋值组件右侧，并双击编辑。在数据查询组件的查询数据源中分别拖入班级实体和学生实体，并进行如图表关联。
+
+   <img src="../assets/zzt_0530_1334_9.png" style="border: 1px solid #ccc;" />
+
+   <img src="../assets/zzt_0530_1334_10.png" style="border: 1px solid #ccc;" />
+4. 在数据查询组件的分组聚合中，添加分组。选择班级实体中的ClassInfo.name字段进行分组，即学生按照班级进行分组，并设置别名为className。
+
+   <img src="../assets/zzt_0530_1334_11.png" style="border: 1px solid #ccc;" />
+5. 同样在分组聚合中，添加聚合属性。选中Count计数，对字段StudentInfo.id进行聚合，即按照班级分组后统计每一个分组中学生的数量，并设置别名为number。
+
+   <img src="../assets/zzt_0530_1334_12.png" style="border: 1px solid #ccc;" />
+6. 在页面中选中柱状图组件，在左侧属性中打开柱状图数据源的编辑表达式功能，使用调用逻辑组件调用服务端逻辑loadBarView作为柱状图的数据源。
+
+   <img src="../assets/zzt_0530_1334_13.png" style="border: 1px solid #ccc;" />
+
+   <img src="../assets/zzt_0530_1334_14.png" style="border: 1px solid #ccc;" />
+7. 修改柱状图组件属性中的维度和度量分别为className和number，对应数据查询中分组聚合设置的别名。
+
+   <img src="../assets/zzt_0530_1334_15.png" style="border: 1px solid #ccc;" />
+8. 分别修改柱状图组件属性中的“标题”、“图例别名”、“X轴标题”及“Y轴标题”。此外还可以根据喜好在属性及样式中，对图表样式进行修改，修改完成后发布预览效果。
+
+   <img src="../assets/zzt_0530_1334_16.png" style="border: 1px solid #ccc;" />
+
+## 5. 效果演示
+
+最终预览结果如下图所示
+
+<img src="../assets/zzt_0530_1334_17.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/007./351/245/274/345/233/276.md

@@ -0,0 +1,81 @@
+# 饼图
+
+反映某个部分占整体的比例，用于对比几个数据在其形成的总和中所占百分比值时最有用。如果想表示多个系列的数据，则可以用环形图
+
+## 1. 场景介绍
+
+在现有数据班级信息、学生信息的情况下，使用饼图展示校内各班学生占比。
+
+## 2. 前提条件
+
+使用前需先导入echarts依赖库。
+
+方法一：点击IDE界面上方“更多”，打开下拉菜单，在依赖库管理中搜索echarts依赖库，在搜索到的依赖库列中中点击"导入依赖库"即可。
+
+<img src="../assets/bt_0530_1334_1.png" style="border: 1px solid #ccc;" />
+
+方法二：点击组件列表上方"搜资产“，搜索echarts依赖库，在搜索到的相关资产中点击"导入"即可。
+
+<img src="../assets/bt_0530_1334_2.png" style="border: 1px solid #ccc;" />
+
+## 3. 数据准备
+
+1.  已有班级实体。
+
+    <img src="../assets/bt_0530_1334_3.png" style="border: 1px solid #ccc;" />
+
+1.  已有学生实体。其中包含Integer类型属性关联班级实体的主键id，即该属性用于记录学生所属班级。
+
+      <img src="../assets/bt_0530_1334_4.png" style="border: 1px solid #ccc;" />
+
+1.  拖拽学生实体到目标页面，并选择列表（全）。用于生成数据表格后展示数据。
+
+    <img src="../assets/bt_0530_1334_5.png" style="border: 1px solid #ccc;" />
+
+    参考数据如下：
+
+    <img src="../assets/bt_0530_1334_6.png" style="border: 1px solid #ccc;" />
+
+## 4. 操作步骤
+
+1.  在学生统计页面中，将扩展组件echarts依赖库组件中的饼图拖拽至页面中。
+
+    <img src="../assets/bt_0530_1334_7.png" style="border: 1px solid #ccc;" />
+
+1.  在服务端逻辑中，构建数据源。在逻辑中创建一个服务端逻辑loadBarView，并新建输出参数result，将创建好的输出参数拖入逻辑线中生成赋值。
+
+    <img src="../assets/bt_0530_1334_8.png" style="border: 1px solid #ccc;" />
+
+1.  拖拽数据查询组件至赋值组件右侧，并双击编辑。在数据查询组件的查询数据源中分别拖入班级实体和学生实体，并进行如图表关联。
+
+    <img src="../assets/bt_0530_1334_9.png" style="border: 1px solid #ccc;" />
+
+    <img src="../assets/bt_0530_1334_10.png" style="border: 1px solid #ccc;" />
+
+1.  在数据查询组件的分组聚合中，添加分组。选择班级实体中的ClassInfo.name字段进行分组，即学生按照班级进行分组，并设置别名为className。
+
+    <img src="../assets/bt_0530_1334_11.png" style="border: 1px solid #ccc;" />
+
+1.  同样在分组聚合中，添加聚合属性。选中Count计数，对字段StudentInfo.id进行聚合，即按照班级分组后统计每一个分组中学生的数量，并设置别名为number。
+
+    <img src="../assets/bt_0530_1334_12.png" style="border: 1px solid #ccc;" />
+
+1.  在页面中选中饼图组件，在左侧属性中打开饼图数据源的编辑表达式功能，使用调用逻辑组件调用服务端逻辑loadBarView作为饼图的数据源。
+
+    <img src="../assets/bt_0530_1334_13.png" style="border: 1px solid #ccc;" />
+
+    <img src="../assets/bt_0530_1334_14.png" style="border: 1px solid #ccc;" />
+
+1.  修改饼图组件属性中的维度和度量分别为className和number，对应数据查询中分组聚合设置的别名。
+
+    <img src="../assets/bt_0530_1334_15.png" style="border: 1px solid #ccc;" />
+
+1.  修改饼图标题。此外可根据喜好在属性及样式中，对图表样式进行修改，修改完成后发布预览效果。
+
+    <img src="../assets/bt_0530_1334_16.png" style="border: 1px solid #ccc;" />
+
+## 5. 效果演示
+
+最终预览结果如下图所示
+
+<img src="../assets/bt_0530_1334_17.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/009./345/246/202/344/275/225/344/275/277/347/224/250/345/270/203/345/261/200/347/273/204/344/273/266/350/256/276/347/275/256/347/273/204/344/273/266/351/227/264/350/267/235/344/270/216/346/216/222/345/270/203/344/275/215/347/275/256.md

@@ -0,0 +1,57 @@
+# 如何使用布局组件设置组件间距与排布位置
+
+## 1. 场景介绍
+
+当在平台中设计一个网页或应用程序界面时，可能需要在页面上放置多个组件，比如按钮、单行输入、文本等。在这种情况下，可以使用布局组件来设置它们之间的间距与排布位置。
+
+<img src="../assets/szbjpb_0604_1918_1.png" style="border: 1px solid #ccc;" />
+
+## 2. 操作说明
+
+### 2.1 选择布局组件
+
+平台提供了一系列的布局组件，比如分栏布局、线性布局、栅格布局等。根据具体需求选择适合的布局组件。比如以下场景，选择栅格布局是一个很好的选择。栅格布局允许将页面分割成具有不同列数的栅格，从而更容易地放置和排布组件。可以在栅格布局中添加的固定数量的栅格列，并将组件放置在这些列中，以实现所需的排布效果。
+
+<img src="../assets/szbjpb_0604_1918_2.png" style="border: 1px solid #ccc;" />
+
+说明：栅格行的栅格数默认为24格，栅格列在栅格行内。可以通过设置行、列的格子数将页面分成若干个格子进行布局。有关栅格布局的详细概念及使用介绍，请参见：[栅格布局](../../../20.应用开发/10.页面设计/20.PC端Vue2组件说明（默认）/01.布局/030.栅格布局.md)。
+
+* 栅格行：可设置每行的栅格数以及行内组件对齐方式。
+* 栅格列：可设置每列的布局方式、占据数，以及列的偏移数。
+
+<img src="../assets/szbjpb_0604_1918_3.png" style="border: 1px solid #ccc;" />
+
+### 2.2 设置间距
+
+在选择的布局组件后，可以通过右侧属性设置组件的内边距（即组件内部元素与组件边缘的距离）和外边距（即组件与其他组件之间的距离）。比如，
+
+<img src="../assets/szbjpb_0604_1918_4.png" style="border: 1px solid #ccc;" />
+
+### 2.3 排布位置
+
+可以通过鼠标拖拽和设置属性来排布组件的位置。这可能包括上下左右的对齐、居中对齐等功能。
+
+通过拖拽组件排布组件位置：
+
+<img src="../assets/szbjpb_0604_1918_5.gif" style="border: 1px solid #ccc;" />
+
+通过设置样式属性排布组件位置：
+
+<img src="../assets/szbjpb_0604_1918_6.png" style="border: 1px solid #ccc;" />
+
+## 3. 相关资源
+
+[分类布局](../../../20.应用开发/10.页面设计/20.PC端Vue2组件说明（默认）/01.布局/040.分栏布局.md)
+
+[线性布局](../../../20.应用开发/10.页面设计/20.PC端Vue2组件说明（默认）/01.布局/020.线性布局.md)
+
+[栅格布局](../../../20.应用开发/10.页面设计/20.PC端Vue2组件说明（默认）/01.布局/030.栅格布局.md)
+
+[自由布局](../../../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年06月04日</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/010./345/246/202/344/275/225/344/275/277/347/224/250/345/256/271/345/231/250/347/273/204/344/273/266/345/256/236/347/216/260/351/241/265/351/235/242/345/206/205/345/256/271/347/232/204/345/210/206/345/235/227/345/221/210/347/216/260.md

@@ -0,0 +1,83 @@
+# 如何使用容器组件实现页面内容的分块呈现
+
+## 1. 容器组件介绍
+
+平台的容器组件起到组织和包裹其他组件的作用。它们提供了一种将其他组件组合在一起的方式，以创建更复杂的用户界面。
+
+以下是一些常见的前端容器组件：
+
+* 子页面容器：用于展示本页面下子页面的内容。文档请参考：[子页面容器组件](../../../20.应用开发/10.页面设计/20.PC端Vue2组件说明（默认）/30.容器/01.子页面容器.md)
+* Iframe：用于在网页中嵌入另一个网页或文档。它允许在一个网页中显示来自不同源的内容，例如嵌入其他网站的地图、视频、广告等。关于Iframe的文档请参考：[Iframe组件如何使用Iframe组件嵌入外部页面](070.如何使用Iframe组件嵌入外部页面.md)
+* 面板：面板用于将相关的内容组织在一起。它可以包含文本、图像、表单等其他组件，并提供一种可视化的方式来分组和展示这些内容。文档请参考：[面板组件](../../../20.应用开发/10.页面设计/20.PC端Vue2组件说明（默认）/30.容器/03.面板.md)
+* 折叠面板：折叠面板是一种特殊类型的面板，允许用户在多个内容块之间进行切换。通常，折叠面板在默认情况下只显示一个内容块，其他内容块则被折叠隐藏。用户可以点击标题或其他交互元素来展开或折叠内容块。文档请参考：[折叠面板](../../../20.应用开发/10.页面设计/20.PC端Vue2组件说明（默认）/30.容器/04.折叠面板.md)
+* 卡片：卡片用于展示简洁的信息片段或内容块。它通常包含标题、图像、文本等元素，并提供一种可视化的方式来呈现这些内容，卡片可以以网格形式排列。文档请参考：[卡片组件](../../../20.应用开发/10.页面设计/20.PC端Vue2组件说明（默认）/30.容器/05.卡片.md)
+
+## 2. 设计思路
+
+本案例目标：根据以下原型图制作简历详情页面，分块展示不同信息。
+
+<img src="../assets/rqzjsxfk_0604_1957_1.png" style="border: 1px solid #ccc;" />
+
+实现思路：
+
+* 模块划分：将页面划分为不同的功能区块，每个区块对应一个局部模块，如个人信息、作品展示等。
+* 布局排版：使用布局组件，将各个局部模块按照设计要求进行排版。
+* 交互设计：为组件添加相应的交互逻辑，例如折叠展开、链接跳转等。
+
+## 3. 操作步骤
+
+### 3.1 基础页面构建
+
+1. 新建一个总览页类型页面，
+
+   <img src="../assets/rqzjsxfk_0604_1957_2.png" style="border: 1px solid #ccc;" />
+
+   <img src="../assets/rqzjsxfk_0604_1957_3.png" style="border: 1px solid #ccc;" />
+2. 为当前页面添加resume子页面，类型为空白页。
+
+   <img src="../assets/rqzjsxfk_0604_1957_4.png" style="border: 1px solid #ccc;" />
+
+   <img src="../assets/rqzjsxfk_0604_1957_5.png" style="border: 1px solid #ccc;" />
+
+### 3.2 页面模块划分
+
+1. 拖拽线性布局组件至resume子页面，选择多行排布。
+
+   <img src="../assets/rqzjsxfk_0604_1957_6.png" style="border: 1px solid #ccc;" />
+2. 在刚添加的多行排布的第二个线性布局组件内，放置栅格布局组件，并选择2列样式（8：16）。
+
+   <img src="../assets/rqzjsxfk_0604_1957_7.png" style="border: 1px solid #ccc;" />
+
+   设置的栅格占据数比例为10:14。
+
+   <img src="../assets/rqzjsxfk_0604_1957_8.png" style="border: 1px solid #ccc;" />
+
+   <img src="../assets/rqzjsxfk_0604_1957_9.png" style="border: 1px solid #ccc;" />
+
+### 3.3 页面内容构建
+
+1. 添加面板组件放到第一行线性布局，修改面板标题为姓名，面板内容文本为岗位名，面板右上角插槽添加图片展示组件，调整图片高度。
+
+   <img src="../assets/rqzjsxfk_0604_1957_10.png" style="border: 1px solid #ccc;" />
+2. 在第二行栅格布局组件的左侧栅格列放置面板组件，组件插槽内放置折叠面板组件，面板标题修改为“个人信息”。
+
+   <img src="../assets/rqzjsxfk_0604_1957_11.png" style="border: 1px solid #ccc;" />
+3. 为折叠面板添加标题和内容，本案例写了部分简历常见信息。
+
+   <img src="../assets/rqzjsxfk_0604_1957_12.png" style="border: 1px solid #ccc;" />
+4. 为右侧栅格添加面板组件，修改面板标题为“个人作品网站预览”，在面板下方的插槽中放置Iframe组件，用于展示第三方网站。
+
+   <img src="../assets/rqzjsxfk_0604_1957_13.png" style="border: 1px solid #ccc;" />
+
+## 4. 效果演示
+
+最终页面效果
+
+<img src="../assets/rqzjsxfk_0604_1957_14.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月04日</span>
+</div>