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/20.PC/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./345/233/276/347/211/207/345/261/225/347/244/272.md

@@ -0,0 +1,148 @@
+# 图片展示
+
+图片展示组件用于展示单个图片。
+
+<img src="../assets/tupianzhanshi_202410081447_1.png" class="imgStyle" style="" />
+
+## 属性
+
+> 组件通用属性请参见[组件通用说明](../../17.组件通用属性说明.md)。
+
+### 主要属性
+
+- 地址：图片链接，支持使用网络图片、手动上传图片或绑定链接地址。
+
+    - 图片上传
+
+      <img src="../assets/tupianzhanshi_202410081447_2.gif" class="imgStyle" style="" />
+
+    - 图片来自网络，参考图片链接：<https://yanxuan.nosdn.127.net/static-union/16653843234a47a0.png?type=webp&imageView&quality=95&thumbnail=1920x420>
+
+      <img src="../assets/tupianzhanshi_202410081447_3.gif" class="imgStyle" style="" />
+
+    - 编辑表达式：例如将链接地址存储在String类型的局部变量address。编辑表达式时无法直接从IDE界面查看图片效果，可以点击预览查看制品应用效果。
+
+      <img src="../assets/tupianzhanshi_202410081447_4.gif" class="imgStyle" style="" />
+
+- 填充方式：设置图片的显示方式，可选择适应、适应（图片小于父元素时以原尺寸展示）、原尺寸、拉伸、填充。开启编辑表达式功能后，用于标识"样式类型“属性不同选项的对应值如下：
+
+  <img src="../assets/tupianzhanshi_202410081447_5.png" class="imgStyle" style="width:300px;" />
+
+  - 适应：图片自动调整大小以适应父元素的尺寸，保持原始的宽高比例。
+  - 适应（图片小于父元素时以原尺寸展示）：图片在小于父元素尺寸时，保持原始尺寸进行展示，不进行任何缩放。
+  - 原尺寸：图片以原始的宽高尺寸进行展示，不进行任何缩放。
+  - 拉伸：图片被拉伸以填充满父元素，可能导致图片失真。
+  - 填充：图片调整大小以填充满父元素，保持原始的宽高比例，可能会有部分图片内容被裁剪。
+
+
+
+- 圆形遮罩：是否使用圆形进行图片展示。
+
+  <img src="../assets/tupianzhanshi_202410081447_6.png" class="imgStyle" style="" />
+
+- 水平对齐方式：左对齐、居中对齐、右对齐。开启编辑表达式功能后，用于标识"水平对齐方式“属性不同选项的对应值如下：
+
+  <img src="../assets/tupianzhanshi_202410081447_7.png" class="imgStyle" style="width:300px;" />
+
+- 垂直对齐方式：顶部对齐、居中对齐、底部对齐。开启编辑表达式功能后，用于标识"垂直对齐方式“属性不同选项的对应值如下：
+
+  <img src="../assets/tupianzhanshi_202410081447_8.png" class="imgStyle" style="width:300px;" />
+
+- 加载样式：图片展示加载中状态所显示的图标，包括Loading、不显示加载状态和自定义默认图。
+
+  - Loading：默认加载中状态。
+
+    <img src="../assets/tupianzhanshi_202410081447_9.png" class="imgStyle" style="" />
+
+  - 不显示加载状态：白屏加载，不显示加载图标。
+
+    <img src="../assets/tupianzhanshi_202410081447_10.png" class="imgStyle" style="" />
+
+  - 自定义默认图：自定义设置加载中图标。
+
+    <img src="../assets/tupianzhanshi_202410081447_11.png" class="imgStyle" style="" />
+
+- 默认图地址：只有在图片组件加载样式为自定义默认图时可见。它用于指定图片的链接，可以支持使用表达式，也可以是来自网络的链接。
+
+### 交互属性
+
+- 点击放大：是否支持点击放大全屏展示。
+
+## 事件
+
+| 事件名  | 描述                      |
+| :--- | :---------------------- |
+| 点击   | 鼠标左键单击对应组件时触发该事件中的逻辑    |
+| 双击   | 鼠标左键双击对应组件时触发该事件中的逻辑    |
+| 右键点击 | 鼠标右键单击对应组件时触发该事件中的逻辑    |
+| 鼠标按下 | 鼠标任意键在组件区域内按下时触发该事件中的逻辑 |
+| 鼠标释放 | 鼠标任意键在组件区域内释放时触发该事件中的逻辑 |
+| 鼠标移入 | 鼠标指针移入组件区域时触发该事件中的逻辑    |
+| 鼠标移出 | 鼠标指针移出组件区域时触发该事件中的逻辑    |
+| 加载完成 | 图片加载完成时触发该事件中的逻辑        |
+
+## 可访问属性
+
+在编写表达式或使用前端逻辑时，可以通过“变量或常量“使用选择器组件的[可访问属性](../../19.组件可访问属性.md)，可访问属性有：
+
+<img src="../assets/tupianzhanshi_202410081447_12.png" class="imgStyle" style="width:300px;" />
+
+- src（地址）：String类型，图片的链接地址。支持获取。
+- placeholderSrc（默认图地址）：String类型，“加载样式”属性为自定义默认图时默认图的链接地址。支持获取。
+- preview（预览）：Boolean类型，图片是否为预览态。支持获取。
+
+
+
+- \_if（显示条件）：Boolean类型，图片是否显示，值与“显示条件”属性对齐。支持获取和赋值。
+
+## 样式
+
+> 组件通用样式请参见[组件通用样式说明](../../18.组件通用样式说明.md)。
+
+## 使用说明
+
+- 可以使用图片展示组件将文件上传组件中上传的图片作为数据源，支持两种格式：JSON和URL。实现动态切换图片的功能。
+- 图片默认根据父元素的尺寸展示，建议在样式中为图片设置宽度、高度，并配置“填充方式”属性以满足需要的尺寸大小和展示效果。
+
+  <img src="../assets/tupianzhanshi_202410081447_13.png" class="imgStyle" style="" />
+
+## 示例
+
+### 需求场景
+
+使用文件上传组件上传图片，使用图片展示组件展示上传的图片。
+
+### 操作步骤
+
+1.  在页面中拖拽生成文件上传组件和图片展示组件。
+
+    <img src="../assets/tupianzhanshi_202410081447_14.png" class="imgStyle" style="" />
+
+1.  创建String类型局部变量address，分别绑定为文件上传组件的“值”属性和图片展示组件的“地址”属性。
+
+    <img src="../assets/tupianzhanshi_202410081447_15.png" class="imgStyle" style="" />
+
+    <img src="../assets/tupianzhanshi_202410081447_16.png" class="imgStyle" style="" />
+
+1.  （可选）图片展示时仅需要获取图片的链接地址即可，因此在上传文件时，可以只保存链接地址，也可以保存上传的全量信息。以下为只保存链接时的文件上传组件的属性设置：
+
+    - “转换器”选择URL字符串。
+
+      <img src="../assets/tupianzhanshi_202410081447_17.png" class="imgStyle" style="width:400px" />
+
+    - “URL字段名”输入filePath获取图片地址的相对路径；或输入result获取图片地址的绝对路径。
+
+      <img src="../assets/tupianzhanshi_202410081447_18.png" class="imgStyle" style="width:400px" />
+
+1.  发布预览效果。
+
+### 效果演示
+
+<img src="../assets/tupianzhanshi_202410081447_19.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年10月08日</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/20.PC/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./345/205/254/345/221/212.md

