amis-editor 4.2.0-beta.0 → 5.2.0-beta.0

package/src/component/schemaTpl.tsx

@@ -1,2157 +0,0 @@
-/**
- * @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:
-      '将当前已选中的选项的某个字段的值，自动填充到表单中某个表单项中，支持数据映射'
-  },
-
-  autoFillApi: {},
-
-  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;
-}