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/22.H5/347/253/257Vue2/347/273/204/344/273/266/350/257/264/346/230/216/357/274/210/351/273/230/350/256/244/357/274/211/40./345/261/225/347/244/272/080./345/276/275/346/240/207.md

@@ -0,0 +1,72 @@
+# 徽标
+
+用于显示消息条数和提醒用户处理的角标，徽标中可自定义添加组件。
+
+<img src="../assets/huibiao_202410121146_1.png" class="imgStyle" style="" />
+
+## 属性
+
+> 组件通用属性请参见[组件通用属性说明](../../17.组件通用属性说明.md)。
+
+### 主要属性
+
+- 徽章值：Integer类型或Decimal类型。徽标右上角展示的消息数量，为空时不展示消息。可手动输入数字或编辑表达式。手动输入的内容，作为静态内容直接显示在徽标中。编辑表达式可绑定变量，通常用于动态显示消息条数。
+
+  - 手动输入
+
+    <img src="../assets/huibiao_202410121146_2.png" class="imgStyle" style="" />
+
+  - 编辑表达式
+
+    <img src="../assets/huibiao_202410121146_3.png" class="imgStyle" style="" />
+
+- 徽章最大值：Integer类型，徽章值支持展示的最大数值。“徽章值”超过最大值将不再显示准确的数字，用“最大值+”代替，如99+。
+
+  <img src="../assets/huibiao_202410121146_4.png" class="imgStyle" style="" />
+
+### 主要属性
+
+- 显示徽章：开启后右上角展示为小红点，“徽章值”属性不生效。默认关闭。
+
+  <img src="../assets/huibiao_202410121146_5.png" class="imgStyle" style="" />
+
+
+## 可访问属性
+
+在编写表达式或使用前端逻辑时，可以通过“变量或常量“使用徽章组件的[可访问属性](../../19.组件可访问属性.md)，可访问属性有：
+
+<img src="../assets/huibiao_202410121146_6.png" class="imgStyle" style="width:300px;" />
+
+- content（徽章值）：Integer类型或Decimal类型，徽标的消息数量，值与“徽章值”属性对齐。支持获取和赋值。
+- \_if（显示条件）：Boolean类型，徽标是否显示，值与“显示条件”属性对齐。支持获取和赋值。
+
+## 插槽
+
+徽章组件中包含插槽，支持拖拽放置其他组件：
+
+<img src="../assets/huibiao_202410121146_7.png" class="imgStyle" style="" />
+
+## 样式
+
+> 组件通用样式请参见[组件通用样式说明](../../18.组件通用样式说明.md)。
+
+### 主题样式
+
+- 最小宽度：设置徽标组件关闭“是否展示为小红点”时，右上角徽标值的最小宽度，默认16px。
+- 字体颜色：设置徽标组件关闭“是否展示为小红点”时，右上角徽标值的字体颜色，默认#ffffff。
+- 内边距：设置徽标组件关闭“是否展示为小红点”时，右上角徽标值的内边距，如1px 3px 3px 3px，默认0 3px。
+- 字体大小：设置徽标组件关闭“是否展示为小红点”时，右上角徽标值的字条大小，如1px，默认12px。
+- 字体粗细：设置徽标组件关闭“是否展示为小红点”时，右上角徽标值的字条粗细，单位px。
+- 边框厚度：设置徽标组件关闭“是否展示为小红点”时，右上角徽标值的边框厚度，单位px。
+- 背景色：设置徽标组件关闭“是否展示为小红点”时，右上角徽标值的背景色，默认#f24957。
+- dot 字体颜色：设置徽标组件开启“是否展示为小红点”时，右上角小红点的背景色，默认#f24957。
+- dot 字体大小：设置徽标组件开启“是否展示为小红点”时，右上角小红点的大小，默认8px。
+- dot 字体：设置徽标组件开启“是否展示为小红点”时，右上角小红点的字体。
+
+
+<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月12日</span>
+</div>

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/22.H5/347/253/257Vue2/347/273/204/344/273/266/350/257/264/346/230/216/357/274/210/351/273/230/350/256/244/357/274/211/40./345/261/225/347/244/272/090./351/200/232/347/237/245/346/240/217.md

