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/20./345/257/274/350/210/252/040./344/276/247/350/276/271/346/240/217.md

@@ -0,0 +1,390 @@
+# 侧边栏
+
+侧边栏组件提供可供选择的侧边栏项，通常位于应用主要内容区域的一侧，用于应用导航菜单、应用设置等场景。
+
+<img src="../assets/cebianlan_202408191035_1.png" class="imgStyle" style="" />
+
+<div class="highlight">
+
+在本章节，你将学习：
+
+1.  侧边栏的各类属性、事件、可访问属性等基础信息。
+2.  如何使用侧边栏的各类属性，具体实现效果包括但不限于
+    - 使用侧边栏的“数据源”属性，并选择“文本字段”、“跳转链接字段”，以设置侧边栏中动态展示的侧边栏项的数据内容与跳转路径；
+    - 使用侧边栏的“数据源”属性，并选择“值字段”、“父级值字段”，以设置侧边栏中动态展示的侧边栏项的分组和层级结构；
+    - 使用侧边栏的“数据源”属性，并选择“图标属性字段”，以设置侧边栏中动态展示的侧边栏项的图标；
+    - 开启侧边栏的“菜单项可折叠”属性，以实现侧边栏中的分组可折叠；
+    - 开启侧边栏的“侧边栏可折叠”属性，以实现整个侧边栏可收缩、可展开；
+
+3.  使用“侧边栏分组”，以添加不包含在数据源内的层级结构；在侧边栏分组下继续添加“侧边栏分组”，以添加不包含在数据源内的多层级结构。
+4.  使用“侧边栏项”，并为侧边栏项设置“链接地址”属性，以添加不包含在数据源内的侧边栏选项。
+
+</div>
+
+
+## 属性
+
+> 组件通用属性请参见[组件通用属性说明](../../17.组件通用属性说明.md)。
+
+### 侧边栏
+
+#### 数据属性
+
+* 数据源配置：默认关闭。关闭时，需要手动添加侧边栏分组和项实现静态的侧边栏。开启后，可配置如下属性，实现根据数据源动态加载侧边栏分组和项，同时可手动添加分组和项，结合两者一起使用。
+  * 数据源：侧边栏展示数据的输入源，可设置为集合类型变量List或输出参数为包含List的匿名数据结构的逻辑。
+  * 数据类型：数据源返回的数据结构的类型，自动识别类型进行展示说明，为只读状态无法修改。
+  * 文本字段：绑定数据源后，用于标识展示在侧边栏分组和侧边栏项的文本的字段。
+
+    <img src="../assets/cbl_202403012_1656_2.png" alt="0" style="width:300px;" />
+  * 值字段：绑定数据源后，用于标识侧边栏数据被选中时获取到的值的字段。为侧边栏添加“选择后”事件时，可以通过event.value获取被选择的侧边栏项对应该字段的值。
+
+    <img src="../assets/cbl_202403012_1656_3.png" alt="0" style="width:200px;" />
+  * 图标属性字段：绑定数据源后，用于标识显示在侧边栏项的图标的字段，字段内容为String文本类型。
+
+    <img src="../assets/cbl_202403012_1656_4.png" alt="0" style="width:300px;" />
+
+    使用文件上传组件为侧边栏项的图标属性赋值时，支持上传的文件类型为.svg格式，转换器为URL字符串。
+  * 跳转链接字段：绑定数据源后，用于标识侧边栏项跳转页面的字段，字段内容为String文本类型，格式为/+链接地址，如/dashboard/link。
+  * 父级值字段：绑定数据源后，用于标识侧边栏分组或项所在分组的字段，与父节点的“值字段”相关联。实现侧边栏分组树形层级展示效果时需配置此字段。
+  
+    <div class="highlight">
+    数据源配置参考如下：
+
+    1. 构建如下数据结构/实体SidebarStructure。
+
+       <img src="../assets/cbl_202403012_1656_5.png" alt="0" style="" />
+    2. 已有List类型局部变量sidebarList存储数据如下：
+
+       <img src="../assets/cbl_202403012_1656_6.png" alt="0" style="" />
+    3. 开启数据源配置后，将局部变量sidebarList绑定为侧边栏的数据源，选择SidebarStructure下对应的属性作为相应字段。
+
+       <img src="../assets/cbl_202403012_1656_7.png" alt="0" style="width:300px;" />
+    4. 预览效果。
+
+       <img src="../assets/cbl_202403012_1656_8.png" alt="0" style="" />
+
+    </div>
+ 
+* 使用路由：默认开启。开启后，跳转应用内页面时不会重新加载整个页面，只改变链接地址并局部更新页面内容。关闭后，页面的切换不再是无刷新的，而是重新加载整个页面。
+
+  > 关闭后，侧边栏项跳转链接的属性值，支持格式为/+链接地址或全路径如[http://xxx](http://xxx)。
+* 选中值：当前选中侧边栏项的值，可手动输入或编辑表达式动态绑定，其数据类型与值字段的类型相关。仅在关闭“使用路由”后，可设置选中值。
+
+  当开启“使用路由”时，侧边栏项的选中状态由当前页面链接决定；当未开启“使用路由”时，侧边栏的选中状态由“选中值”属性决定。
+
+  <img src="../assets/cbl_202403012_1656_9.png" alt="0" style="width:300px;" />
+
+#### 交互属性
+
+* 菜单项可折叠：设置侧边栏中的分组是否可折叠。
+
+  <img src="../assets/cbl_202403012_1656_10.gif" alt="0" style="" />
+* 手风琴模式：开启后每次仅会展开一个侧边栏分组。开启“菜单项可折叠”属性后生效。
+
+  <img src="../assets/cbl_202403012_1656_11.gif" alt="0" style="" />
+* 展开触发方式：展开或收起侧边栏分组的触发方式。开启“菜单项可折叠”属性后生效。
+  * 整行点击均可触发：鼠标点击导航栏分组区域均可触发。
+  * 点击小箭头时触发：鼠标点击导航栏分组小箭头触发。
+* 侧边栏可折叠：设置侧边栏是否可横向折叠。建议开启该功能的同时设置侧边栏的宽度，为侧边栏的展开状态定宽。
+
+  <img src="../assets/cbl_202403012_1656_12.gif" alt="0" style="" />
+* 默认状态：设置侧边栏默认展开或收起。开启“侧边栏可折叠”属性后生效。开启编辑表达式时，用于标识“默认状态”不同选项的值如下：
+
+  <img src="../assets/cebianlan_202409111756_1.png" class="imgStyle" style="width:350px;" />
+
+* 是否展示伸缩图标：控制展开或收起侧边栏的图标是否显示。开启“侧边栏可折叠”属性后生效。
+* 展开图标：控制侧边栏展开的图标。
+* 折叠图标：控制侧边栏收起的图标。
+
+#### 状态属性
+
+* 只读：正常显示，但禁止选择。
+* 禁用：置灰显示，且禁止任何交互，如焦点、点击、选择等。
+
+### 侧边栏分组
+
+选中**侧边栏**或**侧边栏分组**可添加侧边栏分组。在侧边栏分组下继续添加侧边栏分组，即可自定义固定分组数量的多层级侧边栏。
+
+<img src="../assets/cbl_202403012_1656_13.png" alt="0" style="" />
+
+<img src="../assets/cebianlan_202412091807_1.png" class="imgStyle" style="" />
+
+
+#### 主要属性
+
+* 图标：设置侧边栏分组的图标，可从图标库选择图标或上传自定义图标，上传图标仅支持SVG格式。
+  
+#### 交互属性
+
+* 可折叠：设置选中的侧边栏分组是否可折叠，该设置优先级高于整个侧边栏的可折叠设置。
+
+#### 状态属性
+
+* 展开状态：设置侧边栏分组默认展开/折叠状态，为Boolean类型。关闭编辑表达式，可直接手动选择当前折叠分组的状态；开启编辑表达式绑定为Boolean类型内容，可动态实现展示效果。在开启侧边栏的“菜单项可折叠”属性或侧边栏分组的“可折叠”属性时有效。
+* 禁用展开/折叠：置灰显示侧边栏分组的可折叠标识，且禁止展开/折叠操作。
+
+### 侧边栏项
+
+选中侧边栏或侧边栏分组可添加侧边栏项。
+
+<img src="../assets/cbl_202403012_1656_15.png" alt="0" style="" />
+
+<img src="../assets/cbl_202403012_1656_16.png" alt="0" style="" />
+
+#### 数据属性
+
+* 值：当前侧边栏项的值。可手动输入内容或编辑表达式。当侧边栏项被选中时，侧边栏的“选择后”事件中的event.value和侧边栏的“选中值”属性会与该值相同。
+
+  * 手动输入：
+
+    <img src="../assets/cbl_202403012_1656_17.png" alt="0" style="width:300px;" />
+  * 编辑表达式：编辑表达式时建议绑定基础类型变量。
+
+    <img src="../assets/cbl_202403012_1656_18.png" alt="0" style="width:300px;" />
+
+#### 主要属性
+
+* 图标：设置侧边栏项的图标，可从图标库选择图标或上传自定义图标，上传图标仅支持SVG格式。
+
+#### 交互属性
+
+* 链接类型：可设置为页面跳转、下载链接。
+* 链接地址：链接的详细地址。
+  * 当“链接类型”为页面跳转时，支持点击链接跳转至应用内外部页面。默认开启编辑表达式，可直接点击“请选择表达式“进入编辑表达式界面选择应用内的页面实现跳转，也可以使用变量或其他表达式实现动态的页面跳转，且支持在高级设置中设置跳转的锚点和打开方式。当关闭编辑表达式属性时，可直接输入跳转页面的路由链接，如/dashboard。
+
+    * 开启编辑表达式，直接选择应用内的页面实现跳转。
+
+      <img src="../assets/cbl_202403012_1656_19.png" alt="0" style="width:400px;" />
+    * 开启编辑表达式，使用变量或者其他表达式实现动态的页面跳转。例如将跳转链接地址存储在String类型的局部变量address。
+
+      <img src="../assets/cbl_202403012_1656_20.png" alt="0" style="width:400px;" />
+    * 关闭编辑表达式，手动输入跳转链接地址。
+
+      <img src="../assets/cbl_202403012_1656_21.png" alt="0" style="width:300px;" />
+  * 当“链接类型”为下载链接时，支持点击链接下载链接对应内容。可直接点击右侧箭头上传或选择需要下载的文件，也可以开启编辑表达式，使用变量或其他表达式实现动态的下载链接。
+
+    * 直接点击右侧箭头选择需要下载的文件。
+
+      <img src="../assets/cbl_202403012_1656_22.png" alt="0" style="width:600px;" />
+    * 开启编辑表达式，使用变量或者其他表达式实现动态的下载链接。例如将下载链接地址存储在String类型的局部变量address。
+
+      <img src="../assets/cbl_202403012_1656_23.png" alt="0" style="width:300px;" />
+* 链接打开方式：页面跳转的打开方式。可选新窗口、当前窗口、父级窗口和顶级窗口。
+
+  * 新窗口：在当前浏览器中打开一个新的窗口进行展示。
+  * 当前窗口：在当前活动的浏览器窗口进行展示。
+  * 父级窗口：在当前窗口的上一级窗口进行展示。
+  * 顶级窗口：在最顶层的窗口进行展示。
+
+  > 其中父级窗口和顶级窗口仅适用于iframe组件嵌套的情况，若不存在嵌套，则打开方式同当前窗口。
+  >
+
+#### 状态属性
+
+* 禁用：置灰显示，且禁止任何交互，如焦点、点击、选择等。
+
+### 分隔线
+
+<img src="../assets/cbl_202403012_1656_24.png" alt="0" style="" />
+
+<img src="../assets/cbl_202403012_1656_25.png" alt="0" style="" />
+
+可以放置在手动添加的侧边栏项或分组之间，仅做样式展示。
+
+## 事件
+
+### 侧边栏
+
+| 事件名     | 描述                 |
+| :------ | :----------------- |
+| 选择后 | 选择某个侧边栏项后触发该事件中的逻辑 |
+
+**选择后**
+
+- 事件概述：选择某个侧边栏项后触发该事件中的逻辑。
+- 输入参数：事件的输入参数event由应用自动生成，支持在事件逻辑中获取输入参数的值。有效参数如下：
+
+  <img src="../assets/cebianlan_202408191035_3.png" class="imgStyle" style="width:200px;" />
+
+- value：数据类型由侧边栏的“值字段“属性或侧边栏项“值”属性的数据类型决定。当前选择侧边栏项的选中值。
+
+### 侧边栏项
+
+| 事件名       | 描述                      |
+| :-------- | :---------------------- |
+| 点击    | 鼠标左键单击对应组件时触发该事件中的逻辑    |
+| 双击   | 鼠标左键双击对应组件时触发该事件中的逻辑    |
+| 右键点击 | 鼠标右键单击对应组件时触发该事件中的逻辑    |
+| 鼠标按下 | 鼠标任意键在组件区域内按下时触发该事件中的逻辑 |
+| 鼠标释放 | 鼠标任意键在组件区域内释放时触发该事件中的逻辑 |
+| 鼠标移入 | 鼠标指针移入组件区域时触发该事件中的逻辑    |
+| 鼠标移出 | 鼠标指针移出组件区域时触发该事件中的逻辑    |
+| 获得焦点 | 组件获得焦点时触发               |
+| 失去焦点 | 组件失去焦点时触发               |
+| 切换路由后| 页面进行跳转之后触发该事件中的逻辑       |
+
+**切换路由后**
+
+- 事件概述：页面进行跳转之后触发该事件中的逻辑。
+- 输入参数：事件的输入参数event由应用自动生成，支持在事件逻辑中获取输入参数的值。
+
+  <img src="../assets/cebianlan_202408191035_4.png" class="imgStyle" style="width:200px;" />
+
+  - to：String类型，切换的路由。
+  - replace：Boolean类型，是否替换当前路由历史记录中的当前路由。
+  - append：Boolean类型，是否将新的路由添加到当前路由的末尾。
+  - 其他说明：触发事件的前提条件是为链接设置页面跳转链接。
+
+## 可访问属性
+
+在编写表达式或使用前端逻辑时，可以通过“变量或常量“使用侧边栏组件的[可访问属性](../../19.组件可访问属性.md)，可访问属性有：
+
+<img src="../assets/cebianlan_202408191123_1.png" class="imgStyle" style="width:300px;" />
+
+### 侧边栏
+
+- data（数据）：`List<T>`类型，侧边栏的数据集合，来源于选择器的数据源。支持获取。
+- value（选中值）：数据类型由侧边栏“值字段“属性的数据类型决定，侧边栏选中项的值，值与“选中值”属性对齐。支持获取和赋值。
+- disabled（禁用）：Boolean类型，侧边栏是否禁用，值与“禁用”属性对齐。支持获取和赋值。
+- opened（打开）Boolean类型，侧边栏下拉框是否展开，值与“显示状态”属性对齐。支持获取和赋值。
+- _if（显示条件）：Boolean类型，侧边栏是否显示，值与“显示条件”属性对齐。支持获取和赋值。
+
+### 侧边栏分组
+
+- disabled（禁用）：Boolean类型，侧边栏分组是否禁用，值与“禁用展开/折叠”属性对齐。支持获取和赋值。
+
+- _if（显示条件）：Boolean类型，侧边栏分组是否显示，值与“显示条件”属性对齐。支持获取和赋值。
+
+### 侧边栏项
+
+- disabled（禁用）：Boolean类型，侧边栏项是否禁用，值与“禁用”属性对齐。支持获取和赋值。
+- _if（显示条件）：Boolean类型，侧边栏项是否显示，值与“显示条件”属性对齐。支持获取和赋值。
+
+
+## 组件逻辑
+
+页面添加选择器组件后，支持调用选择器的内置逻辑，内置逻辑有：
+
+| 逻辑名                | 描述              |
+| :----------------- | :-------------- |
+| [toggleAll](#toggleall)      | 切换所有侧边栏分组的展开状态。 |
+| [toggleCollapse](#togglecollapse) | 切换侧边栏的横向展开状态。   |
+
+<img src="../assets/cebianlan_202408191035_6.png" class="imgStyle" style="width:400px;" />
+
+### toggleAll
+
+- 逻辑概述：切换所有侧边栏分组的展开状态。
+- 输入参数：
+
+    - expanded：Boolean类型必填参数。expanded为True表示展开侧边栏分组，为False表示折叠侧边栏分组。
+- 其他说明：
+
+    - 要求开启侧边栏的“菜单项可折叠”属性或侧边栏分组的“可折叠”属性。
+    - 不包括开启“禁用展开/折叠”的侧边栏分组。
+
+<img src="../assets/cebianlan_202408191035_7.png" class="imgStyle" style="width:400px;" />
+
+### toggleCollapse
+
+- 逻辑概述：切换侧边栏的横向展开状态。
+- 其他说明：要求开启侧边栏的“侧边栏可折叠”属性。
+
+## 插槽
+
+侧边栏组件中包含插槽，支持拖拽放置其他组件：
+
+- 侧边栏分组包含插槽。常见用法如：指示当前分组的标题。
+
+  <img src="../assets/cebianlan_202408191035_8.png" class="imgStyle" style="" />
+
+- 侧边栏项包含插槽。常见用法如：指示当前侧边栏项的标题。
+
+  <img src="../assets/cebianlan_202408191035_9.png" class="imgStyle" style="" />
+
+## 样式
+
+> 组件通用样式请参见[组件通用样式说明](../../18.组件通用样式说明.md)。
+
+### 主题样式
+
+#### 项
+
+- 侧边栏项高度：如：1px。默认54px。
+- 侧边栏项左边距：如：1px，默认30px。
+- 侧边栏项背景色：如：#223325，默认#ffffff。
+- 侧边栏项选中背景色：如：#223325，默认#337eff1f。
+- 侧边栏项禁用背景色：如：#223325，默认#ffffff
+- 侧边栏项禁用选中背景色：如：#223325，默认#337eff。
+- 侧边栏项文字颜色：如：#223325，默认#333333。
+- 侧边栏项背景色（hover状态）：如：#223325，默认#ffffff。
+- 侧边栏项文字颜色（hover状态）：如：#223325，默认#337eff。
+- 侧边栏项选中时文字颜色：如：#223325，默认#337eff。
+- 侧边栏项禁用文字颜色：如：#223325，默认#586475。
+- 侧边栏项右边框宽度：如：1px，默认4px。
+- 侧边栏项右边框颜色：如：#223325，默认#337eff。
+- 侧边栏项下边框宽度：如：1px，默认16px。
+- 侧边栏项下边框颜色：如：#223325，默认#cccccc。
+- 侧边栏项图标大小：如：1px，默认0px。
+- 侧边栏项图标颜色：如：#223325，默认#e5e5e5。
+- 侧边栏项图标颜色（hover状态）：如：#223325，默认#cccccc。
+- 侧边栏项图标颜色（选中状态）：如：#223325，默认#cccccc。
+
+#### 分组
+
+- 侧边栏分组左边距：如：1px，默认10px。
+- 侧边栏分组头部高度：如：1px，默认52px。
+- 侧边栏分组头部左边距：如：1px，默认20px。
+- 侧边栏分组头部字重：如：1px。
+- 侧边栏分组头部字体颜色：如：#223325，默认#333333。
+- 侧边栏分组头部字体颜色（hover状态）：如：#223325，默认#337eff。
+- 侧边栏分组头部背景色（hover状态）：如：#223325，默认#f5f5f5。
+- 侧边栏分组头部选中背景色：如：#223325，默认#337eff。
+- 侧边栏分组头部下边距宽度：如：1px，默认0px。
+- 侧边栏分组头部下边距颜色：如：#223325，默认#e5e5e5。
+
+#### 分隔符
+
+- 侧边栏分隔符左外边距：如：1px，默认8px。
+- 侧边栏分隔符高度：如：1px。
+- 侧边栏分隔符背景色：如：#223325，默认#3d4654。
+
+#### 其他
+
+- 侧边栏背景色：如：#223325，默认#ffffff。
+
+
+组件支持在"**样式**"->"**主题样式**"中调整当前单个组件的主题样式；也支持在"**自定义主题样式**"->"**组件主题配置**"中调整当前类型组件在应用中的所有样式，并支持直接预览效果。
+
+> 推荐前往**组件主题配置**中查看各主题样式的效果，相关文档请参考[自定义主题样式](../../../60.可视化开发界面/70.更多设置/30.自定义主题样式.md)。
+
+<img src="../assets/cebianlan_202411291102_1.png" class="imgStyle" style="" />
+
+
+## 使用说明
+
+* 侧边栏组件拖入页面时，可选择基本用法、折叠功能、分组、手风琴模式四种样式，也可以在生成后通过修改设置侧边栏属性、侧边栏分组属性进一步实现所需效果。
+
+  <img src="../assets/cbl_202403012_1656_29.png" alt="0" style="width:550px; "/>
+* 侧边栏开启数据源配置后，动态生成的侧边栏分组或项在手动添加的侧边栏分组或项之前。
+
+  <img src="../assets/cbl_202403012_1656_30.png" alt="0" 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年08月19日</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>