codewave-openclaw-installer 1.0.0

package/skills/smart-customer-service/docs/codewave/20./345/272/224/347/224/250/345/274/200/345/217/221/10./351/241/265/351/235/242/350/256/276/350/256/241/28.H5/347/253/257Vue3/347/273/204/344/273/266/350/257/264/346/230/216/040./345/261/225/347/244/272/130./346/240/207/347/255/276.md

@@ -0,0 +1,166 @@
+# 标签
+
+<span class="tag-blue">Vue3</span> <span class="tag-yellow">H5</span>
+
+用于标记关键词和概括主要内容。
+
+<img src="../assets/biaoqian_202509121420_1.png" class="imgStyle" style="width:300px;" />
+
+<div class="highlight">
+
+在本章节，你将学习：
+
+1. 标签的各类属性、事件、可访问属性等基础信息。
+2. 如何使用标签的各类属性，具体实现效果包括但不限于
+
+   * 使用标签的“文本”属性，通过手动输入配置静态展示内容，或通过编辑表达式实现文本动态显示；
+   * 使用标签的“类型”属性，以设置标签的预设样式，可选默认、主要、成功、警告、危险五类；
+   * 使用标签的“颜色”属性，自定义标签背景色；
+   * 使用标签的“尺寸”属性，以设置标签的显示大小；
+   * 使用标签的 “可关闭” 属性，以实现标签可在点击关闭按钮后隐藏；
+   * 使用标签的“文本颜色”属性，自定义标签内文字的颜色；
+
+3. 如何使用标签的各类事件，具体实现效果包括但不限于
+
+   * 使用标签的“点击”事件，在鼠标左键单击标签时触发自定义业务逻辑；
+   * 使用标签的“关闭”事件，在点击标签关闭按钮时触发对应处理逻辑。
+
+</div>
+
+## 属性
+
+> 组件通用属性请参见[组件通用属性说明](../../17.组件通用属性说明.md)。
+
+### 主要属性
+
+- 文本：标签所展示的文本内容。可手动输入内容或编辑表达式。
+
+  - 手动输入：手动输入的文本，作为静态内容直接显示在标签中；
+
+    <img src="../assets/biaoqian_202509121420_2.png" class="imgStyle" style="" />
+
+  - 编辑表达式：编辑表达式可绑定变量，通常用于动态显示文本。例如将文本内容存储在局部变量input中。
+
+    <img src="../assets/biaoqian_202509121420_3.png" class="imgStyle" style="" />
+
+- 类型：设置标签的样式，包括默认、主要、成功、警告、危险。
+
+    <img src="../assets/biaoqian_202509121420_4.png" class="imgStyle" style="" />
+
+    <div class="highlight">
+
+    开启编辑表达式后，可复制选项标识来配置表达式的值。用于标识“类型”属性不同选项的对应值如下图：
+
+    <img src="../assets/biaoqian_202509121420_5.png" class="imgStyle" style="width:300px;" />
+
+    </div>
+    
+
+
+- 颜色：标签的颜色，优先级高于“类型”属性。支持输入RGB、RGBA、Hex、颜色英文代码。
+- 尺寸：标签尺寸，可选小、正常、大。
+
+### 交互属性
+
+- 可关闭：Boolean类型，标签是否可在点击关闭按钮后隐藏。
+
+    <img src="../assets/biaoqian_202509121420_6.png" class="imgStyle" style="" />
+
+- 是否展示标签：Boolean类型，标签是否显示。
+- 是否朴素：Boolean类型，可选标签外观，是否为朴素标签。
+
+    <img src="../assets/biaoqian_202509121420_7.png" class="imgStyle" style="width:300px;" />
+
+- 是否圆角：Boolean类型，可选标签外观，是否为圆角标签。
+
+    <img src="../assets/biaoqian_202509121420_8.png" class="imgStyle" style="width:300px;" />
+
+- 是否标记：Boolean类型，可选标签外观，是否为标记标签。
+
+    <img src="../assets/biaoqian_202509121420_9.png" class="imgStyle" style="width:300px;" />
+
+- 文本颜色：标签中文本内容的字体颜色。支持输入RGB、RGBA、Hex、颜色英文代码。
+
+## 事件
+
+| **事件名** | **描述**                             |
+| :------ | :----------------------------------- |
+| 点击      | 鼠标左键单击按钮组件时，触发该事件中的逻辑。               |
+| 关闭      | 关闭标签时，触发该事件中的逻辑。触发事件的前提条件是开启“可关闭”属性。 |
+
+## 可访问属性
+
+在编写表达式或使用前端逻辑时，可以通过“变量或常量“使用标签组件的[可访问属性](../../19.组件可访问属性.md)，可访问属性有：
+
+<img src="../assets/biaoqian_202509121420_10.png" class="imgStyle" style="width:300px;" />
+
+- \_if（显示条件）：Boolean类型，标签是否显示，值与“显示条件”属性对齐。支持获取和赋值。
+
+## 样式
+
+> 组件通用样式请参见[组件通用样式说明](../../18.组件通用样式说明.md)。
+
+### 主题样式
+
+- padding：标签内边距
+- text-color：标签文字颜色
+- font-size：标签字体大小
+- radius：标签圆角半径
+- line-height：标签行高
+- medium-padding：标签中等尺寸内边距
+- large-padding：标签大尺寸内边距
+- large-radius：标签大尺寸圆角半径
+- large-font-size：标签大尺寸字体大小
+- round-radius：标签圆形圆角半径
+- danger-color：标签危险类型颜色
+- primary-color：标签主要类型颜色
+- success-color：标签成功类型颜色
+- warning-color：标签警告类型颜色
+- default-color：标签默认颜色
+- plain-background：标签朴素类型背景色
+
+组件支持在**样式**->**主题样式**中调整当前单个组件的主题样式；也支持在**自定义主题样式**->**组件主题配置**中调整当前类型组件在应用中的所有样式，并支持直接预览效果。
+
+> 推荐前往组件主题配置中查看各主题样式的效果，相关文档请参考[自定义主题样式](../../../60.可视化开发界面/70.更多设置/30.自定义主题样式.md)。
+
+<img src="../assets/biaoqian_202509121420_11.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年09月12日</span>
+</div>
+<style>
+ .highlight {
+    background-color: #eaf6ff;
+    border-color: #679CF8;
+    border-left-width: 0.2rem;
+    border-left-style: solid;
+    padding: 1rem 1rem 1rem 1rem;
+    margin: 1rem 0px;
+}
+</style>
+<style>
+.tag-blue {
+    display: inline-block;
+    padding: 0.5px 10px;
+    border-radius: 9999px;
+    font-size: 0.75rem;
+    font-weight: 500;
+    margin-bottom: 1rem;
+    background-color: #dbeafe; /* 浅蓝色背景 */
+    color: #2563eb; /* 深蓝色文字 */
+}
+.tag-yellow {
+    display: inline-block;
+    padding: 0.5px 10px;
+    border-radius: 9999px;
+    font-size: 0.75rem;
+    font-weight: 500;
+    margin-bottom: 1rem;
+    background-color: #fef3c7; /* 浅黄色背景 */
+    color: #d97706; /* 深黄色文字 */
+}
+
+</style>

