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/26.PC/347/253/257Vue3/347/273/204/344/273/266/350/257/264/346/230/216/30./345/256/271/345/231/250/40./346/212/230/345/217/240/351/235/242/346/235/277.md

@@ -0,0 +1,193 @@
+# 折叠面板
+
+<span class="tag-blue">Vue3</span> <span class="tag-yellow">PC</span>
+
+折叠面板用于创建可折叠/展开的内容呈现区域，对内容进行分组归类，隐藏次要内容，提高阅读效率。常用于文章列表、常见问题解答、设置界面、任务列表等场景。
+
+<img src="../assets/zhediemianban_202512301558_1.png" class="imgStyle" style="" />
+
+<div class="highlight">
+
+在本章节，你将学习：
+
+1.  折叠面板的各类属性、事件、可访问属性等基础信息。
+2.  如何使用折叠面板的各类属性，具体实现效果包括但不限于
+
+    - 使用折叠面板的“数据源”属性，以设置折叠面板中动态展示的折叠面板项的数据内容。
+    - 使用折叠面板的“当前激活的面板”属性，以获取展开折叠面板项的唯一标识。
+
+3.  使用“添加折叠面板项”，在折叠面板未绑定数据源的情况下添加新的折叠面板项。
+4.  如何使用折叠面板的组件逻辑，具体实现效果包括但不限于
+
+    - 使用折叠面板的组件逻辑“reload”，以实现清除缓存，重新加载数据。
+
+</div>
+
+
+
+## 属性
+
+> 组件通用属性请参见[组件通用属性说明](../../17.组件通用属性说明.md)。
+
+### 折叠面板
+
+<img src="../assets/zhediemianban_202512301558_2.png" class="imgStyle" style="" />
+
+支持通过添加折叠面板项的方式形成一个面板项数量的折叠面板。
+
+#### 数据属性
+
+- 数据源：除了直接添加折叠面板项的方式外，折叠面板可通过开启数据源属性的编辑表达式绑定数据源，实现动态折叠面板的效果。数据源可以绑定`List<T>`类型变量或输出参数为数组或包含`List<T>`的匿名数据结构的逻辑，List中的T可以是任意类型（包括`List<T>`、联合类型）。
+
+    <div class="highlight">
+
+    当折叠面板绑定数据源后，应用自动生成current变量。折叠面板会根据数据源中包含的 List 按顺序对每一项进行循环遍历，使用current即可指代在 List 中当前正在访问或操作的对象。为**折叠面板项**或其中的组件编辑表达式或添加事件，即可调用current变量：
+
+    <img src="../assets/zhediemianban_202512301558_3.png" class="imgStyle" style="width:200px" />
+
+    **所有可绑定数据源的组件同理。**
+
+    在折叠面板的属性中设置任意字段（如唯一标识字段）时，同样根据字段值进行循环遍历，但不显示其 current.item 前缀。
+
+    </div>
+
+    操作步骤：
+
+    1.  点击“请选择表达式”进入编辑表达式页面，通过拖入变量、使用调用逻辑组件等方式设置数据源。
+
+        <img src="../assets/zhediemianban_202512301558_4.png" class="imgStyle" style="" />
+
+    1.  在**折叠面板项**插槽中放置其他组件，例如文本组件，文本内容动态绑定current.item下的属性。
+
+        <img src="../assets/zhediemianban_202512301558_5.png" class="imgStyle" style="" />
+
+- 数据类型：数据源返回的数据结构的类型，平台会自动识别类型，仅作展示说明。
+- 唯一标识：绑定数据源后，依据该字段动态加载折叠面板项的唯一标志符。用于指定折叠面板的“当前激活的面板”属性。触发“[当前激活面板改变时触发](#当前激活面板改变时触发)”事件时可在事件的输入参数event中获取被点击的折叠面板项的值字段。
+- 当前激活的面板：展开面板的唯一标识符。未开启“手风琴模式”时为String类型，开启“手风琴模式”时为`List<String>`类型。默认开启编辑表达式功能。编辑表达式时通常直接绑定变量，如果开启“是否将组件输入赋值给变量“，会根据展开的折叠面板项的唯一标识符改变变量的值，也会根据变量的值展示当前展开的折叠面板项。
+- 禁用字段：绑定数据源后，依据该字段动态加载折叠面板项是否禁用，该字段值的数据类型为Boolean类型。
+
+#### **交互属性**
+
+- 手风琴模式：Boolean类型，是否开启手风琴模式。
+  - 关闭：可同时展开多个面板项。
+  - 开启：展开一个面板项时，其他面板项全部折叠。
+
+  <img src="../assets/zhediemianban_202512301558_6.png" class="imgStyle" style="" />
+
+### **折叠面板项**
+
+#### **主要属性**
+
+- 唯一标志符：用于标识面板项的唯一值。用于指定折叠面板的“当前激活的面板”属性。
+- 是否禁用：Boolean 类型，控制当前面板项是否可以展开或折叠。
+
+## 事件
+
+| **事件名**   | **描述**                    |
+| :---------- | :-------------------------- |
+| 当前激活面板改变时触发 | 该折叠面板中任意折叠面板项展开时，触发该事件中的逻辑。 |
+
+### 当前激活面板改变时触发
+
+- 事件概述：该折叠面板中任意折叠面板项展开时，触发该事件中的逻辑。
+- 输入参数：事件的输入参数event由应用自动生成，支持在事件逻辑中获取输入参数的值。
+
+    <img src="../assets/zhediemianban_202512301558_7.png" class="imgStyle" style="width:200px" />
+
+    - event：String或`List<String>`类型，激活面板的唯一标识或唯一标识的集合，未开启“手风琴模式”时为String类型，开启“手风琴模式”时为`List<String>`类型。
+
+## 可访问属性
+
+在编写表达式或使用前端逻辑时，可以通过“变量或常量“使用折叠面板组件的[可访问属性](../../19.组件可访问属性.md)，可访问属性有：
+
+<img src="../assets/zhediemianban_202512301558_8.png" class="imgStyle" style="width:300px" />
+
+**折叠面板**
+
+- \_if（显示条件）：Boolean类型，折叠面板是否显示，值与“显示条件”属性对齐。支持获取和赋值。
+
+**折叠面板项**
+
+- \_if（显示条件）：Boolean类型，折叠面板项是否显示，值与“显示条件”属性对齐。支持获取和赋值。
+
+## 组件逻辑
+
+页面添加折叠面板组件后，支持调用折叠面板的组件逻辑，组件逻辑有：
+
+| **逻辑名** | **描述**     |
+| :------ | :----------- |
+| reload  | 清除缓存，重新加载数据。 |
+
+<img src="../assets/zhediemianban_202512301558_9.png" class="imgStyle" style="width:300px" />
+
+## 插槽
+
+折叠面板组件中包含插槽，支持拖拽放置其他组件：
+
+- 折叠面板项包含两个插槽。若折叠面板绑定数据源，折叠面板项不可选中，折叠面板项对应区域的插槽中的组件支持根据折叠面板的数据源来配置信息并动态加载。常见用法如：指示当前折叠面板项的标题和内容。
+
+    <img src="../assets/zhediemianban_202512301558_10.png" class="imgStyle" style="" />
+
+## 样式
+
+> 组件通用样式请参见[组件通用样式说明](../../18.组件通用样式说明.md)。
+
+### 主题样式
+
+- border-color：折叠面板边框颜色。
+- header-height：折叠面板高度。
+- header-bg-color：折叠面板标题背景颜色。
+- header-text-color：折叠面板标题文本颜色。
+- header-font-size：折叠面板标题字体大小。
+- content-bg-color：折叠面板内容背景颜色。
+- content-font-size：折叠面板内容字体大小。
+- content-text-color：折叠面板内容文本颜色。
+
+组件支持在**样式**->**主题样式**中调整当前单个组件的主题样式；也支持在**自定义主题样式**->**组件主题配置**中调整当前类型组件在应用中的所有样式，并支持直接预览效果。
+
+> 推荐前往组件主题配置中查看各主题样式的效果，相关文档请参考[自定义主题样式](../../../60.可视化开发界面/70.更多设置/30.自定义主题样式.md)。
+
+<img src="../assets/zhediemianban_202512301558_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年12月30日</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>
+
+<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>

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/26.PC/347/253/257Vue3/347/273/204/344/273/266/350/257/264/346/230/216/40./345/261/225/347/244/272/10./345/205/254/345/221/212.md

@@ -0,0 +1,138 @@
+# 公告
+
+<span class="tag-blue">Vue3</span> <span class="tag-yellow">PC</span>
+
+公告组件用于展示突出的提醒事项。
+
+<img src="../assets/gonggao_202506091552_1.png" class="imgStyle" style="" />
+
+## 属性
+
+> 组件通用属性请参见[组件通用属性说明](../../17.组件通用属性说明.md)。
+
+### 主要属性
+
+- 类型：公告类型，可选成功、警告、提示、错误。
+
+    <img src="../assets/gonggao_202506091552_2.png" class="imgStyle" style="" />
+
+    <div class="highlight">
+
+    开启编辑表达式后，可复制选项标识来配置表达式的值。用于标识“类型”属性不同选项的对应值如下图：
+
+    <img src="../assets/gonggao_202506091552_3.png" class="imgStyle" style="width:300px" />
+
+    </div>
+
+
+- 是否可以关闭：Boolean 类型，控制组件是否可以被关闭。开启后，在用户界面中，用户可以通过点击关闭按钮来移除该组件。
+
+    <img src="../assets/gonggao_202506091552_4.gif" class="imgStyle" style="" />
+
+- 文字是否居中：Boolean 类型，组件中的文字是否居中显示。
+
+    <img src="../assets/gonggao_202506091552_5.png" class="imgStyle" style="" />
+
+- 关闭按钮自定义文本：自定义关闭按钮上显示的文本内容。默认为“×”，而通过这个参数可以将其替换为自定义的文字，例如 “关闭”、“取消” 等。
+
+    <img src="../assets/gonggao_202506091552_6.png" class="imgStyle" style="" />
+
+- 是否显示图标：Boolean 类型，是否显示与公告类型对应的图标。
+
+    <img src="../assets/gonggao_202506091552_7.png" class="imgStyle" style="" />
+
+- 风格：公告的样式展示风格，可选浅色和深色。
+
+    <img src="../assets/gonggao_202506091552_8.png" class="imgStyle" style="" />
+
+    <div class="highlight">
+
+    开启编辑表达式后，可复制选项标识来配置表达式的值。用于标识“风格”属性不同选项的对应值如下图：
+
+    <img src="../assets/gonggao_202506091552_9.png" class="imgStyle" style="width:300px" />
+
+    </div>
+
+
+
+## 事件
+
+| 事件名           | 描述                                       |
+| :------------ | :--------------------------------------- |
+| 关闭alert时触发的事件 | 点击关闭按钮时触发该事件中的逻辑，触发事件的前提条件是开启“是否可以关闭”属性。 |
+
+## 可访问属性
+
+在编写表达式或使用前端逻辑时，可以通过“变量或常量“使用公告组件的[可访问属性](../../19.组件可访问属性.md)，可访问属性有：
+
+<img src="../assets/gonggao_202506091552_10.png" class="imgStyle" style="width:300px" />
+
+- \_if（显示条件）：Boolean类型，公告是否显示，值与“显示条件”属性对齐。支持获取和赋值。
+
+## 插槽
+
+公告组件中包含插槽，支持拖拽放置其他组件，如文本组件，用于显示公告标题：
+
+<img src="../assets/gonggao_202506091552_11.png" class="imgStyle" style="" />
+
+## 样式
+
+> 组件通用样式请参见[组件通用样式说明](../../18.组件通用样式说明.md)。
+
+### 主题样式
+
+- padding：警告框的内边距。
+- border-radius-base：警告框的基础边框半径。
+- title-font-size：警告框标题的字体大小。
+- title-with-description-font-size：带描述的警告框标题的字体大小。
+- description-font-size：警告框描述的字体大小。
+- close-font-size：警告框关闭按钮的字体大小。
+- close-customed-font-size：自定义警告框关闭按钮的字体大小。
+- icon-size：警告框图标的大小。
+- icon-large-size：大型警告框图标的大小。
+
+组件支持在**样式->主题样式**中调整当前单个组件的主题样式；也支持在**自定义主题样式->组件主题配置**中调整当前类型组件在应用中的所有样式，并支持直接预览效果。
+
+> 推荐前往组件主题配置中查看各主题样式的效果，相关文档请参考[自定义主题样式](../../../60.可视化开发界面/70.更多设置/30.自定义主题样式.md)。
+
+<img src="../assets/gonggao_202506091552_12.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年06月09日</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/26.PC/347/253/257Vue3/347/273/204/344/273/266/350/257/264/346/230/216/40./345/261/225/347/244/272/100./346/227/266/351/227/264/347/272/277.md

@@ -0,0 +1,280 @@
+# 时间线
+
+<span class="tag-blue">Vue3</span> <span class="tag-yellow">PC</span>
+
+时间线组件通常用于展示项目进度、历史记录、活动流等场景，提供直观的时间轴视图，方便查看和管理相关的信息。
+
+<img src="../assets/shijianxian_202506261756_1.png" class="imgStyle" style="" />
+
+<div class="highlight">
+
+在本章节，你将学习：
+
+1. 时间线的各类属性、事件、可访问属性等基础信息。
+2. 如何使用时间线的各类属性，具体实现效果包括但不限于
+
+   * 使用时间线的“数据源”属性，以动态设置时间线中展示的数据内容；
+   * 使用时间线的“节点类型字段”属性，以设置节点的类型，支持类型包括：主要、成功、警告、危险、信息；
+   * 使用时间线的“自定义图标字段”属性，以自定义时间节点的图标；
+
+3. 使用“添加时间线项”，以添加不包含在数据源内的层级结构；
+4. 示例一：如何生成一个静态时间线。
+5. 示例二：如何生成一个动态时间线。
+
+</div>
+
+
+## 属性
+
+> 组件通用属性请参见[组件通用属性说明](../../17.组件通用属性说明.md)。
+
+### 时间线
+
+<img src="../assets/shijianxian_202506261756_2.png" class="imgStyle" style="" />
+
+支持通过添加时间线项的方式形成一个固定时间线项数量的时间线。
+
+#### 数据属性
+
+- 数据源：除了直接添加时间线项的方式外，时间线可通过开启数据源属性的编辑表达式绑定数据源，实现动态时间线的效果。数据源可以绑定`List<T>`类型变量或输出参数为数组或包含`List<T>`的匿名数据结构的逻辑，List中的T可以是任意类型（包括`List<T>`、联合类型）。
+
+    <div class="highlight">
+
+    当时间线绑定数据源后，应用自动生成current变量。时间线会根据数据源中包含的 List 按顺序对每一项进行循环遍历，使用current即可指代在 List 中当前正在访问或操作的对象。为**时间线项**或其中的组件编辑表达式或添加事件，即可调用current变量：
+
+    <img src="../assets/shijianxian_202506261756_3.png" class="imgStyle" style="width:200px" />
+
+    **所有可绑定数据源的组件同理。**
+
+    在时间线的属性中设置任意字段（如时间戳字段）时，同样根据字段值进行循环遍历，但不显示其 current.item 前缀。
+
+    </div>
+
+    操作步骤：
+
+    1. 点击“请选择表达式”进入编辑表达式页面，通过拖入变量、使用调用逻辑组件等方式设置数据源。建议`List<T>`中的数据先根据时间顺序或重要程度等排序后再输出为数据源。
+
+        <img src="../assets/shijianxian_202506261756_4.png" class="imgStyle" style="" />
+
+    2. 在**时间线项内容插**槽中放置需要展示的组件，为组件绑定数据源中的current.item或其属性，实现动态获取数据。例如拖入文本，通过文本动态展示数据。
+
+        <img src="../assets/shijianxian_202506261756_5.png" class="imgStyle" style="" />
+
+- 数据类型：数据源返回的数据结构的类型，平台会自动识别类型，仅作展示说明。
+- 时间戳字段：绑定数据源后，根据该字段动态加载节点对应的时间点。该字段值的数据类型为String类型，值内容通常为时间格式。
+
+    <img src="../assets/shijianxian_202506261756_6.png" class="imgStyle" style="width:300px" />
+
+- 隐藏时间戳字段：绑定数据源后，依据该字段动态加载节点是否隐藏，该字段值的数据类型为Boolean类型。
+- 垂直居中字段：绑定数据源后，依据该字段动态加载节点的图标是否垂直居中，该字段值的数据类型为Boolean类型。
+
+    <img src="../assets/shijianxian_202506261756_7.png" class="imgStyle" style="width:300px" />
+
+- 时间戳位置字段：绑定数据源后，依据该字段动态加载节点时间戳的位置，该字段值的数据类型为String类型，可设置具体值为“top”（顶部）、“bottom”（底部）。
+
+    <img src="../assets/shijianxian_202506261756_8.png" class="imgStyle" style="width:300px" />
+
+- 节点类型字段：绑定数据源后，依据该字段动态加载节点的类型，该字段值的数据类型为String类型，可设置具体值为“primary”（主要）、“success”（成功）、“warning”（警告）、“danger”（危险）、“info”（信息）。
+
+    <img src="../assets/shijianxian_202506261756_9.png" class="imgStyle" style="width:300px" />
+
+- 节点颜色字段：绑定数据源后，依据该字段动态加载节点的颜色，该字段值的数据类型为String类型，值的类型支持hsl、hsv、hex、rgb。
+- 节点尺寸字段：绑定数据源后，依据该字段动态加载节点尺寸，该字段值的数据类型为String类型，可设置具体值为“normal”（正常）、“large”（大尺寸）。
+- 自定义图标字段：绑定数据源后，依据该字段动态加载节点的图标，该字段值的数据类型为String类型，可设置具体值为.icon格式图标链接。
+- 空心点字段：绑定数据源后，依据该字段动态加载节点图标是否空心，该字段值的数据类型为Boolean类型。
+
+    <img src="../assets/shijianxian_202506261756_10.png" class="imgStyle" style="width:300px" />
+
+### 时间线项
+
+#### 主要属性
+
+- 时间戳：节点对应的时间点。
+- 隐藏时间戳：Boolean 类型，是否隐藏时间线上显示的时间戳，默认为“显示”。
+- 垂直居中：Boolean 类型，节点的图标是否垂直居中。
+- 时间戳位置：时间戳在时间线节点中的位置，包括“上”或“下”，默认为“下”。
+
+    <div class="highlight">
+
+    开启编辑表达式后，可复制选项标识来配置表达式的值。用于标识“时间戳位置”属性不同选项的对应值如下图：
+
+    <img src="../assets/shijianxian_202506261756_11.png" class="imgStyle" style="width:300px" />
+
+    </div>
+
+- 节点类型：时间项节点的类型，包括主要、成功、警告、危险、信息、默认。
+
+    <img src="../assets/shijianxian_202506261756_12.png" class="imgStyle" style="" />
+
+    <div class="highlight">
+
+    开启编辑表达式后，可复制选项标识来配置表达式的值。用于标识“节点尺寸”属性不同选项的对应值如下图：
+
+    <img src="../assets/shijianxian_202506261756_13.png" class="imgStyle" style="width:300px" />
+
+    </div>
+
+- 节点尺寸：时间项节点的大小，可选“正常”或“大”。
+
+    <div class="highlight">
+
+    开启编辑表达式后，可复制选项标识来配置表达式的值。用于标识“节点尺寸”属性不同选项的对应值如下图：
+
+    <img src="../assets/shijianxian_202506261756_14.png" class="imgStyle" style="width:300px" />
+
+    </div>
+
+- 节点背景色：时间项节点的背景颜色，值的类型支持hsl、hsv、hex、rgb。。支持手动输入或编辑表达式进行动态设置。
+- 节点图标：时间项节点中显示的图标，支持从图标库选择图标、上传自定义SVG格式图标或编辑表达式进行设置。具体使用方法请参考[图标](50.图标.md)组件的“图标”属性。
+- 空心点：Boolean 类型，节点图标是否空心。
+
+## 可访问属性
+
+在编写表达式或使用前端逻辑时，可以通过“变量或常量“使用时间线组件的[可访问属性](../../19.组件可访问属性.md)，可访问属性有：
+
+<img src="../assets/shijianxian_202506261756_15.png" class="imgStyle" style="width:300px" />
+
+**时间线**
+
+- \_if（显示条件）：Boolean类型，时间线是否显示，值与“显示条件”属性对齐。支持获取和赋值。
+
+**时间线项**
+
+- \_if（显示条件）：Boolean类型，时间线项是否显示，值与“显示条件”属性对齐。支持获取和赋值。
+
+## 插槽
+
+时间线组件中包含插槽，支持拖拽放置其他组件：
+
+**时间线项**
+
+时间线项包含一个插槽。若时间线绑定数据源，时间线项不可选中，时间线项对应区域的插槽中的组件支持根据时间线的数据源来配置信息并动态加载。常见用法如：指示当前时间线项的内容。
+
+<img src="../assets/shijianxian_202506261756_16.png" class="imgStyle" style="" />
+
+## 样式
+
+> 组件通用样式请参见[组件通用样式说明](../../18.组件通用样式说明.md)。
+
+### 主题样式
+
+* node-size-normal：节点大小 (正常)。
+* node-size-large：节点大小 (大)。
+* node-color：节点颜色。
+
+组件支持在**样式**->**主题样式**中调整当前单个组件的主题样式；也支持在**自定义主题样式**->**组件主题配置**中调整当前类型组件在应用中的所有样式，并支持直接预览效果。
+
+> 推荐前往组件主题配置中查看各主题样式的效果，相关文档请参考[自定义主题样式](../../../60.可视化开发界面/70.更多设置/30.自定义主题样式.md)。
+
+## 使用说明
+
+在可视化开发页面中，将其拖入页面时提供基础示例（静态时间线）和使用数据源（动态时间线）两种模式，会可供用户在不同需求下选择。
+
+<img src="../assets/shijianxian_202506261756_17.png" class="imgStyle" style="" />
+
+## 示例
+
+### 静态时间线
+
+#### 场景介绍
+
+通过添加时间线项的方式形成一个固定时间线项数量的时间线。
+
+#### 操作步骤
+
+1.  拖拽“时间线”组件至页面，选择“基础示例”。
+2.  选择基础示例生成的组件，平台预先添加了时间线项并设置好了基础数据，选中时间线项即可根据具体需求为每个时间线项单独进行编辑。
+
+    <img src="../assets/shijianxian_202506261756_18.png" class="imgStyle" style="" />
+
+#### 效果演示
+
+<img src="../assets/shijianxian_202506261756_19.png" class="imgStyle" style="" />
+
+### 动态时间线
+
+#### 场景介绍
+
+通过添加数据源的方式形成一个动态渲染数据的时间线。
+
+#### 前提条件
+
+已有变量scheduleList，包含时间线组件所需数据源。
+
+数据内容如下：
+
+```json
+[
+    Schedule {
+        updateTime: "2024-09-11 10:15:00",
+        nodeName: "创建"
+    },
+    Schedule {
+        updateTime: "2024-09-11 12:15:00",
+        nodeName: "进行中"
+    },
+    Schedule {
+        updateTime: "2024-09-11 14:15:00",
+        nodeName: "结束"
+    }
+]
+```
+
+#### 操作步骤
+
+1.  拖拽“时间线”组件至页面，选择“使用数据源”。
+2.  选中时间线组件，设置时间线的数据源。进入编辑表达式页面，拖入`List<T>`类型的变量scheduleList。
+
+    <img src="../assets/shijianxian_202506261756_20.png" class="imgStyle" style="" />
+
+1.  时间线组件的“时间戳字段”选择数据源中的updateTime，用于展示时间值。
+
+    <img src="../assets/shijianxian_202506261756_21.png" class="imgStyle" style="" />
+
+1.  在**时间线项内容**插槽中放置文本组件，文本内容动态绑定current.item下的nodeName，用于展示节点内容。
+
+    <img src="../assets/shijianxian_202506261756_22.png" class="imgStyle" style="" />
+
+#### 效果演示
+
+<img src="../assets/shijianxian_202506261756_23.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年06月26日</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>