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/60./345/217/257/350/247/206/345/214/226/345/274/200/345/217/221/347/225/214/351/235/242/70./346/233/264/345/244/232/350/256/276/347/275/256/20./345/272/224/347/224/250/351/205/215/347/275/256.md

@@ -0,0 +1,220 @@
+# 应用配置
+
+## 1. 功能概述
+
+支持开发者调整一系列应用的参数、选项，对应用进行设置和调整。合理的应用配置能够帮助应用在不同环境中灵活运行，并满足特定的业务需求。
+
+## 2. 使用场景
+
+应用配置的常见使用场景：
+
+- 可以为应用添加可全局使用的参数值，例如，在自定义参数配置中添加接口密钥，在应用中需要使用到该密钥时可以调用系统逻辑来获取。
+- 调整应用的数据库连接配置，例如增加数据库连接池的最大连接数或最小连接数。
+- 修改应用中文件上传的配置，例如修改文件存储配置为某厂商的对象存储。
+- 将应用接入到远程配置中心，从而动态管理应用中的配置参数。
+
+## 3. 功能介绍
+
+### 3.1 功能入口
+
+单击顶部“更多”按钮，然后在下拉框中单击应用配置，即可进入应用配置界面。
+
+<img src="../assets/yingyongpeizhi_202502061627_1.png" class="imgStyle" style="" />
+
+### 3.2 数据库配置
+
+数据库配置用于管理应用中的数据库连接池配置。点击“添加连接池配置”后勾选所需的配置，并设置开发环境取值和生产环境取值。
+
+<img src="../assets/yingyongpeizhi_202502061627_2.png" class="imgStyle" style="" />
+
+当应用中使用了多个数据源时，每个数据源可以独立修改配置。
+
+<img src="../assets/yingyongpeizhi_202502061627_3.png" class="imgStyle" style="" />
+
+可用的配置项如下：
+
+| 参数名称           | 参数说明                                                                                    | 开发环境默认值 | 生产环境默认值 |
+| :------------- | :-------------------------------------------------------------------------------------- | :------ | :------ |
+| 数据库连接池获取连接等待时间 | 从连接池获取链接的等待时间，超过时间没有获取到连接将抛出异常，单位ms，允许的最小值为250ms。                                       | 30000   | 30000   |
+| 数据库连接池连接空闲时间   | 连接在数据库连接池中的空闲时间，超过空闲时间后将被释放，单位ms，允许的最小值为10000ms。                                        | 600000  | 600000  |
+| 数据库连接池连接保活时间   | 空闲连接间隔多久进行一次连通性检测，单位ms，允许的最小值为30000ms，默认值为0表示不启用检测功能。                                   | 0       | 0       |
+| 数据库连接池连接最大生命周期 | 连接在数据库连接池中的最大生命周期，超过生命周期后将被释放，但是正在使用中的连接不会被释放，之后连接关闭后才会被释放。单位ms，允许的最小值为30000ms。         | 1800000 | 1800000 |
+| 数据库连接池最大连接数    | 数据库连接池中的最大连接数，包括空闲和正在使用的连接，决定连接的实际数量                                                    | 10      | 10      |
+| 数据库连接池最小连接数    | 数据库连接池中的最小连接数，当连接池中的连接数小于最小连接数时，将尽可能创建新连接。建议和maximumPoolSize一致，未配置默认和maximumPoolSize一致。 | 10      | 10      |
+
+### 3.3 自定义配置
+
+开发者可通过添加自定义配置来管理应用中使用到了一些自定义参数，例如调用接口所需要的密钥。
+
+当同一个参数在应用中被多次使用时，建议将其加入到自定义配置中，避免修改参数时需要在应用中的多处修改。
+
+开发环境和生产环境可独立设置不同的取值。开启加密后，导出源码中的参数内容将以加密文本的形式呈现。
+
+<img src="../assets/yingyongpeizhi_202502061627_4.png" class="imgStyle" style="" />
+
+**新增参数**
+
+点击“新增参数”按钮可为应用添加一个自定义参数。
+
+<img src="../assets/yingyongpeizhi_202502061627_5.png" class="imgStyle" style="" />
+
+新增参数的配置项说明：
+
+- 参数名称：自定义参数的名称。只支持英文、数字和下划线，必须以字母开头。必填项。
+- 参数说明：对添加参数的文本解释。必填项。
+- 开发环境取值：参数取值。必填项。
+- 生产环境取值：参数取值。必填项。
+- 隐私安全：开启后，可控制当前参数在导出为依赖库或模板时自动抹除参数值，并且当前参数不可被前端逻辑调用。默认关闭。
+
+<img src="../assets/yingyongpeizhi_202502061627_6.png" class="imgStyle" style="" />
+
+**调用参数**
+
+1. 在调用逻辑组件中找到系统逻辑下方的应用信息，其中包含getCustomConfig方法。
+
+    <img src="../assets/yingyongpeizhi_202502061627_7.png" class="imgStyle" style="" />
+
+2. 调用getCustomConfig方法，选择需要的自定义参数。将getCustomConfig方法作为其他逻辑的参数值或赋值给其他变量，即可完成自定义参数的使用。例如下图所示，将调用逻辑结果赋值给局部变量。
+
+    <img src="../assets/yingyongpeizhi_202502061627_8.png" class="imgStyle" style="" />
+
+### 3.4 系统配置
+
+系统配置是应用内部实现时需要的配置参数，在应用发布后应用的服务端运行时生效。这些配置项通常与系统功能和性能相关，可以通过修改配置值来改变系统的行为。
+
+<img src="../assets/yingyongpeizhi_202502061627_9.png" class="imgStyle" style="" />
+
+- 开发环境取值：应用发布到开发环境中对应的参数取值。
+- 生产环境取值：应用发布到生产环境中对应的参数取值。
+- 修改：修改参数的值。
+- 删除：点击删除即表示将该参数从应用服务端移除，应用运行时没有到该参数。
+
+当需要对其他系统参数进行修改时，需要点击“添加系统参数”按钮，选择待修改系统参数。添加后即可进行修改。
+
+应用创建时即提供了以下系统参数：
+
+| 系统参数名    | 参数说明                                | 开发环境默认值 | 生产环境默认值 |
+| :------- | :---------------------------------- | :------ | :------ |
+| 统一路径前缀   | 统一路径前缀，                             | /       | /       |
+| 应用时区     | 日期时间函数使用的时区信息，影响日期时间的展示和计算结果        | 用户本地时区  | 用户本地时区  |
+| 单个文件上传大小 | 接口中单个文件上传大小限制，需要带上单位MB，最大限制为10000MB | 50MB    | 50MB    |
+| 单次请求大小   | 单次请求接口大小限制，需要带上单位MB，最大限制为10000MB    | 50MB    | 50MB    |
+
+还可以点击“添加系统参数”按钮添加以下系统参数来进行修改配置：
+
+| 系统参数名     | 参数说明                                  | 开发环境默认值           | 生产环境默认值               |
+| :-------- | :------------------------------------ | :---------------- | :-------------------- |
+| 文件上传白名单   | 服务端限制文件上传的类型(备注:文件类型以英文;分割)           | webp;sql;pdf;doc;dot;docx;xls;xlsx;ppt;pptx;txt;log;xml;json;ods;ots;fods;uos;xltx;xlt;dif;dbf;slk;csv;xlsm;odt;ott;fodt;uot;dotx;rtf;docm;odp;otp;ppsx;jpeg;jpg;png;gif;bmp;tif;avi;wmv;mov;flv;mkv;wma;mp3;wav;mid;zip;tar;rar;7z;gz;tar.gz;srt;ass;smi;ssa;sub | webp;sql;pdf;doc;dot;docx;xls;xlsx;ppt;pptx;txt;log;xml;json;ods;ots;fods;uos;xltx;xlt;dif;dbf;slk;csv;xlsm;odt;ott;fodt;uot;dotx;rtf;docm;odp;otp;ppsx;jpeg;jpg;png;gif;bmp;tif;avi;wmv;mov;flv;mkv;wma;mp3;wav;mid;zip;tar;rar;7z;gz;tar.gz;srt;ass;smi;ssa;sub |
+| 文件存储名称策略  | 定义上传文件时如何生成文件名称                       | 保留原文件名称           | 保留原文件名称               |
+| debug日志打印 | 开启制品应用的debug级日志打印，可观测到制品应用更详细的运行日志，例如 | false             | false                 |
+| 接口请求超时时间  | 设置接口请求超时时间，单位为秒，可设置的范围为1-90秒          | 30                | 30                    |
+| 慢查询打印日志   | 是否开启慢查询打印日志，该配置>=3.13版本才能生效           | 是                 | 是                     |
+| 慢查询阈值     | 超过设置时间(ms)将打印慢查询日志，该配置>=3.13版本才能生效    | 10000             | 10000                 |
+
+**新增系统参数**
+
+当需要通过系统参数来控制其他业务并且该系统参数不在可选系统参数列表中，则需要通过修改系统配置文件的方式新增系统参数到列表中。具体方法可参考：[增加可选系统参数操作指南](../../../80.常见场景案例/999.其他场景/30.增加可选系统参数操作指南.md)
+
+**注意事项**
+
+系统参数属于系统运行层面的参数，新添加的参数会覆盖原始参数值，错误的参数值可能会导致应用发布后无法正常启动或功能异常。
+
+### 3.5 连接器配置
+
+用于统一展示并管理应用中添加的连接器参数，连接器的添加与配置方式请参考文档：[什么是连接器 - 配置连接器](../../../40.扩展与集成/20.集成开发方式/20.连接器集成/10.什么是连接器.md)
+
+- 开发环境和生产环境可独立设置取值。
+- 开启加密后，导出源码中的参数内容将以加密文本的形式呈现。
+- 此处仅支持修改连接器配置，不支持删除连接器，删除连接器请前往集成中心。
+- 此处的清单中不包括配置中心连接器。配置中心连接器的配置方式请参考文档：[Apollo配置中心连接器](../../../40.扩展与集成/20.集成开发方式/20.连接器集成/35.系统连接器/26.Apollo配置中心连接器.md)。
+
+<img src="../assets/yingyongpeizhi_202502061627_10.png" class="imgStyle" style="" />
+
+### 3.6 依赖库配置
+
+用于管理应用中引入的依赖库的配置。
+
+- 开发环境和生产环境可独立设置取值。
+- 开启加密后，导出源码中的参数内容将以加密文本的形式呈现。
+- 此处仅支持修改依赖库配置，不支持删除引入的依赖库，删除依赖库请前往依赖库管理。
+
+<img src="../assets/yingyongpeizhi_202502061627_11.png" class="imgStyle" style="" />
+
+### 3.7 文件存储策略
+
+文件存储策略用于配置应用中文件上传相关的设置。
+
+<img src="../assets/yingyongpeizhi_202502061627_12.png" class="imgStyle" style="" />
+
+#### 访问策略
+
+支持配置“用户登陆后可访问”或“任何人可访问”，默认为“任何人可访问”，需要控制文件下载权限时可以选择“用户登录后可访问”。
+
+也可以在文件上传组件的“文件访问策略”属性中单独设置。
+
+<img src="../assets/yingyongpeizhi_202502061627_13.png" class="imgStyle" style="" />
+
+#### 文件有效期
+
+支持配置“设置有效天数”或“永久有效”。默认为“永久有效”。
+
+也可以在文件上传组件的“文件有效期”属性中单独设置。
+
+<img src="../assets/yingyongpeizhi_202502061627_14.png" class="imgStyle" style="" />
+
+#### 文件存储
+
+该配置用于设置应用中文件上传的存储源，应用默认有一个“系统文件存储”，也可以手动添加额外的文件存储方式，在文件上传组件的属性中可以选择用哪一个存储方式。
+
+- 系统文件存储
+
+    应用默认的文件存储配置，文件上传组件的“存储方式”属性将默认使用该项。可分别为开发环境和生产环境指定不同的存储配置，默认为“系统默认存储”。
+
+    <img src="../assets/yingyongpeizhi_202502061627_15.png" class="imgStyle" style="" />
+
+    额外可选的配置需要在**配置中心>文件存储配置**中预先添加。
+
+    具体存储设施配置请参考[文件存储配置](../../../50.平台配置管理/80.文件存储配置.md)。
+
+    <img src="../assets/yingyongpeizhi_202502061627_16.png" class="imgStyle" style="" />
+
+- 添加自定义文件存储
+
+    点击“添加文件存储方式”可以为当前应用配置额外的存储设施，可以添加多个，使用文件上传组件时可在属性中指定使用哪一个存储。添加自定义文件存储之前，需要先添加文件存储连接器，使用文档请参考：[文件存储连接器](../../../40.扩展与集成/20.集成开发方式/20.连接器集成/35.系统连接器/20.文件存储连接器.md)。
+
+    <img src="../assets/yingyongpeizhi_202502061627_17.png" class="imgStyle" style="" />
+
+    - 点击编辑图标可为该配置进行重命名。
+    - 点击“设为默认”之后，新拖拽生成的文件上传组件将默认使用该存储方式。
+    - 点击“删除”后将弹出弹窗进行二次确认，如果应用中已经使用过该存储方式来上传文件，删除时需谨慎考虑，会影响已上传文件的查看。
+
+        <img src="../assets/yingyongpeizhi_202502061627_18.png" class="imgStyle" style="" />
+
+    - 已经配置好的文件存储配置如果切换了开发环境或生产环境的配置，则会弹出弹窗进行二次确认，如果应用中已经使用过该存储方式来上传文件，切换时需谨慎考虑，会影响已上传文件的查看。
+
+        <img src="../assets/yingyongpeizhi_202502061627_19.png" class="imgStyle" style="" />
+
+### 3.8 配置中心设置
+
+当需要为应用接入远程配置中心时，可以在此处导入配置连接器，其他的参数配置便可以开启“读取配置中心”。
+
+目前支持对接Apollo远程配置中心，使用文档请参考：[Apollo配置中心连接器](../../../40.扩展与集成/20.集成开发方式/20.连接器集成/35.系统连接器/26.Apollo配置中心连接器.md)。
+
+<img src="../assets/yingyongpeizhi_202502061627_20.png" class="imgStyle" style="" />
+
+<img src="../assets/yingyongpeizhi_202502061627_21.png" class="imgStyle" style="" />
+
+导入了配置中心连接器后，其他的各类配置便会展示“读取配置中心”开关，开启之后，制品应用在启动时便会从远程配置中心获取该配置项。
+
+<img src="../assets/yingyongpeizhi_202502061627_22.png" class="imgStyle" style="" />
+
+点击“全部应用配置”可预览并下载配置文件，可复制后填入到远程配置中心使用。
+
+<img src="../assets/yingyongpeizhi_202502061627_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年02月06日</span>
+</div>