@@ -0,0 +1,83 @@
+# 公告
+
+公告组件用于展示突出的提醒事项。
+
+<img src="../assets/gonggao_202410081532_1.png" class="imgStyle" style="" />
+
+## 属性
+
+> 组件通用属性请参见[组件通用说明](../../17.组件通用属性说明.md)。
+
+### 主要属性
+
+- 公告类型：包括信息、成功、警告、错误。开启编辑表达式功能后，用于标识"公告类型“属性不同选项的对应值如下：
+
+  <img src="../assets/gonggao_202410081532_2.png" class="imgStyle" style="width:300px" />
+
+  公告类型参考效果如下：
+
+  <img src="../assets/gonggao_202410081532_3.png" class="imgStyle" style="" />
+
+- 显示图标：默认开启，是否展示图标，下图为关闭状态。
+
+  <img src="../assets/gonggao_202410081532_4.png" class="imgStyle" style="" />
+
+### 交互属性
+
+- 手动关闭：默认关闭，是否显示关闭按钮并支持关闭公告，下图为开启状态。
+
+  <img src="../assets/gonggao_202410081532_5.png" class="imgStyle" style="" />
+
+### 样式属性
+
+- 对齐方式：公告内容的对齐方式，支持居中对齐和左对齐，下图为居中对齐。
+
+  <img src="../assets/gonggao_202410081532_6.png" class="imgStyle" style="" />
+
+- 显示边框：默认开启，是否显示边框，下图为开启状态。
+
+  <img src="../assets/gonggao_202410081532_7.png" class="imgStyle" style="" />
+
+## 事件
+
+| 事件名 | 描述                                     |
+| :-- | :------------------------------------- |
+| 关闭时 | 点击关闭按钮时触发该事件中的逻辑。触发事件的前提条件是开启“手动关闭”属性。 |
+
+## 可访问属性
+
+在编写表达式或使用前端逻辑时，可以通过“变量或常量“使用公告组件的[可访问属性](../../19.组件可访问属性.md)，可访问属性有：
+
+<img src="../assets/gonggao_202410081532_8.png" class="imgStyle" style="width:300px" />
+
+- \_if（显示条件）：Boolean类型，公告是否显示，值与“显示条件”属性对齐。支持获取和赋值。
+
+
+## 插槽
+
+公告组件中包含插槽，支持拖拽放置其他组件：
+
+- 公告包含两个插槽。常见用法如：指示当前公告的内容和辅助提示。
+
+    <img src="../assets/gonggao_202410081532_9.png" class="imgStyle" style="" />
+
+## 样式
+
+> 组件通用样式请参见[组件通用样式说明](../../18.组件通用样式说明.md)。
+
+### 主题样式
+
+- 公告标题文字颜色：如#333333。
+- 公告描述文字颜色：如#666666。
+- 公告错误类型颜色：公告类型为错误时的图标颜色，如：#ff0000。
+- 公告错误类型背景色：公告类型为错误时的背景颜色，如#feecee。
+- 公告关闭按钮颜色：打开交互属性手动关闭后，关闭按钮的颜色，如#999999。
+- 公告关闭按钮颜色（鼠标悬浮状态）：如#666666。
+
+
+<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月08日</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/20.PC/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/120./350/256/241/346/227/266/345/231/250.md

