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/60./350/241/250/345/215/225/010./350/241/250/345/215/225.md

@@ -0,0 +1,487 @@
+# 表单
+
+具有数据收集、校验和提交等功能，通常包含各种有输入值或选中值的组件，例如单行输入、选择器、单选组等。包括基础表单，行内表单，折叠分组三种基础用法。常用于账号注册，个人信息修改等场景。
+
+<img src="../assets/bd_202407091657_1.png" class="imgStyle" style="" />
+
+<div class="highlight">
+
+在本章节，你将学习：
+
+1.  表单的各类属性、事件、可访问属性等基础信息。
+2.  使用“表单分组”，以实现表单项分类和分组折叠。
+3.  如何使用表单的各类属性，具体实现效果包括但不限于
+
+    - 使用表单的“列数”属性搭配表单项的“占据数”属性，以自定义表单项的排列布局；
+    - 使用表单项的“释义提示”、“辅助文字”等属性，以添加表单项注释；
+    - 使用表单项的“验证规则”属性，以实现表单输入校验；
+
+4.  如何使用表单的各类组件逻辑，具体实现效果包括但不限于
+
+    - 使用表单的组件逻辑“validate”，以实现表单的整体校验并返回验证结果；
+    - 使用表单项的组件逻辑“validate”，以实现单个表单项的校验并返回验证结果；
+
+5.  示例：在表单验证通过后创建实体。
+在表单组件的基础上，借助表单设计器还能够实现零代码开发。具体请参考：[零代码开发介绍](../../../25.零代码开发/10.零代码开发介绍.md)。
+
+</div>
+
+## 属性
+
+> 组件通用属性请参见[组件通用属性说明](../../17.组件通用属性说明.md)。
+
+### 表单
+
+表单支持手动添加表单分组和表单项。
+
+- 手动添加表单分组：添加的表单分组携带一个表单项，表单项具备插槽支持拖拽放置其他组件。
+
+  <img src="../assets/bd_202407091657_2.gif" class="imgStyle" style="" />
+
+- 手动添加表单项：在表单最后添加一个表单项，表单项具备插槽支持拖拽放置其他组件。
+
+  <img src="../assets/bd_202407091657_3.gif" class="imgStyle" style="" />
+
+#### 主要属性
+
+- 表单布局：更改表单的布局方式，包括行内展示，块级展示，栅格展示。
+
+
+
+  - 行内展示：表单项在同一行展示，直至表单项总宽度超出父级元素宽度时换行。
+
+    <img src="../assets/bd_202407091657_4.png" class="imgStyle" style="" />
+
+  - 块级展示：表单项的宽度会充满父元素占一整行。
+
+    <img src="../assets/bd_202407091657_5.png" class="imgStyle" style="" />
+
+  - 栅格展示：将表单按列数划分，每列均分父级元素总宽度，搭配“列数”属性使用使表单项按照列数依次排列，当同一行的表单项的“占据数”总和超出列数时表单项换行。例如下图所示“表单布局”为栅格展示，“列数”为2，每个表单项“占据数”为1。
+
+    <img src="../assets/bd_202407091657_6.png" class="imgStyle" style="" />
+
+- 列数：整个表单的划分列数，仅在表单布局为“栅格展示”可进行设置。
+- 标签布局：设置表单项的标签布局方式，包括行内展示，块级展示。
+
+  - 行内展示：表单项的两个插槽中的内容在同一行展示。
+
+    <img src="../assets/bd_202407091657_7.png" class="imgStyle" style="" />
+
+  - 块级展示：表单项的两个插槽中的内容分行展示。
+
+    <img src="../assets/bd_202407091657_8.png" class="imgStyle" style="" />
+
+- 标签过长省略：当插槽中文字长度超出插槽宽度时，若开启该属性，文字过长部分省略显示；若关闭该属性，文字超出部分自动换行。默认关闭。
+
+  <img src="../assets/bd_202407091657_9.png" class="imgStyle" style="" />
+
+- 冒号：在表单项的两个插槽之间展示冒号。
+
+  <img src="../assets/bd_202407091657_10.png" class="imgStyle" style="" />
+
+#### 交互属性
+
+- 可折叠：设置表单中的表单分组是否支持折叠。拖拽生成表单时选择“折叠分组”时该属性默认开启，其他情况下该属性默认关闭。
+
+  <img src="../assets/bd_202407091657_11.png" class="imgStyle" style="" />
+
+- 手风琴模式：设置是否在展开一个表单分组时，折叠其他表单分组，默认关闭。开启“可折叠”时生效。
+- 展开触发方式：设置展开/折叠的触发方式，包括整行点击均可触发和仅点击小箭头时触发。开启“可折叠”时生效。
+
+  - 整行点击均可触发：点击表单分组的任意位置均可触发。
+
+    <img src="../assets/bd_202407091657_12.png" class="imgStyle" style="" />
+
+  - 仅点击小箭头时触发：仅在点击小箭头图标时触发。
+
+    <img src="../assets/bd_202407091657_13.png" class="imgStyle" style="" />
+
+#### 状态属性
+
+- 预览：内容区域展示预览状态，不支持编辑。通常用作模板样式预览。
+
+  <img src="../assets/bd_202407091657_14.png" class="imgStyle" style="" />
+
+#### 样式属性
+
+- 行间隔：设置表单项间隔的大小，包括无，小，正常，大四个级别。
+- 标签宽度：设置表单中所有表单项标签的宽度。支持迷你、小、正常、大四个级别。
+
+  <img src="../assets/biaodan_202412091456_1.png" class="imgStyle" style="" />
+
+
+### 表单分组
+
+表单分组支持手动添加表单项。
+
+<img src="../assets/bd_202407091657_15.gif" class="imgStyle" style="" />
+
+#### 主要属性
+
+- 标题：表单分组显示的标题。标题栏的插槽中不包含组件时生效，默认包含文本组件，使用标题属性时请删除文本组件。
+
+  <img src="../assets/bd_202407091657_16.png" class="imgStyle" style="" />
+
+- 列数：当前表单分组的划分列数，使表单分组中的表单项均分表单分组的宽度并按照列数依次排列，当同一行的表单项的“占据数”总和超出列数时表单项换行。默认为1。例如“列数”为3，每个表单项“占据数”为1，则每行至多展示3个表单项。
+
+  <img src="../assets/bd_202407091657_17.png" class="imgStyle" style="" />
+
+- 标签布局：设置标签布局方式。包括行内展示，块级展示。优先级高于“表单”组件的“标签局部”属性。
+- 标签过长省略：当插槽中文字长度超出插槽宽度时，若开启该属性，文字过长部分省略显示；若关闭该属性，文字超出部分自动换行。优先级高于“表单”组件的“标签过长省略”属性。
+
+#### 交互属性
+
+- 可折叠：设置当前表单分组是否支持折叠。开启时优先级高于“表单”组件的“可折叠”属性，默认关闭。
+
+<img src="../assets/bd_202407091657_18.png" class="imgStyle" style="" />
+
+#### 状态属性
+
+- 展开状态：设置分组默认展开/折叠状态，为Boolean类型。默认开启编辑表达式。关闭编辑表达式，可直接手动选择当前折叠分组的状态；开启编辑表达式绑定为Boolean类型内容，可动态实现的展示效果。仅在开启“可折叠”属性时有效，默认关闭。
+
+  - 关闭编辑表达式：关闭编辑表达式时直接展示展开状态。
+
+    <img src="../assets/biaodan_202411111730_1.png" class="imgStyle" style="" />
+
+  - 开启编辑表达式：编辑表达式时若直接绑定Boolean类型变量，支持开启“是否将组件输入赋值给变量“，开启时会根据表单分组展开状态改变变量的值，也会根据变量的值展示表单分组的展开状态。编辑表达式时若包含其他表达式，则仅支持根据表达式展示当前表单分组的展开状态。
+
+    <img src="../assets/biaodan_202411111730_2.png" class="imgStyle" style="" />
+
+
+- 禁用：置灰显示，且禁止任何交互，包括焦点、点击、选择等。默认关闭。
+
+### 表单项
+
+#### 主要属性
+
+- 占据数：Integer类型，设置当前表单项占据的列数。当表单项直接放置在表单中，表单的“表单布局”为栅格展示时有效；当表单项放置在表单分组中，默认有效。例如表单布局为“栅格布局”，设置表单的“列数”属性为3，当前表单项“占据数”为3，则该表单项独占一行。
+
+  <img src="../assets/bd_202407091657_21.png" class="imgStyle" style="" />
+
+- 标签布局：设置标签布局方式。包括行内展示，块级展示。优先级高于“表单”组件的“标签局部”属性。
+
+
+
+- 标签过长省略：当插槽中文字长度超出插槽宽度时，若开启该属性，文字过长部分省略显示；若关闭该属性，文字超出部分自动换行。默认文字超出时会换行。优先级高于“表单”组件的“标签过长省略”属性。
+- 必填标记：是否展示必填标记。仅显示样式，不作必填验证，如果需要验证该表单项是否必填，需要在“验证规则”属性中添加必填的验证规则。
+
+  <img src="../assets/bd_202407091657_22.png" class="imgStyle" style="" />
+
+- 必填标记位置：支持配置必填标记显示在文本左侧或文本右侧，开启“必填标记”时生效。
+- 释义提示：当表单项插槽中拖拽支持输入值的组件时，例如单行输入、日期选择等，该组件聚焦时展示在表单项右侧的提示信息。
+
+  <img src="../assets/bd_202407091657_23.png" class="imgStyle" style="" />
+
+- 辅助文本：展示在表单项右侧插槽上方的辅助文字。
+
+  <img src="../assets/bd_202407091657_24.png" class="imgStyle" style="" />
+
+- 标签纵轴对齐：表单项插槽中组件对表单项整体高度的的对齐方式，包括顶对齐，居中对齐，尾对齐，默认居中对齐。
+
+  - 顶对齐
+
+    <img src="../assets/bd_202407091657_25.png" class="imgStyle" style="" />
+
+  - 居中对齐
+
+    <img src="../assets/bd_202407091657_26.png" class="imgStyle" style="" />
+
+  - 尾对齐
+
+    <img src="../assets/bd_202407091657_27.png" class="imgStyle" style="" />
+
+- 验证规则：支持配置表单项的验证规则，用于验证表单项插槽内组件的值是否符合要求。操作步骤如下：
+
+  <img src="../assets/bd_202407091657_28.png" class="imgStyle" style="" />
+
+  <img src="../assets/bd_202407091657_29.png" class="imgStyle" style="" />
+
+  <div class="highlight">
+
+  - 系统内置必填、字符、手机号、邮箱等常用验证规则，用户也可以通过正则表达式来自定义规则。
+    - 在编辑实体时，若字段设置为必填、或有最大长度、最小长度，拖拽实体生成表单后会自动生成相关的验证规则。
+
+      <img src="../assets/bd_202407091657_30.png" class="imgStyle" style="" />
+
+    - 验证不通过时，支持自定义提示消息内容。
+
+      <img src="../assets/bd_202407091657_31.png" class="imgStyle" style="" />
+    
+
+  具体验证规则的配置请参考[验证规则](../../35.验证规则.md)。
+
+  </div>
+  
+
+- 忽略验证：设置是否忽略当前表单项的前端验证规则，即输入或选择内容时，不对该内容进行验证。
+  
+  <div class="highlight">
+  忽略当前表单项的验证不会影响服务端逻辑验证。若开启服务端逻辑验证，当服务端逻辑的调用参数在表单中进行了验证，应用支持在服务端逻辑中自动生成相应的验证规则，且该验证规则不支持删除。
+
+  例如已有实体ProductInfo，搭建如下表单用于创建实体实例，并为表单项添加验证规则。
+
+  <img src="../assets/bd_202407091657_32.png" class="imgStyle" style="" />
+
+  在创建实体时，调用的实体创建逻辑中会根据输入参数的验证规则自动生成服务端验证规则。
+
+  <img src="../assets/bd_202407091657_33.gif" class="imgStyle" style="" />
+
+  如有需要，可以通过以下两种方法忽略服务端验证。
+
+  - 方法一：可以在表单项的“验证规则”界面中关闭验证规则的”同时开启服务端验证“，即当前验证规则自动生成的服务端验证规则不生效。
+
+    <img src="../assets/bd_202407091657_34.png" class="imgStyle" style="" />
+
+  - 方法二：在IDE界面右上角的“更多->系统偏好设置->服务端逻辑验证规则“中选择”关闭“，即不进行服务端逻辑验证。
+
+    <img src="../assets/bd_202407091657_35.png" class="imgStyle" style="width:350px;" />
+  </div>
+
+#### 样式属性
+- 表单项标签宽度：当前表单项标签宽度。支持迷你、小、正常、大四个级别。修改设置后，生效的优先级高于表单的“标签宽度”属性。
+  <img src="../assets/biaodan_202412091456_1.png" class="imgStyle" style="" />
+
+## 事件
+
+### 表单事件
+
+| 事件名 | 描述                           |
+| :-- | :--------------------------- |
+| 验证后 | 表单中任意表单项验证后或表单整体校验后触发该事件中的逻辑 |
+
+#### 验证后
+
+- 事件概述：表单中任意表单项验证后或表单整体校验后触发该事件逻辑。
+- 输入参数：事件的输入参数event由应用自动生成，支持在事件逻辑中获取输入参数的值。
+
+  <img src="../assets/biaodan_202408161719_1.png" class="imgStyle" style="width:200px;" />
+
+  - rawValue：String类型，用户输入的原始值。
+  - value：String类型，验证修复的值。
+  - trigger：String类型，验证的触发方式。
+  - muted：String类型，验证后是否无提示。
+  - valid：Boolean类型，验证是否通过。
+  - touched：Boolean类型，用户是否触碰。
+  - dirty：Boolean类型，用户是否修改值。
+  - firstError：String类型，第一个错误的提示信息。
+
+### 表单分组事件
+
+| 事件名   | 描述                  |
+| :---- | :------------------ |
+| 展开折叠前 | 表单分组展开或折叠前触发该事件中的逻辑 |
+| 展开折叠后 | 表单分组展开或折叠后触发该事件中的逻辑 |
+
+#### 展开折叠前 / 展开折叠后
+
+- 事件概述
+
+  - 展开折叠前：表单分组展开或折叠前触发该事件中的逻辑。
+  - 展开折叠后：表单分组展开或折叠后触发该事件中的逻辑。
+- 输入参数：事件的输入参数event由应用自动生成，支持在事件逻辑中获取输入参数的值。
+
+  <img src="../assets/biaodan_202408161719_2.png" class="imgStyle" style="width:200px;" />
+
+  - expanded：Boolean类型，表单分组是否为展开状态。
+- 其他说明：触发事件的前提条件是表单或表单分组开启“可折叠“属性。
+
+### 表单项事件
+
+| 事件名 | 描述                |
+| :-- | :---------------- |
+| 验证后 | 当前表单项验证后触发该事件中的逻辑 |
+
+#### 验证后
+
+- 事件概述：当前表单项验证后触发该事件中的逻辑。
+- 输入参数：事件的输入参数event由应用自动生成，支持在事件逻辑中获取输入参数的值。
+
+  <img src="../assets/biaodan_202408161719_1.png" class="imgStyle" style="width:200px;" />
+
+  - rawValue：String类型，用户输入的原始值。
+  - value：String类型，验证修复的值。
+  - trigger：String类型，验证的触发方式。
+  - muted：String类型，验证后是否无提示。
+  - valid：Boolean类型，验证是否通过。
+  - touched：Boolean类型，用户是否触碰。
+  - dirty：Boolean类型，用户是否修改值。
+  - firstError：String类型，第一个错误的提示信息。
+
+## 可访问属性
+
+在编写表达式或使用前端逻辑时，可以通过“变量或常量“使用表单组件的可访问属性，可访问属性有：
+
+### 表单
+
+- preview（预览）：Boolean类型，表单是否为预览态，值与“预览”属性对齐。支持获取和赋值。
+- valid（验证是否有效）：Boolean类型，表单整体校验是否通过。支持获取。
+- _if（显示条件）：Boolean类型，表单是否显示，值与“显示条件”属性对齐。支持获取和赋值。
+  
+### 表单项
+
+- valid（验证是否有效）：Boolean类型，表单项校验是否通过。支持获取。
+- _if（显示条件）：Boolean类型，表单项是否显示，值与“显示条件”属性对齐。支持获取和赋值。
+
+## 组件逻辑
+
+### 表单
+
+页面添加表单组件后，支持调用表单的内置逻辑，内置逻辑有：
+
+| 逻辑名              | 描述             |
+| :--------------- | :------------- |
+| [validate](#validate)     | 触发整个表单的数据验证    |
+| [validateItem](#validateitem) | 触发表单中的某一项的数据验证 |
+
+<img src="../assets/biaodan_202408161719_4.png" class="imgStyle" style="width:400px;" />
+
+#### validate
+
+- 逻辑概述：用于触发整个表单的数据验证。
+- 输入参数：
+
+  - trigger：String类型选填参数。指定触发方式，可选submit、blur和input之一，或者它们的任意组合比如submit+blur，默认为submit。
+      - submit：表单提交触发。
+      - blur：表单内容失去焦点时触发。
+      - input：用户在表单中输入内容时触发。
+  - muted：Boolean类型选填参数。指示验证后是否无提示，默认为false。
+- 输出参数：validate逻辑返回值的数据类型为平台“页面组件”分类中的数据类型ValidateResult，此数据类型支持由平台自动推导。判断输出结果的valid属性为true时即表示验证通过。
+
+  <img src="../assets/biaodan_202411111730_3.png" class="imgStyle" style="" />
+
+
+  <img src="../assets/biaodan_202408161719_6.png" class="imgStyle" style="width:450px;" />
+
+- 其他说明：直接调用组件逻辑仅表示执行触发验证，若需要在验证通过后执行后续操作需借助逻辑验证的返回值，具体使用方法请参考下文示例。
+
+#### validateItem
+
+- 逻辑概述：用于触发表单中的某一项的数据验证。
+- 输入参数：
+
+    - name：表单项的名称。
+    - trigger：String类型选填参数。指定触发方式，可选submit、blur和input之一，或者它们的任意组合比如submit+blur，默认为submit。
+      - submit：表单提交触发。
+      - blur：表单内容失去焦点时触发。
+      - input：用户在表单中输入内容时触发。
+  - muted：Boolean类型选填参数。指示验证后是否无提示，默认为false。
+- 输出参数：validateItem逻辑返回值的数据类型为平台“页面组件”分类中的数据类型ValidateResult，此数据类型支持由平台自动推导。判断赋值结果的valid属性为true时即表示验证通过。
+
+  <img src="../assets/biaodan_202411111730_4.png" class="imgStyle" style="" />
+
+
+### 表单项
+
+表单组件添加表单项后，支持调用表单项的内置逻辑，内置逻辑有：
+
+| 逻辑名          | 描述           |
+| :----------- | :----------- |
+| [validate](#validate-1) | 触发对应表单项的数据验证 |
+
+<img src="../assets/biaodan_202408161719_8.png" class="imgStyle" style="width:400px;" />
+
+#### validate
+
+- 逻辑概述：用于触发对应表单项的数据验证。
+- 输入参数：
+
+  - trigger：String类型选填参数。指定触发方式，可选submit、blur和input之一，或者它们的任意组合比如submit+blur，默认为submit。
+  - submit：表单提交触发。
+  - blur：表单内容失去焦点时触发。
+  - input：用户在表单中输入内容时触发。
+  - muted：Boolean类型选填参数。指示验证后是否无提示，默认为false。
+
+- 输出参数：validate逻辑返回值的数据类型为平台“页面组件”分类中的数据类型ValidateResult，此数据类型支持由平台自动推导。判断输出结果的valid属性为true时即表示验证通过。
+
+  <img src="../assets/biaodan_202411111730_5.png" class="imgStyle" style="" />
+
+
+## 插槽
+
+表单组件中包含插槽，支持拖拽放置其他组件：
+
+- 表单项中包含两个插槽。常见用法如：左侧插槽用于指示当前表单项的标题信息，右侧插槽用于接收各种输入或选择类型的组件、方便捕获用户需要的验证的数据。
+
+  <img src="../assets/biaodan_202408161719_10.png" class="imgStyle" style="" />
+
+- 表单分组中包含两个插槽。常见用法如：左侧插槽用于指示当前表单分组的标题信息，右侧插槽用于补充额外说明。
+
+  左侧插槽内无组件时，根据表单分组的“标题”属性自动生成文本。
+
+  <img src="../assets/biaodan_202408161719_11.png" class="imgStyle" style="" />
+
+## 样式
+
+> 组件通用样式请参见[组件通用样式说明](../../18.组件通用样式说明.md)。
+
+### 主题样式
+
+label
+
+- 表单项 label字体颜色：如 #223325，默认#666666。
+- 表单项 label文本右边距：如 1px，默认20px。
+- 表单项 label宽度：如 1px，默认76px。
+
+组件支持在**样式**->**主题样式**中调整当前单个组件的主题样式；也支持在**自定义主题样式**->**组件主题配置**中调整当前类型组件在应用中的所有样式，并支持直接预览效果。
+
+> 推荐前往组件主题配置中查看各主题样式的效果，相关文档请参考[自定义主题样式](../../../60.可视化开发界面/70.更多设置/30.自定义主题样式.md)。
+
+<img src="../assets/biaodan_202411111730_6.png" class="imgStyle" style="" />
+
+
+## 使用说明
+
+在表单项插槽中拖入其他组件后，验证规则能够判断拖入组件的值是否符合要求。不建议向表单项中拖入一个以上需要判断值的组件，如有需要请新增表单项。
+
+### 示例
+
+#### 需求场景
+
+已有实体ProductInfo，希望在表单验证通过后创建实体。
+
+#### 页面准备
+
+搭建如下图表单。
+
+<img src="../assets/bd_202407091657_44.png" class="imgStyle" style="" />
+
+#### 操作步骤
+
+1.  创建实体ProductInfo类型变量，将变量的属性分别绑定为表单项中各组件的值。
+
+    <img src="../assets/bd_202407091657_45.png" class="imgStyle" style="" />
+
+1.  为表单项添加验证规则。例如商品名称必填，商品价格必填且不能小于0，下图为商品价格对应表单项的验证规则：
+
+    <img src="../assets/bd_202407091657_46.png" class="imgStyle" style="" />
+ 
+    > 验证规则可以多个叠加使用，按照执行顺序从上至下添加。
+
+1.  在点击按钮事件中手动判断表单整体的验证结果，在判断验证通过时调用实体create逻辑创建实体。
+
+    <img src="../assets/bd_202407091657_47.png" class="imgStyle" style="" />
+
+1.  发布预览效果。
+
+#### 效果演示
+
+<img src="../assets/bd_202407091657_48.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年09月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>