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/16./350/207/252/345/256/232/344/271/211/347/273/204/344/273/266/351/235/242/346/235/277.md

@@ -0,0 +1,134 @@
+# 自定义组件面板
+
+## 1. 功能概述
+
+页面组件面板支持管理，支持调整组件在当前应用中的显示、隐藏以及扩展组件的位置。
+
+<div class="highlight">
+
+扩展组件通过[依赖库](../../20.应用开发/30.资产复用/30.依赖库.md)引入。
+
+</div>
+
+## 2. 使用场景
+
+自定义组件面板支持满足以下几种场景：
+
+- 常用扩展组件的突出展示：扩展组件作为常用组件，希望放置在基础组件中展示，便于寻找。
+- 基础组件的灵活隐藏：组件不需要被使用或使用更为常见的扩展组件替代基础组件时，希望隐藏基础组件。
+- 按需显示扩展组件：部分依赖库包含多个扩展组件，希望隐藏不使用的扩展组件。
+
+## 3. 功能介绍
+
+### 3.1 功能入口
+
+点击组件面板右上角的设置图标，进入到“自定义组件面板”界面。
+
+<img src="../assets/zidingyizujianmianban_202408201714_1.png" class="imgStyle" style="width:350px;" />
+
+自定义组件面板包括基础组件和扩展组件。
+
+<img src="../assets/zidingyizujianmianban_202408201714_2.png" class="imgStyle" style="width:350px;" />
+
+### 3.2 隐藏组件
+
+点击图示中的图标，即可将组件移动至“已隐藏组件”。保存后组件面板中隐藏该组件。
+
+<img src="../assets/zidingyizujianmianban_202408201714_3.png" class="imgStyle" style="width:350px;" />
+
+<div class="highlight">
+
+- 被隐藏的组件不会影响已经使用此组件的页面。
+- 当开发者通过依赖库引入扩展组件，扩展组件能够替代基础组件满足开发者的需求，此时原有的基础组件可能需要被隐藏，以避免混淆和冲突。为此应用支持在引入扩展组件时识别并建议隐藏被替代的基础组件，来实现组件无缝替换，具体描述请参考下文：[使用扩展组件替换基础组件](#_4-使用扩展组件替换基础组件)。
+
+</div>
+
+### 3.3 显示隐藏的组件
+
+展开“已隐藏组件”，点击图示中的图标，即可将组件放置回组件面板。若为扩展组件则放置回扩展组件面板中引入扩展组件的分组中，保存后组件面板中显示该组件。
+
+<img src="../assets/zidingyizujianmianban_202408201714_4.png" class="imgStyle" style="width:350px;" />
+
+### 3.4 调整扩展组件位置
+
+除了隐藏、显示组件，对于扩展组件而言还支持调整位置，调整位置包括调整组件的分组和组件的排列顺序。
+
+**调整扩展组件分组**
+
+方法一：点击图示中的图标，即可为扩展组件选择分组并移动至对应分组，自定义选择基础组件的分组和扩展组件的分组。保存后扩展组件显示在对应分组的最后方。
+
+方法二：拖动图示中的图标，即可将扩展组件拖拽至对应分组中。保存后扩展组件显示在对应分组的对应位置。
+
+<img src="../assets/zidingyizujianmianban_202408201714_5.png" class="imgStyle" style="width:350px;" />
+
+**调整扩展组件顺序**
+
+拖动图示中的图标，即可为扩展组件更改位置顺序，已经移动至基础组件面板的扩展组件同样支持操作但无法更改基础组件的位置顺序。保存后扩展组件显示在对应位置。
+
+<img src="../assets/zidingyizujianmianban_202408201714_6.png" class="imgStyle" style="width:350px;" />
+
+## 4. 使用扩展组件替换基础组件
+
+例如有以下情况：
+
+开发者已采纳并集成了更为贴合实际使用需求的组件，从而替代了平台原有的同类型基础组件。
+<div class="highlight">
+
+此类组件的引入方式与普通扩展组件一致为使用依赖库。组件的生产方式如：
+
+- 完全由开发者定义；
+- 基于平台原有的同类型基础组件[二次开发](../../40.扩展与集成/10.扩展开发方式/20.前端扩展开发/80.基础组件二次开发/10.基础组件二次开发指南.md)。
+
+此类组件的升级方式同样与普通扩展组件一致。组件生产与升级具体请参考：[前端依赖库开发指南](../../40.扩展与集成/10.扩展开发方式/20.前端扩展开发/10.前端扩展开发概述.md)。
+
+</div>
+
+检测到引入的组件携带了替代某个组件的标识时，应用支持给出建议向提示“替换基础组件”，替换的方式为将引入的组件展示到基础组件，原有的基础组件隐藏。开发者同样可以选择不执行建议，正常引入到扩展组件模块。
+
+<img src="../assets/zidingyizujianmianban_202408201714_7.png" class="imgStyle" style="width:400px;" />
+
+替换后的组件保持其扩展组件的标识，支持查看第三方组件的相关信息。
+
+<img src="../assets/zidingyizujianmianban_202408201714_8.png" class="imgStyle" style="width:400px;" />
+
+<div class="highlight">
+
+在依赖库的组件项目文件 api.ts 中，通过@ExtensionComponent注释替换组件声明，该声明即为被检测的替代某个组件的标识。例如：
+
+```typescript
+@ExtensionComponent({
+    replaceNaslUIComponent: 'Button', // 替换掉组件名称
+ })
+ @Component({
+     title: '按钮' 
+ })
+ class ExtendButton extends ViewComponent {    
+     // ... 基础组件 Button 可访问属性、方法
+     constructor(options?: Partial<ExtendButtonOptions>) { super(); }
+}
+
+class ExtendButtonOptions extends ViewComponentOptions {
+    // ... 基础组件 Button 属性、插槽、事件
+}
+```
+
+</div>
+
+<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年08月20日</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/17./347/273/204/344/273/266/351/200/232/347/224/250/345/261/236/346/200/247/350/257/264/346/230/216.md

@@ -0,0 +1,241 @@
+# 组件通用属性说明
+
+## 1. 功能概述
+
+组件属性位于选择组件后IDE右侧的工具栏，组件通用属性是每个组件中都包含的一组基本属性，用来设置组件外观和行为。这些属性包括组件名称、权限控制、显示条件、字体颜色、背景颜色和背景图片等。通过设置这些属性，用户可以灵活地调整组件的样式和行为，以满足不同的需求和场景。
+
+## 2. 使用场景
+
+可以通过组件通用属性设置组件的样式和行为，例如：
+
+- 设置组件粒度的权限控制；
+- 动态设置组件的显示和隐藏效果；
+- 动态设置组件的字体和背景颜色。
+
+## 3. 功能介绍
+
+### 3.1 编辑表达式
+
+<img src="../assets/zjtysxsm_202407081809_1.png" class="imgStyle" style="" />
+
+编辑表达式按钮在未开启时，为置灰效果，此时可直接在输入框中输入内容，实现内容的静态展示。
+
+<img src="../assets/zjtysxsm_202407081809_2.png" class="imgStyle" style="" />
+
+编辑表达式按钮在开启时，为高亮效果，此时点击输入框或输入框后的展开按钮可进入编辑画布。在画布中，可拖入变量或其他逻辑组件构成的表达式，实现内容的动态展示，如下图所示。
+
+<img src="../assets/zjtysxsm_202407081809_3.png" class="imgStyle" style="" />
+
+### 3.2 是否将组件输入赋值给变量
+
+开启组件属性的编辑表达式并进入画布后，右上角可看到名为“是否将组件输入赋值给变量”的属性。当组件的值属性或选中值属性编辑表达式仅放置变量时，该属性可开启。例如选择器的值、单行输入的值，单选组的选中值和穿梭框的原始数据目标数据等。
+
+这些属性可以接受组件输入并展示，组件输入数据变化时，变量也会接收并更新数据。变量变化时，组件输入数据也会改变。
+
+<img src="../assets/zjtysxsm_202407081809_4.png" class="imgStyle" style="" />
+
+### 3.3 配置选项标识
+
+在设置部分属性时，已经由应用提供了选项。此类属性在编辑表达式时支持根据其“配置选项标识”动态匹配选项。
+
+开启编辑表达式后，点击如图所示标志即可查看“配置选项的标识”。
+
+<img src="../assets/zujiantongyongshuxingshuoming_202409120959_1.png" class="imgStyle" style="" />
+
+例如，文本的“主题颜色”属性。
+
+- 未开启编辑表达式时，直接选择应用已经定义的选项。
+
+    <img src="../assets/zujiantongyongshuxingshuoming_202409120959_2.png" class="imgStyle" style="width:350px;" />
+
+- 开启编辑表达式时，使用“配置选项的标识”匹配选项。通常使用匹配等组件，依据条件匹配“配置选项的标识”，以满足动态设置属性的场景。
+
+    <img src="../assets/zujiantongyongshuxingshuoming_202409120959_3.png" class="imgStyle" style="" />
+
+### 3.4 监听变量
+
+开启组件“数据源”属性的编辑表达式并进入画布后，左上角可看到名为“监听变量”的属性。当监听的变量发生变化时，自动调用该组件的组件逻辑reload重新加载数据。
+
+<img src="../assets/zjtysxsm_202407081809_5.png" class="imgStyle" style="" />
+
+<img src="../assets/zjtysxsm_202407081809_6.png" class="imgStyle" style="" />
+
+监听变量通常为数据源使用内置函数或调用逻辑时的的输入参数，输入参数常见如页面局部变量、页面组件的[可访问属性](../../20.应用开发/10.页面设计/19.组件可访问属性.md)。
+
+添加监听变量的方式为点击监听变量蓝色区域选择变量或向蓝色区域拖拽变量。
+
+<div class="details">
+
+注意：
+
+1.  部分页面组件的可访问属性在变化时即会触发当前组件的数据加载，而监听变量的实际效果是在变量变化时通过reload刷新数据，因此此类属性不建议在当前组件的数据源中被监听且无需被监听，例如数据表格的page、size、sort、order。
+2.  当监听变量的数据类型为对象时，需要定位到对象下的具体属性，例如filter.name。
+
+</div>
+
+<img src="../assets/zjtysxsm_202407081809_7.png" class="imgStyle" style="" />
+
+
+### 3.5 基础属性
+
+<img src="../assets/zjtysxsm_202407081809_8.png" class="imgStyle" style="" />
+
+- 组件名称：以字母开头，由字母、数字和下划线组成，不得为空且同一页面下组件名称不能重复。会在调用组件逻辑、组件开启权限控制后生成的资源信息、多人协作冲突提醒等位置显示该名称。
+- 是否控制权限：开启该属性后会自动生成一条资源，可根据角色设置权限，对无权限角色下的用户隐藏该组件。授权角色时可直接选择IDE中创建的角色，也可以发布后在权限中心中进行设置。组件的资源路径根据所在的页面和页面结构自动生成不可修改，组件的资源描述填写的信息可在应用发布后的权限中心中显示。
+
+   <img src="../assets/zjtysxsm_202407081809_9.png" class="imgStyle" style="" />
+
+- 显示条件：可通过表达式设置组件显示的条件，当条件为True时显示，为False时隐藏该组件。可参考常见场景案例：[如何实现组件按条件显示或隐藏](../../80.常见场景案例/40.组件场景/30.表单场景/010.如何实现组件按条件显示或隐藏.md)
+
+### 3.6 交互属性
+
+- 工具提示：鼠标hover在组件上时，显示的提示内容。可直接输入或开启编辑表达式动态设置。
+- 工具提示弹出方向：工具提示内容弹出的方向，在设置工具提示后会出现该属性，可选择上、下、左、右、上左、上右等方向。常见场景案例参考：[如何在鼠标悬浮时展示表格中过长省略的文本](../../80.常见场景案例/40.组件场景/20.表格场景/025.如何在鼠标悬浮时展示表格中过长省略的文本.md)
+
+工具提示实现效果如下：
+
+<img src="../assets/zjtysxsm_202407081809_10.png" class="imgStyle" style="" />
+
+### 3.7 样式属性
+
+<img src="../assets/zjtysxsm_202407081809_11.png" class="imgStyle" style="" />
+
+- 字体颜色：可编辑表达式动态设置组件的字体颜色，值可以为简单英文单词如red、yellow等，也可以是十六进制颜色编码，发布后可在应用内查看效果。常见场景案例参考：[动态显示文本颜色](../../80.常见场景案例/70.布局与样式场景/020.动态显示文本颜色.md)。
+- 背景颜色：可编辑表达式动态设置组件的背景颜色，设置方式与字体颜色相同。
+- 背景图片：可编辑表达式动态设置组件的背景图片，值需要为图片的绝对路径，发布后可在应用内查看效果。
+
+## 4. 操作示例
+
+### 4.1 使用编辑表达式实现文本组件中文本值的动态展示
+
+#### 4.1.1 场景描述
+
+如何让文本组件的显示文本，根据当前日期和当天温度动态显示。
+
+#### 4.1.2 准备工作
+
+已有页面，页面中包含文本组件，页面下有表示温度的局部变量temperature，String类型。
+
+<img src="../assets/zjtysxsm_202407081809_12.png" class="imgStyle" style="" />
+
+#### 4.1.3 具体操作
+
+1.  在页面IDE中选中文本组件，在右侧属性栏中找到文本属性，开启编辑表达式。
+
+    <img src="../assets/zjtysxsm_202407081809_13.png" class="imgStyle" style="" />
+
+1.  开启后，文本组件会变为文本占位。点击输入框或后面的展开按钮可进入编辑画布。
+
+    <img src="../assets/zjtysxsm_202407081809_14.png" class="imgStyle" style="" />
+
+    <img src="../assets/zjtysxsm_202407081809_15.png" class="imgStyle" style="" />
+
+1.  画布中右侧的组件为表达式中可使用的逻辑组件，拖拽其中的文本组件放置在画布中心的生效区域。
+
+    <img src="../assets/zjtysxsm_202407081809_16.png" class="imgStyle" style="" />
+
+1.  在文本组件中输入文本，并拖拽**内置函数**组件和**变量**，内置函数选择**FormatDate**和**CurrDate**，如下图所示。表示使用内置函数获取格式化后的当前日期，并将其和文字、变量进行拼接展示。
+
+    <img src="../assets/zjtysxsm_202407081809_17.png" class="imgStyle" style="" />
+
+1.  编辑完成后点击左上角的箭头或快捷键Esc退出编辑表达式画布。页面中的文本组件会回显编辑后的表达式。
+
+    <img src="../assets/zjtysxsm_202407081809_18.png" class="imgStyle" style="" />
+
+    <img src="../assets/zjtysxsm_202407081809_19.png" class="imgStyle" style="" />
+
+1.  发布预览效果。
+
+#### 4.1.4 效果展示
+
+<img src="../assets/zjtysxsm_202407081809_20.png" class="imgStyle" style="" />
+
+### 4.2 使用显示条件实现标签的显示与隐藏
+
+#### 4.2.1 场景描述
+
+根据单据状态控制标签是否显示，在单据状态为评估中、开发中、测试中时显示进行中的标签，其他状态不显示。
+
+#### 4.2.2 准备工作
+
+已有页面，页面中包含标签组件，标签的文本属性值为进行中，页面下有枚举Status类型的局部变量status。
+
+<img src="../assets/zjtysxsm_202407081809_21.png" class="imgStyle" style="" />
+
+<img src="../assets/zjtysxsm_202407081809_22.png" class="imgStyle" style="" />
+
+#### 4.2.3 具体操作
+
+1.  在页面下选中标签组件，在右侧属性栏中找到属性现实条件，点击输入框或展开按钮进入表达式编辑画布。
+
+      <img src="../assets/zjtysxsm_202407081809_23.png" class="imgStyle" style="" />
+
+1.  进入编辑页面后，拖拽**逻辑运算or**、**比较运算等于**、**变量**和**枚举**放置在生效区域，如下图所示。表示当变量的值为评估中、开发中或测试中时，组件显示。
+
+      <img src="../assets/zjtysxsm_202407081809_24.png" class="imgStyle" style="" />
+
+1.  发布预览效果。
+
+### 4.3 使用监听变量实现数据源重新加载
+
+#### 4.3.1 场景描述
+
+搜索关键词改变时同步刷新筛选的数据，具体如选择器选择分类改变时数据表格重新加载当前分类的数据。
+
+#### 4.3.2 准备工作
+
+已有页面，拖拽实体生成列表（全），即生成后包含用于筛选的表单和用于展示的数据表格。
+
+自动生成的数据表格默认已经支持展示筛选后的数据，因此操作示例不对筛选功能做详细分析，如有需要请参考[如何通过筛选条件查询并显示数据](../../80.常见场景案例/40.组件场景/20.表格场景/060.如何通过筛选条件查询并显示数据.md)。
+
+<img src="../assets/zjtysxsm_202407081809_25.png" class="imgStyle" style="" />
+
+<img src="../assets/zjtysxsm_202407081809_26.png" class="imgStyle" style="" />
+
+#### 4.3.3 具体操作
+
+1.  在页面IDE中选中数据表格组件，在右侧属性栏中找到数据源属性，进入编辑表达式界面。
+
+      <img src="../assets/zjtysxsm_202407081809_27.png" class="imgStyle" style="" />
+
+1.  添加监听变量，选择器选中值属性绑定的局部变量（本示例为filter.type）或选择器选中值对应的可访问属性（本示例为select_2.value）均可。
+
+      <img src="../assets/zjtysxsm_202407081809_28.png" class="imgStyle" style="" />
+
+1.  监听变量后根据变量变化自动重新加载表格，无需通过事件手动调用数据表格的组件逻辑reload，因此此处用于触发事件的按钮可以删除。
+
+      <img src="../assets/zjtysxsm_202407081809_29.png" class="imgStyle" style="" />
+
+1.  发布预览效果。
+
+#### 4.3.4 效果演示
+
+<img src="../assets/zjtysxsm_202407081809_30.gif" class="imgStyle" style="" />
+
+## 5. 补充说明
+
+- 当组件设置隐藏后，调用组件的组件逻辑无效。
+- 当表单组件的表单项设置验证规则后，隐藏该表单项时不会触发设置的验证规则。
+- 编辑表达式时，只有放置在蓝色生效区域的内容生效，放在草稿区的内容不生效。
+- 编辑表达式时，变量可直接从右上角可见范围工具或左侧页面树形结构中拖拽使用，需要注意变量的作用域。
+
+   <img src="../assets/zjtysxsm_202407081809_31.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年07月08日</span>
+</div>
+                
+<style>
+ .details {
+      border: 1px solid #679CF8; /* 添加边框 */
+      border-radius: 6px;
+      background-color: #F8FCFF; /* 添加底色 */
+      padding: 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/18./347/273/204/344/273/266/351/200/232/347/224/250/346/240/267/345/274/217/350/257/264/346/230/216.md

@@ -0,0 +1,226 @@
+# 组件通用样式说明
+
+## 1. 功能概述
+
+组件样式位于选择组件后IDE右侧的工具栏，可用来设置组件的布局、字体、边框等样式，用户可以通过修改样式灵活地设置每个组件的UI风格。每个组件所拥有的样式也会有所区别，本文主要针对每个组件都包含的通用样式属性进行统一的介绍。
+
+<img src="../assets/zujiantongyongyangshishuoming_202412021814_1.png" class="imgStyle" style="width:300px;" />
+
+## 2. 使用场景
+
+可以通过组件通用样式设置单个组件的UI，例如：
+
+- 给组件增加不同颜色的边框；
+- 为组件设置内外边距；
+- 设置单个按钮的圆角大小。
+
+## 3. 功能介绍
+
+### 3.1 布局
+
+- 宽度/高度：用于设置组件的宽度或高度，单位默认为px，支持切换单位。
+
+   可选择px、%、vw、vh和auto：
+
+   - px：像素是屏幕上显示的最小单位，使用px单位可以精确控制元素的大小。例如，宽度设置为100px，表示组件的宽度为100个像素。
+   - %：百分比是相对于父元素的尺寸来设置元素的大小。例如，宽度设置为50%，表示该组件的宽度为上级组件宽度的50%。
+   - vw：视窗宽度单位表示相对于视窗宽度的百分比，1vw等于视窗宽度的1%。例如，宽度设置为50vw，表示组件的宽度为视窗宽度的50%。
+   - vh：视窗高度单位表示相对于视窗高度的百分比，1vh等于视窗高度的1%。例如，高度设置为50vh，表示元素的高度为视窗高度的50%。
+   - auto：auto是一种特殊的值，选择auto时会根据内容或父元素的尺寸自动计算该元素的宽度或高度，以适应内容的大小。
+
+   <img src="../assets/zujiantongyongyangshishuoming_202408211013_2.png" class="imgStyle" style="" />
+
+  - 点击高度输入框后方加号可设置最多/最小宽高，最大和最小宽高的单位支持px、%、vw和vh。添加后也可点击后方按钮删除该设置。
+
+      <img src="../assets/zujiantongyongyangshishuoming_202408211013_3.png" class="imgStyle" style="" />
+
+      <img src="../assets/zujiantongyongyangshishuoming_202408211013_4.png" class="imgStyle" style="" />
+
+- 对齐：用于设置组件内元素的对齐方式，支持选择左对齐、居中和右对齐。
+
+   <img src="../assets/zujiantongyongyangshishuoming_202408211013_5.png" class="imgStyle" style="" />
+
+- 背景：用于设置组件固定的背景，可设置纯色、渐变和背景图。
+
+    - 设置纯色时支持点击输入框直接输入十六进制的颜色代码，也可以点击颜色在弹出框中进行设置。
+    - 设置背景图时可直接上传本地图片，支持设置图片的填充方式和填充方式。
+    - 设置了渐变或背景图后，如需切换为另一种，需要先点击x号关闭后再重新添加。
+
+   <img src="../assets/zujiantongyongyangshishuoming_202408211013_6.png" class="imgStyle" style="" />
+
+- 外边距：是指组件与其他组件之间的距离。设置组件的外边距会在组件周围创建一个空白区域，使组件与其周围的组件产生一定的间距。支持设置负数，单位为px，可设置上下左右四个方向，打开右上角样式关联时，设置一个方向后其余方向会同步更改。
+- 内边距：是指组件元素与边框之间的距离。设置组件的内边距会在组件的内容周围创建一个空白区域，使内容与边框之间有一定的距离。不支持设置负数，其余内容与外边距一致。
+
+   <img src="../assets/zujiantongyongyangshishuoming_202408211013_7.png" class="imgStyle" style="" />
+
+- 定位模式：除默认的默认定位外，还支持其他三种定位模式的选择，分别为绝对定位、固定定位和相对定位。选择其他三种定位模式时，可设置定位值及展示层数。
+
+    - 绝对定位：脱离原有的布局，并相对于最近的已定位父元素进行定位。绝对定位的组件不会占据原始位置，其他组件不会受到其影响。这使得可以将组件放置在页面的任何位置，并与其他组件重叠。
+    - 固定定位：组件通过设置固定定位可以相对于浏览器窗口进行定位，始终保持在浏览器窗口的固定位置。固定定位的组件不会随页面滚动而移动，始终保持在固定位置。可用于导航栏、回到顶部按钮等需要始终可见的组件。
+    - 相对定位：相对定位可以通过设置组件相对于其原始位置的偏移量来调整元素的位置，但元素仍然占据原始位置，不会脱离布局。
+
+   <img src="../assets/zujiantongyongyangshishuoming_202408211013_8.png" class="imgStyle" style="" />
+
+   更换为以上三种定位模式后会出现两个属性：
+
+   - 定位值：需最少按照两个方向定位，可输入数字，单位为px，推荐使用相邻两个方位进行定位，例如上左、下右、下左等。
+   - 展示层数：表示当前组件所在的层数，值越大层级越靠上。在相同位置时，层级大的组件会覆盖层级小的组件。
+
+### 3.2 字体
+
+- 样式：可设置组件内的字体加粗、倾斜和下划线。
+- 字号：可设置组件内字体的大小。
+- 颜色：可设置组件内字体的颜色，支持在输入框中直接输入十六进制的颜色代码或点击前方颜色块在弹出框中点选颜色。
+
+<img src="../assets/zujiantongyongyangshishuoming_202408211013_9.png" class="imgStyle" style="" />
+
+### 3.3 边框
+
+- 样式：点击后可设置组件的边框，可选择实线或虚线。
+- 线条：可分别选中图示中四个方向的线条，设置上下左右的边框粗细和颜色；也可以选中图式中心方块，同步设置四个方向，单位为px。
+- 圆角：可分别设置组件四个角的圆角大小，打开右上角样式关联时，设置一个方向后其余方向会同步更改，单位为px。
+
+<img src="../assets/yangshi_202412241631_1.png" class="imgStyle" style="width:300px;" />
+
+
+### 3.4 主题样式
+
+组件支持在“样式->主题样式”中调整当前单个组件的主题样式；也支持在“自定义主题样式->组件主题配置”中调整当前类型组件在应用中的所有样式，并支持直接预览效果。
+
+推荐前往组件主题配置中查看各主题样式的效果，相关文档请参考：[自定义主题样式](../60.可视化开发界面/70.更多设置/30.自定义主题样式.md)。
+
+每个组件自带的主题样式都有所不同，详细内容可参考[各组件文档](../10.页面设计/20.PC端Vue2组件说明（默认）/01.布局/020.线性布局.md)。
+
+<img src="../assets/zujiantongyongyangshishuoming_202505201126_1.png" class="imgStyle" style="" />
+
+此外，当完成单个组件的主题样式调整后，用户可通过**右键单击**该组件，选择“**复制样式**”，快速完成样式提取。后续在符合条件的同类组件中（包含IDE内的同类组件，以及自定义主题样式--组件主题配置中的同类组件），执行“**粘贴样式**”操作，即可实现主题样式的跨组件复用，有效提升开发效率与设计一致性。
+
+<figure style="text-align: center;">
+<img src="../assets/zujiantongyongyangshishuoming_202505201126_2.png" class="imgStyle" style="" />
+<figcaption>
+<p>复制样式</p>
+</figcaption>
+</figure>
+
+<figure style="text-align: center;">
+<img src="../assets/zujiantongyongyangshishuoming_202505201126_3.png" class="imgStyle" style="" />
+<figcaption>
+<p>IDE 内的同类组件--粘贴样式（应用于当前组件）</p>
+</figcaption>
+</figure>
+
+<figure style="text-align: center;">
+<img src="../assets/zujiantongyongyangshishuoming_202505201126_4.png" class="imgStyle" style="" />
+<figcaption>
+<p>组件主题配置--粘贴样式（应用于全局范围内的所有当前类型组件）</p>
+</figcaption>
+</figure>
+
+
+### 3.5 自定义
+
+用户可在输入框中填写符合CSS语法规范的代码，来实现额外的样式效果。
+
+
+### 3.6 高级样式模式
+
+样式支持切换为高级样式模式。高级样式模式下支持选中组件内部层级、组件状态等来单独配置以上布局、字体、主题样式等。具体操作说明请参考：[自定义主题样式 -> 组件主题配置 -> 高级样式模式](../../20.应用开发/60.可视化开发界面/70.更多设置/30.自定义主题样式.md)。
+
+<img src="../assets/zujiantongyongyangshishuoming_202412021814_2.png" class="imgStyle" style="width:300px;" />
+
+<div class="highlight">
+
+在组件的样式面板和在[自定义主题样式->组件主题配置](../../20.应用开发/60.可视化开发界面/70.更多设置/30.自定义主题样式.md)中，均支持配置组件样式。区别在于：
+
+- 单组件在样式面板中配置效果仅覆盖当前单个组件。
+- 自定义主题样式中的组件主题配置效果覆盖所有同类型组件；
+  
+</div>
+
+## 4. 操作示例
+
+### 4.1 边框的使用
+
+#### 4.1.1 场景描述
+
+如何给文本前添加蓝色色块，如下图所示。
+
+<img src="../assets/zujiantongyongyangshishuoming_202408211013_11.png" class="imgStyle" style="" />
+
+#### 4.1.2 准备工作
+
+创建应用，在应用中拖拽文本组件，选择普通文本，修改文字内容为“标题”，并将字号改为20，加粗。
+
+<img src="../assets/zujiantongyongyangshishuoming_202408211013_12.png" class="imgStyle" style="" />
+
+#### 4.1.3 具体操作
+
+1.  选中文本，在右侧属性栏中找到样式-边框，选择实现边框。
+
+      <img src="../assets/zujiantongyongyangshishuoming_202408211013_13.png" class="imgStyle" style="" />
+
+1.  修改边框颜色为#377eff。将边框上、下、右方向的线条大小设为0，左侧设置为5px。
+
+      <img src="../assets/zujiantongyongyangshishuoming_202408211013_14.png" class="imgStyle" style="" />
+
+1.  设置文本的内边距左侧为10px，即可实现所需效果。
+
+      <img src="../assets/zujiantongyongyangshishuoming_202408211013_15.png" class="imgStyle" style="" />
+
+### 4.2 如何使导航栏固定在顶部
+
+#### 4.2.1 场景描述
+
+页面较长的情况下滚动页面顶部导航栏会跟随页面滑动到上方，如何将首页导航栏固定至屏幕上方，不跟随屏幕滚动。
+
+#### 4.2.2 准备工作
+
+创建含PC端的应用，双击打开PC端中应用自带的index页面。
+
+<img src="../assets/zujiantongyongyangshishuoming_202408211013_16.png" class="imgStyle" style="" />
+
+#### 4.2.3 具体操作
+
+
+1.  选中页面中的导航栏，在右侧属性栏中找到样式-定位模式，将其改为固定定位，定位值以上和左两个方向定位，值都设为0。
+
+      <img src="../assets/zujiantongyongyangshishuoming_202408211013_17.png" class="imgStyle" style="" />
+
+1.  此时我们可以观察到导航栏虽然被固定在上方，但是缺无法再页面中直接看到导航栏，是因为原本页面下方的内容遮盖在导航栏上方。因此我们可以根据实际情况修改展示层数属性，这里直接将其设为10。
+
+      <img src="../assets/zujiantongyongyangshishuoming_202408211013_18.png" class="imgStyle" style="" />
+
+1.  因为固定定位的组件不占用页面位置，那么原本导航栏下方的内容就会往上移动，导致部分内容被覆盖，这里我们可以根据导航栏的高度，通过调整外边距使下面的内容完整显示。导航栏的高度为60px，选中下方内容的最外层，可以通过页面左侧的结构树进行选择，将其外边距属性中的上改为60。这样下方内容就可以完全显示了。
+
+      <img src="../assets/zujiantongyongyangshishuoming_202408211013_19.png" class="imgStyle" style="" />
+
+1.  发布预览效果。
+
+#### 4.2.4 效果展示
+
+<img src="../assets/zujiantongyongyangshishuoming_202408211013_20.gif" class="imgStyle" style="" />
+
+## 5. 补充说明
+
+- 组件的样式属性调整是针对单个组件的修改，如需统一修改某一组件在应用中所有的样式，可通过自定义主题样式进行调整。
+- 在组件样式属性里，仅能对组件的字体颜色、背景颜色、背景图片等进行固定设置。若要实现根据不同条件动态展示不同样式的效果，则需要在属性栏中操作。可参考场景：[动态显示文本颜色](../../80.常见场景案例/70.布局与样式场景/020.动态显示文本颜色.md)
+
+  <img src="../assets/zujiantongyongyangshishuoming_202408211013_21.png" 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);">2025年05月20日</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>