yy-forms 1.0.0

package/dist/index.esm.js

@@ -0,0 +1,4006 @@
+import React, { createContext, useContext, useReducer, Suspense, useState, useRef, useEffect, forwardRef, useImperativeHandle } from 'react';
+import { useTranslation, initReactI18next } from 'react-i18next';
+import 'antd/es/modal/style';
+import _Modal from 'antd/es/modal';
+import 'antd/es/button/style';
+import _Button from 'antd/es/button';
+import 'antd/es/message/style';
+import _message from 'antd/es/message';
+import 'antd/es/input/style';
+import _Input from 'antd/es/input';
+import copyTOClipboard from 'copy-text-to-clipboard';
+import deepClone from 'clone';
+import { nanoid as nanoid$1, customAlphabet } from 'nanoid';
+import FormRender, { useForm, mapping, widgets } from 'form-render';
+import cn from 'classnames';
+import _CopyOutlined from '@ant-design/icons/lib/icons/CopyOutlined';
+import _DeleteOutlined from '@ant-design/icons/lib/icons/DeleteOutlined';
+import _DragOutlined from '@ant-design/icons/lib/icons/DragOutlined';
+import { useDrag, useDrop, DndProvider } from 'react-dnd';
+import _RightOutlined from '@ant-design/icons/lib/icons/RightOutlined';
+import 'antd/es/tabs/style';
+import _Tabs from 'antd/es/tabs';
+import 'antd/es/slider/style';
+import _Slider from 'antd/es/slider';
+import 'antd/es/input-number/style';
+import _InputNumber from 'antd/es/input-number';
+import 'antd/es/config-provider/style';
+import _ConfigProvider from 'antd/es/config-provider';
+import zhCN$1 from 'antd/lib/locale/zh_CN';
+import { HTML5Backend } from 'react-dnd-html5-backend';
+import _PlusCircleOutlined from '@ant-design/icons/lib/icons/PlusCircleOutlined';
+import i18n from 'i18next';
+
+function _arrayLikeToArray(r, a) {
+  (null == a || a > r.length) && (a = r.length);
+  for (var e = 0, n = Array(a); e < a; e++) n[e] = r[e];
+  return n;
+}
+function _arrayWithHoles(r) {
+  if (Array.isArray(r)) return r;
+}
+function _arrayWithoutHoles(r) {
+  if (Array.isArray(r)) return _arrayLikeToArray(r);
+}
+function asyncGeneratorStep(n, t, e, r, o, a, c) {
+  try {
+    var i = n[a](c),
+      u = i.value;
+  } catch (n) {
+    return void e(n);
+  }
+  i.done ? t(u) : Promise.resolve(u).then(r, o);
+}
+function _asyncToGenerator(n) {
+  return function () {
+    var t = this,
+      e = arguments;
+    return new Promise(function (r, o) {
+      var a = n.apply(t, e);
+      function _next(n) {
+        asyncGeneratorStep(a, r, o, _next, _throw, "next", n);
+      }
+      function _throw(n) {
+        asyncGeneratorStep(a, r, o, _next, _throw, "throw", n);
+      }
+      _next(void 0);
+    });
+  };
+}
+function _defineProperty(e, r, t) {
+  return (r = _toPropertyKey(r)) in e ? Object.defineProperty(e, r, {
+    value: t,
+    enumerable: !0,
+    configurable: !0,
+    writable: !0
+  }) : e[r] = t, e;
+}
+function _extends() {
+  return _extends = Object.assign ? Object.assign.bind() : function (n) {
+    for (var e = 1; e < arguments.length; e++) {
+      var t = arguments[e];
+      for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]);
+    }
+    return n;
+  }, _extends.apply(null, arguments);
+}
+function _iterableToArray(r) {
+  if ("undefined" != typeof Symbol && null != r[Symbol.iterator] || null != r["@@iterator"]) return Array.from(r);
+}
+function _iterableToArrayLimit(r, l) {
+  var t = null == r ? null : "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"];
+  if (null != t) {
+    var e,
+      n,
+      i,
+      u,
+      a = [],
+      f = !0,
+      o = !1;
+    try {
+      if (i = (t = t.call(r)).next, 0 === l) {
+        if (Object(t) !== t) return;
+        f = !1;
+      } else for (; !(f = (e = i.call(t)).done) && (a.push(e.value), a.length !== l); f = !0);
+    } catch (r) {
+      o = !0, n = r;
+    } finally {
+      try {
+        if (!f && null != t.return && (u = t.return(), Object(u) !== u)) return;
+      } finally {
+        if (o) throw n;
+      }
+    }
+    return a;
+  }
+}
+function _nonIterableRest() {
+  throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.");
+}
+function _nonIterableSpread() {
+  throw new TypeError("Invalid attempt to spread non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.");
+}
+function ownKeys(e, r) {
+  var t = Object.keys(e);
+  if (Object.getOwnPropertySymbols) {
+    var o = Object.getOwnPropertySymbols(e);
+    r && (o = o.filter(function (r) {
+      return Object.getOwnPropertyDescriptor(e, r).enumerable;
+    })), t.push.apply(t, o);
+  }
+  return t;
+}
+function _objectSpread2(e) {
+  for (var r = 1; r < arguments.length; r++) {
+    var t = null != arguments[r] ? arguments[r] : {};
+    r % 2 ? ownKeys(Object(t), !0).forEach(function (r) {
+      _defineProperty(e, r, t[r]);
+    }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) {
+      Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r));
+    });
+  }
+  return e;
+}
+function _objectWithoutProperties(e, t) {
+  if (null == e) return {};
+  var o,
+    r,
+    i = _objectWithoutPropertiesLoose(e, t);
+  if (Object.getOwnPropertySymbols) {
+    var n = Object.getOwnPropertySymbols(e);
+    for (r = 0; r < n.length; r++) o = n[r], -1 === t.indexOf(o) && {}.propertyIsEnumerable.call(e, o) && (i[o] = e[o]);
+  }
+  return i;
+}
+function _objectWithoutPropertiesLoose(r, e) {
+  if (null == r) return {};
+  var t = {};
+  for (var n in r) if ({}.hasOwnProperty.call(r, n)) {
+    if (-1 !== e.indexOf(n)) continue;
+    t[n] = r[n];
+  }
+  return t;
+}
+function _regenerator() {
+  /*! regenerator-runtime -- Copyright (c) 2014-present, Facebook, Inc. -- license (MIT): https://github.com/babel/babel/blob/main/packages/babel-helpers/LICENSE */
+  var e,
+    t,
+    r = "function" == typeof Symbol ? Symbol : {},
+    n = r.iterator || "@@iterator",
+    o = r.toStringTag || "@@toStringTag";
+  function i(r, n, o, i) {
+    var c = n && n.prototype instanceof Generator ? n : Generator,
+      u = Object.create(c.prototype);
+    return _regeneratorDefine(u, "_invoke", function (r, n, o) {
+      var i,
+        c,
+        u,
+        f = 0,
+        p = o || [],
+        y = !1,
+        G = {
+          p: 0,
+          n: 0,
+          v: e,
+          a: d,
+          f: d.bind(e, 4),
+          d: function (t, r) {
+            return i = t, c = 0, u = e, G.n = r, a;
+          }
+        };
+      function d(r, n) {
+        for (c = r, u = n, t = 0; !y && f && !o && t < p.length; t++) {
+          var o,
+            i = p[t],
+            d = G.p,
+            l = i[2];
+          r > 3 ? (o = l === n) && (u = i[(c = i[4]) ? 5 : (c = 3, 3)], i[4] = i[5] = e) : i[0] <= d && ((o = r < 2 && d < i[1]) ? (c = 0, G.v = n, G.n = i[1]) : d < l && (o = r < 3 || i[0] > n || n > l) && (i[4] = r, i[5] = n, G.n = l, c = 0));
+        }
+        if (o || r > 1) return a;
+        throw y = !0, n;
+      }
+      return function (o, p, l) {
+        if (f > 1) throw TypeError("Generator is already running");
+        for (y && 1 === p && d(p, l), c = p, u = l; (t = c < 2 ? e : u) || !y;) {
+          i || (c ? c < 3 ? (c > 1 && (G.n = -1), d(c, u)) : G.n = u : G.v = u);
+          try {
+            if (f = 2, i) {
+              if (c || (o = "next"), t = i[o]) {
+                if (!(t = t.call(i, u))) throw TypeError("iterator result is not an object");
+                if (!t.done) return t;
+                u = t.value, c < 2 && (c = 0);
+              } else 1 === c && (t = i.return) && t.call(i), c < 2 && (u = TypeError("The iterator does not provide a '" + o + "' method"), c = 1);
+              i = e;
+            } else if ((t = (y = G.n < 0) ? u : r.call(n, G)) !== a) break;
+          } catch (t) {
+            i = e, c = 1, u = t;
+          } finally {
+            f = 1;
+          }
+        }
+        return {
+          value: t,
+          done: y
+        };
+      };
+    }(r, o, i), !0), u;
+  }
+  var a = {};
+  function Generator() {}
+  function GeneratorFunction() {}
+  function GeneratorFunctionPrototype() {}
+  t = Object.getPrototypeOf;
+  var c = [][n] ? t(t([][n]())) : (_regeneratorDefine(t = {}, n, function () {
+      return this;
+    }), t),
+    u = GeneratorFunctionPrototype.prototype = Generator.prototype = Object.create(c);
+  function f(e) {
+    return Object.setPrototypeOf ? Object.setPrototypeOf(e, GeneratorFunctionPrototype) : (e.__proto__ = GeneratorFunctionPrototype, _regeneratorDefine(e, o, "GeneratorFunction")), e.prototype = Object.create(u), e;
+  }
+  return GeneratorFunction.prototype = GeneratorFunctionPrototype, _regeneratorDefine(u, "constructor", GeneratorFunctionPrototype), _regeneratorDefine(GeneratorFunctionPrototype, "constructor", GeneratorFunction), GeneratorFunction.displayName = "GeneratorFunction", _regeneratorDefine(GeneratorFunctionPrototype, o, "GeneratorFunction"), _regeneratorDefine(u), _regeneratorDefine(u, o, "Generator"), _regeneratorDefine(u, n, function () {
+    return this;
+  }), _regeneratorDefine(u, "toString", function () {
+    return "[object Generator]";
+  }), (_regenerator = function () {
+    return {
+      w: i,
+      m: f
+    };
+  })();
+}
+function _regeneratorDefine(e, r, n, t) {
+  var i = Object.defineProperty;
+  try {
+    i({}, "", {});
+  } catch (e) {
+    i = 0;
+  }
+  _regeneratorDefine = function (e, r, n, t) {
+    function o(r, n) {
+      _regeneratorDefine(e, r, function (e) {
+        return this._invoke(r, n, e);
+      });
+    }
+    r ? i ? i(e, r, {
+      value: n,
+      enumerable: !t,
+      configurable: !t,
+      writable: !t
+    }) : e[r] = n : (o("next", 0), o("throw", 1), o("return", 2));
+  }, _regeneratorDefine(e, r, n, t);
+}
+function _slicedToArray(r, e) {
+  return _arrayWithHoles(r) || _iterableToArrayLimit(r, e) || _unsupportedIterableToArray(r, e) || _nonIterableRest();
+}
+function _toConsumableArray(r) {
+  return _arrayWithoutHoles(r) || _iterableToArray(r) || _unsupportedIterableToArray(r) || _nonIterableSpread();
+}
+function _toPrimitive(t, r) {
+  if ("object" != typeof t || !t) return t;
+  var e = t[Symbol.toPrimitive];
+  if (void 0 !== e) {
+    var i = e.call(t, r || "default");
+    if ("object" != typeof i) return i;
+    throw new TypeError("@@toPrimitive must return a primitive value.");
+  }
+  return ("string" === r ? String : Number)(t);
+}
+function _toPropertyKey(t) {
+  var i = _toPrimitive(t, "string");
+  return "symbol" == typeof i ? i : i + "";
+}
+function _typeof(o) {
+  "@babel/helpers - typeof";
+
+  return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) {
+    return typeof o;
+  } : function (o) {
+    return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o;
+  }, _typeof(o);
+}
+function _unsupportedIterableToArray(r, a) {
+  if (r) {
+    if ("string" == typeof r) return _arrayLikeToArray(r, a);
+    var t = {}.toString.call(r).slice(8, -1);
+    return "Object" === t && r.constructor && (t = r.constructor.name), "Map" === t || "Set" === t ? Array.from(r) : "Arguments" === t || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(t) ? _arrayLikeToArray(r, a) : void 0;
+  }
+}
+
+var _excluded = ["propsSchema"],
+  _excluded2 = ["schema"],
+  _excluded3 = ["onChange", "value", "defaultValue", "schema"];
+function stringContains(str, text) {
+  return str.indexOf(text) > -1;
+}
+var isObject = function isObject(a) {
+  return stringContains(Object.prototype.toString.call(a), 'Object');
+};
+
+// '3' => true, 3 => true, undefined => false
+function isLooselyNumber(num) {
+  if (typeof num === 'number') return true;
+  if (typeof num === 'string') {
+    return !Number.isNaN(Number(num));
+  }
+  return false;
+}
+function isCssLength(str) {
+  if (typeof str !== 'string') return false;
+  return str.match(/^([0-9])*(%|px|rem|em)$/i);
+}
+
+// ----------------- schema 相关
+
+// 合并propsSchema和UISchema。由于两者的逻辑相关性，合并为一个大schema能简化内部处理
+function combineSchema() {
+  var propsSchema = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
+  var uiSchema = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
+  var propList = getChildren(propsSchema);
+  var newList = propList.map(function (p) {
+    var name = p.name;
+    var _p$schema = p.schema,
+      type = _p$schema.type,
+      options = _p$schema.enum,
+      properties = _p$schema.properties,
+      items = _p$schema.items;
+    var isObj = type === 'object' && properties;
+    var isArr = type === 'array' && items && !options; // enum + array 代表的多选框，没有sub
+    var ui = name && uiSchema[p.name];
+    if (!ui) {
+      return p;
+    }
+    // 如果是list，递归合并items
+    if (isArr) {
+      var newItems = combineSchema(items, ui.items || {});
+      return _objectSpread2(_objectSpread2({}, p), {}, {
+        schema: _objectSpread2(_objectSpread2(_objectSpread2({}, p.schema), ui), {}, {
+          items: newItems
+        })
+      });
+    }
+    // object递归合并整个schema
+    if (isObj) {
+      var newSchema = combineSchema(p.schema, ui);
+      return _objectSpread2(_objectSpread2({}, p), {}, {
+        schema: newSchema
+      });
+    }
+    return _objectSpread2(_objectSpread2({}, p), {}, {
+      schema: _objectSpread2(_objectSpread2({}, p.schema), ui)
+    });
+  });
+  var newObj = {};
+  newList.forEach(function (s) {
+    newObj[s.name] = s.schema;
+  });
+  var topLevelUi = {};
+  Object.keys(uiSchema).forEach(function (key) {
+    if (typeof key === 'string' && key.substring(0, 3) === 'ui:') {
+      topLevelUi[key] = uiSchema[key];
+    }
+  });
+  if (isEmpty(newObj)) {
+    return _objectSpread2(_objectSpread2({}, propsSchema), topLevelUi);
+  }
+  return _objectSpread2(_objectSpread2(_objectSpread2({}, propsSchema), topLevelUi), {}, {
+    properties: newObj
+  });
+}
+function isEmpty(obj) {
+  return Object.keys(obj).length === 0;
+}
+
+// 获得propsSchema的children
+function getChildren(schema) {
+  if (!schema) return [];
+  var properties = schema.properties,
+    items = schema.items,
+    type = schema.type;
+  if (!properties && !items) {
+    return [];
+  }
+  var schemaSubs = {};
+  if (type === 'object') {
+    schemaSubs = properties;
+  }
+  if (type === 'array') {
+    schemaSubs = items;
+  }
+  return Object.keys(schemaSubs).map(function (name) {
+    return {
+      schema: schemaSubs[name],
+      name: name
+    };
+  });
+}
+
+// 后面三个参数都是内部递归使用的，将schema的树形结构扁平化成一层, 每个item的结构
+// {
+//   parent: '#',
+//   schema: ...,
+//   children: []
+// }
+function flattenSchema(schema) {
+  var name = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : '#';
+  var parent = arguments.length > 2 ? arguments[2] : undefined;
+  var result = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : {};
+  var _schema = deepClone(schema);
+  if (!_schema.$id) {
+    _schema.$id = name; // 给生成的schema添加一个唯一标识，方便从schema中直接读取
+  }
+  var children = [];
+  var isObj = _schema.type === 'object' && _schema.properties;
+  var isList = _schema.type === 'array' && _schema.items && _schema.items.properties;
+  if (isObj) {
+    Object.entries(_schema.properties).forEach(function (_ref) {
+      var _ref2 = _slicedToArray(_ref, 2),
+        key = _ref2[0],
+        value = _ref2[1];
+      var uniqueName = name + '/' + key;
+      children.push(uniqueName);
+      flattenSchema(value, uniqueName, name, result);
+    });
+    delete _schema.properties;
+  }
+  if (isList) {
+    Object.entries(_schema.items.properties).forEach(function (_ref3) {
+      var _ref4 = _slicedToArray(_ref3, 2),
+        key = _ref4[0],
+        value = _ref4[1];
+      var uniqueName = name + '/' + key;
+      children.push(uniqueName);
+      flattenSchema(value, uniqueName, name, result);
+    });
+    delete _schema.items.properties;
+  }
+  if (_schema.type) {
+    result[name] = {
+      parent: parent,
+      schema: _schema,
+      children: children
+    };
+  }
+  return result;
+}
+var getKeyFromUniqueId = function getKeyFromUniqueId() {
+  var uniqueId = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : '#';
+  var arr = uniqueId.split('/');
+  return arr[arr.length - 1];
+};
+var changeKeyFromUniqueId = function changeKeyFromUniqueId() {
+  var uniqueId = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : '#';
+  var key = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 'something';
+  var arr = uniqueId.split('/');
+  if (typeof key === 'string' || typeof key === 'number') {
+    arr[arr.length - 1] = key;
+  }
+  return arr.join('/');
+};
+
+// final = true 用于最终的导出的输出
+// 几种特例：
+// 1. 删除时值删除了item，没有删除和parent的关联，也没有删除children，所以要在解析这步来兜住 (所有的解析都是)
+// 2. 修改$id的情况, 修改的是schema内的$id, 解析的时候要把schema.$id 作为真正的id (final = true的解析)
+function idToSchema(flatten) {
+  var id = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : '#';
+  var final = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : false;
+  var schema = {};
+  var _item = flatten[id];
+  var item = deepClone(_item);
+  if (item) {
+    schema = _objectSpread2({}, item.schema);
+    // 最终输出去掉 $id
+    if (final) {
+      schema.$id && delete schema.$id;
+    }
+    if (item.children.length > 0) {
+      item.children.forEach(function (child) {
+        var childId = child;
+        // TODO: 这个情况会出现吗？return会有问题吗？
+        if (!flatten[child]) {
+          return;
+        }
+        // 最终输出将所有的 key 值改了
+        try {
+          if (final) {
+            childId = flatten[child].schema.$id;
+          }
+        } catch (error) {
+          console.error(error, 'catch');
+        }
+        var key = getKeyFromUniqueId(childId);
+        if (schema.type === 'object') {
+          if (!schema.properties) {
+            schema.properties = {};
+          }
+          schema.properties[key] = idToSchema(flatten, child, final);
+        }
+        if (schema.type === 'array' && schema.items && schema.items.type === 'object') {
+          if (!schema.items.properties) {
+            schema.items.properties = {};
+          }
+          schema.items.properties[key] = idToSchema(flatten, child, final);
+        }
+      });
+    } else {
+      if (schema.type === 'object' && !schema.properties) {
+        schema.properties = {};
+      }
+      if (schema.type === 'array' && schema.items && schema.items.type === 'object' && !schema.items.properties) {
+        schema.items.properties = {};
+      }
+    }
+  }
+  return schema;
+}
+var copyItem = function copyItem(flatten, $id, getId) {
+  var newFlatten = _objectSpread2({}, flatten);
+  try {
+    var item = flatten[$id];
+    var newId = getId($id);
+    var siblings = newFlatten[item.parent].children;
+    var idx = siblings.findIndex(function (x) {
+      return x === $id;
+    });
+    siblings.splice(idx + 1, 0, newId);
+    newFlatten[newId] = deepClone(newFlatten[$id]);
+    newFlatten[newId].schema.$id = newId;
+    return [newFlatten, newId];
+  } catch (error) {
+    console.error(error, 'catcherror');
+    return [flatten, $id];
+  }
+};
+
+// Left 点击添加 item
+var addItem = function addItem(_ref5) {
+  var selected = _ref5.selected,
+    name = _ref5.name,
+    schema = _ref5.schema,
+    flatten = _ref5.flatten,
+    fixedName = _ref5.fixedName,
+    getId = _ref5.getId;
+  var _selected = selected || '#';
+  var newId;
+  // string第一个是0，说明点击了object、list的里侧
+  if (_selected && _selected[0] === '0' || _selected === '#') {
+    var _newFlatten = _objectSpread2({}, flatten);
+    try {
+      var oldId = _selected.substring(1);
+      newId = _selected === '#' ? "#/" : "".concat(oldId, "/");
+      if (!fixedName) {
+        newId += getId(name);
+      } else {
+        newId += name;
+      }
+      if (_selected === '#') {
+        oldId = '#';
+      }
+      var siblings = _newFlatten[oldId].children;
+      siblings.push(newId);
+      var newItem = {
+        parent: oldId,
+        schema: _objectSpread2(_objectSpread2({}, schema), {}, {
+          $id: newId
+        }),
+        data: undefined,
+        children: []
+      };
+      _newFlatten[newId] = newItem;
+    } catch (error) {
+      console.error(error, 'catch');
+    }
+    return {
+      newId: newId,
+      newFlatten: _newFlatten
+    };
+  }
+  var _name = fixedName ? name : getId(name);
+  var idArr = selected.split('/');
+  idArr.pop();
+  idArr.push(_name);
+  newId = idArr.join('/');
+  var newFlatten = _objectSpread2({}, flatten);
+  try {
+    var item = newFlatten[selected];
+    var _siblings = newFlatten[item.parent].children;
+    var idx = _siblings.findIndex(function (x) {
+      return x === selected;
+    });
+    _siblings.splice(idx + 1, 0, newId);
+    var _newItem = {
+      parent: item.parent,
+      schema: _objectSpread2(_objectSpread2({}, schema), {}, {
+        $id: newId
+      }),
+      data: undefined,
+      children: []
+    };
+    newFlatten[newId] = _newItem;
+  } catch (error) {
+    console.error(error);
+  }
+  return {
+    newId: newId,
+    newFlatten: newFlatten
+  };
+};
+
+// position 代表 drop 在元素的哪里: 'up' 上 'down' 下 'inside' 内部
+var dropItem = function dropItem(_ref6) {
+  var dragId = _ref6.dragId,
+    dragItem = _ref6.dragItem,
+    dropId = _ref6.dropId,
+    position = _ref6.position,
+    flatten = _ref6.flatten;
+  var _position = dropId === '#' ? 'inside' : position;
+  var newFlatten = _objectSpread2({}, flatten);
+  // 会动到三块数据，dragItem, dragParent, dropParent. 其中dropParent可能就是dropItem（inside的情况）
+  if (dragItem) {
+    newFlatten[dragId] = dragItem;
+  }
+  var _dragItem = dragItem || newFlatten[dragId];
+  var dropItem = newFlatten[dropId];
+  var dropParent = dropItem;
+  if (_position !== 'inside') {
+    var parentId = dropItem.parent;
+    dropParent = newFlatten[parentId];
+  }
+  // TODO: 这块的体验，现在这样兜底了，但是drag起一个元素了，应该让原本变空
+  if (dropId.indexOf(dragId) > -1) {
+    return [newFlatten, dragId];
+  }
+  var newId = dragId;
+  try {
+    var newParentId = dropParent.schema.$id;
+    newId = newId.replace(_dragItem.parent, newParentId);
+  } catch (error) {}
+
+  // dragParent 的 children 删除 dragId
+  try {
+    var dragParent = newFlatten[_dragItem.parent];
+    var idx = dragParent.children.indexOf(dragId);
+    if (idx > -1 && !dragItem) {
+      dragParent.children.splice(idx, 1);
+    }
+  } catch (error) {
+    console.error(error);
+  }
+  try {
+    // dropParent 的 children 添加 dragId
+    var newChildren = dropParent.children || []; // 要考虑children为空，inside的情况
+    var _idx = newChildren.indexOf(dropId);
+    switch (_position) {
+      case 'up':
+        newChildren.splice(_idx, 0, dragId);
+        break;
+      case 'down':
+        newChildren.splice(_idx + 1, 0, dragId);
+        break;
+      default:
+        // inside 作为 default 情况
+        newChildren.push(dragId);
+        break;
+    }
+    dropParent.children = newChildren;
+  } catch (error) {
+    console.error(error);
+  }
+  _dragItem.parent = dropParent.$id;
+  return [newFlatten, newId];
+};
+
+// TODO: 没有考虑list的情况
+var dataToFlatten = function dataToFlatten(flatten, data) {
+  if (!flatten || !data) return {};
+  Object.entries(flatten).forEach(function (_ref7) {
+    var _ref8 = _slicedToArray(_ref7, 2),
+      id = _ref8[0],
+      item = _ref8[1];
+    var branchData = getDataById(data, id);
+    flatten[id].data = branchData;
+  });
+  return flatten;
+};
+var _flattenToData = function flattenToData(flatten) {
+  var id = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : '#';
+  try {
+    var result = flatten[id].data;
+    var ids = Object.keys(flatten);
+    var childrenIds = ids.filter(function (item) {
+      var lengthOfId = id.split('/').length;
+      var lengthOfChild = item.split('/').length;
+      return item.indexOf(id) > -1 && lengthOfChild > lengthOfId;
+    });
+    if (childrenIds && childrenIds.length > 0) {
+      var type = flatten[id].schema.type;
+      if (result === undefined) {
+        // TODO: 这个是简化的逻辑，在编辑器模型下，list和object都是object结构
+        if (type === 'object') {
+          result = {};
+        } else if (type === 'array') {
+          result = [{}];
+        }
+      }
+      childrenIds.forEach(function (c) {
+        var lengthOfId = id.split('/').length;
+        var lengthOfChild = c.split('/').length;
+        // 只比他长1，是直属的child
+        if (lengthOfChild === lengthOfId + 1) {
+          var cData = _flattenToData(flatten, c);
+          var cKey = getKeyFromUniqueId(c);
+          if (cData === undefined) return result;
+          if (type === 'array') {
+            result[0][cKey] = cData;
+          } else {
+            result[cKey] = cData;
+          }
+        }
+      });
+    }
+    return result;
+  } catch (error) {
+    return undefined;
+  }
+};
+var _getParentProps = function getParentProps(propName, id, flatten) {
+  try {
+    var item = flatten[id];
+    if (item.schema[propName] !== undefined) return item.schema[propName];
+    if (item && item.parent) {
+      var parentSchema = flatten[item.parent].schema;
+      if (parentSchema[propName] !== undefined) {
+        return parentSchema[propName];
+      } else {
+        return _getParentProps(propName, item.parent, flatten);
+      }
+    }
+  } catch (error) {
+    return undefined;
+  }
+};
+function looseJsonParse(obj) {
+  return Function('"use strict";return (' + obj + ')')();
+}
+
+// 获得 propsSchema 的 children
+function getChildren2(schema) {
+  if (!schema) return [];
+  var properties = schema.properties,
+    items = schema.items,
+    type = schema.type;
+  if (!properties && !items) {
+    return [];
+  }
+  var schemaSubs = {};
+  if (type === 'object') {
+    schemaSubs = properties;
+  }
+  if (type === 'array') {
+    schemaSubs = items.properties;
+  }
+  return Object.keys(schemaSubs).map(function (name) {
+    return {
+      schema: schemaSubs[name],
+      name: name
+    };
+  });
+}
+
+// 解析函数字符串值
+// getDataById(formData, '#/a/b/c')
+function getDataById(object, path) {
+  path = castPath(path, object);
+  var index = 0;
+  var length = path.length;
+  while (object != null && index < length) {
+    var key = toKey(path[index++]);
+    if (Array.isArray(object) && _typeof(object[0]) === 'object') {
+      object = key ? object[0][key] : object;
+    } else {
+      object = key ? object[key] : object;
+    }
+  }
+  return index && index == length ? object : undefined;
+}
+function castPath(value, object) {
+  if (Array.isArray(value)) {
+    return value;
+  }
+  return isKey(value, object) ? [value] : value.match(/([^\.\/\[\]#"']+)/g);
+}
+function toKey(value) {
+  if (typeof value === 'string') {
+    return value.replace(/^#\/?/, '');
+  }
+  var result = "".concat(value);
+  return result == '0' && 1 / value == -INFINITY ? '-0' : result;
+}
+var reIsDeepProp = /#\/.+\//;
+var reIsPlainProp = /^\w*$/;
+function isKey(value, object) {
+  if (Array.isArray(value)) {
+    return false;
+  }
+  var type = _typeof(value);
+  if (type === 'number' || type === 'boolean' || value == null) {
+    return true;
+  }
+  return reIsPlainProp.test(value) || !reIsDeepProp.test(value) || object != null && value in Object(object);
+}
+var oldSchemaToNew = function oldSchemaToNew(schema) {
+  if (schema && schema.propsSchema) {
+    var propsSchema = schema.propsSchema,
+      rest = _objectWithoutProperties(schema, _excluded);
+    return _objectSpread2({
+      schema: propsSchema
+    }, rest);
+  }
+  if (schema && schema.schema) {
+    return schema.schema;
+  }
+  if (schema && schema.type === 'object') {
+    return schema;
+  }
+  return _objectSpread2({
+    type: 'object',
+    properties: {}
+  }, schema);
+};
+var newSchemaToOld = function newSchemaToOld(setting) {
+  if (setting && setting.schema) {
+    var schema = setting.schema,
+      rest = _objectWithoutProperties(setting, _excluded2);
+    return _objectSpread2({
+      propsSchema: schema
+    }, rest);
+  }
+  return setting;
+};
+var schemaToState = function schemaToState(value) {
+  var schema = oldSchemaToNew(value);
+  var frProps = Object.keys(schema).reduce(function (rst, cur) {
+    if (['type', 'properties'].includes(cur)) return rst;
+    return _objectSpread2(_objectSpread2({}, rst), {}, _defineProperty({}, cur, schema[cur]));
+  }, {});
+  var isNewVersion = !(value && value.propsSchema);
+  return {
+    schema: schema,
+    frProps: frProps,
+    formData: schema.formData || {},
+    isNewVersion: isNewVersion
+  };
+};
+function defaultGetValueFromEvent(valuePropName) {
+  var event = arguments.length <= 1 ? undefined : arguments[1];
+  if (event && event.target && valuePropName in event.target) {
+    return event.target[valuePropName];
+  }
+  return event;
+}
+var transformProps = function transformProps(props) {
+  var onChange = props.onChange,
+    value = props.value,
+    defaultValue = props.defaultValue,
+    ownSchema = props.schema,
+    rest = _objectWithoutProperties(props, _excluded3);
+  var schema = _objectSpread2({}, ownSchema);
+  var _ref9 = schema || {},
+    trigger = _ref9.trigger,
+    valuePropName = _ref9.valuePropName;
+  var controlProps = {};
+  var _valuePropName = 'value';
+  var _value = value === undefined ? defaultValue : value;
+  if (valuePropName && typeof valuePropName === 'string') {
+    _valuePropName = valuePropName;
+    controlProps[valuePropName] = _value;
+  } else {
+    controlProps.value = _value;
+  }
+  var _onChange = function _onChange() {
+    for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
+      args[_key] = arguments[_key];
+    }
+    var newValue = defaultGetValueFromEvent.apply(void 0, [_valuePropName].concat(args));
+    onChange(newValue);
+  };
+  if (trigger && typeof trigger === 'string') {
+    controlProps[trigger] = _onChange;
+  } else {
+    controlProps.onChange = _onChange;
+  }
+
+  // TODO: 之后 ui:xx 会舍去
+  var usefulPropsFromSchema = {
+    disabled: schema.disabled || schema['ui:disabled'],
+    readOnly: schema.readOnly || schema['ui:readonly']
+    // hidden: schema.hidden || schema['ui:hidden'],
+    // $options: schema.options || schema['ui:options'],
+  };
+  var _props = _objectSpread2(_objectSpread2(_objectSpread2({}, controlProps), {}, {
+    schema: schema
+  }, usefulPropsFromSchema), rest);
+  return _props;
+};
+var mergeInOrder = function mergeInOrder() {
+  for (var _len2 = arguments.length, args = new Array(_len2), _key2 = 0; _key2 < _len2; _key2++) {
+    args[_key2] = arguments[_key2];
+  }
+  return args.reduce(function (result, current) {
+    if (!current) return result;
+    return Object.keys(current).reduce(function (rst, key) {
+      if (rst[key]) delete rst[key];
+      return _objectSpread2(_objectSpread2({}, rst), {}, _defineProperty({}, key, current[key]));
+    }, result);
+  }, {});
+};
+var defaultGetId = function defaultGetId(name) {
+  return "".concat(name, "_").concat(nanoid$1(6));
+};
+
+var Ctx = /*#__PURE__*/createContext(function () {});
+var StoreCtx = /*#__PURE__*/createContext({});
+
+// 使用最顶层组件的 setState
+var useGlobal = function useGlobal() {
+  return useContext(Ctx);
+};
+
+// 组件最顶层传入的所有props
+var useStore = function useStore() {
+  return useContext(StoreCtx);
+};
+
+// 类似于 class component 的 setState
+var useSet = function useSet(initState) {
+  var _useReducer = useReducer(function (state, newState) {
+      var action = newState;
+      if (typeof newState === 'function') {
+        action = action(state);
+      }
+      if (newState.action && newState.payload) {
+        action = newState.payload;
+        if (typeof action === 'function') {
+          action = action(state);
+        }
+      }
+      return _objectSpread2(_objectSpread2({}, state), action);
+    }, initState),
+    _useReducer2 = _slicedToArray(_useReducer, 2),
+    state = _useReducer2[0],
+    setState = _useReducer2[1];
+  var setStateWithActionName = function setStateWithActionName(state, actionName) {
+    setState(state);
+  };
+  return [state, setStateWithActionName];
+};
+
+var RenderChildren = function RenderChildren(_ref) {
+  var _ref$children = _ref.children,
+    children = _ref$children === void 0 ? [] : _ref$children,
+    preview = _ref.preview;
+  return /*#__PURE__*/React.createElement(React.Fragment, null, children.map(function (child, i) {
+    var FRProps = {
+      id: child,
+      preview: preview
+    };
+    return /*#__PURE__*/React.createElement(FR, _extends({
+      key: i.toString()
+    }, FRProps));
+  }));
+};
+
+function getWidgetName(schema, _mapping) {
+  var type = schema.type,
+    format = schema.format,
+    enums = schema.enum,
+    readonly = schema.readonly;
+
+  // 如果已经注明了渲染widget，那最好
+  if (schema['widget']) {
+    return schema['widget'];
+  }
+  var list = [];
+  if (readonly) {
+    list.push("".concat(type, "?readonly"));
+    list.push('*?readonly');
+  }
+  if (enums) {
+    list.push("".concat(type, "?enum"));
+    // array 默认使用list，array?enum 默认使用checkboxes，*?enum 默认使用select
+    list.push('*?enum');
+  }
+  if (format) {
+    list.push("".concat(type, ":").concat(format));
+  }
+  list.push(type); // 放在最后兜底，其他都不match时使用type默认的组件
+  var found = '';
+  list.some(function (item) {
+    found = _mapping[item];
+    return !!found;
+  });
+  return found;
+}
+
+var RenderField = function RenderField(_ref) {
+  var $id = _ref.$id,
+    item = _ref.item,
+    labelClass = _ref.labelClass,
+    contentClass = _ref.contentClass,
+    isComplex = _ref.isComplex,
+    children = _ref.children;
+  var schema = item.schema,
+    data = item.data;
+  var _useStore = useStore(),
+    onItemChange = _useStore.onItemChange,
+    flatten = _useStore.flatten,
+    widgets = _useStore.widgets,
+    mapping = _useStore.mapping,
+    _useStore$frProps = _useStore.frProps,
+    frProps = _useStore$frProps === void 0 ? {} : _useStore$frProps,
+    fieldRender = _useStore.fieldRender;
+  var labelWidth = frProps.labelWidth,
+    displayType = frProps.displayType,
+    showValidate = frProps.showValidate;
+  var title = schema.title,
+    description = schema.description,
+    required = schema.required;
+  var widgetName = getWidgetName(schema, mapping);
+  var customWidget = schema['widget'];
+  if (customWidget && widgets[customWidget]) {
+    widgetName = customWidget;
+  }
+  var Widget = widgets[widgetName];
+  // 如果不存在，比如有外部的自定义组件名称，使用默认展示组件
+  if (!Widget) {
+    var defaultSchema = _objectSpread2({}, schema);
+    delete defaultSchema['widget'];
+    widgetName = getWidgetName(defaultSchema, mapping);
+    Widget = widgets[widgetName] || 'input';
+  }
+  // 真正有效的label宽度需要从现在所在item开始一直往上回溯（设计成了继承关系），找到的第一个有值的 labelWidth
+  var effectiveLabelWidth = _getParentProps('labelWidth', $id, flatten) || labelWidth;
+  var _labelWidth = isLooselyNumber(effectiveLabelWidth) ? Number(effectiveLabelWidth) : isCssLength(effectiveLabelWidth) ? effectiveLabelWidth : 110; // 默认是 110px 的长度
+
+  var labelStyle = {
+    width: _labelWidth
+  };
+  if (widgetName === 'checkbox') {
+    labelStyle = {
+      flexGrow: 1
+    };
+  } else if (isComplex || displayType === 'column') {
+    labelStyle = {
+      flexGrow: 1
+    };
+  }
+  var onChange = function onChange(value) {
+    var newItem = _objectSpread2({}, item);
+    if (item.schema.type === 'boolean' && item.schema.widget === 'checkbox') {
+      newItem.data = !value;
+    } else {
+      newItem.data = value;
+    }
+    onItemChange($id, newItem, 'data');
+  };
+  var contentStyle = {};
+  if (widgetName === 'checkbox' && displayType === 'row') {
+    contentStyle.marginLeft = effectiveLabelWidth;
+  }
+
+  // TODO: useMemo
+  // 改为直接使用form-render内部自带组件后不需要再包一层options
+  var usefulWidgetProps = transformProps(_objectSpread2({
+    value: data || schema.default,
+    checked: data,
+    disabled: schema.disabled,
+    readOnly: schema.readOnly,
+    format: schema.format,
+    onChange: onChange,
+    schema: schema
+  }, schema['props']));
+  var originNode = /*#__PURE__*/React.createElement(React.Fragment, null, schema.title ? /*#__PURE__*/React.createElement("div", {
+    className: labelClass,
+    style: labelStyle
+  }, /*#__PURE__*/React.createElement("label", {
+    className: cn('fr-label-title', {
+      'no-colon': widgetName === 'checkbox' || displayType === 'column'
+    }) // checkbox不带冒号
+    ,
+    title: title
+  }, required && /*#__PURE__*/React.createElement("span", {
+    className: "fr-label-required"
+  }, " *"), /*#__PURE__*/React.createElement("span", {
+    className: cn({
+      b: isComplex,
+      'flex-none': displayType === 'column'
+    })
+  }, /*#__PURE__*/React.createElement("span", {
+    dangerouslySetInnerHTML: {
+      __html: title
+    }
+  })), description && /*#__PURE__*/React.createElement("span", {
+    className: "fr-desc ml2"
+  }, "(\xA0", description, "\xA0)"), displayType !== 'row' && showValidate && /*#__PURE__*/React.createElement("span", {
+    className: "fr-validate"
+  }, "validation"))) : null, /*#__PURE__*/React.createElement("div", {
+    className: contentClass,
+    style: contentStyle
+  }, /*#__PURE__*/React.createElement(Suspense, {
+    fallback: /*#__PURE__*/React.createElement("div", null)
+  }, /*#__PURE__*/React.createElement(Widget, usefulWidgetProps, children || null))));
+  if (!fieldRender) return originNode;
+  return fieldRender(schema, usefulWidgetProps, children, originNode);
+};
+
+function styleInject(css, ref) {
+  if ( ref === void 0 ) ref = {};
+  var insertAt = ref.insertAt;
+
+  if (!css || typeof document === 'undefined') { return; }
+
+  var head = document.head || document.getElementsByTagName('head')[0];
+  var style = document.createElement('style');
+  style.type = 'text/css';
+
+  if (insertAt === 'top') {
+    if (head.firstChild) {
+      head.insertBefore(style, head.firstChild);
+    } else {
+      head.appendChild(style);
+    }
+  } else {
+    head.appendChild(style);
+  }
+
+  if (style.styleSheet) {
+    style.styleSheet.cssText = css;
+  } else {
+    style.appendChild(document.createTextNode(css));
+  }
+}
+
+var css_248z = ".field-wrapper {\n  padding: 20px 8px 0 8px;\n  border: 1px dashed #bbb;\n  margin: 0 0 8px 0;\n}\n.field-wrapper::-webkit-scrollbar {\n  width: 5px;\n  background-color: #0002;\n}\n.field-wrapper::-webkit-scrollbar-thumb {\n  background: #0004;\n  border-radius: 5px;\n}\n.dnd-container > .field-wrapper {\n  margin: 0;\n}\n.fr-generator-container .dnd-container > .field-wrapper > div.fr-field {\n  margin: 0;\n}\n.pointer-move {\n  position: absolute;\n  top: -2px;\n  left: -2px;\n  height: 24px;\n  width: 24px;\n  color: #fff;\n  background-color: #409eff;\n  cursor: move;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n}\n.pointer-wrapper {\n  position: absolute;\n  z-index: 20;\n  bottom: -2px;\n  right: -2px;\n  height: 24px;\n  border-top-left-radius: 8px;\n  background: #409eff;\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  padding: 0 4px;\n}\n.pointer {\n  color: #fff;\n  padding: 0 4px;\n}\n";
+styleInject(css_248z);
+
+function Wrapper(_ref) {
+  var $id = _ref.$id,
+    item = _ref.item,
+    _ref$inside = _ref.inside,
+    inside = _ref$inside === void 0 ? false : _ref$inside,
+    children = _ref.children,
+    style = _ref.style;
+  var _useState = useState(),
+    _useState2 = _slicedToArray(_useState, 2),
+    position = _useState2[0],
+    setPosition = _useState2[1];
+  var _useStore = useStore(),
+    flatten = _useStore.flatten,
+    onFlattenChange = _useStore.onFlattenChange,
+    selected = _useStore.selected,
+    userProps = _useStore.userProps,
+    errorFields = _useStore.errorFields,
+    fieldWrapperRender = _useStore.fieldWrapperRender;
+  var controlButtons = userProps.controlButtons,
+    _userProps$canDrag = userProps.canDrag,
+    _canDrag = _userProps$canDrag === void 0 ? true : _userProps$canDrag,
+    _userProps$canDelete = userProps.canDelete,
+    canDelete = _userProps$canDelete === void 0 ? true : _userProps$canDelete,
+    hideId = userProps.hideId,
+    getId = userProps.getId;
+  var setGlobal = useGlobal();
+  var schema = item.schema;
+  var type = schema.type;
+  var boxRef = useRef(null);
+  var _useDrag = useDrag({
+      type: 'box',
+      item: {
+        $id: inside ? 0 + $id : $id
+      },
+      canDrag: function canDrag() {
+        return typeof _canDrag === 'function' ? _canDrag(schema) : _canDrag;
+      },
+      collect: function collect(monitor) {
+        return {
+          isDragging: monitor.isDragging()
+        };
+      }
+    }),
+    _useDrag2 = _slicedToArray(_useDrag, 3),
+    isDragging = _useDrag2[0].isDragging,
+    dragRef = _useDrag2[1],
+    dragPreview = _useDrag2[2];
+  var _useDrop = useDrop({
+      accept: 'box',
+      drop: function () {
+        var _drop = _asyncToGenerator(/*#__PURE__*/_regenerator().m(function _callee(item, monitor) {
+          var didDrop, _dropItem, _dropItem2, newFlatten, newId;
+          return _regenerator().w(function (_context) {
+            while (1) switch (_context.n) {
+              case 0:
+                // 如果 children 已经作为了 drop target，不处理
+                didDrop = monitor.didDrop();
+                if (!(didDrop || (errorFields === null || errorFields === void 0 ? void 0 : errorFields.length))) {
+                  _context.n = 1;
+                  break;
+                }
+                return _context.a(2);
+              case 1:
+                _dropItem = dropItem({
+                  dragId: item.$id,
+                  // 内部拖拽用dragId
+                  dragItem: item.dragItem,
+                  // 从左边栏过来的，用dragItem
+                  dropId: $id,
+                  position: position,
+                  flatten: flatten
+                }), _dropItem2 = _slicedToArray(_dropItem, 2), newFlatten = _dropItem2[0], newId = _dropItem2[1];
+                onFlattenChange(newFlatten);
+                setGlobal({
+                  selected: newId
+                });
+              case 2:
+                return _context.a(2);
+            }
+          }, _callee);
+        }));
+        function drop(_x, _x2) {
+          return _drop.apply(this, arguments);
+        }
+        return drop;
+      }(),
+      hover: function hover(item, monitor) {
+        // 只检查被hover的最小元素
+        var didHover = monitor.isOver({
+          shallow: true
+        });
+        if (didHover) {
+          // Determine rectangle on screen
+          var hoverBoundingRect = boxRef.current && boxRef.current.getBoundingClientRect();
+          // Get vertical middle
+          var hoverMiddleY = (hoverBoundingRect.bottom - hoverBoundingRect.top) / 2;
+          // Determine mouse position
+          // const clientOffset = monitor.getClientOffset();
+          var dragOffset = monitor.getSourceClientOffset();
+          // Get pixels to the top
+          var hoverClientY = dragOffset.y - hoverBoundingRect.top;
+          // Only perform the move when the mouse has crossed half of the items height
+          // When dragging downwards, only move when the cursor is below 50%
+          // When dragging upwards, only move when the cursor is above 50%
+          // Dragging downwards
+          if (inside) {
+            setPosition('inside');
+          } else {
+            if (hoverClientY <= hoverMiddleY) {
+              setPosition('up');
+            }
+            // Dragging upwards
+            if (hoverClientY > hoverMiddleY) {
+              setPosition('down');
+            }
+          }
+        }
+      },
+      collect: function collect(monitor) {
+        return {
+          isOver: monitor.isOver({
+            shallow: true
+          }),
+          canDrop: monitor.canDrop()
+        };
+      }
+    }),
+    _useDrop2 = _slicedToArray(_useDrop, 2),
+    _useDrop2$ = _useDrop2[0],
+    canDrop = _useDrop2$.canDrop,
+    isOver = _useDrop2$.isOver,
+    dropRef = _useDrop2[1];
+  var isActive = canDrop && isOver;
+  dragPreview(dropRef(boxRef));
+  var handleClick = /*#__PURE__*/function () {
+    var _ref2 = _asyncToGenerator(/*#__PURE__*/_regenerator().m(function _callee2(e) {
+      var _id;
+      return _regenerator().w(function (_context2) {
+        while (1) switch (_context2.n) {
+          case 0:
+            e.stopPropagation();
+            if (!(errorFields === null || errorFields === void 0 ? void 0 : errorFields.length)) {
+              _context2.n = 1;
+              break;
+            }
+            return _context2.a(2);
+          case 1:
+            _id = inside ? '0' + $id : $id;
+            setGlobal({
+              selected: _id
+            });
+          case 2:
+            return _context2.a(2);
+        }
+      }, _callee2);
+    }));
+    return function handleClick(_x3) {
+      return _ref2.apply(this, arguments);
+    };
+  }();
+  var deleteItem = /*#__PURE__*/function () {
+    var _ref3 = _asyncToGenerator(/*#__PURE__*/_regenerator().m(function _callee3(e) {
+      var newFlatten, newSelect, parent, siblings, idx, _canDelete;
+      return _regenerator().w(function (_context3) {
+        while (1) switch (_context3.n) {
+          case 0:
+            e.stopPropagation();
+            newFlatten = _objectSpread2({}, flatten);
+            newSelect = '#'; // 计算删除后新被选中的元素：
+            // 1. 如果是第一个，选第二个
+            // 2. 如果不是第一，选它前一个
+            // 3. 如果同级元素没了，选parent
+            try {
+              parent = newFlatten[$id].parent;
+              siblings = newFlatten[parent].children;
+              idx = siblings.indexOf($id);
+              if (idx > 0) {
+                newSelect = siblings[idx - 1];
+              } else {
+                newSelect = siblings[1] || parent;
+              }
+            } catch (error) {
+              console.error(error, 'catch');
+            }
+            _canDelete = canDelete;
+            if (!(typeof canDelete === 'function')) {
+              _context3.n = 2;
+              break;
+            }
+            _context3.n = 1;
+            return Promise.resolve(canDelete(newFlatten[$id].schema));
+          case 1:
+            _canDelete = _context3.v;
+          case 2:
+            if (_canDelete) {
+              _context3.n = 3;
+              break;
+            }
+            return _context3.a(2);
+          case 3:
+            delete newFlatten[$id];
+            onFlattenChange(newFlatten);
+            setGlobal({
+              selected: newSelect
+            });
+          case 4:
+            return _context3.a(2);
+        }
+      }, _callee3);
+    }));
+    return function deleteItem(_x4) {
+      return _ref3.apply(this, arguments);
+    };
+  }();
+  var handleItemCopy = function handleItemCopy(e) {
+    e.stopPropagation();
+    if (errorFields === null || errorFields === void 0 ? void 0 : errorFields.length) return;
+    var _copyItem = copyItem(flatten, $id, getId),
+      _copyItem2 = _slicedToArray(_copyItem, 2),
+      newFlatten = _copyItem2[0],
+      newId = _copyItem2[1];
+    onFlattenChange(newFlatten);
+    setGlobal({
+      selected: newId
+    });
+  };
+
+  // 一些computed
+  var isSelected = selected === $id && !inside;
+  if (selected && selected[0] === '0') {
+    isSelected = selected.substring(1) === $id && inside;
+  }
+  var overwriteStyle = {
+    backgroundColor: '#fff',
+    opacity: isDragging ? 0 : 1
+  };
+  if (inside) {
+    overwriteStyle = _objectSpread2(_objectSpread2({}, overwriteStyle), {}, {
+      borderColor: '#777',
+      // marginLeft: 12,
+      padding: '12px 12px 0',
+      backgroundColor: '#f6f5f6'
+    });
+  } else if ($id === '#') {
+    overwriteStyle = _objectSpread2(_objectSpread2({}, overwriteStyle), {}, {
+      borderColor: '#777',
+      padding: 12,
+      height: '100%',
+      overflow: 'auto',
+      backgroundColor: '#f6f5f6'
+    });
+  } else if (type === 'object') {
+    overwriteStyle = _objectSpread2(_objectSpread2({}, overwriteStyle), {}, {
+      paddingTop: 12
+    });
+  }
+  if (isActive) {
+    if (inside) {
+      overwriteStyle = _objectSpread2(_objectSpread2({}, overwriteStyle), {}, {
+        boxShadow: '0 -3px 0 red'
+      });
+    } else if (position === 'up') {
+      overwriteStyle = _objectSpread2(_objectSpread2({}, overwriteStyle), {}, {
+        boxShadow: '0 -3px 0 red'
+      });
+    } else if (position === 'down') {
+      overwriteStyle = _objectSpread2(_objectSpread2({}, overwriteStyle), {}, {
+        boxShadow: '0 3px 0 red'
+      });
+    }
+  }
+  if (isSelected) {
+    overwriteStyle = _objectSpread2(_objectSpread2({}, overwriteStyle), {}, {
+      outline: '2px solid #409eff',
+      borderColor: '#fff',
+      zIndex: 1
+    });
+  }
+  if (style && _typeof(style) === 'object') {
+    overwriteStyle = _objectSpread2(_objectSpread2({}, overwriteStyle), style);
+  }
+  if ($id === '#' && inside) return children;
+
+  // 展示的id
+  var shownId = getKeyFromUniqueId(schema.$id);
+
+  // 操作按钮
+  var _controlButtons = Array.isArray(controlButtons) ? controlButtons : [true, true];
+  var _showDefaultBtns = _controlButtons.filter(function (item) {
+    return ['boolean', 'function'].includes(_typeof(item));
+  }).map(function (item) {
+    if (typeof item === 'boolean') return item;
+    return item(schema);
+  });
+  var _extraBtns = _controlButtons.filter(function (item) {
+    return isObject(item) && (item.text || item.children);
+  });
+  var _showDefaultBtns$conc = _showDefaultBtns.concat(_extraBtns).filter(Boolean),
+    _numOfBtns = _showDefaultBtns$conc.length;
+  var hasDuplicateId = Object.keys(flatten).map(function (key) {
+    return flatten[key].schema.$id;
+  }).filter(function (key) {
+    return key === schema.$id;
+  }).length > 1;
+  var originNode = /*#__PURE__*/React.createElement("div", {
+    ref: boxRef,
+    style: overwriteStyle,
+    className: "field-wrapper ".concat($id !== '#' && isSelected ? 'selected-field-wrapper' : '', " relative w-100"),
+    onClick: handleClick
+  }, children, /*#__PURE__*/React.createElement("div", {
+    className: "absolute top-0 right-1 f7"
+  }, !inside && $id !== '#' && !hideId && /*#__PURE__*/React.createElement("span", {
+    className: hasDuplicateId ? 'red' : 'blue'
+  }, shownId), schema.hidden && /*#__PURE__*/React.createElement("span", {
+    style: {
+      color: '#666',
+      marginLeft: '6px'
+    }
+  }, "[hidden]")), !inside && $id !== '#' && isSelected && /*#__PURE__*/React.createElement("div", {
+    className: "pointer-move",
+    ref: dragRef
+  }, /*#__PURE__*/React.createElement(_DragOutlined, null)), !inside && $id !== '#' && isSelected && _numOfBtns > 0 && /*#__PURE__*/React.createElement("div", {
+    className: "pointer-wrapper"
+  }, _showDefaultBtns[0] !== false && /*#__PURE__*/React.createElement("div", {
+    className: "pointer",
+    onClick: deleteItem
+  }, /*#__PURE__*/React.createElement(_DeleteOutlined, null)), _showDefaultBtns[1] !== false && /*#__PURE__*/React.createElement("div", {
+    className: "pointer",
+    onClick: handleItemCopy
+  }, /*#__PURE__*/React.createElement(_CopyOutlined, null)), _extraBtns.map(function (item, idx) {
+    return /*#__PURE__*/React.createElement("div", {
+      key: idx.toString(),
+      className: "pointer",
+      onClick: function onClick(e) {
+        return item.onClick && item.onClick(e, schema);
+      }
+    }, item.text || item.children);
+  })));
+  if (!fieldWrapperRender) return originNode;
+  return fieldWrapperRender(schema, isSelected, children, originNode);
+}
+
+var PreviewFR = function PreviewFR(_ref) {
+  var schema = _ref.schema,
+    data = _ref.data;
+  var form = useForm();
+  var _useStore = useStore(),
+    flatten = _useStore.flatten,
+    widgets = _useStore.widgets,
+    mapping = _useStore.mapping,
+    methods = _useStore.methods,
+    userProps = _useStore.userProps,
+    onFlattenChange = _useStore.onFlattenChange;
+  var renderSchema = userProps.transformer.to(schema);
+  useEffect(function () {
+    form.setValues(data);
+  }, []);
+  return /*#__PURE__*/React.createElement(FormRender, {
+    schema: renderSchema,
+    form: form,
+    widgets: widgets,
+    mapping: mapping,
+    methods: methods,
+    watch: {
+      '#': function _(formData) {
+        onFlattenChange(dataToFlatten(flatten, formData), 'data');
+      }
+    }
+  });
+};
+var FR = function FR(_ref2) {
+  var _schema$props;
+  var _ref2$id = _ref2.id,
+    id = _ref2$id === void 0 ? '#' : _ref2$id,
+    preview = _ref2.preview,
+    displaySchema = _ref2.displaySchema;
+  var _useStore2 = useStore(),
+    flatten = _useStore2.flatten,
+    _useStore2$frProps = _useStore2.frProps,
+    frProps = _useStore2$frProps === void 0 ? {} : _useStore2$frProps;
+  var _useTranslation = useTranslation(),
+    t = _useTranslation.t;
+  if (preview) {
+    var data = _flattenToData(flatten);
+    return /*#__PURE__*/React.createElement(PreviewFR, {
+      schema: displaySchema,
+      data: data
+    });
+  }
+  var column = frProps.column;
+  var item = flatten[id];
+  if (!item) return null;
+  var schema = item.schema;
+  var displayType = schema.displayType || frProps.displayType;
+  var isObj = schema.type === 'object';
+  var isList = schema.type === 'array' && schema.enum === undefined && !!schema.items;
+  var isComplex = isObj || isList;
+  var width = schema['width'];
+  var containerClass = "fr-field w-100 ".concat(isComplex ? 'fr-field-complex' : '', " ").concat(schema.className || '');
+  var labelClass = 'fr-label mb2';
+  var contentClass = 'fr-content';
+  var columnStyle = {};
+  if (!isComplex && width) {
+    columnStyle = {
+      width: width,
+      paddingRight: '12px'
+    };
+  } else if (!isComplex && column > 1) {
+    columnStyle = {
+      width: "calc(100% /".concat(column, ")"),
+      paddingRight: '12px'
+    };
+  } else if ('flex' === (schema === null || schema === void 0 ? void 0 : schema.theme)) {
+    columnStyle.width = width;
+  }
+
+  // 如果传入自定义样式则覆盖使用，object 外层样式使用 schema.style，内层样式使用 schema.props.style
+  if ('object' === _typeof(schema === null || schema === void 0 ? void 0 : schema.style)) {
+    columnStyle = _objectSpread2(_objectSpread2({}, columnStyle), schema.style);
+  }
+  switch (schema.type) {
+    case 'object':
+      if (schema.title) {
+        containerClass += ' ba b--black-20 pt4 pr3 pb2 relative mt3 mb4'; // object的margin bottom由内部元素撑起
+        labelClass += ' fr-label-object bg-white absolute ph2 top-upper left-1'; // fr-label-object 无默认style，只是占位用于使用者样式覆盖
+      }
+      containerClass += ' fr-field-object'; // object的margin bottom由内部元素撑起
+      if (schema.title) {
+        contentClass += ' ml3'; // 缩进
+      }
+      break;
+    case 'array':
+      if (isList) {
+        labelClass += ' mt2 mb3';
+      }
+      break;
+    case 'boolean':
+      if (schema['widget'] !== 'switch') {
+        if (schema.title) {
+          labelClass += ' ml2';
+          labelClass = labelClass.replace('mb2', 'mb0');
+        }
+        contentClass += ' flex items-center'; // checkbox高度短，需要居中对齐
+        containerClass += ' flex items-center flex-row-reverse justify-end';
+      }
+      break;
+    default:
+      if (displayType === 'row') {
+        labelClass = labelClass.replace('mb2', 'mb0');
+      }
+  }
+  // 横排时
+  var isCheckBox = schema.type === 'boolean' && schema['widget'] !== 'switch';
+  if (displayType === 'row' && !isComplex && !isCheckBox) {
+    containerClass += ' flex items-center';
+    labelClass += ' flex-shrink-0 fr-label-row';
+    labelClass = labelClass.replace('mb2', 'mb0');
+    contentClass += ' flex-grow-1 relative';
+  }
+
+  // 横排的checkbox
+  if (displayType === 'row' && isCheckBox) {
+    contentClass += ' flex justify-end pr2';
+  }
+  var fieldProps = {
+    $id: id,
+    item: item,
+    labelClass: labelClass,
+    contentClass: contentClass,
+    isComplex: isComplex
+  };
+  var childrenElement = item.children && item.children.length > 0 ? /*#__PURE__*/React.createElement("ul", {
+    className: "flex flex-wrap pl0",
+    style: schema === null || schema === void 0 ? void 0 : (_schema$props = schema.props) === null || _schema$props === void 0 ? void 0 : _schema$props.style
+  }, /*#__PURE__*/React.createElement(RenderChildren, {
+    children: item.children
+  })) : null;
+  var isEmpty = Object.keys(flatten).length < 2; // 只有一个根元素 # 的情况
+  if (isEmpty) {
+    return /*#__PURE__*/React.createElement(Wrapper, {
+      style: columnStyle,
+      $id: id,
+      item: item
+    }, /*#__PURE__*/React.createElement("div", {
+      className: "".concat(containerClass, " h-100 f4 black-40 flex items-center justify-center")
+    }, t('点击/拖拽左侧栏的组件进行添加')));
+  }
+  return /*#__PURE__*/React.createElement(Wrapper, {
+    style: columnStyle,
+    $id: id,
+    item: item
+  }, /*#__PURE__*/React.createElement("div", {
+    className: containerClass
+  }, /*#__PURE__*/React.createElement(RenderField, fieldProps, (isObj || isList) && /*#__PURE__*/React.createElement(Wrapper, {
+    $id: id,
+    item: item,
+    inside: true
+  }, childrenElement || /*#__PURE__*/React.createElement("div", {
+    className: "h2"
+  })))));
+};
+
+var TextArea = _Input.TextArea;
+var Canvas = function Canvas(_ref) {
+  var onSelect = _ref.onSelect;
+  var _useTranslation = useTranslation(),
+    t = _useTranslation.t;
+  var setGlobal = useGlobal();
+  var _useStore = useStore(),
+    userProps = _useStore.userProps,
+    displaySchema = _useStore.displaySchema,
+    displaySchemaString = _useStore.displaySchemaString,
+    preview = _useStore.preview,
+    selected = _useStore.selected,
+    flatten = _useStore.flatten,
+    onChange = _useStore.onChange,
+    onSchemaChange = _useStore.onSchemaChange;
+  var _useSet = useSet({
+      showModal: false,
+      showModal2: false,
+      schemaForImport: ''
+    }),
+    _useSet2 = _slicedToArray(_useSet, 2),
+    local = _useSet2[0],
+    setState = _useSet2[1];
+  var transformer = userProps.transformer,
+    _userProps$extraButto = userProps.extraButtons,
+    extraButtons = _userProps$extraButto === void 0 ? [] : _userProps$extraButto;
+  var toggleModal = function toggleModal() {
+    return setState({
+      showModal: !local.showModal
+    });
+  };
+  var toggleModal2 = function toggleModal2() {
+    return setState({
+      showModal2: !local.showModal2
+    });
+  };
+  var onTextareaChange = function onTextareaChange(e) {
+    setState({
+      schemaForImport: e.target.value
+    });
+  };
+  var importSchema = function importSchema() {
+    try {
+      var value = transformer.from(looseJsonParse(local.schemaForImport));
+      setGlobal(function () {
+        return _objectSpread2({
+          selected: undefined
+        }, schemaToState(value));
+      });
+      onChange(value.formData || {});
+      onSchemaChange(value);
+    } catch (error) {
+      console.error(error, 'catch');
+      _message.info(t('格式不对哦，请重新尝试')); // 可以加个格式哪里不对的提示
+    }
+    toggleModal2();
+  };
+  var copySchema = function copySchema() {
+    copyTOClipboard(displaySchemaString);
+    _message.info(t('复制成功'));
+    toggleModal();
+  };
+  var clearSchema = function clearSchema() {
+    var schema = {
+      type: 'object',
+      properties: {}
+    };
+    setGlobal({
+      schema: schema,
+      formData: {},
+      selected: undefined
+    });
+    onChange({});
+    onSchemaChange(schema);
+  };
+  useEffect(function () {
+    if (!onSelect) return;
+    onSelect(idToSchema(flatten, selected));
+  }, [selected]);
+  var _extraButtons = Array.isArray(extraButtons) ? extraButtons : [];
+  var _showDefaultBtns = _extraButtons.filter(function (item) {
+    return !isObject(item);
+  });
+  var _extraBtns = _extraButtons.filter(function (item) {
+    return isObject(item);
+  });
+  var getDefaultBtnText = function getDefaultBtnText(text, defaultText, index) {
+    if (typeof index === 'number') {
+      if (Array.isArray(text)) return text[index];
+      return defaultText[index];
+    }
+    if (typeof text === 'string') return text;
+    return defaultText;
+  };
+  return /*#__PURE__*/React.createElement("div", {
+    className: "mid-layout pr2"
+  }, /*#__PURE__*/React.createElement("div", {
+    className: "mv2 mh1"
+  }, _showDefaultBtns[0] !== false && /*#__PURE__*/React.createElement(_Button, {
+    className: "mr2 mb1",
+    onClick: function onClick() {
+      setGlobal({
+        selected: '#',
+        preview: !preview
+      });
+    }
+  }, getDefaultBtnText(_showDefaultBtns[0], [t('开始编辑'), t('最终展示')], Number(!preview))), _showDefaultBtns[1] !== false && /*#__PURE__*/React.createElement(_Button, {
+    className: "mr2",
+    onClick: clearSchema
+  }, getDefaultBtnText(_showDefaultBtns[1], t('清空'))), _showDefaultBtns[2] !== false && /*#__PURE__*/React.createElement(_Button, {
+    className: "mr2",
+    onClick: toggleModal2
+  }, getDefaultBtnText(_showDefaultBtns[2], t('导入'))), _showDefaultBtns[3] !== false && /*#__PURE__*/React.createElement(_Button, {
+    type: "primary",
+    className: "mr2",
+    onClick: toggleModal
+  }, getDefaultBtnText(_showDefaultBtns[3], t('导出schema'))), _extraBtns.map(function (item, idx) {
+    return /*#__PURE__*/React.createElement(_Button, _extends({
+      key: idx.toString(),
+      className: "mr2"
+    }, item), item.text || item.children);
+  })), /*#__PURE__*/React.createElement("div", {
+    className: "dnd-container ".concat(preview ? 'preview' : 'edit')
+  }, /*#__PURE__*/React.createElement("div", {
+    style: {
+      height: preview ? 33 : 0
+    }
+  }), /*#__PURE__*/React.createElement(FR, {
+    preview: preview,
+    displaySchema: displaySchema
+  })), /*#__PURE__*/React.createElement(_Modal, {
+    open: local.showModal,
+    onOk: copySchema,
+    onCancel: toggleModal,
+    okText: t('复制'),
+    cancelText: t('取消')
+  }, /*#__PURE__*/React.createElement("div", {
+    className: "mt3"
+  }, /*#__PURE__*/React.createElement(TextArea, {
+    style: {
+      fontSize: 12
+    },
+    value: displaySchemaString,
+    autoSize: {
+      minRows: 10,
+      maxRows: 30
+    }
+  }))), /*#__PURE__*/React.createElement(_Modal, {
+    open: local.showModal2,
+    okText: t('导入'),
+    cancelText: t('取消'),
+    onOk: importSchema,
+    onCancel: toggleModal2
+  }, /*#__PURE__*/React.createElement("div", {
+    className: "mt3"
+  }, /*#__PURE__*/React.createElement(TextArea, {
+    style: {
+      fontSize: 12
+    },
+    value: local.schemaForImport,
+    placeholder: t('贴入需要导入的schema，模样可点击导出schema参考'),
+    onChange: onTextareaChange,
+    autoSize: {
+      minRows: 10,
+      maxRows: 30
+    }
+  }))));
+};
+
+var _useTranslation = useTranslation(),
+  t = _useTranslation.t;
+// 只需写配置，方便可扩展
+var baseCommonSettings = {
+  type: {
+    title: '类型',
+    type: 'string',
+    hidden: '{{true}}'
+  },
+  widget: {
+    title: '组件',
+    type: 'string',
+    hidden: '{{true}}'
+  },
+  format: {
+    title: '格式',
+    type: 'string',
+    hidden: '{{true}}'
+  }
+};
+var defaultCommonSettings = {
+  $id: {
+    title: 'ID',
+    description: '字段名称/英文',
+    type: 'string',
+    widget: 'idInput',
+    require: true,
+    rules: [{
+      pattern: '^#/.+$',
+      message: 'ID 必填'
+    }]
+  },
+  title: {
+    title: '标题',
+    type: 'string',
+    widget: 'htmlInput'
+  },
+  displayType: {
+    title: '标题展示模式',
+    type: 'string',
+    enum: ['row', 'column'],
+    enumNames: ['同行', '单独一行'],
+    widget: 'radio'
+  },
+  description: {
+    title: '说明',
+    type: 'string'
+  },
+  default: {
+    title: '默认值',
+    type: 'string'
+  },
+  required: {
+    title: '必填',
+    type: 'boolean'
+  },
+  placeholder: {
+    title: '占位符',
+    type: 'string'
+  },
+  bind: {
+    title: 'Bind',
+    type: 'string'
+  },
+  min: {
+    title: '最小值',
+    type: 'number'
+  },
+  max: {
+    title: '最大值',
+    type: 'number'
+  },
+  disabled: {
+    title: '禁用',
+    type: 'boolean'
+  },
+  readOnly: {
+    title: '只读',
+    type: 'boolean'
+  },
+  hidden: {
+    title: '隐藏',
+    type: 'boolean'
+  },
+  readOnlyWidget: {
+    title: '只读组件',
+    type: 'string'
+  },
+  width: {
+    title: '元素宽度',
+    type: 'string',
+    widget: 'percentSlider'
+  },
+  labelWidth: {
+    title: '标签宽度',
+    description: '默认值120',
+    type: 'number',
+    widget: 'slider',
+    max: 400,
+    props: {
+      hideNumber: true
+    }
+  }
+};
+
+// widget 用于指定 schema 右侧配置对应的 setting
+var elements = [{
+  text: '输入框',
+  name: 'input',
+  schema: {
+    title: '输入框',
+    type: 'string'
+  },
+  setting: {
+    props: {
+      title: '选项',
+      type: 'object',
+      labelWidth: 80,
+      properties: {
+        allowClear: {
+          title: '是否带清除按钮',
+          description: '填写内容后才会出现x哦',
+          type: 'boolean'
+        },
+        addonBefore: {
+          title: '前tab',
+          type: 'string'
+        },
+        addonAfter: {
+          title: '后tab',
+          type: 'string'
+        },
+        prefix: {
+          title: '前缀',
+          type: 'string'
+        },
+        suffix: {
+          title: '后缀',
+          type: 'string'
+        }
+      }
+    },
+    minLength: {
+      title: '最短字数',
+      type: 'number'
+    },
+    maxLength: {
+      title: '最长字数',
+      type: 'number'
+    },
+    pattern: {
+      title: '校验正则表达式',
+      type: 'string',
+      props: {
+        placeholder: '填写正则表达式'
+      }
+    }
+  }
+}, {
+  text: '大输入框',
+  name: 'textarea',
+  schema: {
+    title: '编辑框',
+    type: 'string',
+    format: 'textarea'
+  },
+  setting: {
+    props: {
+      title: '选项',
+      type: 'object',
+      labelWidth: 80,
+      properties: {
+        autoSize: {
+          title: '高度自动',
+          type: 'boolean'
+        },
+        rows: {
+          title: '指定高度',
+          type: 'number'
+        }
+      }
+    },
+    minLength: {
+      title: '最短字数',
+      type: 'number'
+    },
+    maxLength: {
+      title: '最长字数',
+      type: 'number'
+    },
+    pattern: {
+      title: '校验正则表达式',
+      type: 'string',
+      props: {
+        placeholder: '填写正则表达式'
+      }
+    }
+  }
+}, {
+  text: '日期选择',
+  name: 'date',
+  schema: {
+    title: '日期选择',
+    type: 'string',
+    format: 'date'
+  },
+  setting: {
+    format: {
+      title: '格式',
+      type: 'string',
+      enum: ['dateTime', 'date', 'time'],
+      enumNames: ['日期时间', '日期', '时间']
+    }
+  }
+}, {
+  text: '时间选择',
+  name: 'time',
+  show: false,
+  schema: {
+    title: '时间选择',
+    type: 'string',
+    format: 'time'
+  },
+  setting: {
+    format: {
+      title: '格式',
+      type: 'string',
+      enum: ['dateTime', 'date', 'time'],
+      enumNames: ['日期时间', '日期', '时间']
+    }
+  }
+}, {
+  text: '数字输入框',
+  name: 'number',
+  schema: {
+    title: '数字输入框',
+    type: 'number'
+  },
+  setting: {
+    default: {
+      title: '默认值',
+      type: 'number'
+    }
+  }
+}, {
+  text: '是否选择',
+  name: 'checkbox',
+  schema: {
+    title: '是否选择',
+    type: 'boolean',
+    widget: 'checkbox'
+  },
+  setting: {
+    default: {
+      title: '是否默认勾选',
+      type: 'boolean'
+    }
+  }
+}, {
+  text: '是否switch',
+  name: 'switch',
+  schema: {
+    title: '是否选择',
+    type: 'boolean',
+    widget: 'switch'
+  },
+  setting: {
+    default: {
+      title: '是否默认开启',
+      type: 'boolean'
+    }
+  }
+}, {
+  text: '下拉单选',
+  name: 'select',
+  schema: {
+    title: '单选',
+    type: 'string',
+    enum: ['a', 'b', 'c'],
+    enumNames: ['早', '中', '晚'],
+    widget: 'select'
+  },
+  setting: {
+    enumList: {
+      title: '选项',
+      type: 'array',
+      widget: 'simpleList',
+      className: 'frg-options-list',
+      items: {
+        type: 'object',
+        properties: {
+          value: {
+            title: '',
+            type: 'string',
+            className: 'frg-options-input',
+            props: {},
+            placeholder: '字段'
+          },
+          label: {
+            title: '',
+            type: 'string',
+            className: 'frg-options-input',
+            props: {},
+            placeholder: '名称'
+          }
+        }
+      },
+      props: {
+        hideMove: true,
+        hideCopy: true
+      }
+    }
+  }
+}, {
+  text: '点击单选',
+  name: 'radio',
+  schema: {
+    title: '单选',
+    type: 'string',
+    enum: ['a', 'b', 'c'],
+    enumNames: ['早', '中', '晚'],
+    widget: 'radio'
+  },
+  setting: {
+    enumList: {
+      title: '选项',
+      type: 'array',
+      widget: 'simpleList',
+      className: 'frg-options-list',
+      items: {
+        type: 'object',
+        properties: {
+          value: {
+            title: '',
+            type: 'string',
+            className: 'frg-options-input',
+            props: {},
+            placeholder: '字段'
+          },
+          label: {
+            title: '',
+            type: 'string',
+            className: 'frg-options-input',
+            props: {},
+            placeholder: '名称'
+          }
+        }
+      },
+      props: {
+        hideMove: true,
+        hideCopy: true
+      }
+    }
+  }
+}, {
+  text: '下拉多选',
+  name: 'multiSelect',
+  schema: {
+    title: '多选',
+    description: '下拉多选',
+    type: 'array',
+    items: {
+      type: 'string'
+    },
+    enum: ['A', 'B', 'C', 'D'],
+    enumNames: ['杭州', '武汉', '湖州', '贵阳'],
+    widget: 'multiSelect'
+  },
+  setting: {
+    default: {
+      title: '默认值',
+      type: 'array',
+      widget: 'jsonInput'
+    },
+    enumList: {
+      title: '选项',
+      type: 'array',
+      widget: 'simpleList',
+      className: 'frg-options-list',
+      items: {
+        type: 'object',
+        properties: {
+          value: {
+            title: '',
+            type: 'string',
+            className: 'frg-options-input',
+            props: {},
+            placeholder: '字段'
+          },
+          label: {
+            title: '',
+            type: 'string',
+            className: 'frg-options-input',
+            props: {},
+            placeholder: '名称'
+          }
+        }
+      },
+      props: {
+        hideMove: true,
+        hideCopy: true
+      }
+    }
+  }
+}, {
+  text: '点击多选',
+  name: 'checkboxes',
+  schema: {
+    title: '多选',
+    type: 'array',
+    widget: 'checkboxes',
+    items: {
+      type: 'string'
+    },
+    enum: ['A', 'B', 'C', 'D'],
+    enumNames: ['杭州', '武汉', '湖州', '贵阳']
+  },
+  setting: {
+    default: {
+      title: '默认值',
+      type: 'array',
+      widget: 'jsonInput'
+    },
+    enumList: {
+      title: '选项',
+      type: 'array',
+      widget: 'simpleList',
+      className: 'frg-options-list',
+      items: {
+        type: 'object',
+        properties: {
+          value: {
+            title: '',
+            type: 'string',
+            className: 'frg-options-input',
+            props: {},
+            placeholder: '字段'
+          },
+          label: {
+            title: '',
+            type: 'string',
+            className: 'frg-options-input',
+            props: {},
+            placeholder: '名称'
+          }
+        }
+      },
+      props: {
+        hideMove: true,
+        hideCopy: true
+      }
+    }
+  }
+}, {
+  text: 'HTML',
+  name: 'html',
+  schema: {
+    title: 'HTML',
+    type: 'string',
+    widget: 'html'
+  },
+  setting: {
+    props: {
+      type: 'object',
+      properties: {
+        value: {
+          title: '展示内容',
+          type: 'string'
+        }
+      }
+    }
+  }
+}];
+var advancedElements = [{
+  text: '日期范围',
+  name: 'dateRange',
+  schema: {
+    title: '日期范围',
+    type: 'range',
+    format: 'dateTime',
+    props: {
+      placeholder: ['开始时间', '结束时间']
+    }
+  },
+  setting: {
+    format: {
+      title: '类型',
+      type: 'string',
+      enum: ['dateTime', 'date'],
+      enumNames: ['日期时间', '日期']
+    }
+  }
+}, {
+  text: '数字（slider）',
+  name: 'slider',
+  schema: {
+    title: '带滑动条',
+    type: 'number',
+    widget: 'slider'
+  },
+  setting: {
+    default: {
+      title: '默认值',
+      type: 'number'
+    }
+  }
+}, {
+  text: '图片展示',
+  name: 'image',
+  schema: {
+    title: '图片展示',
+    type: 'string',
+    format: 'image'
+  },
+  setting: {}
+}, {
+  text: '颜色选择',
+  name: 'color',
+  schema: {
+    title: '颜色选择',
+    type: 'string',
+    format: 'color'
+  },
+  setting: {}
+}];
+var layouts = [{
+  text: '对象',
+  name: 'object',
+  schema: {
+    title: '对象',
+    type: 'object',
+    properties: {}
+  },
+  setting: {
+    theme: {
+      title: '主题',
+      type: 'string',
+      enum: ['collapse', 'collapse:pure', 'collapse:ghost', 'card', 'tile', 'flex'],
+      enumNames: ['默认', '无框', '幽灵', '卡片', '平铺', '弹性'],
+      default: 'collapse',
+      widget: 'radio'
+    },
+    props: {
+      title: '弹性布局',
+      hidden: '{{"flex" !== formData.theme}}',
+      type: 'object',
+      theme: 'tile',
+      properties: {
+        style: {
+          title: '布局样式',
+          type: 'object',
+          theme: 'flex',
+          props: {
+            style: {
+              flexDirection: 'column'
+            }
+          },
+          properties: {
+            height: {
+              title: '高度',
+              description: 'height',
+              type: 'string',
+              widget: 'input'
+            },
+            flexDirection: {
+              title: '布局方向',
+              description: 'flex-direction',
+              type: 'string',
+              enum: ['row', 'row-reverse', 'column', 'column-reverse'],
+              enumNames: ['横向', '横向反转', '纵向', '纵向反转'],
+              widget: 'select'
+            },
+            flexWrap: {
+              title: '换行方式',
+              description: 'flex-wrap',
+              type: 'string',
+              enum: ['wrap', 'nowrap', 'wrap-reverse'],
+              enumNames: ['换行', '不换行', '反向换行'],
+              widget: 'select'
+            },
+            justifyContent: {
+              title: '对齐方式',
+              description: 'justify-content',
+              type: 'string',
+              enum: ['flex-start', 'flex-end', 'center', 'space-between', 'space-around'],
+              enumNames: ['起点对齐', '终点对齐', '居中对齐', '两端对齐', '相同间距'],
+              widget: 'select'
+            },
+            alignItems: {
+              title: '轴对齐方式',
+              description: 'align-items',
+              type: 'string',
+              enum: ['flex-start', 'flex-end', 'center', 'baseline', 'stretch'],
+              enumNames: ['起点对齐', '终点对齐', '居中对齐', '基线对齐', '拉伸铺满'],
+              widget: 'select'
+            },
+            alignContent: {
+              title: '多轴线对齐',
+              description: 'align-content',
+              type: 'string',
+              enum: ['flex-start', 'flex-end', 'center', 'space-between', 'space-around', 'stretch'],
+              enumNames: ['起点对齐', '终点对齐', '居中对齐', '两端对齐', '相同间距', '拉伸铺满'],
+              widget: 'select'
+            }
+          }
+        }
+      }
+    },
+    style: {
+      title: '元素样式',
+      type: 'object',
+      properties: {
+        background: {
+          title: '背景',
+          description: 'background',
+          type: 'string',
+          widget: 'color'
+        },
+        margin: {
+          title: '外边距',
+          description: 'margin',
+          type: 'string',
+          widget: 'input'
+        },
+        padding: {
+          title: '内边距',
+          description: 'padding',
+          type: 'string',
+          widget: 'input'
+        },
+        borderWidth: {
+          title: '边框宽',
+          description: 'border-width',
+          type: 'string',
+          widget: 'input'
+        },
+        borderStyle: {
+          title: '边框样式',
+          description: 'border-style',
+          type: 'string',
+          widget: 'input'
+        },
+        borderColor: {
+          title: '边框颜色',
+          description: 'border-color',
+          type: 'string',
+          widget: 'color'
+        },
+        borderRadius: {
+          title: '圆角',
+          description: 'border-radius',
+          type: 'string',
+          widget: 'input'
+        },
+        flex: {
+          title: '弹性伸缩',
+          description: 'flex',
+          type: 'string',
+          widget: 'input'
+        },
+        order: {
+          title: '排列顺序',
+          description: 'order',
+          type: 'string',
+          widget: 'input'
+        },
+        alignSelf: {
+          title: '自身对齐',
+          description: 'align-self',
+          type: 'string',
+          widget: 'input'
+        }
+      }
+    }
+  }
+}, {
+  text: '常规列表',
+  name: 'list',
+  schema: {
+    title: '数组',
+    type: 'array',
+    items: {
+      type: 'object',
+      properties: {}
+    }
+  },
+  setting: {
+    default: {
+      title: '默认值',
+      type: 'array',
+      widget: 'jsonInput'
+    },
+    items: {
+      type: 'object',
+      hidden: '{{true}}'
+    },
+    min: {
+      title: '最小长度',
+      type: 'number'
+    },
+    max: {
+      title: '最大长度',
+      type: 'number'
+    },
+    props: {
+      title: '选项',
+      type: 'object',
+      properties: {
+        // foldable: {
+        //   title: '是否可折叠',
+        //   type: 'boolean',
+        // },
+        hideDelete: {
+          title: '隐藏删除按钮',
+          type: 'string'
+        },
+        hideAdd: {
+          title: '隐藏新增/复制按钮',
+          type: 'string'
+        }
+      }
+    }
+  }
+}, {
+  text: '简单列表',
+  name: 'simpleList',
+  schema: {
+    title: '数组',
+    type: 'array',
+    widget: 'simpleList',
+    items: {
+      type: 'object',
+      properties: {}
+    }
+  },
+  setting: {
+    default: {
+      title: '默认值',
+      type: 'array',
+      widget: 'jsonInput'
+    },
+    items: {
+      type: 'object',
+      hidden: '{{true}}'
+    },
+    min: {
+      title: '最小长度',
+      type: 'number'
+    },
+    max: {
+      title: '最大长度',
+      type: 'number'
+    },
+    props: {
+      title: '选项',
+      type: 'object',
+      properties: {
+        // foldable: {
+        //   title: '是否可折叠',
+        //   type: 'boolean',
+        // },
+        hideTitle: {
+          title: '隐藏标题',
+          type: 'boolean'
+        },
+        hideDelete: {
+          title: '隐藏删除按钮',
+          type: 'string'
+        },
+        hideAdd: {
+          title: '隐藏新增/复制按钮',
+          type: 'string'
+        }
+      }
+    }
+  }
+}, {
+  text: '表格列表',
+  name: 'list2',
+  schema: {
+    title: '数组',
+    type: 'array',
+    widget: 'list2',
+    items: {
+      type: 'object',
+      properties: {}
+    }
+  },
+  setting: {
+    default: {
+      title: '默认值',
+      type: 'array',
+      widget: 'jsonInput'
+    },
+    items: {
+      type: 'object',
+      hidden: '{{true}}'
+    },
+    min: {
+      title: '最小长度',
+      type: 'number'
+    },
+    max: {
+      title: '最大长度',
+      type: 'number'
+    },
+    props: {
+      title: '选项',
+      type: 'object',
+      properties: {
+        // foldable: {
+        //   title: '是否可折叠',
+        //   type: 'boolean',
+        // },
+        hideDelete: {
+          title: '隐藏删除按钮',
+          type: 'string'
+        },
+        hideAdd: {
+          title: '隐藏新增/复制按钮',
+          type: 'string'
+        },
+        hideCopy: {
+          title: '隐藏复制按钮',
+          type: 'string'
+        },
+        hideMove: {
+          title: '隐藏上下移动按钮',
+          type: 'string'
+        }
+      }
+    }
+  }
+}, {
+  text: '复杂表格列表',
+  name: 'drawerList',
+  schema: {
+    title: '数组',
+    type: 'array',
+    widget: 'drawerList',
+    items: {
+      type: 'object',
+      properties: {}
+    }
+  },
+  setting: {
+    default: {
+      title: '默认值',
+      type: 'array',
+      widget: 'jsonInput'
+    },
+    items: {
+      type: 'object',
+      hidden: '{{true}}'
+    },
+    min: {
+      title: '最小长度',
+      type: 'number'
+    },
+    max: {
+      title: '最大长度',
+      type: 'number'
+    },
+    props: {
+      title: '选项',
+      type: 'object',
+      properties: {
+        // foldable: {
+        //   title: '是否可折叠',
+        //   type: 'boolean',
+        // },
+        hideDelete: {
+          title: '隐藏删除按钮',
+          type: 'string'
+        },
+        hideAdd: {
+          title: '隐藏新增/复制按钮',
+          type: 'string'
+        }
+      }
+    }
+  }
+}];
+var defaultSettings = [{
+  title: '基础组件',
+  widgets: elements,
+  show: true,
+  useCommon: true // TODO: 是否将common
+}, {
+  title: '高级组件',
+  widgets: advancedElements
+}
+// {
+//   title: '布局组件',
+//   widgets: layouts,
+// },
+// {
+//   title: '模板',
+//   widgets: saves,
+// },
+];
+var defaultGlobalSettings = {
+  type: 'object',
+  properties: {
+    column: {
+      title: t('整体布局'),
+      type: 'number',
+      enum: [1, 2, 3],
+      enumNames: [t('一行一列'), t('一行二列'), t('一行三列')],
+      props: {
+        placeholder: t('默认一行一列')
+      }
+    },
+    labelWidth: {
+      title: t('标签宽度'),
+      type: 'number',
+      widget: 'slider',
+      max: 300,
+      default: 120,
+      props: {
+        hideNumber: true
+      }
+    },
+    displayType: {
+      title: t('标签展示模式'),
+      type: 'string',
+      default: 'row',
+      enum: ['row', 'column'],
+      enumNames: [t('同行'), t('单独一行')],
+      widget: 'radio'
+    }
+  }
+};
+
+function GlobalSettings(_ref) {
+  var widgets = _ref.widgets;
+  var form = useForm();
+  var _useState = useState(false),
+    _useState2 = _slicedToArray(_useState, 2),
+    innerUpdate = _useState2[0],
+    setInnerUpdate = _useState2[1];
+  var _useStore = useStore(),
+    globalWidgets = _useStore.widgets,
+    frProps = _useStore.frProps,
+    _useStore$userProps = _useStore.userProps,
+    userProps = _useStore$userProps === void 0 ? {} : _useStore$userProps,
+    mapping = _useStore.mapping;
+  var setGlobal = useGlobal();
+  var globalSettings = userProps.globalSettings || defaultGlobalSettings;
+  var onDataChange = function onDataChange(value) {
+    setInnerUpdate(!!Object.keys(value).length);
+    setGlobal({
+      frProps: value
+    });
+  };
+  useEffect(function () {
+    if (innerUpdate) {
+      setInnerUpdate(false);
+    } else {
+      form.setValues(frProps);
+    }
+  }, [frProps]);
+  useEffect(function () {
+    setGlobal({
+      settingsForm: form
+    });
+  }, []);
+  return /*#__PURE__*/React.createElement("div", {
+    style: {
+      paddingRight: 24
+    }
+  }, /*#__PURE__*/React.createElement(FormRender, {
+    form: form,
+    schema: globalSettings,
+    watch: {
+      '#': function _(v) {
+        return onDataChange(v);
+      }
+    },
+    widgets: _objectSpread2(_objectSpread2({}, globalWidgets), widgets),
+    mapping: mapping
+  }));
+}
+
+var css_248z$1 = ".fr-generator-container .right-layout {\n  flex-shrink: 0;\n  width: 8rem;\n  padding-top: 24px;\n  display: flex;\n  flex-direction: column;\n  height: 100%;\n}\n.fr-generator-container .right-layout ::-webkit-scrollbar {\n  width: 5px;\n  background-color: #0002;\n}\n.fr-generator-container .right-layout ::-webkit-scrollbar-thumb {\n  background: #0004;\n  border-radius: 5px;\n}\n@media screen and (min-width: 60em) {\n  .fr-generator-container .right-layout {\n    width: 16rem;\n  }\n}\n";
+styleInject(css_248z$1);
+
+function HtmlInput(_ref) {
+  var value = _ref.value,
+    disabled = _ref.disabled,
+    readonly = _ref.readonly,
+    options = _ref.options,
+    onChange = _ref.onChange;
+  var handleChange = function handleChange(e) {
+    var newVal = e.target.value;
+    onChange(newVal && newVal.replace(/on(.*?=)/g, 'no$1'));
+  };
+  return /*#__PURE__*/React.createElement(_Input, _extends({
+    disabled: disabled || readonly
+  }, options, {
+    onChange: handleChange,
+    value: value && value.replace(/no(.*?=)/g, 'on$1')
+  }));
+}
+
+function IdInput(_ref) {
+  var onChange = _ref.onChange,
+    value = _ref.value,
+    disabled = _ref.disabled,
+    readonly = _ref.readonly,
+    options = _ref.options;
+  var handleChange = function handleChange(e) {
+    try {
+      var newId = changeKeyFromUniqueId(value, e.target.value);
+      onChange(newId);
+    } catch (error) {}
+  };
+  return /*#__PURE__*/React.createElement(_Input, _extends({
+    disabled: disabled || readonly
+  }, options, {
+    onChange: handleChange,
+    value: getKeyFromUniqueId(value)
+  }));
+}
+
+function jsonInput(_ref) {
+  var onChange = _ref.onChange,
+    value = _ref.value,
+    disabled = _ref.disabled,
+    readonly = _ref.readonly,
+    options = _ref.options;
+  var handleChange = function handleChange(e) {
+    try {
+      onChange(JSON.parse(e.target.value));
+    } catch (_unused) {
+      onChange(e.target.value);
+    }
+  };
+  var inputValue = typeof value === 'string' ? value : JSON.stringify(value);
+  return /*#__PURE__*/React.createElement(_Input, _extends({
+    disabled: disabled || readonly
+  }, options, {
+    onChange: handleChange,
+    value: inputValue
+  }));
+}
+
+var PercentSlider = function PercentSlider(p) {
+  var style = p.invalid ? {
+    borderColor: '#f5222d'
+  } : {};
+  var _p$schema = p.schema,
+    max = _p$schema.max,
+    min = _p$schema.min,
+    step = _p$schema.step;
+  var setting = {};
+  if (max || max === 0) {
+    setting = {
+      max: max
+    };
+  }
+  if (min || min === 0) {
+    setting = _objectSpread2(_objectSpread2({}, setting), {}, {
+      min: min
+    });
+  }
+  if (step) {
+    setting = _objectSpread2(_objectSpread2({}, setting), {}, {
+      step: step
+    });
+  }
+  var hideNumber = false;
+  if (p.options && p.options.hideNumber) {
+    hideNumber = true;
+  }
+  var isPercent = function isPercent(string) {
+    return typeof string === 'string' && string.endsWith('%');
+  };
+  var numberValue = 100;
+  if (isPercent(p.value)) {
+    try {
+      numberValue = Number(p.value.split('%')[0]);
+      if (Number.isNaN(numberValue)) numberValue = 100;
+    } catch (error) {}
+  }
+  var handleChange = function handleChange(newNumber) {
+    var a = newNumber + '%';
+    p.onChange(a);
+  };
+  var renderNumber = p.readonly ? /*#__PURE__*/React.createElement("span", {
+    style: {
+      width: '80px'
+    }
+  }, p.value === ( '') ? '-' : p.value + '%') : /*#__PURE__*/React.createElement(_InputNumber, _extends({}, p.options, setting, {
+    style: _objectSpread2({
+      width: '80px'
+    }, style),
+    value: numberValue,
+    disabled: p.disabled,
+    onChange: handleChange,
+    formatter: function formatter(value) {
+      return "".concat(value, "%");
+    },
+    parser: function parser(value) {
+      return value.replace('%', '');
+    }
+  }));
+  return /*#__PURE__*/React.createElement("div", {
+    className: "fr-slider"
+  }, /*#__PURE__*/React.createElement(_Slider, _extends({
+    style: {
+      flexGrow: 1,
+      marginRight: hideNumber ? 0 : 12
+    }
+  }, setting, {
+    onChange: handleChange,
+    max: 100,
+    tooltip: {
+      formatter: function formatter(v) {
+        return v + '%';
+      }
+    },
+    value: numberValue || 100,
+    disabled: p.disabled || p.readonly
+  })), hideNumber ? null : renderNumber);
+};
+
+var frgWidgets = /*#__PURE__*/Object.freeze({
+  __proto__: null,
+  idInput: IdInput,
+  htmlInput: HtmlInput,
+  jsonInput: jsonInput,
+  percentSlider: PercentSlider
+});
+
+function ItemSettings(_ref) {
+  var widgets = _ref.widgets;
+  var setGlobal = useGlobal();
+  var form = useForm();
+  var isReady = useRef(false);
+  var _useStore = useStore(),
+    selected = _useStore.selected,
+    flatten = _useStore.flatten,
+    onItemChange = _useStore.onItemChange,
+    onItemErrorChange = _useStore.onItemErrorChange,
+    _useStore$userProps = _useStore.userProps,
+    userProps = _useStore$userProps === void 0 ? {} : _useStore$userProps,
+    globalWidgets = _useStore.widgets,
+    globalMapping = _useStore.mapping;
+  var settings = userProps.settings,
+    commonSettings = userProps.commonSettings,
+    hideId = userProps.hideId,
+    validation = userProps.validation,
+    transformer = userProps.transformer;
+  var _useState = useState({}),
+    _useState2 = _slicedToArray(_useState, 2),
+    settingSchema = _useState2[0],
+    setSettingSchema = _useState2[1];
+  var _widgets = _objectSpread2(_objectSpread2({}, globalWidgets), frgWidgets);
+  var getWidgetList = function getWidgetList(settings, commonSettings) {
+    return settings.reduce(function (widgetList, setting) {
+      if (!Array.isArray(setting.widgets)) return widgetList;
+      var basicWidgets = setting.widgets.map(function (item) {
+        var baseItemSettings = {};
+        if (item.schema.type === 'array' && item.schema.items) {
+          baseItemSettings.items = {
+            type: 'object',
+            hidden: '{{true}}'
+          };
+        }
+        return _objectSpread2(_objectSpread2({}, item), {}, {
+          widget: item.widget || item.schema.widget || getWidgetName(item.schema, globalMapping),
+          setting: mergeInOrder(baseCommonSettings, commonSettings, baseItemSettings, item.setting)
+        });
+      });
+      return [].concat(_toConsumableArray(widgetList), _toConsumableArray(basicWidgets));
+    }, []);
+  };
+  var onDataChange = function onDataChange() {
+    var value = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
+    try {
+      if (selected === '#' || !isReady.current || !value.$id) return;
+      var item = _objectSpread2(_objectSpread2({}, flatten[selected]), {}, {
+        schema: transformer.fromSetting(value)
+      });
+      onItemChange(selected, item, 'schema');
+    } catch (error) {
+      console.error(error, 'catch');
+    }
+  };
+  useEffect(function () {
+    // setting 该显示什么的计算，要把选中组件的 schema 和它对应的 widgets 的整体 schema 进行拼接
+    try {
+      isReady.current = false;
+      var item = flatten[selected];
+      if (!item || selected === '#') return;
+      // 算 widgetList
+      var _settings = Array.isArray(settings) ? [].concat(_toConsumableArray(settings), [{
+        widgets: [].concat(_toConsumableArray(elements), _toConsumableArray(advancedElements), _toConsumableArray(layouts))
+      }]) // TODO: 不是最优解
+      : defaultSettings;
+      var _commonSettings = isObject(commonSettings) ? commonSettings : defaultCommonSettings;
+      var widgetList = getWidgetList(_settings, _commonSettings);
+      var widgetName = getWidgetName(item.schema, globalMapping);
+      var element = widgetList.find(function (e) {
+        return e.widget === widgetName;
+      }) || {}; // 有可能会没有找到
+      var properties = _objectSpread2({}, element.setting);
+      if (hideId) delete properties.$id;
+      setTimeout(function () {
+        setSettingSchema({
+          type: 'object',
+          displayType: 'column',
+          properties: properties
+        });
+        var value = transformer.toSetting(item.schema);
+        form.setValues(value);
+        onDataChange(form.getValues());
+        validation && form.submit();
+        isReady.current = true;
+      }, 0);
+    } catch (error) {
+      isReady.current = true;
+      console.error(error);
+    }
+  }, [selected]);
+  useEffect(function () {
+    validation && onItemErrorChange(form === null || form === void 0 ? void 0 : form.errorFields);
+  }, [validation, form === null || form === void 0 ? void 0 : form.errorFields]);
+  useEffect(function () {
+    setGlobal({
+      settingsForm: form
+    });
+  }, []);
+  return /*#__PURE__*/React.createElement("div", {
+    style: {
+      paddingRight: 24
+    }
+  }, /*#__PURE__*/React.createElement(FormRender, {
+    form: form,
+    schema: settingSchema,
+    widgets: _objectSpread2(_objectSpread2({}, _widgets), widgets),
+    mapping: globalMapping,
+    watch: {
+      '#': function _(v) {
+        return setTimeout(function () {
+          return onDataChange(v);
+        }, 0);
+      }
+    }
+  }));
+}
+
+var TabPane = _Tabs.TabPane;
+function Settings(_ref) {
+  var widgets = _ref.widgets;
+  var _useTranslation = useTranslation(),
+    t = _useTranslation.t;
+  var _useSet = useSet({
+      tabsKey: 'globalSettings',
+      showRight: true,
+      showItemSettings: false
+    }),
+    _useSet2 = _slicedToArray(_useSet, 2),
+    state = _useSet2[0],
+    setState = _useSet2[1];
+  var _useStore = useStore(),
+    selected = _useStore.selected,
+    _useStore$userProps = _useStore.userProps,
+    userProps = _useStore$userProps === void 0 ? {} : _useStore$userProps;
+  var tabsKey = state.tabsKey,
+    showRight = state.showRight,
+    showItemSettings = state.showItemSettings;
+  var toggleRight = function toggleRight() {
+    return setState({
+      showRight: !showRight
+    });
+  };
+  var ToggleIcon = function ToggleIcon() {
+    return /*#__PURE__*/React.createElement("div", {
+      className: "absolute top-0 left-0 pointer",
+      style: {
+        height: 30,
+        width: 30,
+        padding: '8px 0 0 8px'
+      },
+      onClick: toggleRight
+    }, /*#__PURE__*/React.createElement(_RightOutlined, {
+      style: {
+        color: '#666'
+      }
+    }));
+  };
+  var HideRightArrow = function HideRightArrow() {
+    return /*#__PURE__*/React.createElement("div", {
+      className: "absolute right-0 top-0 h2 flex-center",
+      style: {
+        width: 40,
+        transform: 'rotate(180deg)'
+      }
+    }, /*#__PURE__*/React.createElement(ToggleIcon, null));
+  };
+
+  // 如果没有选中任何item，或者是选中了根节点，object、list的内部，显示placeholder
+  useEffect(function () {
+    if (selected && selected[0] === '0' || selected === '#' || !selected) {
+      setState({
+        tabsKey: 'globalSettings',
+        showItemSettings: false
+      });
+    } else {
+      setState({
+        tabsKey: 'itemSettings',
+        showItemSettings: true
+      });
+    }
+  }, [selected]);
+  var globalSettingHide = userProps.globalSettings === null || userProps.globalSettings && !Object.keys(userProps.globalSettings).length;
+  return showRight ? /*#__PURE__*/React.createElement("div", {
+    className: "right-layout relative pl2"
+  }, /*#__PURE__*/React.createElement(ToggleIcon, null), /*#__PURE__*/React.createElement(_Tabs, {
+    activeKey: tabsKey,
+    onChange: function onChange(key) {
+      return setState({
+        tabsKey: key
+      });
+    }
+  }, showItemSettings && /*#__PURE__*/React.createElement(TabPane, {
+    tab: t("组件配置"),
+    key: "itemSettings"
+  }, /*#__PURE__*/React.createElement(ItemSettings, {
+    widgets: widgets
+  })), !globalSettingHide && /*#__PURE__*/React.createElement(TabPane, {
+    tab: t("表单配置"),
+    key: "globalSettings"
+  }, /*#__PURE__*/React.createElement(GlobalSettings, {
+    widgets: widgets
+  })))) : /*#__PURE__*/React.createElement(HideRightArrow, null);
+}
+
+var css_248z$2 = ".left-item {\n  width: 7rem;\n  height: 2.2rem;\n  margin: 4px;\n  cursor: pointer;\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  color: #333;\n  background-color: #f5f7fa;\n}\n.left-item:hover {\n  border: 1px dashed #ddd;\n  color: #409eff;\n  border: 1px dashed #409eff;\n}\n";
+styleInject(css_248z$2);
+
+var Element = function Element(_ref) {
+  var text = _ref.text,
+    name = _ref.name,
+    schema = _ref.schema,
+    icon = _ref.icon,
+    fixedName = _ref.fixedName;
+  var setGlobal = useGlobal();
+  var _useStore = useStore(),
+    selected = _useStore.selected,
+    flatten = _useStore.flatten,
+    errorFields = _useStore.errorFields,
+    userProps = _useStore.userProps,
+    onFlattenChange = _useStore.onFlattenChange,
+    elementRender = _useStore.elementRender;
+  var getId = userProps.getId;
+  var _useDrag = useDrag({
+      type: 'box',
+      item: {
+        dragItem: {
+          parent: '#',
+          schema: schema,
+          children: []
+        },
+        $id: fixedName ? "#/".concat(name) : "#/".concat(getId(name))
+      },
+      collect: function collect(monitor) {
+        return {
+          isDragging: monitor.isDragging()
+        };
+      }
+    }),
+    _useDrag2 = _slicedToArray(_useDrag, 2),
+    isDragging = _useDrag2[0].isDragging,
+    dragRef = _useDrag2[1];
+  var handleElementClick = /*#__PURE__*/function () {
+    var _ref2 = _asyncToGenerator(/*#__PURE__*/_regenerator().m(function _callee() {
+      var _addItem, newId, newFlatten;
+      return _regenerator().w(function (_context) {
+        while (1) switch (_context.n) {
+          case 0:
+            if (!(errorFields === null || errorFields === void 0 ? void 0 : errorFields.length)) {
+              _context.n = 1;
+              break;
+            }
+            return _context.a(2);
+          case 1:
+            if (!(selected && !flatten[selected])) {
+              _context.n = 2;
+              break;
+            }
+            setGlobal({
+              selected: '#'
+            });
+            return _context.a(2);
+          case 2:
+            _addItem = addItem({
+              selected: selected,
+              name: name,
+              schema: schema,
+              flatten: flatten,
+              fixedName: fixedName,
+              getId: getId
+            }), newId = _addItem.newId, newFlatten = _addItem.newFlatten;
+            onFlattenChange(newFlatten);
+            setGlobal({
+              selected: newId
+            });
+          case 3:
+            return _context.a(2);
+        }
+      }, _callee);
+    }));
+    return function handleElementClick() {
+      return _ref2.apply(this, arguments);
+    };
+  }();
+  var widgetProps = {
+    text: text,
+    icon: icon,
+    onClick: handleElementClick
+  };
+  var originNode = /*#__PURE__*/React.createElement(WidgetUI, widgetProps);
+  return /*#__PURE__*/React.createElement("div", {
+    ref: dragRef
+  }, elementRender ? elementRender(schema, widgetProps, originNode) : originNode);
+};
+
+// 目前没有用icon，但是可以补上
+var WidgetUI = function WidgetUI(_ref3) {
+  var onClick = _ref3.onClick,
+    text = _ref3.text,
+    icon = _ref3.icon;
+  var _useTranslation = useTranslation(["components"]),
+    t = _useTranslation.t;
+  return /*#__PURE__*/React.createElement("li", {
+    className: "left-item",
+    onClick: onClick
+  }, icon, t(text));
+};
+
+var css_248z$3 = ".left-layout {\n  flex-shrink: 0;\n  padding: 16px 0 0 8px;\n  overflow-y: auto;\n  height: 100%;\n}\n.left-layout::-webkit-scrollbar {\n  width: 5px;\n  background-color: #0002;\n}\n.left-layout::-webkit-scrollbar-thumb {\n  background: #0004;\n  border-radius: 5px;\n}\n.left-layout ul {\n  display: flex;\n  flex-wrap: wrap;\n  align-content: flex-start;\n}\n";
+styleInject(css_248z$3);
+
+var Sidebar = function Sidebar(props) {
+  var _useTranslation = useTranslation(),
+    t = _useTranslation.t;
+  var _useStore = useStore(),
+    _useStore$userProps = _useStore.userProps,
+    userProps = _useStore$userProps === void 0 ? {} : _useStore$userProps;
+  var settings = userProps.settings;
+  var _settings = Array.isArray(settings) ? settings : defaultSettings;
+  return /*#__PURE__*/React.createElement("div", {
+    className: "left-layout w5-l w4"
+  }, Array.isArray(_settings) ? _settings.map(function (item, idx) {
+    if (item && item.show === false) {
+      return null;
+    }
+    return /*#__PURE__*/React.createElement("div", {
+      key: idx
+    }, /*#__PURE__*/React.createElement("p", {
+      className: "f6 b"
+    }, t(item.title, {
+      ns: 'components'
+    })), /*#__PURE__*/React.createElement("ul", {
+      className: "pl0"
+    }, Array.isArray(item.widgets) ? item.widgets.filter(function (item) {
+      return item.show !== false;
+    }).map(function (widget, idx) {
+      return /*#__PURE__*/React.createElement(Element, _extends({
+        key: idx.toString()
+      }, props, widget));
+    }) : /*#__PURE__*/React.createElement("div", null, t('此处配置有误'))));
+  }) : /*#__PURE__*/React.createElement("div", null, t('配置错误：Setting不是数组')));
+};
+
+// Setting Schema => FR Schema
+var transformFrom = function transformFrom(schema) {
+  var isObj = schema.type === 'object' && schema.properties;
+  var isList = schema.type === 'array' && schema.items && schema.items.properties;
+  var hasChildren = isObj || isList;
+  if (!hasChildren) {
+    if (Array.isArray(schema.enumList)) {
+      schema.enum = schema.enumList.filter(function (item) {
+        return item.value;
+      }).map(function (item) {
+        return item.value;
+      });
+      schema.enumNames = schema.enumList.filter(function (item) {
+        return item.value;
+      }).map(function (item) {
+        return item.label || item.value;
+      });
+    }
+    delete schema.enumList;
+  } else {
+    var childrenList = getChildren2(schema);
+    childrenList.map(function (item) {
+      if (isObj) {
+        schema.properties[item.name] = transformTo(_objectSpread2({}, item.schema));
+      }
+      if (isList) {
+        schema.items.properties[item.name] = transformTo(_objectSpread2({}, item.schema));
+      }
+    });
+  }
+  return schema;
+};
+var fromSetting = function fromSetting(schema) {
+  return transformFrom(_objectSpread2({}, schema));
+};
+
+// FR Schema => Setting Schema
+var transformTo = function transformTo(schema) {
+  var isObj = schema.type === 'object' && schema.properties;
+  var isList = schema.type === 'array' && schema.items && schema.items.properties;
+  var hasChildren = isObj || isList;
+  if (!hasChildren) {
+    if (Array.isArray(schema.enum) && Array.isArray(schema.enumNames)) {
+      var list = schema.enum.map(function (item, idx) {
+        return {
+          value: item,
+          label: schema.enumNames[idx]
+        };
+      });
+      schema.enumList = list;
+    }
+  } else {
+    var childrenList = getChildren2(schema);
+    childrenList.map(function (item) {
+      if (isObj) {
+        schema.properties[item.name] = transformFrom(_objectSpread2({}, item.schema));
+      }
+      if (isList) {
+        schema.items.properties[item.name] = transformFrom(_objectSpread2({}, item.schema));
+      }
+    });
+  }
+  return schema;
+};
+var toSetting = function toSetting(schema) {
+  return transformTo(_objectSpread2({}, schema));
+};
+
+var nanoid = customAlphabet('1234567890abcdef');
+
+// Generate an internal UID to make the regexp pattern harder to guess.
+var UID = nanoid(32);
+var PLACE_HOLDER_REGEXP = new RegExp('(\\\\)?"@__(F|R|D|M|S|A|U|I|B|L)-' + UID + '-(\\d+)__@"', 'g');
+var IS_NATIVE_CODE_REGEXP = /\{\s*\[native code\]\s*\}/g;
+var IS_PURE_FUNCTION = /function.*?\(/;
+var IS_ARROW_FUNCTION = /.*?=>.*?/;
+var UNSAFE_CHARS_REGEXP = /[<>\/\u2028\u2029]/g;
+var RESERVED_SYMBOLS = ['*', 'async'];
+
+// Mapping of unsafe HTML and invalid JavaScript line terminator chars to their
+// Unicode char counterparts which are safe to use in JavaScript strings.
+var ESCAPED_CHARS = {
+  '<': "\\u003C",
+  '>': "\\u003E",
+  '/': "\\u002F",
+  "\u2028": "\\u2028",
+  "\u2029": "\\u2029"
+};
+function escapeUnsafeChars(unsafeChar) {
+  return ESCAPED_CHARS[unsafeChar];
+}
+function deleteFunctions(obj) {
+  var functionKeys = [];
+  for (var key in obj) {
+    if (typeof obj[key] === 'function') {
+      functionKeys.push(key);
+    }
+  }
+  for (var i = 0; i < functionKeys.length; i++) {
+    delete obj[functionKeys[i]];
+  }
+}
+function deleteUndefined(obj) {
+  var undefinedKeys = [];
+  for (var key in obj) {
+    if (typeof obj[key] === 'undefined') {
+      undefinedKeys.push(key);
+    }
+  }
+  for (var i = 0; i < undefinedKeys.length; i++) {
+    delete obj[undefinedKeys[i]];
+  }
+}
+function serializeUtil(obj, options) {
+  options || (options = {});
+
+  // Backwards-compatibility for `space` as the second argument.
+  if (typeof options === 'number' || typeof options === 'string') {
+    options = {
+      space: options
+    };
+  }
+  var functions = [];
+  var regexps = [];
+  var dates = [];
+  var maps = [];
+  var sets = [];
+  var arrays = [];
+  var undefs = [];
+  var infinities = [];
+  var bigInts = [];
+  var urls = [];
+
+  // Returns placeholders for functions and regexps (identified by index)
+  // which are later replaced by their string representation.
+  function replacer(key, value) {
+    // For nested function
+    if (options.ignoreFunction) {
+      deleteFunctions(value);
+    }
+    if (options.ignoreUndefined) {
+      deleteUndefined(value);
+    }
+    if (!value && value !== undefined) {
+      return value;
+    }
+
+    // If the value is an object w/ a toJSON method, toJSON is called before
+    // the replacer runs, so we use this[key] to get the non-toJSONed value.
+    var origValue = this[key];
+    var type = _typeof(origValue);
+    if (type === 'object') {
+      if (origValue instanceof RegExp) {
+        return '@__R-' + UID + '-' + (regexps.push(origValue) - 1) + '__@';
+      }
+      if (origValue instanceof Date) {
+        return '@__D-' + UID + '-' + (dates.push(origValue) - 1) + '__@';
+      }
+      if (origValue instanceof Map) {
+        return '@__M-' + UID + '-' + (maps.push(origValue) - 1) + '__@';
+      }
+      if (origValue instanceof Set) {
+        return '@__S-' + UID + '-' + (sets.push(origValue) - 1) + '__@';
+      }
+      if (origValue instanceof Array) {
+        var isSparse = origValue.filter(function () {
+          return true;
+        }).length !== origValue.length;
+        if (isSparse) {
+          return '@__A-' + UID + '-' + (arrays.push(origValue) - 1) + '__@';
+        }
+      }
+      if (origValue instanceof URL) {
+        return '@__L-' + UID + '-' + (urls.push(origValue) - 1) + '__@';
+      }
+    }
+    if (type === 'function') {
+      return '@__F-' + UID + '-' + (functions.push(origValue) - 1) + '__@';
+    }
+    if (type === 'undefined') {
+      return '@__U-' + UID + '-' + (undefs.push(origValue) - 1) + '__@';
+    }
+    if (type === 'number' && !isNaN(origValue) && !isFinite(origValue)) {
+      return '@__I-' + UID + '-' + (infinities.push(origValue) - 1) + '__@';
+    }
+    if (type === 'bigint') {
+      return '@__B-' + UID + '-' + (bigInts.push(origValue) - 1) + '__@';
+    }
+    return value;
+  }
+  function serializeFunc(fn) {
+    var serializedFn = fn.toString();
+    if (IS_NATIVE_CODE_REGEXP.test(serializedFn)) {
+      throw new TypeError('Serializing native function: ' + fn.name);
+    }
+
+    // pure functions, example: {key: function() {}}
+    if (IS_PURE_FUNCTION.test(serializedFn)) {
+      return serializedFn;
+    }
+
+    // arrow functions, example: arg1 => arg1+5
+    if (IS_ARROW_FUNCTION.test(serializedFn)) {
+      return serializedFn;
+    }
+    var argsStartsAt = serializedFn.indexOf('(');
+    var def = serializedFn.substr(0, argsStartsAt).trim().split(' ').filter(function (val) {
+      return val.length > 0;
+    });
+    var nonReservedSymbols = def.filter(function (val) {
+      return RESERVED_SYMBOLS.indexOf(val) === -1;
+    });
+
+    // enhanced literal objects, example: {key() {}}
+    if (nonReservedSymbols.length > 0) {
+      return (def.indexOf('async') > -1 ? 'async ' : '') + 'function' + (def.join('').indexOf('*') > -1 ? '*' : '') + serializedFn.substr(argsStartsAt);
+    }
+
+    // arrow functions
+    return serializedFn;
+  }
+
+  // Check if the parameter is function
+  if (options.ignoreFunction && typeof obj === 'function') {
+    obj = undefined;
+  }
+  // Protects against `JSON.stringify()` returning `undefined`, by serializing
+  // to the literal string: "undefined".
+  if (obj === undefined) {
+    return String(obj);
+  }
+  var str;
+
+  // Creates a JSON string representation of the value.
+  // NOTE: Node 0.12 goes into slow mode with extra JSON.stringify() args.
+  if (options.isJSON && !options.space) {
+    str = JSON.stringify(obj);
+  } else {
+    str = JSON.stringify(obj, options.isJSON ? null : replacer, options.space);
+  }
+
+  // Protects against `JSON.stringify()` returning `undefined`, by serializing
+  // to the literal string: "undefined".
+  if (typeof str !== 'string') {
+    return String(str);
+  }
+
+  // Replace unsafe HTML and invalid JavaScript line terminator chars with
+  // their safe Unicode char counterpart. This _must_ happen before the
+  // regexps and functions are serialized and added back to the string.
+  if (options.unsafe !== true) {
+    str = str.replace(UNSAFE_CHARS_REGEXP, escapeUnsafeChars);
+  }
+  if (functions.length === 0 && regexps.length === 0 && dates.length === 0 && maps.length === 0 && sets.length === 0 && arrays.length === 0 && undefs.length === 0 && infinities.length === 0 && bigInts.length === 0 && urls.length === 0) {
+    return str;
+  }
+
+  // Replaces all occurrences of function, regexp, date, map and set placeholders in the
+  // JSON string with their string representations. If the original value can
+  // not be found, then `undefined` is used.
+  return str.replace(PLACE_HOLDER_REGEXP, function (match, backSlash, type, valueIndex) {
+    // The placeholder may not be preceded by a backslash. This is to prevent
+    // replacing things like `"a\"@__R-<UID>-0__@"` and thus outputting
+    // invalid JS.
+    if (backSlash) {
+      return match;
+    }
+    if (type === 'D') {
+      return 'new Date("' + dates[valueIndex].toISOString() + '")';
+    }
+    if (type === 'R') {
+      return 'new RegExp(' + serialize(regexps[valueIndex].source) + ', "' + regexps[valueIndex].flags + '")';
+    }
+    if (type === 'M') {
+      return 'new Map(' + serialize(Array.from(maps[valueIndex].entries())) + ')';
+    }
+    if (type === 'S') {
+      return 'new Set(' + serialize(Array.from(sets[valueIndex].values())) + ')';
+    }
+    if (type === 'A') {
+      return 'Array.prototype.slice.call(' + serialize(Object.assign({
+        length: arrays[valueIndex].length
+      }, arrays[valueIndex])) + ')';
+    }
+    if (type === 'U') {
+      return 'undefined';
+    }
+    if (type === 'I') {
+      return infinities[valueIndex];
+    }
+    if (type === 'B') {
+      return 'BigInt("' + bigInts[valueIndex] + '")';
+    }
+    if (type === 'L') {
+      return 'new URL("' + urls[valueIndex].toString() + '")';
+    }
+    var fn = functions[valueIndex];
+    return serializeFunc(fn);
+  });
+}
+
+/**
+ * @description 使用serialize-javascript进行序列化，替代JSON.stringify()
+ * @description 组件rules里面会存储一些validator函数，如果用JSON.stringify提交给接口会丢失
+ * @param {*} obj 传入需要序列化的值
+ * @returns 序列化后的值
+ */
+function serialize(obj) {
+  return serializeUtil(obj, {
+    ignoreUndefined: true
+  });
+}
+
+/**
+ * @description 序列化成编辑器需要的展示格式
+ * @param {*} obj  传入需要序列化的值
+ * @return {*}  序列化后的值
+ */
+function serializeToDraft(obj) {
+  return serializeUtil(obj, {
+    space: 2,
+    ignoreUndefined: true
+  });
+}
+
+/**
+ * @description 对serialize-javascript序列化后的值进行反序列化化
+ * @param {*} serializedJavascript 反序列化后的值
+ * @returns
+ */
+function deserialize(serializedJavascript) {
+  return new Function('return ' + serializedJavascript)();
+}
+
+function list(props) {
+  if (!/^#/.test(props.schema.$id)) {
+    return /*#__PURE__*/React.createElement("div", {
+      className: "w-100"
+    }, props.children);
+  }
+  return /*#__PURE__*/React.createElement("div", {
+    className: "flex flex-column"
+  }, /*#__PURE__*/React.createElement("div", {
+    className: "fr-set w-100 flex flex-column ba pt4 pb2 ph2 relative b--black-10"
+  }, props.children, /*#__PURE__*/React.createElement(_Button, {
+    size: "small",
+    className: "self-end",
+    type: "dashed",
+    icon: /*#__PURE__*/React.createElement(_DeleteOutlined, null)
+  }, "\u5220\u9664")), /*#__PURE__*/React.createElement(_Button, {
+    size: "small",
+    className: "self-end",
+    icon: /*#__PURE__*/React.createElement(_PlusCircleOutlined, null)
+  }, "\u6DFB\u52A0"));
+}
+
+var DEFAULT_SCHEMA = {
+  type: 'object',
+  properties: {}
+};
+
+// TODO: formData 不存在的时候会报错：can't find # of undefined
+function Provider(props, ref) {
+  var defaultValue = props.defaultValue,
+    canDrag = props.canDrag,
+    canDelete = props.canDelete,
+    submit = props.submit,
+    _transformer = props.transformer,
+    extraButtons = props.extraButtons,
+    controlButtons = props.controlButtons,
+    _preview = props.preview,
+    hideId = props.hideId,
+    _props$getId = props.getId,
+    getId = _props$getId === void 0 ? defaultGetId : _props$getId,
+    settings = props.settings,
+    commonSettings = props.commonSettings,
+    globalSettings = props.globalSettings,
+    _props$widgets = props.widgets,
+    widgets$1 = _props$widgets === void 0 ? {} : _props$widgets,
+    _props$mapping = props.mapping,
+    mapping$1 = _props$mapping === void 0 ? {} : _props$mapping,
+    _props$methods = props.methods,
+    methods = _props$methods === void 0 ? {} : _props$methods,
+    _props$configProvider = props.configProvider,
+    configProvider = _props$configProvider === void 0 ? {} : _props$configProvider,
+    _props$validation = props.validation,
+    validation = _props$validation === void 0 ? true : _props$validation,
+    children = props.children,
+    fieldRender = props.fieldRender,
+    fieldWrapperRender = props.fieldWrapperRender,
+    elementRender = props.elementRender,
+    prefixCls = props.prefixCls;
+  var transformer = _objectSpread2({
+    from: function from(schema) {
+      return schema;
+    },
+    to: function to(schema) {
+      return schema;
+    },
+    fromSetting: fromSetting,
+    toSetting: toSetting
+  }, _transformer);
+  var frwRef = ref || useRef();
+  var _useSet = useSet({
+      formData: {},
+      frProps: {},
+      // form-render 的全局 props 等
+      isNewVersion: true,
+      // 用schema字段，还是用propsSchema字段，这是一个问题
+      preview: false,
+      // preview = false 是编辑模式
+      schema: {},
+      selected: undefined,
+      // 被选中的$id, 如果object/array的内部，以首字母0标识
+      settingsForm: null
+    }),
+    _useSet2 = _slicedToArray(_useSet, 2),
+    state = _useSet2[0],
+    setState = _useSet2[1];
+  var _useState = useState([]),
+    _useState2 = _slicedToArray(_useState, 2),
+    errorFields = _useState2[0],
+    setErrorFields = _useState2[1];
+
+  // 收口点 propsSchema 到 schema 的转换 (一共3处，其他两个是 importSchema 和 setValue，在 FRWrapper 文件)
+  useEffect(function () {
+    var schema = defaultValue ? transformer.from(defaultValue) : DEFAULT_SCHEMA;
+    if (schema) setState(schemaToState(schema));
+  }, [defaultValue]);
+  var formData = state.formData,
+    frProps = state.frProps,
+    isNewVersion = state.isNewVersion,
+    preview = state.preview,
+    schema = state.schema,
+    selected = state.selected;
+  var onChange = function onChange(data) {
+    setState({
+      formData: data
+    });
+    props.onChange && props.onChange(data);
+  };
+  var onSchemaChange = function onSchemaChange(newSchema) {
+    setState({
+      schema: newSchema
+    });
+    if (props.onSchemaChange) {
+      setTimeout(function () {
+        if (!frwRef.current) return;
+        var pureSchema = frwRef.current.getValue();
+        props.onSchemaChange(pureSchema);
+      }, 0);
+    }
+  };
+  var _mapping = _objectSpread2(_objectSpread2({}, mapping), mapping$1);
+  var _widgets = _objectSpread2(_objectSpread2(_objectSpread2({}, widgets), widgets$1), {}, {
+    list: list
+  });
+  var rootState = {
+    preview: _preview !== null && _preview !== void 0 ? _preview : preview,
+    mapping: _mapping,
+    widgets: _widgets,
+    methods: methods,
+    selected: selected
+  };
+  var userProps = {
+    canDrag: canDrag,
+    canDelete: canDelete,
+    submit: submit,
+    transformer: transformer,
+    isNewVersion: isNewVersion,
+    extraButtons: extraButtons,
+    controlButtons: controlButtons,
+    hideId: hideId,
+    getId: getId,
+    validation: validation,
+    settings: settings,
+    commonSettings: commonSettings,
+    globalSettings: globalSettings
+  };
+  var _schema = {};
+  if (schema) {
+    _schema = combineSchema(_objectSpread2(_objectSpread2({}, schema), frProps)); // TODO: 要不要判断是否都是object
+  }
+  var flatten = flattenSchema(_schema);
+  var flattenWithData = transformer.from(dataToFlatten(flatten, formData));
+  var onFlattenChange = function onFlattenChange(newFlatten) {
+    var changeSource = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 'schema';
+    var newSchema = idToSchema(newFlatten);
+    var newData = _flattenToData(newFlatten);
+    // 判断只有schema变化时才调用，一般需求的用户不需要
+    if (changeSource === 'schema') {
+      onSchemaChange(newSchema);
+    }
+    // schema 变化大都会触发 data 变化
+    onChange(newData);
+  };
+  var onItemChange = function onItemChange(key, value, changeSource) {
+    flattenWithData[key] = value;
+    onFlattenChange(flattenWithData, changeSource);
+  };
+  var displaySchema = {};
+  var displaySchemaString = '';
+  try {
+    var _schema2 = _objectSpread2(_objectSpread2({}, idToSchema(flattenWithData, '#', true)), frProps);
+    displaySchema = transformer.to(_schema2);
+    if (!isNewVersion) {
+      displaySchema = newSchemaToOld(displaySchema);
+    }
+    // displaySchemaString = JSON.stringify(displaySchema, null, 2);
+    // 支持直接保存函数之后(解决validtor不能正常保存的问题)，这里因为导入导出的问题，序列化也用内置的api序列化
+    displaySchemaString = serializeToDraft(displaySchema);
+  } catch (error) {}
+  var getValue = function getValue() {
+    return displaySchema;
+  };
+  var setValue = function setValue(value) {
+    try {
+      setState(function (state) {
+        return _objectSpread2(_objectSpread2({}, state), {}, {
+          selected: undefined
+        }, schemaToState(transformer.from(value)));
+      });
+    } catch (error) {
+      console.error(error);
+    }
+  };
+  var copyValue = function copyValue() {
+    copyTOClipboard(displaySchemaString);
+  };
+  var getErrorFields = function getErrorFields() {
+    return errorFields;
+  };
+  var getSettingsForm = function getSettingsForm() {
+    return state.settingsForm;
+  };
+  useImperativeHandle(frwRef, function () {
+    return {
+      getValue: getValue,
+      setValue: setValue,
+      copyValue: copyValue,
+      getErrorFields: getErrorFields,
+      getSettingsForm: getSettingsForm
+    };
+  });
+
+  // TODO: flatten是频繁在变的，应该和其他两个函数分开
+  var store = _objectSpread2({
+    flatten: flattenWithData,
+    // schema + formData = flattenWithData
+    onFlattenChange: onFlattenChange,
+    // onChange + onSchemaChange = onFlattenChange
+    onItemChange: onItemChange,
+    // onFlattenChange 里只改一个item的flatten，使用这个方法
+    onSchemaChange: onSchemaChange,
+    onChange: onChange,
+    errorFields: errorFields,
+    onItemErrorChange: setErrorFields,
+    userProps: userProps,
+    frProps: frProps,
+    displaySchema: displaySchema,
+    displaySchemaString: displaySchemaString,
+    fieldRender: fieldRender,
+    fieldWrapperRender: fieldWrapperRender,
+    elementRender: elementRender
+  }, rootState);
+  return /*#__PURE__*/React.createElement(DndProvider, {
+    backend: HTML5Backend,
+    context: window
+  }, /*#__PURE__*/React.createElement(_ConfigProvider, _extends({
+    locale: zhCN$1
+  }, configProvider), /*#__PURE__*/React.createElement(Ctx.Provider, {
+    value: setState
+  }, /*#__PURE__*/React.createElement(StoreCtx.Provider, {
+    value: store
+  }, children))));
+}
+var Provider$1 = /*#__PURE__*/forwardRef(Provider);
+
+var translation = {
+	"导入": "Import",
+	"清除": "Clear",
+	"清空": "Clear",
+	"导出schema": "Export Schema",
+	"最终展示": "Preview",
+	"开始编辑": "Edit",
+	"复制": "Copy",
+	"取消": "Cancel",
+	"复制成功": "Copy Success",
+	"贴入需要导入的schema，模样可点击导出schema参考": "Paste the schema. Click export schema reference",
+	"格式不对哦，请重新尝试": "Wrong format, please try again",
+	"点击/拖拽左侧栏的组件进行添加": "Click / Drag the component in the left column to add",
+	"组件配置": "Component Setting",
+	"表单配置": "Form Setting",
+	"此处配置有误": "Incorrect configuration here",
+	"配置错误：Setting不是数组": "Configuration error: setting is not an array"
+};
+var components = {
+	"基础组件": "Basic",
+	"高级组件": "Advanced",
+	"布局组件": "Layout",
+	"模板": "Template",
+	"输入框": "Input",
+	"大输入框": "Textarea",
+	"日期选择": "Date Picker",
+	"数字输入框": "NumberInput",
+	"是否选择": "Checkbox",
+	"是否switch": "Switch",
+	"下拉单选": "SelectSingle",
+	"点击单选": "Radio",
+	"下拉多选": "SelectMultiple",
+	"点击多选": "CheckboxGroup",
+	HTML: "HTML",
+	"日期范围": "DateRange",
+	"数字（slider）": "Slider",
+	"图片展示": "Image",
+	"颜色选择": "ColorPicker",
+	"对象": "Section",
+	"常规列表": "List",
+	"简单列表": "SimpleList",
+	"表格列表": "TableList",
+	"复杂表格列表": "DrawerList",
+	"整体布局": "Grid Columns",
+	"一行一列": "Single Column",
+	"一行二列": "Two Columns",
+	"一行三列": "Three Columns",
+	"默认一行一列": "Single Column by default",
+	"标签宽度": "Form Label Width",
+	"标签展示模式": "Label Alignment",
+	"同行": "Horizontal",
+	"单独一行": "Vertical",
+	"复杂结构样例": "Example"
+};
+var enUS = {
+	translation: translation,
+	components: components
+};
+
+var translation$1 = {
+};
+var zhCN = {
+	translation: translation$1
+};
+
+var resources = {
+  en: enUS,
+  cn: zhCN
+};
+
+i18n.use(initReactI18next).init({
+  debug: false,
+  resources: resources,
+  lng: 'cn',
+  interpolation: {
+    escapeValue: false // react already safes from xss
+  }
+});
+
+var css_248z$4 = ".fr-generator-container {\n  /* Resets */\n  /*\n   This will set table to full width and then\n   all cells will be equal width\n */\n  /* 1. Fix for Chrome 44 bug.\n  * https://code.google.com/p/chromium/issues/detail?id=506893 */\n  /* Height Percentages - Based off of height of parent */\n  /* Screen Height Percentage */\n  /* String Properties */\n  /* Max Width Percentages */\n  /* Max Width Scale */\n  /* Max Width String Properties */\n  /* .link:hover { color: #3e71f7; font-size: 14px; } */\n}\n.fr-generator-container .outline {\n  outline: 1px solid;\n}\n.fr-generator-container .outline-transparent {\n  outline: 1px solid transparent;\n}\n.fr-generator-container .outline-0 {\n  outline: 0;\n}\n.fr-generator-container .ba {\n  border-style: solid;\n  border-width: 1px;\n}\n.fr-generator-container .bt {\n  border-top-style: solid;\n  border-top-width: 1px;\n}\n.fr-generator-container .br {\n  border-right-style: solid;\n  border-right-width: 1px;\n}\n.fr-generator-container .bb {\n  border-bottom-style: solid;\n  border-bottom-width: 1px;\n}\n.fr-generator-container .bl {\n  border-left-style: solid;\n  border-left-width: 1px;\n}\n.fr-generator-container .bn {\n  border-style: none;\n  border-width: 0;\n}\n.fr-generator-container .br0 {\n  border-radius: 0;\n}\n.fr-generator-container .br1 {\n  border-radius: 0.125rem;\n}\n.fr-generator-container .br2 {\n  border-radius: 0.25rem;\n}\n.fr-generator-container .br3 {\n  border-radius: 0.5rem;\n}\n.fr-generator-container .br4 {\n  border-radius: 1rem;\n}\n.fr-generator-container .br-100 {\n  border-radius: 100%;\n}\n.fr-generator-container .br-pill {\n  border-radius: 9999px;\n}\n.fr-generator-container .br--bottom {\n  border-top-left-radius: 0;\n  border-top-right-radius: 0;\n}\n.fr-generator-container .br--top {\n  border-bottom-left-radius: 0;\n  border-bottom-right-radius: 0;\n}\n.fr-generator-container .br--right {\n  border-top-left-radius: 0;\n  border-bottom-left-radius: 0;\n}\n.fr-generator-container .br--left {\n  border-top-right-radius: 0;\n  border-bottom-right-radius: 0;\n}\n.fr-generator-container .b--dotted {\n  border-style: dotted;\n}\n.fr-generator-container .b--dashed {\n  border-style: dashed;\n}\n.fr-generator-container .b--solid {\n  border-style: solid;\n}\n.fr-generator-container .b--none {\n  border-style: none;\n}\n.fr-generator-container .b--black-10 {\n  border-color: rgba(0, 0, 0, 0.1);\n}\n.fr-generator-container .b--black-20 {\n  border-color: rgba(0, 0, 0, 0.2);\n}\n.fr-generator-container .b--black-30 {\n  border-color: rgba(0, 0, 0, 0.3);\n}\n.fr-generator-container .black-40 {\n  color: rgba(0, 0, 0, 0.4);\n}\n.fr-generator-container .f4 {\n  font-size: 1.25rem;\n}\n.fr-generator-container .bw0 {\n  border-width: 0;\n}\n.fr-generator-container .bw1 {\n  border-width: 0.125rem;\n}\n.fr-generator-container .bw2 {\n  border-width: 0.25rem;\n}\n.fr-generator-container .bw3 {\n  border-width: 0.5rem;\n}\n.fr-generator-container .bw4 {\n  border-width: 1rem;\n}\n.fr-generator-container .bw5 {\n  border-width: 2rem;\n}\n.fr-generator-container .bt-0 {\n  border-top-width: 0;\n}\n.fr-generator-container .br-0 {\n  border-right-width: 0;\n}\n.fr-generator-container .bb-0 {\n  border-bottom-width: 0;\n}\n.fr-generator-container .bl-0 {\n  border-left-width: 0;\n}\n.fr-generator-container .shadow-1 {\n  box-shadow: 0 0 4px 2px rgba(0, 0, 0, 0.2);\n}\n.fr-generator-container .shadow-2 {\n  box-shadow: 0 0 8px 2px rgba(0, 0, 0, 0.2);\n}\n.fr-generator-container .shadow-3 {\n  box-shadow: 2px 2px 4px 2px rgba(0, 0, 0, 0.2);\n}\n.fr-generator-container .shadow-4 {\n  box-shadow: 2px 2px 8px 0 rgba(0, 0, 0, 0.2);\n}\n.fr-generator-container .shadow-5 {\n  box-shadow: 4px 4px 8px 0 rgba(0, 0, 0, 0.2);\n}\n.fr-generator-container .top-0 {\n  top: 0;\n}\n.fr-generator-container .right-0 {\n  right: 0;\n}\n.fr-generator-container .bottom-0 {\n  bottom: 0;\n}\n.fr-generator-container .left-0 {\n  left: 0;\n}\n.fr-generator-container .top-1 {\n  top: 1rem;\n}\n.fr-generator-container .right-1 {\n  right: 1rem;\n}\n.fr-generator-container .bottom-1 {\n  bottom: 1rem;\n}\n.fr-generator-container .left-1 {\n  left: 1rem;\n}\n.fr-generator-container .top-2 {\n  top: 2rem;\n}\n.fr-generator-container .right-2 {\n  right: 2rem;\n}\n.fr-generator-container .bottom-2 {\n  bottom: 2rem;\n}\n.fr-generator-container .left-2 {\n  left: 2rem;\n}\n.fr-generator-container .top--1 {\n  top: -1rem;\n}\n.fr-generator-container .right--1 {\n  right: -1rem;\n}\n.fr-generator-container .bottom--1 {\n  bottom: -1rem;\n}\n.fr-generator-container .left--1 {\n  left: -1rem;\n}\n.fr-generator-container .top--2 {\n  top: -2rem;\n}\n.fr-generator-container .right--2 {\n  right: -2rem;\n}\n.fr-generator-container .bottom--2 {\n  bottom: -2rem;\n}\n.fr-generator-container .left--2 {\n  left: -2rem;\n}\n.fr-generator-container .absolute--fill {\n  top: 0;\n  right: 0;\n  bottom: 0;\n  left: 0;\n}\n.fr-generator-container .dn {\n  display: none;\n}\n.fr-generator-container .di {\n  display: inline;\n}\n.fr-generator-container .db {\n  display: block;\n}\n.fr-generator-container .dib {\n  display: inline-block;\n}\n.fr-generator-container .dit {\n  display: inline-table;\n}\n.fr-generator-container .dt {\n  display: table;\n}\n.fr-generator-container .dtc {\n  display: table-cell;\n}\n.fr-generator-container .dt-row {\n  display: table-row;\n}\n.fr-generator-container .dt-row-group {\n  display: table-row-group;\n}\n.fr-generator-container .dt-column {\n  display: table-column;\n}\n.fr-generator-container .dt-column-group {\n  display: table-column-group;\n}\n.fr-generator-container .dt--fixed {\n  table-layout: fixed;\n  width: 100%;\n}\n.fr-generator-container .flex {\n  display: flex;\n}\n.fr-generator-container .inline-flex {\n  display: inline-flex;\n}\n.fr-generator-container .flex-auto {\n  flex: 1 1 auto;\n  min-width: 0;\n  /* 1 */\n  min-height: 0;\n  /* 1 */\n}\n.fr-generator-container .flex-none {\n  flex: none;\n}\n.fr-generator-container .flex-column {\n  flex-direction: column;\n}\n.fr-generator-container .flex-row {\n  flex-direction: row;\n}\n.fr-generator-container .flex-wrap {\n  flex-wrap: wrap;\n}\n.fr-generator-container .flex-nowrap {\n  flex-wrap: nowrap;\n}\n.fr-generator-container .flex-wrap-reverse {\n  flex-wrap: wrap-reverse;\n}\n.fr-generator-container .flex-column-reverse {\n  flex-direction: column-reverse;\n}\n.fr-generator-container .flex-row-reverse {\n  flex-direction: row-reverse;\n}\n.fr-generator-container .items-start {\n  align-items: flex-start;\n}\n.fr-generator-container .items-end {\n  align-items: flex-end;\n}\n.fr-generator-container .items-center {\n  align-items: center;\n}\n.fr-generator-container .items-baseline {\n  align-items: baseline;\n}\n.fr-generator-container .items-stretch {\n  align-items: stretch;\n}\n.fr-generator-container .self-start {\n  align-self: flex-start;\n}\n.fr-generator-container .self-end {\n  align-self: flex-end;\n}\n.fr-generator-container .self-center {\n  align-self: center;\n}\n.fr-generator-container .self-baseline {\n  align-self: baseline;\n}\n.fr-generator-container .self-stretch {\n  align-self: stretch;\n}\n.fr-generator-container .justify-start {\n  justify-content: flex-start;\n}\n.fr-generator-container .justify-end {\n  justify-content: flex-end;\n}\n.fr-generator-container .justify-center {\n  justify-content: center;\n}\n.fr-generator-container .justify-between {\n  justify-content: space-between;\n}\n.fr-generator-container .justify-around {\n  justify-content: space-around;\n}\n.fr-generator-container .content-start {\n  align-content: flex-start;\n}\n.fr-generator-container .content-end {\n  align-content: flex-end;\n}\n.fr-generator-container .content-center {\n  align-content: center;\n}\n.fr-generator-container .content-between {\n  align-content: space-between;\n}\n.fr-generator-container .content-around {\n  align-content: space-around;\n}\n.fr-generator-container .content-stretch {\n  align-content: stretch;\n}\n.fr-generator-container .order-0 {\n  order: 0;\n}\n.fr-generator-container .order-1 {\n  order: 1;\n}\n.fr-generator-container .order-2 {\n  order: 2;\n}\n.fr-generator-container .order-3 {\n  order: 3;\n}\n.fr-generator-container .order-4 {\n  order: 4;\n}\n.fr-generator-container .order-5 {\n  order: 5;\n}\n.fr-generator-container .order-6 {\n  order: 6;\n}\n.fr-generator-container .order-7 {\n  order: 7;\n}\n.fr-generator-container .order-8 {\n  order: 8;\n}\n.fr-generator-container .order-last {\n  order: 99999;\n}\n.fr-generator-container .flex-grow-0 {\n  flex-grow: 0;\n}\n.fr-generator-container .flex-grow-1 {\n  flex-grow: 1;\n}\n.fr-generator-container .flex-shrink-0 {\n  flex-shrink: 0;\n}\n.fr-generator-container .flex-shrink-1 {\n  flex-shrink: 1;\n}\n.fr-generator-container .fw1 {\n  font-weight: 100;\n}\n.fr-generator-container .fw2 {\n  font-weight: 200;\n}\n.fr-generator-container .fw3 {\n  font-weight: 300;\n}\n.fr-generator-container .fw4 {\n  font-weight: 400;\n}\n.fr-generator-container .fw5 {\n  font-weight: 500;\n}\n.fr-generator-container .fw6 {\n  font-weight: 600;\n}\n.fr-generator-container .fw7 {\n  font-weight: 700;\n}\n.fr-generator-container .fw8 {\n  font-weight: 800;\n}\n.fr-generator-container .fw9 {\n  font-weight: 900;\n}\n.fr-generator-container .h1 {\n  height: 1rem;\n}\n.fr-generator-container .h2 {\n  height: 2rem;\n}\n.fr-generator-container .h3 {\n  height: 4rem;\n}\n.fr-generator-container .h4 {\n  height: 8rem;\n}\n.fr-generator-container .h5 {\n  height: 16rem;\n}\n.fr-generator-container .h-25 {\n  height: 25%;\n}\n.fr-generator-container .h-50 {\n  height: 50%;\n}\n.fr-generator-container .h-75 {\n  height: 75%;\n}\n.fr-generator-container .h-100 {\n  height: 100%;\n}\n.fr-generator-container .min-h-100 {\n  min-height: 100%;\n}\n.fr-generator-container .vh-25 {\n  height: 25vh;\n}\n.fr-generator-container .vh-50 {\n  height: 50vh;\n}\n.fr-generator-container .vh-75 {\n  height: 75vh;\n}\n.fr-generator-container .vh-100 {\n  height: 100vh;\n}\n.fr-generator-container .min-vh-100 {\n  min-height: 100vh;\n}\n.fr-generator-container .h-auto {\n  height: auto;\n}\n.fr-generator-container .h-inherit {\n  height: inherit;\n}\n.fr-generator-container .tracked {\n  letter-spacing: 0.1em;\n}\n.fr-generator-container .tracked-tight {\n  letter-spacing: -0.05em;\n}\n.fr-generator-container .tracked-mega {\n  letter-spacing: 0.25em;\n}\n.fr-generator-container .lh-solid {\n  line-height: 1;\n}\n.fr-generator-container .lh-title {\n  line-height: 1.25;\n}\n.fr-generator-container .lh-copy {\n  line-height: 1.5;\n}\n.fr-generator-container .mw-100 {\n  max-width: 100%;\n}\n.fr-generator-container .mw1 {\n  max-width: 1rem;\n}\n.fr-generator-container .mw2 {\n  max-width: 2rem;\n}\n.fr-generator-container .mw3 {\n  max-width: 4rem;\n}\n.fr-generator-container .mw4 {\n  max-width: 8rem;\n}\n.fr-generator-container .mw5 {\n  max-width: 16rem;\n}\n.fr-generator-container .mw6 {\n  max-width: 32rem;\n}\n.fr-generator-container .mw7 {\n  max-width: 48rem;\n}\n.fr-generator-container .mw8 {\n  max-width: 64rem;\n}\n.fr-generator-container .mw9 {\n  max-width: 96rem;\n}\n.fr-generator-container .mw-none {\n  max-width: none;\n}\n.fr-generator-container .w1 {\n  width: 1rem;\n}\n.fr-generator-container .w2 {\n  width: 2rem;\n}\n.fr-generator-container .w3 {\n  width: 4rem;\n}\n.fr-generator-container .w4 {\n  width: 8rem;\n}\n.fr-generator-container .w5 {\n  width: 16rem;\n}\n.fr-generator-container .w-10 {\n  width: 10%;\n}\n.fr-generator-container .w-20 {\n  width: 20%;\n}\n.fr-generator-container .w-25 {\n  width: 25%;\n}\n.fr-generator-container .w-30 {\n  width: 30%;\n}\n.fr-generator-container .w-33 {\n  width: 33%;\n}\n.fr-generator-container .w-34 {\n  width: 34%;\n}\n.fr-generator-container .w-40 {\n  width: 40%;\n}\n.fr-generator-container .w-50 {\n  width: 50%;\n}\n.fr-generator-container .w-60 {\n  width: 60%;\n}\n.fr-generator-container .w-70 {\n  width: 70%;\n}\n.fr-generator-container .w-75 {\n  width: 75%;\n}\n.fr-generator-container .w-80 {\n  width: 80%;\n}\n.fr-generator-container .w-90 {\n  width: 90%;\n}\n.fr-generator-container .w-100 {\n  width: 100%;\n}\n.fr-generator-container .w-third {\n  width: calc(100% / 3);\n}\n.fr-generator-container .w-two-thirds {\n  width: calc(100% / 1.5);\n}\n.fr-generator-container .w-auto {\n  width: auto;\n}\n.fr-generator-container .tl {\n  text-align: left;\n}\n.fr-generator-container .tr {\n  text-align: right;\n}\n.fr-generator-container .tc {\n  text-align: center;\n}\n.fr-generator-container .tj {\n  text-align: justify;\n}\n.fr-generator-container .overflow-visible {\n  overflow: visible;\n}\n.fr-generator-container .overflow-hidden {\n  overflow: hidden;\n}\n.fr-generator-container .overflow-scroll {\n  overflow: scroll;\n}\n.fr-generator-container .overflow-auto {\n  overflow: auto;\n}\n.fr-generator-container .overflow-x-visible {\n  overflow-x: visible;\n}\n.fr-generator-container .overflow-x-hidden {\n  overflow-x: hidden;\n}\n.fr-generator-container .overflow-x-scroll {\n  overflow-x: scroll;\n}\n.fr-generator-container .overflow-x-auto {\n  overflow-x: auto;\n}\n.fr-generator-container .overflow-y-visible {\n  overflow-y: visible;\n}\n.fr-generator-container .overflow-y-hidden {\n  overflow-y: hidden;\n}\n.fr-generator-container .overflow-y-scroll {\n  overflow-y: scroll;\n}\n.fr-generator-container .overflow-y-auto {\n  overflow-y: auto;\n}\n.fr-generator-container .static {\n  position: static;\n}\n.fr-generator-container .relative {\n  position: relative;\n}\n.fr-generator-container .absolute {\n  position: absolute;\n}\n.fr-generator-container .fixed {\n  position: fixed;\n}\n.fr-generator-container .o-100 {\n  opacity: 1;\n}\n.fr-generator-container .o-90 {\n  opacity: 0.9;\n}\n.fr-generator-container .o-80 {\n  opacity: 0.8;\n}\n.fr-generator-container .o-70 {\n  opacity: 0.7;\n}\n.fr-generator-container .o-60 {\n  opacity: 0.6;\n}\n.fr-generator-container .o-50 {\n  opacity: 0.5;\n}\n.fr-generator-container .o-40 {\n  opacity: 0.4;\n}\n.fr-generator-container .o-30 {\n  opacity: 0.3;\n}\n.fr-generator-container .o-20 {\n  opacity: 0.2;\n}\n.fr-generator-container .o-10 {\n  opacity: 0.1;\n}\n.fr-generator-container .o-05 {\n  opacity: 0.05;\n}\n.fr-generator-container .o-025 {\n  opacity: 0.025;\n}\n.fr-generator-container .o-0 {\n  opacity: 0;\n}\n.fr-generator-container .pa0 {\n  padding: 0;\n}\n.fr-generator-container .pa1 {\n  padding: 0.25rem;\n}\n.fr-generator-container .pa2 {\n  padding: 0.5rem;\n}\n.fr-generator-container .pa3 {\n  padding: 1rem;\n}\n.fr-generator-container .pa4 {\n  padding: 2rem;\n}\n.fr-generator-container .pa5 {\n  padding: 4rem;\n}\n.fr-generator-container .pa6 {\n  padding: 8rem;\n}\n.fr-generator-container .pa7 {\n  padding: 16rem;\n}\n.fr-generator-container .pl0 {\n  padding-left: 0;\n}\n.fr-generator-container .pl1 {\n  padding-left: 0.25rem;\n}\n.fr-generator-container .pl2 {\n  padding-left: 0.5rem;\n}\n.fr-generator-container .pl3 {\n  padding-left: 1rem;\n}\n.fr-generator-container .pl4 {\n  padding-left: 2rem;\n}\n.fr-generator-container .pl5 {\n  padding-left: 4rem;\n}\n.fr-generator-container .pl6 {\n  padding-left: 8rem;\n}\n.fr-generator-container .pl7 {\n  padding-left: 16rem;\n}\n.fr-generator-container .pr0 {\n  padding-right: 0;\n}\n.fr-generator-container .pr1 {\n  padding-right: 0.25rem;\n}\n.fr-generator-container .pr2 {\n  padding-right: 0.5rem;\n}\n.fr-generator-container .pr3 {\n  padding-right: 1rem;\n}\n.fr-generator-container .pr4 {\n  padding-right: 2rem;\n}\n.fr-generator-container .pr5 {\n  padding-right: 4rem;\n}\n.fr-generator-container .pr6 {\n  padding-right: 8rem;\n}\n.fr-generator-container .pr7 {\n  padding-right: 16rem;\n}\n.fr-generator-container .pb0 {\n  padding-bottom: 0;\n}\n.fr-generator-container .pb1 {\n  padding-bottom: 0.25rem;\n}\n.fr-generator-container .pb2 {\n  padding-bottom: 0.5rem;\n}\n.fr-generator-container .pb3 {\n  padding-bottom: 1rem;\n}\n.fr-generator-container .pb4 {\n  padding-bottom: 2rem;\n}\n.fr-generator-container .pb5 {\n  padding-bottom: 4rem;\n}\n.fr-generator-container .pb6 {\n  padding-bottom: 8rem;\n}\n.fr-generator-container .pb7 {\n  padding-bottom: 16rem;\n}\n.fr-generator-container .pt0 {\n  padding-top: 0;\n}\n.fr-generator-container .pt1 {\n  padding-top: 0.25rem;\n}\n.fr-generator-container .pt2 {\n  padding-top: 0.5rem;\n}\n.fr-generator-container .pt3 {\n  padding-top: 1rem;\n}\n.fr-generator-container .pt4 {\n  padding-top: 2rem;\n}\n.fr-generator-container .pt5 {\n  padding-top: 4rem;\n}\n.fr-generator-container .pt6 {\n  padding-top: 8rem;\n}\n.fr-generator-container .pt7 {\n  padding-top: 16rem;\n}\n.fr-generator-container .pv0 {\n  padding-top: 0;\n  padding-bottom: 0;\n}\n.fr-generator-container .pv1 {\n  padding-top: 0.25rem;\n  padding-bottom: 0.25rem;\n}\n.fr-generator-container .pv2 {\n  padding-top: 0.5rem;\n  padding-bottom: 0.5rem;\n}\n.fr-generator-container .pv3 {\n  padding-top: 1rem;\n  padding-bottom: 1rem;\n}\n.fr-generator-container .pv4 {\n  padding-top: 2rem;\n  padding-bottom: 2rem;\n}\n.fr-generator-container .pv5 {\n  padding-top: 4rem;\n  padding-bottom: 4rem;\n}\n.fr-generator-container .pv6 {\n  padding-top: 8rem;\n  padding-bottom: 8rem;\n}\n.fr-generator-container .pv7 {\n  padding-top: 16rem;\n  padding-bottom: 16rem;\n}\n.fr-generator-container .ph0 {\n  padding-left: 0;\n  padding-right: 0;\n}\n.fr-generator-container .ph1 {\n  padding-left: 0.25rem;\n  padding-right: 0.25rem;\n}\n.fr-generator-container .ph2 {\n  padding-left: 0.5rem;\n  padding-right: 0.5rem;\n}\n.fr-generator-container .ph3 {\n  padding-left: 1rem;\n  padding-right: 1rem;\n}\n.fr-generator-container .ph4 {\n  padding-left: 2rem;\n  padding-right: 2rem;\n}\n.fr-generator-container .ph5 {\n  padding-left: 4rem;\n  padding-right: 4rem;\n}\n.fr-generator-container .ph6 {\n  padding-left: 8rem;\n  padding-right: 8rem;\n}\n.fr-generator-container .ph7 {\n  padding-left: 16rem;\n  padding-right: 16rem;\n}\n.fr-generator-container .ma1 {\n  margin: 0.25rem;\n}\n.fr-generator-container .ma2 {\n  margin: 0.5rem;\n}\n.fr-generator-container .ma3 {\n  margin: 1rem;\n}\n.fr-generator-container .ma4 {\n  margin: 2rem;\n}\n.fr-generator-container .ma5 {\n  margin: 4rem;\n}\n.fr-generator-container .ma6 {\n  margin: 8rem;\n}\n.fr-generator-container .ma7 {\n  margin: 16rem;\n}\n.fr-generator-container .ma0 {\n  margin: 0;\n}\n.fr-generator-container .ml1 {\n  margin-left: 0.25rem;\n}\n.fr-generator-container .ml2 {\n  margin-left: 0.5rem;\n}\n.fr-generator-container .ml3 {\n  margin-left: 1rem;\n}\n.fr-generator-container .ml4 {\n  margin-left: 2rem;\n}\n.fr-generator-container .ml5 {\n  margin-left: 4rem;\n}\n.fr-generator-container .ml6 {\n  margin-left: 8rem;\n}\n.fr-generator-container .ml7 {\n  margin-left: 16rem;\n}\n.fr-generator-container .ml0 {\n  margin-left: 0;\n}\n.fr-generator-container .mr1 {\n  margin-right: 0.25rem;\n}\n.fr-generator-container .mr2 {\n  margin-right: 0.5rem;\n}\n.fr-generator-container .mr3 {\n  margin-right: 1rem;\n}\n.fr-generator-container .mr4 {\n  margin-right: 2rem;\n}\n.fr-generator-container .mr5 {\n  margin-right: 4rem;\n}\n.fr-generator-container .mr6 {\n  margin-right: 8rem;\n}\n.fr-generator-container .mr7 {\n  margin-right: 16rem;\n}\n.fr-generator-container .mr0 {\n  margin-right: 0;\n}\n.fr-generator-container .mb1 {\n  margin-bottom: 0.25rem;\n}\n.fr-generator-container .mb2 {\n  margin-bottom: 0.5rem;\n}\n.fr-generator-container .mb3 {\n  margin-bottom: 1rem;\n}\n.fr-generator-container .mb4 {\n  margin-bottom: 2rem;\n}\n.fr-generator-container .mb5 {\n  margin-bottom: 4rem;\n}\n.fr-generator-container .mb6 {\n  margin-bottom: 8rem;\n}\n.fr-generator-container .mb7 {\n  margin-bottom: 16rem;\n}\n.fr-generator-container .mb0 {\n  margin-bottom: 0;\n}\n.fr-generator-container .mt1 {\n  margin-top: 0.25rem;\n}\n.fr-generator-container .mt2 {\n  margin-top: 0.5rem;\n}\n.fr-generator-container .mt3 {\n  margin-top: 1rem;\n}\n.fr-generator-container .mt4 {\n  margin-top: 2rem;\n}\n.fr-generator-container .mt5 {\n  margin-top: 4rem;\n}\n.fr-generator-container .mt6 {\n  margin-top: 8rem;\n}\n.fr-generator-container .mt7 {\n  margin-top: 16rem;\n}\n.fr-generator-container .mt0 {\n  margin-top: 0;\n}\n.fr-generator-container .mv1 {\n  margin-top: 0.25rem;\n  margin-bottom: 0.25rem;\n}\n.fr-generator-container .mv2 {\n  margin-top: 0.5rem;\n  margin-bottom: 0.5rem;\n}\n.fr-generator-container .mv3 {\n  margin-top: 1rem;\n  margin-bottom: 1rem;\n}\n.fr-generator-container .mv4 {\n  margin-top: 2rem;\n  margin-bottom: 2rem;\n}\n.fr-generator-container .mv5 {\n  margin-top: 4rem;\n  margin-bottom: 4rem;\n}\n.fr-generator-container .mv6 {\n  margin-top: 8rem;\n  margin-bottom: 8rem;\n}\n.fr-generator-container .mv7 {\n  margin-top: 16rem;\n  margin-bottom: 16rem;\n}\n.fr-generator-container .mv0 {\n  margin-top: 0;\n  margin-bottom: 0;\n}\n.fr-generator-container .mh1 {\n  margin-left: 0.25rem;\n  margin-right: 0.25rem;\n}\n.fr-generator-container .mh2 {\n  margin-left: 0.5rem;\n  margin-right: 0.5rem;\n}\n.fr-generator-container .mh3 {\n  margin-left: 1rem;\n  margin-right: 1rem;\n}\n.fr-generator-container .mh4 {\n  margin-left: 2rem;\n  margin-right: 2rem;\n}\n.fr-generator-container .mh5 {\n  margin-left: 4rem;\n  margin-right: 4rem;\n}\n.fr-generator-container .mh6 {\n  margin-left: 8rem;\n  margin-right: 8rem;\n}\n.fr-generator-container .mh7 {\n  margin-left: 16rem;\n  margin-right: 16rem;\n}\n.fr-generator-container .mh0 {\n  margin-left: 0;\n  margin-right: 0;\n}\n.fr-generator-container .red {\n  color: red;\n}\n.fr-generator-container .blue {\n  color: #357edd;\n}\n.fr-generator-container .f7 {\n  font-size: 0.75rem;\n}\n.fr-generator-container .debug * {\n  outline: 1px solid gold;\n}\n.fr-generator-container .debug-white * {\n  outline: 1px solid white;\n}\n.fr-generator-container .debug-black * {\n  outline: 1px solid black;\n}\n.fr-generator-container .debug-grid {\n  background: transparent url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAICAYAAADED76LAAAAFElEQVR4AWPAC97/9x0eCsAEPgwAVLshdpENIxcAAAAASUVORK5CYII=) repeat top left;\n}\n.fr-generator-container .truncate {\n  white-space: nowrap;\n  overflow: hidden;\n  text-overflow: ellipsis;\n}\n.fr-generator-container .bg-white {\n  background-color: #fff;\n}\n.fr-generator-container .pointer:hover {\n  cursor: pointer;\n}\n.fr-generator-container .link {\n  color: #1890ff;\n  font-size: 14px;\n}\n.fr-generator-container .link:hover {\n  color: #40a9ff;\n  font-size: 14px;\n}\n@media screen and (min-width: 60em) {\n  .fr-generator-container .w5-l {\n    width: 16rem;\n  }\n}\n/*\n  用于原有样式的覆盖\n */\n.fr-generator-container {\n  display: flex;\n  overflow: hidden;\n  height: 100%;\n  min-height: 30vh;\n  position: relative;\n}\n.fr-generator-container .mid-layout {\n  padding: 0 8px;\n  display: flex;\n  flex-direction: column;\n  flex-grow: 1;\n  flex-shrink: 1;\n  /* height: 100%; */\n  overflow: hidden;\n  border-left: 1px solid #e0e0e0;\n  border-right: 1px solid #e0e0e0;\n}\n.fr-generator-container .flex-center {\n  display: flex;\n  justify-content: center;\n  align-items: center;\n}\n.fr-generator-container .dnd-container {\n  flex-grow: 1;\n  overflow-y: auto;\n}\n.fr-generator-container .ant-tabs.ant-tabs-top {\n  display: flex;\n  flex-direction: column;\n  height: 100%;\n}\n.fr-generator-container .ant-tabs-content-holder {\n  flex-grow: 1;\n}\n.fr-generator-container .ant-tabs-content.ant-tabs-content-top {\n  height: 100%;\n}\n.fr-generator-container .ant-tabs-tabpane.ant-tabs-tabpane-active {\n  height: 100%;\n  overflow-y: auto;\n}\n.fr-generator-container .dnd-container.edit {\n  /* Row */\n  /* 自定义类 */\n  /* 组件内部样式*/\n  /* 其他样式 */\n}\n.fr-generator-container .dnd-container.edit .top-upper {\n  top: -12px;\n}\n.fr-generator-container .dnd-container.edit .fr-set {\n  padding: 12px 14px 12px 12px;\n  margin-bottom: 12px;\n  border-radius: 4px;\n}\n.fr-generator-container .dnd-container.edit .fr-field {\n  margin-bottom: 24px;\n}\n.fr-generator-container .dnd-container.edit .fr-label {\n  display: block;\n}\n.fr-generator-container .dnd-container.edit .fr-label-title {\n  display: inline-flex;\n  color: #333;\n  font-size: 14px;\n  min-height: 22px;\n  /* \"\"的标签页占位 */\n  line-height: 22px;\n}\n.fr-generator-container .dnd-container.edit .fr-label-required {\n  margin: 1px 4px 0 0;\n  color: #f5222d;\n  font-size: 14px;\n  font-family: SimSun, sans-serif;\n}\n.fr-generator-container .dnd-container.edit .fr-label-title::after {\n  content: ':';\n  position: relative;\n  top: -0.5px;\n  margin: 0 10px 0 2px;\n}\n.fr-generator-container .dnd-container.edit .fr-label-title.no-colon::after {\n  content: '';\n  margin: 0;\n}\n.fr-generator-container .dnd-container.edit .fr-label-object .fr-label-title {\n  font-size: 16px;\n  color: #222;\n}\n.fr-generator-container .dnd-container.edit .fr-desc {\n  margin-top: 3px;\n  font-size: 12px;\n  word-break: break-all;\n  color: #888;\n}\n.fr-generator-container .dnd-container.edit .fr-validate {\n  margin-left: 12px;\n  font-size: 12px;\n  word-break: break-all;\n  color: #f5222d;\n}\n.fr-generator-container .dnd-container.edit .fr-validate-row {\n  margin: 3px 0 0 0;\n}\n.fr-generator-container .dnd-container.edit .fr-label-row {\n  text-align: right;\n  flex-shrink: 0;\n}\n.fr-generator-container .dnd-container.edit .fr-field-row .fr-content {\n  flex: 1;\n  position: relative;\n}\n.fr-generator-container .dnd-container.edit .fr-field-row .fr-tooltip-icon {\n  margin: 3px 2px 0 0;\n}\n.fr-generator-container .dnd-container.edit .hover-b--black-20:hover {\n  border-color: rgba(0, 0, 0, 0.3);\n}\n.fr-generator-container .dnd-container.edit .pt44 {\n  padding-top: 46px;\n}\n.fr-generator-container .dnd-container.edit .pv12 {\n  padding-top: 12px;\n  padding-bottom: 12px;\n}\n.fr-generator-container .dnd-container.edit .fr-color-picker {\n  width: 100%;\n  display: flex;\n  flex-direction: row;\n  align-items: center;\n  color: #666;\n}\n.fr-generator-container .dnd-container.edit .fr-color-picker .rc-color-picker-trigger {\n  margin-right: 12px;\n  height: 30px;\n  width: 60px;\n  border: 1px solid #e5e5e5;\n}\n.fr-generator-container .dnd-container.edit .fr-color-picker > p {\n  margin: 0;\n  font-size: 14px;\n  line-height: 28px;\n}\n.fr-generator-container .dnd-container.edit .fr-color-picker .rc-color-picker-wrap {\n  display: flex;\n}\n.fr-generator-container .dnd-container.edit .next-input,\n.fr-generator-container .dnd-container.edit .next-number-picker {\n  width: 100%;\n}\n.fr-generator-container .dnd-container.edit .upload-img {\n  max-width: 200px;\n  max-height: 200px;\n  margin-right: 24px;\n}\n.fr-generator-container .dnd-container.edit .fr-preview-image {\n  width: 160px;\n}\n.fr-generator-container .dnd-container.edit .fr-preview {\n  position: relative;\n  cursor: pointer;\n}\n.fr-generator-container .dnd-container.edit .fr-upload-mod,\n.fr-generator-container .dnd-container.edit .fr-upload-file {\n  display: flex;\n}\n.fr-generator-container .dnd-container.edit .fr-upload-mod {\n  align-items: center;\n}\n.fr-generator-container .dnd-container.edit .fr-upload-mod .fr-upload-preview {\n  margin: 0 12px;\n}\n.fr-generator-container .dnd-container.edit .fr-upload-file .ant-upload-list-item {\n  margin: 5px 0 0 8px;\n}\n.fr-generator-container .dnd-container.edit .fr-upload-file .ant-upload-list-item-name {\n  margin-right: 6px;\n}\n.fr-generator-container .dnd-container.edit .fr-upload-file .ant-upload-list-item-info {\n  cursor: pointer;\n}\n.fr-generator-container .dnd-container.edit .fr-upload-file .next-upload-list-text .next-upload-list-item-done,\n.fr-generator-container .dnd-container.edit .fr-upload-file .next-upload-list-text .next-upload-list-item .next-icon {\n  height: 28px;\n  line-height: 28px;\n  margin-left: 12px;\n}\n.fr-generator-container .dnd-container.edit .fr-upload-file .next-upload-list-item-name-wrap {\n  margin-top: -4px;\n}\n.fr-generator-container .dnd-container.edit .fr-sort-help-class {\n  background: #fff;\n}\n.fr-generator-container .dnd-container.edit .fold-icon.fold-icon-active {\n  transform: rotate(0deg);\n}\n.fr-generator-container .dnd-container.edit .fold-icon {\n  transform: rotate(-90deg);\n  transition: transform 0.24s;\n  cursor: pointer;\n  position: relative;\n}\n.fr-generator-container .dnd-container.edit .fold-icon::after {\n  content: '';\n  position: absolute;\n  top: -20px;\n  right: -10px;\n  bottom: -5px;\n  left: -20px;\n}\n.fr-generator-container .dnd-container.edit .fr-tooltip-toggle {\n  cursor: pointer;\n  position: relative;\n}\n.fr-generator-container .dnd-container.edit .fr-tooltip-toggle:hover .fr-tooltip-container {\n  opacity: 1;\n  visibility: visible;\n}\n.fr-generator-container .dnd-container.edit .fr-tooltip-icon {\n  height: 14px;\n  width: 14px;\n  background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAEAAAABACAYAAACqaXHeAAAEnUlEQVR42u1bS0iUURT+zd4Y9KDosSihNhYUaBE9YKpFDKKOOmOLahtJ2SoxA2fUdUoQJK5qU0ib6LlxUYJpkY0LE3tQZkU7y7A0e1jnA4Of8pz//5373/+BF44Oc+/c853v3nOf5xpup0QiMZ9kD8mxeDzeTHKXPveSvKXP3+j/GP1/h++QhzIoW1ZWthu/NYKYysvLN5EhKZJ7ZMQEye8ZyjjJfZIk6vS10YWFhcvI4FoC2wfwLkkf6aiBLt8YHovFNhCoFnRlgNQkY9BJbrLeS9uzqFueYAzXJV9ITgKLVsvBPCnuAAifSIe23kBd7zApHHUI8D3JBfptFUlialbYSJIDweep7+Iog7L4jUMdn4HNzeksmxRcdgColyRZWlq6NQOd21AH6rKrFxiBVanxxcXFS6jSdpsAHtLYUODC1FqAum0S0Q7Mqlp+ESlO2zD8DUmJBhcsgS4bJDwBdhUKb1ko+kll6qLR6AJDU4IuuAZ0W2C7kWnrJy1a/QONvjsNjxLp32VjsEzO1OcOkoJJoeJuGuBWGB4nYCCcD4RGmiSJOm35PIup7kokEplr+CQBCzAJeEeJqC22V3jE2IBQWVd+fv48w2cJmAhbp4C7H7bZaf1KoZJBbET8vCEDRgF/pdXGZim1/ifGl344WtTIJJ//B+ggts+K6t4BrAwBH2GjNKo2CuxVqzJeGLDqFemoFnQ0sq0vDHyP4D+KwI1ILqZqpyqsGmFjznStX8tNIzQlbjYUJasVnCo9wAzsjE1npyPgFQPqJvKDRYC8ioWt/200BFD7FRMwIu0nFBNwgNMFm80Fz0mAFIOqVz4IyoS/ZvQ1mQv1MYBqkO8GCSDXTDRjvAoCznAHrH/X0qu4FqE99Voj2AkErOPsg+3w/wqmwDMjHAkkPGdsPITMBqb7t4SFANjCjTkgoI0ZJY+Hwnp5f9MGdtIMOxF35n1ZXDrG38fYmDa48zWcs4eFANxesUtv+jPMZC4PCwE4NWL0DRvcehkHjyEhACdGCxl9vwBwggEyxw0wXhCAOANG34TsAi4k37kA/RliMnND1ANyGX1DGAMe89Og+uSjaRDSAwKucgeIYSEAcQzc8T4ISDGZrSFygVaml6dAQILJfBEiAl4yy/0KZK6WtsMBJwD+v0bcDk/tlp4yveB0cAmQj8hhs7lQE1NoIAQEPGdsazZ3k+3SoahOAvQfisoDBeR2QAmArjvcsbi2i5FMQ+Ay0Jvn6GIE10VWV2MBIiALmKWrMfFylJsRgkIAsAp1NojX47hCZn74HdfjficAAzp3PY6rf9g4GyBhw3/6Axoi0yW48IDtcQwBRVIUOHaQfguSAiYpvB42Od1Cxiz8s5tkpdfGAwOwSFhhy0xXUnV+DpSEbmCwwFiXKcPXbYTKpnSHykIndFsYf01JsDRJTxCDpUGU7nB5SKcfwuWLiooWK38wQXLJwcOFtIoHE/Bh5v6SE2DMdvNN4BE3nszQ93szfTJDclTbU7lAP5pSGIxY5eWzOdL/lXrkKW6Fp7M3XPTi4SR0zz6dnX087fOEq2k8hTc/nydJm57Pj3v5fP4PSqRR6oYkTaUAAAAASUVORK5CYII=');\n  background-size: cover;\n  display: block;\n  margin: 4px 0 0 4px;\n}\n.fr-generator-container .dnd-container.edit .fr-tooltip-container {\n  position: absolute;\n  width: 160px;\n  left: 50%;\n  white-space: initial !important;\n  bottom: 30px;\n  text-align: center;\n  background: #2b222a;\n  padding: 4px;\n  margin-left: -77px;\n  border-radius: 4px;\n  color: #efefef;\n  font-size: 13px;\n  cursor: auto;\n  z-index: 99999;\n  transition: all 0.5s ease;\n  opacity: 0;\n  visibility: hidden;\n  word-wrap: break-word;\n}\n.fr-generator-container .dnd-container.edit .fr-tooltip-triangle {\n  position: absolute;\n  left: 50%;\n  border-left: 5px solid transparent;\n  border-right: 5px solid transparent;\n  border-top: 5px solid #2b222a;\n  transition: all 0.5s ease;\n  content: ' ';\n  font-size: 0;\n  line-height: 0;\n  margin-left: -5px;\n  width: 0;\n  bottom: -5px;\n}\n.fr-generator-container .dnd-container.edit .fr-tooltip-toggle::before,\n.fr-generator-container .dnd-container.edit .fr-tooltip-toggle::after {\n  color: #efefef;\n  font-size: 13px;\n  opacity: 0;\n  pointer-events: none;\n  text-align: center;\n}\n.fr-generator-container .dnd-container.edit .fr-tooltip-toggle:focus::before,\n.fr-generator-container .dnd-container.edit .fr-tooltip-toggle:focus::after,\n.fr-generator-container .dnd-container.edit .fr-tooltip-toggle:hover::before,\n.fr-generator-container .dnd-container.edit .fr-tooltip-toggle:hover::after {\n  opacity: 1;\n  transition: all 0.75s ease;\n}\n.fr-generator-container .dnd-container.edit .fr-slider {\n  display: flex;\n  width: 100%;\n  align-items: center;\n}\n.fr-generator-container .dnd-container.edit .fr-map {\n  display: flex;\n  flex-wrap: wrap;\n}\n.frg-options-list .fr-list-1 .fr-field.fr-field-object {\n  flex: 1;\n}\n.frg-options-list .fr-list-1 .fr-field.fr-field-inline > div:first-child {\n  display: none;\n}\n.frg-options-list .frg-options-input:first-child {\n  margin-right: 6px;\n}\n.frg-options-list .frg-options-input .fr-content.fr-content-inline {\n  max-width: 96px;\n  min-width: 96px;\n}\n";
+styleInject(css_248z$4);
+
+var _excluded$1 = ["fixedName", "settingsWidgets", "onCanvasSelect", "locale"];
+var Generator = /*#__PURE__*/forwardRef(function (_ref, ref) {
+  var fixedName = _ref.fixedName,
+    settingsWidgets = _ref.settingsWidgets,
+    onCanvasSelect = _ref.onCanvasSelect,
+    _ref$locale = _ref.locale,
+    locale = _ref$locale === void 0 ? 'cn' : _ref$locale,
+    props = _objectWithoutProperties(_ref, _excluded$1);
+  var _useTranslation = useTranslation(),
+    i18n = _useTranslation.i18n;
+  useEffect(function () {
+    i18n.changeLanguage(locale);
+  }, [locale]);
+  return /*#__PURE__*/React.createElement(Provider$1, _extends({
+    ref: ref
+  }, props), /*#__PURE__*/React.createElement("div", {
+    className: "fr-generator-container"
+  }, /*#__PURE__*/React.createElement(Sidebar, {
+    fixedName: fixedName
+  }), /*#__PURE__*/React.createElement(Canvas, {
+    onSelect: onCanvasSelect
+  }), /*#__PURE__*/React.createElement(Settings, {
+    widgets: settingsWidgets
+  })));
+});
+Generator.Provider = Provider$1;
+Generator.Sidebar = Sidebar;
+Generator.Canvas = Canvas;
+Generator.Settings = Settings;
+
+export default Generator;
+export { defaultCommonSettings, defaultGlobalSettings, defaultSettings, deserialize, fromSetting, serialize, serializeToDraft, serializeUtil, toSetting };