From 4a5541ae0c4eaf8cd1d7ef1355df6bd8a822da90 Mon Sep 17 00:00:00 2001
From: helloqian12138 <johnhello12138@163.com>
Date: Tue, 4 Jan 2022 18:22:26 +0800
Subject: [PATCH 1/3] refactor: split render method of components in attributes
 form

---
 docs/drip-table-generator/guide/fast-start.md |  17 +-
 docs/drip-table-generator/preview/sample.tsx  |  35 +--
 .../index.module.less                         |   0
 .../{ArrayComponent => array-list}/index.tsx  |   0
 .../components/auto-complete/index.tsx        |  66 ++++
 .../CustomForm/components/cascade/index.tsx   |  50 +++
 .../CustomForm/components/checkbox/index.tsx  |  57 ++++
 .../components/code-editor/index.tsx          |  40 +++
 .../index.module.css                          |   0
 .../{ColorPicker => color-picker}/index.tsx   |   0
 .../components/CustomForm/components/index.ts |  28 +-
 .../CustomForm/components/input/index.tsx     |  64 ++++
 .../CustomForm/components/number/index.tsx    |  49 +++
 .../CustomForm/components/radio/index.tsx     |  59 ++++
 .../CustomForm/components/select/index.tsx    |  52 +++
 .../CustomForm/components/switch/index.tsx    |  57 ++++
 .../CustomForm/components/text/index.tsx      |  69 ++++
 .../src/components/CustomForm/index.tsx       | 297 ++++--------------
 .../src/index.module.less                     |   1 -
 .../src/layout/configs.ts                     |   2 +-
 .../src/table-components/links.ts             |   2 +-
 .../src/table-components/render-html.ts       |   9 +-
 .../src/table-components/tag.ts               |   8 +-
 .../src/table-components/text.ts              |   2 +-
 packages/drip-table-generator/src/typing.ts   |   6 +
 .../drip-table-generator/src/utils/index.ts   |  15 +
 26 files changed, 695 insertions(+), 290 deletions(-)
 rename packages/drip-table-generator/src/components/CustomForm/components/{ArrayComponent => array-list}/index.module.less (100%)
 rename packages/drip-table-generator/src/components/CustomForm/components/{ArrayComponent => array-list}/index.tsx (100%)
 create mode 100644 packages/drip-table-generator/src/components/CustomForm/components/auto-complete/index.tsx
 create mode 100644 packages/drip-table-generator/src/components/CustomForm/components/cascade/index.tsx
 create mode 100644 packages/drip-table-generator/src/components/CustomForm/components/checkbox/index.tsx
 create mode 100644 packages/drip-table-generator/src/components/CustomForm/components/code-editor/index.tsx
 rename packages/drip-table-generator/src/components/CustomForm/components/{ColorPicker => color-picker}/index.module.css (100%)
 rename packages/drip-table-generator/src/components/CustomForm/components/{ColorPicker => color-picker}/index.tsx (100%)
 create mode 100644 packages/drip-table-generator/src/components/CustomForm/components/input/index.tsx
 create mode 100644 packages/drip-table-generator/src/components/CustomForm/components/number/index.tsx
 create mode 100644 packages/drip-table-generator/src/components/CustomForm/components/radio/index.tsx
 create mode 100644 packages/drip-table-generator/src/components/CustomForm/components/select/index.tsx
 create mode 100644 packages/drip-table-generator/src/components/CustomForm/components/switch/index.tsx
 create mode 100644 packages/drip-table-generator/src/components/CustomForm/components/text/index.tsx

diff --git a/docs/drip-table-generator/guide/fast-start.md b/docs/drip-table-generator/guide/fast-start.md
index 5d54bcdcd..3d01f200d 100644
--- a/docs/drip-table-generator/guide/fast-start.md
+++ b/docs/drip-table-generator/guide/fast-start.md
@@ -16,17 +16,18 @@ drip-table-generator 依赖 `antd`、`drip-table` 和 `react`，单独使用不
 > yarn
 
 ```sh
-yarn add drip-table-generator
+yarn add drip-table-generator drip-table-driver-antd
 ```
 
 > npm
 ```sh
-npm install --save drip-table-generator
+npm install --save drip-table-generator drip-table-driver-antd
 ```
 
 ### 依赖引入
 
 ```js
+import DripTableDriverAntDesign from 'drip-table-driver-antd';
 import DripTableGenerator from 'drip-table-generator';
 import 'drip-table-generator/index.css';
 ```
@@ -34,7 +35,10 @@ import 'drip-table-generator/index.css';
 ### 页面引入
 
 ```js
-<DripTableGenerator />
+<DripTableGenerator
+  driver={DripTableDriverAntDesign}
+  dataSource={[]}
+/>
 ```
 
 ### 代码演示
@@ -46,11 +50,16 @@ import 'drip-table-generator/index.css';
  * hideActions: ["CSB"]
  */
 import React from 'react';
+import DripTableDriverAntDesign from 'drip-table-driver-antd';
 import DripTableGenerator from 'drip-table-generator';
+import 'drip-table-generator/index.css';
 
 const Demo = () => {
   return (
-    <DripTableGenerator />
+    <DripTableGenerator
+      driver={DripTableDriverAntDesign}
+      dataSource={[]}
+    />
   );
 };
 
diff --git a/docs/drip-table-generator/preview/sample.tsx b/docs/drip-table-generator/preview/sample.tsx
index 3cb6499a8..62a6e9c13 100755
--- a/docs/drip-table-generator/preview/sample.tsx
+++ b/docs/drip-table-generator/preview/sample.tsx
@@ -5,13 +5,13 @@
  */
 
 import React from 'react';
-import { Button, Row } from 'antd';
 import { DripTableSchema } from 'drip-table';
 import DripTableDriverAntDesign from 'drip-table-driver-antd';
 import DripTableGenerator, { DripTableGeneratorHandler } from 'drip-table-generator';
 import 'antd/dist/antd.css';
 import 'drip-table-generator/index.css';
 
+import { Button, Row } from 'antd';
 import { mockData } from '../../global-configs';
 import components from './component-settings';
 import TextComponent from './TextComponent';
@@ -68,7 +68,7 @@ const Demo = (props: { showHeader: boolean }) => {
       ) }
       <DripTableGenerator
         ref={generator}
-        style={{ height: 640 }}
+        style={{ height: 756 }}
         driver={DripTableDriverAntDesign}
         schema={initialSchema}
         dataSource={mockData.slice(0, 4)}
@@ -76,37 +76,6 @@ const Demo = (props: { showHeader: boolean }) => {
         onExportSchema={(schema) => { console.log(schema); }}
         customComponents={{ custom: { TextComponent } }}
         customComponentPanel={components}
-        customGlobalConfigPanel={[
-          {
-            name: 'bordered',
-            'ui:title': '是否展示边框',
-            'ui:type': 'switch',
-            'ui:props': {},
-            type: 'boolean',
-            default: false,
-          },
-          {
-            name: 'size',
-            'ui:title': '表格尺寸',
-            'ui:type': 'radio',
-            'ui:props': {
-              options: [
-                { label: '大号', value: 'large' },
-                { label: '中等', value: 'middle' },
-                { label: '小号', value: 'small' },
-              ],
-            },
-            type: 'string',
-            default: 'default',
-          },
-          {
-            name: 'tips',
-            'ui:title': '配置说明',
-            'ui:type': 'render-html',
-            type: 'string',
-            default: '<span style="color:red;">这是一段说明</span>',
-          },
-        ]}
       />
     </React.Fragment>
   );