@@ -0,0 +1,77 @@
+# 计时器
+
+计时器组件用来记录用时，适用于活动倒计时等。如下图所示，计时器组件展示方式为00:00（分:秒）。
+
+<img src="../assets/jsqPC1.gif" style="border: 1px solid #ccc;" />
+
+## 属性
+
+> 组件通用属性请参见[组件通用属性说明](../../17.组件通用属性说明.md)。
+
+主要属性
+
+* 定时时长（秒）：计时器的总时长，Integer类型，单位为秒。支持手动输入或是编辑表达式。手动输入的值，作为静态时长展示计时时间。编辑表达式可绑定变量，通常用于动态生成计时时间。
+
+  * 手动输入：通常使用于固定计时时间的场景。
+
+    <img src="../assets/jsqPC_20240416_1955_2.png" alt="0" style="border: 1px solid #ccc;" />
+  * 编辑表达式：通常使用于需要动态计时的场景。
+
+    <img src="../assets/jsqPC_20240416_1955_3.png" alt="0" style="border: 1px solid #ccc;" />
+* 计时方式：可选择正计时和倒计时。开启编辑表达式功能后，用于标识"计时方式“属性不同选项的对应值如下：
+
+  <img src="../assets/jsqPC_20240416_1955_4.png" alt="0" style="width:350px;border: 1px solid #ccc;" />
+* 自动计时：进入页面后自动开始计时，支持动态绑定布尔（Boolean）类型的变量。默认开启。
+
+## 事件
+
+| 事件名   | 描述                 |
+| :---- | :----------------- |
+| 计时器开始 | 计时器开始计时时触发该事件中的逻辑，即开启“自动计时”属性并进入页面或手动调用组件逻辑start时触发。 |
+| 计时器暂停 | 计时器暂停计时时触发该事件中的逻辑，即手动调用组件逻辑pause时触发。 |
+| 计时器继续 | 计时器继续计时时触发该事件中的逻辑，即手动调用组件逻辑continue时触发。 |
+| 计时器结束 | 计时器结束计时时触发该事件中的逻辑，即倒计时完全结束或手动调用组件逻辑stop时触发。 |
+
+## 可访问属性
+
+在编写表达式或使用前端逻辑时，可以通过“变量或常量“使用计时器组件的[可访问属性](../../19.组件可访问属性.md)，可访问属性有：
+
+<img src="../assets/jishiqi_202410081543_1.png" class="imgStyle" style="" />
+
+- \_if（显示条件）：Boolean类型，计时器是否显示，值与“显示条件”属性对齐。支持获取和赋值。
+
+## 组件逻辑
+
+计时器组件支持的逻辑如下：
+
+| 逻辑名      | 描述    |
+| :------- | :---- |
+| start    | 计时开始。 |
+| pause    | 计时暂停。 |
+| continue | 计时继续。 |
+| stop     | 计时停止。 |
+
+<img src="../assets/jishiqi_202410081543_2.png" class="imgStyle" style="width：400px" />
+
+## 样式
+
+> 组件通用样式请参见[组件通用样式说明](../../18.组件通用样式说明.md)。
+
+
+## 使用说明
+
+当计时器“计时器时长”属性绑定变量时，该变量仅作为时间长度的参考，不会跟随计时器的计时而变化。
+<style>
+  h4 {
+    font-size: 18px;
+  }
+  h5 {
+    font-size: 16px;
+  }
+</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年04月16日</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/20.PC/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/130./345/210/206/351/232/224/347/272/277.md