package/skills/smart-customer-service/docs/codewave/20./345/272/224/347/224/250/345/274/200/345/217/221/10./351/241/265/351/235/242/350/256/276/350/256/241/28.H5/347/253/257Vue3/347/273/204/344/273/266/350/257/264/346/230/216/040./345/261/225/347/244/272/140./345/276/275/347/253/240.md

@@ -0,0 +1,100 @@
+# 徽章
+
+<span class="tag-blue">Vue3</span> <span class="tag-yellow">H5</span>
+
+在右上角展示徽标数字或小红点。
+
+<img src="../assets/huizhang_202509121422_1.png" class="imgStyle" style="width:300px;" />
+
+## 属性
+
+> 组件通用属性请参见[组件通用属性说明](../../17.组件通用属性说明.md)。
+
+### 主要属性
+
+- 最大值：自定义最大值。当显示值（数值）超过这个最大值时，显示格式会变为'{max}+'。可用于数量限制或者统计数据。支持手动输入或编辑表达式进行设置。
+
+    <img src="../assets/huizhang_202509121422_2.png" class="imgStyle" style="width:175px;" />
+
+- 小圆点：Boolean类型，是否显示小圆点代替显示值。
+
+    <img src="../assets/huizhang_202509121422_3.png" class="imgStyle" style="width:175px;" />
+
+- 值为零时是否显示：Boolean类型，显示值为0时是否仍然显示 “徽章”值。
+- 左偏移量：徽章值距离左侧的偏移距离，默认单位px。
+- 上偏移量：徽章值距离顶部的偏移距离，默认单位px。
+- 位置：徽章值的显示位置，可选右上角、右下角、左上角、左下角。
+- 内容：标记需要显示的值。Integer或String类型，例如一个表示数量的数字，或一段描述性的文字。支持手动输入或编辑表达式进行设置。
+
+    <img src="../assets/huizhang_202509121422_4.png" class="imgStyle" style="width:275px;" />
+
+### 样式属性
+
+- 背景色：徽章值的背景颜色。支持输入RGB、RGBA、Hex、颜色英文代码。
+
+## 可访问属性
+
+在编写表达式或使用前端逻辑时，可以通过“变量或常量“使用徽章组件的[可访问属性](../../19.组件可访问属性.md)，可访问属性有：
+
+<img src="../assets/huizhang_202509121422_5.png" class="imgStyle" style="width:300px;" />
+
+- \_if（显示条件）：Boolean类型，徽章是否显示，值与“显示条件”属性对齐。支持获取和赋值。
+
+## 插槽
+
+徽章组件中包含插槽，支持拖拽放置其他组件：
+
+<img src="../assets/huizhang_202509121422_6.png" class="imgStyle" style="width:300px;" />
+
+## 样式
+
+> 组件通用样式请参见[组件通用样式说明](../../18.组件通用样式说明.md)。
+
+### 主题样式
+
+- size：徽标尺寸
+- color：徽标文字颜色
+- padding：徽标内边距
+- font-size：徽标字体大小
+- font-weight：徽标字体粗细
+- border-width：徽标边框宽度
+- background：徽标背景色
+- dot-color：徽标圆点颜色
+- dot-size：徽标圆点尺寸
+- font：徽标字体
+
+组件支持在**样式**->**主题样式**中调整当前单个组件的主题样式；也支持在**自定义主题样式**->**组件主题配置**中调整当前类型组件在应用中的所有样式，并支持直接预览效果。
+
+> 推荐前往组件主题配置中查看各主题样式的效果，相关文档请参考[自定义主题样式](../../../60.可视化开发界面/70.更多设置/30.自定义主题样式.md)。
+
+<img src="../assets/huizhang_202509121422_7.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年09月12日</span>
+</div>
+<style>
+.tag-blue {
+    display: inline-block;
+    padding: 0.5px 10px;
+    border-radius: 9999px;
+    font-size: 0.75rem;
+    font-weight: 500;
+    margin-bottom: 1rem;
+    background-color: #dbeafe; /* 浅蓝色背景 */
+    color: #2563eb; /* 深蓝色文字 */
+}
+.tag-yellow {
+    display: inline-block;
+    padding: 0.5px 10px;
+    border-radius: 9999px;
+    font-size: 0.75rem;
+    font-weight: 500;
+    margin-bottom: 1rem;
+    background-color: #fef3c7; /* 浅黄色背景 */
+    color: #d97706; /* 深黄色文字 */
+}
+
+</style>

