amis-editor 4.2.0-beta.0 → 5.1.8

package/src/component/schemaTpl.tsx

@@ -4,16 +4,39 @@
  */
 import {isObject} from '../util';
 import find = require('lodash/find');
-import {normalizeOptions, str2rules, buildApi, Select, Html} from 'amis';
+import forEach = require('lodash/forEach');
+import reduce = require('lodash/reduce');
+import {str2rules, buildApi, Html} from 'amis';
 import flatten from 'lodash/flatten';
+import kebabCase from 'lodash/kebabCase';
 import React = require('react');
 import {InputComponentName} from './base/InputComponentName';
-import remarkTpl from './remarkTpl';
+import {remarkTpl, tipedLabel, ValidationOptions} from './control/BaseControl';
+
+import type {ValidatorFilter} from './control/ValidationControl';
+import {ValidatorTag} from './validator';
+import {SchemaCollection, SchemaObject} from 'amis/lib/Schema';
 
 const tpls: {
   [propName: string]: any;
 } = {
-  formItemName: {
+  /**
+   * @deprecated 兼容当前组件的switch
+   */
+  'switch': {
+    type: 'switch',
+    mode: 'horizontal',
+    horizontal: {
+      justify: true,
+      left: 8
+    },
+    inputClassName: 'is-inline '
+  },
+
+  /**
+   * 表单项字段name
+   */
+  'formItemName': {
     label: '字段名',
     name: 'name',
     type: 'input-text'
@@ -26,54 +49,51 @@ const tpls: {
     // validateOnChange: false
   },
 
-  formItemMode: {
-    label: '表单项展示模式',
+  'formItemMode': {
+    label: '布局',
     name: 'mode',
     type: 'button-group-select',
-    size: 'sm',
     option: '继承',
-    // mode: 'inline',
+    horizontal: {
+      left: 2,
+      justify: true
+    },
     // className: 'w-full',
     pipeIn: defaultValue(''),
     options: [
-      {
-        label: '继承',
-        value: ''
-      },
-
-      {
-        label: '正常',
-        value: 'normal'
-      },
-
       {
         label: '内联',
         value: 'inline'
       },
-
       {
         label: '水平',
         value: 'horizontal'
+      },
+      {
+        label: '垂直',
+        value: 'normal'
+      },
+      {
+        label: '继承',
+        value: ''
       }
-    ]
+    ],
+    pipeOut: (v: string) => (v ? v : undefined)
   },
 
-  formItemInline: {
+  'formItemInline': {
+    type: 'switch',
     label: '表单项内联',
     name: 'inline',
-    type: 'switch',
     visibleOn: 'data.mode != "inline"',
-    mode: 'inline',
-    className: 'w-full',
     pipeIn: defaultValue(false)
     // onChange: (value:any, origin:any, item:any, form:any) => form.getValueByName('size') === "full" && form.setValueByName('')
   },
 
-  formItemSize: {
+  'formItemSize': {
     name: 'size',
-    label: '控件尺寸',
-    type: 'button-group-select',
-    size: 'sm',
+    label: '控件宽度',
+    type: 'select',
     pipeIn: defaultValue('full'),
     // mode: 'inline',
     // className: 'w-full',
@@ -97,7 +117,10 @@ const tpls: {
         label: '大',
         value: 'lg'
       },
-
+      {
+        label: '占满',
+        value: 'full'
+      },
       {
         label: '默认',
         value: ''
@@ -105,68 +128,78 @@ const tpls: {
     ]
   },
 
-  minLength: {
+  'minLength': {
     name: 'minLength',
     type: 'input-number',
     label: '限制最小数量'
   },
 
-  maxLength: {
+  'maxLength': {
     name: 'maxLength',
     type: 'input-number',
     label: '限制最大数量'
   },
 
-  label: [
-    {
-      label: 'Label',
-      name: 'label',
-      type: 'input-text',
-      hiddenOn: 'data.label === false'
-    },
-    {
+  /**
+   * 表单项名称label
+   */
+  'label': {
+    label: '标题',
+    name: 'label',
+    type: 'input-text',
+    pipeIn(v: any) {
+      return v === false ? '' : v;
+    }
+  },
+
+  'labelHide': () =>
+    getSchemaTpl('switch', {
       name: 'label',
-      label: '隐藏 Label',
-      type: 'switch',
-      mode: 'inline',
-      className: 'w-full',
+      label: tipedLabel('隐藏标题', '隐藏后，水平布局时标题宽度为0'),
       pipeIn: (value: any) => value === false,
       pipeOut: (value: any) => (value === true ? false : ''),
       visibleOn:
-        '__props__.formMode === "horizontal" || data.mode === "horizontal" || data.label ===false',
-      description: '当 form 为水平布局时有用，可以用来去掉间隔。'
-    }
-  ],
+        '__props__.formMode === "horizontal" || data.mode === "horizontal" || data.label === false'
+    }),
 
-  placeholder: {
-    label: '占位符',
+  'placeholder': {
+    label: '占位提示',
     name: 'placeholder',
     type: 'input-text',
-    placeholder: '占位符'
+    placeholder: '空内容提示占位'
   },
 
-  tabs: (
+  'tabs': (
     config: Array<{
       title: string;
-      body: Array<any>;
+      className?: string;
+      body: Array<SchemaObject>;
     }>
   ) => {
     return {
       type: 'tabs',
       tabsMode: 'line', // tiled
       className: 'editor-prop-config-tabs',
+      linksClassName: 'editor-prop-config-tabs-links',
       contentClassName:
         'no-border editor-prop-config-tabs-cont hoverShowScrollBar',
       tabs: config
         .filter(item => item)
-        .map(item => ({
-          ...item,
-          body: flatten(item.body)
-        }))
+        .map(item => {
+          const newSchema = {
+            ...item,
+            body: Array.isArray(item.body) ? flatten(item.body) : [item.body]
+          };
+          // 新版配置面板空隙在子组件中，兼容一下
+          if (newSchema.body[0]?.type === 'collapse-group') {
+            newSchema.className = (newSchema.className || '') + ' p-none';
+          }
+          return newSchema;
+        })
     };
   },
 
-  collapse: (
+  'collapse': (
     config: Array<{
       title: string;
       body: Array<any>;
@@ -187,7 +220,7 @@ const tpls: {
     };
   },
 
-  fieldSet: (config: {
+  'fieldSet': (config: {
     title: string;
     body: Array<any>;
     collapsed?: boolean;
@@ -203,44 +236,192 @@ const tpls: {
     };
   },
 
-  clearable: {
+  'collapseGroup': (
+    config: Array<{
+      title: string;
+      key: string;
+      visibleOn: string;
+      body: Array<any>;
+    }>
+  ) => {
+    const collapseGroupBody = config
+      .filter(
+        item => item && Array.isArray(item?.body) && item?.body.length > 0
+      )
+      .map((item, index) => ({
+        type: 'collapse',
+        headingClassName: 'ae-formItemControl-header',
+        bodyClassName: 'ae-formItemControl-body',
+        ...item,
+        key: item.key || index.toString(),
+        body: flatten(item.body)
+      }));
+
+    return {
+      type: 'collapse-group',
+      expandIconPosition: 'right',
+      expandIcon: {
+        type: 'icon',
+        icon: 'chevron-right'
+      },
+      className: 'ae-formItemControl ae-styleControl',
+      activeKey: collapseGroupBody.map((group, index) => group.key),
+      body: collapseGroupBody
+    };
+  },
+
+  'clearable': {
     type: 'switch',
+    label: '可清除',
     name: 'clearable',
-    mode: 'inline',
-    className: 'w-full',
-    label: '启用清除按钮'
+    inputClassName: 'is-inline'
   },
 
-  hint: {
-    label: '输入提示',
+  'hint': {
+    label: '输入框提示',
     type: 'input-text',
     name: 'hint',
     description: '当输入框获得焦点的时候显示，用来提示用户输入内容。'
   },
 
-  remark: remarkTpl({name: 'remark', label: '控件提示'}),
+  'remark': remarkTpl({
+    name: 'remark',
+    label: '控件提示',
+    labelRemark:
+      '在输入控件旁展示提示，注意控件宽度需设置，否则提示触发图标将自动换行'
+  }),
+
+  'labelRemark': remarkTpl({
+    name: 'labelRemark',
+    label: '标题提示',
+    labelRemark: '在标题旁展示提示'
+  }),
+
+  /**
+   * 表单项组件默认值
+   */
+  'value': {
+    type: 'ae-formulaControl',
+    label: '默认值',
+    name: 'value'
+  },
+
+  'inputType': {
+    label: '输入类型',
+    name: 'type',
+    type: 'select',
+    creatable: false,
+    options: [
+      {
+        label: '文本',
+        value: 'input-text'
+      },
+      {
+        label: '密码',
+        value: 'input-password'
+      },
+      {
+        label: '邮箱',
+        value: 'input-email'
+      },
+      {
+        label: 'URL',
+        value: 'input-url'
+      }
+    ]
+  },
+
+  'selectDateType': {
+    label: '日期类型',
+    name: 'type',
+    type: 'select',
+    creatable: false,
+    options: [
+      {
+        label: '日期',
+        value: 'input-date'
+      },
+      {
+        label: '日期时间',
+        value: 'input-datetime'
+      },
+      {
+        label: '时间',
+        value: 'input-time'
+      },
+      {
+        label: '月份',
+        value: 'input-month'
+      },
+      {
+        label: '季度',
+        value: 'input-quarter'
+      },
+      {
+        label: '年份',
+        value: 'input-year'
+      }
+    ]
+  },
+
+  'selectDateRangeType': {
+    label: '日期类型',
+    name: 'type',
+    type: 'select',
+    creatable: false,
+    options: [
+      {
+        label: '日期',
+        value: 'input-date-range'
+      },
+      {
+        label: '日期时间',
+        value: 'input-datetime-range'
+      },
+      {
+        label: '时间',
+        value: 'input-time-range'
+      },
+      {
+        label: '月份',
+        value: 'input-month-range'
+      },
+      {
+        label: '季度',
+        value: 'input-quarter-range'
+      },
+      {
+        label: '年份',
+        value: 'input-year-range'
+      }
+    ]
+  },
 
-  labelRemark: remarkTpl({name: 'labelRemark', label: '标题提示'}),
+  'menuTpl': {
+    type: 'ae-formulaControl',
+    label: tipedLabel('模板', '选项渲染模板，支持JSX，变量使用\\${xx}'),
+    name: 'menuTpl'
+  },
 
-  expression: {
+  'expression': {
     type: 'input-text',
     description: '支持 JS 表达式，如：`this.xxx == 1`'
   },
 
-  icon: {
+  'icon': {
     label: '图标',
     type: 'icon-picker',
     name: 'icon',
+    className: 'fix-icon-picker-overflow',
     placeholder: '点击选择图标',
     clearable: true,
     description: ''
   },
 
-  size: {
+  'size': {
     label: '控件尺寸',
     type: 'button-group-select',
     name: 'size',
-    size: 'sm',
     clearable: true,
     options: [
       {
@@ -262,7 +443,24 @@ const tpls: {
     ]
   },
 
-  name: {
+  'horizontal-align': {
+    type: 'button-group-select',
+    label: '位置',
+    options: [
+      {
+        label: '左边',
+        value: 'left',
+        icon: 'fa fa-align-left'
+      },
+      {
+        label: '右边',
+        value: 'right',
+        icon: 'fa fa-align-right'
+      }
+    ]
+  },
+
+  'name': {
     label: '名字',
     name: 'name',
     type: 'input-text',
@@ -270,7 +468,7 @@ const tpls: {
     placeholder: '请输入字母或者数字'
   },
 
-  reload: {
+  'reload': {
     label: '刷新目标组件',
     name: 'reload',
     asFormItem: true,
@@ -288,54 +486,17 @@ const tpls: {
     }
   },
 
-  className: {
-    label: 'CSS 类名',
+  'className': (schema: any) => ({
     type: 'ae-classname',
     name: 'className',
-    labelRemark: {
-      trigger: 'click',
-      className: 'm-l-xs',
-      rootClose: true,
-      content:
-        '有哪些辅助类 CSS 类名？请前往 <a href="https://baidu.github.io/amis/docs/concepts/style" target="_blank">样式说明</a>，除此之外你可以添加自定义类名，然后在系统配置中添加自定义样式。',
-      placement: 'left'
-    }
-  },
-
-  apiControl: (patch: any = {}) => {
-    const {name, label, value, description, sampleBuilder, ...rest} = patch;
-
-    return {
-      type: 'ae-apiControl',
-      label,
-      name,
-      description,
-      labelRemark: sampleBuilder
-        ? {
-            icon: '',
-            label: '示例',
-            title: '接口返回示例',
-            tooltipClassName: 'ae-ApiSample-tooltip',
-            render: (data: any) => (
-              <Html
-                className="ae-ApiSample"
-                inline={false}
-                html={`
-                    <pre><code>${sampleBuilder(data)}</code></pre>
-                    `}
-              />
-            ),
-            trigger: 'click',
-            className: 'm-l-xs',
-            rootClose: true,
-            placement: 'left'
-          }
-        : undefined,
-      ...rest
-    };
-  },
-
-  api: (patch: any = {}) => {
+    ...(schema || {}),
+    label: tipedLabel(
+      schema?.label || 'CSS 类名',
+      '有哪些辅助类 CSS 类名？请前往 <a href="https://baidu.github.io/amis/docs/concepts/style" target="_blank">样式说明</a>，除此之外你可以添加自定义类名，然后在系统配置中添加自定义样式。'
+    )
+  }),
+
+  'api': (patch: any = {}) => {
     const {name, label, value, description, sampleBuilder, ...rest} = patch;
 
     return {
@@ -418,8 +579,9 @@ const tpls: {
               let url = value;
               let method = 'get';
 
-              const m =
-                /^(raw:|external:)?(get|post|put|patch|delete):(.*)$/.exec(url);
+              const m = /^(raw:|external:)?(get|post|put|patch|delete):(.*)$/.exec(
+                url
+              );
               if (m) {
                 url = m[1] + m[3];
                 method = m[2];
@@ -479,7 +641,6 @@ const tpls: {
               type: 'switch',
               label: '数据映射',
               name: 'data',
-              mode: 'inline',
               className: 'w-full m-b-xs',
               pipeIn: (value: any) => !!value,
               pipeOut: (value: any) => (value ? {'&': '$$'} : null)
@@ -490,7 +651,8 @@ const tpls: {
               visibleOn: '!this.data',
               inline: false,
               className: 'text-sm text-muted m-b',
-              tpl: '当没开启数据映射时，发送 API 的时候会发送尽可能多的数据，如果你想自己控制发送的数据，或者需要额外的数据处理，请开启此选项'
+              tpl:
+                '当没开启数据映射时，发送 API 的时候会发送尽可能多的数据，如果你想自己控制发送的数据，或者需要额外的数据处理，请开启此选项'
             },
 
             {
@@ -515,7 +677,6 @@ const tpls: {
               type: 'switch',
               label: '是否设置缓存',
               name: 'cache',
-              mode: 'inline',
               className: 'w-full m-b-xs',
               description: '设置该请求缓存的有效时间',
               pipeIn: (value: any) => !!value,
@@ -533,11 +694,9 @@ const tpls: {
             },
 
             {
-              label: '文件下载',
               type: 'switch',
+              label: '文件下载',
               name: 'responseType',
-              mode: 'inline',
-              className: 'block',
               pipeIn: (value: any) => value === 'blob',
               pipeOut: (value: any) => (value ? 'blob' : undefined),
               description:
@@ -573,8 +732,6 @@ const tpls: {
               type: 'switch',
               label: '数据替换',
               name: 'replaceData',
-              mode: 'inline',
-              className: 'w-full',
               description: '默认数据都是追加方式，开启这个后是完全替换'
             },
 
@@ -582,7 +739,6 @@ const tpls: {
               type: 'switch',
               label: '返回结果映射',
               name: 'responseData',
-              mode: 'inline',
               className: 'w-full m-b-xs',
               pipeIn: (value: any) => !!value,
               pipeOut: (value: any) => (value ? {'&': '$$'} : null)
@@ -636,8 +792,42 @@ const tpls: {
       ...rest
     };
   },
+  /**
+   * combo 组件样式包装调整
+   */
+  'combo-container': (config: SchemaObject) => {
+    if (isObject(config)) {
+      const itemsWrapperClassName =
+        (config as any).type === 'combo' &&
+        'ae-Combo-items ' + ((config as any).itemsWrapperClassName ?? '');
+      return {
+        ...(config as any),
+        ...(itemsWrapperClassName ? {itemsWrapperClassName} : {})
+      };
+    }
+    return config;
+  },
+
+  // 所有组件的状态
+  'status': (config: {
+    isFormItem?: boolean;
+    readonly?: boolean;
+    disabled?: boolean;
+  }) => {
+    return {
+      title: '状态',
+      body: [
+        getSchemaTpl('hidden'),
+        config?.readonly ? getSchemaTpl('readonly') : null,
+        config?.disabled || config?.isFormItem
+          ? getSchemaTpl('disabled')
+          : null,
+        config?.isFormItem ? getSchemaTpl('clearValueOnHidden') : null
+      ]
+    };
+  },
 
-  source: (patch: any = {}) => {
+  'source': (patch: any = {}) => {
     return getSchemaTpl('api', {
       name: 'source',
       label: '获取选项接口',
@@ -668,39 +858,45 @@ const tpls: {
     });
   },
 
-  autoFill: {
+  'autoFill': {
     type: 'input-kv',
     name: 'autoFill',
-    label: '自动填充',
-    descriptionClassName: 'help-block text-xs m-b-none',
-    description:
+    label: tipedLabel(
+      '自动填充',
       '将当前已选中的选项的某个字段的值，自动填充到表单中某个表单项中，支持数据映射'
+    )
   },
 
-  autoFillApi: {},
-
-  apiString: {
+  'apiString': {
     name: 'api',
     type: 'input-text',
     placeholder: 'http://'
   },
 
-  required: {
-    name: 'required',
+  'required': {
     type: 'switch',
-    mode: 'inline',
-    className: 'w-full',
-    label: '是否必填'
+    name: 'required',
+    label: '是否必填',
+    mode: 'horizontal',
+    horizontal: {
+      justify: true,
+      left: 8
+    },
+    inputClassName: 'is-inline '
   },
 
-  description: {
+  /**
+   * 表单项描述description
+   */
+  'description': {
     name: 'description',
     type: 'textarea',
-    label: '描述',
+    label: tipedLabel('描述', '表单项控件下方浅色文字描述'),
+    maxRows: 2,
     pipeIn: (value: any, data: any) => value || data.desc || ''
   },
 
-  options: {
+  'options': {
     label: '选项 Options',
     name: 'options',
     type: 'combo',
@@ -780,7 +976,7 @@ const tpls: {
     ]
   },
 
-  tree: {
+  'tree': {
     label: '选项 Options',
     name: 'options',
     type: 'combo',
@@ -810,103 +1006,86 @@ const tpls: {
     ]
   },
 
-  horizontalMode: {
-    label: '表单项左右占比设置',
-    name: 'horizontal',
-    type: 'switch',
-    onText: '继承',
-    offText: '自定义',
-    mode: 'inline',
-    className: 'w-full',
-    inputClassName: 'text-sm',
-    visibleOn: 'this.mode == "horizontal" && this.label !== false',
-    pipeIn: (value: any) => !value,
-    pipeOut: (value: any, originValue: any, data: any) =>
-      value
-        ? null
-        : data.formHorizontal || {
-            leftFixed: 'normal'
-          }
+  'leftFixed': {
+    name: 'horizontal.leftFixed',
+    type: 'button-group-select',
+    visibleOn: 'data.horizontal && data.horizontal.leftFixed',
+    label: '宽度',
+    options: [
+      {
+        label: '小',
+        value: 'sm'
+      },
+
+      {
+        label: '中',
+        value: 'normal'
+      },
+
+      {
+        label: '大',
+        value: 'lg'
+      }
+    ]
   },
 
-  horizontal: {
-    type: 'combo',
-    syncDefaultValue: false,
+  'leftRate': {
     name: 'horizontal',
-    multiLine: true,
-    visibleOn:
-      'data.mode == "horizontal" && data.label !== false && data.horizontal',
-    pipeIn: (value: any) => {
-      return {
-        leftRate:
-          value && typeof value.left === 'number'
-            ? value.left
-            : value && /\bcol\-(?:xs|sm|md|lg)\-(\d+)\b/.test(value.left)
-            ? parseInt(RegExp.$1, 10)
-            : 2,
-        leftFixed: (value && value.leftFixed) || ''
-      };
+    type: 'input-range',
+    visibleOn: 'data.horizontal && !data.horizontal.leftFixed',
+    min: 1,
+    max: 11,
+    step: 1,
+    label: tipedLabel('比例', '12 等份，标题宽度占比 n/12'),
+    pipeIn(v: any) {
+      return v.left || 3;
     },
-    pipeOut: (value: any) => {
-      let left = Math.min(11, Math.max(1, value.leftRate || 2));
+    pipeOut(v: any) {
+      return {left: v, right: 12 - v};
+    }
+  },
 
-      return {
-        leftFixed: value.leftFixed || '',
-        left: left,
-        right: 12 - left
-      };
+  'horizontal': () => [
+    {
+      type: 'button-group-select',
+      label: '标题宽度',
+      name: 'horizontal',
+      options: [
+        {label: '继承', value: 'formHorizontal'},
+        {label: '固宽', value: 'leftFixed'},
+        {label: '比例', value: 'leftRate'}
+      ],
+      pipeIn(v: any) {
+        if (!v) {
+          return 'formHorizontal';
+        }
+        if (v.leftFixed) {
+          return 'leftFixed';
+        }
+        return 'leftRate';
+      },
+      pipeOut(v: any) {
+        const defaultData = {
+          formHorizontal: undefined,
+          leftFixed: {leftFixed: 'normal'},
+          leftRate: {left: 3, right: 9}
+        };
+
+        // @ts-ignore
+        return defaultData[v];
+      },
+      visibleOn: 'this.mode == "horizontal" && this.label !== false'
     },
-    inputClassName: 'no-padder',
-    items: [
-      {
-        name: 'leftFixed',
-        type: 'button-group-select',
-        label: '左侧宽度',
-        size: 'xs',
-        options: [
-          {
-            label: '比率',
-            value: ''
-          },
-
-          {
-            label: '小宽度',
-            value: 'sm',
-            visibleOn: 'this.leftFixed'
-          },
-
-          {
-            label: '固定宽度',
-            value: 'normal'
-          },
-
-          {
-            label: '大宽度',
-            value: 'lg',
-            visibleOn: 'this.leftFixed'
-          }
-        ]
-      },
-      {
-        name: 'leftRate',
-        type: 'input-range',
-        visibleOn: '!this.leftFixed',
-        min: 1,
-        max: 11,
-        step: 1,
-        label: '左右分布调整(n/12)',
-        labelRemark: {
-          trigger: 'click',
-          className: 'm-l-xs',
-          rootClose: true,
-          content: '一共 12 等份，这里可以设置左侧宽度占比 n/12。',
-          placement: 'left'
-        }
-      }
-    ]
-  },
+    {
+      type: 'container',
+      className: 'ae-ExtendMore mb-3',
+      visibleOn:
+        'this.mode == "horizontal" && this.horizontal && this.label !== false',
+      body: [getSchemaTpl('leftFixed'), getSchemaTpl('leftRate')]
+    }
+  ],
 
-  subFormItemMode: {
+  'subFormItemMode': {
     label: '子表单展示模式',
     name: 'subFormMode',
     type: 'button-group-select',
@@ -938,14 +1117,12 @@ const tpls: {
     ]
   },
 
-  subFormHorizontalMode: {
+  'subFormHorizontalMode': {
+    type: 'switch',
     label: '子表单水平占比设置',
     name: 'subFormHorizontal',
-    type: 'switch',
     onText: '继承',
     offText: '自定义',
-    mode: 'inline',
-    className: 'w-full',
     inputClassName: 'text-sm',
     visibleOn: 'this.subFormMode == "horizontal"',
     pipeIn: (value: any) => !value,
@@ -957,7 +1134,7 @@ const tpls: {
           }
   },
 
-  subFormHorizontal: {
+  'subFormHorizontal': {
     type: 'combo',
     syncDefaultValue: false,
     visibleOn: 'data.subFormMode == "horizontal" && data.subFormHorizontal',
@@ -1033,7 +1210,7 @@ const tpls: {
     ]
   },
 
-  validations: (function () {
+  'validations': (function () {
     const options = [
       // {
       //     label: '必填',
@@ -1290,7 +1467,7 @@ const tpls: {
     };
   })(),
 
-  validationErrors: (function () {
+  'validationErrors': (function () {
     const options = [
       // {
       //     label: '必填',
@@ -1520,12 +1697,10 @@ const tpls: {
     };
   })(),
 
-  submitOnChange: {
-    label: '修改即提交',
+  'submitOnChange': {
     type: 'switch',
+    label: '修改即提交',
     name: 'submitOnChange',
-    mode: 'inline',
-    className: 'w-full',
     labelRemark: {
       trigger: 'click',
       className: 'm-l-xs',
@@ -1535,27 +1710,23 @@ const tpls: {
     }
   },
 
-  validateOnChange: {
-    type: 'button-group-select',
+  'validateOnChange': {
+    type: 'select',
     name: 'validateOnChange',
-    label: '修改即触发表单验证',
-    description: '默认为当表单提交过则每次修改都触发验证。',
-    size: 'xs',
-    mode: 'inline',
-    className: 'w-full',
+    label: '校验触发',
     options: [
       {
-        label: '默认',
+        label: '提交后每次修改即触发',
         value: ''
       },
 
       {
-        label: '开启',
+        label: '修改即触发',
         value: true
       },
 
       {
-        label: '关闭',
+        label: '提交触发',
         value: false
       }
     ],
@@ -1563,85 +1734,7 @@ const tpls: {
     pipeOut: (value: any) => (value === '' ? undefined : !!value)
   },
 
-  validationControl: {
-    type: 'ae-validationControl',
-    label: '校验',
-    mode: 'normal'
-  },
-
-  visible: {
-    type: 'fieldSet',
-    title: '显隐配置',
-    collapsable: false, // 避免和最外层的属性配置面板的tabs样式重叠
-    body: [
-      {
-        label: '设置方式',
-        name: 'visible',
-        type: 'button-group-select',
-        size: 'xs',
-        mode: 'inline',
-        className: 'w-full',
-        options: [
-          {
-            label: '静态设置',
-            value: 1
-          },
-
-          {
-            label: '表达式',
-            value: 2
-          }
-        ],
-        pipeIn: (value: any) => (typeof value === 'boolean' ? 1 : 2),
-        pipeOut: (value: any) => (value === 1 ? true : ''),
-        onChange: (value: any, oldValue: boolean, model: any, form: any) => {
-          if (value) {
-            form.setValues({
-              __visibleOn: form.data.visibleOn,
-              visibleOn: '',
-              clearValueOnHidden: false
-            });
-          } else {
-            form.setValueByName('visibleOn', form.data.__visibleOn);
-          }
-        }
-      },
-
-      {
-        type: 'switch',
-        label: '可见(visible)',
-        name: 'visible',
-        visibleOn: 'typeof this.visible === "boolean"',
-        pipeIn: (value: any, data: any) => value !== false && !data.hidden,
-        mode: 'inline',
-        className: 'w-full m-b-none',
-        onChange: (value: boolean, oldValue: boolean, model: any, form: any) =>
-          form.setValueByName('visibleOn', '')
-      },
-
-      {
-        name: 'visibleOn',
-        label: '可见表达式(visibleOn)',
-        labelRemark: {
-          trigger: 'click',
-          className: 'm-l-xs',
-          rootClose: true,
-          content:
-            '纯粹的 JS 语法，this 指向当前数据层。文档：<a href="https://baidu.github.io/amis/docs/concepts/expression">表达式语法</a>',
-          placement: 'left'
-        },
-        placeholder: '如：this.type === 1',
-        type: 'input-text',
-        visibleOn: 'typeof this.visible !== "boolean"',
-        autoComplete: false,
-        pipeIn: (value: any, data: any) =>
-          value || (data.hiddenOn && `!(${data.hiddenOn})`) || '',
-        className: 'm-b-none'
-      }
-    ]
-  },
-
-  initFetch: {
+  'initFetch': {
     type: 'group',
     label: '是否初始加载',
     visibleOn: 'this.initApi',
@@ -1691,155 +1784,200 @@ const tpls: {
     ]
   },
 
-  disabled: (additions: Array<any> = []) => {
-    return {
-      type: 'fieldSet',
-      title: '禁用配置',
-      collapsable: false, // 避免和最外层的属性配置面板的tabs样式重叠
-      body: [
-        ...additions,
-        {
-          label: '设置方式',
-          name: 'disabled',
-          type: 'button-group-select',
-          size: 'xs',
-          mode: 'inline',
-          className: 'w-full',
-          options: [
-            {
-              label: '静态设置',
-              value: 1
-            },
+  'disabled': {
+    type: 'ae-StatusControl',
+    label: '禁用',
+    mode: 'normal',
+    name: 'disabled',
+    expressioName: 'disabledOn'
+  },
 
-            {
-              label: '表达式',
-              value: 2
-            }
-          ],
-          pipeIn: (value: any) => (typeof value === 'boolean' ? 1 : 2),
-          pipeOut: (value: any) => (value === 1 ? false : '')
-        },
+  'readonly': {
+    type: 'ae-StatusControl',
+    label: '只读',
+    mode: 'normal',
+    name: 'readOnly',
+    expressioName: 'readOnlyOn'
+  },
 
-        {
-          type: 'switch',
-          label: '禁用(disabled)',
-          name: 'disabled',
-          visibleOn: 'typeof this.disabled === "boolean"',
-          pipeIn: (value: any, data: any) => value !== false && !data.hidden,
-          mode: 'inline',
-          className: 'w-full m-b-none',
-          onChange: (
-            value: boolean,
-            oldValue: boolean,
-            model: any,
-            form: any
-          ) => form.setValueByName('disabledOn', '')
-        },
+  'visible': {
+    type: 'ae-StatusControl',
+    label: '可见',
+    mode: 'normal',
+    name: 'visible',
+    expressioName: 'visibleOn'
+  },
 
-        {
-          name: 'disabledOn',
-          label: '禁用表达式(disabledOn)',
-          placeholder: '如：this.type === 1',
-          labelRemark: {
-            trigger: 'click',
-            className: 'm-l-xs',
-            rootClose: true,
-            content:
-              '纯粹的 JS 语法，this 指向当前数据层。文档：<a href="https://baidu.github.io/amis/docs/concepts/expression">表达式语法</a>',
-            placement: 'left'
-          },
-          type: 'input-text',
-          visibleOn: 'typeof this.disabled !== "boolean"',
-          className: 'm-b-none'
-        }
-      ]
-    };
+  'hidden': {
+    type: 'ae-StatusControl',
+    label: '隐藏',
+    mode: 'normal',
+    name: 'hidden',
+    expressioName: 'hiddenOn'
+  },
+
+  'maximum': {
+    type: 'input-number',
+    label: '最大值'
+  },
+
+  'minimum': {
+    type: 'input-number',
+    label: '最小值'
   },
 
-  switchDefaultValue: {
+  'switchDefaultValue': {
     type: 'switch',
+    label: '默认值设置',
     name: 'value',
-    label: '设置默认值',
-    mode: 'inline',
-    className: 'w-full',
     pipeIn: (value: any) => typeof value !== 'undefined',
     pipeOut: (value: any, origin: any, data: any) => (value ? '' : undefined),
-    remark: '不设置时根据 name 获取'
+    labelRemark: {
+      trigger: ['hover', 'focus'],
+      setting: true,
+      title: '',
+      content: '不设置时根据 name 获取'
+    }
   },
 
-  multiple: {
-    label: '多选模式',
+  'multiple': (schema: any = {}) => ({
+    type: 'ae-Switch-More',
+    mode: 'normal',
     name: 'multiple',
-    type: 'switch',
-    mode: 'inline',
-    className: 'w-full'
-  },
-
-  joinValues: {
-    type: 'switch',
-    name: 'joinValues',
-    mode: 'inline',
-    className: 'w-full',
-    visibleOn: 'data.multiple',
-    label: '是否拼接值',
-    value: true,
-    description:
-      '开启后将选中的选项 value 的值用连接符拼接起来，作为当前表单项的值。'
-  },
+    label: '可多选',
+    value: false,
+    hiddenOnDefault: true,
+    formType: 'extend',
+    form: {
+      body: schema.replace
+        ? schema.body
+        : [
+            getSchemaTpl('joinValues'),
+            getSchemaTpl('delimiter'),
+            getSchemaTpl('extractValue'),
+            ...[schema.body || []]
+          ]
+    }
+  }),
+
+  'checkAll': () => [
+    getSchemaTpl('switch', {
+      label: '可全选',
+      name: 'checkAll',
+      value: false,
+      visibleOn: 'data.multiple'
+    }),
+    {
+      type: 'container',
+      className: 'ae-ExtendMore mb-2',
+      visibleOn: 'data.checkAll && data.multiple',
+      body: [
+        getSchemaTpl('switch', {
+          label: '默认全选',
+          name: 'defaultCheckAll',
+          value: false
+        }),
+        {
+          type: 'input-text',
+          name: 'checkAllLabel',
+          label: '选项文案',
+          value: '全选',
+          mode: 'row'
+        }
+      ]
+    }
+  ],
 
-  delimiter: {
+  'joinValues': () =>
+    getSchemaTpl('switch', {
+      label: tipedLabel(
+        '拼接值',
+        '开启后将选中的选项 value 的值用连接符拼接起来，作为当前表单项的值'
+      ),
+      name: 'joinValues',
+      visibleOn: 'data.multiple',
+      value: true
+    }),
+
+  'delimiter': {
     type: 'input-text',
     name: 'delimiter',
-    label: '连接符',
+    label: tipedLabel('拼接符', '将多个值拼接成一个字符串的连接符号'),
     visibleOn: 'data.multiple && data.joinValues',
     pipeIn: defaultValue(',')
   },
 
-  extractValue: {
+  'extractValue': {
     type: 'switch',
+    label: tipedLabel(
+      '仅提取值',
+      '开启后将选中项的 value 封装为数组，关闭后则将整个选项数据封装为数组。'
+    ),
     name: 'extractValue',
-    mode: 'inline',
-    className: 'w-full',
-    label: '是否抽取value值',
-    visibleOn: 'data.joinValues === false',
-    pipeIn: defaultValue(false),
-    description: '开启后将选中的选项 value 的值封装为数组，作为当前表单项的值。'
+    inputClassName: 'is-inline',
+    visibleOn: 'data.multiple && data.joinValues === false',
+    pipeIn: defaultValue(false)
   },
 
-  creatable: {
-    label: '可创建选项',
-    name: 'creatable',
-    type: 'switch',
-    mode: 'inline',
-    className: 'w-full'
+  'creatable': (schema: Partial<SchemaObject> = {}) => {
+    return {
+      label: tipedLabel('可创建', '配置事件动作可插入或拦截默认交互'),
+      type: 'ae-switch-more',
+      mode: 'normal',
+      name: 'creatable',
+      ...schema
+    };
   },
 
-  createBtnLabel: {
-    label: '创建按钮文字',
+  'addApi': () =>
+    getSchemaTpl('apiControl', {
+      label: '新增接口',
+      name: 'addApi',
+      visibleOn: 'data.creatable'
+    }),
+
+  'createBtnLabel': {
+    label: '按钮名称',
     name: 'createBtnLabel',
     type: 'input-text',
-    mode: 'inline',
-    placeholder: '新增选项',
-    className: 'w-full'
+    placeholder: '新建'
   },
 
-  editable: {
-    label: '可编辑选项',
-    name: 'editable',
-    type: 'switch',
-    mode: 'inline',
-    className: 'w-full'
+  'editable': (schema: Partial<SchemaObject> = {}) => {
+    return {
+      label: tipedLabel('可编辑', '配置事件动作可插入或拦截默认交互'),
+      type: 'ae-switch-more',
+      mode: 'normal',
+      name: 'editable',
+      ...schema
+    };
   },
 
-  removable: {
-    label: '可删除选项',
-    name: 'removable',
-    type: 'switch',
-    mode: 'inline',
-    className: 'w-full'
+  'editApi': () =>
+    getSchemaTpl('apiControl', {
+      label: '编辑接口',
+      name: 'editApi',
+      visibleOn: 'data.editable'
+    }),
+
+  'removable': (schema: Partial<SchemaObject> = {}) => {
+    return {
+      label: tipedLabel('可删除', '配置事件动作可插入或拦截默认交互'),
+      type: 'ae-switch-more',
+      mode: 'normal',
+      name: 'removable',
+      ...schema
+    };
   },
 
-  ref: () => {
+  'deleteApi': () =>
+    getSchemaTpl('apiControl', {
+      label: '删除接口',
+      name: 'deleteApi',
+      visibleOn: 'data.removable'
+    }),
+
+  'ref': () => {
     // {
     //   type: 'input-text',
     //   name: '$ref',
@@ -1849,17 +1987,22 @@ const tpls: {
     return null;
   },
 
-  imageUrl: {
+  'imageUrl': {
     type: 'input-text',
     label: '图片'
   },
 
-  fileUrl: {
+  'backgroundImageUrl': {
+    type: 'input-text',
+    label: '图片路径'
+  },
+
+  'fileUrl': {
     type: 'input-text',
     label: '文件'
   },
 
-  markdownBody: {
+  'markdownBody': {
     name: 'value',
     type: 'editor',
     language: 'markdown',
@@ -1870,7 +2013,7 @@ const tpls: {
     }
   },
 
-  richText: {
+  'richText': {
     label: '富文本',
     type: 'input-rich-text',
     buttons: [
@@ -1901,18 +2044,20 @@ const tpls: {
     size: 'lg'
   },
 
-  showCounter: {
-    label: '是否显示计数器',
-    name: 'showCounter',
+  'showCounter': {
     type: 'switch',
-    mode: 'inline',
-    className: 'w-full'
+    label: '计数器',
+    name: 'showCounter',
+    inputClassName: 'is-inline'
   },
 
-  borderMode: {
-    type: 'select',
+  'borderMode': {
     name: 'borderMode',
     label: '边框模式',
+    type: 'button-group-select',
+    size: 'sm',
+    mode: 'row',
+    className: 'ae-buttonGroupSelect--justify',
     options: [
       {label: '全边框', value: 'full'},
       {label: '半边框', value: 'half'},
@@ -1920,10 +2065,432 @@ const tpls: {
     ]
   },
 
-  data: {
+  'searchable': () =>
+    getSchemaTpl('switch', {
+      label: '可检索',
+      name: 'searchable'
+    }),
+
+  'sortable': {
+    type: 'switch',
+    label: '可排序',
+    name: 'sortable'
+  },
+
+  'selectFirst': {
+    type: 'switch',
+    label: '是否默认选择第一个',
+    name: 'selectFirst'
+  },
+
+  'hideNodePathLabel': {
+    type: 'switch',
+    label: '隐藏选中节点的祖先节点文本信息',
+    name: 'hideNodePathLabel'
+  },
+
+  'clearValueOnHidden': () =>
+    getSchemaTpl('switch', {
+      type: 'switch',
+      horizontal: {left: 8, justify: true},
+      label: tipedLabel(
+        '隐藏时删除字段',
+        '当前表单项隐藏时，表单提交数据中会删除该表单项的值'
+      ),
+      name: 'clearValueOnHidden'
+    }),
+
+  'utc': {
+    type: 'switch',
+    label: tipedLabel(
+      'UTC转换',
+      '开启后，提交数据和展示数据将进行UTC转换；存在跨地域用户的应用建议开启'
+    ),
+    name: 'utc',
+    inputClassName: 'is-inline'
+  },
+
+  'embed': {
+    type: 'switch',
+    label: '内嵌模式',
+    name: 'embed'
+  },
+
+  'buttonLevel': {
+    label: '按钮样式',
+    type: 'select',
+    name: 'level',
+    options: [
+      {
+        label: '默认',
+        value: 'default',
+        level: 'default'
+      },
+      {
+        label: '链接',
+        value: 'link',
+        level: 'link'
+      },
+      {
+        label: '主色',
+        value: 'primary',
+        level: 'primary'
+      },
+
+      {
+        label: '淡色',
+        value: 'light',
+        level: 'light'
+      },
+      {
+        label: '深色',
+        value: 'dark',
+        level: 'dark'
+      },
+
+      {
+        label: '提示',
+        value: 'info',
+        level: 'info'
+      },
+      {
+        label: '成功',
+        value: 'success',
+        level: 'success'
+      },
+      {
+        label: '警告',
+        value: 'warning',
+        level: 'warning'
+      },
+      {
+        label: '严重',
+        value: 'danger',
+        level: 'danger'
+      },
+      {
+        label: '次要',
+        value: 'secondary',
+        level: 'secondary'
+      },
+      {
+        label: '加强',
+        value: 'enhance',
+        level: 'enhance'
+      }
+    ],
+    pipeIn: defaultValue('default')
+  },
+
+  'uploadType': {
+    label: '上传方式',
+    name: 'uploadType',
+    type: 'select',
+    value: 'fileReceptor',
+    options: [
+      {
+        label: '文件接收器',
+        value: 'fileReceptor'
+      },
+
+      {
+        label: '对象存储',
+        value: 'bos'
+      }
+    ]
+  },
+
+  'bos': {
+    label: '存储仓库',
+    type: 'select',
+    name: 'bos',
+    value: 'default',
+    options: [
+      {
+        label: '平台默认',
+        value: 'default'
+      }
+    ]
+  },
+
+  'proxy': {
+    type: 'switch',
+    label: '后端代理',
+    name: 'proxy',
+    mode: 'horizontal',
+    horizontal: {
+      justify: true,
+      left: 8
+    },
+    inputClassName: 'is-inline'
+  },
+
+  /**
+   * 选项控件
+   */
+  'optionControl': {
+    label: '数据',
+    mode: 'normal',
+    name: 'options',
+    type: 'ae-optionControl'
+  },
+
+  'badge': {
+    label: '角标',
+    name: 'badge',
+    type: 'ae-badge'
+  },
+
+  /**
+   * 接口控件
+   */
+  'apiControl': (patch: any = {}) => {
+    const {name, label, value, description, sampleBuilder, ...rest} = patch;
+
+    return {
+      type: 'ae-apiControl',
+      label,
+      name,
+      description,
+      mode: 'normal',
+      labelRemark: sampleBuilder
+        ? {
+            icon: '',
+            label: '示例',
+            title: '接口返回示例',
+            tooltipClassName: 'ae-ApiSample-tooltip',
+            render: (data: any) => (
+              <Html
+                className="ae-ApiSample"
+                inline={false}
+                html={`
+                    <pre><code>${sampleBuilder(data)}</code></pre>
+                    `}
+              />
+            ),
+            trigger: 'click',
+            className: 'm-l-xs',
+            rootClose: true,
+            placement: 'left'
+          }
+        : undefined,
+      ...rest
+    };
+  },
+
+  /**
+   * 接口控件
+   */
+  'actionApiControl': (patch: any = {}) => {
+    const {name, label, value, description, sampleBuilder, ...rest} = patch;
+
+    return {
+      type: 'ae-actionApiControl',
+      label,
+      name,
+      description,
+      mode: 'normal',
+      labelRemark: sampleBuilder
+        ? {
+            icon: '',
+            label: '示例',
+            title: '接口返回示例',
+            tooltipClassName: 'ae-ApiSample-tooltip',
+            render: (data: any) => (
+              <Html
+                className="ae-ApiSample"
+                inline={false}
+                html={`
+                    <pre><code>${sampleBuilder(data)}</code></pre>
+                    `}
+              />
+            ),
+            trigger: 'click',
+            className: 'm-l-xs',
+            rootClose: true,
+            placement: 'left'
+          }
+        : undefined,
+      ...rest
+    };
+  },
+
+  'validation': (config: {
+    tag: ValidatorTag | ((ctx: any) => ValidatorTag);
+  }) => {
+    let a = {
+      title: '校验',
+      body: [
+        {
+          type: 'ae-validationControl',
+          mode: 'normal',
+          ...config
+          // pipeIn: (value: any, data: any) => {
+          //   // return reduce(value, (arr: any, item) => {
+          //   //   if (typeof item === 'string') {
+          //   //     arr.push(item);
+          //   //   }
+          //   //   else {
+          //   //     let isAdd = false;
+          //   //     // 优先判断是否具备可展示条件
+          //   //     forEach(item?.isShow, (val, key) => {
+          //   //       if ([...val].includes(data?.data[key])) {
+          //   //         isAdd = true;
+          //   //         return false;
+          //   //       }
+          //   //     })
+          //   //     !isAdd  && forEach(item?.isHidden, (val, key) => {
+          //   //       const hasExist = [...val].includes(data?.data[key]);
+          //   //         isAdd = hasExist ? false : true;
+          //   //         if (hasExist) {
+          //   //           return false;
+          //   //         }
+          //   //     })
+          //   //     isAdd && arr.push(item.option);
+          //   //   }
+          //   //   return arr;
+          //   // }, []);
+          // },
+        },
+        getSchemaTpl('validateOnChange')
+      ]
+    };
+    return a;
+  },
+  /**
+   * 表单项校验控件
+   */
+  'validationControl': (value: Array<ValidationOptions> = []) => ({
+    type: 'ae-validationControl',
+    label: '校验规则',
+    mode: 'normal',
+    pipeIn: (value: any, data: any) => {
+      return reduce(
+        value,
+        (arr: any, item) => {
+          if (typeof item === 'string') {
+            arr.push(item);
+          } else {
+            let isAdd = false;
+            // 优先判断是否具备可展示条件
+            forEach(item?.isShow, (val, key) => {
+              if ([...val].includes(data?.data[key])) {
+                isAdd = true;
+                return false;
+              }
+              return true;
+            });
+            !isAdd &&
+              forEach(item?.isHidden, (val, key) => {
+                const hasExist = [...val].includes(data?.data[key]);
+                isAdd = hasExist ? false : true;
+                if (hasExist) {
+                  return false;
+                }
+                return true;
+              });
+            isAdd && arr.push(item.option);
+          }
+          return arr;
+        },
+        []
+      );
+    },
+    value
+  }),
+
+  /**
+   * 表达式编辑器控件
+   */
+  'formulaControl': (schema: object = {}) => {
+    return {
+      type: 'ae-formulaControl',
+      ...schema
+    };
+  },
+
+  /**
+   * 日期范围快捷键组件
+   */
+  'dateShortCutControl': (schema: object = {}) => {
+    return {
+      type: 'ae-DateShortCutControl',
+      ...schema
+    };
+  },
+
+  'eventControl': (schema: any = {}) => {
+    return {
+      type: 'ae-eventControl',
+      mode: 'normal',
+      ...schema
+    };
+  },
+
+  'style:formItem': ({renderer, schema}: any) => {
+    return {
+      title: '表单项',
+      key: 'formItem',
+      body: [
+        getSchemaTpl('formItemMode'),
+        getSchemaTpl('labelHide'),
+        getSchemaTpl('horizontal'),
+        renderer?.sizeMutable !== false ? getSchemaTpl('formItemSize') : null
+        // getSchemaTpl('formItemInline')
+      ].concat(schema)
+    };
+  },
+
+  'style:classNames': (config: {
+    schema: SchemaCollection;
+    isFormItem: boolean;
+  }) => {
+    const {isFormItem = true, schema = []} = config || {};
+
+    return {
+      title: 'CSS 类名',
+      body: (isFormItem
+        ? [
+            getSchemaTpl('className', {
+              label: '表单项'
+            }),
+            getSchemaTpl('className', {
+              label: '标签',
+              name: 'labelClassName'
+            }),
+            getSchemaTpl('className', {
+              label: '控件',
+              name: 'inputClassName'
+            })
+          ]
+        : [
+            getSchemaTpl('className', {
+              label: '外层'
+            })
+          ]
+      ).concat(schema)
+    };
+  },
+
+  'style:others': (schemas: any[] = []) => ({
+    title: '其他项',
+    body: [...schemas]
+  }),
+
+  'data': {
     type: 'input-kv',
     name: 'data',
     label: '初始静态数据'
+  },
+
+  'app-page': {
+    type: 'nested-select',
+    label: '选择页面',
+    name: 'link',
+    mode: 'horizontal',
+    size: 'lg',
+    required: true,
+    options: []
   }
 };
 
@@ -2115,23 +2682,165 @@ export const styleTpl = {
     }
   ]
 };
-tpls.style = styleTpl;
+
+/**
+ * 通用CSS Style控件
+ * @param {string | Array<string>} exclude 需要隐藏的配置key
+ */
+tpls['style:common'] = (exclude: string[] | string) => {
+  // key统一转换成Kebab case，eg: boxShadow => bos-shadow
+  exclude = (exclude
+    ? Array.isArray(exclude)
+      ? exclude
+      : [exclude]
+    : []
+  ).map((key: string) => kebabCase(key));
+
+  return [
+    {
+      header: '布局',
+      key: 'layout',
+      body: [
+        {
+          type: 'style-display',
+          label: false,
+          name: 'style'
+        }
+      ].filter(comp => !~exclude.indexOf(comp.type.replace(/^style-/i, '')))
+    },
+    {
+      header: '文字',
+      key: 'font',
+      body: [
+        {
+          type: 'style-font',
+          label: false,
+          name: 'style'
+        }
+      ]
+    },
+    {
+      header: '内外边距',
+      key: 'box-model',
+      body: [
+        {
+          type: 'style-box-model',
+          label: false,
+          name: 'style'
+        }
+      ]
+    },
+    {
+      header: '背景',
+      key: 'background',
+      body: [
+        {
+          type: 'style-background',
+          label: false,
+          name: 'style'
+        }
+      ]
+    },
+    {
+      header: '边框',
+      key: 'border',
+      body: [
+        {
+          type: 'style-border',
+          label: false,
+          name: 'style'
+        }
+      ]
+    },
+    {
+      header: '阴影',
+      key: 'box-shadow',
+      body: [
+        {
+          type: 'style-box-shadow',
+          label: false,
+          name: 'style.boxShadow'
+        }
+      ]
+    },
+    {
+      header: '其他',
+      key: 'other',
+      body: [
+        {
+          label: '透明度',
+          name: 'style.opacity',
+          min: 0,
+          max: 1,
+          step: 0.05,
+          type: 'input-range',
+          pipeIn: defaultValue(1),
+          marks: {
+            '0%': '0',
+            '50%': '0.5',
+            '100%': '1'
+          }
+        },
+        {
+          label: '光标类型',
+          name: 'style.cursor',
+          type: 'select',
+          mode: 'row',
+          menuTpl: {
+            type: 'html',
+            html:
+              "<span style='cursor:${value};'>${label}</span><code class='ae-Code'>${value}</code>",
+            className: 'ae-selection-code'
+          },
+          pipIn: defaultValue('default'),
+          options: [
+            {label: '默认', value: 'default'},
+            {label: '自动', value: 'auto'},
+            {label: '无指针', value: 'none'},
+            {label: '悬浮', value: 'pointer'},
+            {label: '帮助', value: 'help'},
+            {label: '文本', value: 'text'},
+            {label: '单元格', value: 'cell'},
+            {label: '交叉指针', value: 'crosshair'},
+            {label: '可移动', value: 'move'},
+            {label: '禁用', value: 'not-allowed'},
+            {label: '可抓取', value: 'grab'},
+            {label: '放大', value: 'zoom-in'},
+            {label: '缩小', value: 'zoom-out'}
+          ]
+        }
+      ]
+    }
+  ].filter(item => !~exclude.indexOf(item.key));
+};
+
+export function getCollapseCate(config: {
+  name: string;
+  body: SchemaCollection;
+  visibleOn?: string;
+  tools: SchemaCollection;
+}) {
+  return;
+}
 
 export function getSchemaTpl(name: string, patch?: object): any {
-  const tpl = tpls[name];
+  const tpl = tpls[name] || {};
+  let schema = null;
 
   if (typeof tpl === 'function') {
-    return tpl(patch);
+    schema = tpl(patch);
+  } else {
+    schema = tpl
+      ? patch
+        ? {
+            ...tpl,
+            ...patch
+          }
+        : tpl
+      : null;
   }
 
-  return tpl
-    ? patch
-      ? {
-          ...tpl,
-          ...patch
-        }
-      : tpl
-    : null;
+  return schema;
 }
 
 export function setSchemaTpl(name: string, value: any) {
@@ -2150,6 +2859,21 @@ export function valuePipeOut(value: any) {
   }
 }
 
+export function undefinedPipeOut(value: any) {
+  if (Array.isArray(value)) {
+    return value.length ? value : undefined;
+  }
+
+  if (typeof value === 'string') {
+    return value ? value : undefined;
+  }
+
+  if (typeof value === 'object') {
+    return Object.keys(value).length ? value : undefined;
+  }
+  return value;
+}
+
 export function defaultValue(defaultValue: any, strictMode: boolean = true) {
   return strictMode
     ? (value: any) => (typeof value === 'undefined' ? defaultValue : value)