@cloudbase/weda-ui 2.0.11 → 2.0.12

package/src/docs/common/tableView.tsx

@@ -48,11 +48,11 @@ function getCompsMeta(key, type, origin) {
         return compsMeta;
       case 'sourceCode':
         if (type && type == 'event') {
-          compsMeta = components[key]['events']||{};
+          compsMeta = components[key]['events'] || {};
         } else if (type && (type == 'attribute' || type == 'slot')) {
-          compsMeta = components[key]['data']['properties']||{};
+          compsMeta = components[key]['data']['properties'] || {};
         } else if (type && type == 'description') {
-          compsMeta = components[key]['meta']||{};
+          compsMeta = components[key]['meta'] || {};
         }
         return compsMeta;
     }
@@ -259,12 +259,22 @@ export default function TableLayoutView({ componentKey, type, origin }) {
       )}
       {type == 'description' && tableView.length > 0 && (
         <>
-        <h2>
-        <a aria-hidden="true"  className="anchor enhancedAnchor_node_modules-@docusaurus-theme-classic-lib-next-theme-Heading-styles-module" id="适用场景"></a>
-        适用场景
-        <a className="hash-link" href="#适用场景" title="标题的直接链接">#</a>
+          <h2>
+            <a
+              aria-hidden="true"
+              className="anchor enhancedAnchor_node_modules-@docusaurus-theme-classic-lib-next-theme-Heading-styles-module"
+              id="适用场景"
+            ></a>
+            适用场景
+            <a className="hash-link" href="#适用场景" title="标题的直接链接">
+              #
+            </a>
           </h2>
-        <p>{tableView[0]?.description?tableView[0]?.description:tableView[0]?.desc}</p>
+          <p>
+            {tableView[0]?.description
+              ? tableView[0]?.description
+              : tableView[0]?.desc}
+          </p>
         </>
       )}
       {tableView.length == 0 && <p>无</p>}

package/src/docs/compsdocs/form/FormLocation.mdx

@@ -44,7 +44,7 @@ import TableLayoutView from '../../common/tableView';
 
 ## 限制说明
 