package/skills/smart-customer-service/docs/codewave/20./345/272/224/347/224/250/345/274/200/345/217/221/10./351/241/265/351/235/242/350/256/276/350/256/241/28.H5/347/253/257Vue3/347/273/204/344/273/266/350/257/264/346/230/216/040./345/261/225/347/244/272/150./345/210/206/345/211/262/347/272/277.md

@@ -0,0 +1,88 @@
+# 分割线
+
+<span class="tag-blue">Vue3</span> <span class="tag-yellow">H5</span>
+
+用于将内容分隔为多个区域。
+
+<img src="../assets/fengexian_202509121424_1.png" class="imgStyle" style="width:300px;" />
+
+## 属性
+
+> 组件通用属性请参见[组件通用属性说明](../../17.组件通用属性说明.md)。
+
+### 主要属性
+
+- 虚线：Boolean类型，可选分割线外观，是否为虚线。
+
+    <img src="../assets/fengexian_202509121424_2.png" class="imgStyle" style="width:300px;" />
+
+- 细线：Boolean类型，可选分割线外观，是否为0.5px细线。
+- 内容位置：用于控制分割线上提示文案的位置，可选择左、右、居中。
+
+    <img src="../assets/fengexian_202509121424_3.png" class="imgStyle" style="width:300px;" />
+
+## 可访问属性
+
+在编写表达式或使用前端逻辑时，可以通过“变量或常量“使用分割线组件的[可访问属性](../../19.组件可访问属性.md)，可访问属性有：
+
+<img src="../assets/fengexian_202509121424_4.png" class="imgStyle" style="width:300px;" />
+
+- \_if（显示条件）：Boolean类型，分割线是否显示，值与“显示条件”属性对齐。支持获取和赋值。
+
+## 插槽
+
+分割线组件中包含插槽，支持拖拽放置其他组件。若不放置其他组件时，则分割线仅显示为一条直线。
+
+<img src="../assets/fengexian_202509121424_5.png" class="imgStyle" style="width:300px;" />
+
+## 样式
+
+> 组件通用样式请参见[组件通用样式说明](../../18.组件通用样式说明.md)。
+
+### 主题样式
+
+- margin：分割线边距
+- vertical-margin：分割线垂直边距
+- text-color：分割线文字颜色
+- font-size：分割线字体大小
+- line-height：分割线行高
+- border-color：分割线边框颜色
+- content-padding：分割线内容内边距
+- content-left-width：分割线内容左侧宽度
+- content-right-width：分割线内容右侧宽度
+
+组件支持在**样式**->**主题样式**中调整当前单个组件的主题样式；也支持在**自定义主题样式**->**组件主题配置**中调整当前类型组件在应用中的所有样式，并支持直接预览效果。
+
+> 推荐前往组件主题配置中查看各主题样式的效果，相关文档请参考[自定义主题样式](../../../60.可视化开发界面/70.更多设置/30.自定义主题样式.md)。
+
+<img src="../assets/fengexian_202509121424_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年09月12日</span>
+</div>
+<style>
+.tag-blue {
+    display: inline-block;
+    padding: 0.5px 10px;
+    border-radius: 9999px;
+    font-size: 0.75rem;
+    font-weight: 500;
+    margin-bottom: 1rem;
+    background-color: #dbeafe; /* 浅蓝色背景 */
+    color: #2563eb; /* 深蓝色文字 */
+}
+.tag-yellow {
+    display: inline-block;
+    padding: 0.5px 10px;
+    border-radius: 9999px;
+    font-size: 0.75rem;
+    font-weight: 500;
+    margin-bottom: 1rem;
+    background-color: #fef3c7; /* 浅黄色背景 */
+    color: #d97706; /* 深黄色文字 */
+}
+
+</style>

