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/01./345/270/203/345/261/200/050./350/207/252/347/224/261/345/270/203/345/261/200.md

@@ -0,0 +1,335 @@
+# 自由布局
+
+自由布局是 CodeWave 智能开发平台提供的一种全新布局方式，在自由布局中支持通过拖拽来调整组件位置和调整大小，通过约束来设计其自适应策略，是一种更灵活、上手门槛更低的布局方式。
+
+## 概念说明
+
+### 自由布局组件
+
+自由布局组件是一种布局容器，它和平台现有的栅格布局、线性布局一样，可以用来进行页面布局。在自由布局组件内的组件会遵循自由布局提供的布局策略，例如拖拽调整宽高和位置，基于辅助线对齐等等。
+
+### 自由布局内子组件
+
+我们将自由布局组件内的一级子组件称为自由布局内子组件，这些子组件会有一些特殊的属性，如距离和约束，用于确定其与父容器的位置关系。
+
+自由布局中的组件可以是任何类型的组件，包括自由布局组件本身。拖入容器中的组件会成为自由布局组件的子组件，如果子组件内有插槽，可以在插槽内继续拖入其他组件进行布局。
+
+<div class="yellowBlock">
+
+注：只有自由布局组件内的一级子组件才具有自由布局的特性，子组件内的其他组件仍然遵循自身的布局规则。
+
+</div>
+
+### 自由模式
+
+开启自由模式时，我们会提供一张基于自由布局的画布，您可以沉浸式体验全屏自由模式。
+
+### 距离
+
+距离用于设置子组件与父容器各边的距离，以确定子组件的位置。距离分为左、右、上、下四个方向，单位为像素（px）。您可以分别设置不同方向的距离，以修改组件在父容器中的位置。
+
+### 约束
+
+通过约束，子组件和父容器之间可以保持固定的关系。当父容器大小发生变化时，子组件会根据提前设置的约束策略来调整位置，此功能可以用来完成网页自适应策略的设计。
+
+约束策略分为横向和纵向，横向包括靠左、靠右等，纵向包括靠上、靠下等。例如，如果用户将靠左固定设置为30像素，靠上固定设置为40像素，当父容器大小发生变化时，子组件始终会与父容器保持30像素的左侧距离和40像素的上侧距离。
+
+> 更多约束策略类型，请参阅下面的[使用约束](#使用约束)模块。
+
+## 什么时候使用自由布局
+
+自由布局可以用来搭建任何类型的网页，但它尤其适合那些对页面还原度要求比较高，页面布局效果比较丰富的网页。由于它的上手门槛较低，它也适合对传统的布局方式了解不深的用户。
+
+## 功能详解
+
+### 使用自由布局
+
+- 方式一：在页面中拖入一个自由布局组件
+
+  可以在任何需要的位置拖入自由布局组件，并调整其的大小到合适数值。
+
+  <img src="../assets/ziyoubuju_pcv2_2.gif" style="border:1px solid #ccc;" />
+- 方式二：多选组件后嵌套布局容器
+
+  多选组件，支持生成自由布局 。
+
+  <img src="../assets/ziyoubuju_202408161620_1.png" class="imgStyle" style="" />
+
+  当选择多个组件后，点击“**多个组件**”上方操作工具条内的“**生成自由布局**” 按钮，系统会基于当前多选组件的相对位置，为其外层嵌套一个自由布局容器，该容器将紧密包裹所选多个组件的最外层边缘。
+
+  <img src="../assets/ziyoubuju_202408161620_2.gif" class="imgStyle" style="" />
+
+- 方式三：开启自由模式
+
+  自由模式可以在创建页面，选择页面模板时开启，当选中一个模板后，在右下角有“自由模式”即意味着此模板可以开启自由模式，打开开关，完成创建即可。
+
+  <img src="../assets/ziyoubuju_pcv2_3.gif" style="border:1px solid #ccc;" />
+
+### 拖拽调整大小和位置
+
+在自由布局中，组件大小、位置都可直接通过鼠标拖拽调整。
+
+#### 拖拽调整位置
+
+- 拖拽方式一，可以点中当前组件空白位置直接拖拽组件（注意：不能将鼠标放置在其子组件上拖拽，否则会将其子组件拖出当前容器）。
+- 拖拽方式二，可以选中组件，点击组件左上角的组件名称进行拖拽。
+
+<img src="../assets/ziyoubuju_pcv2_4.gif" style="border:1px solid #ccc;" />
+
+#### 拖拽调整大小
+
+可通过横向拖拽调整宽度，纵向拖拽调整高度，斜角拖拽同时调整宽高。
+
+<img src="../assets/ziyoubuju_pcv2_5.gif" style="border:1px solid #ccc;" />
+
+**调整组件位置快捷键**
+
+| 按键方式           | 效果                     |
+| ------------------ | ------------------------ |
+| 上下左右键         | 向按键方向移动 1 个像素  |
+| shift + 上下左右键 | 向按键方向移动 10 个像素 |
+
+### 排列对齐
+
+在自由布局内，可以使用快速排列对齐功能来方便地对组件进行排列布局和对齐操作。
+
+#### 通过拖拽对齐
+
+CodeWave 提供了一套对齐辅助线来协助您在拖拽组件时实时完成和其他组件之间的对齐。辅助线会基于当前正在拖拽的组件，判断当前组件和其他组件之间是否有对齐点，当组件和对齐点靠近时，系统会自动吸附在对齐线上完成快速对齐（如果吸附后的效果不是想要的，可以通过方向键来调整位置）。
+
+<img src="../assets/ziyoubuju_pcv2_6.gif" style="border:1px solid #ccc;" />
+
+另外，在自由布局中拖拽组件时还提供了贴边辅助线功能。将组件拖动到另一个组件的边缘时，会自动吸附对齐；调整组件大小时，也会触发对齐辅助线，让布局调整更加方便。
+
+#### 通过按钮对齐
+
+<img src="../assets/zybj_PC22.png" style="border:1px solid #ccc;" />
+
+在自由布局中，可以通过选中一个或多个组件，并在右侧找到“**组件对齐**”选项，来进行对齐操作。只需点击其中的任意一种对齐方式，即可轻松实现对齐效果。如果只选中一个组件并执行对齐操作，系统会默认将该组件与其父容器对齐。如果选中多个组件并执行对齐操作，系统会对它们进行对齐。
+
+支持使用以下三种方式来进行多选操作：
+
+- 长按键盘上的Command键（Mac）/ Ctrl键（Windows），并用鼠标左键点选需要选中的组件。
+- 长按键盘上的Command键（Mac）/ Ctrl键（Windows），并用鼠标进行框选。
+- 激活面板下方的框选状态（如下图所示），然后通过鼠标进行框选。
+
+  <img src="../assets/zybj_PC24.png" style="border:1px solid #ccc;" />
+
+**可配置项**
+
+<img src="../assets/ziyoubuju_pcv2_9.png" style="border:1px solid #ccc;" />
+
+从左到右效果如下
+
+| 对齐方式     | 对齐效果     |                                                      |
+| ------------ | ------------ | ---------------------------------------------------- |
+| 左对齐       | 选中一个组件 | 当前组件和父容器左侧对齐                             |
+|              | 选中多个组件 | 所有选中组件以当前最左侧组件为基准，居左对齐         |
+| 左右居中对齐 | 选中一个组件 | 当前组件和父容器水平居中对齐                         |
+|              | 选中多个组件 | 所有选中组件以选中组件范围的中心为基准，水平居中对齐 |
+| 右对齐       | 选中一个组件 | 当前组件和父容器右侧对齐                             |
+|              | 选中多个组件 | 所有选中组件以当前最右侧组件为基准，居右对齐         |
+| 顶对齐       | 选中一个组件 | 当前组件和父容器顶端对齐                             |
+|              | 选中多个组件 | 所有选中组件以当前最顶端组件为基准，居顶对齐         |
+| 上下居中对齐 | 选中一个组件 | 当前组件和父容器垂直居中对齐                         |
+|              | 选中多个组件 | 所有选中组件以选中组件范围的中心为基准，垂直居中对齐 |
+| 底对齐       | 选中一个组件 | 当前组件和父容器底端对齐                             |
+|              | 选中多个组件 | 所有选中组件以当前最底端组件为基准，居底对齐         |
+| 水平均分     | 选中一个组件 | 不可用                                               |
+|              | 选中多个组件 | 以所有选中组件中最左边和最右边为边界，均分组件间距   |
+| 垂直均分     | 选中一个组件 | 不可用                                               |
+|              | 选中多个组件 | 以所有选中组件中最上边和最下边为边界，均分组件间距   |
+
+### 设置间距
+
+如果需要精确地设置两个组件之间的间距，我们提供了一种简便的方式。
+
+**配置方式**
+
+<img src="../assets/zybj_PC28.png" style="border:1px solid #ccc;" />
+
+要调整两个在横轴或纵轴上有交集的组件之间的间距，您可以选中这两个组件，并在右侧的属性面板中找到“间距”配置项。在该配置项中，您可以输入您想要设置的间距值（单位为像素）。系统会默认以左侧和上侧的组件为基准，自动调整右侧和下侧的组件位置，以完成间距的设置。
+
+### 使用约束
+
+**配置方式**
+
+<img src="../assets/zybj_PC0.png" style="border:1px solid #ccc;" />
+
+在子组件的右侧样式栏中，有一个约束关系板块，其中包含图形化表达和文字表达两种配置方式。可以使用任何一种方式来配置约束，两种方式都会同步修改另一种方式的状态。
+
+在图形化配置中可以点击任何一条边来建立约束关系。例如，在横轴上，左侧固定、中心固定、右侧固定分别对应三条线，如果左右两条线同时点亮，则表示该边同时被左右固定。如果没有任何线条被点亮，则表示该边将等比缩放。
+
+可以通过再次点击已建立的约束来取消约束关系。
+
+**可配置项**
+
+约束选项分为横向和纵向两种。横向约束选项包括靠左、靠中和靠右等选项。
+
+以横向靠左为例，通过设置该选项，您可以确保组件在布局变化时相对于父容器左侧的距离保持不变。例如，将左侧距离设置为100像素，这将确保组件在页面大小变化时始终与父容器左侧保持100像素的固定距离。设置完成后，在组件左侧和父容器左侧之间会出现一条距离线，表示它们之间的距离。这条距离线将始终保持不变，无论父容器的大小如何改变。
+
+具体配置参数项如下：
+
+<div class="yellowBlock">
+
+注：组件进入自由布局容器时默认靠左固定、靠上固定。
+
+</div>
+
+**约束方向：横向**
+
+- **靠左固定**
+
+  描述：组件在布局变化时保持相对于父容器左侧的固定距离不变。
+
+  举例：将橙色块设置为靠左固定且距离设置为 100 像素，当绿色块（父容器）宽度发生变化时，橙色块会始终维持靠左固定 100 像素的策略不变。
+
+  <img src="../assets/ziyoubuju_pcv2_12.gif" style="border:1px solid #ccc;" />
+- **靠右固定**
+
+  描述：组件在布局变化时保持相对于父容器右侧的固定距离不变。
+
+  举例：将橙色块设置为靠右固定且距离设置为 100 像素，当绿色块（父容器）宽度发生变化时，橙色块会始终维持靠右固定 100 像素的策略不变。
+
+  <img src="../assets/ziyoubuju_pcv2_13.gif" style="border:1px solid #ccc;" />
+- **左右固定**
+
+  描述：子组件将会自动调整大小以适应布局组件的新宽度，同时保持与布局组件左右侧的固定距离不变
+
+  举例：将子组件的约束修改成左右固定，并且同时设置靠左、靠右距离均为100像素，当父容器宽度发生变化时，子组件会通过修改自身宽度来适应左右固定且左右举例均为100像素的策略。
+
+  <img src="../assets/ziyoubuju_pcv2_14.gif" style="border:1px solid #ccc;" />
+- **中心固定**
+
+  描述：组件在布局变化时保持自身横轴中心相对于父容器横轴中心的固定距离不变
+
+  举例：子组件选择与父容器横向中心对齐，并且设置约束关系为中心固定，当父容器宽度发生变化时，子组件始终处于父容器的中心。
+
+  <img src="../assets/ziyoubuju_pcv2_15.gif" style="border:1px solid #ccc;" />
+- **等比缩放**
+
+  描述：通过让子组件的左侧间距、右侧间距、组件宽度按照一个固定比例变化，以确保子组件在横轴上的比例不变
+
+  举例：子组件选择与父容器横向中心对齐，并且设置横向约束关系为等比缩放，当父容器大小发生变化时，子组件的左侧间距、宽度、右侧间距均会根据比例发生变化。
+
+  <img src="../assets/ziyoubuju_pcv2_16.gif" style="border:1px solid #ccc;" />
+
+**约束方向：纵向**
+
+<div class="yellowBlock">
+
+注：纵向约束和横向约束相似，不再赘述。
+
+</div>
+
+- **靠上固定**
+
+  描述：组件在布局变化时保持相对于父容器上侧的固定距离不变
+- **靠下固定**
+
+  描述：组件在布局变化时保持相对于父容器下侧的固定距离不变
+- **上下固定**
+
+  描述：子组件将会自动调整高度以适应布局组件的新高度，同时保持与布局组件上下侧的固定距离不变
+- **中心固定**
+
+  描述：组件在布局变化时保持自身纵轴中心相对于父容器纵轴中心的固定距离不变
+- **等比缩放**
+
+  描述：子组件的上侧间距、下侧间距、组件高度会按照一个固定比例变化，以保持子组件在纵轴上的比例不变
+
+### 生成横向或纵向布局
+
+基于自由布局的特点，同级组件之间不存在直接联系，提供的约束仅限于组件和父容器之间的关系，并不能保证父容器内同级组件之间的关系。例如，当存在一个列表和下方的详情介绍板块时，如果列表的数据是动态生成的，则列表的高度不固定，需要额外的步骤来保障当列表高度发生变化时，下方的详情组件能跟随上层列表高度的变化而动态改变位置。
+
+- 方式一：给上层的列表设置一个固定高度，动态变化的内容在该高度范围内滚动
+- 方式二：框选两个组件，点击顶部生成纵向布局。生成后，当上层列表高度发生变化时，下层详情页位置也会随之发生变化。当然，如果想让其维持左右摆放关系，可以点击生成横向布局。
+
+<img src="../assets/ziyoubuju_pcv2_17.gif" style="border:1px solid #ccc;" />
+
+
+### 转换布局容器
+
+在选中自由布局组件后，点击组件名称右侧"更多"按钮，可在弹窗中选择将自由布局转换为：横向-线性布局或者纵向-线性布局，同时自由布局组件提供“解除当前容器”能力。
+
+<img src="../assets/zybj_20240424_1815_001.png" alt="0" style="border:1px solid #ccc;" />
+
+* 生成横纵向布局后，系统跟随选择将自由布局容器切换成线性布局并开启弹性模式。右侧属性面板自动切换到“样式”。横纵向布局影响的是当前自由布局容器内的一级子元素。
+
+  <img src="../assets/zybj_20240424_1815_002.png" alt="0" style="border:1px solid #ccc;" />
+* 生成横纵向布局后，可在属性面板中的内容间隙调整配置组件（一级组件）间距，间距可自定义也可自行在下拉框中选择，默认为16px。
+
+  <img src="../assets/zybj_20240424_1815_003.png" alt="0" style="border:1px solid #ccc;" />
+* 生成横纵向布局时，组件的排列顺序根据当前页面中组件相对XY轴位置计算。
+
+  * 生成横向布局时，根据x轴值的大小进行排列，如遇到X轴值相等，则随机排列。
+  * 生成纵向布局时，根据y轴值的大小进行排列，如遇到Y轴值相等，则随机排列。
+  * 排列完成后，调整左侧结构树相对位置关系为当前排列的关系。
+* 在自由布局中的一级子元素多选后，均可生成横向、纵向、自由布局。
+
+  <img src="../assets/zybj_20240424_1815_004.gif" alt="0" style="border:1px solid #ccc;" />
+
+#### 横向-线性布局
+
+* 布局内组件以横向保持对齐。
+
+  <img src="../assets/zybj_20240424_1815_005.gif" alt="0" style="border:1px solid #ccc;" />
+
+#### 纵向-线性布局
+
+* 布局内组件以纵向保持对齐。
+
+  <img src="../assets/zybj_20240424_1815_006.gif" alt="0" style="border:1px solid #ccc;" />
+
+#### 解除当前容器
+
+解除当前容器后自由布局内组件进入到当前容器的外层容器中并自动适应外层容器布局。
+
+* 如果外层容器是自由布局，则维持子组件在自由布局容器中的相对位置不变。
+
+  <img src="../assets/zybj_20240424_1815_007.gif" alt="0" style="border:1px solid #ccc;" />
+* 如果外层容器是线性布局，则根据线性布局中的布局规则排列（解除外层容器后，子组件的位置和被解除的父容器的相对位置不变）。
+
+  <img src="../assets/zybj_20240424_1815_008.gif" alt="0" style="border:1px solid #ccc;" />
+
+## 事件
+
+自由布局组件支持添加用户交互事件，包括但不限于点击、双击、右键点击、鼠标按下、鼠标释放、鼠标移入和鼠标移出事件。通过对这些事件的编辑，可以实现某些特定的操作或功能，从而为用户提供更丰富的交互体验。
+
+<img src="../assets/ziyoubuju_202408161620_3.png" class="imgStyle" style="" />
+
+- 点击：单击鼠标左键时触发的事件，可用于执行特定的操作或功能。
+- 双击：连续两次单击鼠标左键时触发的事件，通常用于触发某些特定的操作或功能。
+- 右键点击：单击鼠标右键时触发的事件，用于执行与右键点击相关的特定操作或功能。
+- 鼠标按下：鼠标左键按下时触发的事件，可用于实现在鼠标按住状态下的操作。
+- 鼠标释放：释放鼠标左键时触发的事件，可用于执行与释放鼠标相关的特定操作或功能。
+- 鼠标移入：鼠标指针移入组件范围时触发的事件，通常用于显示相关信息或执行某些预设操作。
+- 鼠标移出：鼠标指针移出组件范围时触发的事件，可用于隐藏相关信息或执行某些预设操作。
+
+## 补充说明
+
+在设置自由布局中的一级组件属性时，可以同时选中多个组件进行批量设置。例如，一次性对多个组件进行对齐、间距、约束等属性的调整。
+
+<img src="../assets/ziyoubuju_202408161620_4.png" class="imgStyle" style="" />
+
+## FAQ
+
+### 自由布局里的元素可以设置百分比吗？
+
+可以，而且不用拿着计算器算
+
+<video controls style="width:100%">
+  <source src="https://static-vusion.nos-eastchina1.126.net/tutorial/%E6%96%87%E6%A1%A3%E4%B8%AD%E5%BF%83%E9%99%84%E4%BB%B6/%E5%9C%BA%E6%99%AF%E8%A7%86%E9%A2%91/%E8%87%AA%E7%94%B1%E5%B8%83%E5%B1%80%E7%AD%89%E6%AF%94%E7%BC%A9%E6%94%BE.mov">
+</video>
+
+<style>
+.yellowBlock {
+  /* color: #FFFFFF; */
+  border-left-width: 0.5rem;
+  border-left-style: solid;
+  padding: 0.1rem 1.5rem;
+  margin:1rem 0;
+  background-color: #fcf5e1;
+  border-color: #eaaa08;
+}
+</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/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/01./345/270/203/345/261/200/060./345/270/203/345/261/200/350/257/264/346/230/216.md

@@ -0,0 +1,83 @@
+# 布局说明
+
+## 布局模式
+
+布局是页面排版的关键，以线性布局组件为例，支持如下3种布局模式：
+
+- 内联布局：将当前元素修改为内联布局模式，各个内联布局模式的元素将默认排布在同一行中，若空间不足以排布下一个内联布局元素，则该元素将会换行。
+- 块级布局：将当前元素修改为块级布局模式，各个块级布局模式的元素之前和之后均会换行。
+- 弹性布局：在弹性布局模式中，子元素可以在任何方向上排布，也可以弹性伸缩其尺寸，既可以增加尺寸以填满未使用的空间，也可以收缩尺寸以避免溢出父元素。
+
+<img src="../assets/bujushuoming_202412301613_1.png" class="imgStyle" style="" />
+
+## 如何使用弹性布局
+
+弹性布局作为一种可以自适应不同屏幕尺寸和设备方向的布局方式，它擅长解决内部组件宽度要跟随数量或者外部容器宽度变化而变化的场景。在页面布局中，推荐尝试使用弹性布局来解决页面布局中的问题，下文将介绍如何使用弹性布局。
+
+选中任意的布局组件，找到其“样式”面板，看到下方有一个“布局模式”模块，以下以线性布局为例。
+
+默认的布局模式为块级布局，可以点击右侧”弹性布局“模块完成弹性布局设计，如下图：
+
+<img src="../assets/bujushuoming_202412301613_2.png" class="imgStyle" style="" />
+
+### 主轴方向
+
+垂直：用来实现在一个容器中垂直排列多个组件的布局效果，并且可以支持动态添加和删除组件时的自适应调整。
+
+水平：用来实现在一个容器中水平排列多个组件的布局效果，并且可以支持动态添加和删除组件时的自适应调整。
+
+<img src="../assets/bujushuoming_202412301613_3.png" class="imgStyle" style="" />
+
+### 轴对齐
+
+在弹性布局中，轴对齐分为横轴对齐和纵轴对齐，可以通过九宫格的方式实现横轴左、中、右，纵轴上、中、下总计 9 种方式。
+
+在主轴方向上，可以设置平均分布，它会将组件在横轴上平均分布，使得组件之间的间距相等，并且第一个组件与容器的起始位置对齐，最后一个组件与容器的结束位置对齐。
+
+例如当主轴方向为横向时，可以点击横轴右侧的小图标（如下图）实现容器内所有组件两端对齐的效果。
+
+<img src="../assets/bujushuoming_202412301613_4.png" class="imgStyle" style="" />
+
+开启平均分布后效果如下图（以横轴平均分布为例）：
+
+<img src="../assets/bujushuoming_202412301613_5.png" class="imgStyle" style="" />
+
+### 换行
+
+当一行无法容纳所有组件时，弹性布局支持换行。可以通过开启或关闭换行来决定组件超出容器宽度时的表现方式。如果开启换行，组件会在排列不下时换行展示。如果关闭换行，组件将不会换行并可能超出容器的边界。
+
+<img src="../assets/bujushuoming_202412301613_6.png" class="imgStyle" style="" />
+
+### 子组件间距
+
+在弹性布局中，可以通过设置容器的内边距来控制容器内部组件的排列范围。设置完内边距后，组件只能在内边距范围内排列。因此，内边距的设置可以帮助控制组件的布局和位置。
+
+<img src="../assets/bujushuoming_202412301613_7.png" class="imgStyle" style="" />
+
+### 组件之间的间距
+
+可以通过设置组件的外边距来控制组件之间的间距。此外，还可以通过批量选择多个组件来设置它们的外边距，以实现快速的间距调整。
+
+### 子组件动态宽高
+
+弹性布局最强大的功能之一是控制子组件的尺寸。子组件的宽高可以设置为固定值或者“充满容器”，这意味着当父容器的空间有剩余时，子组件会自动扩大自身的宽度以适应父容器的宽度变化。如果父容器的空间紧张，则子组件会自动缩小自身的大小以适应父容器的空间变化。
+
+<img src="../assets/bujushuoming_202412301613_8.png" class="imgStyle" style="" />
+
+**充满容器使用方式**
+
+- 拖拽一个线性布局，将线性布局的布局属性设置成弹性布局。
+- 布局内放三个组件，其中第一个和最后一个组件设置固定宽度，中间的组件宽度设置为“充满容器”。
+
+**效果**
+
+当外部容器宽度发生变化时，内部动态变化的组件宽度会跟随外部容器的变化而变化，其他组件宽度保持不变。如下图：
+
+<img src="../assets/bujushuoming_202412301613_9.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年12月30日</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/20./345/257/274/350/210/252/030./351/235/242/345/214/205/345/261/221.md

@@ -0,0 +1,217 @@
+# 面包屑
+
+面包屑对于用户来说是一个方便的导航工具，能够帮助用户快速了解当前页面所在位置，并方便用户浏览网站内容。多用于有多层次的页面结构或较为复杂需要清晰的导航路径的应用中。
+
+<img src="../assets/mianbaoxie_202408161749_1.png" class="imgStyle" style="" />
+
+<div class="highlight">
+
+在本章节，你将学习：
+
+1.  面包屑的各类属性、事件、可访问属性等基础信息。
+2.  开启面包屑“自动生成”属性，并为具有层级关系的页面设置“面包屑”属性，以实现根据页面的层级关系自动生成面包屑。
+3.  关闭面包屑“自动生成”属性，添加“面包屑选项”，为面包屑选项设置“跳转链接”、定义面包屑选项插槽中的内容，以手动实现面包屑的跳转路径和面包屑样式。
+   
+</div>
+
+## 属性
+
+> 组件通用属性请参见[组件通用属性说明](../../17.组件通用属性说明.md)。
+
+### 面包屑
+
+#### 主要属性
+
+- 自动生成：支持控制面包屑生成方式。
+  - 开启：根据页面的面包屑属性根据页面的层级自动生成。
+
+    <img src="../assets/mianbaoxie_202408161749_2.png" class="imgStyle" style="width:350px;" />
+
+  - 关闭：手动配置面包屑跳转路径。
+* 面包屑样式：支持控制面包屑样式，包含基础样式和分隔符样式。开启编辑表达式功能后，用于标识"面包屑样式“属性不同选项的对应值如下：
+
+  <img src="../assets/mbx_202403011_1011_2.png" alt="0" style="width: 300px; border: 1px solid #ccc;" />
+
+  * 基础样式
+
+    <img src="../assets/mbx_202403011_1011_3.png" alt="0" style="border: 1px solid #ccc;" />
+  * 分隔符样式
+
+    <img src="../assets/mbx_202403011_1011_4.png" alt="0" style="border: 1px solid #ccc;" />
+* 面包屑图标：支持控制面包屑选项图标显隐，开启后显示面包屑选项图标。该属性仅在“自动生成”属性关闭后显示。
+
+  <img src="../assets/mbx_202403011_1011_5.png" alt="0" style="border: 1px solid #ccc;" />
+
+### 面包屑选项
+
+<img src="../assets/mbx_202403011_1011_6.png" alt="0" style="border: 1px solid #ccc;" />
+
+> 当面包屑为自动面包屑时，无法编辑面包屑选项的属性。不是自动面包屑时，面包屑选项中的文本组件可以删除更换为其他组件。
+
+#### 主要属性
+
+* 图标：支持从图标库选择或上传自定义图标。
+
+#### 交互属性
+
+* 链接类型：支持页面跳转、下载链接。
+* 链接地址：链接的详细地址。
+  * 当“链接类型”为页面跳转时，支持点击链接跳转至应用内外部页面。默认开启编辑表达式，可直接点击“请选择表达式“进入编辑表达式界面选择应用内的页面实现跳转，也可以使用变量或其他表达式实现动态的页面跳转，且支持在高级设置中设置跳转的锚点和打开方式。当关闭编辑表达式属性时，可直接输入跳转页面的路由链接，如/dashboard。
+
+    * 开启编辑表达式，直接选择应用内的页面实现跳转。
+
+    <img src="../assets/mbx_202403011_1011_7.png" alt="0" style="width:400px;" />
+
+    * 开启编辑表达式，使用变量或者其他表达式实现动态的页面跳转。例如将跳转链接地址存储在String类型的局部变量address。
+
+      <img src="../assets/mbx_202403011_1011_8.png" alt="0" style="width:400px" />
+    * 关闭编辑表达式，手动输入跳转链接地址。
+
+      <img src="../assets/mbx_202403011_1011_9.png" alt="0" style="width: 300px; border: 1px solid #ccc;" />
+  * 当“链接类型”为下载链接时，支持点击链接下载链接对应内容。可直接点击右侧箭头上传或选择需要下载的文件，也可以开启编辑表达式，使用变量或其他表达式实现动态的下载链接。
+
+    * 直接点击右侧箭头选择需要下载的文件。
+
+      <img src="../assets/mbx_202403011_1011_10.png" alt="0" style="width: 500px; border: 1px solid #ccc;" />
+    * 开启编辑表达式，使用变量或者其他表达式实现动态的下载链接。例如将下载链接地址存储在String类型的局部变量address。
+
+      <img src="../assets/mbx_202403011_1011_11.png" alt="0" style="width: 300px; border: 1px solid #ccc;" />
+* 链接打开方式：页面跳转的打开方式。可选新窗口、当前窗口、父级窗口和顶级窗口。
+  * 新窗口：在当前浏览器中打开一个新的窗口进行展示。
+  * 当前窗口：在当前活动的浏览器窗口进行展示。
+  * 父级窗口：在当前窗口的上一级窗口进行展示。
+  * 顶级窗口：在最顶层的窗口进行展示。
+
+> 其中父级窗口和顶级窗口仅适用于Iframe组件嵌套的情况，若不存在嵌套，则打开方式同当前窗口。
+
+#### 状态属性
+
+* 禁用：置灰显示，且禁止任何交互，包括焦点、点击、选择等。
+
+<div class="highlight">
+
+“禁用”属性控制的是组件本身的状态，不涵盖拖拽放置在面包屑选项中的其他组件，控制其他组件的状态需要设置对应组件的“禁用”属性。
+
+</div>
+
+## 事件
+
+| 事件名  | 描述                      |
+| :--- | :---------------------- |
+| 点击   | 鼠标左键单击对应组件时触发该事件中的逻辑    |
+| 双击   | 鼠标左键双击对应组件时触发该事件中的逻辑    |
+| 右键点击 | 鼠标右键单击对应组件时触发该事件中的逻辑    |
+| 鼠标按下 | 鼠标任意键在组件区域内按下时触发该事件中的逻辑 |
+| 鼠标释放 | 鼠标任意键在组件区域内释放时触发该事件中的逻辑 |
+| 鼠标移入 | 鼠标指针移入组件区域时触发该事件中的逻辑    |
+| 鼠标移出 | 鼠标指针移出组件区域时触发该事件中的逻辑    |
+| 导航前  | 切换导航还未跳转前触发该事件中的逻辑      |
+| 导航   | 切换导航时触发该事件中的逻辑          |
+
+**导航前 / 导航**
+
+- 事件概述：
+
+    - 导航前：切换导航还未跳转前触发该事件中的逻辑。
+    - 导航：切换导航时触发该事件中的逻辑。
+- 输入参数：事件的输入参数event由应用自动生成，支持在事件逻辑中获取输入参数的值。
+
+  <img src="../assets/mianbaoxie_202408161749_3.png" class="imgStyle" style="width:200px;" />
+
+  - to：String类型，切换的路由。
+  - replace：Boolean类型，是否替换当前路由历史记录中的当前路由。
+  - append：Boolean类型，是否将新的路由添加到当前路由的末尾。
+- 其他说明：触发事件的前提条件是为面包屑选项设置页面跳转链接。
+
+## 可访问属性
+
+在编写表达式或使用前端逻辑时，可以通过“变量或常量“使用选择器组件的[可访问属性](../../19.组件可访问属性.md)，可访问属性有：
+
+<img src="../assets/mianbaoxie_202408161821_1.png" class="imgStyle" style="width:300px;" />
+
+### 面包屑
+
+- _if（显示条件）：Boolean类型，面包屑是否显示，值与“显示条件”属性对齐。支持获取和赋值。
+
+### 面包屑选项
+
+- _if（显示条件）：Boolean类型，面包屑选项是否显示，值与“显示条件”属性对齐。支持获取和赋值。
+
+
+## 插槽
+
+面包屑组件中包含插槽，支持拖拽放置其他组件：
+
+- 面包屑选项包含插槽。常见用法如：指示跳转页面的名称。
+
+<img src="../assets/mianbaoxie_202408161749_4.png" class="imgStyle" style="" />
+
+## 样式
+
+> 组件通用样式请参见[组件通用样式说明](../../18.组件通用样式说明.md)。
+
+### 主题样式
+
+* 可跳转链接的默认文字颜色：如：#223325。
+* 禁用链接的默认文字颜色：如：#223325。
+* 链接与箭头符号之间的间距：如：1px。
+
+组件支持在“**样式**”->“**主题样式**”中调整当前单个组件的主题样式；也支持在“**自定义主题样式**”->“**组件主题配置**”中调整当前类型组件在应用中的所有样式，并支持直接预览效果。
+
+> 推荐前往**组件主题配置**中查看各主题样式的效果，相关文档请参考：[自定义主题样式](../../../60.可视化开发界面/70.更多设置/30.自定义主题样式.md)。
+
+<img src="../assets/mianbaoxie_202411291054_1.png" class="imgStyle" style="" />
+
+## 示例
+
+### 设置自动面包屑
+
+1. dashboard页面下创建子页面CustomerList，标题为客户列表；CustomerList页面下创建子页面CustomerDetail，标题为客户详情。完成创建后返回dashboard页面，若页面中没有面包屑，则拖入自动面包屑组件。
+
+   <img src="../assets/mbx_202403011_1011_13.png" alt="0" style="border: 1px solid #ccc;" />
+2. 单击页面，查看页面属性，分别给dashboard、CustomerList和CustomerDetail三个页面定义面包屑名称。
+
+   <img src="../assets/mbx_202403011_1011_14.png" alt="0" style="border: 1px solid #ccc;" />
+3. 应用发布后，客户详情页预览效果如下。当前页面自动禁用，无法点击，总览页和客户列表均可点击跳转。
+
+   <img src="../assets/mbx_202403011_1011_15.png" alt="0" style="border: 1px solid #ccc;" />
+
+### 设置手动面包屑
+
+1. dashboard页面下创建子页面CustomerList和CustomerDetail，标题分别为客户列表和客户详情。完成后在CustomerDetail页面拖入手动面包屑组件。
+
+   <img src="../assets/mbx_202403011_1011_16.png" alt="0" style="border: 1px solid #ccc;" />
+2. 单击各个面包屑选项，分别配置面包屑选项名称为“总览页”、“客户列表”和“客户详情”。
+
+   <img src="../assets/mbx_202403011_1011_17.png" alt="0" style="border: 1px solid #ccc;" />
+3. 如下图所示，设置各个面包屑选项对应的页面跳转链接，并将最后一个面包屑选项设为禁用。
+
+   <img src="../assets/mbx_202403011_1011_18.png" alt="0" style="border: 1px solid #ccc;" />
+4. 应用发布后，客户详情页预览效果如下。
+
+   <img src="../assets/mbx_202403011_1011_19.png" alt="0" style="border: 1px solid #ccc;" />
+
+## 使用说明
+
+* 自动面包屑需要页面有层级关系且在页面属性中输入信息后才能生效；
+* 手动面包屑如需禁用某链接，需要手动进行链接禁用；
+* 使用手动面包屑时，需要在每个页面设置面包屑或是在总览页的面包屑中使用if显隐控制动态显示。
+
+<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月16日</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>