@cloudbase/weda-ui 3.4.9-alpha.1024 → 3.4.10

package/README.md

@@ -20,7 +20,7 @@
     ├── configs             # 组件类型声明目录
     │   ├── actions         # 组件库方法类型声明
     │   ├── components      # 组件类型声明
-    │   └── index.js        # 组件类型声明入口
+    │   └── index.ts        # 组件类型声明入口
     ├── mp                  # 小程序组件
     │   ├── actions         # 小程序组件方法实现
     │   ├── components      # 小程序组件实现
@@ -46,6 +46,8 @@
 
 ### 编写组件
 
+首先请阅读 [组件标准化开发原则](https://tapd.woa.com/TCB_new/markdown_wikis/show/#1220422223002427443)
+
 编写能在低码平台运行的组件需要各自平台的**标准组件源码**和**组件描述**。具体可参考 [实现自定义 button 组件 | 云开发 CloudBase - 一站式后端云服务](https://docs.cloudbase.net/lowcode/custom-components/quick-start/comp)
 
 #### 处理组件通用属性
@@ -111,10 +113,6 @@ export default function Container({ children, events, ...args }) {
 }
 ```
 
-#### 调用运行时框架接口
-
-如果在组件中使用低码应用运行时框架提供的工具方法或者数据源相关能力的时候，可以参考 [应用客户端 SDK](https://docs.cloudbase.net/lowcode/framework/app/app) 以及 [在应用中使用数据源及其他后端服务](https://docs.cloudbase.net/lowcode/datasource/usage)
-
 #### 编写组件描述文件
 
 当前编写的组件都是各个平台的标准组件，他们和微搭低码平台需要一个配置来互相连接起来。
@@ -127,14 +125,27 @@ export default function Container({ children, events, ...args }) {
 
 ### 调试组件库
 
-组件编写完成后，在腾讯云微搭低代码编辑器调试组件库，在当前目录执行：
+#### 本地预览
 
-```
-tcb lowcode debug
-```
+对于 web 组件，我们在模板中集成了 [storybook] 的使用环境。编写 [story] 即可简单的在本地预览组件效果。具体步骤：
+
+1. 编写 [story]，story 是 storybook 的组件状态单元，描述了组件在一组特定状态下的行为。
+2. 当你为组件编写了足够多的用例后，你可以运行 `npm run storybook` 命令来互动预览本地组件。
+
+#### 应用编辑器中调试 web 组件
+
+如果 web 端的组件依赖运行态环境才能预览实际效果，可以在应用编辑器中预览
+
+[如何在应用编辑器中直接调试本地官方组件](https://tapd.woa.com/TCB_new/markdown_wikis/show/#1220422223002491961)
+
+#### 调试小程序组件
+
+如果要测试组件小程序端的效果, 可执行`tcb lowcode publish` 发布到自己账号下，然后新建一个应用来测试
 
 ### 组件自动化测试
 
+#### 单元测试
+
 微搭官方组件库需要单元测试覆盖率达到 80% 以上才能发布，我们集成进了 jest 和 小程序模拟器来协助组件的多端测试。
 
 编写完测试用例后运行 `npm test` 执行测试命令。
@@ -146,44 +157,68 @@ tcb lowcode debug
 - <https://jestjs.io/docs/snapshot-testing>
 - <https://storybook.js.org/tutorials/intro-to-storybook/react/en/test/>
 
+#### E2E 测试
+
+组件最终使用过程中因为有构建代码生成和运行、编辑态代码等外部因素，容易出现开发没问题，发布之后才发现问题。而且现网用户用法千奇百怪，一些非预期用法也可能会新版本发布后出现问题。所以用配合 render 使用 E2E 自动化测试，以用户通过编辑器生成的 CALS 和组件 dependencies 作为输入，渲染输出可以执行的应用，以覆盖最终用户态的状态。
+
+E2E 测试采用 Cypress 来进行，相比 Jest 模拟 dom，更适合对实际的样式和运行效果进行测试，推荐复杂一点的组件都要写 E2E 测试。
+
+请参考 [组件库 E2E 测试](https://tapd.woa.com/TCB_new/markdown_wikis/show/#1220422223002369725) 和 [测试用例创建指北](https://tapd.woa.com/TCB_new/markdown_wikis/show/#1220422223002370781)
+
+### 编写组件文档
+
+组件库对外的文档统一发布技术文档站：https://docs.cloudbase.net/lowcode/components/
+
+组件上线前需要提前准备好文档，具体可以参考 https://tapd.woa.com/TCB_new/markdown_wikis/show/#1220422223002472151
+
+研发同学可以在代码仓库中编写代码的同时进行文档的编写，文档放置在 `src/docs/compsdocs/` 目录中
+
+完整的文档示例可参考 [按钮组件文档](https://docs.cloudbase.net/lowcode/components/wedaUI/src/docs/compsdocs/show/WdButton) ，文档源码存放在 `/src/docs/compsdocs/show/WdButton.mdx`
+
 ### 发布组件库
 
+#### 个人账号
+
 组件开发完成后，提交组件到微搭低代码平台，该操作会将组件发布在自己的个人账号下，可以在应用中预览
 
 ```
 tcb lowcode publish
 ```
 
-如果需要发布官方组件库，需要在提交 MR 通过后，通过流水线发布 <http://tencent.coding.woa.com/p/CloudBase/ci/job/292970/build/current>
+然后进入到编辑器的组件库列表中，再次点击发布，即可在自己的账号下的应用中使用
 
-### 更多参考信息
+#### 正式发布
 
-组件开发更多信息请[参考文档](https://docs.cloudbase.net/lowcode/custom-components/quick-start/comps.html)。
-
-## 其他
+如果需要发布官方组件库，需要在提交 MR 通过后，通过流水线发布 <http://tencent.coding.woa.com/p/CloudBase/ci/job/292970/build/current>
 
-为了让你的组件开发工作更加便捷和稳定，我们集成了 [storybook] 及组件测试工具来辅助组件的开发。虽然 storybook 和组件测试不是必须的，我们仍然建议你使用他们来保证组件始终工作正常。
+## 常见问题
 
-### 使用 storybook 本地预览组件
+- 办公网络下执行 `tcb lowcode publish` 出现网络异常报错：建议切换 iOA 到 PAC 模式
 
-对于 web 组件，我们在模板中集成了 [storybook] 的使用环境。编写 [story] 即可简单的在本地预览组件效果。具体步骤：
+## 参考信息
 
-1. 编写 [story]，story 是 storybook 的组件状态单元，描述了组件在一组特定状态下的行为。
-2. 当你为组件编写了足够多的用例后，你可以运行 `npm run storybook` 命令来互动预览本地组件。
+组件开发更多信息请[参考文档](https://docs.cloudbase.net/lowcode/custom-components/quick-start/comps.html)。
 
-### 调试预览小程序组件
+### 编辑器协议机制
 
-对于小程序组件，我们不能直接在浏览器中去预览调试。组件编写完成后需要运行 `tcb lowcode debug` 打开组件编辑器，通过组件编辑器中 IDE 预览功能来进行微信开发者工具和手机的真实预览。
+- [组件内模板机制](https://tapd.woa.com/TCB_new/markdown_wikis/show/#1220422223002353133) :组件可自带默认结构、属性、事件
+- [单组件升级机制](https://tapd.woa.com/TCB_new/markdown_wikis/show/#1220422223002411487) : 针对不再兼容的组件可以引导进行迁移
+- [编辑器检查机制](https://tapd.woa.com/TCB_new/markdown_wikis/show/#1220422223002459983) : 可在发布应用前进行检查
+- [样式配置属性屏蔽 (inlineStyleForm)](https://tapd.woa.com/TCB_new/markdown_wikis/show/#1220422223002470249) :组件可以屏蔽无关样式配置
+- [右侧面板提示 (panelTips)](https://tapd.woa.com/TCB_new/markdown_wikis/show/#1220422223002460139) : 可在右侧编辑区提示相关信息
+- [组件相对位置限制 (positionConstraint)](https://tapd.woa.com/TCB_new/markdown_wikis/show/#1220422223002466153):组件可以针对可以放入的组件进行限制
+- [自定义组件 id 名 (componentName)](https://tapd.woa.com/TCB_new/markdown_wikis/show/#1220422223002474643)
+- [搜索关键词 (keyWords)](https://tapd.woa.com/TCB_new/markdown_wikis/show/#1220422223002460167)
+- [微搭编辑器组件显示隐藏](https://tapd.woa.com/TCB_new/markdown_wikis/show/#1220422223002271581)
 
-- 小程序调试需要从编辑器请求中拷包本地构建生成小程序代码，可以参考 <http://tapd.oa.com/TCB_new/markdown_wikis/show/#1220422223002075389>
+### 运行时框架接口
 
-[腾讯云微搭低代码]: (https://cloud.tencent.com/product/weda)
-[小程序组件]: (https://developers.weixin.qq.com/miniprogram/dev/framework/custom-component/)
-[react]: (https://reactjs.org/)
-[storybook]: (https://storybook.js.org/)
-[http 调用]: (https://developers.weixin.qq.com/miniprogram/dev/devtools/http.html)
-[story]: (https://storybook.js.org/docs/react/get-started/whats-a-story)
+如果在组件中使用低码应用运行时框架提供的工具方法或者数据源相关能力的时候，可参考 [API 列表](https://docs.cloudbase.net/lowcode/api/api-referrence)
 
-```
+### 其他
 
-```
+- [腾讯云微搭低代码](https://cloud.tencent.com/product/weda)
+- [小程序组件](https://developers.weixin.qq.com/miniprogram/dev/framework/custom-component/)
+- [react](https://reactjs.org/)
+- [storybook](https://storybook.js.org/)
+- [story](https://storybook.js.org/docs/react/get-started/whats-a-story)

package/dist/configs/components/chart/bar.json

@@ -964,7 +964,7 @@
             "unit": {
                 "type": "number",
                 "title": "数值量级",
-                "x-index": "360",
+                "x-index": 360,
                 "default": 1,
                 "x-component": "select",
                 "enum": [

package/dist/configs/components/chart/line.js

@@ -526,7 +526,7 @@ const data = Type.Object({
     }),
     setColor: Type.Array(Type.String({ title: '颜色色号' }), {
         title: '配色',
-        'x-index': 58,
+        'x-index': 59,
         default: ['#2A70E2', '#46B690', '#EDB539', '#E46961', '#4FB3D2', '#805FDC'],
         'x-component': 'color-plate',
         remarks: '当有多个数值字段或维度字段分组时，不同类别将按照不同配色展示，支持自定义色卡',

package/dist/configs/components/chart/pie.json

@@ -228,7 +228,7 @@
                 "remarks": "展示模型数据的数据来源"
             },
             "datasourceVariable": {
-                "type": "object",
+                "type": "array",
                 "x-index": 44,
                 "title": "数据源变量",
                 "x-category": "基础属性",

package/dist/configs/components/customer-service.js

@@ -247,8 +247,6 @@ const config = defineConfig({
             },
         ],
         docsUrl: 'https://docs.cloudbase.net/lowcode/components/wedaUI/src/docs/compsdocs/wxOpen/CustomerService',
-    },
-    configMeta: {
         group: {
             ['通用']: {
                 'x-index': 1,

package/dist/configs/components/flowgraph.json

@@ -0,0 +1,22 @@
+{
+    "$schema": "https://comp-public-1303824488.cos.ap-shanghai.myqcloud.com/schema/lcds_component.json",
+    "data": {
+        "properties": {
+            "processCanvasInfo": {
+                "title": "流程图数据",
+                "x-category": "基础属性",
+                "type": "string"
+            }
+        }
+    },
+    "platforms": ["web"],
+    "meta": {
+        "title": "流程图",
+        "description": "流程图组件",
+        "icon": "../icons/FlowGraph.svg",
+        "category": "模型组件",
+        "categoryOrder": 2000,
+        "componentOrder": 10,
+        "visible": []
+    }
+}

package/dist/configs/components/form-checkbox.js

@@ -232,6 +232,7 @@ const config = defineConfig({
         icon: '../icons/FormCheckbox.svg',
         title: '多选',
         name: 'FormCheckbox',
+        componentName: 'Checkbox',
         category: '表单',
         tag: [],
         platform: [],

package/dist/configs/components/form-date.js

@@ -243,6 +243,7 @@ const config = defineConfig({
         icon: '../icons/FormDate.svg',
         title: '日期时间选择',
         name: 'FormDate',
+        componentName: 'DateInput',
         category: '表单',
         categoryOrder: 500,
         componentOrder: 400,

package/dist/configs/components/form-depart-tree-select.js

@@ -201,17 +201,15 @@ const config = defineConfig({
     },
     meta: {
         name: 'FormDepartTreeSelect',
+        componentName: 'DepartmentSelect',
         title: '部门选择',
         category: '表单',
         description: '用于模型应用中部门选择',
         categoryOrder: 500,
         componentOrder: 460,
-        visible: '(APP & MODEL_APP)',
         icon: '../icons/FormDepartTreeSelect.svg',
-    },
-    configMeta: {
         docsUrl: 'https://docs.cloudbase.net/lowcode/components/wedaUI/src/docs/compsdocs/form/FormDepartTreeSelect',
-        visible: '(APP & MODEL_APP)',
+        visible: ['APP', 'COMPONENT'],
         shortcut: {
             props: ['name', 'label'],
             formauto: true,

package/dist/configs/components/form-email.js

@@ -231,6 +231,7 @@ const config = defineConfig({
     },
     meta: {
         name: 'FormEmail',
+        componentName: 'EmailInput',
         title: '邮箱输入',
         description: '用于输入邮箱地址，会强制校验输入内容是否符合邮箱格式。',
         category: '表单',

package/dist/configs/components/form-image-uploader.js

@@ -298,6 +298,7 @@ const config = defineConfig({
     events,
     meta: {
         name: 'FormImageUploader',
+        componentName: 'ImageUploader',
         title: '图片上传',
         description: '用于上传图片、保存图片数据。',
         category: '表单',

package/dist/configs/components/form-input.js

@@ -454,14 +454,13 @@ export default defineConfig({
     meta: {
         title: '单行输入',
         name: 'FormInput',
+        componentName: 'Input',
         description: '用于输入/查看较短文本内容。',
         category: '表单',
         categoryOrder: 500,
         componentOrder: 350,
         icon: '../icons/FormInput.svg',
         visible: ['APP', 'COMPONENT'],
-    },
-    configMeta: {
         docsUrl: 'https://docs.cloudbase.net/lowcode/components/wedaUI/src/docs/compsdocs/form/FormInput',
         shortcut: {
             props: ['name', 'label'],

package/dist/configs/components/form-location.js

@@ -125,6 +125,7 @@ const data = Type.Object({
         title: '默认位置',
         default: 1,
         remarks: '地理位置的默认值',
+        'x-component': 'string',
         'x-index': 25,
     }),
     defauleShowLocation: Type.Boolean({
@@ -301,6 +302,7 @@ const config = defineConfig({
     events,
     meta: {
         name: 'FormLocation',
+        componentName: 'LocationInput',
         title: '地图定位',
         description: '提供表单提交场景下的选点定位功能。',
         category: '表单',
@@ -308,8 +310,6 @@ const config = defineConfig({
         categoryOrder: 500,
         componentOrder: 470,
         visible: ['APP'],
-    },
-    configMeta: {
         docsUrl: 'https://docs.cloudbase.net/lowcode/components/wedaUI/src/docs/compsdocs/form/FormLocation',
         shortcut: {
             props: ['name', 'label', 'dataSource'],

package/dist/configs/components/form-multi-region.js

@@ -184,6 +184,7 @@ const config = defineConfig({
     meta: {
         title: '地区选择',
         name: 'FormMultiRegion',
+        componentName: 'RegionInput',
         description: '适用于选择省市区。',
         docsUrl: 'https://docs.cloudbase.net/lowcode/components/wedaUI/src/docs/compsdocs/form/FormRegion',
         category: '表单',

package/dist/configs/components/form-phone.js

@@ -222,6 +222,7 @@ const config = defineConfig({
     events,
     meta: {
         name: 'FormPhone',
+        componentName: 'PhoneInput',
         title: '电话输入',
         description: '用于输入电话号码，会强制校验输入内容是否符合电话格式。',
         category: '表单',

package/dist/configs/components/form-radio.js

@@ -249,6 +249,7 @@ const config = defineConfig({
     },
     meta: {
         name: 'FormRadio',
+        componentName: 'Radio',
         title: '单选',
         description: '用于在页面中平铺展示多个可选项，由用户选择其一的场景。',
         docsUrl: 'https://docs.cloudbase.net/lowcode/components/wedaUI/src/docs/compsdocs/form/FormRegion',

package/dist/configs/components/form-region.js

@@ -175,6 +175,7 @@ const config = defineConfig({
     meta: {
         title: '地区选择(已废弃)',
         name: 'FormRegion',
+        componentName: 'Region',
         description: '地区选择(已废弃)',
         category: '表单',
         icon: '../icons/FormRegion.svg',

package/dist/configs/components/form-rich-text.js

@@ -182,6 +182,7 @@ const config = defineConfig({
     },
     meta: {
         name: 'FormRichText',
+        componentName: 'RichTextInput',
         title: '富文本编辑',
         categoryOrder: 500,
         componentOrder: 490,

package/dist/configs/components/form-select.js

@@ -335,6 +335,7 @@ const config = defineConfig({
     meta: {
         title: '下拉选择',
         name: 'FormSelect',
+        componentName: 'Select',
         description: '用于以列表形式提供多个可选项，由用户选择其一的场景。',
         category: '表单',
         icon: '../icons/FormSelect.svg',

package/dist/configs/components/form-switch.js

@@ -126,6 +126,7 @@ const config = defineConfig({
     meta: {
         title: '开关',
         name: 'FormSwitch',
+        componentName: 'Switch',
         description: '用于控制打开/关闭。',
         category: '表单',
         icon: '../icons/FormSwitch.svg',

package/dist/configs/components/form-text-area.js

@@ -227,6 +227,7 @@ const config = defineConfig({
     },
     meta: {
         name: 'FormTextArea',
+        componentName: 'TextArea',
         description: '用于输入/查看较长文本内容。',
         icon: '//imgcache.qq.com/qcloud/lowcode/static/ide/left-material-icon/TextArea.svg',
         docsUrl: 'https://docs.cloudbase.net/lowcode/components/wedaUI/src/docs/compsdocs/form/FormTextarea',

package/dist/configs/components/form-time.js

@@ -194,6 +194,7 @@ const config = defineConfig({
     meta: {
         title: '时间选择',
         name: 'FormTime',
+        componentName: 'TimeInput',
         description: '用于选择具体时分时间，例如22:30。',
         icon: '../icons/FormTime.svg',
         category: '表单',

package/dist/configs/components/form-upload-file.js

@@ -242,6 +242,7 @@ const config = defineConfig({
     meta: {
         title: '文件上传',
         name: 'FormUploadFile',
+        componentName: 'UploadFile',
         category: '表单',
         description: '用于上传文件、保存文件数据。',
         icon: '../icons/FormUploadFile.svg',

package/dist/configs/components/form-url.js

@@ -231,6 +231,7 @@ const config = defineConfig({
     events,
     meta: {
         name: 'FormUrl',
+        componentName: 'UrlInput',
         title: 'URL输入',
         description: '用于输入URL地址，会强制校验输入内容是否符合邮箱格式。',
         category: '表单',

package/dist/configs/components/form-user-tree-select.js

@@ -278,21 +278,20 @@ const config = defineConfig({
     events,
     meta: {
         name: 'FormUserTreeSelect',
+        componentName: 'UserSelect',
         title: '成员选择',
         description: '用于模型应用中成员选择',
         category: '表单',
         categoryOrder: 500,
         componentOrder: 450,
-        visible: '(APP & MODEL_APP)',
+        visible: ['APP', 'COMPONENT'],
         icon: '../icons/FormUserTreeSelect.svg',
-    },
-    configMeta: {
         docsUrl: 'https://docs.cloudbase.net/lowcode/components/wedaUI/src/docs/compsdocs/form/FormUserTreeSelect',
-        visible: '(APP & MODEL_APP)',
         shortcut: {
             props: ['name', 'label'],
             formauto: true,
         },
+        platform: ['WEB'],
         recommendTypes: {
             name: [
                 {

package/dist/configs/components/modal.js

@@ -64,8 +64,6 @@ const config = defineConfig({
         icon: '../icons/Modal.svg',
         categoryOrder: 200,
         componentOrder: 140,
-    },
-    configMeta: {
         visible: ['APP', 'COMPONENT'],
         docsUrl: 'https://docs.cloudbase.net/lowcode/components/wedaUI/src/docs/compsdocs/senior/Modal',
     },

package/dist/configs/components/navigationBar.json

@@ -63,9 +63,7 @@
         "categoryOrder": 300,
         "componentOrder": 160,
         "icon": "../icons/NavigationBar.svg",
-        "visible": "(APP & !MODEL_APP) | COMPONENT"
-    },
-    "configMeta": {
+        "visible": ["APP"],
         "docsUrl": "https://docs.cloudbase.net/lowcode/components/wedaUI/src/docs/compsdocs/navmenu/NavigationBar"
     }
 }

package/dist/configs/components/wd-button.js

@@ -150,8 +150,8 @@ const data = Type.Object({
         'x-category': '高级属性',
     })),
     // 规范化新增，图标样式 支持自定义图片
-    iconSrc: Type.Optional(Type.FormatTypeUnion({
-        type: 'image',
+    iconSrc: Type.Optional(Type.String({
+        'x-component': 'image',
         'x-rules': [
             {
                 message: '请输入合法的图片地址',

package/dist/configs/components/wd-icon.js

@@ -29,10 +29,10 @@ const data = Type.Object({
         'x-component': 'icon2',
         description: '选择预置图标',
     }),
-    src: Type.Optional(Type.FormatTypeUnion({
+    src: Type.Optional(Type.String({
         title: '自定义图标',
         default: '',
-        type: 'image',
+        'x-component': 'image',
         'x-index': 30,
         'x-rules': [
             {

package/dist/configs/components/wd-link.js

@@ -110,8 +110,8 @@ const data = Type.Object({
         'x-category': '高级属性',
     })),
     // 规范化新增，图标样式 支持自定义图片
-    iconSrc: Type.Optional(Type.FormatTypeUnion({
-        type: 'image',
+    iconSrc: Type.Optional(Type.String({
+        'x-component': 'image',
         'x-rules': [
             {
                 message: '请输入合法的图片地址',

package/dist/configs/components/wd-table.js

@@ -516,7 +516,7 @@ const data = Type.Object({
         'x-group': '数据',
         description: '条件筛选',
     })),
-    filterFields: Type.Optional(Type.FormatTypeUnion({
+    filterFields: Type.Optional(Type.Any({
         type: 'object',
         title: '筛选器',
         'x-component': 'mutilp-data-source-field-select',

package/dist/configs/index.js

@@ -59,6 +59,7 @@ import ModelFlowChart from './components/flow/flowchart.json';
 import ModelFlowControl from './components/flow/flowcontrol.json';
 import ModelFlowLayout from './components/flow/flowlayout.json';
 import ModelFlowProcess from './components/flow/flowprocess.json';
+import FlowGraph from './components/flowgraph.json';
 // 新版规范化组件
 import WdBubble from './components/wd-bubble';
 import WdButton from './components/wd-button';
@@ -178,6 +179,7 @@ export const components = {
     ModelFlowControl,
     ModelFlowLayout,
     ModelFlowProcess,
+    FlowGraph,
     // 新版组件
     WdButton,
     WdDivider,

package/dist/docs/common/components/properties-view.js

@@ -1,9 +1,6 @@
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 export default function PropertiesView({ rows }) {
-    return ((rows === null || rows === void 0 ? void 0 : rows.length) > 0 && (_jsxs(_Fragment, { children: [_jsx("p", { children: "\u901A\u8FC7\u5C5E\u6027 API\uFF0C\u53EF\u4EE5\u83B7\u53D6\u7EC4\u4EF6\u5185\u90E8\u7684\u72B6\u6001\u548C\u5C5E\u6027\u503C" }), _jsx("div", { className: "tea-table__header", children: _jsxs("table", { className: "tea-table__box", children: [_jsxs("colgroup", { children: [_jsx("col", { style: { width: '18%' } }), _jsx("col", { style: { width: '18%' } }), _jsx("col", { style: { width: '25%' } }), _jsx("col", { style: { width: 'auto' } })] }), _jsx("thead", { children: _jsxs("tr", { children: [_jsx("th", { className: "", children: _jsx("div", { children: _jsx("span", { className: "tea-text-overflow", title: "\u53EA\u8BFB\u5C5E\u6027\u540D", children: "\u53EA\u8BFB\u5C5E\u6027\u540D" }) }) }), _jsx("th", { className: "", children: _jsx("div", { children: _jsx("span", { className: "tea-text-overflow", title: "\u53EA\u8BFB\u5C5E\u6027\u540D", children: "\u5C5E\u6027\u6807\u8BC6" }) }) }), _jsx("th", { className: "", children: _jsx("div", { children: _jsx("span", { className: "tea-text-overflow", title: "\u7C7B\u578B", children: "\u7C7B\u578B" }) }) }), _jsx("th", { className: "", children: _jsx("div", { children: _jsx("span", { className: "tea-text-overflow", title: "\u8BF4\u660E", children: "\u8BF4\u660E" }) }) })] }) })] }) }), _jsxs("table", { className: "tea-table__box", children: [_jsxs("colgroup", { children: [_jsx("col", { style: { width: '18%' } }), _jsx("col", { style: { width: '18%' } }), _jsx("col", { style: { width: '25%' } }), _jsx("col", { style: { width: 'auto' } })] }), _jsx("tbody", { children: rows.map((row, index) => {
-                            var _a;
-                            return (_jsxs("tr", { children: [_jsx("td", { children: _jsx("b", { children: row.title }) }), _jsx("td", { children: _jsx("code", { children: row.name }) }), _jsx("td", { children: _jsx("code", { children: ((_a = row.enum) === null || _a === void 0 ? void 0 : _a.length)
-                                                ? [...row.enum.map((item) => JSON.stringify(item))].join('|')
-                                                : row.type }) }), _jsx("td", { children: row.description })] }, index));
-                        }) })] })] })));
+    return ((rows === null || rows === void 0 ? void 0 : rows.length) > 0 && (_jsxs(_Fragment, { children: [_jsx("p", { children: "\u901A\u8FC7\u5C5E\u6027 API\uFF0C\u53EF\u4EE5\u83B7\u53D6\u7EC4\u4EF6\u5185\u90E8\u7684\u72B6\u6001\u548C\u5C5E\u6027\u503C" }), _jsx("div", { className: "tea-table__header", children: _jsxs("table", { className: "tea-table__box", children: [_jsxs("colgroup", { children: [_jsx("col", { style: { width: '18%' } }), _jsx("col", { style: { width: '18%' } }), _jsx("col", { style: { width: '25%' } }), _jsx("col", { style: { width: 'auto' } })] }), _jsx("thead", { children: _jsxs("tr", { children: [_jsx("th", { className: "", children: _jsx("div", { children: _jsx("span", { className: "tea-text-overflow", title: "\u53EA\u8BFB\u5C5E\u6027\u540D", children: "\u53EA\u8BFB\u5C5E\u6027\u540D" }) }) }), _jsx("th", { className: "", children: _jsx("div", { children: _jsx("span", { className: "tea-text-overflow", title: "\u53EA\u8BFB\u5C5E\u6027\u540D", children: "\u5C5E\u6027\u6807\u8BC6" }) }) }), _jsx("th", { className: "", children: _jsx("div", { children: _jsx("span", { className: "tea-text-overflow", title: "\u7C7B\u578B", children: "\u7C7B\u578B" }) }) }), _jsx("th", { className: "", children: _jsx("div", { children: _jsx("span", { className: "tea-text-overflow", title: "\u8BF4\u660E", children: "\u8BF4\u660E" }) }) })] }) })] }) }), _jsxs("table", { className: "tea-table__box", children: [_jsxs("colgroup", { children: [_jsx("col", { style: { width: '18%' } }), _jsx("col", { style: { width: '18%' } }), _jsx("col", { style: { width: '25%' } }), _jsx("col", { style: { width: 'auto' } })] }), _jsx("tbody", { children: rows.map((row, index) => (_jsxs("tr", { children: [_jsx("td", { children: _jsx("b", { children: row.title }) }), _jsx("td", { children: _jsx("code", { children: row.name }) }), _jsx("td", { children: _jsx("code", { children: Array.isArray(row.enum) && row.enum.length
+                                            ? [...row.enum.map((item) => JSON.stringify(item))].join('|')
+                                            : row.type }) }), _jsx("td", { children: row.description })] }, index))) })] })] })));
 }

package/dist/docs/common/tableView.js

@@ -76,16 +76,13 @@ export default function TableLayoutView({ componentKey, type, origin }) {
         case 'event':
             return _jsx(EventView, { rows: tableView });
     }
-    return (_jsxs(_Fragment, { children: [type == 'attribute' && tableView.length > 0 && (_jsxs(_Fragment, { children: [_jsx("p", { children: "\u7EC4\u4EF6\u63A5\u6536\u7684\u5916\u90E8\u4F20\u5165\u7684\u5C5E\u6027" }), _jsx("div", { className: "tea-table__header", children: _jsxs("table", { className: "tea-table__box", children: [_jsxs("colgroup", { children: [_jsx("col", { style: { width: '18%' } }), _jsx("col", { style: { width: '10%' } }), _jsx("col", { style: { width: '15%' } }), _jsx("col", { style: { width: '15%' } }), _jsx("col", { style: { width: '18%' } }), _jsx("col", { style: { width: 'auto' } })] }), _jsx("thead", { children: _jsxs("tr", { children: [_jsx("th", { className: "", children: _jsx("div", { children: _jsx("span", { className: "tea-text-overflow", title: "\u5C5E\u6027\u540D", children: "\u5C5E\u6027\u540D" }) }) }), _jsx("th", { className: "", children: _jsx("div", { children: _jsx("span", { className: "tea-text-overflow", title: "\u5C5E\u6027\u6807\u8BC6", children: "\u5C5E\u6027\u6807\u8BC6" }) }) }), _jsx("th", { className: "", children: _jsx("div", { children: _jsx("span", { className: "tea-text-overflow", title: "\u7C7B\u578B", children: "\u7C7B\u578B" }) }) }), _jsx("th", { className: "", children: _jsx("div", { children: _jsx("span", { className: "tea-text-overflow", title: "\u5C5E\u6027\u5206\u7EC4", children: "\u5C5E\u6027\u5206\u7EC4" }) }) }), _jsx("th", { className: "", children: _jsx("div", { children: _jsx("span", { className: "tea-text-overflow", title: "\u9ED8\u8BA4\u503C", children: "\u9ED8\u8BA4\u503C" }) }) }), _jsx("th", { className: "", children: _jsx("div", { children: _jsx("span", { className: "tea-text-overflow", title: "\u8BF4\u660E", children: "\u8BF4\u660E" }) }) })] }) })] }) }), _jsxs("table", { className: "tea-table__box", children: [_jsxs("colgroup", { children: [_jsx("col", { style: { width: '18%' } }), _jsx("col", { style: { width: '10%' } }), _jsx("col", { style: { width: '15%' } }), _jsx("col", { style: { width: '15%' } }), _jsx("col", { style: { width: '18%' } }), _jsx("col", { style: { width: 'auto' } })] }), _jsx("tbody", { children: tableView.map((row, index) => {
-                                    var _a;
-                                    return (_jsxs("tr", { children: [_jsx("td", { children: _jsx("b", { children: row.title }) }), _jsx("td", { children: _jsx("code", { children: row.code }) }), _jsx("td", { children: _jsx("code", { children: ((_a = row.enum) === null || _a === void 0 ? void 0 : _a.length)
-                                                        ? [
-                                                            ...row.enum
-                                                                .map((item) => typeof item === 'string' ? item : item.value)
-                                                                .map((item) => JSON.stringify(item)),
-                                                        ].join('|')
-                                                        : row.type }) }), _jsx("td", { children: row['x-category'] }), _jsx("td", { children: row.default }), _jsx("td", { children: row.description })] }, index));
-                                }) })] })] })), type == 'slot' && tableView.length > 0 && (_jsxs(_Fragment, { children: [_jsx("p", { children: "\u7EC4\u4EF6\u5185\u90E8\u5F00\u653E\u7684\u63D2\u69FD\uFF0C\u53EF\u4EE5\u653E\u5165\u5176\u4ED6\u7EC4\u4EF6" }), _jsx("div", { className: "tea-table__header", children: _jsxs("table", { className: "tea-table__box", children: [_jsxs("colgroup", { children: [_jsx("col", { style: { width: '18%' } }), _jsx("col", { style: { width: 'auto' } })] }), _jsx("thead", { children: _jsxs("tr", { children: [_jsx("th", { className: "", children: _jsx("div", { children: _jsx("span", { className: "tea-text-overflow", title: "\u5C5E\u6027\u540D", children: "\u540D\u79F0" }) }) }), _jsx("th", { className: "", children: _jsx("div", { children: _jsx("span", { className: "tea-text-overflow", title: "\u7C7B\u578B", children: "\u8BF4\u660E" }) }) })] }) })] }) }), _jsxs("table", { className: "tea-table__box", children: [_jsxs("colgroup", { children: [_jsx("col", { style: { width: '18%' } }), _jsx("col", { style: { width: 'auto' } })] }), _jsx("tbody", { children: tableView.map((row, index) => (_jsxs("tr", { children: [_jsx("td", { children: row.code }), _jsx("td", { children: row.description })] }, index))) })] })] })), type == 'description' && tableView.length > 0 && (_jsxs(_Fragment, { children: [_jsxs("h2", { className: "sbdocs-h2", children: [_jsx("a", { "aria-hidden": "true", className: "anchor enhancedAnchor_node_modules-@docusaurus-theme-classic-lib-next-theme-Heading-styles-module", id: "\u9002\u7528\u573A\u666F" }), "\u9002\u7528\u573A\u666F", _jsx("a", { className: "hash-link", href: "#\u9002\u7528\u573A\u666F", title: "\u6807\u9898\u7684\u76F4\u63A5\u94FE\u63A5", children: "#" })] }), _jsx("p", { children: ((_a = tableView[0]) === null || _a === void 0 ? void 0 : _a.description)
+    return (_jsxs(_Fragment, { children: [type == 'attribute' && tableView.length > 0 && (_jsxs(_Fragment, { children: [_jsx("p", { children: "\u7EC4\u4EF6\u63A5\u6536\u7684\u5916\u90E8\u4F20\u5165\u7684\u5C5E\u6027" }), _jsx("div", { className: "tea-table__header", children: _jsxs("table", { className: "tea-table__box", children: [_jsxs("colgroup", { children: [_jsx("col", { style: { width: '18%' } }), _jsx("col", { style: { width: '10%' } }), _jsx("col", { style: { width: '15%' } }), _jsx("col", { style: { width: '15%' } }), _jsx("col", { style: { width: '18%' } }), _jsx("col", { style: { width: 'auto' } })] }), _jsx("thead", { children: _jsxs("tr", { children: [_jsx("th", { className: "", children: _jsx("div", { children: _jsx("span", { className: "tea-text-overflow", title: "\u5C5E\u6027\u540D", children: "\u5C5E\u6027\u540D" }) }) }), _jsx("th", { className: "", children: _jsx("div", { children: _jsx("span", { className: "tea-text-overflow", title: "\u5C5E\u6027\u6807\u8BC6", children: "\u5C5E\u6027\u6807\u8BC6" }) }) }), _jsx("th", { className: "", children: _jsx("div", { children: _jsx("span", { className: "tea-text-overflow", title: "\u7C7B\u578B", children: "\u7C7B\u578B" }) }) }), _jsx("th", { className: "", children: _jsx("div", { children: _jsx("span", { className: "tea-text-overflow", title: "\u5C5E\u6027\u5206\u7EC4", children: "\u5C5E\u6027\u5206\u7EC4" }) }) }), _jsx("th", { className: "", children: _jsx("div", { children: _jsx("span", { className: "tea-text-overflow", title: "\u9ED8\u8BA4\u503C", children: "\u9ED8\u8BA4\u503C" }) }) }), _jsx("th", { className: "", children: _jsx("div", { children: _jsx("span", { className: "tea-text-overflow", title: "\u8BF4\u660E", children: "\u8BF4\u660E" }) }) })] }) })] }) }), _jsxs("table", { className: "tea-table__box", children: [_jsxs("colgroup", { children: [_jsx("col", { style: { width: '18%' } }), _jsx("col", { style: { width: '10%' } }), _jsx("col", { style: { width: '15%' } }), _jsx("col", { style: { width: '15%' } }), _jsx("col", { style: { width: '18%' } }), _jsx("col", { style: { width: 'auto' } })] }), _jsx("tbody", { children: tableView.map((row, index) => (_jsxs("tr", { children: [_jsx("td", { children: _jsx("b", { children: row.title }) }), _jsx("td", { children: _jsx("code", { children: row.code }) }), _jsx("td", { children: _jsx("code", { children: Array.isArray(row.enum) && row.enum.length
+                                                    ? [
+                                                        ...row.enum
+                                                            .map((item) => typeof item === 'string' ? item : item.value)
+                                                            .map((item) => JSON.stringify(item)),
+                                                    ].join('|')
+                                                    : row.type }) }), _jsx("td", { children: row['x-category'] }), _jsx("td", { children: row.default }), _jsx("td", { children: row.description })] }, index))) })] })] })), type == 'slot' && tableView.length > 0 && (_jsxs(_Fragment, { children: [_jsx("p", { children: "\u7EC4\u4EF6\u5185\u90E8\u5F00\u653E\u7684\u63D2\u69FD\uFF0C\u53EF\u4EE5\u653E\u5165\u5176\u4ED6\u7EC4\u4EF6" }), _jsx("div", { className: "tea-table__header", children: _jsxs("table", { className: "tea-table__box", children: [_jsxs("colgroup", { children: [_jsx("col", { style: { width: '18%' } }), _jsx("col", { style: { width: 'auto' } })] }), _jsx("thead", { children: _jsxs("tr", { children: [_jsx("th", { className: "", children: _jsx("div", { children: _jsx("span", { className: "tea-text-overflow", title: "\u5C5E\u6027\u540D", children: "\u540D\u79F0" }) }) }), _jsx("th", { className: "", children: _jsx("div", { children: _jsx("span", { className: "tea-text-overflow", title: "\u7C7B\u578B", children: "\u8BF4\u660E" }) }) })] }) })] }) }), _jsxs("table", { className: "tea-table__box", children: [_jsxs("colgroup", { children: [_jsx("col", { style: { width: '18%' } }), _jsx("col", { style: { width: 'auto' } })] }), _jsx("tbody", { children: tableView.map((row, index) => (_jsxs("tr", { children: [_jsx("td", { children: row.code }), _jsx("td", { children: row.description })] }, index))) })] })] })), type == 'description' && tableView.length > 0 && (_jsxs(_Fragment, { children: [_jsxs("h2", { className: "sbdocs-h2", children: [_jsx("a", { "aria-hidden": "true", className: "anchor enhancedAnchor_node_modules-@docusaurus-theme-classic-lib-next-theme-Heading-styles-module", id: "\u9002\u7528\u573A\u666F" }), "\u9002\u7528\u573A\u666F", _jsx("a", { className: "hash-link", href: "#\u9002\u7528\u573A\u666F", title: "\u6807\u9898\u7684\u76F4\u63A5\u94FE\u63A5", children: "#" })] }), _jsx("p", { children: ((_a = tableView[0]) === null || _a === void 0 ? void 0 : _a.description)
                             ? (_b = tableView[0]) === null || _b === void 0 ? void 0 : _b.description
                             : (_c = tableView[0]) === null || _c === void 0 ? void 0 : _c.desc })] })), tableView.length == 0 && _jsx("p", { children: "\u65E0" })] }));
 }