diff --git a/packages/drip-table-generator/src/components/CustomForm/components/ArrayComponent/index.module.less b/packages/drip-table-generator/src/components/CustomForm/components/array-list/index.module.less
similarity index 100%
rename from packages/drip-table-generator/src/components/CustomForm/components/ArrayComponent/index.module.less
rename to packages/drip-table-generator/src/components/CustomForm/components/array-list/index.module.less
diff --git a/packages/drip-table-generator/src/components/CustomForm/components/ArrayComponent/index.tsx b/packages/drip-table-generator/src/components/CustomForm/components/array-list/index.tsx
similarity index 100%
rename from packages/drip-table-generator/src/components/CustomForm/components/ArrayComponent/index.tsx
rename to packages/drip-table-generator/src/components/CustomForm/components/array-list/index.tsx
diff --git a/packages/drip-table-generator/src/components/CustomForm/components/auto-complete/index.tsx b/packages/drip-table-generator/src/components/CustomForm/components/auto-complete/index.tsx
new file mode 100644
index 000000000..d4cc6716b
--- /dev/null
+++ b/packages/drip-table-generator/src/components/CustomForm/components/auto-complete/index.tsx
@@ -0,0 +1,66 @@
+/**
+ * This file is part of the jd-mkt5 launch.
+ * @link     : https://ace.jd.com/
+ * @author   : qianjing29 (qianjing29@jd.com)
+ * @modifier : qianjing29 (qianjing29@jd.com)
+ * @copyright: Copyright (c) 2020 JD Network Technology Co., Ltd.
+ */
+import React from 'react';
+import { AutoComplete, Select } from 'antd';
+import { StringDataSchema } from 'drip-table';
+import { DTGComponentPropertySchema } from '@/typing';
+
+interface Props {
+  schema: DTGComponentPropertySchema;
+  value?: string;
+  onChange?: (value: string) => void;
+  onValidate?: (errorMessage: string) => void;
+}
+
+type LabeledValue = React.ComponentProps<typeof Select>['options'];
+
+export default class AutoCompleteComponent extends React.PureComponent<Props> {
+  private transform(value: string) {
+    const transform = (this.props.schema as StringDataSchema).transform;
+    if (transform) {
+      transform.forEach((transformType) => {
+        if (transformType === 'trim') {
+          value = value.trim();
+        } else if (transformType === 'toLowerCase') {
+          value = value.toLowerCase();
+        } else if (transformType === 'toUpperCase') {
+          value = value.toUpperCase();
+        }
+      });
+    }
+    return value;
+  }
+
+  public render() {
+    const config = this.props.schema;
+    const uiProps = this.props.schema['ui:props'] || {};
+
+    return (
+      <AutoComplete
+        value={this.props.value as string}
+        placeholder={uiProps.placeholder as string}
+        disabled={uiProps.disabled as boolean}
+        style={{ width: 420, ...uiProps.style }}
+        options={uiProps.options as LabeledValue}
+        onChange={(value) => {
+          const formattedValue = this.transform(value);
+          this.props.onChange?.(formattedValue);
+          if (config.validate) {
+            const res = config.validate(formattedValue);
+            (res instanceof Promise ? res : Promise.resolve(res))
+              .then((message) => {
+                this.props.onValidate?.(message);
+                return message;
+              })
+              .catch((error) => { throw error; });
+          }
+        }}
+      />
+    );
+  }
+}
diff --git a/packages/drip-table-generator/src/components/CustomForm/components/cascade/index.tsx b/packages/drip-table-generator/src/components/CustomForm/components/cascade/index.tsx
new file mode 100644
index 000000000..a12402271
--- /dev/null
+++ b/packages/drip-table-generator/src/components/CustomForm/components/cascade/index.tsx
@@ -0,0 +1,50 @@
+/**
+ * This file is part of the jd-mkt5 launch.
+ * @link     : https://ace.jd.com/
+ * @author   : qianjing29 (qianjing29@jd.com)
+ * @modifier : qianjing29 (qianjing29@jd.com)
+ * @copyright: Copyright (c) 2020 JD Network Technology Co., Ltd.
+ */
+import React from 'react';
+import { Cascader as Cascade } from 'antd';
+import { DTGComponentPropertySchema } from '@/typing';
+
+type CascadeProps = React.ComponentProps<typeof Cascade>;
+
+interface Props {
+  schema: DTGComponentPropertySchema;
+  value?: number;
+  onChange?: (value: number) => void;
+  onValidate?: (errorMessage: string) => void;
+}
+
+export default class CascadeComponent extends React.PureComponent<Props> {
+  public render() {
+    const config = this.props.schema;
+    const uiProps = this.props.schema['ui:props'] || {};
+
+    return (
+      <Cascade
+        {...uiProps}
+        options={uiProps.options as CascadeProps['options']}
+        defaultValue={config.default as CascadeProps['defaultValue']}
+        value={this.props.value as CascadeProps['value']}
+        displayRender={uiProps.displayRender as CascadeProps['displayRender']}
+        disabled={uiProps.disabled as boolean}
+        style={{ width: 420, ...uiProps.style }}
+        onChange={(value) => {
+          this.props.onChange?.(value);
+          if (config.validate) {
+            const res = config.validate(value);
+            (res instanceof Promise ? res : Promise.resolve(res))
+              .then((msg) => {
+                this.props.onValidate?.(msg);
+                return msg;
+              })
+              .catch((error) => { throw error; });
+          }
+        }}
+      />
+    );
+  }
+}
diff --git a/packages/drip-table-generator/src/components/CustomForm/components/checkbox/index.tsx b/packages/drip-table-generator/src/components/CustomForm/components/checkbox/index.tsx
new file mode 100644
index 000000000..47e2965dc
--- /dev/null
+++ b/packages/drip-table-generator/src/components/CustomForm/components/checkbox/index.tsx
@@ -0,0 +1,57 @@
+/**
+ * This file is part of the jd-mkt5 launch.
+ * @link     : https://ace.jd.com/
+ * @author   : qianjing29 (qianjing29@jd.com)
+ * @modifier : qianjing29 (qianjing29@jd.com)
+ * @copyright: Copyright (c) 2020 JD Network Technology Co., Ltd.
+ */
+import React from 'react';
+import { Checkbox, Popover } from 'antd';
+import { QuestionCircleOutlined } from '@ant-design/icons';
+import { DTGComponentPropertySchema } from '@/typing';
+import { filterAttributes } from '@/utils';
+
+type CheckboxGroupProps = React.ComponentProps<typeof Checkbox.Group>;
+type CheckboxValueType = CheckboxGroupProps['value'];
+type CheckboxOptionType = NonNullable<CheckboxGroupProps['options']>[number] & { description?: string };
+
+interface Props {
+  schema: DTGComponentPropertySchema;
+  value?: CheckboxValueType;
+  onChange?: (value: CheckboxValueType) => void;
+  onValidate?: (errorMessage: string) => void;
+}
+
+export default class CheckboxComponent extends React.PureComponent<Props> {
+  public render() {
+    const config = this.props.schema;
+    const uiProps = this.props.schema['ui:props'] || {};
+
+    return (
+      <Checkbox.Group
+        {...filterAttributes(uiProps, 'options')}
+        defaultValue={config.default as CheckboxGroupProps['defaultValue']}
+        value={this.props.value}
+        onChange={(value) => {
+          this.props.onChange?.(value);
+        }}
+      >
+        { (uiProps.options as CheckboxOptionType[])?.map((option, i) => {
+          if (typeof option === 'string') {
+            option = { label: option, value: option };
+          }
+          return (
+            <Checkbox key={i} value={option.value} style={option.style} disabled={option.disabled}>
+              { option.label }
+              { option.description && (
+                <Popover content={option.description}>
+                  <QuestionCircleOutlined style={{ margin: '0 8px' }} />
+                </Popover>
+              ) }
+            </Checkbox>
+          );
+        }) }
+      </Checkbox.Group>
+    );
+  }
+}
diff --git a/packages/drip-table-generator/src/components/CustomForm/components/code-editor/index.tsx b/packages/drip-table-generator/src/components/CustomForm/components/code-editor/index.tsx
new file mode 100644
index 000000000..f8a4b484e
--- /dev/null
+++ b/packages/drip-table-generator/src/components/CustomForm/components/code-editor/index.tsx
@@ -0,0 +1,40 @@
+/**
+ * This file is part of the jd-mkt5 launch.
+ * @link     : https://ace.jd.com/
+ * @author   : qianjing29 (qianjing29@jd.com)
+ * @modifier : qianjing29 (qianjing29@jd.com)
+ * @copyright: Copyright (c) 2020 JD Network Technology Co., Ltd.
+ */
+import React from 'react';
+import MonacoEditor from '@monaco-editor/react';
+import { DTGComponentPropertySchema } from '@/typing';
+
+interface Props {
+  schema: DTGComponentPropertySchema;
+  value?: string;
+  onChange?: (value: string) => void;
+  onValidate?: (errorMessage: string) => void;
+}
+
+export default class CodeEditorComponent extends React.PureComponent<Props> {
+  public render() {
+    const uiProps = this.props.schema['ui:props'] || {};
+
+    return (
+      <div style={uiProps.style}>
+        <MonacoEditor
+          width="100%"
+          height={uiProps.style?.height as number || 320}
+          language={uiProps.language as string || 'javascript'}
+          theme="vs-dark"
+          value={this.props.value as string}
+          onChange={(value) => { this.props.onChange?.(value || ''); }}
+          onValidate={(markers) => {
+            const errorMessages = markers.map(item => item.message).join('\n');
+            this.props.onValidate?.(errorMessages);
+          }}
+        />
+      </div>
+    );
+  }
+}
diff --git a/packages/drip-table-generator/src/components/CustomForm/components/ColorPicker/index.module.css b/packages/drip-table-generator/src/components/CustomForm/components/color-picker/index.module.css
similarity index 100%
rename from packages/drip-table-generator/src/components/CustomForm/components/ColorPicker/index.module.css
rename to packages/drip-table-generator/src/components/CustomForm/components/color-picker/index.module.css
diff --git a/packages/drip-table-generator/src/components/CustomForm/components/ColorPicker/index.tsx b/packages/drip-table-generator/src/components/CustomForm/components/color-picker/index.tsx
similarity index 100%
rename from packages/drip-table-generator/src/components/CustomForm/components/ColorPicker/index.tsx
rename to packages/drip-table-generator/src/components/CustomForm/components/color-picker/index.tsx
diff --git a/packages/drip-table-generator/src/components/CustomForm/components/index.ts b/packages/drip-table-generator/src/components/CustomForm/components/index.ts
index bbfe9f109..24ba3fe1b 100644
--- a/packages/drip-table-generator/src/components/CustomForm/components/index.ts
+++ b/packages/drip-table-generator/src/components/CustomForm/components/index.ts
@@ -5,10 +5,30 @@
  * @modifier : helloqian12138 (johnhello12138@163.com)
  * @copyright: Copyright (c) 2020 JD Network Technology Co., Ltd.
  */