@@ -0,0 +1,64 @@
+# 分隔线
+
+分隔线组件用于快速生成上下文分隔样式。
+
+例如：分隔正文和参考文献。
+
+<img src="../assets/fengexian_202410081548_1.png" class="imgStyle" style="" />
+
+## 属性
+
+> 组件通用属性请参见[组件通用属性说明](../../17.组件通用属性说明.md)。
+
+### 主要属性
+
+- 线条类型:包括实线和虚线
+
+  <img src="../assets/fengexian_202410081548_2.png" class="imgStyle" style="" />
+
+- 内容位置：包括居中、左和右。
+
+    - 居中
+
+      <img src="../assets/fengexian_202410081548_3.png" class="imgStyle" style="" />
+
+    - 左
+
+      <img src="../assets/fengexian_202410081548_4.png" class="imgStyle" style="" />
+
+    - 右
+
+      <img src="../assets/fengexian_202410081548_5.png" class="imgStyle" style="" />
+
+- 方向：分隔线的方向，包括横向和竖向。
+
+    - 竖向
+
+      <img src="../assets/fengexian_202410081548_6.png" class="imgStyle" style="" />
+
+## 可访问属性
+
+在编写表达式或使用前端逻辑时，可以通过“变量或常量“使用分隔线组件的[可访问属性](../../19.组件可访问属性.md)，可访问属性有：
+
+<img src="../assets/fengexian_202410081548_7.png" class="imgStyle" style="width:300px;" />
+
+- \_if（显示条件）：Boolean类型，分隔线是否显示，值与“显示条件”属性对齐。支持获取和赋值。
+
+## 插槽
+
+选择器组件中包含插槽，支持拖拽放置其他组件：
+
+<img src="../assets/fengexian_202410081548_8.png" class="imgStyle" style="" />
+
+插槽为空时，分割线为不隔断的一条直线。
+
+## 样式
+
+组件通用样式请参见[组件通用样式说明](../../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月08日</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/20.PC/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/140./346/227/266/351/227/264/347/272/277.md

@@ -0,0 +1,149 @@
+# 时间线
+
+时间线组件通常用于展示项目进度、历史记录、活动流等场景，提供直观的时间轴视图，方便查看和管理相关的信息。
+
+例如：展示历史时间轴。
+
+<img src="../assets/shijianxian_202410081558_1.png" class="imgStyle" style="" />
+
+## 属性
+
+> 组件通用属性请参见[组件通用属性说明](../../17.组件通用属性说明.md)。
+
+### 时间线
+
+<img src="../assets/shijianxian_202410081558_2.png" class="imgStyle" style="" />
+支持通过添加时间线子选项的方式形成一个固定选项数量的时间线。每个时间线项对应的插槽中可拖拽并配置其他组件，例如文本组件。
+
+#### 数据属性
+
+- 数据源：展示数据的来源。除了直接添加时间线子选项的方式外，可通过绑定数据源的方式实现渲染时间线的效果。数据源可绑定 List类型变量或输出参数为数组或包含List的匿名数据结构的逻辑，逻辑包含前端逻辑和服务端逻辑，`List<T>`中T的类型可以是任意类型（包括`List<T>`、联合类型）。
+
+    操作步骤：
+
+    1. 点击“请选择表达式”进入编辑表达式页面，拖入变量或使用调用逻辑组件。建议List中的数据先根据时间顺序或重要程度等排序后再输出为数据源。
+
+        <img src="../assets/shijianxian_202410081558_5.png" class="imgStyle" style="" />
+
+    2. 在动态数据源对应的首个时间线项对应的插槽拖拽并配置其他组件，例如文本组件，文本内容动态绑定current.item下的属性。
+
+        <img src="../assets/shijianxian_202410081558_6.png" class="imgStyle" style="" />
+
+- 数据类型：数据源返回的数据结构的类型，自动识别类型进行展示说明，为只读状态无法修改。
+
+#### 主要属性
+
+- 排布方式：默认、时间线居中。
+
+  - 默认
+
+    <img src="../assets/shijianxian_202410081558_7.png" class="imgStyle" style="" />
+
+  - 时间线居中
+
+    <img src="../assets/shijianxian_202410081558_8.png" class="imgStyle" style="" />
+
+- 待定节点：默认关闭。开启时，时间线中的最后一个时间线项展示为待定节点，即连接线为虚线展示，可用于表示即将发生或者正在进行的节点。
+
+### 时间线项
+
+#### 主要属性
+
+- 标签：指展示在时间线项针对“位置”属性另一侧的内容文本，要求另一侧插槽内不包含任何组件。只在时间线排布方式为时间线居中时生效。
+- 位置：指定交替展示时的位置，只在时间线排布方式为时间线居中时生效，包括左和右。
+
+  - 左
+
+    <img src="../assets/shijianxian_202410081558_9.png" class="imgStyle" style="" />
+
+  - 右
+
+    <img src="../assets/shijianxian_202410081558_10.png" class="imgStyle" style="" />
+
+#### 样式属性
+
+- 节点颜色：指定圆圈颜色，可使用primary（主题色）, success（成功色）, warning(警告色), error（错误色），或自定义的色值，如#223325。
+
+  <img src="../assets/shijianxian_202410081558_11.png" class="imgStyle" style="" />
+
+## 可访问属性
+
+在编写表达式或使用前端逻辑时，可以通过“变量或常量“使用时间线组件的[可访问属性](../../19.组件可访问属性.md)，可访问属性有：
+
+<img src="../assets/shijianxian_202410081558_12.png" class="imgStyle" style="width:300px;" />
+
+**时间线**
+
+- data（数据）：`List<T>`类型，时间线内容的数据集合，来源于时间线的数据源。支持获取。
+- \_if（显示条件）：Boolean类型，时间线是否显示，值与“显示条件”属性对齐。支持获取和赋值。
+
+**时间线项**
+
+- \_if（显示条件）：Boolean类型，时间线项是否显示，值与“显示条件”属性对齐。支持获取和赋值。
+
+## 插槽
+
+时间线组件中包含插槽，支持拖拽放置其他组件：
+
+时间线项中的插槽根据时间线的“排布方式”方式属性不同，展示为一个插槽或两个插槽。
+
+- 排布方式为“默认”
+
+  <img src="../assets/shijianxian_202410081558_13.png" class="imgStyle" style="" />
+
+- 排布方式为“时间线居中“
+
+  > 非时间线项“位置”属性同侧的插槽内无组件时，根据时间线项的“标签”属性自动生成文本。
+
+  <img src="../assets/shijianxian_202410081558_14.png" class="imgStyle" style="" />
+
+  <div class="highlight">
+
+  时间线在绑定数据源后，非手动添加的时间线项的插槽中的组件支持根据时间线的数据源来配置信息并动态加载。
+
+  <img src="../assets/shijianxian_202410081558_15.png" class="imgStyle" style="" />
+
+  此处时间线项中的属性同样支持根据数据源动态加载。例如动态绑定“标签”属性：
+
+  <img src="../assets/shijianxian_202410081558_16.png" class="imgStyle" style="" />
+  
+  </div>
+
+
+## 样式
+
+> 组件通用样式请参见[组件通用样式说明](../../18.组件通用样式说明.md)。
+
+## 示例
+
+**创建一个静态时间线。**
+
+1.  在页面上添加一个时间线组件，这里示例添加3次时间线子项，时间线节点为3个。可根据需要自行添加。
+
+    <img src="../assets/shijianxian_202410081558_17.gif" class="imgStyle" style="" />
+
+1.  在时间线项中拖入两个文本组件，补充需要展示的文本类容。
+    <img src="../assets/shijianxian_202410081558_3.png" class="imgStyle" style="" />
+
+**效果展示**：
+
+<img src="../assets/shijianxian_202410081558_18.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);">2024年10月08日</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>