@@ -0,0 +1,107 @@
+# 通知栏
+
+通知栏组件多用于展示系统的通知消息，例如发布公告、促销活动、日历提醒等场景。
+
+<img src="../assets/tongzhilan_202410121136_1.gif" class="imgStyle" style="width:300px;" />
+
+## 属性
+
+> 组件通用属性请参见[组件通用属性说明](../../17.组件通用属性说明.md)。
+
+### 主要属性
+
+- 通知栏模式： 通知栏的展示形式，可以设置为：可关闭、链接、普通。
+
+    - 可关闭：点击右侧图标可以关闭通知栏。
+
+      <img src="../assets/tongzhilan_202410121136_2.png" class="imgStyle" style="width:300px;" />
+
+    - 链接：点击通知栏可根据设置的链接进行跳转或下载。
+
+      <img src="../assets/tongzhilan_202410121136_3.png" class="imgStyle" style="width:300px;" />
+
+    - 普通
+
+      <img src="../assets/tongzhilan_202410121136_4.png" class="imgStyle" style="width:300px;" />
+
+- 开启滚动播放：是否支持通知栏信息从右到左循环滚动。默认开启。
+
+  <img src="../assets/tongzhilan_202410121136_5.gif" class="imgStyle" style="width:300px;" />
+
+- 开启文本换行：是否支持根据通知栏内容高度调整通知栏的总高度。默认关闭。
+
+### 交互属性
+
+- 链接类型：支持页面跳转和下载链接。“通知栏模式”为链接时生效。
+- 链接： 链接的详细地址。“通知栏模式”为链接时生效。
+
+  - 当“链接类型”为页面链接时，支持点击通知栏跳转至应用内外部页面。默认开启编辑表达式，可直接点击“请选择表达式“进入编辑表达式界面选择应用内的页面实现跳转，也可以使用变量或其他表达式实现动态的页面跳转，且支持在高级设置中设置跳转的锚点和打开方式。当关闭编辑表达式属性时，可直接输入跳转页面的路由链接，如/index/userList。
+
+    - 开启编辑表达式，直接选择应用内的页面实现跳转。
+
+      <img src="../assets/tongzhilan_202410121136_6.png" class="imgStyle" style="width:400px;" />
+
+    - 开启编辑表达式，使用变量或者其他表达式实现动态的页面跳转。例如将跳转链接地址存储在String类型的局部变量address。
+
+      <img src="../assets/tongzhilan_202410121136_7.png" class="imgStyle" style="width:400px;" />
+
+    - 关闭编辑表达式，手动输入跳转链接地址。
+
+      <img src="../assets/tongzhilan_202410121136_8.png" class="imgStyle" style="width:400px;" />
+
+  - 当“链接类型”为下载链接时，支持点击通知栏下载链接对应内容。可直接点击“双箭头“图标上传或选择需要下载的文件，也可以开启编辑表达式，使用变量或其他表达式实现动态的下载链接。
+
+    - 直接点击“双箭头“图标选择需要下载的文件。
+
+      <img src="../assets/tongzhilan_202410121136_9.png" class="imgStyle" style="" />
+
+    - 开启编辑表达式，使用变量或者其他表达式实现动态的下载链接。例如将下载链接地址存储在String类型的局部变量address。
+
+      <img src="../assets/tongzhilan_202410121136_10.png" class="imgStyle" style="width:400px;" />
+
+- 打开方式：页面跳转的打开方式。可选新窗口、当前窗口、父级窗口和顶级窗口。
+
+    - 新窗口：在当前浏览器中打开一个新的窗口进行展示。
+    - 当前窗口：在当前活动的浏览器窗口进行展示。
+    - 父级窗口：在当前窗口的上一级窗口进行展示。
+    - 顶级窗口：在最顶层的窗口进行展示。
+
+  > 其中父级窗口和顶级窗口仅适用于iframe组件嵌套的情况，若不存在嵌套，则打开方式同当前窗口。
+
+## 事件
+
+| 事件名      | 描述                               |
+| :------- | :------------------------------- |
+| 点击通知栏时触发 | 单击通知栏时触发该事件中的逻辑。                 |
+| 关闭通知栏时触发 | 关闭通知栏时触发该事件中的逻辑。当“通知栏模式”为可关闭时有效。 |
+| 点击链接     | 点击通知栏时触发该事件中的逻辑。当“通知栏模式”为链接时有效。  |
+
+
+## 可访问属性
+
+在编写表达式或使用前端逻辑时，可以通过“变量或常量“使用通知栏组件的[可访问属性](../../19.组件可访问属性.md)，可访问属性有：
+
+<img src="../assets/tongzhilan_202410121136_11.png" class="imgStyle" style="width:300px;" />
+
+- \_if（显示条件）：Boolean类型，通知栏是否显示，值与“显示条件”属性对齐。支持获取和赋值。
+
+## 插槽
+
+通知栏组件中包含插槽，支持拖拽放置其他组件：
+
+<img src="../assets/tongzhilan_202410121136_12.png" class="imgStyle" style="width:300px;" />
+
+## 样式
+
+> 组件通用样式请参见[组件通用样式说明](../../18.组件通用样式说明.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月12日</span>
+</div>

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/22.H5/347/253/257Vue2/347/273/204/344/273/266/350/257/264/346/230/216/357/274/210/351/273/230/350/256/244/357/274/211/40./345/261/225/347/244/272/100./346/255/245/351/252/244/346/235/241.md

@@ -0,0 +1,353 @@
+# 步骤条
+
+步骤条组件可以起到导航的作用，明确当前操作节点位于整个操作流程中的位置，也可以指导后续仍有几个操作节点。步骤条组件通常在表单填写、流程状态、用户注册等场景使用。
+
+<img src="../assets/buzhoutiao_202410121106_1.png" class="imgStyle" style="width:300px;" />
+
+## 属性
+
+> 组件通用属性请参见[组件通用属性说明](../../17.组件通用属性说明.md)。
+
+### 步骤条
+
+<img src="../assets/buzhoutiao_202410121106_2.png" class="imgStyle" style="width:300px;" />
+
+步骤条可以通过添加步骤条项的方式形成一个固定操作步骤、步骤数量的静态步骤条。
+
+#### 数据属性
+
+- 数据源：除了直接添加步骤条子组件的方式外，步骤条可通过开启数据源属性的编辑表达式绑定数据源，实现动态步骤条的效果。数据源可绑定`List<T>`类型变量，或使用调用逻辑组件调用输出参数为数组或包含`List<T>`的数据结构的逻辑。通过添加步骤条子组件形成的静态步骤条无需添加数据源，添加数据源后的步骤条也无法展示手动添加的步骤条项。
+
+    - 当步骤条只需展示标题时，`List<T>`中的T可以是String类型或包含该字段的其他数据类型，也可以通过枚举来构建数组。
+
+      <div class="highlight">
+
+      以下是一个由枚举构建步骤条数据源的简单示例：
+
+      1.  新建枚举，按照步骤顺序添加枚举项。
+
+          <img src="../assets/buzhoutiao_202410121106_3.png" class="imgStyle" style="" />
+
+      1.  打开数据源的编辑表达式，进入步骤条的数据源，使用内置函数EnumToList获取枚举的集合作为步骤条的数据源。
+
+          <img src="../assets/buzhoutiao_202410121106_4.gif" class="imgStyle" style="" />
+
+      1.  选中步骤条项中的文本组件修改“文本”属性，绑定为current.item.text。
+
+          <img src="../assets/buzhoutiao_202410121106_5.png" class="imgStyle" style="" />
+
+      </div>
+
+  - 当步骤条需要展示标题和其他提示信息时，步骤条的数据类型需包含至少两个属性用于展示标题和提示信息，`List<T>`中的T可以是实体或其他数据结构。
+
+    <div class="highlight">
+
+    以下是一个由数据结构构建步骤条数据源的简单示例：
+
+    1.  创建数据结构SelectStructure作为步骤条的数据源的数据结构。
+
+        <img src="../assets/buzhoutiao_202410121106_6.png" class="imgStyle" style="" />
+
+    2.  在页面下添加局部变量listTab作为步骤条的数据源，类型为`List<SelectStructure>`，并打开数据源的编辑表达式功能后将其绑定为步骤条的数据源。
+
+        <img src="../assets/buzhoutiao_202410121106_7.png" class="imgStyle" style="" />
+
+    3.  修改步骤条项插槽中的组件。例如拖拽两个文本组件，“文本”属性分别绑定为current.item.text和current.item.hint。
+
+        <img src="../assets/buzhoutiao_202410121106_8.png" class="imgStyle" style="" />
+
+    4.  `List<SelectStructure>`类型局部变量listTab中的数据可以根据用户的实际需求添加，例如在进入页面事件中使用内置函数Add向局部变量listTab中添加SelectStructure类型的数据；或步骤条的内容已存在在数据库或其他集合中时，可在获取内容后使用内置函数Transform将数据类型转化为步骤条的数据类型。
+
+        <img src="../assets/buzhoutiao_202410121106_9.png" class="imgStyle" style="" />
+
+        <img src="../assets/buzhoutiao_202410121106_10.png" class="imgStyle" style="" />
+
+    </div>
+
+- 数据类型：数据源返回的数据结构的类型，自动识别类型进行展示说明，为只读状态无法修改。
+- 当前步骤：设置当前处于选中状态的步骤，Integer整数类型。起始值为0，每个步骤递增1个单位。添加4个步骤条项但不配置步骤条项的“状态值”属性时参考效果如下：
+
+    - “当前步骤”为0，步骤1处于进行中状态，步骤2、步骤3、步骤4处于等待状态。
+
+      <img src="../assets/buzhoutiao_202410121106_11.png" class="imgStyle" style="width:300px;" />
+
+    - “当前步骤”为1，步骤1处于完成状态，步骤2处于进行中状态，步骤3、步骤4处于等待状态。
+
+      <img src="../assets/buzhoutiao_202410121106_12.png" class="imgStyle" style="width:300px;" />
+
+    - “当前步骤”为3，步骤1、步骤2、步骤3、步骤4均为完成状态。
+
+      <img src="../assets/buzhoutiao_202410121106_13.png" class="imgStyle" style="width:300px;" />
+
+    “当前步骤”可手动输入值或编辑表达式。手动输入的值，作为静态值直接展示当前步骤状态；编辑表达式可绑定变量，可以动态获取当前步骤，通常用于实现当前步骤的变更。
+
+    - 手动输入整数：
+
+      <img src="../assets/buzhoutiao_202410121106_14.png" class="imgStyle" style="" />
+
+    - 编辑表达式：编辑表达式时若直接绑定变量，如果开启“是否将组件输入赋值给变量“，可以将选择的当前步骤赋值给变量，例如选中第二个步骤则“当前步骤”绑定的变量值为1，也支持通过变量展示当前步骤。编辑表达式时若包含其他表达式，则当前步骤仅作展示，建议搭配“只读”属性使用。
+
+      <img src="../assets/buzhoutiao_202410121106_15.png" class="imgStyle" style="" />
+
+  <div class="highlight">
+
+  当需要根据当前事件或流程的进行状态展示步骤条的“当前步骤”时，可以为“当前步骤”属性绑定变量并为变量赋值。示例场景如下：
+
+  - 需求场景：已有流程实体ExamineProcess包含枚举类型属性status用于存储当前流程进行状态，要求在获取对应实体信息后将该实体的进行状态展示中步骤条中。
+  - 操作步骤：
+
+    1. 创建Integer类型局部变量step，打开“当前步骤”的编辑表达式，将step绑定为“当前步骤”。
+
+       <img src="../assets/buzhoutiao_202410121106_16.png" class="imgStyle" style="" />
+
+    2. 在“进入页面”事件中根据进行状态为step赋值。获取实体对应的status属性值后，使用匹配组件在所有可能返回的枚举值对应的分支下分别为局部变量step赋值，使步骤条的“当前步骤”对应当前进行状态展示。
+
+       <img src="../assets/buzhoutiao_202410121106_17.png" class="imgStyle" style="" />
+
+    3. 此时步骤条仅作当前进度的展示，可以打开步骤条组件的“只读”属性。
+
+       <img src="../assets/buzhoutiao_202410121106_18.png" class="imgStyle" style="" />
+
+  </div>
+
+#### 主要属性
+
+- 步骤条方向：步骤条的方向，支持横向或竖向。
+
+  - 竖向
+
+    <img src="../assets/buzhoutiao_202410121106_19.png" class="imgStyle" style="width:300px;" />
+
+#### 状态属性
+
+- 只读：设置此项只读，正常显示，但禁止选择。默认关闭。
+- 禁用：置灰显示，且禁止任何交互，如焦点、点击、选择等。默认关闭。
+
+### 步骤条项
+
+#### 主要属性
+
+- 状态：支持设置步骤条项的状态，包括等待、进行中、完成和错误四个选项。选择不同状态后，步骤条项将显示相应的样式。若不配置该属性时，会使用步骤条的当前步骤来自动指定状态；如果该属性与当前步骤指定的状态不匹配会覆盖自动匹配的状态。下图为设置错误状态的步骤条项：
+
+  <img src="../assets/buzhoutiao_202410121106_20.png" class="imgStyle" style="" />
+
+  状态值支持编辑表达式，常用于根据步骤结果动态展示步骤状态。参考示例如下：
+
+  - 需求场景：初始化时步骤2为进行中状态，点击通过按钮时完成步骤2；点击驳回按钮时使步骤2为错误状态。
+
+    <img src="../assets/buzhoutiao_202410121106_21.png" class="imgStyle" style="width:300px;" />
+
+  - 操作步骤
+
+    - 通过“添加步骤条子组件“的方式添加三个步骤条项。
+
+      <img src="../assets/buzhoutiao_202410121106_22.png" class="imgStyle" style="" />
+
+    - 创建String类型局部变量status，在点击“通过”按钮的事件中为局部变量status赋值“通过”并调用步骤条的组件逻辑next执行下一步；在点击“驳回”按钮的事件中为局部变量status赋值“驳回”。
+
+      <img src="../assets/buzhoutiao_202410121106_23.png" class="imgStyle" style="" />
+
+      <img src="../assets/buzhoutiao_202410121106_24.png" class="imgStyle" style="" />
+
+    - 打开步骤条项“状态值”属性的编辑表达式，使用匹配组件根据局部变量status的结果为“状态值”属性赋值。
+
+      <img src="../assets/buzhoutiao_202410121106_25.png" class="imgStyle" style="" />
+
+      <img src="../assets/buzhoutiao_202410121106_26.png" class="imgStyle" style="" />
+
+      > “状态值”属性不同状态对应值——等待： wait；进行中： process；完成： finish；错误： error
+
+  - 效果演示
+
+    <img src="../assets/buzhoutiao_202410121106_27.gif" class="imgStyle" style="width:300px;" />
+
+- 图标：图标：在该步骤展示的图标，支持从图标库选择图标、上传自定义SVG格式图标或编辑表达式。
+
+  <img src="../assets/buzhoutiao_202410121106_28.png" class="imgStyle" style="width:300px;" />
+
+#### 状态属性
+
+- 只读：设置此项只读，正常显示，但禁止选择。默认关闭。
+- 禁用：置灰显示，且禁止任何交互，如焦点、点击、选择等。默认关闭。
+
+## 事件
+
+### 步骤条
+
+| 事件名       | 描述                 |
+| :-------- | :----------------- |
+| [切换步骤时](#切换步骤时) | 步骤条切换状态时触发该事件中的逻辑。 |
+
+#### 切换步骤时
+
+- 事件概述：步骤条切换状态时触发该事件中的逻辑。
+- 输入参数：事件的输入参数event由应用自动生成，支持在事件逻辑中获取输入参数的值。
+
+  <img src="../assets/buzhoutiao_202410121106_29.png" class="imgStyle" style="width:200px;" />
+
+  - event：Integer类型，当前步骤的值。值与步骤条“当前步骤”属性相同。
+
+### 步骤条项
+
+| 事件名      | 描述                   |
+| :------- | :------------------- |
+| [点击标题](#点击标题) | 点击步骤条项的标题时触发该事件中的逻辑。 |
+| [点击图标](#点击图标) | 点击步骤条项的图标时触发该事件中的逻辑。 |
+
+#### 点击标题
+
+- 事件概述：点击步骤条项的标题时触发该事件中的逻辑。
+- 输入参数：事件的输入参数event由应用自动生成，支持在事件逻辑中获取输入参数的值。
+
+  <img src="../assets/buzhoutiao_202410121106_29.png" class="imgStyle" style="width:200px;" />
+
+  - event：Integer类型，当前步骤的步骤值。
+
+#### 点击图标
+
+- 事件概述：点击步骤条项的图标时触发该事件中的逻辑。
+- 输入参数：事件的输入参数event由应用自动生成，支持在事件逻辑中获取输入参数的值。
+
+  <img src="../assets/buzhoutiao_202410121106_29.png" class="imgStyle" style="width:200px;" />
+
+  - event：Integer类型，当前步骤的步骤值。
+
+## 可访问属性
+
+在编写表达式或使用前端逻辑时，可以通过“变量或常量“使用步骤条组件的[可访问属性](../../19.组件可访问属性.md)，可访问属性有：
+
+<img src="../assets/buzhoutiao_202410121106_32.png" class="imgStyle" style="width:300px;" />
+
+**步骤条**
+
+- value（当前步骤）：Integer类型，当前处于选中状态的步骤。值与“当前步骤”属性对齐。支持获取和赋值。
+- data（数据）：`List<T>`类型，步骤条内容的数据集合，来源于步骤条的数据源。支持获取。
+- isFirst（第一步）：Boolean类型，当前处于选中状态的步骤是否为第一步。支持获取。
+- isLast（最后一步）：Boolean类型，当前处于选中状态的步骤是否为最后一步。支持获取。
+- disabled（禁用）：Boolean类型，步骤条是否禁用，值与“禁用”属性对齐。支持获取和赋值。
+- readonly（只读）：Boolean类型，步骤条是否只读，值与“只读”属性对齐。支持获取和赋值。
+- \_if（显示条件）：Boolean类型，步骤条是否显示，值与“显示条件”属性对齐。支持获取和赋值。
+
+**步骤条项**
+
+- status（状态）：String类型，步骤的状态值，值与“状态值”属性对齐。支持获取和赋值。
+- disabled（禁用）：Boolean类型，步骤条项是否禁用，值与“禁用”属性对齐。支持获取和赋值。
+- readonly（只读）：Boolean类型，步骤条项是否只读，值与“只读”属性对齐。支持获取和赋值。
+- \_if（显示条件）：Boolean类型，步骤条项是否显示，值与“显示条件”属性对齐。支持获取和赋值。
+
+## 组件逻辑
+
+页面添加步骤条组件后，支持调用步骤条的内置逻辑，内置逻辑有：
+
+| 逻辑名        | 描述           |
+| :--------- | :----------- |
+| [prev](#prev)   | 返回上一步骤。      |
+| [next](#next)   | 执行下一步骤。      |
+| [reload](#reload) | 清除缓存，重新加载数据。 |
+
+<img src="../assets/buzhoutiao_202410121106_33.png" class="imgStyle" style="width:400px;" />
+
+### prev
+
+- 逻辑概述：返回上一步骤。
+- 示例：点击按钮返回上一步。
+
+  <img src="../assets/buzhoutiao_202410121106_34.png" class="imgStyle" style="" />
+
+- 其他说明：
+
+    - 当步骤条为“只读”或当前步骤的上一步骤条项为“只读”时组件逻辑不生效。
+    - 当前步骤为第一步时组件逻辑不生效。
+
+### next
+
+- 逻辑概述：执行下一步骤。
+- 示例：点击按钮执行下一步。
+
+  <img src="../assets/buzhoutiao_202410121106_35.png" class="imgStyle" style="" />
+
+- 其他说明：
+
+    - 当步骤条为“只读”或当前步骤的下一步骤条项为“只读”时组件逻辑不生效。
+    - 当前步骤为最后一步时组件逻辑不生效。
+
+### reload
+
+- 逻辑概述：清除缓存，重新加载数据。适用于步骤条的数据源使用调用逻辑的情况。
+- 其他说明：当步骤条的数据源使用调用逻辑并添加了监听变量，被监听的变量改变时将自动触发步骤条的reload。详细说明请参考[组件通用属性说明](../../17.组件通用属性说明.md)-监听变量。
+
+
+
+## 插槽
+
+步骤条组件中包含插槽，支持拖拽放置其他组件：
+
+- 单选项包含插槽。若步骤条绑定数据源，插槽中的组件支持根据步骤条的数据源来配置信息并动态加载。常见用法如：指示当前步骤的标题。
+
+  <img src="../assets/buzhoutiao_202410121106_36.png" class="imgStyle" style="width:300px;" />
+
+## 样式
+
+> 通用样式说明请参见[组件通用样式说明](../../18.组件通用样式说明.md)。
+
+### 主题样式
+
+- 整体背景色：设置步骤条整体背景色，包括步骤条项，默认#ffffff。
+- 非激活态字体颜色：设置非激活状态的步骤条项字体颜色。默认#969799。
+- 激活态字体颜色：设置激活状态的步骤条项字体颜色，默认#26bd71。
+- 字体大小：设置步骤条字体大小，默认14px。
+- 线段颜色：设置步骤条项之间连接线的颜色，默认#e5e5e5。
+- finish态线段颜色：设置完成状态下线段的颜色，默认#26bd71。
+- finish态字体颜色：设置完成状态下的字体颜色，默认#333333。
+- 图大小色：设置步骤条下方圆点大小，默认12px。
+- 点大小：设置点大小，默认5px。
+- 点颜色：设置点颜色，默认#969799。
+- 横向字体大小，设置步骤条横向时字体大小，默认12px。
+- 禁用颜色：设置开启禁用后，步骤条颜色，默认#c8c9cc。
+
+## 示例
+
+### 需求场景
+
+已有如下步骤条，要求初始时“步骤1”为进行状态，每次点击按钮时进行到下一步骤。同时步骤条仅作步骤展示，不能手动更改状态。
+
+<img src="../assets/buzhoutiao_202410121106_37.png" class="imgStyle" style="width:300px;" />
+
+### 操作步骤
+
+1. 创建Integer类型局部变量，将默认值设为0。
+
+   <img src="../assets/buzhoutiao_202410121106_38.png" class="imgStyle" style="" />
+
+2. 将局部变量绑定为步骤条的“当前步骤”属性；打开步骤条的“只读”属性。
+
+   <img src="../assets/buzhoutiao_202410121106_39.png" class="imgStyle" style="" />
+
+3. 为按钮添加点击事件，每次点击使步骤前进一步。
+
+   <img src="../assets/buzhoutiao_202410121106_40.png" class="imgStyle" style="" />
+
+4. 发布预览效果。
+
+### 效果演示
+
+<img src="../assets/buzhoutiao_202410121106_41.gif" class="imgStyle" style="width:300px;" />
+
+<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月12日</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/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/22.H5/347/253/257Vue2/347/273/204/344/273/266/350/257/264/346/230/216/357/274/210/351/273/230/350/256/244/357/274/211/40./345/261/225/347/244/272/110./350/256/241/346/227/266/345/231/250.md

@@ -0,0 +1,71 @@
+# 计时器
+
+计时器组件用来记录用时，适用于活动倒计时等。如下图所示，计时器组件默认展示方式为00:00（分:秒）。
+
+<img src="../assets/jishiqi_202410121058_1.gif" class="imgStyle" style="" />
+
+## 属性
+
+> 组件通用属性请参见[组件通用属性说明](../../17.组件通用属性说明.md)。
+
+### 主要属性
+
+- 计时器时长（秒）：计时器的总时长，Integer类型，单位为秒。支持手动输入或是编辑表达式。手动输入的值，作为静态时长展示计时时间。编辑表达式可绑定变量，通常用于动态生成计时时间。
+
+    - 手动输入：通常使用于固定计时时间的场景。
+
+      <img src="../assets/jishiqi_202410121058_2.png" class="imgStyle" style="" />
+
+    - 编辑表达式：通常使用于需要动态计时的场景。
+
+      <img src="../assets/jishiqi_202410121058_3.png" class="imgStyle" style="" />
+
+- 计时方式：支持选择正计时和倒计时。
+- 自动开始计时：进入页面后自动开始计时，支持动态绑定布尔（Boolean）类型的变量。默认开启。
+- 隐藏分钟：开启后以秒为单位展示计时时长。默认关闭。
+
+## 事件
+
+| 事件名   | 描述                 |
+| :---- | :----------------- |
+| 计时器开始 | 计时器开始计时时触发该事件中的逻辑，即开启“自动开始计时”属性并进入页面或手动调用组件逻辑start时触发。 |
+| 计时器暂停 | 计时器暂停计时时触发该事件中的逻辑，即手动调用组件逻辑pause时触发。 |
+| 计时器继续 | 计时器继续计时时触发该事件中的逻辑，即手动调用组件逻辑continue时触发。 |
+| 计时器结束 | 计时器结束计时时触发该事件中的逻辑，即倒计时完全结束或手动调用组件逻辑stop时触发。 |
+
+## 可访问属性
+
+在编写表达式或使用前端逻辑时，可以通过“变量或常量“使用计时器组件的[可访问属性](../../19.组件可访问属性.md)，可访问属性有：
+
+<img src="../assets/jishiqi_202410121058_4.png" class="imgStyle" style="width:300px;" />
+
+- \_if（显示条件）：Boolean类型，计时器是否显示，值与“显示条件”属性对齐。支持获取和赋值。
+
+
+## 组件逻辑
+
+页面添加计时器组件后，支持调用计时器的内置逻辑，内置逻辑有：
+
+| 逻辑名      | 描述    |
+| :------- | :---- |
+| start    | 计时开始。 |
+| pause    | 计时暂停。 |
+| continue | 计时继续。 |
+| stop     | 计时停止。 |
+
+<img src="../assets/jishiqi_202410121058_5.png" class="imgStyle" style="width:400px;" />
+
+## 样式
+
+> 组件通用样式请参见[组件通用样式说明](../../18.组件通用样式说明.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月12日</span>
+</div>