-import ArrayComponent from './ArrayComponent';
-import ColorPicker from './ColorPicker';
+import ArrayComponent from './array-list';
+import ColorPicker from './color-picker';
+import InputComponent from './input';
+import AutoComplete from './auto-complete';
+import TextComponent from './text';
+import Checkbox from './checkbox';
+import RadioComponent from './radio';
+import SwitchComponent from './switch';
+import SelectComponent from './select';
+import InputNumberComponent from './number';
+import CascadeComponent from './cascade';
+import CodeEditorComponent from './code-editor';
 
 export default {
-  ArrayComponent,
-  ColorPicker,
+  input: InputComponent,
+  text: TextComponent,
+  number: InputNumberComponent,
+  checkbox: Checkbox,
+  radio: RadioComponent,
+  switch: SwitchComponent,
+  select: SelectComponent,
+  cascade: CascadeComponent,
+  'code-editor': CodeEditorComponent,
+  'auto-complete': AutoComplete,
+  'array-list': ArrayComponent,
+  'color-picker': ColorPicker,
 };
diff --git a/packages/drip-table-generator/src/components/CustomForm/components/input/index.tsx b/packages/drip-table-generator/src/components/CustomForm/components/input/index.tsx
new file mode 100644
index 000000000..4c2e221d8
--- /dev/null
+++ b/packages/drip-table-generator/src/components/CustomForm/components/input/index.tsx
@@ -0,0 +1,64 @@
+/**
+ * This file is part of the jd-mkt5 launch.
+ * @link     : https://ace.jd.com/
+ * @author   : qianjing29 (qianjing29@jd.com)
+ * @modifier : qianjing29 (qianjing29@jd.com)
+ * @copyright: Copyright (c) 2020 JD Network Technology Co., Ltd.
+ */
+import React from 'react';
+import { Input } from 'antd';
+import { StringDataSchema } from 'drip-table';
+import { DTGComponentPropertySchema } from '@/typing';
+
+interface Props {
+  schema: DTGComponentPropertySchema;
+  value?: string;
+  onChange?: (value: string) => void;
+  onValidate?: (errorMessage: string) => void;
+}
+
+export default class InputComponent extends React.PureComponent<Props> {
+  private transform(value: string) {
+    const transform = (this.props.schema as StringDataSchema).transform;
+    if (transform) {
+      transform.forEach((transformType) => {
+        if (transformType === 'trim') {
+          value = value.trim();
+        } else if (transformType === 'toLowerCase') {
+          value = value.toLowerCase();
+        } else if (transformType === 'toUpperCase') {
+          value = value.toUpperCase();
+        }
+      });
+    }
+    return value;
+  }
+
+  public render() {
+    const config = this.props.schema;
+    const uiProps = this.props.schema['ui:props'] || {};
+
+    return (
+      <Input
+        {...uiProps}
+        value={this.props.value as string}
+        placeholder={uiProps.placeholder as string}
+        disabled={uiProps.disabled as boolean}
+        style={{ width: 420, ...uiProps.style }}
+        onChange={(e) => {
+          const value = this.transform(e.target.value);
+          this.props.onChange?.(value);
+          if (config.validate) {
+            const res = config.validate(value);
+            (res instanceof Promise ? res : Promise.resolve(res))
+              .then((msg) => {
+                this.props.onValidate?.(msg);
+                return msg;
+              })
+              .catch((error) => { throw error; });
+          }
+        }}
+      />
+    );
+  }
+}
diff --git a/packages/drip-table-generator/src/components/CustomForm/components/number/index.tsx b/packages/drip-table-generator/src/components/CustomForm/components/number/index.tsx
new file mode 100644
index 000000000..ff085bd97
--- /dev/null
+++ b/packages/drip-table-generator/src/components/CustomForm/components/number/index.tsx
@@ -0,0 +1,49 @@
+/**
+ * This file is part of the jd-mkt5 launch.
+ * @link     : https://ace.jd.com/
+ * @author   : qianjing29 (qianjing29@jd.com)
+ * @modifier : qianjing29 (qianjing29@jd.com)
+ * @copyright: Copyright (c) 2020 JD Network Technology Co., Ltd.
+ */
+import React from 'react';
+import { InputNumber } from 'antd';
+import { DTGComponentPropertySchema } from '@/typing';
+
+interface Props {
+  schema: DTGComponentPropertySchema;
+  value?: number;
+  onChange?: (value: number) => void;
+  onValidate?: (errorMessage: string) => void;
+}
+
+export default class InputNumberComponent extends React.PureComponent<Props> {
+  public render() {
+    const config = this.props.schema;
+    const uiProps = this.props.schema['ui:props'] || {};
+
+    return (
+      <InputNumber<number>
+        {...uiProps}
+        max={uiProps.max as number}
+        min={uiProps.min as number}
+        precision={uiProps.precision as number}
+        value={this.props.value}
+        placeholder={uiProps.placeholder as string}
+        disabled={uiProps.disabled as boolean}
+        style={{ width: 420, ...uiProps.style }}
+        onChange={(value) => {
+          this.props.onChange?.(value);
+          if (config.validate) {
+            const res = config.validate(value);
+            (res instanceof Promise ? res : Promise.resolve(res))
+              .then((msg) => {
+                this.props.onValidate?.(msg);
+                return msg;
+              })
+              .catch((error) => { throw error; });
+          }
+        }}
+      />
+    );
+  }
+}
diff --git a/packages/drip-table-generator/src/components/CustomForm/components/radio/index.tsx b/packages/drip-table-generator/src/components/CustomForm/components/radio/index.tsx
new file mode 100644
index 000000000..f7b7a925c
--- /dev/null
+++ b/packages/drip-table-generator/src/components/CustomForm/components/radio/index.tsx
@@ -0,0 +1,59 @@
+/**
+ * This file is part of the jd-mkt5 launch.
+ * @link     : https://ace.jd.com/
+ * @author   : qianjing29 (qianjing29@jd.com)
+ * @modifier : qianjing29 (qianjing29@jd.com)
+ * @copyright: Copyright (c) 2020 JD Network Technology Co., Ltd.
+ */
+import React from 'react';
+import { Popover, Radio } from 'antd';
+import { QuestionCircleOutlined } from '@ant-design/icons';
+import { DTGComponentPropertySchema } from '@/typing';
+import { filterAttributes } from '@/utils';
+
+const RadioGroup = Radio.Group;
+
+ type RadioGroupProps = React.ComponentProps<typeof RadioGroup>;
+ type RadioValueType = RadioGroupProps['value'];
+ type RadioOptionType = NonNullable<RadioGroupProps['options']>[number] & { description?: string };
+
+interface Props {
+  schema: DTGComponentPropertySchema;
+  value?: RadioValueType;
+  onChange?: (value: RadioValueType) => void;
+  onValidate?: (errorMessage: string) => void;
+}
+
+export default class RadioComponent extends React.PureComponent<Props> {
+  public render() {
+    const config = this.props.schema;
+    const uiProps = this.props.schema['ui:props'] || {};
+
+    return (
+      <RadioGroup
+        {...filterAttributes(uiProps, 'options')}
+        defaultValue={config.default as RadioGroupProps['defaultValue']}
+        value={this.props.value}
+        onChange={(e) => {
+          this.props.onChange?.(e.target.value);
+        }}
+      >
+        { (uiProps.options as RadioOptionType[])?.map((option, i) => {
+          if (typeof option === 'string') {
+            option = { label: option, value: option };
+          }
+          return (
+            <Radio key={i} value={option.value} style={option.style} disabled={option.disabled}>
+              { option.label }
+              { option.description && (
+              <Popover content={option.description}>
+                <QuestionCircleOutlined style={{ margin: '0 8px' }} />
+              </Popover>
+              ) }
+            </Radio>
+          );
+        }) }
+      </RadioGroup>
+    );
+  }
+}
diff --git a/packages/drip-table-generator/src/components/CustomForm/components/select/index.tsx b/packages/drip-table-generator/src/components/CustomForm/components/select/index.tsx
new file mode 100644
index 000000000..c692884a9
--- /dev/null
+++ b/packages/drip-table-generator/src/components/CustomForm/components/select/index.tsx
@@ -0,0 +1,52 @@
+/**
+ * This file is part of the jd-mkt5 launch.
+ * @link     : https://ace.jd.com/
+ * @author   : qianjing29 (qianjing29@jd.com)
+ * @modifier : qianjing29 (qianjing29@jd.com)
+ * @copyright: Copyright (c) 2020 JD Network Technology Co., Ltd.
+ */
+import React from 'react';
+import { Select } from 'antd';
+import { DTGComponentPropertySchema } from '@/typing';
+
+type SelectProps = React.ComponentProps<typeof Select>;
+type SelectValueType = SelectProps['value'];
+type SelectOptionType = NonNullable<SelectProps['options']>[number];
+
+interface Props {
+  schema: DTGComponentPropertySchema;
+  value?: SelectValueType;
+  onChange?: (value: SelectValueType) => void;
+  onValidate?: (errorMessage: string) => void;
+}
+
+export default class SelectComponent extends React.PureComponent<Props> {
+  private get formattedValue() {
+    const uiProps = this.props.schema['ui:props'] || {};
+    if ((uiProps.mode === 'multiple' || uiProps.mode === 'tags') && !Array.isArray(this.props.value)) {
+      return this.props.value ? [this.props.value] : [];
+    }
+    return this.props.value;
+  }
+
+  public render() {
+    const config = this.props.schema;
+    const uiProps = this.props.schema['ui:props'] || {};
+
+    return (
+      <Select
+        {...uiProps}
+        showSearch
+        allowClear={uiProps.allowClear as boolean}
+        style={{ width: 420, ...uiProps.style }}
+        mode={uiProps.mode as 'multiple' | 'tags'}
+        defaultValue={config.default as SelectValueType}
+        value={this.formattedValue as SelectValueType}
+        options={(uiProps.options as SelectOptionType[] || []).map(v => ({ label: v.label, value: v.value }))}
+        onChange={(value) => {
+          this.props.onChange?.(value);
+        }}
+      />
+    );
+  }
+}
diff --git a/packages/drip-table-generator/src/components/CustomForm/components/switch/index.tsx b/packages/drip-table-generator/src/components/CustomForm/components/switch/index.tsx
new file mode 100644
index 000000000..97f47d5b4
--- /dev/null
+++ b/packages/drip-table-generator/src/components/CustomForm/components/switch/index.tsx
@@ -0,0 +1,57 @@
+/**
+ * This file is part of the jd-mkt5 launch.
+ * @link     : https://ace.jd.com/
+ * @author   : qianjing29 (qianjing29@jd.com)
+ * @modifier : qianjing29 (qianjing29@jd.com)
+ * @copyright: Copyright (c) 2020 JD Network Technology Co., Ltd.
+ */
+import React, { ReactNode } from 'react';
+import { Switch } from 'antd';
+import { DTGComponentPropertySchema } from '@/typing';
+
+interface Props {
+  schema: DTGComponentPropertySchema;
+  value?: string | number | boolean;
+  onChange?: (value: string | number | boolean) => void;
+  onValidate?: (errorMessage: string) => void;
+}
+
+export default class SwitchComponent extends React.PureComponent<Props> {
+  private get checked() {
+    const uiProps = this.props.schema['ui:props'] || {};
+    if (uiProps.checkedValue && uiProps.unCheckedValue) {
+      if (this.props.value === uiProps.checkedValue) {
+        return true;
+      }
+      return false;
+    }
+    if (typeof this.props.value === 'string' || typeof this.props.value === 'number') {
+      return false;
+    }
+    return !!this.props.value;
+  }
+
+  private encodeValue(checked: boolean) {
+    const uiProps = this.props.schema['ui:props'] || {};
+    if (uiProps.checkedValue && uiProps.unCheckedValue) {
+      return checked ? uiProps.checkedValue as string | number : uiProps.unCheckedValue as string | number;
+    }
+    return checked;
+  }
+
+  public render() {
+    const uiProps = this.props.schema['ui:props'] || {};
+
+    return (
+      <Switch
+        {...uiProps}
+        checked={this.checked}
+        checkedChildren={uiProps.checkedChildren as ReactNode || '是'}
+        unCheckedChildren={uiProps.uncheckedChildren as ReactNode || '否'}
+        onChange={(checked: boolean) => {
+          this.props.onChange?.(this.encodeValue(checked));
+        }}
+      />
+    );
+  }
+}
diff --git a/packages/drip-table-generator/src/components/CustomForm/components/text/index.tsx b/packages/drip-table-generator/src/components/CustomForm/components/text/index.tsx
new file mode 100644
index 000000000..1ae6ce464
--- /dev/null
+++ b/packages/drip-table-generator/src/components/CustomForm/components/text/index.tsx
@@ -0,0 +1,69 @@
+/**
+ * This file is part of the jd-mkt5 launch.
+ * @link     : https://ace.jd.com/
+ * @author   : qianjing29 (qianjing29@jd.com)
+ * @modifier : qianjing29 (qianjing29@jd.com)
+ * @copyright: Copyright (c) 2020 JD Network Technology Co., Ltd.
+ */
+import React from 'react';
+import { Input } from 'antd';
+import { StringDataSchema } from 'drip-table';
+import { DTGComponentPropertySchema } from '@/typing';
+
+interface Props {
+  schema: DTGComponentPropertySchema;
+  value?: string;
+  onChange?: (value: string) => void;
+  onValidate?: (errorMessage: string) => void;
+}
+
+const TextArea = Input.TextArea;
+
+export default class TextComponent extends React.PureComponent<Props> {
+  private transform(value: string) {
+    const transform = (this.props.schema as StringDataSchema).transform;
+    if (transform) {
+      transform.forEach((transformType) => {
+        if (transformType === 'trim') {
+          value = value.trim();
+        } else if (transformType === 'toLowerCase') {
+          value = value.toLowerCase();
+        } else if (transformType === 'toUpperCase') {
+          value = value.toUpperCase();
+        }
+      });
+    }
+    return value;
+  }
+
+  public render() {
+    const config = this.props.schema;
+    const uiProps = this.props.schema['ui:props'] || {};
+
+    return (
+      <TextArea
+        value={this.props.value as string}
+        placeholder={uiProps.placeholder as string}
+        disabled={uiProps.disabled as boolean}
+        style={{ width: 420, ...uiProps.style }}
+        autoSize={{
+          minRows: uiProps.minRows as number,
+          maxRows: uiProps.maxRows as number,
+        }}
+        onChange={(e) => {
+          const formattedValue = this.transform(e.target.value);
+          this.props.onChange?.(formattedValue);
+          if (config.validate) {
+            const res = config.validate(formattedValue);
+            (res instanceof Promise ? res : Promise.resolve(res))
+              .then((message) => {
+                this.props.onValidate?.(message);
+                return message;
+              })
+              .catch((error) => { throw error; });
+          }
+        }}
+      />
+    );
+  }
+}
diff --git a/packages/drip-table-generator/src/components/CustomForm/index.tsx b/packages/drip-table-generator/src/components/CustomForm/index.tsx
index 643f9d640..fc9fb4baa 100644
--- a/packages/drip-table-generator/src/components/CustomForm/index.tsx
+++ b/packages/drip-table-generator/src/components/CustomForm/index.tsx
@@ -6,22 +6,23 @@
  * @copyright: Copyright (c) 2020 JD Network Technology Co., Ltd.
  */
 