package/skills/smart-customer-service/docs/codewave/20./345/272/224/347/224/250/345/274/200/345/217/221/60./345/217/257/350/247/206/345/214/226/345/274/200/345/217/221/347/225/214/351/235/242/70./346/233/264/345/244/232/350/256/276/347/275/256/30./350/207/252/345/256/232/344/271/211/344/270/273/351/242/230/346/240/267/345/274/217.md

@@ -0,0 +1,393 @@
+# 自定义主题样式
+
+## 1. 功能概述
+
+自定义主题样式功能允许用户自定义应用的外观和颜色方案。通过自定义主题样式，用户可以更改文本颜色、背景颜色、字体大小、字体样式等，使其应用具有独特的外观和风格。
+
+<img src="../assets/zidingyizhutiyangshi_202505191845_1.png" class="imgStyle" style="" />
+
+## 2. 使用场景
+
+- 需要根据个人喜好或品牌需求使应用整体的样式风格统一时，通过修改自定义主题样式可快速定制应用的外观风格。
+- 开发者可以通过导入和导出主题的功能，快速修改和备份主题样式的配置，方便在不同环境中使用和共享。
+
+> 具体应用场景请参考：[主题样式](../../10.页面设计/40.调整页面样式/10.快速自定义主题样式.md)。
+
+## 3. 功能介绍
+
+### 3.1 功能入口
+
+单击顶部 “**更多**” 按钮，然后在下拉框中单击自定义主题样式，即可进入主题样式设置界面。
+
+<img src="../assets/zidingyizhutiyangshi_202505191845_2.png" class="imgStyle" style="" />
+
+### 3.2 顶部导航栏
+
+#### 3.2.1 切换端
+
+在主题样式设置界面左上角可切换PC端或H5端，分别设置主题样式。
+
+<img src="../assets/zidingyizhutiyangshi_202505191845_3.png" class="imgStyle" style="" />
+
+#### 3.2.2 搜索组件
+
+应用支持搜索组件名称，直接跳转至组件主题配置中相应组件的位置。
+
+<img src="../assets/zidingyizhutiyangshi_202505191845_4.png" class="imgStyle" style="" />
+
+#### 3.2.3 创建/切换全局主题
+
+在主题样式设置界面顶部导航栏右侧，可选择进行**创建/切换全局主题**，切换后可进行**全局主题设置、组件主题配置**等一系列操作，详情请见后文。
+
+<img src="../assets/zidingyizhutiyangshi_202505191845_5.png" class="imgStyle" style="" />
+
+另外，CodeWave智能开发平台**搭载了强大的AI功能**，能够实现自然语言以及截图向页面样式的转换，这种转换可作用于全局范围以及单组件范围。**全局主题样式提供多套选择，方便用户操作与回溯**。**AI生成的组件样式支持一键复制/粘贴**，便于快速复用，提升开发效率。
+
+> 有关AI生成主题样式的详细介绍及场景示例，可参考：[智能样式生成](../../../25.智能开发/008.智能样式生成.md)。
+
+<img src="../assets/zidingyizhutiyangshi_202505191845_6.png" class="imgStyle" style="" />
+
+#### 3.2.4 更多设置
+
+##### 重置样式
+
+点击“**重置**”将自定义主题样式全部初始化为应用默认样式。
+
+<img src="../assets/zidingyizhutiyangshi_202505191845_7.png" class="imgStyle" style="" />
+
+##### 导入/导出主题
+
+应用支持导入json文件快捷更改主题样式配置，同时支持导出当前主题样式的json文件。
+
+<img src="../assets/zidingyizhutiyangshi_202505191845_8.png" class="imgStyle" style="" />
+
+注意：
+
+- 导入json文件时，没有配置的样式不会修改。
+- 导出json文件时，应用只会导出修改后的样式，如果用户在没有修改应用初始样式的情况下导出json文件，文件内容将不带有任何属性内容。例如只修改侧边栏项高度，导出json文件后只显示侧边栏宽度和侧边栏项高度。
+
+<img src="../assets/zidingyizhutiyangshi_202505191845_9.png" class="imgStyle" style="" />
+
+##### 删除主题
+
+用户自行创建的且未在应用中的全局主题可通过点击“**更多设置**”-“**删除主题**”将其移除，主题删除后将无法恢复，请谨慎操作。
+
+<img src="../assets/zidingyizhutiyangshi_202505191845_10.png" class="imgStyle" style="" />
+
+<img src="../assets/zidingyizhutiyangshi_202505191845_11.png" class="imgStyle" style="" />
+
+### 3.3 全局主题设置
+
+全局主题设置中包括颜色、尺寸和风格，每个类型默认展示基础值的配置，通过设置全局主题可以统一应用整体的样式和外观。
+
+更改全局主题设置后，支持直接在右侧页面预览或组件预览中展示效果。
+
+每个样式配置项均展示其Token值，例如主色的Token值为`–brand-primary`。Token值可用于定义其他配置项，具体使用说明请参考下文：[配置项的Token值和梯度](#_4-2-配置项的token值和梯度)。
+
+<img src="../assets/zidingyizhutiyangshi_202505191845_12.png" class="imgStyle" style="width:450px;" />
+
+#### 3.3.1 颜色
+
+##### 颜色设置
+
+全局主题设置中包括如下颜色设置。
+
+<img src="../assets/zidingyizhutiyangshi_202505191845_13.png" class="imgStyle" style="width:750px;" />
+
+更改颜色时，支持点击色块选择颜色，也支持直接在输入框中输入RGB、RGBA、Hex、英文代码等；
+
+<img src="../assets/zidingyizhutiyangshi_202505191845_14.png" class="imgStyle" style="" />
+
+其中，主色、成功色、警告色、错误色、禁用色通常作为“**主题颜色**”对应常见的五种场景。
+
+在部分包含“**主题颜色**”属性的组件中（例如文本、链接、标签），可以通过切换“主题颜色”的属性值快捷更改组件的颜色，有利于用户将组件的使用快速匹配不同的应用场景。
+
+<img src="../assets/zidingyizhutiyangshi_202505191845_15.png" class="imgStyle" style="" />
+
+而之所以能够借助 “**主题颜色**” 属性迅速将组件的颜色定义为全局主题设置里对应的主色、成功色、警告色、错误色、禁用色，是由于在[组件主题配置](#_3-4-组件主题配置)环节，已将组件对应的配置项设定为全局主题设置中颜色的 Token 值。
+
+<img src="../assets/zidingyizhutiyangshi_202505191845_16.png" class="imgStyle" style="" />
+
+##### 颜色重置
+
+主题颜色设置被修改后将展示如下图标，点击图标后初始化当前设置为应用默认样式。
+
+<img src="../assets/zidingyizhutiyangshi_202505191845_17.png" class="imgStyle" style="width:450px;" />
+
+#### 3.3.2 尺寸
+
+全局主题设置中包括如下尺寸设置。
+
+<img src="../assets/zidingyizhutiyangshi_202505191845_18.png" class="imgStyle" style="width:750px;" />
+
+#### 3.3.3 风格
+
+全局主题设置中包括如下风格设置。
+
+<img src="../assets/zidingyizhutiyangshi_202505191845_19.png" class="imgStyle" style="width:750px;" />
+
+### 3.4 组件主题配置
+
+组件主题配置中支持根据不同的组件，统一修改该组件的主题样式。
+
+更改组件主题配置后，支持直接在右侧预览中展示效果。
+
+<img src="../assets/zidingyizhutiyangshi_202505191845_20.png" class="imgStyle" style="" />
+
+#### 3.4.1 智能样式生成
+
+组件主题配置，支持通过自然语言描述或参考截图，借助AI生成与全局风格协调的配色及样式方案。​生成的组件样式支持**一键复制/粘贴**进行复用。
+
+<img src="../assets/zidingyizhutiyangshi_202505191845_21.png" class="imgStyle" style="" />
+
+#### 3.4.1 普通样式模式
+
+- 选中组件后，组件主题配置默认为普通样式模式。该模式下，将已经定义好的组件样式分为颜色、尺寸、风格、图标四类主题样式。每个组件主题配置内容不同，详细内容可参考组件文档。
+
+    - **颜色、尺寸、风格**的操作方法与全局主题设置一致。使用组件时，在组件的**样式面板**中，可配置的“主题样式”集合了主题配置中的颜色、尺寸、风格，支持单独修改单个组件的样式。
+    - **图标**支持从图标库选择图标或上传自定义SVG格式图标。使用组件时，在组件的**属性面板**中，包含可覆盖主题配置图标的属性，支持单独修改单个组件的图标。
+
+    <img src="../assets/yangshi_202508261405_1.png" class="imgStyle" style="width:450px" />
+
+- 点击“高级样式模式”按钮即可切换模式。
+
+    <img src="../assets/yangshi_202508261405_2.png" class="imgStyle" style="width:450px" />
+
+
+#### 3.4.2 高级样式模式
+
+在组件的高级样式模式下，更偏向于以“**CSS样式设置器**”的方式来实现组件的样式配置，支持选中组件内部层级、组件状态等来单独配置样式。
+
+##### 层级选择器
+层级选择器用于激活组件内部层级，激活组件内部层级后即可配置当前组件层级的样式。使用层级选择器是高级样式模式下配置样式的第一步。重新选择组件层级时需要重新点击层级选择器。
+
+<img src="../assets/zidingyizhutiyangshi_202505191845_24.png" class="imgStyle" style="" />
+
+<div class="highlight">
+
+层级选择器等同于浏览器元素选择器。
+
+<img src="../assets/zidingyizhutiyangshi_202505191845_25.png" class="imgStyle" style="" />
+
+</div>
+
+##### 父级
+
+父级按钮用于选中当前组件层级的父级元素。鼠标悬浮时可查看当前组件层级的父级元素；鼠标点击时可选中当前组件层级的父级元素，配置父级元素的样式。
+
+<img src="../assets/zidingyizhutiyangshi_202505191845_26.png" class="imgStyle" style="" />
+
+##### 子级
+
+子级按钮用于选中当前组件层级的子级元素。鼠标悬浮可查看当前组件层级的子级元素；鼠标点击时可选中当前组件层级的子级元素，配置子级元素的样式。
+
+<img src="../assets/zidingyizhutiyangshi_202505191845_27.png" class="imgStyle" style="" />
+
+##### 上一个/下一个
+
+上一个和下一个按钮用于选中当前组件层级相邻的元素。同样支持悬浮查看、点击选中。
+
+<img src="../assets/zidingyizhutiyangshi_202505191845_28.png" class="imgStyle" style="" />
+
+##### 组件状态
+
+组件状态用于选择元素状态，包括默认、鼠标移入、鼠标按下和聚焦状态，选择后即可配置对应状态下元素的样式。
+
+<img src="../assets/zidingyizhutiyangshi_202505191845_29.png" class="imgStyle" style="" />
+
+<div class="highlight">
+
+组件状态等同于浏览器的元素状态切换。
+
+<img src="../assets/zidingyizhutiyangshi_202505191845_30.png" class="imgStyle" style="" />
+
+</div>
+
+##### Class
+
+`Class`用于选择元素所属的CSS类选择器，可选类受当前选中的组件层级和组件状态影响。选择后即可配置该类选择器下元素的样式。用户可以利用已有的 `Class` 命名规则，对特定类别的组件元素进行专门的样式调整，避免了对其他无关元素的样式干扰。
+
+<div class="highlight">
+
+类选择器的生效优先级与分类的明确程度密切相关，分类越明确，其生效优先级越高。此外，当某个类选择器所定义的分类包含于其他类选择器所涵盖的分类范围内时，该类选择器能够继承相应的样式。
+
+<img src="../assets/zidingyizhutiyangshi_202505191845_31.png" class="imgStyle" style="" />
+
+</div>
+
+
+##### 样式配置
+
+在选定组件层级并确定组件状态与 `Class` 之后，此`CSS` 类选择器下处于相应状态的元素所对应的可配置样式面板。包含组件通用样式和主题样式，主题样式即普通样式模式下定义好的组件样式。
+
+<div class="highlight">
+
+样式配置详细说明请参考：[组件通用样式说明](../../../20.应用开发/10.页面设计/18.组件通用样式说明.md)。该文档中描述了组件样式面板，其使用姿势与“样式配置”一致，关于组件样式面板和组件主题配置的对比说明请参考下文：[配置组件主题样式的方式](#_4-1-配置组件主题样式的方式)。
+
+</div>
+
+
+##### 计算样式
+
+在考虑了样式的继承、层叠等因素后，对照样式配置，元素实际呈现的样式属性值的面板。
+
+1.  计算样式等同于浏览器的计算样式。
+
+    <img src="../assets/zidingyizhutiyangshi_202505191845_32.png" class="imgStyle" style="" />
+
+2.  计算样式支持溯源。
+
+    例如：为Class为`[class*=u-table___] th`的表头单元格设置内边距，当Class为`[class*=u-table___] thead th`的表头单元格未设置内边距时，则其继承上述内边距样式，并在其计算样式中点击“定位至来源时”，支持跳转至`Class`为`[class*=u-table___] th`的表头单元格的样式配置。
+
+    支持溯源的样式不包含继承、组件内部实现样式。
+
+    <img src="../assets/zidingyizhutiyangshi_202505191845_33.png" class="imgStyle" style="" />
+
+3.  计算样式支持修改。修改样式的前提是在当前元素任意 `Class` 下的样式配置中已有定义的样式属性值，修改计算样式后同步更新溯源位置的样式配置中的样式属性值。
+
+**补充说明**
+
+考虑到容器组件在页面结构中的特殊性，平台保留了必要的限制机制：容器组件会过滤指定其**所有直接子元素**的选择器（即包含“ **`>* `**”的选择器），以此解决页面结构复杂时可能出现的子元素样式受影响问题，避免全局样式混乱。
+
+
+#### 3.4.3 重置样式
+
+样式设置被修改后将展示如下图标，点击图标后初始化当前设置为应用默认样式。
+
+<img src="../assets/zidingyizhutiyangshi_202505191845_17.png" class="imgStyle" style="width:450px;" />
+
+#### 3.4.4 示例：修改组件主题样式
+
+##### 场景介绍
+
+要求应用中所有数据表格组件，在鼠标悬浮于表头单元格时使表头单元格高亮。表头单元格要求类选择器为`[class*=u-table___] th`；高亮颜色如`#337eff80`。
+
+`[class*=u-table___] th `表示要求`class`属性包含 `u-table` 这个字符串元素并且是 th 标签，这是CSS选择器中用于定义表格表头单元格的一种常见描述，也是应用中已定义的一种描述。
+
+##### 操作步骤
+
+1.  在自定义主题样式的组件主题样式中找到数据表格，切换为“**高级样式模式**”。
+
+    <img src="../assets/zidingyizhutiyangshi_202505191845_35.png" class="imgStyle" style="" />
+
+1.  点击层级选择器，选择任意表头单元格，用于激活表头单元格的样式配置。
+
+    <img src="../assets/zidingyizhutiyangshi_202505191845_36.png" class="imgStyle" style="" />
+
+1.  组件状态选择“**鼠标移入（hover）**”，用于设置鼠标悬浮状态时表头单元格的样式。
+
+    <img src="../assets/zidingyizhutiyangshi_202505191845_37.png" class="imgStyle" style="" />
+
+1.  Class选择“表格>表头单元格:鼠标移入”（`[class*=u-table___] th:hover`），即要求类选择器为`[class*=u-table___] th`且根据组件状态默认包含鼠标移入（hover）。
+
+    <img src="../assets/zidingyizhutiyangshi_202505191845_38.png" class="imgStyle" style="" />
+
+1.  在样式布局中将背景颜色设为`#337eff80`。
+
+    <img src="../assets/zidingyizhutiyangshi_202505191845_39.png" class="imgStyle" style="" />
+
+效果演示
+
+<img src="../assets/zidingyizhutiyangshi_202505191845_40.png" class="imgStyle" style="" />
+
+### 3.5 画布尺寸及其缩放、
+
+<img src="../assets/zidingyizhutiyangshi_202505191845_41.png" class="imgStyle" style="" />
+
+#### 3.5.1 画布尺寸
+
+应用支持配置画布的宽度并自动计算画布的高度，尺寸单位`px`。画布宽度默认为`1440px`，最小为`200px`，最大为`10000px`。
+
+#### 3.5.2 全局缩放
+
+应用支持配置等比缩放，默认关闭。开启后，页面组件宽高、间距，字体大小等均会跟随画布尺寸等比放大或缩小，组件之间相对位置保持不变，缩放效果如同照片。常见的应用场景可参考：[什么时候需要使用“全局缩放”](../../../80.常见场景案例/70.布局与样式场景/070.什么时候需要使用“全局缩放”.md)。
+
+开启全局缩放功能后，手动设置的宽高、间距、字体大小不影响等比缩放功能。
+
+### 3.6 标签页设置
+
+应用支持自定义应用在浏览器中显示的标签页图标和名称。页面右侧可以直接查看标签页的预览效果。
+
+<img src="../assets/zidingyizhutiyangshi_202505191845_42.png" class="imgStyle" style="" />
+
+- 标签页图标：支持自定义图片作为页面标签。
+- 标签页名称：支持自定义标签页名称，变量使用支持选择页面标题和应用名称。默认显示“**页面标题-应用名称**”。可使用两种变量，页面标题变量对应页面属性中的标题，应用名称变量对应应用的标识符。
+
+示例：
+
+1.  点击变量，变量自动填入标签页名称。同时支持添加自定义内容作为固定值显示。
+
+    <img src="../assets/zidingyizhutiyangshi_202505191845_43.png" class="imgStyle" style="width:700px;" />
+
+1.  为页面添加标题描述。
+
+    <img src="../assets/zidingyizhutiyangshi_202505191845_44.png" class="imgStyle" style="" />
+
+1.  发布应用后，可查看到如下效果。
+
+    <img src="../assets/zidingyizhutiyangshi_202505191845_45.png" class="imgStyle" style="" />
+
+## 4. 补充说明
+
+### 4.1 配置组件主题样式的方式
+
+除了在自定义主题样式中配置组件主题以外，同样支持中IDE中选择组件后在样式面板中为选中的组件单独配置样式。区别在于：
+
+- 自定义主题样式中的组件主题配置效果覆盖所有同类型组件；
+- 单组件在样式面板中配置效果仅覆盖当前单个组件。
+
+单组件在样式面板中的配置方式如下：
+
+1.  使用样式下的通用样式和主题样式.主题样式对应组件主题配置中，普通样式模式下的**颜色、尺寸、风格**；通用样式具体请参考:[组件通用样式说明。](../../../20.应用开发/10.页面设计/18.组件通用样式说明.md)
+2.  使用样式自定义。
+3.  切换样式为高级样式模式，模式与组件主题配置中的的高级样式模式相同。
+
+<img src="../assets/zidingyizhutiyangshi_202505191845_46.png" class="imgStyle" style="" />
+
+关于CSS以及以上所涉及到的样式设置的方式，生效的优先级大致如下：
+
+<div class="highlight">
+
+重要性声明!important> 单组件样式面板“自定义” > 单组件样式面板“通用样式”配置 > 单组件样式面板“主题样式”配置 > 组件主题配置（内部优先级类似于单组件样式面板） > 全局主题设置 > 组件默认样式形态。
+
+</div>
+
+### 4.2 配置项的Token值和梯度
+
+- 每个配置项均展示其`Token`值，`Token`值可用于定义其他配置项。以颜色为例，参考如下：
+
+  - 主色的`Token`值为`–brand-primary`。
+
+    <img src="../assets/zidingyizhutiyangshi_202505191845_47.png" class="imgStyle" style="width:450px;" />
+
+  - 将其他配置项的颜色设置为`var(–brand-primary）`即可使颜色与主色保持一致。
+
+    <img src="../assets/zidingyizhutiyangshi_202505191845_48.png" class="imgStyle" style="width:450px;" />
+
+- 全局主题设置中默认展示基础值的配置项，应用将基于基础值自动计算梯度值。以颜色为例，参考如下：
+
+  - 主色配置基础值为`#ff0000`。
+
+    <img src="../assets/zidingyizhutiyangshi_202505191845_49.png" class="imgStyle" style="width:450px;" />
+
+  - 将其他配置项的颜色设置为`var(–brand-primary-light）`或`var(–brand-primary-dark）`时，自动计算`#ff0000`的梯度值。
+
+    <img src="../assets/zidingyizhutiyangshi_202505191845_50.png" class="imgStyle" style="width:450px;" />
+
+<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月19日</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>