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/70./351/200/211/346/213/251/345/231/250/185./346/240/221/345/275/242/350/247/206/345/233/276.md

@@ -0,0 +1,402 @@
+# 树形视图
+
+树形视图以树形结构来展示数据，通常用于展示组织结构、菜单导航等。
+
+例如：展示公司的组织架构。
+
+<img src="../assets/shuxingshitu_202410111647_1.png" class="imgStyle" style="" />
+
+<div class="highlight">
+
+在本章节，你将学习：
+
+1.  树形视图的各类属性、事件、可访问属性等基础信息。
+2.  如何使用树形视图的各类属性，具体实现效果包括但不限于
+
+    - [使用树形视图的“数据源”属性，以设置树形视图中展示的数据内容](#数据属性)；
+    - [使用树形视图的“父子节点独立选择”属性，以设置树形节点被选中时父子节点的关联关系](#交互属性)；
+
+3.  [使用”树形视图节点“，完善”值“、”文本“等属性，以添加不包含在数据源内的树形节点](#树形视图节点)。
+4.  [使用 expanded 属性定义树形节点默认展开或收起](#扩展树形节点默认展开状态)。
+
+</div>
+
+
+
+## 属性
+
+> 组件通用属性请参见[组件通用属性说明](../../../../20.应用开发/10.页面设计/17.组件通用属性说明.md)。
+
+### 树形视图
+
+#### 数据属性
+
+- 数据源：树形视图展示的数据。数据源支持绑定List类型变量或输出参数为数组或包含List的匿名数据结构的逻辑，匿名数据结构例如：`{list:List<{department:Department}>,total:10}`。同时支持在绑定数据源后添加树形视图节点实现视图的动态数据源和静态节点的结合。
+
+  <div class="highlight">
+
+  当树形视图绑定数据源后，应用自动生成current变量。树形视图会根据数据源中包含的 List 按顺序对每一项进行循环遍历，使用current即可指代在 List 中当前正在访问或操作的对象。为**树形视图节点**或其中的组件编辑表达式或添加事件，即可调用current变量：
+
+  <img src="../assets/biaoge_202412060952_1.png" class="imgStyle" style="width:200px" />
+
+  **所有可绑定数据源的组件同理**。
+
+  在树形视图的属性中设置任意字段（如值字段）时，同样根据字段值进行循环遍历，但不显示其 current.item 前缀。
+
+
+  </div>
+
+    - List中可以是包含children属性的多层列表，
+    例如 `List<treeStructure:{department:Department,children:List<treeStructure>}>`，
+    - List也可以上包含“父级值字段”属性的单层列表。当List是单层列表时，变量或逻辑的返回值需要包含两条数据类型相同属性，用于匹配”值字段“和”父级值字段“，为树形视图建立节点之间的联系。示例如下：
+
+    <img src="../assets/sxstPC2.png" alt="img" style="border:1px solid #ccc;" />
+    <img src="../assets/sxst_PC4.png" alt="img" style="border:1px solid #ccc;" />
+- 数据类型：数据源返回的数据结构的类型，自动识别类型进行展示说明，为只读状态无法修改。
+- 选项文本：设置数据源后，作为标识树形视图节点文本的字段名。
+- 值字段：设置数据源后，作为标识树形视图节点值的字段名。
+- 子级值字段：设置数据源后，作为标识子级字段名，用于标识树形视图节点取哪个属性作为子级。默认为children。
+  > 在数据源调用逻辑的前提下，若子级值字段的值为空（null），需将其赋值为空数组，避免在树节点不存在子级的情况下触发不必要的数据回调。 
+- 父级值字段：设置数据源后，作为标识父级的字段名，用于标识树形视图节点取哪个属性作为父级的判断，需同步配置“值字段”。绑定动态数据源时建议直接配置父级值字段建立树形结构。
+  
+  > 使用数据源时，仅需配置“子级值字段”和“父级值字段”其中一项即可实现树形效果，需要配置的项由数据源决定。
+- 选中值：选中的树形视图节点的值。当数据源为配置的动态数据源时，该值由“值字段”属性决定；当树形视图的节点为手动添加的子节点时，该值由节点的“值”属性决定。
+
+#### 主要属性
+- 只渲染激活节点：首次加载时，仅对包含选中值所在分支的数据进行完整渲染，用于提升渲染的性能。
+
+#### 交互属性
+
+- 父子节点独立选择：开启后父节点选择不会全选子节点，子节点选择不会联动父节点。在可多选属性开启时生效。以如下树形视图为例：
+
+    - 未开启“父子节点独立选择”，选中“产品部”时选中值包含产品一组、产品二组，但不包含“产品部”本身，即选中值为选择节点所有最底层节点的集合。
+
+      <img src="../assets/shuxingshitu_202410231506_1.png" class="imgStyle" style="" />
+
+  - 开启“父子节点独立选择”，选中“产品部”时选中值仅包含“产品部”本身；支持独立选择任意节点。
+
+      <img src="../assets/shuxingshitu_202410231506_2.png" class="imgStyle" style="" />
+
+- 可多选：树形视图节点是否可多选。默认关闭。
+- 手风琴模式：开启功能时，点击树形视图节点，其他已经展开的树形视图节点收起。
+- 触发方式：树展开/折叠的方式。可选择整行点击均可触发、点击小箭头时触发。默认整行点击均可触发。
+
+#### 状态属性
+
+- 只读：正常显示，但禁止选择。
+- 禁用：置灰显示，且禁止任何交互，包括点击、选择等。
+
+### 树形视图节点
+
+树形视图下体现层级关系的分支。
+
+<img src="../assets/sxstPC6.png" style="border:1px solid #ccc;" />
+
+#### 主要属性
+
+- 文本：对应树形视图节点的文本内容。删除树形视图节点中的文本组件后有效。
+  <img src="../assets/shuxingshitu_202410111708_1.png" class="imgStyle" style="" />
+
+
+#### 数据属性
+
+- 值：对应树形视图节点的值，可在选中后通过选中值字段获取。
+
+#### 交互属性
+
+- 默认选中：对应树形视图节点是否默认选中并包含在树形视图的选中值中。默认开启编辑表达式。关闭编辑表达式，可直接手动选择当前节点是否默认选中；开启编辑表达式时若直接绑定Boolean类型变量，支持开启“是否将组件输入赋值给变量“，开启时会根据选中状态改变变量的值，也会根据变量的值展示节点的选中状态。
+
+#### 状态属性
+
+- 展开状态：对应树形视图节点是否展开。默认开启编辑表达式。关闭编辑表达式，可直接手动选择当前节点是否默认展开；开启编辑表达式时若直接绑定Boolean类型变量，支持开启“是否将组件输入赋值给变量“，开启时会根据展开状态改变变量的值，也会根据变量的值更改节点的展开状态。
+- 禁用：置灰显示，且禁止任何交互，包括点击、选择等。
+
+<div class="highlight">
+
+“禁用”属性控制的是组件本身的状态，不涵盖拖拽放置在树形视图节点中的其他组件，控制其他组件的状态需要设置对应组件的“禁用”属性。
+
+</div>
+
+
+## 事件
+
+### 树形视图
+
+| 事件名       | 描述                         |
+| :-------- | :------------------------- |
+| [选择前](#选择前--选择后)   | 任意树形视图节点被选择前触发该事件中的逻辑      |
+| [输入时](#输入时)   | 任意树形视图节点被选择时触发该事件中的逻辑      |
+| [选择后](#选择前--选择后)   | 任意树形视图节点被选择后触发该事件中的逻辑      |
+| [改变后](#改变后)   | 树形视图选中项改变后触发该事件中的逻辑        |
+| [展开折叠后](#展开折叠后) | 任意树形视图节点被展开或折叠后触发该事件中的逻辑   |
+| [选中取消后](#选中取消后) | 任意树形视图节点被选中或取消选中后触发该事件中的逻辑 |
+| [加载前](#加载前--加载后)   | 组件数据源绑定逻辑调用前触发该事件中的逻辑      |
+| [加载后](#加载前--加载后)   | 组件数据源绑定逻辑调用后触发该事件中的逻辑      |
+
+#### 输入时
+
+- 事件概述：任意树形视图节点被选择时触发该事件中的逻辑。
+- 输入参数：事件的输入参数event由应用自动生成，支持在事件逻辑中获取输入参数的值。
+
+  <img src="../assets/shuxingshitu_202410111647_2.png" class="imgStyle" style="width:200px" />
+
+  - event：V或List类型，V由树形视图“值字段“属性或的树形视图节点“值”属性的数据类型决定。当前选择数据节点的值或值的列表。
+
+#### 选择前 / 选择后
+
+- 事件概述：
+
+    - 选择前：任意树形视图节点被选择前触发该事件中的逻辑。
+    - 选择后：任意树形视图节点被选择后触发该事件中的逻辑。
+- 输入参数：事件的输入参数event由应用自动生成，支持在事件逻辑中获取输入参数的值。
+
+  <img src="../assets/shuxingshitu_202410111647_3.png" class="imgStyle" style="width:200px" />
+
+  - value：数据类型由树形视图“值字段“属性或的树形视图节点“值”属性的数据类型决定，当前选择节点的值。
+  - oldValue：（空）
+  - node：Object类型，当前选择节点的对象。
+  - oldNode：Object类型，更改选择前节点的对象。
+
+#### 改变后
+
+- 事件概述：树形视图选中项改变后触发该事件中的逻辑
+- 输入参数：事件的输入参数event由应用自动生成，支持在事件逻辑中获取输入参数的值。
+
+  <img src="../assets/shuxingshitu_202410111647_3.png" class="imgStyle" style="width:200px" />
+
+  - value：数据类型由树形视图“值字段“属性或的树形视图节点“值”属性的数据类型决定，当前选择节点的值。
+  - oldValue：数据类型由树形视图“值字段“属性或的树形视图节点“值”属性的数据类型决定，更改选择前节点的值。
+  - node：Object类型，当前选择节点的对象。
+  - oldNode：Object类型，更改选择前节点的对象。
+
+#### 展开折叠后
+
+- 事件概述：任意树形视图节点被展开或折叠后触发该事件中的逻辑。
+- 输入参数：事件的输入参数event由应用自动生成，支持在事件逻辑中获取输入参数的值。
+
+  <img src="../assets/shuxingshitu_202410111647_5.png" class="imgStyle" style="width:200px" />
+
+  - expanded：Boolean类型，当前节点的展开状态。
+  - node：Object类型，当前展开或折叠节点的对象。
+
+#### 选中取消后
+
+- 事件概述：任意树形视图节点被选中或取消选中后触发该事件中的逻辑。
+
+- 输入参数：事件的输入参数event由应用自动生成，支持在事件逻辑中获取输入参数的值。
+
+  <img src="../assets/shuxingshitu_202410111647_6.png" class="imgStyle" style="width:200px" />
+
+  - checked：Boolean类型，当前选中或取消节点的选中状态。
+  - oldChecked：Boolean类型，更改选择前节点的选中状态。
+  - node：Object类型，当前选中或取消节点的对象。
+  - values：List类型，V由树形视图的“值字段“属性或的树形视图节点“值”属性的数据类型决定。当前选中节点的值的列表。
+  - 其他说明：触发事件的前提条件是开启树形视图的“可多选”属性。
+
+#### 加载前 / 加载后
+
+- 事件概述：
+
+    - 加载前：组件数据源绑定逻辑调用前触发该事件中的逻辑。
+    - 加载后：组件数据源绑定逻辑调用后触发该事件中的逻辑。
+- 其他说明：触发事件的前提条件是选择器的数据源使用调用逻辑。
+
+### 树形视图节点
+
+| 事件名       | 描述                      |
+| :-------- | :---------------------- |
+| [选择前](#选择前)   | 对应树形视图节点选择前触发该事件中的逻辑    |
+| [展开折叠前](#展开折叠前--展开折叠后) | 对应树形视图节点展开或折叠前触发该事件中的逻辑 |
+| [展开折叠后](#展开折叠前--展开折叠后) | 对应树形视图节点展开或折叠后触发该事件中的逻辑 |
+| [选中后](#选中后)   | 对应树形视图节点选中后触发该事件中的逻辑    |
+
+#### 选择前
+
+- 事件概述：对应树形视图节点选择前触发该事件中的逻辑。
+- 输入参数：事件的输入参数event由应用自动生成，支持在事件逻辑中获取输入参数的值。
+
+  <img src="../assets/shuxingshitu_202410111647_3.png" class="imgStyle" style="width:200px" />
+
+  - value：当前树形视图节点的值。
+  - oldValue：（空）
+  - node：（空）
+  - oldNode：（空）
+
+#### 展开折叠前 / 展开折叠后
+
+- 事件概述：
+
+    - 展开折叠前：对应树形视图节点展开或折叠前触发该事件中的逻辑。
+    - 展开折叠后：对应树形视图节点展开或折叠后触发该事件中的逻辑。
+- 输入参数：事件的输入参数event由应用自动生成，支持在事件逻辑中获取输入参数的值。
+
+  <img src="../assets/shuxingshitu_202410111647_5.png" class="imgStyle" style="width:200px" />
+
+  - expanded：Boolean类型，当前节点的展开状态。
+  - node：（空）
+
+#### 选中后
+
+- 事件概述：对应树形视图节点选中后触发该事件中的逻辑。
+- 输入参数：事件的输入参数event由应用自动生成，支持在事件逻辑中获取输入参数的值。
+
+  <img src="../assets/shuxingshitu_202410111647_9.png" class="imgStyle" style="width:200px" />
+
+  - checked：Boolean类型，当前选中节点的选中状态。
+  - oldChecked：Boolean类型，更改选择前节点的选中状态。
+  - node：（空）
+  - 其他说明：触发事件的前提条件是开启树形视图的“可多选”属性。
+
+
+## 可访问属性
+
+在编写表达式或使用前端逻辑时，可以通过“变量或常量“使用树形视图组件的[可访问属性](../../19.组件可访问属性.md)，可访问属性有：
+
+<img src="../assets/shuxingshitu_202410111647_10.png" class="imgStyle" style="width:300px" />
+
+**树形视图**
+
+- data（数据）：List类型，树形视图内容的数据集合，来源于树形视图的数据源。支持获取。
+
+
+
+- value（选中值）：数据类型由树形视图“值字段“属性的数据类型或树形视图节点的“值”属性决定，树形视图选中节点的值，值与“选中值”属性对齐。支持获取和赋值。
+- disabled（禁用）：Boolean类型，树形视图是否禁用，值与“禁用”属性对齐。支持获取和赋值。
+- readonly（只读）：Boolean类型，树形视图是否只读，值与“只读”属性对齐。支持获取和赋值。
+- \_if（显示条件）：Boolean类型，树形视图是否显示，值与“显示条件”属性对齐。支持获取和赋值。
+
+**树形视图节点**
+
+- \_if（显示条件）：Boolean类型，树形视图节点是否显示，值与“显示条件”属性对齐。支持获取和赋值。
+
+## 组件逻辑
+
+页面添加树形视图组件后，支持调用树形视图的内置逻辑，内置逻辑有：
+
+| 逻辑名           | 描述               |
+| :------------ | :--------------- |
+| [toggleAll](#toggleall) | 切换所有树形视图节点的展开状态。 |
+| [reload](#reload)    | 清除缓存，重新加载数据。     |
+
+<img src="../assets/shuxingshitu_202410111647_11.png" class="imgStyle" style="width:400px" />
+
+### toggleAll
+
+- 逻辑概述：切换所有树形视图节点的展开状态。若为展开状态，则切换为折叠；若为折叠状态，则切换为展开。
+- 输入参数：当树形视图原本是展开状态时，传入false后树形视图会折叠，传入true则不操作；当树形视图原本是折叠状态时，传入true后树形视图会展开，传入false则不操作。
+
+    - expanded：Boolean类型选填参数。
+
+### reload
+
+- 逻辑概述：清除缓存，重新加载数据。
+- 其他说明：
+  - 当树形视图的数据源添加了监听变量，被监听的变量改变时将自动触发树形视图的reload。详细说明请参考[组件通用属性说明](../../17.组件通用属性说明.md)-监听变量。
+  - 当树形视图的数据源为经过处理的动态数据，即非直接绑定变量，例如在数据源中使用内置函数处理变量或逻辑，初始化树形视图和更新动态数据后需要调用组件 reload 重新加载树形视图。相关问题详情请参考[动态数据源获取不到数据](../../../../93.版本更新说明/001.版本兼容性问题说明.md)。
+
+## 插槽
+
+树形视图组件中包含插槽，支持拖拽放置其他组件：
+
+- 树形视图在绑定数据源后，内容区域包含插槽。插槽中的组件支持根据树形视图的数据源来配置信息并动态加载。常见用法如：指示树形视图节点的内容。
+
+  <img src="../assets/shuxingshitu_202410111647_12.png" class="imgStyle" style="" />
+
+  <div class="highlight">
+
+  当内容区域的插槽中不包含任何组件（包括布局组件）时，制品应用中显示的节点会根据“选项文本”属性动态加载文本，其效果等同于拖入文本组件并为文本组件绑定current变量下对应文本字段的值。
+
+  <img src="../assets/shuxingshitu_202410111647_13.png" class="imgStyle" style="" />
+
+  </div>
+
+
+
+- 树形视图节点包含插槽。常见用法如：指示当前选项的内容。
+
+  > 插槽内无组件时，根据属性视图节点的“文本”属性自动生成文本。
+
+  <img src="../assets/shuxingshitu_202410111647_14.png" class="imgStyle" style="" />
+
+## 样式
+
+> 组件通用样式请参见[组件通用样式说明](../../18.组件通用样式说明.md)。
+
+### 主题样式
+
+- 树形列表节点的背景色，如#223325。默认值white
+- 树形列表可拖拽节点的背景色，如#223325。默认值#e5e5e5
+- 树形列表可拖拽节点的字体颜色，如#223325。默认值#999
+- 树形列表子节点的背景色（选中状态），如#223325。默认值rgba(237, 243, 255, 1)
+- 树形列表可拖拽子节点的背景色，如#223325。默认值rgba(237, 237, 237, 0.5)
+- 树形列表可拖拽子节点的字体颜色，如#223325。默认值#999
+- 树形列表子节点的背景色（选中状态），如#223325。默认值#DBE7FF
+- 树形列表可拖拽节点的前缀箭头颜色，如#223325。默认值#aaa
+- 树形列表节点的展开箭头的容器大小，如1px。默认值30px
+- 树形列表节点的文本内边距，如1px。默认值4px 0
+- 树形列表节点的背景色（hover状态），如#223325。默认值#ededed
+- 树形列表节点的背景色（选中状态），如#223325。默认值#5c98ff
+- 树形列表节点的文本颜色（选中状态），如#223325。默认值white
+- 树形列表节点的展开箭头颜色（选中状态），如#223325。默认值white
+- 树形列表节点的背景色（选中且禁用），如#223325。默认值#ededed
+- 展开图标大小，默认值16px
+
+## 使用说明
+
+树形视图支持动态数据和静态数据同时渲染，绑定数据源生成的节点在静态添加的节点前面显示。
+
+<img src="../assets/shuxingshitu_202410111647_15.png" class="imgStyle" style="" />
+
+## 示例
+
+### 需求场景
+
+已有包含名称和父级id属性的实体NewDepartment，希望通过绑定动态数据源的方法将实体中的数据以树形结构展示在树形视图中。
+
+### 操作步骤
+
+1. 新建服务端逻辑，在逻辑中查询实体NewDepartment中的所有数据。
+
+   <img src="../assets/sxstPC10.png" style="border:1px solid #ccc;" />
+2. 将树形视图的数据源绑定为该服务端逻辑。
+
+   <img src="../assets/sxstPC12.png" style="border:1px solid #ccc;" />
+3. 将树形视图中的数据属性设为对应的实体属性，其中“值字段”和“父级值字段”用于建立层级关系。
+   
+   <img src="../assets/sxst_PC14.png" style="border:1px solid #ccc;" />
+
+### 效果演示
+
+<img src="../assets/sxstPC16.gif" style="border:1px solid #ccc;" />
+
+### 扩展：树形节点默认展开状态
+
+若要求树形视图的节点默认展开，需要数据源返回的数据结构包含Boolean类型属性 expanded ，节点对应的 expanded 属性为 true 即表示默认展开，反之表示默认收起。
+
+以上述示例为例，在服务端逻辑中，将查询的实体数据转化为包含 expanded 属性的数据结构并为 expanded 属性赋值后再输出。数据结构在数据IDE中定义。
+
+<img src="../assets/shuxingshitu_202410231506_3.png" class="imgStyle" style="" />
+
+<img src="../assets/shuxingshitu_202410231506_4.png" class="imgStyle" style="" />
+
+具体使用说明请参考[如何实现树形节点默认展开](../../../../80.常见场景案例/40.组件场景/20.表格场景/098.如何实现树形节点默认展开.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);">2025年02月11日</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/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/70./351/200/211/346/213/251/345/231/250/190./347/251/277/346/242/255/346/241/206.md

@@ -0,0 +1,259 @@
+# 穿梭框
+
+由源列表和目标列表组成的双栏穿梭选择框。穿梭框通常用于从一个列表选择某些项并将其转移到另一个列表中。
+
+例如：选择商品加入到已选商品列表。
+
+<img src="../assets/chuansuokuang_202409021705_1.png" class="imgStyle" style="" />
+
+<div class="highlight">
+
+在本章节，你将学习：
+
+1.  穿梭框的各类属性、事件、可访问属性等基础信息。
+2.  如何使用穿梭框的各类属性，具体实现效果包括但不限于
+
+    * 如何使用“原始数据”属性，以设置穿梭框左列表中可转移的数据内容；
+    * 如何使用“筛选”属性，以设置穿梭框列表支持搜索；
+
+3.  如何使用穿梭框的各类组件逻辑，具体实现效果包括但不限于
+
+    * 使用组件逻辑“transfer”，以实现对指定数据的转移；
+
+4.  示例：如何使用穿梭框完成数据转移。
+
+</div>
+
+
+## 属性
+
+> 组件通用属性请参见[组件通用属性说明](../../../../20.应用开发/10.页面设计/17.组件通用属性说明.md)。
+
+##### 数据属性
+
+- 原始数据：穿梭框左列表展示的数据。数据源可绑定`List<T>`类型变量，List中T的类型可以是任意类型（包括`List<T>`、联合类型）。例如绑定为`List<Supplier>`类型变量。
+
+  <div class="highlight">
+  
+  当穿梭框绑定原始数据后，应用自动生成current变量，穿梭框会根据原始数据中包含的 List 按顺序对每一项进行循环遍历，使用current即可指代在 List 中当前正在访问或操作的对象。为列表插槽中的组件编辑表达式或添加事件，即可调用current变量：
+
+  <img src="../assets/biaoge_202412060952_1.png" class="imgStyle" style="width:200px" />
+
+  所有可绑定数据源的组件同理。
+  在穿梭框的属性中设置任意字段（如文本字段）时，同样根据字段值进行循环遍历，但不显示其 current.item 前缀。
+
+  </div>
+
+    操作步骤：
+
+    1. 点击“请选择表达式”进入编辑表达式页面，通过拖入变量获取数据源。
+
+        <img src="../assets/chuansuokuang_202409021801_3.png" class="imgStyle" style="" />
+
+    2. 根据`List<T>`中T的数据类型输入“文本字段”和“值字段”。
+  
+    <div class="highlight">
+
+    注意事项：原始数据在绑定动态数据源时，不建议绑定非变量。经过二次处理的数据无法开启“将组件输入赋值给变量”，会导致发生数据转移后原始数据无更新。
+
+    <img src="../assets/chuansuokuang_202501131055_1.png" class="imgStyle" style="" />
+
+    </div>
+
+- 目标数据：穿梭框右列表展示的数据。数据类型需要与原始数据保持一致。
+- 文本字段：设置原始数据和目标数据后，作为标识列表项展示文本的字段名。
+
+- 动态选项插槽：若开启“动态选项插槽“，穿梭框左列表的内容区域包含插槽。穿梭框在绑定“原始数据”的前提下该属性生效，左列表插槽中的组件支持根据穿梭框的“原始数据”来配置信息并动态加载；右列表不显示插槽，根据穿梭框的“目标数据”来渲染与左列表相同的样式效果。若列表中仅需要将数据源中的某一属性作为文本展示，则可以直接配置“文本字段”，无需开启“动态选项插槽”。
+
+  - 例如：向插槽中拖拽标签组件并为标签组件的“文本”属性绑定变量current.item或其属性，制品应用中即可根据“原始数据”和“目标数据”动态渲染列表中的标签。
+
+    <img src="../assets/chuansuokuang_202412031106_1.png" class="imgStyle" style="" />
+
+  - 参考制品效果：
+
+    <img src="../assets/chuansuokuang_202412031106_2.gif" class="imgStyle" style="" />
+
+- 值字段：设置原始数据和目标数据后，作为标识列表项值的字段名。
+- 筛选：是否开启筛选并展示可筛选的输入框。开启筛选功能后，列表会根据文本字段模糊筛选。默认关闭。
+
+  <img src="../assets/chuansuokuang_202409021705_2.png" class="imgStyle" style="" />
+
+- 大小写敏感：表示筛选时是否大小写敏感。开启"筛选"属性时生效。
+- 可清除筛选：搜索框是否有清除按钮，默认关闭。开启"筛选"属性时生效。
+
+
+### 主要属性
+
+- 显示头部：开启后会显示头部全选栏。默认开启。
+- 左侧列表标题：左侧头部全选框右侧展示的文字。默认为“左列表”。开启“显示头部”时有效。
+- 右侧列表标题：右侧头部全选框右侧展示的文字。默认为“右列表”。开启“显示头部”时有效。
+- 占位符：筛选输入框无内容时的提示信息，支持自定义编辑，默认为“请输入”。开启"筛选"属性时生效。
+
+### 状态属性
+
+- 只读：正常显示，但禁止选择和输入。
+- 禁用：置灰显示，且禁止任何交互，包括点击、选择、输入等。
+
+- 预览：内容区域展示预览状态，不支持编辑。通常用作模板样式预览。
+
+## 事件
+
+| 事件名       | 描述                    |
+| :-------- | :-------------------- |
+| [数据转移时](#数据转移时) | 选项值转移时触发该事件中的逻辑       |
+| [改变后](#改变后)   | 原始数据或目标数据改变后触发该事件中的逻辑 |
+
+### 数据转移时
+
+- 事件概述：选项值转移时触发该事件中的逻辑。
+- 输入参数：事件的输入参数event由应用自动生成，支持在事件逻辑中获取输入参数的值。
+
+  <img src="../assets/chuansuokuang_202409021705_3.png" class="imgStyle" style="width:200px;" />
+
+  - source：`List<Object>`类型，转移后左列表中的对象的列表。
+  - target：`List<Object>`类型，转移后右列表中的对象的列表。
+  - transfer：`List<Object>`类型，转移数据的对象的列表。
+  - transferValues：`List<T>`类型，T由穿梭框“值字段“属性的数据类型决定。转移数据的值的列表。
+
+
+
+### 改变后
+
+- 事件概述：原始数据或目标数据改变后触发该事件中的逻辑。
+- 输入参数：事件的输入参数event由应用自动生成，支持在事件逻辑中获取输入参数的值。
+
+  <img src="../assets/chuansuokuang_202409021705_3.png" class="imgStyle" style="width:200px;" />
+
+  - source：`List<Object>`类型，转移后左列表中的对象的列表。
+  - target：`List<Object>`类型，转移后右列表中的对象的列表。
+  - transfer：`List<Object>`类型，转移数据的对象的列表。
+  - transferValues：`List<T>`类型，T由穿梭框“值字段“属性的数据类型决定。转移数据的值的列表。
+
+## 可访问属性
+
+在编写表达式或使用前端逻辑时，可以通过“变量或常量“使用穿梭框组件的[可访问属性](../../19.组件可访问属性.md)，可访问属性有：
+
+<img src="../assets/chuansuokuang_202409021738_1.png" class="imgStyle" style="width:300px;" />
+
+- disabled（禁用）：Boolean类型，穿梭框是否禁用，值与“禁用”属性对齐。支持获取和赋值。
+- readonly（只读）：Boolean类型，穿梭框是否只读，值与“只读”属性对齐。支持获取和赋值。
+- preview（预览）：Boolean类型，穿梭框是否为预览态，值与“预览”属性对齐。支持获取和赋值。
+- \_if（显示条件）：Boolean类型，穿梭框是否显示，值与“显示条件”属性对齐。支持获取和赋值。
+
+
+## 组件逻辑
+
+页面添加穿梭框组件后，支持调用穿梭框的内置逻辑，内置逻辑有：
+
+| 逻辑名          | 描述       |
+| :----------- | :------- |
+| [forward](#forward)  | 从左向右转移数据 |
+| [reverse](#reverse)  | 从右向左转移数据 |
+| [transfer](#transfer) | 转移指定项的数据 |
+
+<img src="../assets/chuansuokuang_202409021705_5.png" class="imgStyle" style="width:400px;" />
+
+### forward
+
+- 逻辑概述：从左向右转移数据。
+- 输入参数：
+
+  - values：`List<String>`类型，指定转移选项的值的列表。如果不填，则为按左列表框选中项值的列表。
+
+### reverse
+
+- 逻辑概述：从右向左转移数据。
+- 输入参数：
+
+  - values：`List<String>`类型，指定转移选项的值的列表。如果不填，则为按右列表框选中项值的列表。
+
+### transfer
+
+- 逻辑概述：转移指定项的数据。
+- 输入参数：
+
+  - direction：String类型，转移的方向。支持自定义编辑，默认为forward。
+  - values：`List<String>`类型，指定转移选项的值的列表。
+
+## 样式
+
+> 组件通用样式请参见[组件通用样式说明](../../18.组件通用样式说明.md)。
+
+### 主题样式
+
+- 穿梭框高度：如302px。
+- 穿梭框宽度名：如280px。
+- 穿梭按钮间隔：如8px。
+
+## 插槽
+
+若穿梭框开启“动态选项插槽”属性，选择器在绑定原始数据后，下拉框的内容区域包含插槽。插槽中的组件支持根据穿梭框的原始数据和目标数据来配置信息并动态加载。常见用法如：指示穿梭框列表的内容。
+
+<img src="../assets/chuansuokuang_202412031106_3.png" class="imgStyle" style="" />
+
+当未开启“动态选项插槽”属性，或列表内容区域的插槽中不包含任何组件（包括布局组件）时，制品应用中显示的选项会根据文本字段动态加载文本，其效果等同于向插槽中拖入文本组件并为文本组件绑定current变量下对应文本字段的值。
+
+<img src="../assets/chuansuokuang_202412031106_4.png" class="imgStyle" style="" />
+
+
+## 示例
+
+### 需求场景
+
+已有商品实体ProductInfo，希望通过穿梭框完成商品选择。实体ProductInfo包含以下属性：
+
+* id:区分商品的唯一值。
+* name:商品的名称。
+
+数据参考如下：
+
+<img src="../assets/csk_0606_1657_2.png" style="border: 1px solid #ccc;" />
+
+### 数据准备
+
+创建服务端逻辑loadProduct，在逻辑中使用数据查询组件查询商品实体ProductInfo的数据，并赋值给输出参数。
+
+<img src="../assets/csk_0606_1657_3.png" style="border: 1px solid #ccc;" />
+
+### 操作步骤
+
+1.  创建两个List数据类型的局部变量leftList和rightList。
+
+    <img src="../assets/csk_0606_1657_4.png" style="border: 1px solid #ccc;" />
+
+2.  在页面的“进入时”事件中，使用调用逻辑组件获取服务端逻辑loadProduct的返回值值，并使用内置函数Transform转化为List格式后赋值给局部变量leftList。
+
+    <img src="../assets/csk_0606_1657_5.png" style="border: 1px solid #ccc;" />
+
+3.  将原始数据绑定为存储商品数据的局部变量leftList，目标数据绑定为空的局部变量rightList。商品列表展示商品的名称，即文本字段绑定name属性。值字段用作列表的唯一标识建议使用id属性。
+
+    <img src="../assets/csk_0606_1657_6.png" style="border: 1px solid #ccc;" />
+
+4.  发布预览效果。
+
+    <img src="../assets/csk_0606_1657_7.png" style="border: 1px solid #ccc;" />
+
+### 效果演示
+
+完成转移后，被转移的数据项会从原列表中移除，加入到转移后的列表。
+
+<img src="../assets/cskPC8.gif" style="border:1px solid #ccc;" />
+
+<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月11日</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>