Merge pull request #1461 from alibaba/schema-builder

Schema builder 代码开源
alibaba · Feb 4, 2024 · 2e55bf9 · 2e55bf9
2 parents d9027aa + 387996e
commit 2e55bf9
Show file tree

Hide file tree

Showing 29 changed files with 1,628 additions and 6 deletions.
diff --git a/docs/schema-builder/api.md b/docs/schema-builder/api.md
@@ -32,6 +32,7 @@ mobile: false
 ## Btn
 | 属性                  | 描述                                                                      | 类型                 | 默认值     |
 | -------------------- | ------------------------------------------------------------------------  | ------------------- | --------- |
+| key                 |   按钮 key                                                                  | `string`           |   必填      |
 | text                 |   按钮文案                                                                  | `string`           |   -       |
 | order                |   按钮顺序                                                                  | `number`           |   -       |
 | onClick              |   按钮点击回调函数                                                           | `(schema) => void`  |   -       |

diff --git a/package.json b/package.json
@@ -60,7 +60,7 @@
     "@vitest/coverage-c8": "^0.25.8",
     "@vitest/ui": "^0.25.7",
     "@wojtekmaj/enzyme-adapter-react-17": "^0.6.7",
-    "antd": "^5.x",
+    "antd": "^4.x",
     "babel-jest": "^27.4.4",
     "babel-plugin-import": "^1.13.0",
     "babel-plugin-no-debugger": "^0.0.1",

