amis-editor 4.1.0-beta.2 → 4.1.0-beta.20

package/src/component/schemaTpl.tsx

@@ -0,0 +1,2155 @@
+/**
+ * @file amis schema 配置模板，主要很多地方都要全部配置的化，
+ * 会有很多份，而且改起来很麻烦，复用率高的放在这管理。
+ */
+import {isObject} from '../util';
+import find = require('lodash/find');
+import {normalizeOptions, str2rules, buildApi, Select, Html} from 'amis';
+import flatten from 'lodash/flatten';
+import React = require('react');
+import {InputComponentName} from './base/InputComponentName';
+import remarkTpl from './remarkTpl';
+
+const tpls: {
+  [propName: string]: any;
+} = {
+  formItemName: {
+    label: '字段名',
+    name: 'name',
+    type: 'input-text'
+    // validations: {
+    //     matchRegexp: /^[a-z\$][a-z0-0\-_]*$/i
+    // },
+    // validationErrors: {
+    //     "matchRegexp": "请输入合法的变量名"
+    // },
+    // validateOnChange: false
+  },
+
+  formItemMode: {
+    label: '表单项展示模式',
+    name: 'mode',
+    type: 'button-group-select',
+    size: 'sm',
+    option: '继承',
+    // mode: 'inline',
+    // className: 'w-full',
+    pipeIn: defaultValue(''),
+    options: [
+      {
+        label: '继承',
+        value: ''
+      },
+
+      {
+        label: '正常',
+        value: 'normal'
+      },
+
+      {
+        label: '内联',
+        value: 'inline'
+      },
+
+      {
+        label: '水平',
+        value: 'horizontal'
+      }
+    ]
+  },
+
+  formItemInline: {
+    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: {
+    name: 'size',
+    label: '控件尺寸',
+    type: 'button-group-select',
+    size: 'sm',
+    pipeIn: defaultValue('full'),
+    // mode: 'inline',
+    // className: 'w-full',
+    options: [
+      {
+        label: '极小',
+        value: 'xs'
+      },
+
+      {
+        label: '小',
+        value: 'sm'
+      },
+
+      {
+        label: '中',
+        value: 'md'
+      },
+
+      {
+        label: '大',
+        value: 'lg'
+      },
+
+      {
+        label: '默认',
+        value: ''
+      }
+    ]
+  },
+
+  minLength: {
+    name: 'minLength',
+    type: 'input-number',
+    label: '限制最小数量'
+  },
+
+  maxLength: {
+    name: 'maxLength',
+    type: 'input-number',
+    label: '限制最大数量'
+  },
+
+  label: [
+    {
+      label: 'Label',
+      name: 'label',
+      type: 'input-text',
+      hiddenOn: 'data.label === false'
+    },
+    {
+      name: 'label',
+      label: '隐藏 Label',
+      type: 'switch',
+      mode: 'inline',
+      className: 'w-full',
+      pipeIn: (value: any) => value === false,
+      pipeOut: (value: any) => (value === true ? false : ''),
+      visibleOn:
+        '__props__.formMode === "horizontal" || data.mode === "horizontal" || data.label ===false',
+      description: '当 form 为水平布局时有用，可以用来去掉间隔。'
+    }
+  ],
+
+  placeholder: {
+    label: '占位符',
+    name: 'placeholder',
+    type: 'input-text',
+    placeholder: '占位符'
+  },
+
+  tabs: (
+    config: Array<{
+      title: string;
+      body: Array<any>;
+    }>
+  ) => {
+    return {
+      type: 'tabs',
+      tabsMode: 'line', // tiled
+      className: 'editor-prop-config-tabs',
+      contentClassName:
+        'no-border editor-prop-config-tabs-cont hoverShowScrollBar',
+      tabs: config
+        .filter(item => item)
+        .map(item => ({
+          ...item,
+          body: flatten(item.body)
+        }))
+    };
+  },
+
+  collapse: (
+    config: Array<{
+      title: string;
+      body: Array<any>;
+    }>
+  ) => {
+    return {
+      type: 'wrapper',
+      className: 'editor-prop-config-collapse',
+      body: config
+        .filter(item => item)
+        .map(item => ({
+          type: 'collapse',
+          headingClassName: 'editor-prop-config-head',
+          bodyClassName: 'editor-prop-config-body',
+          ...item,
+          body: flatten(item.body)
+        }))
+    };
+  },
+
+  fieldSet: (config: {
+    title: string;
+    body: Array<any>;
+    collapsed?: boolean;
+    collapsable?: boolean;
+  }) => {
+    return {
+      collapsable: true,
+      collapsed: false,
+      ...config,
+      type: 'fieldset',
+      title: config.title,
+      body: flatten(config.body.filter((item: any) => item))
+    };
+  },
+
+  clearable: {
+    type: 'switch',
+    name: 'clearable',
+    mode: 'inline',
+    className: 'w-full',
+    label: '启用清除按钮'
+  },
+
+  hint: {
+    label: '输入提示',
+    type: 'input-text',
+    name: 'hint',
+    description: '当输入框获得焦点的时候显示，用来提示用户输入内容。'
+  },
+
+  remark: remarkTpl({name: 'remark', label: '控件提示'}),
+
+  labelRemark: remarkTpl({name: 'labelRemark', label: '标题提示'}),
+
+  expression: {
+    type: 'input-text',
+    description: '支持 JS 表达式，如：`this.xxx == 1`'
+  },
+
+  icon: {
+    label: '图标',
+    type: 'icon-picker',
+    name: 'icon',
+    placeholder: '点击选择图标',
+    clearable: true,
+    description: ''
+  },
+
+  size: {
+    label: '控件尺寸',
+    type: 'button-group-select',
+    name: 'size',
+    size: 'sm',
+    clearable: true,
+    options: [
+      {
+        label: '极小',
+        value: 'xs'
+      },
+      {
+        label: '小',
+        value: 'sm'
+      },
+      {
+        label: '中',
+        value: 'md'
+      },
+      {
+        label: '大',
+        value: 'lg'
+      }
+    ]
+  },
+
+  name: {
+    label: '名字',
+    name: 'name',
+    type: 'input-text',
+    description: '需要联动时才需要，其他组件可以通过这个名字跟当前组件联动',
+    placeholder: '请输入字母或者数字'
+  },
+
+  reload: {
+    label: '刷新目标组件',
+    name: 'reload',
+    asFormItem: true,
+    // type: 'input-text',
+    component: InputComponentName,
+    description:
+      '可以指定操作完成后刷新目标组件，请填写目标组件的 <code>name</code> 属性，多个组件请用<code>,</code>隔开，如果目标组件为表单项，请先填写表单的名字，再用<code>.</code>连接表单项的名字如：<code>xxForm.xxControl</code>。另外如果刷新目标对象设置为 <code>window</code>，则会刷新整个页面。',
+    labelRemark: {
+      trigger: 'click',
+      className: 'm-l-xs',
+      rootClose: true,
+      content:
+        '设置名字后，当前组件操作完成会触发目标组件（根据设置的名字）的刷新。',
+      placement: 'left'
+    }
+  },
+
+  className: {
+    label: 'CSS 类名',
+    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 = {}) => {
+    const {name, label, value, description, sampleBuilder, ...rest} = patch;
+
+    return {
+      type: 'container',
+      body: [
+        {
+          type: 'checkbox',
+          label: label || 'API',
+          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,
+          option: `高级配置`,
+          name: name || 'api',
+          mode: 'inline',
+          className: 'w-full m-b-sm',
+          inputClassName: 'pull-right text-sm m-t-sm p-t-none',
+          onChange: () => {},
+          pipeIn: (value: any) => value && typeof value !== 'string',
+          pipeOut: (value: any, originValue: any) => {
+            const api = buildApi(originValue);
+
+            return value
+              ? {
+                  method: api.method,
+                  url: api.url
+                }
+              : api.url
+              ? `${api.method ? `${api.method}:` : ''}${api.url}`
+              : '';
+          }
+        },
+
+        {
+          name: name || 'api',
+          type: 'input-text',
+          value,
+          placeholder: 'http://',
+          description: description,
+          visibleOn: `!this.${name || 'api'} || typeof this.${
+            name || 'api'
+          } === 'string'`,
+          className: 'm-b-none',
+          labelRemark: {}
+          // disabledOn: `data.${name || 'api'} && data.${name || 'api'}.data && Object.keys(data.${name || 'api'}.data).length || data.${name || 'api'} && data.${name || 'api'}.sendOn`,
+        },
+
+        {
+          type: 'combo',
+          name: name || 'api',
+          description: description,
+          syncDefaultValue: false,
+          multiLine: true,
+          visibleOn: `this.${name || 'api'} && typeof this.${
+            name || 'api'
+          } !== 'string'`,
+          className: 'm-b-none',
+          messages: {
+            validateFailed: '接口配置中存在错误，请仔细检查'
+          },
+          pipeIn: (value: any) => {
+            if (typeof value === 'string') {
+              let url = value;
+              let method = 'get';
+
+              const m =
+                /^(raw:|external:)?(get|post|put|patch|delete):(.*)$/.exec(url);
+              if (m) {
+                url = m[1] + m[3];
+                method = m[2];
+              }
+
+              return {
+                method,
+                url
+              };
+            }
+
+            return value;
+          },
+          items: [
+            {
+              label: '发送方式',
+              name: 'method',
+              value: 'get',
+              type: 'select',
+              mode: 'horizontal',
+              horizontal: {
+                leftFixed: 'sm'
+              },
+              options: [
+                {
+                  value: 'get',
+                  label: 'GET'
+                },
+                {
+                  value: 'post',
+                  label: 'POST'
+                },
+                {
+                  value: 'put',
+                  label: 'PUT'
+                },
+                {
+                  value: 'patch',
+                  label: 'PATCH'
+                },
+                {
+                  value: 'delete',
+                  label: 'DELETE'
+                }
+              ]
+            },
+
+            {
+              label: '接口地址',
+              type: 'input-text',
+              name: 'url',
+              placeholder: 'http://',
+              required: true
+            },
+
+            {
+              type: 'switch',
+              label: '数据映射',
+              name: 'data',
+              mode: 'inline',
+              className: 'w-full m-b-xs',
+              pipeIn: (value: any) => !!value,
+              pipeOut: (value: any) => (value ? {'&': '$$'} : null)
+            },
+
+            {
+              type: 'tpl',
+              visibleOn: '!this.data',
+              inline: false,
+              className: 'text-sm text-muted m-b',
+              tpl: '当没开启数据映射时，发送 API 的时候会发送尽可能多的数据，如果你想自己控制发送的数据，或者需要额外的数据处理，请开启此选项'
+            },
+
+            {
+              type: 'input-kv',
+              syncDefaultValue: false,
+              name: 'data',
+              visibleOn: 'this.data',
+              descriptionClassName: 'help-block text-xs m-b-none',
+              description:
+                '<p>当没开启数据映射时，发送数据自动切成白名单模式，配置啥发送啥，请绑定数据。如：<code>{"a": "\\${a}", "b": 2}</code></p><p>如果希望在默认的基础上定制，请先添加一个 Key 为 `&` Value 为 `\\$$` 作为第一行。</p><div>当值为 <code>__undefined</code>时，表示删除对应的字段，可以结合<code>{"&": "\\$$"}</code>来达到黑名单效果。</div>'
+            },
+
+            {
+              label: '发送条件',
+              type: 'input-text',
+              name: 'sendOn',
+              placeholder: '如：this.type == "123"',
+              description: '用表达式来设置该请求的发送条件'
+            },
+
+            {
+              type: 'switch',
+              label: '是否设置缓存',
+              name: 'cache',
+              mode: 'inline',
+              className: 'w-full m-b-xs',
+              description: '设置该请求缓存的有效时间',
+              pipeIn: (value: any) => !!value,
+              pipeOut: (value: any) => (value ? 3000 : undefined)
+            },
+
+            {
+              type: 'input-number',
+              name: 'cache',
+              mode: 'inline',
+              min: 0,
+              step: 500,
+              visibleOn: 'this.cache',
+              pipeIn: (value: any) => (typeof value === 'number' ? value : 0)
+            },
+
+            {
+              label: '文件下载',
+              type: 'switch',
+              name: 'responseType',
+              mode: 'inline',
+              className: 'block',
+              pipeIn: (value: any) => value === 'blob',
+              pipeOut: (value: any) => (value ? 'blob' : undefined),
+              description:
+                '当接口为二进制文件下载时请勾选，并设置 Content-Disposition'
+            },
+
+            {
+              label: '数据格式',
+              type: 'button-group-select',
+              name: 'dataType',
+              description:
+                '发送体格式为：<%= data.dataType === "json" ? "application/json" : data.dataType === "form-data" ? "multipart/form-data" : data.dataType === "form" ? "application/x-www-form-urlencoded" : "" %>，当发送内容中存在文件时会自动使用 form-data 格式。',
+              size: 'sm',
+              className: 'block',
+              mode: 'inline',
+              options: [
+                {
+                  label: 'JSON',
+                  value: 'json'
+                },
+                {
+                  label: 'FormData',
+                  value: 'form-data'
+                },
+                {
+                  label: 'Form',
+                  value: 'form'
+                }
+              ]
+            },
+
+            {
+              type: 'switch',
+              label: '数据替换',
+              name: 'replaceData',
+              mode: 'inline',
+              className: 'w-full',
+              description: '默认数据都是追加方式，开启这个后是完全替换'
+            },
+
+            {
+              type: 'switch',
+              label: '返回结果映射',
+              name: 'responseData',
+              mode: 'inline',
+              className: 'w-full m-b-xs',
+              pipeIn: (value: any) => !!value,
+              pipeOut: (value: any) => (value ? {'&': '$$'} : null)
+            },
+
+            {
+              type: 'tpl',
+              visibleOn: '!this.responseData',
+              inline: false,
+              className: 'text-sm text-muted m-b',
+              tpl: '如果需要对返回结果做额外的数据处理，请开启此选项'
+            },
+
+            {
+              type: 'input-kv',
+              syncDefaultValue: false,
+              name: 'responseData',
+              visibleOn: 'this.responseData',
+              descriptionClassName: 'help-block text-xs m-b-none'
+            },
+
+            {
+              title: '自定义适配器',
+              type: 'fieldSet',
+              className: 'm-b-none',
+              size: 'sm',
+              collapsable: false, // 避免和最外层的属性配置面板的tabs样式重叠
+              collapsedOn: '!this.requestAdaptor && !this.adaptor',
+              body: [
+                {
+                  name: 'requestAdaptor',
+                  type: 'js-editor',
+                  allowFullscreen: true,
+                  label: '发送适配器',
+                  description:
+                    '函数签名：(api) => api， 数据在 api.data 中，修改后返回 api 对象。'
+                },
+
+                {
+                  name: 'adaptor',
+                  type: 'js-editor',
+                  allowFullscreen: true,
+                  label: '接收适配器',
+                  description: '函数签名: (payload, response, api) => payload'
+                }
+              ]
+            }
+          ]
+        }
+      ],
+      ...rest
+    };
+  },
+
+  source: (patch: any = {}) => {
+    return getSchemaTpl('api', {
+      name: 'source',
+      label: '获取选项接口',
+      description: '可以通过接口获取动态选项，一次拉取全部。',
+      sampleBuilder: (schema: any) =>
+        JSON.stringify(
+          {
+            status: 0,
+            msg: '',
+            data: {
+              options: [
+                {
+                  label: '选项A',
+                  value: 'a'
+                },
+
+                {
+                  label: '选项B',
+                  value: 'b'
+                }
+              ]
+            }
+          },
+          null,
+          2
+        ),
+      ...patch
+    });
+  },
+
+  autoFill: {
+    type: 'input-kv',
+    name: 'autoFill',
+    label: '自动填充',
+    descriptionClassName: 'help-block text-xs m-b-none',
+    description:
+      '将当前已选中的选项的某个字段的值，自动填充到表单中某个表单项中，支持数据映射'
+  },
+
+  apiString: {
+    name: 'api',
+    type: 'input-text',
+    placeholder: 'http://'
+  },
+
+  required: {
+    name: 'required',
+    type: 'switch',
+    mode: 'inline',
+    className: 'w-full',
+    label: '是否必填'
+  },
+
+  description: {
+    name: 'description',
+    type: 'textarea',
+    label: '描述',
+    pipeIn: (value: any, data: any) => value || data.desc || ''
+  },
+
+  options: {
+    label: '选项 Options',
+    name: 'options',
+    type: 'combo',
+    multiple: true,
+    draggable: true,
+    addButtonText: '新增选项',
+    scaffold: {
+      label: '',
+      value: ''
+    },
+    items: [
+      {
+        type: 'input-text',
+        name: 'label',
+        placeholder: '名称',
+        required: true
+      },
+      {
+        type: 'select',
+        name: 'value',
+        pipeIn: (value: any) => {
+          if (typeof value === 'string') {
+            return 'text';
+          }
+          if (typeof value === 'boolean') {
+            return 'boolean';
+          }
+          if (typeof value === 'number') {
+            return 'number';
+          }
+          return 'text';
+        },
+        pipeOut: (value: any, oldValue: any) => {
+          if (value === 'text') {
+            return String(oldValue);
+          }
+          if (value === 'number') {
+            const convertTo = Number(oldValue);
+            if (isNaN(convertTo)) {
+              return 0;
+            }
+            return convertTo;
+          }
+          if (value === 'boolean') {
+            return Boolean(oldValue);
+          }
+          return '';
+        },
+        options: [
+          {label: '文本', value: 'text'},
+          {label: '数字', value: 'number'},
+          {label: '布尔', value: 'boolean'}
+        ]
+      },
+      {
+        type: 'input-number',
+        name: 'value',
+        placeholder: '值',
+        visibleOn: 'typeof data.value === "number"',
+        unique: true
+      },
+      {
+        type: 'switch',
+        name: 'value',
+        placeholder: '值',
+        visibleOn: 'typeof data.value === "boolean"',
+        unique: true
+      },
+      {
+        type: 'input-text',
+        name: 'value',
+        placeholder: '值',
+        visibleOn:
+          'typeof data.value === "undefined" || typeof data.value === "string"',
+        unique: true
+      }
+    ]
+  },
+
+  tree: {
+    label: '选项 Options',
+    name: 'options',
+    type: 'combo',
+    multiple: true,
+    draggable: true,
+    addButtonText: '新增选项',
+    description:
+      '静态数据暂不支持多级，请切换到代码模式，或者采用 source 接口获取。',
+    scaffold: {
+      label: '',
+      value: ''
+    },
+    items: [
+      {
+        type: 'input-text',
+        name: 'label',
+        placeholder: '名称',
+        required: true
+      },
+
+      {
+        type: 'input-text',
+        name: 'value',
+        placeholder: '值',
+        unique: true
+      }
+    ]
+  },
+
+  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'
+          }
+  },
+
+  horizontal: {
+    type: 'combo',
+    syncDefaultValue: false,
+    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) || ''
+      };
+    },
+    pipeOut: (value: any) => {
+      let left = Math.min(11, Math.max(1, value.leftRate || 2));
+
+      return {
+        leftFixed: value.leftFixed || '',
+        left: left,
+        right: 12 - left
+      };
+    },
+    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'
+        }
+      }
+    ]
+  },
+
+  subFormItemMode: {
+    label: '子表单展示模式',
+    name: 'subFormMode',
+    type: 'button-group-select',
+    size: 'sm',
+    option: '继承',
+    // mode: 'inline',
+    // className: 'w-full',
+    pipeIn: defaultValue(''),
+    options: [
+      {
+        label: '继承',
+        value: ''
+      },
+
+      {
+        label: '正常',
+        value: 'normal'
+      },
+
+      {
+        label: '内联',
+        value: 'inline'
+      },
+
+      {
+        label: '水平',
+        value: 'horizontal'
+      }
+    ]
+  },
+
+  subFormHorizontalMode: {
+    label: '子表单水平占比设置',
+    name: 'subFormHorizontal',
+    type: 'switch',
+    onText: '继承',
+    offText: '自定义',
+    mode: 'inline',
+    className: 'w-full',
+    inputClassName: 'text-sm',
+    visibleOn: 'this.subFormMode == "horizontal"',
+    pipeIn: (value: any) => !value,
+    pipeOut: (value: any, originValue: any, data: any) =>
+      value
+        ? null
+        : data.formHorizontal || {
+            leftFixed: 'normal'
+          }
+  },
+
+  subFormHorizontal: {
+    type: 'combo',
+    syncDefaultValue: false,
+    visibleOn: 'data.subFormMode == "horizontal" && data.subFormHorizontal',
+    name: 'subFormHorizontal',
+    multiLine: true,
+    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) || ''
+      };
+    },
+    pipeOut: (value: any) => {
+      let left = Math.min(11, Math.max(1, value.leftRate || 2));
+
+      return {
+        leftFixed: value.leftFixed || '',
+        left: left,
+        right: 12 - left
+      };
+    },
+    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'
+        }
+      }
+    ]
+  },
+
+  validations: (function () {
+    const options = [
+      // {
+      //     label: '必填',
+      //     value: 'isRequired'
+      // },
+      {
+        label: '邮箱格式',
+        value: 'isEmail'
+      },
+      {
+        label: 'Url格式',
+        value: 'isUrl'
+      },
+      {
+        label: '数字',
+        value: 'isNumeric'
+      },
+      {
+        label: '字母',
+        value: 'isAlpha'
+      },
+      {
+        label: '字母和数字',
+        value: 'isAlphanumeric'
+      },
+      {
+        label: '整型数字',
+        value: 'isInt'
+      },
+      {
+        label: '浮点型数字',
+        value: 'isFloat'
+      },
+      {
+        label: '固定长度',
+        value: 'isLength'
+      },
+      {
+        label: '最大长度',
+        value: 'maxLength'
+      },
+      {
+        label: '最小长度',
+        value: 'minLength'
+      },
+      {
+        label: '最大值',
+        value: 'maximum'
+      },
+      {
+        label: '最小值',
+        value: 'minimum'
+      },
+      {
+        label: '手机号码',
+        value: 'isPhoneNumber'
+      },
+      {
+        label: '电话号码',
+        value: 'isTelNumber'
+      },
+      {
+        label: '邮编号码',
+        value: 'isZipcode'
+      },
+      {
+        label: '身份证号码',
+        value: 'isId'
+      },
+      {
+        label: 'JSON格式',
+        value: 'isJson'
+      },
+      {
+        label: '与指定值相同',
+        value: 'equals'
+      },
+      {
+        label: '与指定字段值相同',
+        value: 'equalsField'
+      },
+      {
+        label: '自定义正则',
+        value: 'matchRegexp'
+      },
+      {
+        label: '自定义正则2',
+        value: 'matchRegexp1'
+      },
+      {
+        label: '自定义正则3',
+        value: 'matchRegexp2'
+      },
+      {
+        label: '自定义正则4',
+        value: 'matchRegexp3'
+      },
+      {
+        label: '自定义正则5',
+        value: 'matchRegexp4'
+      }
+    ];
+
+    const trueProps = [
+      'isEmail',
+      'isUrl',
+      'isNumeric',
+      'isAlpha',
+      'isAlphanumeric',
+      'isInt',
+      'isFloat',
+      'isJson',
+      'isPhoneNumber',
+      'isTelNumber',
+      'isZipcode',
+      'isId'
+    ];
+
+    function firstValue(arr: Array<any>, iterator: (item: any) => any) {
+      let theone = find(arr, iterator);
+      return theone ? theone.value : '';
+    }
+
+    return {
+      type: 'combo',
+      syncDefaultValue: false,
+      name: 'validations',
+      label: '验证规则',
+      addButtonText: '新增规则',
+      multiple: true,
+      pipeIn: (value: any) => {
+        if (typeof value === 'string' && value) {
+          value = str2rules(value);
+        }
+        if (!isObject(value)) {
+          return value;
+        }
+
+        let arr: Array<any> = [];
+
+        Object.keys(value).forEach(key => {
+          if (/^\$\$/.test(key)) {
+            return;
+          }
+
+          arr.push({
+            type: key,
+            [key]: Array.isArray(value[key]) ? value[key][0] : value[key]
+          });
+        });
+
+        return arr;
+      },
+      pipeOut: (value: any) => {
+        if (!Array.isArray(value)) {
+          return value;
+        }
+        let obj: any = {};
+
+        value.forEach((item: any) => {
+          let key: string =
+            item.type ||
+            firstValue(options, (item: any) => !obj[item.value]) ||
+            options[0].value;
+          obj[key] = item[key] || (~trueProps.indexOf(key) ? true : '');
+        });
+
+        return obj;
+      },
+      items: [
+        {
+          type: 'select',
+          unique: true,
+          name: 'type',
+          options: options,
+          columnClassName: 'w-sm'
+        },
+        {
+          type: 'input-number',
+          name: 'isLength',
+          visibleOn: 'data.type == "isLength"',
+          placeholder: '设置长度',
+          value: '1'
+        },
+        {
+          type: 'input-number',
+          name: 'maximum',
+          visibleOn: 'data.type == "maximum"',
+          placeholder: '设置最大值'
+        },
+        {
+          type: 'input-number',
+          name: 'minimum',
+          visibleOn: 'data.type == "minimum"',
+          placeholder: '设置最小值'
+        },
+        {
+          type: 'input-number',
+          name: 'maxLength',
+          visibleOn: 'data.type == "maxLength"',
+          placeholder: '设置最大长度值'
+        },
+        {
+          type: 'input-number',
+          name: 'minLength',
+          visibleOn: 'data.type == "minLength"',
+          placeholder: '设置最小长度值'
+        },
+        {
+          type: 'input-text',
+          name: 'equals',
+          visibleOn: 'data.type == "equals"',
+          placeholder: '设置值',
+          value: ''
+        },
+        {
+          type: 'input-text',
+          name: 'equalsField',
+          visibleOn: 'data.type == "equalsField"',
+          placeholder: '设置字段名',
+          value: ''
+        },
+        {
+          type: 'input-text',
+          name: 'matchRegexp',
+          visibleOn: 'data.type == "matchRegexp"',
+          placeholder: '设置正则规则'
+        },
+        {
+          type: 'input-text',
+          name: 'matchRegexp1',
+          visibleOn: 'data.type == "matchRegexp1"',
+          placeholder: '设置正则规则'
+        },
+        {
+          type: 'input-text',
+          name: 'matchRegexp2',
+          visibleOn: 'data.type == "matchRegexp2"',
+          placeholder: '设置正则规则'
+        },
+        {
+          type: 'input-text',
+          name: 'matchRegexp3',
+          visibleOn: 'data.type == "matchRegexp3"',
+          placeholder: '设置正则规则'
+        },
+        {
+          type: 'input-text',
+          name: 'matchRegexp4',
+          visibleOn: 'data.type == "matchRegexp4"',
+          placeholder: '设置正则规则'
+        }
+      ]
+    };
+  })(),
+
+  validationErrors: (function () {
+    const options = [
+      // {
+      //     label: '必填',
+      //     value: 'isRequired'
+      // },
+      {
+        label: '邮箱格式',
+        value: 'isEmail'
+      },
+      {
+        label: 'Url格式',
+        value: 'isUrl'
+      },
+      {
+        label: '数字',
+        value: 'isNumeric'
+      },
+      {
+        label: '字母',
+        value: 'isAlpha'
+      },
+      {
+        label: '字母和数字',
+        value: 'isAlphanumeric'
+      },
+      {
+        label: '整型数字',
+        value: 'isInt'
+      },
+      {
+        label: '浮点型数字',
+        value: 'isFloat'
+      },
+      {
+        label: '固定长度',
+        value: 'isLength'
+      },
+      {
+        label: '最大长度',
+        value: 'maxLength'
+      },
+      {
+        label: '最小长度',
+        value: 'minLength'
+      },
+      {
+        label: '最大值',
+        value: 'maximum'
+      },
+      {
+        label: '最小值',
+        value: 'minimum'
+      },
+      {
+        label: 'JSON格式',
+        value: 'isJson'
+      },
+      {
+        label: '手机号码',
+        value: 'isPhoneNumber'
+      },
+      {
+        label: '电话号码',
+        value: 'isTelNumber'
+      },
+      {
+        label: '邮编号码',
+        value: 'isZipcode'
+      },
+      {
+        label: '身份证号码',
+        value: 'isId'
+      },
+      {
+        label: '与指定值相同',
+        value: 'equals'
+      },
+      {
+        label: '与指定字段值相同',
+        value: 'equalsField'
+      },
+      {
+        label: '自定义正则',
+        value: 'matchRegexp'
+      },
+      {
+        label: '自定义正则2',
+        value: 'matchRegexp1'
+      },
+      {
+        label: '自定义正则3',
+        value: 'matchRegexp2'
+      },
+      {
+        label: '自定义正则4',
+        value: 'matchRegexp3'
+      },
+      {
+        label: '自定义正则5',
+        value: 'matchRegexp4'
+      }
+    ];
+
+    const defaultMessages = {
+      isEmail: 'Email 格式不正确',
+      isRequired: '这是必填项',
+      isUrl: 'Url 格式不正确',
+      isInt: '请输入整形数字',
+      isAlpha: '请输入字母',
+      isNumeric: '请输入数字',
+      isAlphanumeric: '请输入字母或者数字',
+      isFloat: '请输入浮点型数值',
+      isWords: '请输入字母',
+      isUrlPath: '只能输入字母、数字、`-` 和 `_`.',
+      matchRegexp: '格式不正确, 请输入符合规则为 `$1` 的内容。',
+      minLength: '请输入更多的内容，至少输入 $1 个字符。',
+      maxLength: '请控制内容长度, 请不要输入 $1 个字符以上',
+      maximum: '当前输入值超出最大值 $1，请检查',
+      minimum: '当前输入值低于最小值 $1，请检查',
+      isJson: '请检查 Json 格式。',
+      isPhoneNumber: '请输入合法的手机号码',
+      isTelNumber: '请输入合法的电话号码',
+      isZipcode: '请输入合法的邮编地址',
+      isId: '请输入合法的身份证号',
+      isLength: '请输入长度为 $1 的内容',
+      notEmptyString: '请不要全输入空白字符',
+      equalsField: '输入的数据与 $1 值不一致',
+      equals: '输入的数据与 $1 不一致'
+    };
+
+    function firstValue(arr: Array<any>, iterator: (item: any) => any) {
+      let theone = find(arr, iterator);
+      return theone ? theone.value : '';
+    }
+
+    return {
+      type: 'combo',
+      syncDefaultValue: false,
+      name: 'validationErrors',
+      label: '自定义验证提示',
+      description: '自带提示不满足时，可以自定义。',
+      addButtonText: '新增提示',
+      multiple: true,
+      pipeIn: (value: any) => {
+        if (!isObject(value)) {
+          return value;
+        }
+
+        let arr: Array<any> = [];
+
+        Object.keys(value).forEach(key => {
+          if (/^\$\$/.test(key)) {
+            return;
+          }
+
+          arr.push({
+            type: key,
+            msg: value[key]
+          });
+        });
+
+        return arr;
+      },
+      pipeOut: (value: any) => {
+        if (!Array.isArray(value)) {
+          return value;
+        }
+        let obj: any = {};
+
+        value.forEach((item: any) => {
+          let key: string =
+            item.type ||
+            firstValue(options, (item: any) => !obj[item.value]) ||
+            options[0].value;
+          obj[key] = item.msg || (defaultMessages as any)[key] || '';
+        });
+
+        return obj;
+      },
+      items: [
+        {
+          type: 'select',
+          unique: true,
+          name: 'type',
+          options: options,
+          columnClassName: 'w-sm'
+        },
+
+        {
+          type: 'input-text',
+          name: 'msg',
+          placeholder: '提示信息'
+        },
+
+        {
+          type: 'formula',
+          name: 'msg',
+          initSet: false,
+          formula: `({
+                        isEmail: 'Email 格式不正确',
+                        isRequired: '这是必填项',
+                        isUrl: 'Url 格式不正确',
+                        isInt: '请输入整形数字',
+                        isAlpha: '请输入字母',
+                        isNumeric: '请输入数字',
+                        isAlphanumeric: '请输入字母或者数字',
+                        isFloat: '请输入浮点型数值',
+                        isWords: '请输入字母',
+                        isUrlPath: '只能输入字母、数字、\`-\` 和 \`_\`.',
+                        matchRegexp: '格式不正确, 请输入符合规则为 \`$1\` 的内容。',
+                        minLength: '请输入更多的内容，至少输入 $1 个字符。',
+                        maxLength: '请控制内容长度, 请不要输入 $1 个字符以上',
+                        maximum: '当前输入值超出最大值 $1，请检查',
+                        minimum: '当前输入值低于最小值 $1，请检查',
+                        isJson: '请检查 Json 格式。',
+                        isLength: '请输入长度为 $1 的内容',
+                        notEmptyString: '请不要全输入空白字符',
+                        equalsField: '输入的数据与 $1 值不一致',
+                        equals: '输入的数据与 $1 不一致',
+                        isPhoneNumber: '请输入合法的手机号码',
+                        isTelNumber: '请输入合法的电话号码',
+                        isZipcode: '请输入合法的邮编地址',
+                        isId: '请输入合法的身份证号',
+                    })[data.type] || ''`
+        }
+      ]
+    };
+  })(),
+
+  submitOnChange: {
+    label: '修改即提交',
+    type: 'switch',
+    name: 'submitOnChange',
+    mode: 'inline',
+    className: 'w-full',
+    labelRemark: {
+      trigger: 'click',
+      className: 'm-l-xs',
+      rootClose: true,
+      content: '设置后，表单中每次有修改都会触发提交',
+      placement: 'left'
+    }
+  },
+
+  validateOnChange: {
+    type: 'button-group-select',
+    name: 'validateOnChange',
+    label: '修改即触发表单验证',
+    description: '默认为当表单提交过则每次修改都触发验证。',
+    size: 'xs',
+    mode: 'inline',
+    className: 'w-full',
+    options: [
+      {
+        label: '默认',
+        value: ''
+      },
+
+      {
+        label: '开启',
+        value: true
+      },
+
+      {
+        label: '关闭',
+        value: false
+      }
+    ],
+    pipeIn: defaultValue(''),
+    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: {
+    type: 'group',
+    label: '是否初始加载',
+    visibleOn: 'this.initApi',
+    direction: 'vertical',
+    className: 'm-b-none',
+    labelRemark: {
+      trigger: 'click',
+      rootClose: true,
+      className: 'm-l-xs',
+      content:
+        '当配置初始化接口后，组件初始就会拉取接口数据，可以通过以下配置修改。',
+      placement: 'left'
+    },
+    body: [
+      {
+        name: 'initFetch',
+        type: 'radios',
+        inline: true,
+        onChange: () => {},
+        // pipeIn: (value:any) => typeof value === 'boolean' ? value : '1'
+        options: [
+          {
+            label: '是',
+            value: true
+          },
+
+          {
+            label: '否',
+            value: false
+          },
+
+          {
+            label: '表达式',
+            value: ''
+          }
+        ]
+      },
+
+      {
+        name: 'initFetchOn',
+        autoComplete: false,
+        visibleOn: 'typeof this.initFetch !== "boolean"',
+        type: 'input-text',
+        placeholder: '如：this.id 表示有 id 值时初始加载',
+        className: 'm-t-n-sm'
+      }
+    ]
+  },
+
+  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
+            },
+
+            {
+              label: '表达式',
+              value: 2
+            }
+          ],
+          pipeIn: (value: any) => (typeof value === 'boolean' ? 1 : 2),
+          pipeOut: (value: any) => (value === 1 ? false : '')
+        },
+
+        {
+          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', '')
+        },
+
+        {
+          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'
+        }
+      ]
+    };
+  },
+
+  switchDefaultValue: {
+    type: 'switch',
+    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 获取'
+  },
+
+  multiple: {
+    label: '多选模式',
+    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 的值用连接符拼接起来，作为当前表单项的值。'
+  },
+
+  delimiter: {
+    type: 'input-text',
+    name: 'delimiter',
+    label: '连接符',
+    visibleOn: 'data.multiple && data.joinValues',
+    pipeIn: defaultValue(',')
+  },
+
+  extractValue: {
+    type: 'switch',
+    name: 'extractValue',
+    mode: 'inline',
+    className: 'w-full',
+    label: '是否抽取value值',
+    visibleOn: 'data.joinValues === false',
+    pipeIn: defaultValue(false),
+    description: '开启后将选中的选项 value 的值封装为数组，作为当前表单项的值。'
+  },
+
+  creatable: {
+    label: '可创建选项',
+    name: 'creatable',
+    type: 'switch',
+    mode: 'inline',
+    className: 'w-full'
+  },
+
+  createBtnLabel: {
+    label: '创建按钮文字',
+    name: 'createBtnLabel',
+    type: 'input-text',
+    mode: 'inline',
+    placeholder: '新增选项',
+    className: 'w-full'
+  },
+
+  editable: {
+    label: '可编辑选项',
+    name: 'editable',
+    type: 'switch',
+    mode: 'inline',
+    className: 'w-full'
+  },
+
+  removable: {
+    label: '可删除选项',
+    name: 'removable',
+    type: 'switch',
+    mode: 'inline',
+    className: 'w-full'
+  },
+
+  ref: () => {
+    // {
+    //   type: 'input-text',
+    //   name: '$ref',
+    //   label: '选择定义',
+    //   labelRemark: '输入已经在page中设定好的定义'
+    // }
+    return null;
+  },
+
+  imageUrl: {
+    type: 'input-text',
+    label: '图片'
+  },
+
+  fileUrl: {
+    type: 'input-text',
+    label: '文件'
+  },
+
+  markdownBody: {
+    name: 'value',
+    type: 'editor',
+    language: 'markdown',
+    size: 'xxl',
+    label: 'Markdown 内容',
+    options: {
+      lineNumbers: 'off'
+    }
+  },
+
+  richText: {
+    label: '富文本',
+    type: 'input-rich-text',
+    buttons: [
+      'paragraphFormat',
+      'quote',
+      'color',
+      '|',
+      'bold',
+      'italic',
+      'underline',
+      'strikeThrough',
+      '|',
+      'formatOL',
+      'formatUL',
+      'align',
+      '|',
+      'insertLink',
+      'insertImage',
+      'insertTable',
+      '|',
+      'undo',
+      'redo',
+      'fullscreen'
+    ],
+    name: 'html',
+    description:
+      '支持使用 <code>\\${xxx}</code> 来获取变量，或者用 lodash.template 语法来写模板逻辑。<a target="_blank" href="/amis/zh-CN/docs/concepts/template">详情</a>',
+    size: 'lg'
+  },
+
+  showCounter: {
+    label: '是否显示计数器',
+    name: 'showCounter',
+    type: 'switch',
+    mode: 'inline',
+    className: 'w-full'
+  },
+
+  borderMode: {
+    type: 'select',
+    name: 'borderMode',
+    label: '边框模式',
+    options: [
+      {label: '全边框', value: 'full'},
+      {label: '半边框', value: 'half'},
+      {label: '无边框', value: 'none'}
+    ]
+  },
+
+  data: {
+    type: 'input-kv',
+    name: 'data',
+    label: '初始静态数据'
+  }
+};
+
+/**
+ * 样式相关的属性面板，因为预计会比较多所以拆出来
+ */
+export const styleTpl = {
+  name: 'style',
+  type: 'combo',
+  label: '',
+  noBorder: true,
+  multiLine: true,
+  items: [
+    {
+      type: 'fieldSet',
+      title: '文字',
+      body: [
+        {
+          type: 'group',
+          body: [
+            {
+              label: '文字大小',
+              type: 'input-text',
+              name: 'fontSize'
+            },
+            {
+              label: '文字粗细',
+              name: 'fontWeight',
+              type: 'select',
+              options: ['normal', 'bold', 'lighter', 'bolder']
+            }
+          ]
+        },
+        {
+          type: 'group',
+          body: [
+            {
+              label: '文字颜色',
+              type: 'input-color',
+              name: 'color'
+            },
+            {
+              label: '对齐方式',
+              name: 'textAlign',
+              type: 'select',
+              options: [
+                'left',
+                'right',
+                'center',
+                'justify',
+                'justify-all',
+                'start',
+                'end',
+                'match-parent'
+              ]
+            }
+          ]
+        }
+      ]
+    },
+    {
+      type: 'fieldSet',
+      title: '背景',
+      body: [
+        {
+          label: '颜色',
+          name: 'backgroundColor',
+          type: 'input-color'
+        },
+        getSchemaTpl('imageUrl', {
+          name: 'backgroundImage'
+        })
+      ]
+    },
+    {
+      type: 'fieldSet',
+      title: '边距',
+      body: [
+        {
+          type: 'group',
+          label: '外边距',
+          body: [
+            {
+              label: '上',
+              name: 'marginTop',
+              type: 'input-text'
+            },
+            {
+              label: '右',
+              name: 'marginRight',
+              type: 'input-text'
+            },
+            {
+              label: '下',
+              name: 'marginBottom',
+              type: 'input-text'
+            },
+            {
+              label: '左',
+              name: 'marginLeft',
+              type: 'input-text'
+            }
+          ]
+        },
+        {
+          type: 'group',
+          label: '内边距',
+          body: [
+            {
+              label: '上',
+              name: 'paddingTop',
+              type: 'input-text'
+            },
+            {
+              label: '右',
+              name: 'paddingRight',
+              type: 'input-text'
+            },
+            {
+              label: '下',
+              name: 'paddingBottom',
+              type: 'input-text'
+            },
+            {
+              label: '左',
+              name: 'paddingLeft',
+              type: 'input-text'
+            }
+          ]
+        }
+      ]
+    },
+    {
+      type: 'fieldSet',
+      title: '边框',
+      body: [
+        {
+          type: 'group',
+          body: [
+            {
+              label: '样式',
+              name: 'borderStyle',
+              type: 'select',
+              options: ['none', 'solid', 'dotted', 'dashed']
+            },
+            {
+              label: '颜色',
+              name: 'borderColor',
+              type: 'input-color'
+            }
+          ]
+        },
+        {
+          type: 'group',
+          body: [
+            {
+              label: '宽度',
+              name: 'borderWidth',
+              type: 'input-text'
+            },
+            {
+              label: '圆角宽度',
+              name: 'borderRadius',
+              type: 'input-text'
+            }
+          ]
+        }
+      ]
+    },
+    {
+      type: 'fieldSet',
+      title: '特效',
+      body: [
+        {
+          label: '透明度',
+          name: 'opacity',
+          min: 0,
+          max: 1,
+          step: 0.05,
+          type: 'input-range',
+          pipeIn: defaultValue(1)
+        },
+        {
+          label: '阴影',
+          name: 'boxShadow',
+          type: 'input-text'
+        }
+      ]
+    }
+  ]
+};
+tpls.style = styleTpl;
+
+export function getSchemaTpl(name: string, patch?: object): any {
+  const tpl = tpls[name];
+
+  if (typeof tpl === 'function') {
+    return tpl(patch);
+  }
+
+  return tpl
+    ? patch
+      ? {
+          ...tpl,
+          ...patch
+        }
+      : tpl
+    : null;
+}
+
+export function setSchemaTpl(name: string, value: any) {
+  tpls[name] = value;
+}
+
+export function valuePipeOut(value: any) {
+  try {
+    if (value === 'undefined') {
+      return undefined;
+    }
+
+    return JSON.parse(value);
+  } catch (e) {
+    return value;
+  }
+}
+
+export function defaultValue(defaultValue: any, strictMode: boolean = true) {
+  return strictMode
+    ? (value: any) => (typeof value === 'undefined' ? defaultValue : value)
+    : (value: any) => value || defaultValue;
+}