-1. 小程序应用会调用微信官方的[wx.chooseLocation](https://developers.weixin.qq.com/miniprogram/dev/api/location/wx.chooseLocation.html)和[wx.getLocation](https://developers.weixin.qq.com/miniprogram/dev/api/location/wx.getLocation.html)接口实现定位，需符合小程序限制的类目要求（具体类目在小程序wx.getLocation文档中进行了介绍 [点击查看](https://developers.weixin.qq.com/miniprogram/dev/api/location/wx.getLocation.html)），并在[微信公众平台](https://mp.weixin.qq.com/)中的「开发」-「开发管理」-「接口设置」模块中，自助开通「打开地图选择位置」和「获取当前的地理位置、速度」接口的权限。![](https://qcloudimg.tencent-cloud.cn/raw/bca4e5d6700f9b16094988b5a97a66fb.png)
+1. 小程序应用会调用微信官方的[wx.chooseLocation](https://developers.weixin.qq.com/miniprogram/dev/api/location/wx.chooseLocation.html)和[wx.getLocation](https://developers.weixin.qq.com/miniprogram/dev/api/location/wx.getLocation.html)接口实现定位，需符合小程序限制的类目要求（具体类目在小程序 wx.getLocation 文档中进行了介绍 [点击查看](https://developers.weixin.qq.com/miniprogram/dev/api/location/wx.getLocation.html)），并在[微信公众平台](https://mp.weixin.qq.com/)中的「开发」-「开发管理」-「接口设置」模块中，自助开通「打开地图选择位置」和「获取当前的地理位置、速度」接口的权限。![](https://qcloudimg.tencent-cloud.cn/raw/bca4e5d6700f9b16094988b5a97a66fb.png)
 2. 由于小程序接口限制，小程序下选择用户当前位置，初始化不能获取详细位置。
 
 ## 异常情况说明

package/src/docs/compsdocs/form/FormSelect.mdx

@@ -16,7 +16,6 @@
 
    ![](https://qcloudimg.tencent-cloud.cn/raw/2bc4c77f7470bf5f89538b33f17bf6e2.png)
 
-
 ## 属性介绍
 
 import TableLayoutView from '../../common/tableView';

package/src/docs/compsdocs/grid/Card.mdx

@@ -12,7 +12,6 @@
 
 ![](https://qcloudimg.tencent-cloud.cn/raw/66af38eb338dab6a1d7ff9d2d48e48ff.png)
 
-
 ## 属性介绍
 
 import TableLayoutView from '../../common/tableView';

package/src/docs/compsdocs/grid/Container.mdx

@@ -22,7 +22,6 @@
 
 ![](https://qcloudimg.tencent-cloud.cn/raw/9cdb80ecd07ea73cbdb0c644cb788208.png)
 
-
 ## 属性介绍
 
 import TableLayoutView from '../../common/tableView';

package/src/docs/compsdocs/grid/GridLayout.mdx

@@ -12,7 +12,6 @@
 
 ![](https://qcloudimg.tencent-cloud.cn/raw/6ed4e14bb69eede45c745c845f6f6675.png)
 
-
 ## 属性介绍
 
 import TableLayoutView from '../../common/tableView';

package/src/docs/compsdocs/grid/ScrollView.mdx

@@ -10,11 +10,11 @@
 
 滚动容器可以实现页面或功能模块的滚动效果，当滚动容器内组件内容占用的总宽度/高度大于滚动容器本身的宽度/高度时，便会出现滚动条，通过滑动滚动条滑动来查看容器内的全部内容，示例如下:
 
-1. 拖入一个滚动容器组件，将高度设置为300
+1. 拖入一个滚动容器组件，将高度设置为 300
 
 ![](https://qcloudimg.tencent-cloud.cn/raw/15e8ca4864efeda01609b062fc867675.png)
 
-2. 在滚动容器中添加三个图片组件，每个图片组件的高度设为200，这样容器内的组件高度便大于了容器本身的高度，滚动条出现。
+2. 在滚动容器中添加三个图片组件，每个图片组件的高度设为 200，这样容器内的组件高度便大于了容器本身的高度，滚动条出现。
 
 ![](https://qcloudimg.tencent-cloud.cn/raw/aca40c58815769adad57f551b994a8fe.png)
 

package/src/docs/compsdocs/grid/Swiper.mdx

@@ -34,7 +34,6 @@
 
 ![](https://qcloudimg.tencent-cloud.cn/raw/293a179b0b2ed580c97d4e0ba9dcc5a3.png)
 
-
 ## 属性介绍
 
 import TableLayoutView from '../../common/tableView';
@@ -55,4 +54,4 @@ import TableLayoutView from '../../common/tableView';
 
 ## 组件使用限制
 
-需注意，由于小程序端样式限制问题，轮播容器中的图片高度不得设置为auto，否则将无法渲染。
+需注意，由于小程序端样式限制问题，轮播容器中的图片高度不得设置为 auto，否则将无法渲染。

package/src/docs/compsdocs/media/Icon.mdx

@@ -8,7 +8,7 @@
 
 ## 使用说明
 
-可以通过在图标组件的配置区中选择微搭提供的内置icon实现图标的展示效果并调整图标颜色等参数，同时图标组件也支持用户对图标进行自定义的上传。
+可以通过在图标组件的配置区中选择微搭提供的内置 icon 实现图标的展示效果并调整图标颜色等参数，同时图标组件也支持用户对图标进行自定义的上传。
 
 ![](https://qcloudimg.tencent-cloud.cn/raw/5cd6ab3affb14dc404ddcd939aa6a220.png)
 

package/src/docs/compsdocs/media/Image.mdx

@@ -10,21 +10,21 @@
 
 ### 展示微搭素材中心图片
 
-在图片组件的配置区中点击icon，即可调起微搭的素材中心，在素材中心上传或选择对应的图片素材后便可以在页面中进行图片的展示。
+在图片组件的配置区中点击 icon，即可调起微搭的素材中心，在素材中心上传或选择对应的图片素材后便可以在页面中进行图片的展示。
 
 ![](https://qcloudimg.tencent-cloud.cn/raw/e8f7807bf68597e6f61d7a7fe8517109.png)
 
-### 展示url图片
+### 展示 url 图片
 
-图片组件同样支持对图片url进行渲染展示，仅需在配置区中输入对应的图片url便可以完成图片的渲染。
+图片组件同样支持对图片 url 进行渲染展示，仅需在配置区中输入对应的图片 url 便可以完成图片的渲染。
 
 ![](https://qcloudimg.tencent-cloud.cn/raw/d41b668fd07f55df539507474569dbdb.png)
 
 ### 绑定变量实现图片展示
 
-当变量内容为图片url的时候，图片组件支持绑定变量并对其进行渲染,示例如下:
+当变量内容为图片 url 的时候，图片组件支持绑定变量并对其进行渲染,示例如下:
 
-1. 创建一个普通变量，并将其初始值填写为图片的url
+1. 创建一个普通变量，并将其初始值填写为图片的 url
 
 ![](https://qcloudimg.tencent-cloud.cn/raw/bccd4aff2ae2b17b229b9dbec37e24d4.png)
 
@@ -52,4 +52,4 @@ import TableLayoutView from '../../common/tableView';
 
 ## 组件使用限制
 
-需注意，由于小程序端样式限制问题，图片组件的高度不得设置为auto，否则将无法渲染。
+需注意，由于小程序端样式限制问题，图片组件的高度不得设置为 auto，否则将无法渲染。

package/src/docs/compsdocs/model/ModelCreate.mdx

@@ -18,3 +18,27 @@
 ## 事件介绍
 
 无
+
+## 自定义按钮介绍
+
+新增组件对应的按钮支持自定义能力，可根据场景灵活配置按钮的属性及对应调用的事件。具体使用方法可参考模型表格组件。
+
+#### 按钮动作
+
+| 按钮动作 | 类型   | 说明                       |
+| -------- | ------ | -------------------------- |
+| 提交     | 内置   | 提交表单                   |
+| 取消     | 内置   | 取消并返回                 |
+| 自定义   | 自定义 | 此时该按钮的自定义事件生效 |
+
+#### 新增组件按钮触发返回的 event 对象如下：
+
+> 新增组件
+>
+> ```javascript
+> export default function ({ event, data }) {
+>   const {
+>     data: formValues, // 当前表单的values
+>   } = event.detail.value;
+> }
+> ```

package/src/docs/compsdocs/model/ModelDetail.mdx

@@ -18,3 +18,27 @@
 ## 事件介绍
 
 无
+
+## 自定义按钮介绍
+
+详情组件对应的按钮支持自定义能力，可根据场景灵活配置按钮的属性及对应调用的事件。具体使用方法可参考模型表格组件。
+
+#### 按钮动作
+
+| 按钮动作 | 类型   | 说明                       |
+| -------- | ------ | -------------------------- |
+| 编辑     | 内置   | 编辑该条记录               |
+| 删除     | 内置   | 删除该条记录并返回         |
+| 自定义   | 自定义 | 此时该按钮的自定义事件生效 |
+
+#### 详情组件按钮触发返回的 event 对象如下：
+
+> 详情组件
+>
+> ```javascript
+> export default function ({ event, data }) {
+>   const {
+>     record, // 当前页面的记录
+>   } = event.detail.value;
+> }
+> ```

package/src/docs/compsdocs/model/ModelTable.mdx

@@ -8,7 +8,6 @@
 
 在创建模型应用、模型页面时，会自动在数据的管理表格页面生成该组件，并与数据的新增/更新/查看页面构建关联关系，实现对应的页面跳转逻辑![](https://qcloudimg.tencent-cloud.cn/raw/d42cd232d5f05c47544286a46bcab537.png)
 
-
 ## 属性介绍
 
 | 属性名     | 类型     | 属性分组       | 默认值      | 说明               |
@@ -22,3 +21,136 @@
 ## 事件介绍
 
 无
+
+## 组件自定义按钮介绍
+
+表格组件对应的按钮支持自定义能力，可根据场景灵活配置按钮的属性及对应调用的事件。具有这种自定义能力的按钮定义为按钮选区。
+
+- 选中**表格组件**以后，右侧属性**按钮配置**里可以支持添加、删除表格顶部以及操作列的按钮，并且自定义按钮的属性。
+
+  ![表格组件](https://qcloudimg.tencent-cloud.cn/raw/dba6efb2352afb2448ad8091e8cf133f.png)
+  ![表格组件](https://qcloudimg.tencent-cloud.cn/raw/009eedc320fe69d7bf11cba07baa7d56.png)
+
+- 其中按钮动作包含内置和自定义两种，新建按钮时默认为“自定义”，详情见下表：
+
+  #### 顶部按钮动作
+
+  | 按钮动作 | 类型   | 说明                       |
+  | -------- | ------ | -------------------------- |
+  | 新建     | 内置   | 新建数据                   |
+  | 删除     | 内置   | 删除所选数据               |
+  | 导出     | 内置   | 导出所选数据               |
+  | 自定义   | 自定义 | 此时该按钮的自定义事件生效 |
+
+  #### 操作列按钮动作
+
+  | 按钮动作 | 类型   | 说明                       |
+  | -------- | ------ | -------------------------- |
+  | 查看     | 内置   | 查看当前行                 |
+  | 编辑     | 内置   | 编辑当前行                 |
+  | 删除     | 内置   | 删除当前行                 |
+  | 自定义   | 自定义 | 此时该按钮的自定义事件生效 |
+
+- 若按钮的动作设置为“自定义”，则需要设置该按钮的自定义事件。方法是鼠标选中该按钮，在右侧的“选区属性”面板中设置 tap（点击时）事件。在执行动作中可以使用平台提供的方法，也可以自定义方法。
+
+![表格组件](https://qcloudimg.tencent-cloud.cn/raw/849d9c57d6c4337ea8ec1a2d947f4cec.png)
+
+- 按钮选区触发条件被触发时会返回该触发条件的 **event** 对象
+
+  ```javascript
+  export default function ({ event, data }) {
+    // event为条件被触发时返回的event对象
+    console.log(event);
+  }
+  ```
+
+  其中，表格组件按钮选区触发返回的 event 对象如下：
+
+  > 顶部按钮的自定义方法
+  >
+  > ```javascript
+  > export default function ({ event, data }) {
+  >   const {
+  >     selectedKeys, // 已选记录的keys
+  >     records, // 查询列表记录
+  >   } = event.detail.value;
+  > }
+  > ```
+  >
+  > 表格操作列的自定义方法
+  >
+  > ```javascript
+  > export default function ({ event, data }) {
+  >   const {
+  >     record, // 当前行的数据
+  >     recordKey, // 当前行的key
+  >   } = event.detail.value;
+  > }
+  > ```
+
+---
+
+## 选区案例参考
+
+![案例demo](https://qcloudimg.tencent-cloud.cn/raw/d29c296609ace6420bc3d89d16c7cc1a.png)
+![案例demo](https://qcloudimg.tencent-cloud.cn/raw/a1a655823a0d98e60017c1271e41eef8.png)
+
+## 选区其他事项
+
+- 选区按钮如需绑定变量，变量值可以参考如下：
+
+```javascript
+[
+  {
+    text: '新建',
+    tooltip: '',
+    type: 'primary',
+    htmlType: 'button',
+    action: 'create',
+    show: true,
+    loading: false,
+    disabled: false,
+  },
+  {
+    text: '删除',
+    tooltip: '',
+    type: 'weak',
+    htmlType: 'button',
+    action: 'del',
+    show: true,
+    loading: false,
+    disabled: false,
+  },
+  {
+    text: '导出',
+    tooltip: '',
+    type: 'weak',
+    htmlType: 'button',
+    action: 'export',
+    show: true,
+    loading: false,
+    disabled: false,
+  },
+  {
+    text: '自定义按钮',
+    tooltip: '',
+    type: 'weak',
+    htmlType: 'button',
+    action: 'custom', // 使用自定义动作时，设置为“custom”
+    show: true,
+    loading: false,
+    disabled: false,
+    selectableBlock: {
+      listenerInstances: [
+        {
+          key: '',
+          trigger: 'tap',
+          instanceFunction: function ({ event, data }) {
+            return app.showModal(); // 选区按钮对应的方法代码，可以使用平台的方法，或者自定义方法 $page.handler.xxx({ event, data })
+          },
+        },
+      ],
+    },
+  },
+];
+```

package/src/docs/compsdocs/model/ModelUpdate.mdx

@@ -8,7 +8,6 @@
 
 在创建模型应用、模型页面时，会自动在数据的更新页面生成该组件，并与数据的新增/查看/管理表格页面构建关联关系，实现对应的页面跳转逻辑
 
-
 ## 属性介绍
 
 | 属性名     | 类型     | 属性分组 | 默认值 | 说明               |
@@ -19,3 +18,27 @@
 ## 事件介绍
 
 无
+
+## 自定义按钮介绍
+
+更新组件对应的按钮支持自定义能力，可根据场景灵活配置按钮的属性及对应调用的事件。具体使用方法可参考模型表格组件。
+
+#### 按钮动作
+
+| 按钮动作 | 类型   | 说明                       |
+| -------- | ------ | -------------------------- |
+| 提交     | 内置   | 提交表单                   |
+| 取消     | 内置   | 取消并返回                 |
+| 自定义   | 自定义 | 此时该按钮的自定义事件生效 |
+
+#### 更新组件按钮触发返回的 event 对象如下：
+
+> 更新组件
+>
+> ```javascript
+> export default function ({ event, data }) {
+>   const {
+>     data: formValues, // 当前表单的values
+>   } = event.detail.value;
+> }
+> ```

package/src/docs/compsdocs/navmenu/Classification.mdx

@@ -8,17 +8,16 @@
 
 ## 使用说明
 
-使用侧边导航面板组件可以实现页面的左侧Tab切换效果，当在组件配置区点击新增标签时，在大纲树中会生成对应的**内容插槽**，我们可以通过在内容插槽中放置对应组件实现不同Tab的的内容构建，以下文为例:
+使用侧边导航面板组件可以实现页面的左侧 Tab 切换效果，当在组件配置区点击新增标签时，在大纲树中会生成对应的**内容插槽**，我们可以通过在内容插槽中放置对应组件实现不同 Tab 的的内容构建，以下文为例:
 
 1. 在侧边导航面板组件的两个内容插槽中分别添加两个文本组件，并为两个文本组件设置不同的内容
 
 ![](https://qcloudimg.tencent-cloud.cn/raw/0b5640a94e57826585ea975d66b1b56d.png)
 
-2. 可以看到，当进行Tab切换时，不同的Tab便呈现出了不同的文本组件内容
+2. 可以看到，当进行 Tab 切换时，不同的 Tab 便呈现出了不同的文本组件内容
 
 ![](https://qcloudimg.tencent-cloud.cn/raw/3b40f7e41c7e4b42c143119937e24996.png)
 
-
 ## 属性介绍
 
 import TableLayoutView from '../../common/tableView';

package/src/docs/compsdocs/navmenu/NavBar.mdx

@@ -32,12 +32,21 @@ import TableLayoutView from '../../common/tableView';
 
 ## 限制说明
 
-1. 小程序使用时，需在页面设置-页面样式-小程序导航中奖导航栏样式切换为「自定义样式」，否则小程序页面上方会显示出2个导航栏，同时导航栏中间会留有不可消除的空白间距
+1. 小程序使用时，需在页面设置-页面样式-小程序导航中奖导航栏样式切换为「自定义样式」，否则小程序页面上方会显示出 2 个导航栏，同时导航栏中间会留有不可消除的空白间距
 
-   <img src="https://qcloudimg.tencent-cloud.cn/raw/4a22f88657f801a794fdbba6f9e515bc.png" width="50%" />
+   <img
+     src="https://qcloudimg.tencent-cloud.cn/raw/4a22f88657f801a794fdbba6f9e515bc.png"
+     width="50%"
+   />
 
-   <img src="https://qcloudimg.tencent-cloud.cn/raw/2d6075e2a9941a9cb8964c925253422d.png" width="35%"/>
+   <img
+     src="https://qcloudimg.tencent-cloud.cn/raw/2d6075e2a9941a9cb8964c925253422d.png"
+     width="35%"
+   />
 
-2. 如需在小程序顶部额外附加一个样式合理的导航栏，或者小程序/H5想实现更灵活的导航样式，推荐使用「页头容器」组件来进行导航栏的自定义
+2. 如需在小程序顶部额外附加一个样式合理的导航栏，或者小程序/H5 想实现更灵活的导航样式，推荐使用「页头容器」组件来进行导航栏的自定义
 
-   <img src="https://qcloudimg.tencent-cloud.cn/raw/fac09e42ed3a833d5ee364c78d01fc44.png" width="50%"/>
+   <img
+     src="https://qcloudimg.tencent-cloud.cn/raw/fac09e42ed3a833d5ee364c78d01fc44.png"
+     width="50%"
+   />

package/src/docs/compsdocs/navmenu/NavLayout.mdx

@@ -10,7 +10,6 @@
 
 支持灵活定义各个导航项目的图标文字内容、跳转交互、PC/移动多端列数和各项细致完备的样式属性![](https://qcloudimg.tencent-cloud.cn/raw/85be8cc619042f1e16f58e4015ee0e67.png)
 
-
 ## 属性介绍
 
 import TableLayoutView from '../../common/tableView';

package/src/docs/compsdocs/navmenu/TabBar.mdx

@@ -8,7 +8,7 @@
 
 ## 使用说明
 
-通过组件配置区即可快速实现Tab栏的实现，Tab栏除了基础的标题、图标配置外也可以通过配置区快速的实现页面跳转逻辑。
+通过组件配置区即可快速实现 Tab 栏的实现，Tab 栏除了基础的标题、图标配置外也可以通过配置区快速的实现页面跳转逻辑。
 
 ### 设置选中页面
 
@@ -16,11 +16,11 @@
 
 ![](https://qcloudimg.tencent-cloud.cn/raw/291b8e10bd0efd58add639e2aae6d700.png)
 
-2. 随后为第一个Tab进行跳转页面-首页的相关配置
+2. 随后为第一个 Tab 进行跳转页面-首页的相关配置
 
 ![](https://qcloudimg.tencent-cloud.cn/raw/904e0f94800150671ac0bc7fc149f3d5.png)
 
-3. 可以看到，因为Tab的跳转页面与步骤1中设置的选中页面相同，该Tab的标题与图标便会变为激活状态。
+3. 可以看到，因为 Tab 的跳转页面与步骤 1 中设置的选中页面相同，该 Tab 的标题与图标便会变为激活状态。
 
 ![](https://qcloudimg.tencent-cloud.cn/raw/a2b7c6f347ab8889bdcefdb7a80702fa.png)
 

package/src/docs/compsdocs/navmenu/TabBarItem.mdx

@@ -8,7 +8,7 @@
 
 ## 使用说明
 
-用于放置于Tab栏组件的插槽中使用
+用于放置于 Tab 栏组件的插槽中使用
 
 ## 属性介绍
 

package/src/docs/compsdocs/senior/Lottery.mdx

@@ -8,7 +8,7 @@
 
 ## 使用说明
 
-1. 奖品配置，支持手动配置和数据源配置，最多支持8个奖品，不足8个奖品会有占位图显示，超过8个的无效。
+1. 奖品配置，支持手动配置和数据源配置，最多支持 8 个奖品，不足 8 个奖品会有占位图显示，超过 8 个的无效。
 
 手动配置：
 
@@ -18,9 +18,9 @@
 
 ![https://qcloudimg.tencent-cloud.cn/raw/d93012934fbb222dbafbf7e3bb981260.png](https://qcloudimg.tencent-cloud.cn/raw/d93012934fbb222dbafbf7e3bb981260.png)
 
-2. 设置启动抽奖为开始开关，如果设置为关闭则不会触发抽奖动作，抽奖过程成如果绑定数据源返回false，立马停止。
+2. 设置启动抽奖为开始开关，如果设置为关闭则不会触发抽奖动作，抽奖过程成如果绑定数据源返回 false，立马停止。
 
-3. 设置抽奖希望的结果，支持1-8，从左上角第一个奖品位置开始为1，2，3……的奖品顺序，
+3. 设置抽奖希望的结果，支持 1-8，从左上角第一个奖品位置开始为 1，2，3……的奖品顺序，
 
 4. 点击开始抽奖页面，触发抽奖动画，开始后收到绑定数据抽奖的结果后动画逐渐停止，并且显示中奖的位置，如果收不到则超时后自动停止动画。
 
@@ -43,6 +43,3 @@ import TableLayoutView from '../../common/tableView';
   type="event"
   origin="sourceCode"
 ></TableLayoutView>
-
-
-

package/src/docs/compsdocs/senior/Modal.mdx

@@ -14,7 +14,7 @@
 
 在实际应用搭建过程中，我们经常会遇到点击按钮后弹出弹窗的场景，实现方式如下:
 
-1. 创建一个boolean类型的普通变量，并将默认值设置为false
+1. 创建一个 boolean 类型的普通变量，并将默认值设置为 false
 
 ![](https://qcloudimg.tencent-cloud.cn/raw/d0936c280bf26e86b192228eabe0d6ba.png)
 
@@ -34,11 +34,10 @@
 
 ![](https://qcloudimg.tencent-cloud.cn/raw/07e104490813cfe2b36a98d46da67d96.png)
 
-弹窗组件同样需要通过变量实现关闭，实现方式与上文相似，通过弹窗的close事件进行变量赋值，实现弹窗的关闭
+弹窗组件同样需要通过变量实现关闭，实现方式与上文相似，通过弹窗的 close 事件进行变量赋值，实现弹窗的关闭
 
 ![](https://qcloudimg.tencent-cloud.cn/raw/bce3e0097b032eafb9f4369561cf726f.png)
 
-
 ## 属性介绍
 
 import TableLayoutView from '../../common/tableView';

package/src/docs/compsdocs/senior/SlotMachine.mdx

@@ -10,7 +10,7 @@
 
 ### 点击按钮实现抽奖机滚动
 
-1. 创建一个boolean类型的普通变量，并将初始值设为false
+1. 创建一个 boolean 类型的普通变量，并将初始值设为 false
 
 ![](https://qcloudimg.tencent-cloud.cn/raw/ed5449e3a45eb731829250a660f85233.png)
 
@@ -18,13 +18,11 @@
 
 ![](https://qcloudimg.tencent-cloud.cn/raw/91ab3e5aabdbf866c381c209c1bcdd66.png)
 
-
-
 3. 在抽奖机的组件配置区中将"立即开始滚动"绑定刚刚刚刚创建的模型变量并且将"刷新后重置"配置项开启
 
 ![](https://qcloudimg.tencent-cloud.cn/raw/f5ae5c3482111168be601f4eb0609257.png)
 
-4. 为按钮组件配置点击时变量赋值的事件，将控制滚动的变量赋值为true，如下图所示
+4. 为按钮组件配置点击时变量赋值的事件，将控制滚动的变量赋值为 true，如下图所示
 
 ![](https://qcloudimg.tencent-cloud.cn/raw/05165c2b7b15309909aaf6e36129a3f9.png)
 
@@ -32,7 +30,6 @@
 
 ![](https://qcloudimg.tencent-cloud.cn/raw/00e6ef563e9b1a94d9a22b05fd98ac2c.png)
 
-
 ## 属性介绍
 
 import TableLayoutView from '../../common/tableView';

package/src/docs/compsdocs/senior/_category_.json

@@ -1 +1 @@
-{ "label": "高级", "position": 70}
+{ "label": "高级", "position": 70 }

package/src/docs/compsdocs/show/GraphicCard.mdx

@@ -10,7 +10,6 @@
 
 支持灵活定义各个卡片的图片内容、跳转交互、PC/移动多端列数和各项细致完备的样式属性![](https://qcloudimg.tencent-cloud.cn/raw/b8f17cb3082fae4c432b2ff6646906a5.png)
 
-
 ## 属性介绍
 
 import TableLayoutView from '../../common/tableView';

package/src/docs/compsdocs/show/Item.mdx

@@ -12,7 +12,6 @@
 
 ![](https://qcloudimg.tencent-cloud.cn/raw/a2c76cf309c1b2146fbccc4a473ceaae.png)
 
-
 ## 属性介绍
 
 import TableLayoutView from '../../common/tableView';

package/src/docs/compsdocs/show/ItemList.mdx

@@ -21,6 +21,7 @@
 1. 点击配置区的**绑定数据源**按钮，进入数据源绑定模式![](https://qcloudimg.tencent-cloud.cn/raw/f22a5edf1163c5fc247ead58c8152c58.png)
 
 2. 推荐绑定以下格式的变量以实现从数据模型中获取列表数据
+
    1. 变量类型：模型变量
    2. 变量初始化方法：查询列表-内置
    3. 绑定节点![](https://qcloudimg.tencent-cloud.cn/raw/113fbd81692a6c2f144a10fd0df69940.png)

package/src/docs/compsdocs/show/Tabs.mdx

@@ -8,17 +8,16 @@
 
 ## 使用说明
 
-使用选项卡组件可以实现页面的Tab切换效果，当在组件配置区点击新增选项卡标签时，在大纲树中会生成对应的**内容插槽**，我们可以通过在内容插槽中放置对应组件实现不同Tab的的内容构建，以下文为例:
+使用选项卡组件可以实现页面的 Tab 切换效果，当在组件配置区点击新增选项卡标签时，在大纲树中会生成对应的**内容插槽**，我们可以通过在内容插槽中放置对应组件实现不同 Tab 的的内容构建，以下文为例:
 
 1. 在选项卡的两个内容插槽中分别添加两个文本组件，并为两个文本组件设置不同的内容
 
 ![](https://qcloudimg.tencent-cloud.cn/raw/3c658b5899774da254d48c4098e4fa1e.png)
 
-2. 可以看到，当进行Tab切换时，不同的Tab便呈现出了不同的文本组件内容
+2. 可以看到，当进行 Tab 切换时，不同的 Tab 便呈现出了不同的文本组件内容
 
 ![](https://qcloudimg.tencent-cloud.cn/raw/e9a778473b16f915f72a075fb69625b5.png)
 
-
 ## 属性介绍
 
 import TableLayoutView from '../../common/tableView';

package/src/docs/compsdocs/text/Link.mdx

@@ -40,4 +40,4 @@ import TableLayoutView from '../../common/tableView';
 
 ## 限制说明
 
-由于小程序仅支持通过webview组件的方式进行外部链接的跳转，因此链接组件不支持在小程序中进行构建使用。
+由于小程序仅支持通过 webview 组件的方式进行外部链接的跳转，因此链接组件不支持在小程序中进行构建使用。

package/src/docs/compsdocs/text/RichTextView.mdx

@@ -8,11 +8,10 @@
 
 ## 使用说明
 
-富文本展示组件支持对html语言进行渲染，在组件配置区中输入html语言即可实现自定义的页面展示效果。
+富文本展示组件支持对 html 语言进行渲染，在组件配置区中输入 html 语言即可实现自定义的页面展示效果。
 
 ![](https://qcloudimg.tencent-cloud.cn/raw/2e6e0921ec02486e38cb62cc073989da.png)
 
-
 ## 属性介绍
 
 import TableLayoutView from '../../common/tableView';