diff --git a/tools/schema-builder/package.json b/tools/schema-builder/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@xrenders/schema-builder",
-  "version": "1.0.0-alpha.17",
+  "version": "1.0.0-alpha.18",
   "description": "通过 JSON Schema 生成标准 Form，常用于自定义搭建配置界面生成",
   "keywords": [
     "Form",

diff --git a/tools/schema-builder/src/createIframe.ts b/tools/schema-builder/src/createIframe.ts
@@ -11,7 +11,7 @@ const createIframeContent = () => {
         <link href="https://alifd.alicdn.com/npm/@alifd/[email protected]/dist/next.var.min.css" rel="stylesheet" />
         <link rel="stylesheet" href="https://uipaas-assets.com/prod/npm/@alilc/lowcode-engine/1.2.3/dist/css/engine-core.css" />
         <link rel="stylesheet" href="https://uipaas-assets.com/prod/npm/@alilc/lowcode-engine-ext/1.0.6/dist/css/engine-ext.css" />
-        <link rel="stylesheet" href="https://g.alicdn.com/fone-lowcode/fr-generator/1.0.14/css/index.css" />
+        <link rel="stylesheet" href="https://g.alicdn.com/fone-lowcode/fr-generator/1.1.0/css/index.css" />
 
         <script>
           window.React = window.parent.React;
@@ -25,12 +25,11 @@ const createIframeContent = () => {
         <script src="https://g.alicdn.com/code/lib/alifd__next/1.23.24/next.min.js"></script>
         <script crossorigin="anonymous" src="https://uipaas-assets.com/prod/npm/@alilc/lowcode-engine/1.2.3/dist/js/engine-core.js"></script>
         <script crossorigin="anonymous" src="https://uipaas-assets.com/prod/npm/@alilc/lowcode-engine-ext/1.0.6/dist/js/engine-ext.js"></script>
-
       </head>
 
       <body>
         <div id="lce-container"></div>
-        <script type="text/javascript" src="https://g.alicdn.com/fone-lowcode/fr-generator/1.0.14/js/index.js"></script>
+        <script type="text/javascript" src="https://g.alicdn.com/fone-lowcode/fr-generator/1.1.0/js/index.js"></script>
       </body>
     </html>
   `;

diff --git a/tools/schema-builder/src/main.tsx b/tools/schema-builder/src/main.tsx
@@ -1,5 +1,7 @@
 import React, { useEffect, useRef, useImperativeHandle, forwardRef } from 'react';
 import createIframe from './createIframe';
+import * as defaultSetting from './settings';
+
 import { TSchemaBuilder } from './type';
 
 let iframe: any;
@@ -36,7 +38,10 @@ const Design = (props: TSchemaBuilder, ref: any) => {
     }
 
     iframe?.contentWindow?.__FR_ENGINE__?.init({
-      settings,
+      settings: {
+        ...defaultSetting,
+        ...settings
+      },
       widgets,
       // recordEnable: true,
       logo: {

diff --git a/tools/schema-builder/src/settings/index.ts b/tools/schema-builder/src/settings/index.ts
@@ -0,0 +1,26 @@
+// 常用组件配置
+export { default as Input } from './meta/input';
+export { default as Number } from './meta/number';
+export { default as Select } from './meta/select';
+export { default as Radio } from './meta/radio';
+export { default as Checkbox } from './meta/checkbox';
+export { default as Checkboxes } from './meta/checkboxes';
+export { default as Textarea } from './meta/textarea';
+export { default as DatePicker } from './meta/date';
+export { default as DateRange } from './meta/dateRange';
+export { default as TimePicker } from './meta/time';
+export { default as TimeRange } from './meta/timeRange';
+export { default as Rate } from './meta/rate';
+export { default as Switch } from './meta/switch';
+export { default as Slider } from './meta/slider';
+
+// 其他组件配置
+export { default as Color } from './meta/color';
+export { default as ImageInput } from './meta/imageInput';
+export { default as UrlInput } from './meta/urlInput';
+export { default as TreeSelect } from './meta/treeSelect';
+
+// 容器组件配置
+export { default as Form } from './meta/form';
+export { default as card } from './meta/card';
+export { default as CardList } from './meta/cardList';
diff --git a/tools/schema-builder/src/settings/meta/card.ts b/tools/schema-builder/src/settings/meta/card.ts
@@ -0,0 +1,120 @@
+import { createMeta } from '../utils';
+
+const props: any = [
+  {
+    name: 'title',
+    title: { label: '标题', tip: 'title | 卡片主题' },
+    setter: 'StringSetter'
+  },
+  {
+    name: 'code',
+    title: { label: '字段名', tip: 'key | 字段名' },
+    setter: 'StringSetter',
+  },
+  {
+    name: 'description',
+    title: { label: '描述', tip: 'description ｜ 卡片的描述' },
+    setter: 'StringSetter'
+  },
+  {
+    name: 'column',
+    title: {
+      label: '一行多列',
+      tip: 'column ｜ 表单内容分成几列展示',
+    },
+    defaultValue: 1,
+    setter: {
+      componentName: 'RadioGroupSetter',
+      props: {
+        options: [
+          {
+            title: '一列',
+            value: 1,
+          },
+          {
+            title: '两列',
+            value: 2,
+          },
+          {
+            title: '三列',
+            value: 3,
+          },
+          {
+            title: '四列',
+            value: 4
+          }
+        ]
+      }
+    }
+  },
+  {
+    name: 'widget',
+    title: {
+      label: '类型',
+      tip: 'widget ｜ 类型',
+    },
+    defaultValue: 1,
+    setter: {
+      componentName: 'RadioGroupSetter',
+      props: {
+        options: [
+          {
+            title: '卡片',
+            value: 'card',
+          },
+          {
+            title: '折叠面板',
+            value: 'collapse',
+          },
+          {
+            title: '标题线',
+            value: 'lineTitle',
+          },
+          {
+            title: '内联',
+            value: 'subInline'
+          }
+        ]
+      }
+    }
+  },
+];
+
+const snippets = [
+  {
+    title: '对象',
+    screenshot: 'icon-object',
+    schema: {
+      componentName: 'Card',
+      props: {
+        title: '卡片主题',
+        description: '这是一个对象类型',
+        column: 3,
+        type: 'object',
+        widget: 'collapse'
+      }
+    }
+  }
+]
+
+export default createMeta('Card', {
+  title: '对象',
+  category: '布局',
+  group: '基础组件',
+  priority: 1,
+  props,
+  snippets,
+  configure: {
+    supports: {
+      loop: false,
+      condition: false
+    },
+    component: {
+      isContainer: true,
+      isModal: false,
+      nestingRule: {
+        parentWhitelist: ['FormRender', 'Card', 'CardList']
+      }
+    }
+  }
+});