package/skills/smart-customer-service/docs/codewave/20./345/272/224/347/224/250/345/274/200/345/217/221/10./351/241/265/351/235/242/350/256/276/350/256/241/28.H5/347/253/257Vue3/347/273/204/344/273/266/350/257/264/346/230/216/040./345/261/225/347/244/272/160./347/251/272/347/212/266/346/200/201.md

@@ -0,0 +1,78 @@
+# 空状态
+
+<span class="tag-blue">Vue3</span> <span class="tag-yellow">H5</span>
+
+空状态时的占位提示。
+
+<img src="../assets/kongzhuangtai_202509121425_1.png" class="imgStyle" style="width:300px;" />
+
+## 属性
+
+> 组件通用属性请参见[组件通用属性说明](../../17.组件通用属性说明.md)。
+
+### 主要属性
+
+- 图片类型：图片的类型，可选默认、错误、网络、搜索。未设置“自定义图片”属性时有效。
+
+    <img src="../assets/kongzhuangtai_202509121425_2.png" class="imgStyle" style="width:300px;" />
+
+- 自定义图片：图片的链接，支持直接填写链接地址或编辑表达式进行设置。
+- 图片大小：图片的大小。默认单位px。
+- 描述文字：图片下方的描述文本。
+
+## 可访问属性
+
+在编写表达式或使用前端逻辑时，可以通过“变量或常量“使用空状态组件的[可访问属性](../../19.组件可访问属性.md)，可访问属性有：
+
+<img src="../assets/kongzhuangtai_202509121425_3.png" class="imgStyle" style="width:300px;" />
+
+- \_if（显示条件）：Boolean类型，空状态是否显示，值与“显示条件”属性对齐。支持获取和赋值。
+
+## 样式
+
+> 组件通用样式请参见[组件通用样式说明](../../18.组件通用样式说明.md)。
+
+### 主题样式
+
+- padding：空状态内边距
+- image-size：空状态图片尺寸
+- description-margin-top：空状态描述上边距
+- description-padding：空状态描述内边距
+- description-color：空状态描述颜色
+- description-font-size：空状态描述字体大小
+- description-line-height：空状态描述行高
+- bottom-margin-top：空状态底部上边距
+
+组件支持在**样式**->**主题样式**中调整当前单个组件的主题样式；也支持在**自定义主题样式**->**组件主题配置**中调整当前类型组件在应用中的所有样式，并支持直接预览效果。
+
+<img src="../assets/kongzhuangtai_202509121425_4.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年09月12日</span>
+</div>
+<style>
+.tag-blue {
+    display: inline-block;
+    padding: 0.5px 10px;
+    border-radius: 9999px;
+    font-size: 0.75rem;
+    font-weight: 500;
+    margin-bottom: 1rem;
+    background-color: #dbeafe; /* 浅蓝色背景 */
+    color: #2563eb; /* 深蓝色文字 */
+}
+.tag-yellow {
+    display: inline-block;
+    padding: 0.5px 10px;
+    border-radius: 9999px;
+    font-size: 0.75rem;
+    font-weight: 500;
+    margin-bottom: 1rem;
+    background-color: #fef3c7; /* 浅黄色背景 */
+    color: #d97706; /* 深黄色文字 */
+}
+
+</style>