-import React, { Component, ReactNode } from 'react';
-import { Form, Input, Switch, Cascader, Button, Select, Radio, Checkbox, InputNumber, Popover, message, AutoComplete } from 'antd';
-import { StringDataSchema } from 'drip-table';
-import MonacoEditor from '@monaco-editor/react';
+import React, { Component } from 'react';
+import { Alert, Col, Form, Popover, Row } from 'antd';
 import { QuestionCircleOutlined } from '@ant-design/icons';
-import { LabeledValue, SelectValue } from 'antd/lib/select';
 import { DTGComponentPropertySchema } from '@/typing';
-import ExtraComponents from './components';
+import BuiltInComponents from './components';
 import RichText from '@/components/RichText';
 import 'rc-color-picker/assets/index.css';
 
-type CheckboxGroupProps = React.ComponentProps<typeof Checkbox.Group>;
-type CascaderProps = React.ComponentProps<typeof Cascader>;
-
+interface CustomComponentProps {
+  schema: DTGComponentPropertySchema;
+  value?: string;
+  onChange?: (value: string) => void;
+  onValidate?: (errorMessage: string) => void;
+}
 interface Props<T> {
   configs: DTGComponentPropertySchema[];
+  extraComponents?: Record<string, new <P extends CustomComponentProps>(props: P) => React.PureComponent<P>>;
   data?: T;
   key?: string;
   extendKeys?: string[];
@@ -116,235 +117,36 @@ export default class CustomForm<T> extends Component<Props<T>, State> {
   public renderFormComponent(config: DTGComponentPropertySchema) {
     const { formValues, helpMsg } = this.state;
     const uiProps = config['ui:props'] || {};
-    if (config['ui:type'] === 'input') {
-      return (
-        <Input
-          value={formValues[config.name] as string}
-          placeholder={uiProps.placeholder as string}
-          disabled={uiProps.disabled as boolean}
-          style={{ width: 420, ...uiProps.style }}
-          onChange={(e) => {
-            const value = e.target.value;
-            formValues[config.name] = (config as StringDataSchema).transform?.includes('trim') ? value.trim() : value;
-            this.setState({ formValues }, () => { this.changeData(); });
-            if (config.validate) {
-              const res = config.validate(value);
-              (res instanceof Promise ? res : Promise.resolve(res))
-                .then((msg) => {
-                  helpMsg[config.name] = msg || '';
-                  this.setState({ helpMsg });
-                  return msg;
-                })
-                .catch((error) => { throw error; });
-            }
-          }}
-        />
-      );
-    }
-    if (config['ui:type'] === 'text') {
-      return (
-        <Input.TextArea
-          value={formValues[config.name] as string}
-          placeholder={uiProps.placeholder as string}
-          disabled={uiProps.disabled as boolean}
-          style={{ width: 420, ...uiProps.style }}
-          autoSize={{
-            minRows: uiProps.minRows as number,
-            maxRows: uiProps.maxRows as number,
-          }}
-          onChange={(e) => {
-            const value = e.target.value;
-            formValues[config.name] = (config as StringDataSchema).transform?.includes('trim') ? value.trim() : value;
-            this.setState({ formValues }, () => { this.changeData(); });
-            if (config.validate) {
-              const res = config.validate(value);
-              (res instanceof Promise ? res : Promise.resolve(res))
-                .then((msg) => {
-                  helpMsg[config.name] = msg || '';
-                  this.setState({ helpMsg });
-                  return msg;
-                })
-                .catch((error) => { throw error; });
-            }
-          }}
-        />
-      );
-    }
-    if (config['ui:type'] === 'auto-complete') {
-      return (
-        <AutoComplete
-          value={formValues[config.name] as string}
-          placeholder={uiProps.placeholder as string}
-          disabled={uiProps.disabled as boolean}
-          style={{ width: 420, ...uiProps.style }}
-          options={uiProps.options as LabeledValue[]}
-          onChange={(value) => {
-            formValues[config.name] = (config as StringDataSchema).transform?.includes('trim') ? value.trim() : value;
-            this.setState({ formValues }, () => { this.changeData(); });
-            if (config.validate) {
-              const res = config.validate(value);
-              (res instanceof Promise ? res : Promise.resolve(res))
-                .then((msg) => {
-                  helpMsg[config.name] = msg || '';
-                  this.setState({ helpMsg });
-                  return msg;
-                })
-                .catch((error) => { throw error; });
-            }
-          }}
-        />
-      );
-    }
-    if (config['ui:type'] === 'switch') {
-      const checkedValue = uiProps.checkedValue ? formValues[config.name] === uiProps.checkedValue : formValues[config.name] as boolean;
-      return (
-        <Switch
-          checked={checkedValue}
-          checkedChildren={uiProps.checkedChildren as ReactNode || '是'}
-          unCheckedChildren={uiProps.uncheckedChildren as ReactNode || '否'}
-          onChange={(checked: boolean) => {
-            let value: boolean | string | number = checked;
-            if (uiProps.checkedValue && uiProps.unCheckedValue) {
-              value = checked ? uiProps.checkedValue as string | number : uiProps.unCheckedValue as string | number;
-            }
-            formValues[config.name] = value;
-            this.setState({ formValues }, () => { this.changeData(); });
-          }}
-        />
-      );
-    }
-    if (config['ui:type'] === 'number') {
+    if (config['ui:type'] === 'render-html') {
       return (
-        <InputNumber
-          value={formValues[config.name] as number}
-          max={uiProps.max as number}
-          min={uiProps.min as number}
-          precision={uiProps.precision as number}
-          onChange={(checked) => {
-            formValues[config.name] = checked;
-            this.setState({ formValues }, () => { this.changeData(); });
-          }}
-        />
+        <RichText html={config.default as string} />
       );
     }
-    if (config['ui:type'] === 'checkbox') {
+    if (config['ui:type'].startsWith('custom::')) {
+      const ComponentName = config['ui:type'].replace('custom::', '');
+      const CustomComponent = this.props.extraComponents?.[ComponentName] || config['ui:externalComponent'];
       return (
-        <Checkbox.Group
-          defaultValue={config.default as CheckboxGroupProps['defaultValue']}
-          value={formValues[config.name] as CheckboxGroupProps['value']}
+        <CustomComponent
+          schema={config}
+          value={formValues[config.name] as Record<string, string> | Record<string, string>[]}
           onChange={(value) => {
             formValues[config.name] = value;
-            this.setState({ formValues }, () => { this.changeData(); });
+            this.setState({ formValues }, () => {
+              this.changeData();
+            });
           }}
-        >
-          { (uiProps.options as CheckboxGroupProps['options'])?.map((option, i) => {
-            if (typeof option === 'string') {
-              option = { label: option, value: option };
-            }
-            return (
-              <Checkbox key={i} value={option.value} style={option.style} disabled={option.disabled}>{ option.label }</Checkbox>
-            );
-          }) }
-        </Checkbox.Group>
-      );
-    }
-    if (config['ui:type'] === 'radio') {
-      return (
-        <Radio.Group
-          defaultValue={config.default}
-          value={formValues[config.name] as number | string}
-          onChange={(e) => {
-            formValues[config.name] = e.target.value;
-            this.setState({ formValues }, () => { this.changeData(); });
+          onValidate={(msg: string) => {
+            helpMsg[config.name] = msg || '';
+            this.setState({ helpMsg });
           }}
-        >
-          { (uiProps.options as CheckboxGroupProps['options'])?.map((option, i) => {
-            if (typeof option === 'string') {
-              option = { label: option, value: option };
-            }
-            return (<Radio key={i} value={option.value} style={option.style} disabled={option.disabled}>{ option.label }</Radio>);
-          }) }
-        </Radio.Group>
-      );
-    }
-    if (config['ui:type'] === 'select') {
-      const formattedValue = (uiProps.mode === 'multiple' || uiProps.mode === 'tags') && !Array.isArray(formValues[config.name]) ? [formValues[config.name]] : formValues[config.name];
-      return (
-        <Select
           {...uiProps}
-          showSearch
-          allowClear={uiProps.allowClear as boolean}
-          style={{ width: 420, ...uiProps.style }}
-          mode={uiProps.mode as 'multiple' | 'tags'}
-          defaultValue={config.default as SelectValue}
-          value={formattedValue as SelectValue}
-          options={(uiProps.options as { label: string; value: string }[] || []).map(v => ({ label: v.label, value: v.value }))}
-          onChange={(value) => {
-            formValues[config.name] = value;
-            this.setState({ formValues }, () => { this.changeData(); });
-          }}
         />
       );
     }
-    if (config['ui:type'] === 'cascader') {
+    const BuiltInComponent = BuiltInComponents[config['ui:type']];
+    if (BuiltInComponent) {
       return (
-        <Cascader
-          options={uiProps.options as CascaderProps['options']}
-          defaultValue={config.default as CascaderProps['defaultValue']}
-          value={formValues[config.name] as CascaderProps['value']}
-          displayRender={uiProps.displayRender as CascaderProps['displayRender']}
-          disabled={uiProps.disabled as boolean}
-          style={{ width: 420, ...uiProps.style }}
-          onChange={(value) => {
-            formValues[config.name] = value;
-            this.setState({ formValues }, () => { this.changeData(); });
-          }}
-        />
-      );
-    }
-    if (config['ui:type'] === 'code-editor') {
-      let codeStr = formValues[config.name] as string;
-      let marks: { message: string }[] = [];
-      return (
-        <div style={{ position: 'relative' }}>
-          <div style={{ margin: '8px 0', position: 'absolute', top: '-42px', right: '2px' }}>
-            <Button onClick={() => {
-              if (marks.length <= 0) {
-                formValues[config.name] = codeStr;
-                this.setState({ formValues }, () => { this.changeData(); });
-              } else {
-                message.error(marks.map(item => item.message).join('\n'));
-              }
-            }}
-            >
-              提交代码
-            </Button>
-          </div>
-          <MonacoEditor
-            width="100%"
-            height={356}
-            language="javascript"
-            theme="vs-dark"
-            value={codeStr}
-            onChange={(value) => { codeStr = value || ''; }}
-            onValidate={(markers) => {
-              marks = markers;
-            }}
-          />
-        </div>
-      );
-    }
-    if (config['ui:type'] === 'render-html') {
-      return (
-        <RichText html={config.default as string} />
-      );
-    }
-    if (config['ui:type'].startsWith('custom::')) {
-      const ComponentName = config['ui:type'].replace('custom::', '');
-      const CustomComponent = ExtraComponents[ComponentName] || config['ui:externalComponent'];
-
-      return (
-        <CustomComponent
+        <BuiltInComponent
           schema={config}
           value={formValues[config.name] as Record<string, string> | Record<string, string>[]}
           onChange={(value) => {
@@ -353,11 +155,14 @@ export default class CustomForm<T> extends Component<Props<T>, State> {
               this.changeData();
             });
           }}
+          onValidate={(msg: string) => {
+            helpMsg[config.name] = msg || '';
+            this.setState({ helpMsg });
+          }}
           {...uiProps}
         />
       );
     }
-
     return null;
   }
 
@@ -387,8 +192,8 @@ export default class CustomForm<T> extends Component<Props<T>, State> {
 
   public renderFormItem(config: DTGComponentPropertySchema) {
     const { helpMsg } = this.state;
-    const labelCol = 6;
-    const wrapperCol = config['ui:type'] === 'code-editor' ? 24 : 16;
+    const labelCol = config['ui:layout']?.labelCol || 8;
+    const wrapperCol = config['ui:layout']?.wrapperCol || 16;
     const formItemLayout = {
       labelCol: { xs: { span: labelCol }, sm: { span: labelCol } },
       wrapperCol: { xs: { span: wrapperCol }, sm: { span: wrapperCol } },
@@ -397,18 +202,30 @@ export default class CustomForm<T> extends Component<Props<T>, State> {
     const visible = this.visible(config);
     if (!visible) { return null; }
     return (
-      <Form.Item
-        key={key}
-        label={this.renderTitleLabel(config)}
-        colon={false}
-        validateStatus={helpMsg[key] ? 'error' : 'success'}
-        help={helpMsg[key]}
-        required={config.required}
-        style={config['ui:wrapperStyle']}
-        {...formItemLayout}
-      >
-        { this.renderFormComponent(config) }
-      </Form.Item>
+      <React.Fragment>
+        <Form.Item
+          key={key}
+          label={this.renderTitleLabel(config)}
+          colon={false}
+          validateStatus={helpMsg[key] ? 'error' : 'success'}
+          help={config['ui:layout']?.customHelpMsg ? '' : helpMsg[key]}
+          required={config.required}
+          style={config['ui:wrapperStyle']}
+          {...formItemLayout}
+        >
+          { !config['ui:layout']?.extraRow && this.renderFormComponent(config) }
+          { config['ui:layout']?.customHelpMsg && helpMsg[key] && (
+            <Alert style={{ padding: '4px 12px', height: '32px' }} message={helpMsg[key]} type="error" showIcon />
+          ) }
+        </Form.Item>
+        { config['ui:layout']?.extraRow && (
+          <Row>
+            <Col span={24}>
+              { this.renderFormComponent(config) }
+            </Col>
+          </Row>
+        ) }
+      </React.Fragment>
     );
   }
 
diff --git a/packages/drip-table-generator/src/index.module.less b/packages/drip-table-generator/src/index.module.less
index 1639dae82..115a52b29 100644
--- a/packages/drip-table-generator/src/index.module.less
+++ b/packages/drip-table-generator/src/index.module.less
@@ -8,7 +8,6 @@
 
 .wrapper {
   display: flex;
-  overflow-x: auto;
 }
 
 .layout {
diff --git a/packages/drip-table-generator/src/layout/configs.ts b/packages/drip-table-generator/src/layout/configs.ts
index f67996502..b9df86570 100644
--- a/packages/drip-table-generator/src/layout/configs.ts
+++ b/packages/drip-table-generator/src/layout/configs.ts
@@ -158,7 +158,7 @@ export const GlobalAttrFormConfigs: DTGComponentPropertySchema[] = [
   {
     name: 'header.search.typeOptions',
     'ui:title': '选择框配置',
-    'ui:type': 'custom::ArrayComponent',
+    'ui:type': 'array-list',
     'ui:props': {
       items: [
         {
diff --git a/packages/drip-table-generator/src/table-components/links.ts b/packages/drip-table-generator/src/table-components/links.ts
index aab7b6097..f09403a59 100644
--- a/packages/drip-table-generator/src/table-components/links.ts
+++ b/packages/drip-table-generator/src/table-components/links.ts
@@ -56,7 +56,7 @@ export default {
     {
       name: 'ui:props.operates',
       'ui:title': '字段配置',
-      'ui:type': 'custom::ArrayComponent',
+      'ui:type': 'array-list',
       default: [],
       visible: (_1: unknown[], formData: Record<string, unknown>) => formData['ui:props.mode'] === 'multiple',
       'ui:props': {
diff --git a/packages/drip-table-generator/src/table-components/render-html.ts b/packages/drip-table-generator/src/table-components/render-html.ts
index 58526f2e3..d76713501 100644
--- a/packages/drip-table-generator/src/table-components/render-html.ts
+++ b/packages/drip-table-generator/src/table-components/render-html.ts
@@ -16,8 +16,15 @@ export default {
       name: 'ui:props.render',
       'ui:title': '代码编辑',
       'ui:type': 'code-editor',
+      'ui:layout': {
+        extraRow: true,
+        customHelpMsg: true,
+      },
       'ui:props': {
-        minRow: 5,
+        style: {
+          height: 370,
+          marginTop: '-16px',
+        },
       },
       'ui:wrapperStyle': { minWidth: 680 },
       type: 'string',
diff --git a/packages/drip-table-generator/src/table-components/tag.ts b/packages/drip-table-generator/src/table-components/tag.ts
index e11a5a36b..9112d7700 100644
--- a/packages/drip-table-generator/src/table-components/tag.ts
+++ b/packages/drip-table-generator/src/table-components/tag.ts
@@ -68,7 +68,7 @@ export default {
       name: 'color',
       required: false,
       'ui:title': '字体颜色',
-      'ui:type': 'custom::ColorPicker',
+      'ui:type': 'color-picker',
       'ui:props': {},
       type: 'string',
     },
@@ -76,7 +76,7 @@ export default {
       name: 'borderColor',
       required: false,
       'ui:title': '边框颜色',
-      'ui:type': 'custom::ColorPicker',
+      'ui:type': 'color-picker',
       'ui:props': {},
       type: 'string',
     },
@@ -84,7 +84,7 @@ export default {
       name: 'backgroundColor',
       required: false,
       'ui:title': '背景颜色',
-      'ui:type': 'custom::ColorPicker',
+      'ui:type': 'color-picker',
       'ui:props': {},
       type: 'string',
     },
@@ -103,7 +103,7 @@ export default {
       name: 'tagOptions',
       required: false,
       'ui:title': '枚举值',
-      'ui:type': 'custom::ArrayComponent',
+      'ui:type': 'array-list',
       'ui:props': {
         items: [
           {
diff --git a/packages/drip-table-generator/src/table-components/text.ts b/packages/drip-table-generator/src/table-components/text.ts
index 68d28b0eb..fa416f373 100644
--- a/packages/drip-table-generator/src/table-components/text.ts
+++ b/packages/drip-table-generator/src/table-components/text.ts
@@ -111,7 +111,7 @@ export default {
     {
       name: 'ui:props.params',
       'ui:title': '字段配置',
-      'ui:type': 'custom::ArrayComponent',
+      'ui:type': 'array-list',
       'ui:props': {
         items: [
           {
diff --git a/packages/drip-table-generator/src/typing.ts b/packages/drip-table-generator/src/typing.ts
index 89530ddb9..d172095df 100644
--- a/packages/drip-table-generator/src/typing.ts
+++ b/packages/drip-table-generator/src/typing.ts
@@ -7,6 +7,12 @@ export type DTGComponentPropertySchema = DataSchema & {
   $id?: string;
   name: string;
   required?: boolean;
+  'ui:layout'?: {
+    labelCol: number;
+    wrapperCol: number;
+    extraRow?: boolean;
+    customHelpMsg?: boolean;
+  };
   'ui:title': string;
   'ui:description'?: {
     type: 'icon' | 'text';
diff --git a/packages/drip-table-generator/src/utils/index.ts b/packages/drip-table-generator/src/utils/index.ts
index 2dcaff87b..f3fc6b304 100644
--- a/packages/drip-table-generator/src/utils/index.ts
+++ b/packages/drip-table-generator/src/utils/index.ts
@@ -31,3 +31,18 @@ export const get = (data: unknown, indexes: string | number | (string | number)[
   }
   return defaultValue;
 };
+
+/**
+ * 对象属性过滤器
+ * @param {Record<string, unknown>} record 原始对象
+ * @param {string | string[]} excludeAttrs 需要排除掉的属性名
+ * @returns {Record<string, unknown>} 返回最终对象
+ */
+export const filterAttributes = (record: Record<string, unknown>, excludeAttrs: string | string[]) => {
+  if (typeof excludeAttrs === 'string') { excludeAttrs = [excludeAttrs]; }
+  const finalObject = { ...record };
+  excludeAttrs.forEach((key) => {
+    delete finalObject[key];
+  });
+  return finalObject;
+};

From c3bff585a1e727e92ca56e37868322f3ccafdfa7 Mon Sep 17 00:00:00 2001
From: helloqian12138 <johnhello12138@163.com>
Date: Tue, 4 Jan 2022 21:01:12 +0800
Subject: [PATCH 2/3] docs: remove head buttons in demo page and add refs docs

---
 .umirc.ts                                     |   1 +
 docs/drip-table-generator/faq.md              |   8 ++
 docs/drip-table-generator/functions/refs.md   | 100 ++++++++++++++++++
 docs/drip-table-generator/guide/fast-start.md |   6 +-
 .../preview/sample.module.less                |   3 +-
 docs/drip-table-generator/preview/sample.tsx  |  45 +++-----
 .../layout/attribute-layout/index.module.less |   1 -
 .../src/table-components/render-html.ts       |   2 +
 8 files changed, 130 insertions(+), 36 deletions(-)
 create mode 100644 docs/drip-table-generator/functions/refs.md

diff --git a/.umirc.ts b/.umirc.ts
index 37ae1aba1..a820ca8a5 100755
--- a/.umirc.ts
+++ b/.umirc.ts
@@ -99,6 +99,7 @@ const config: IConfig = {
         path: '/drip-table-generator/functions',
         children: [
           '/drip-table-generator/functions/index.md',
+          '/drip-table-generator/functions/refs.md',
           '/drip-table-generator/functions/usage-pro.md',
           '/drip-table-generator/functions/custom.md',
           '/drip-table-generator/functions/api.md',
diff --git a/docs/drip-table-generator/faq.md b/docs/drip-table-generator/faq.md
index 22cef70f8..cc862182a 100755
--- a/docs/drip-table-generator/faq.md
+++ b/docs/drip-table-generator/faq.md
@@ -9,3 +9,11 @@ title: 常见问题
 
 可以，`<DripTableGenerator />` 添加 `customComponentPanel` 和 `customComponent` 属性即可。
 其中，`customComponentPanel` 传入自定义组件的属性配置等配置信息，`customComponent` 属性传入自定义组。
+
+### 2、使用时样式错乱该如何解决？
+
+首先排查一下是否未安装 `antd`、`drip-table` 和 `drip-table-driver-antd`，然后，查看一下组件是否引入了对应的样式文件。
+
+### 3、安装后运行项目报错： `ReferenceError: Buffer is not defined`，如何解决？
+
+建议查看一下是否是因为本地项目使用了 `webpack5`， `drip-table` 暂时不支持 `webpack5`，后续会出相应的迁移办法。
diff --git a/docs/drip-table-generator/functions/refs.md b/docs/drip-table-generator/functions/refs.md
new file mode 100644
index 000000000..ea14eae0f
--- /dev/null
+++ b/docs/drip-table-generator/functions/refs.md
@@ -0,0 +1,100 @@
+---
+order: 1
+title: Refs引用
+---
+
+# Refs引用
+
+> 引用实例，利用 `refs` 引用可以在外部主动获取 `drip-table-generator` 的状态以及配置信息。
+
+## 一、获取编辑器实例
+
+利用 `react` 的 `refs` 属性可以获取表格编辑器内部开放的状态和函数从而获取 `drip-table-generator` 状态
+
+> hook写法
+
+```js
+const generator = useRef(null);
+```
+
+> component 写法:
+```js
+const generator = React.createRef();
+
+<DripTableGenerator refs={generator}>
+```
+
+## 二、开放函数
+
+### getSchemaValue
+- 描述: `获取最新的列表配置信息`
+- 类型: `function(): DripTableSchema`
+- 返回值: `DripTableSchema`
+主动调用 `drip-table-generator` 实例的 `getSchemaValue` 函数可以从组件外部获得当前用户配置好的列表 `JSON Schema` 配置。
+
+### getDataSource
+- 描述: `获取最新的列表数据信息`
+- 类型: `function(): Record<string, unknown>[]`
+- 返回值: `Record<string, unknown>[]`
+主动调用 `drip-table-generator` 实例的 `getDataSource` 函数可以从组件外部获得当前用户配置的表格数据。
+
+
+## 三、代码演示
+
+```tsx
+/**
+ * transform: true
+ * defaultShowCode: true
+ * hideActions: ["CSB"]
+ */
+import React from 'react';
+import { DripTableSchema } from 'drip-table';
+import DripTableDriverAntDesign from 'drip-table-driver-antd';
+import DripTableGenerator, { DripTableGeneratorHandler } from 'drip-table-generator';
+import 'antd/dist/antd.css';
+import 'drip-table-generator/index.css';
+
+const { Row, Col, Button, message } = DripTableDriverAntDesign.components;
+
+const Demo = () => {
+  const generator: React.MutableRefObject<DripTableGeneratorHandler | null> = React.useRef(null);
+
+  const getSchemaValue = () => {
+    const value = generator.current?.getSchemaValue();
+    const aux = document.createElement('input');
+    aux.setAttribute('value', value ? JSON.stringify(value) : '');
+    document.body.append(aux);
+    aux.select();
+    document.execCommand('copy');
+    aux.remove();
+    message.success('Schema复制成功');
+  }
+
+  const getDataSource = () => {
+    const value = generator.current?.getDataSource();
+    const aux = document.createElement('input');
+    aux.setAttribute('value', value ? JSON.stringify(value) : '');
+    document.body.append(aux);
+    aux.select();
+    document.execCommand('copy');
+    aux.remove();
+    message.success('DataSource复制成功');
+  }
+
+  return (
+    <React.Fragment>
+      <Row style={{ borderBottom: '1px solid #2190ff', padding: '8px 0' }}>
+        <Button type="primary" onClick={getSchemaValue}>获取列表配置</Button>
+        <Button style={{ marginLeft: '12px' }} type="primary" onClick={getDataSource}>获取表格数据</Button>
+      </Row>
+      <DripTableGenerator
+        ref={generator}
+        driver={DripTableDriverAntDesign}
+        dataSource={[]}
+      />
+    </React.Fragment>
+  );
+};
+
+export default Demo;
+```
diff --git a/docs/drip-table-generator/guide/fast-start.md b/docs/drip-table-generator/guide/fast-start.md
index 3d01f200d..aee822cfa 100644
--- a/docs/drip-table-generator/guide/fast-start.md
+++ b/docs/drip-table-generator/guide/fast-start.md
@@ -11,17 +11,17 @@ title: 快速开始
 
 ### 安装依赖
 
-drip-table-generator 依赖 `antd`、`drip-table` 和 `react`，单独使用不要忘记安装～
+drip-table-generator 依赖 `antd`、`drip-table`、 `drip-table-driver-{drivername}` 和 `react`，单独使用不要忘记安装～
 
 > yarn
 
 ```sh
-yarn add drip-table-generator drip-table-driver-antd
+yarn add drip-table-generator
 ```
 
 > npm
 ```sh
-npm install --save drip-table-generator drip-table-driver-antd
+npm install --save drip-table-generator
 ```
 
 ### 依赖引入
diff --git a/docs/drip-table-generator/preview/sample.module.less b/docs/drip-table-generator/preview/sample.module.less
index 3d1f4c4aa..c99324d31 100644
--- a/docs/drip-table-generator/preview/sample.module.less
+++ b/docs/drip-table-generator/preview/sample.module.less
@@ -1,5 +1,6 @@
 /* stylelint-disable selector-class-pattern */
-.__dumi-default-layout[data-route="/drip-table-generator/preview"] {
+.__dumi-default-layout[data-route="/drip-table-generator/preview"],
+.__dumi-default-layout[data-route="/demo"] {
   padding-top: 64px;
   padding-left: 0;
   padding-right: 0;
diff --git a/docs/drip-table-generator/preview/sample.tsx b/docs/drip-table-generator/preview/sample.tsx
index 62a6e9c13..22bc788f6 100755
--- a/docs/drip-table-generator/preview/sample.tsx
+++ b/docs/drip-table-generator/preview/sample.tsx
@@ -7,11 +7,11 @@
 import React from 'react';
 import { DripTableSchema } from 'drip-table';
 import DripTableDriverAntDesign from 'drip-table-driver-antd';
-import DripTableGenerator, { DripTableGeneratorHandler } from 'drip-table-generator';
+import DripTableGenerator from 'drip-table-generator';
 import 'antd/dist/antd.css';
 import 'drip-table-generator/index.css';
 
-import { Button, Row } from 'antd';
+import { message } from 'antd';
 import { mockData } from '../../global-configs';
 import components from './component-settings';
 import TextComponent from './TextComponent';
@@ -51,34 +51,17 @@ const initialSchema: DripTableSchema = {
   ],
 };
 
-const Demo = (props: { showHeader: boolean }) => {
-  const generator: React.MutableRefObject<DripTableGeneratorHandler | null> = React.useRef(null);
-
-  const views = {
-    demoHeader: props.showHeader !== false,
-  };
-
-  return (
-    <React.Fragment>
-      { views.demoHeader && (
-        <Row className="sample-header-extra-container">
-          <Button className="header-button" type="primary" onClick={() => { console.log(generator.current?.getSchemaValue()); }}>获取schema</Button>
-          <Button className="header-button" type="primary" onClick={() => { console.log(generator.current?.getDataSource()); }}>获取dataSource</Button>
-        </Row>
-      ) }
-      <DripTableGenerator
-        ref={generator}
-        style={{ height: 756 }}
-        driver={DripTableDriverAntDesign}
-        schema={initialSchema}
-        dataSource={mockData.slice(0, 4)}
-        dataFields={['id', 'name', 'status', 'description', 'ext.state']}
-        onExportSchema={(schema) => { console.log(schema); }}
-        customComponents={{ custom: { TextComponent } }}
-        customComponentPanel={components}
-      />
-    </React.Fragment>
-  );
-};
+const Demo = () => (
+  <DripTableGenerator
+    style={{ height: 756 }}
+    driver={DripTableDriverAntDesign}
+    schema={initialSchema}
+    dataSource={mockData.slice(0, 4)}
+    dataFields={['id', 'name', 'status', 'description', 'ext.state']}
+    onExportSchema={(schema) => { message.success('已导出'); }}
+    customComponents={{ custom: { TextComponent } }}
+    customComponentPanel={components}
+  />
+);
 
 export default Demo;
diff --git a/packages/drip-table-generator/src/layout/attribute-layout/index.module.less b/packages/drip-table-generator/src/layout/attribute-layout/index.module.less
index dba432916..270483e25 100644
--- a/packages/drip-table-generator/src/layout/attribute-layout/index.module.less
+++ b/packages/drip-table-generator/src/layout/attribute-layout/index.module.less
@@ -22,7 +22,6 @@
     margin-left: 16px;
     font-size: 1.25rem;
     color: #999999;
-    min-width: 560px;
 
     :global(.ant-result-icon > span > svg) {
       width: 4.25rem;
diff --git a/packages/drip-table-generator/src/table-components/render-html.ts b/packages/drip-table-generator/src/table-components/render-html.ts
index d76713501..1c51d7978 100644
--- a/packages/drip-table-generator/src/table-components/render-html.ts
+++ b/packages/drip-table-generator/src/table-components/render-html.ts
@@ -17,6 +17,8 @@ export default {
       'ui:title': '代码编辑',
       'ui:type': 'code-editor',
       'ui:layout': {
+        labelCol: 4,
+        wrapperCol: 20,
         extraRow: true,
         customHelpMsg: true,
       },

From fadb8856b13019f6705df7e8f522e177b663bf65 Mon Sep 17 00:00:00 2001
From: helloqian12138 <johnhello12138@163.com>
Date: Tue, 4 Jan 2022 21:12:34 +0800
Subject: [PATCH 3/3] docs: rename array component name

---
 docs/drip-table-generator/functions/api.md    | 2 +-
 docs/drip-table-generator/functions/custom.md | 8 ++++----
 2 files changed, 5 insertions(+), 5 deletions(-)

diff --git a/docs/drip-table-generator/functions/api.md b/docs/drip-table-generator/functions/api.md
index 3869d5916..9360a737a 100644
--- a/docs/drip-table-generator/functions/api.md
+++ b/docs/drip-table-generator/functions/api.md
@@ -40,7 +40,7 @@ title: API
 | name             | 属性名 | `string`                               | -       | 否   |
 | required             | 属性是否必填 | `boolean`                               | `false`       | 否   |
 | ui:title             | 属性标题 | `string`                               | -       | 是   |
-| ui:type             | 属性组件类型, 默认属性组件类型包括：`input`、 `text`、 `switch`、 `number`、 `checkbox`、 `radio`、 `select`、 `cascader`、 `render-html`、 `custom::ArrayComponent`。当组件类型为 `custom::` 开头时可以通过`ui:externalComponent` 属性传入外部组件。 | `string`                               | -       | 是   |
+| ui:type             | 属性组件类型, 默认属性组件类型包括：`input`、 `text`、 `switch`、 `number`、 `checkbox`、 `radio`、 `select`、 `cascader`、 `render-html`、 `array-list`、 `color-picker`。当组件类型为 `custom::` 开头时可以通过`ui:externalComponent` 属性传入外部组件。 | `string`                               | -       | 是   |
 | ui:externalComponent             | 外部组件 | `React.ComponentClass \| React.FunctionComponent`                               | -       | 否   |
 | ui:props             | 属性组件的属性 | `Record`                               | -       | 否   |
 | type             | 属性数据类型 | `string`                               | -       | 否   |
diff --git a/docs/drip-table-generator/functions/custom.md b/docs/drip-table-generator/functions/custom.md
index 1443eb267..9f6b73f9e 100644
--- a/docs/drip-table-generator/functions/custom.md
+++ b/docs/drip-table-generator/functions/custom.md
@@ -39,7 +39,7 @@ title: 定制化面板
 - 类型: `string`
 - 默认值: `无`
 
-    默认属性组件类型包括：`input`、 `text`、 `auto-complete`、 `switch`、 `number`、 `checkbox`、 `radio`、 `select`、 `cascader`、 `code-editor`、 `color-picker`、 `custom::ArrayComponent`。
+    默认属性组件类型包括：`input`、 `text`、 `auto-complete`、 `switch`、 `number`、 `checkbox`、 `radio`、 `select`、 `cascader`、 `code-editor`、 `color-picker`、 `array-list`。
 
     当组件类型为 `custom::` 开头时可以通过 `ui:externalComponent` 属性传入外部组件。
 
@@ -57,7 +57,7 @@ title: 定制化面板
 
     * 具体属性同 `antd` 组件，具体详见 `antd` 官网。
     * `code-editor` 暂无属性。
-    * `custom::ArrayComponent` 属性包含 `items`，`items` 为 `Array`, 每一项配置同通用 `antd` 组件。
+    * `array-list` 属性包含 `items`，`items` 为 `Array`, 每一项配置同通用 `antd` 组件。
 
 #### type
 - 描述: `属性数据类型`
@@ -199,7 +199,7 @@ title: 定制化面板
 - 类型: `string`
 - 默认值: `无`
 
-    默认属性组件类型包括：`input`、 `text`、 `auto-complete`、 `switch`、 `number`、 `checkbox`、 `radio`、 `select`、 `cascader`、 `code-editor`、 `color-picker`、 `custom::ArrayComponent`。
+    默认属性组件类型包括：`input`、 `text`、 `auto-complete`、 `switch`、 `number`、 `checkbox`、 `radio`、 `select`、 `cascader`、 `code-editor`、 `color-picker`、 `array-list`。
 
     当组件类型为 `custom::` 开头时可以通过 `ui:externalComponent` 属性传入外部组件。
 
@@ -217,7 +217,7 @@ title: 定制化面板
 
     * 具体属性同 `antd` 组件，具体详见 `antd` 官网。
     * `code-editor` 暂无属性。
-    * `custom::ArrayComponent` 属性包含 `items`，`items` 为 `Array`, 每一项配置同通用 `antd` 组件。
+    * `array-list` 属性包含 `items`，`items` 为 `Array`, 每一项配置同通用 `antd` 组件。
 
 #### attrSchema.type
 - 描述: `属性数据类型`