package/skills/smart-customer-service/docs/codewave/20./345/272/224/347/224/250/345/274/200/345/217/221/10./351/241/265/351/235/242/350/256/276/350/256/241/28.H5/347/253/257Vue3/347/273/204/344/273/266/350/257/264/346/230/216/040./345/261/225/347/244/272/170./347/216/257/345/275/242/350/277/233/345/272/246/346/235/241.md

@@ -0,0 +1,86 @@
+# 环形进度条
+
+<span class="tag-blue">Vue3</span> <span class="tag-yellow">H5</span>
+
+圆环形的进度条组件，支持进度渐变动画。
+
+<img src="../assets/huanxingjindutiao_202509121427_1.png" class="imgStyle" style="width:300px;" />
+
+## 属性
+
+> 组件通用属性请参见[组件通用属性说明](../../17.组件通用属性说明.md)。
+
+### 主要属性
+
+- 进度值：Integer类型或Decimal类型，进度条的完成度。可选范围是 0 - 目标进度。默认开启编辑表达式功能，编辑表达式时通常直接绑定变量，会根据变量的值展示当前百分比。
+- 目标进度：Integer类型，进度条最终要达到的目标进度数值。
+- 文本：环形中心显示的文本，不填写时默认为进度值百分比。
+- 尺寸：进度条的宽高，可以是数字或百分比，如100（默认单位为px），或10%、10vw。
+- 进度条颜色：进度条完成区域的背景色，支持输入RGB、RGBA、Hex、颜色英文代码。
+- 轨道颜色：进度条未完成区域的背景色，支持输入RGB、RGBA、Hex、颜色英文代码。
+- 动画速度：Integer类型，进度值改变时的变化速度，单位为 rate/s。
+- 顺时针：Boolean类型，完成进度是否顺时针显示。
+- 线条宽度：Integer类型，进度条的宽度，默认单位px。
+- 开始位置：进度开始的方向，可选顶部、右侧、底部、左侧。
+
+### 样式属性
+
+- 线条端点样式：环形进度条两端的形状，包括圆形和方形，默认为圆形。
+
+    <img src="../assets/huanxingjindutiao_202509121427_2.png" class="imgStyle" style="width:300px;" />
+
+## 可访问属性
+
+在编写表达式或使用前端逻辑时，可以通过“变量或常量“使用环形进度条组件的[可访问属性](../../19.组件可访问属性.md)，可访问属性有：
+
+<img src="../assets/huanxingjindutiao_202509121427_3.png" class="imgStyle" style="" />
+
+- \_if（显示条件）：Boolean类型，环形进度条是否显示，值与“显示条件”属性对齐。支持获取和赋值。
+
+## 样式
+
+> 组件通用样式请参见[组件通用样式说明](../../18.组件通用样式说明.md)。
+
+### 主题样式
+
+- size：环形进度条尺寸
+- color：环形进度条颜色
+- layer-color：环形进度条层颜色
+- text-color：环形进度条文字颜色
+- text-font-weight“环形进度条文字字体粗细
+- text-font-size：环形进度条文字字体大小
+- text-line-height：环形进度条文字行高
+
+组件支持在**样式**->**主题样式**中调整当前单个组件的主题样式；也支持在**自定义主题样式**->**组件主题配置**中调整当前类型组件在应用中的所有样式，并支持直接预览效果。
+
+<img src="../assets/huanxingjindutiao_202509121427_4.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年09月12日</span>
+</div>
+<style>
+.tag-blue {
+    display: inline-block;
+    padding: 0.5px 10px;
+    border-radius: 9999px;
+    font-size: 0.75rem;
+    font-weight: 500;
+    margin-bottom: 1rem;
+    background-color: #dbeafe; /* 浅蓝色背景 */
+    color: #2563eb; /* 深蓝色文字 */
+}
+.tag-yellow {
+    display: inline-block;
+    padding: 0.5px 10px;
+    border-radius: 9999px;
+    font-size: 0.75rem;
+    font-weight: 500;
+    margin-bottom: 1rem;
+    background-color: #fef3c7; /* 浅黄色背景 */
+    color: #d97706; /* 深黄色文字 */
+}
+
+</style>