@luck-design-biz/luckda 0.0.27 → 1.0.0-10-alpha

package/es/lowcode/engine/tools/initDS.js

@@ -0,0 +1,263 @@
+import _toArray from "@babel/runtime/helpers/esm/toArray";
+import _regeneratorRuntime from "@babel/runtime/helpers/esm/regeneratorRuntime";
+import _objectSpread from "@babel/runtime/helpers/esm/objectSpread2";
+import _asyncToGenerator from "@babel/runtime/helpers/esm/asyncToGenerator";
+import _classCallCheck from "@babel/runtime/helpers/esm/classCallCheck";
+import _createClass from "@babel/runtime/helpers/esm/createClass";
+import { isNil, reduce, isArray } from 'lodash';
+import { request } from '@luck-design-biz/base/utils';
+import usePageDataStore from "../provider/ContextProvider/usePageDataStore";
+import { useStateStore } from "../provider/ContextProvider/usePageVar";
+import { executeCode } from "./helper";
+var parseVar = function parseVar(ctx, input) {
+  if (isNil(input)) {
+    return null;
+  }
+  try {
+    return executeCode(ctx, "function() {return ".concat(input, "}"));
+  } catch (err) {
+    return input;
+  }
+};
+var Task = /*#__PURE__*/function () {
+  function Task(ctx, props) {
+    _classCallCheck(this, Task);
+    this.ctx = ctx;
+    this.name = props.name;
+    this.props = props;
+  }
+  _createClass(Task, [{
+    key: "run",
+    value: function () {
+      var _run = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime().mark(function _callee(_params, _data) {
+        var _this = this;
+        var _this$props, willFetch, didFetch, onError, _this$props$data, url, params, body, method, defaultValue, vars, config;
+        return _regeneratorRuntime().wrap(function _callee$(_context) {
+          while (1) switch (_context.prev = _context.next) {
+            case 0:
+              _this$props = this.props, willFetch = _this$props.willFetch, didFetch = _this$props.didFetch, onError = _this$props.onError;
+              _this$props$data = this.props.data, url = _this$props$data.url, params = _this$props$data.params, body = _this$props$data.body, method = _this$props$data.method, defaultValue = _this$props$data.defaultValue;
+              vars = {
+                params: isNil(params) || params === '' ? {} : parseVar(this.ctx, params),
+                data: isNil(body) || body === '' ? {} : parseVar(this.ctx, body)
+              };
+              config = {
+                headers: {}
+              };
+              if (willFetch) {
+                executeCode(this.ctx, willFetch, ['vars', 'config'], vars, config);
+              }
+              return _context.abrupt("return", request(parseVar(this.ctx, url), _objectSpread({
+                params: _objectSpread(_objectSpread({}, vars.params), _params),
+                data: _objectSpread(_objectSpread({}, vars.data), _data),
+                method: parseVar(this.ctx, method)
+              }, config)).then(function (res) {
+                if (res.code === 1) {
+                  var list = res.list,
+                    detail = res.detail;
+                  var content;
+                  if (list.length === 1) {
+                    content = detail[list[0]];
+                  } else {
+                    content = list.map(function (_id) {
+                      return detail[_id];
+                    });
+                  }
+                  if (didFetch) {
+                    return executeCode(_this.ctx, didFetch, ['content', 'origin'], content, res);
+                  }
+                  return content;
+                } else if (onError) {
+                  executeCode(_this.ctx, onError, ['error'], res);
+                }
+                if (defaultValue) {
+                  return parseVar(_this.ctx, defaultValue);
+                }
+              }));
+            case 6:
+            case "end":
+              return _context.stop();
+          }
+        }, _callee, this);
+      }));
+      function run(_x, _x2) {
+        return _run.apply(this, arguments);
+      }
+      return run;
+    }()
+  }, {
+    key: "load",
+    value: function () {
+      var _load = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime().mark(function _callee2(params, data) {
+        var _this2 = this;
+        var content;
+        return _regeneratorRuntime().wrap(function _callee2$(_context2) {
+          while (1) switch (_context2.prev = _context2.next) {
+            case 0:
+              _context2.next = 2;
+              return this.run(params, data);
+            case 2:
+              content = _context2.sent;
+              useStateStore.setState(function (store) {
+                store.state[_this2.name] = content;
+              });
+              return _context2.abrupt("return", content);
+            case 5:
+            case "end":
+              return _context2.stop();
+          }
+        }, _callee2, this);
+      }));
+      function load(_x3, _x4) {
+        return _load.apply(this, arguments);
+      }
+      return load;
+    }()
+  }]);
+  return Task;
+}();
+var wrapPromise = function wrapPromise(promise) {
+  var cache = {
+    status: 'pending',
+    data: null
+  };
+  var suspender = promise.then(function (r) {
+    cache.status = 'fulfilled';
+    cache.data = r;
+  }, function (e) {
+    cache.status = 'rejected';
+    cache.data = e;
+  });
+  return {
+    read: function read() {
+      if (cache.status === 'pending') {
+        throw suspender;
+      } else if (cache.status === 'rejected') {
+        throw cache.data;
+      } else if (cache.status === 'fulfilled') {
+        return cache.data;
+      }
+    }
+  };
+};
+export default function initialize(ctx) {
+  var pageVars = usePageDataStore.getState().pageData.props.vars;
+  if (isNil(pageVars)) return null;
+  var remoteApis = new Map();
+  var _reduce = reduce(pageVars, function (ret, val) {
+      if (val.type === 'var') {
+        ret[0][val.name] = parseVar(ctx, val.data);
+      } else if (val.type === 'api') {
+        var _val$data = val.data,
+          auto = _val$data.auto,
+          taskType = _val$data.taskType;
+        var task = new Task(ctx, val);
+        remoteApis.set(val.name, task);
+        if (!auto) return ret;
+        if (taskType === 'serial') {
+          ret.push(task);
+        } else if (taskType === 'parallel') {
+          var lastIndex = ret.length - 1;
+          if (lastIndex > 0 && isArray(ret[lastIndex])) {
+            ret[lastIndex].push(task);
+          } else {
+            ret.push([task]);
+          }
+        }
+      }
+      return ret;
+    }, [{}]),
+    _reduce2 = _toArray(_reduce),
+    variables = _reduce2[0],
+    autoTasks = _reduce2.slice(1);
+  useStateStore.getState().initialize(variables);
+  ctx._initRemoteApiMap(remoteApis);
+  function run() {
+    return _run2.apply(this, arguments);
+  }
+  function _run2() {
+    _run2 = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime().mark(function _callee3() {
+      var result, _loop, i;
+      return _regeneratorRuntime().wrap(function _callee3$(_context5) {
+        while (1) switch (_context5.prev = _context5.next) {
+          case 0:
+            result = {};
+            _loop = /*#__PURE__*/_regeneratorRuntime().mark(function _loop(i) {
+              var contents, _loop2, j, content;
+              return _regeneratorRuntime().wrap(function _loop$(_context4) {
+                while (1) switch (_context4.prev = _context4.next) {
+                  case 0:
+                    if (!isArray(autoTasks[i])) {
+                      _context4.next = 13;
+                      break;
+                    }
+                    _context4.next = 3;
+                    return Promise.all(autoTasks[i].map(function (t) {
+                      return t.run();
+                    }));
+                  case 3:
+                    contents = _context4.sent;
+                    _loop2 = /*#__PURE__*/_regeneratorRuntime().mark(function _loop2(j) {
+                      return _regeneratorRuntime().wrap(function _loop2$(_context3) {
+                        while (1) switch (_context3.prev = _context3.next) {
+                          case 0:
+                            useStateStore.setState(function (store) {
+                              store.state[autoTasks[i][j].name] = contents[j];
+                            });
+                          case 1:
+                          case "end":
+                            return _context3.stop();
+                        }
+                      }, _loop2);
+                    });
+                    _context4.t0 = _regeneratorRuntime().keys(autoTasks[i]);
+                  case 6:
+                    if ((_context4.t1 = _context4.t0()).done) {
+                      _context4.next = 11;
+                      break;
+                    }
+                    j = _context4.t1.value;
+                    return _context4.delegateYield(_loop2(j), "t2", 9);
+                  case 9:
+                    _context4.next = 6;
+                    break;
+                  case 11:
+                    _context4.next = 17;
+                    break;
+                  case 13:
+                    _context4.next = 15;
+                    return autoTasks[i].run();
+                  case 15:
+                    content = _context4.sent;
+                    useStateStore.setState(function (store) {
+                      store.state[autoTasks[i].name] = content;
+                    });
+                  case 17:
+                  case "end":
+                    return _context4.stop();
+                }
+              }, _loop);
+            });
+            _context5.t0 = _regeneratorRuntime().keys(autoTasks);
+          case 3:
+            if ((_context5.t1 = _context5.t0()).done) {
+              _context5.next = 8;
+              break;
+            }
+            i = _context5.t1.value;
+            return _context5.delegateYield(_loop(i), "t2", 6);
+          case 6:
+            _context5.next = 3;
+            break;
+          case 8:
+            return _context5.abrupt("return", result);
+          case 9:
+          case "end":
+            return _context5.stop();
+        }
+      }, _callee3);
+    }));
+    return _run2.apply(this, arguments);
+  }
+  return wrapPromise(run());
+}

package/es/lowcode/engine/tools/useCanvasRender.js

@@ -0,0 +1,81 @@
+import _extends from "@babel/runtime/helpers/esm/extends";
+import _regeneratorRuntime from "@babel/runtime/helpers/esm/regeneratorRuntime";
+import _asyncToGenerator from "@babel/runtime/helpers/esm/asyncToGenerator";
+import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
+var _excluded = ["props", "children"],
+  _excluded2 = ["id", "component", "name", "desc", "icon", "group", "groupName", "order"];
+import React, { useRef } from 'react';
+import { dynamic } from 'umi';
+import { useMemoizedFn, useCreation } from 'ahooks';
+import { upperFirst, isNil } from 'lodash';
+import { useContext } from "../provider/ContextProvider";
+import { LC_BUILDIN_UNIT_KEY_LIST, RUNTIME } from "../../constants";
+import { executeCode } from "../tools/helper";
+export default function useCanvasRender(data, deps) {
+  var dynamicCompMap = useRef({});
+  var ctx = useContext();
+  var render = useMemoizedFn(function () {
+    var _ref = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {},
+      props = _ref.props,
+      children = _ref.children,
+      childrenMap = _objectWithoutProperties(_ref, _excluded);
+    if (props && !LC_BUILDIN_UNIT_KEY_LIST.includes(props.id)) {
+      var _rest$advance;
+      var id = props.id,
+        component = props.component,
+        name = props.name,
+        desc = props.desc,
+        icon = props.icon,
+        group = props.group,
+        groupName = props.groupName,
+        order = props.order,
+        rest = _objectWithoutProperties(props, _excluded2);
+      if (!dynamicCompMap.current[component]) {
+        dynamicCompMap.current[component] = dynamic({
+          loader: function () {
+            var _loader = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime().mark(function _callee() {
+              var _runtime, _yield$import, _Comp;
+              return _regeneratorRuntime().wrap(function _callee$(_context) {
+                while (1) switch (_context.prev = _context.next) {
+                  case 0:
+                    _runtime = upperFirst(ctx.runtime);
+                    _context.next = 3;
+                    return import("../../view/lc-components/".concat(component, "/Function").concat(_runtime));
+                  case 3:
+                    _yield$import = _context.sent;
+                    _Comp = _yield$import.default;
+                    return _context.abrupt("return", _Comp);
+                  case 6:
+                  case "end":
+                    return _context.stop();
+                }
+              }, _callee);
+            }));
+            function loader() {
+              return _loader.apply(this, arguments);
+            }
+            return loader;
+          }()
+        });
+      }
+      var renderable = true;
+      if (ctx.runtime !== RUNTIME.DESIGN && (_rest$advance = rest.advance) !== null && _rest$advance !== void 0 && _rest$advance.render) {
+        renderable = rest.advance.render.value && (isNil(rest.advance.render.code) ? true : executeCode(ctx, rest.advance.render.code));
+      }
+      if (!renderable) return null;
+      var Comp = dynamicCompMap.current[component];
+      return /*#__PURE__*/React.createElement(Comp, _extends({
+        key: id,
+        id: id
+      }, rest), (children === null || children === void 0 ? void 0 : children.length) > 0 ? children.map(function (_id) {
+        return render(childrenMap[_id]);
+      }) : null);
+    }
+    return (children === null || children === void 0 ? void 0 : children.length) > 0 ? children.map(function (_id) {
+      return render(childrenMap[_id]);
+    }) : null;
+  });
+  return useCreation(function () {
+    return render(data);
+  }, deps || [data, ctx.state]);
+}

package/es/lowcode/engine/tools/useCombinedRefs.js

@@ -0,0 +1,15 @@
+import { useRef } from 'react';
+import { useCreation } from 'ahooks';
+var useCombinedRefs = function useCombinedRefs(forwardedRef) {
+  var innerRef = useRef(null);
+  useCreation(function () {
+    if (!forwardedRef) return;
+    if (typeof forwardedRef === 'function') {
+      forwardedRef(innerRef.current);
+    } else {
+      forwardedRef.current = innerRef.current;
+    }
+  }, [forwardedRef]);
+  return forwardedRef || innerRef;
+};
+export default useCombinedRefs;

package/es/lowcode/engine/tools/usePromiseState.js

@@ -0,0 +1,24 @@
+import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
+import { useRef, useState, useCallback } from 'react';
+import { useUpdateLayoutEffect } from 'ahooks';
+var usePromiseState = function usePromiseState(initialState) {
+  var _useState = useState(initialState),
+    _useState2 = _slicedToArray(_useState, 2),
+    state = _useState2[0],
+    setState = _useState2[1];
+  var promiseRef = useRef(null);
+  var setStatePromise = useCallback(function (_state) {
+    return new Promise(function (resolve) {
+      promiseRef.current = resolve;
+      setState(_state);
+    });
+  }, []);
+  useUpdateLayoutEffect(function () {
+    if (promiseRef.current) {
+      promiseRef.current(state);
+      promiseRef.current = null;
+    }
+  }, [state]);
+  return [state, setStatePromise];
+};
+export default usePromiseState;

package/es/lowcode/index.js

@@ -1,3 +1,3 @@
 export { default as Painter } from "./painter";
 export { default as View } from "./view";
-// export * as dataProcess  from './engine/tools/dataProcess';
+export { default as Preview } from "./preview";

package/es/lowcode/painter/Components.js

@@ -1,12 +1,15 @@
+import _extends from "@babel/runtime/helpers/esm/extends";
 import _objectSpread from "@babel/runtime/helpers/esm/objectSpread2";
 import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
 import React, { useState } from 'react';
 import { Icon, Input, Tabs } from 'luck-design/antd';
 import { useMemoizedFn, useCreation } from 'ahooks';
 import { formatMessage } from '@luck-design-biz/base/utils';
-import { useLDContext } from "../engine/provider/ContextProvider";
+import { useContext } from "../engine/provider/ContextProvider";
+import { useDraggable } from '@dnd-kit/core';
 import styles from "./style/components.less";
 import data from "../engine/meta/components-list.json";
+import { Action } from "./components/DragDrop/DragDropContext";
 var TabPane = Tabs.TabPane;
 var Search = Input.Search;
 var BaseCom = function BaseCom(_ref) {
@@ -28,7 +31,7 @@ var BaseCom = function BaseCom(_ref) {
     }).filter(function (group) {
       return group.components.length > 0;
     });
-  }, [data]);
+  }, [searchTerm]);
   return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("div", {
     className: styles['components-search']
   }, /*#__PURE__*/React.createElement(Search, {
@@ -44,30 +47,53 @@ var BaseCom = function BaseCom(_ref) {
       key: group.group,
       className: styles['components-wrapper']
     }, /*#__PURE__*/React.createElement("h3", null, group.groupName), group.components.map(function (item) {
-      return /*#__PURE__*/React.createElement("div", {
+      return /*#__PURE__*/React.createElement(CompItem, {
         key: item.component,
-        className: styles['components-item'],
-        onClick: function onClick() {
-          return onComponentClick(item);
-        }
-      }, /*#__PURE__*/React.createElement("div", {
-        className: styles['icon-wrapper']
-      }, /*#__PURE__*/React.createElement(Icon, {
-        type: item.icon || 'home'
-      })), /*#__PURE__*/React.createElement("div", {
-        className: styles['text-content']
-      }, /*#__PURE__*/React.createElement("span", null, item.name)));
+        item: item,
+        onComponentClick: onComponentClick
+      });
     }));
   })));
 };
+var CompItem = function CompItem(_ref2) {
+  var item = _ref2.item,
+    onComponentClick = _ref2.onComponentClick;
+  // console.log('CompItem', item.component);
+  var _useDraggable = useDraggable({
+      id: 'comlist-' + item.component,
+      data: {
+        component: item,
+        action: Action.ADD
+      }
+    }),
+    attributes = _useDraggable.attributes,
+    listeners = _useDraggable.listeners,
+    transform = _useDraggable.transform,
+    setNodeRef = _useDraggable.setNodeRef;
+  return /*#__PURE__*/React.createElement("div", _extends({
+    ref: setNodeRef
+  }, listeners, attributes, {
+    key: item.component,
+    className: styles['components-item'],
+    onClick: function onClick() {
+      return onComponentClick(item);
+    }
+  }), /*#__PURE__*/React.createElement("div", {
+    className: styles['icon-wrapper']
+  }, /*#__PURE__*/React.createElement(Icon, {
+    type: item.icon || 'home'
+  })), /*#__PURE__*/React.createElement("div", {
+    className: styles['text-content']
+  }, /*#__PURE__*/React.createElement("span", null, item.name)));
+};
 
 /**
  * 组件清单
  */
-var Components = function Components(_ref2) {
-  var _ref2$dataset = _ref2.dataset,
-    dataset = _ref2$dataset === void 0 ? 'test' : _ref2$dataset;
-  var context = useLDContext();
+var Components = function Components(_ref3) {
+  var _ref3$dataset = _ref3.dataset,
+    dataset = _ref3$dataset === void 0 ? 'test' : _ref3$dataset;
+  var context = useContext();
   var onComponentClick = useMemoizedFn(function (data) {
     context.$publisher(context.topics.COMPONENT_SETTING_CLICK, {
       data: data
@@ -95,10 +121,10 @@ var Components = function Components(_ref2) {
     onComponentClick: onComponentClick
   })), /*#__PURE__*/React.createElement(TabPane, {
     tab: formatMessage({
-      id: 'ccm.dev.page.set.components.dataset',
-      label: '数据集字段'
+      id: 'ccm.dev.page.set.components.custom',
+      label: '自定义组件'
     }),
     key: "dataset"
-  })));
+  }, "\u656C\u8BF7\u671F\u5F85")));
 };
 export default Components;

package/es/lowcode/painter/Design.js

@@ -1,97 +1,83 @@
-import React, { useRef, useEffect } from 'react';
-import { useEventListener } from 'ahooks';
-import { useLDContext } from "../engine/provider/ContextProvider";
+import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
+import React, { useRef, useState, useEffect } from 'react';
+import { RawIntlProvider, getLocale, getIntl, localeInfo, history } from 'umi';
+import { useMemoizedFn } from 'ahooks';
+import moment from 'moment';
+import { ConfigProvider } from 'luck-design/antd';
+import { formatMessage } from '@luck-design-biz/base/utils';
+import { getNeedPrompt } from "../engine/provider/ContextProvider";
+import DesignToolbar from "./DesignToolbar";
+import DesignOperator from "./DesignOperator";
 import Page from "../view/Page";
-import { CELL_CLASS_NAME } from "../constants";
 import styles from "./style/design.less";
 var Design = function Design() {
-  var context = useLDContext();
-  var detectorRef = useRef(null);
-  var selectorRef = useRef(null);
+  var _localeInfo$locale;
   var simulatorRef = useRef(null);
-  var hoverCellRef = useRef(null);
-  var activeCellRef = useRef(null);
-  useEventListener('mousemove', function (event) {
-    var elem = event.target;
-    var targetCell = elem.closest(".".concat(CELL_CLASS_NAME));
-    if (targetCell && !targetCell.isEqualNode(hoverCellRef.current) && !targetCell.isEqualNode(activeCellRef.current)) {
-      var _id = targetCell.id;
-      hoverCellRef.current = targetCell;
-      context.$publisher(context.topics.COMPONENT_HOVER, {
-        id: _id,
-        cellNode: targetCell
-      });
-    } else if (!targetCell || targetCell.isEqualNode(activeCellRef.current)) {
-      hoverCellRef.current = null;
-      context.$publisher(context.topics.COMPONENT_HOVER, null);
-    }
-  }, {
-    target: simulatorRef
+  var _useState = useState(function () {
+      return getLocale();
+    }),
+    _useState2 = _slicedToArray(_useState, 2),
+    locale = _useState2[0],
+    setLocale = _useState2[1];
+  var _useState3 = useState(function () {
+      return getIntl(getLocale(), true);
+    }),
+    _useState4 = _slicedToArray(_useState3, 2),
+    intl = _useState4[0],
+    setIntl = _useState4[1];
+  var unblock = useMemoizedFn(function () {
+    if (getNeedPrompt()) return confirm("".concat(formatMessage({
+      id: 'app.base.operate.comfire.leave',
+      label: '离开当前页面？'
+    }), "\n").concat(formatMessage({
+      id: 'app.base.operate.comfire.message.leave',
+      label: '系统可能不会保存您所做的更改。'
+    })));
+    return true;
   });
-  useEventListener('mouseleave', function () {
-    if (hoverCellRef.current) {
-      hoverCellRef.current = null;
-      context.$publisher(context.topics.COMPONENT_HOVER, null);
+  var handleBeforeUnload = useMemoizedFn(function (event) {
+    if (getNeedPrompt()) {
+      event.preventDefault();
+      event.returnValue = null;
+      return null;
     }
-  }, {
-    target: simulatorRef
-  });
-  useEventListener('click', function (event) {
-    var elem = event.target;
-    var targetCell = elem.closest(".".concat(CELL_CLASS_NAME));
-    if (!targetCell || targetCell.isEqualNode(activeCellRef.current)) return;
-    activeCellRef.current = targetCell;
-    hoverCellRef.current = null;
-    context.$publisher(context.topics.COMPONENT_HOVER, null);
-    context.$publisher(context.topics.COMPONENT_ACTIVE, {
-      id: activeCellRef.current.id,
-      cellNode: activeCellRef.current
-    });
-  }, {
-    target: simulatorRef
   });
   useEffect(function () {
-    var setRect = function setRect(node, cellNode) {
-      node.style.left = "".concat(cellNode.offsetLeft, "px");
-      node.style.top = "".concat(cellNode.offsetTop, "px");
-      node.style.width = "".concat(cellNode.offsetWidth, "px");
-      node.style.height = "".concat(cellNode.offsetHeight, "px");
-    };
-    var hcid = context.$subscriber(context.topics.COMPONENT_HOVER).on(function (payload) {
-      if (payload.id) {
-        detectorRef.current.style.display = 'block';
-        setRect(detectorRef.current, payload.cellNode);
-      } else {
-        detectorRef.current.style.display = 'none';
-      }
-    }).watch();
-    var acid = context.$subscriber(context.topics.COMPONENT_ACTIVE).on(function (payload) {
-      if (payload.id) {
-        selectorRef.current.style.display = 'block';
-        setRect(selectorRef.current, payload.cellNode);
-      } else {
-        selectorRef.current.style.display = 'none';
-      }
-    }).watch();
+    window.addEventListener('beforeunload', handleBeforeUnload);
+    history.block(function () {
+      return unblock();
+    });
     return function () {
-      context.$unsubscriber(context.topics.COMPONENT_HOVER, hcid);
-      context.$unsubscriber(context.topics.COMPONENT_ACTIVE, acid);
+      window.removeEventListener('beforeunload', handleBeforeUnload);
+      history.block(function () {
+        return true;
+      });
     };
   }, []);
+  var handleLangChange = useMemoizedFn(function (_locale) {
+    if (moment !== null && moment !== void 0 && moment.locale) {
+      var _localeInfo$_locale;
+      moment.locale(((_localeInfo$_locale = localeInfo[_locale]) === null || _localeInfo$_locale === void 0 ? void 0 : _localeInfo$_locale.momentLocale) || 'en');
+    }
+    setLocale(_locale);
+    setIntl(getIntl(_locale));
+  });
   return /*#__PURE__*/React.createElement("div", {
     className: styles['lc-painter-design']
-  }, /*#__PURE__*/React.createElement("div", {
-    id: "lc-detector",
-    ref: detectorRef,
-    className: styles.detector
+  }, /*#__PURE__*/React.createElement(DesignToolbar, {
+    locale: locale,
+    onLangChange: handleLangChange
   }), /*#__PURE__*/React.createElement("div", {
-    id: "lc-selector",
-    ref: selectorRef,
-    className: styles.selector
-  }), /*#__PURE__*/React.createElement(Page, {
+    className: styles['lc-painter-design-workspace']
+  }, /*#__PURE__*/React.createElement(DesignOperator, {
+    canvas: simulatorRef
+  }), /*#__PURE__*/React.createElement(ConfigProvider, {
+    locale: ((_localeInfo$locale = localeInfo[locale]) === null || _localeInfo$locale === void 0 ? void 0 : _localeInfo$locale.antd) || {}
+  }, /*#__PURE__*/React.createElement(RawIntlProvider, {
+    value: intl
+  }, /*#__PURE__*/React.createElement(Page, {
     ref: simulatorRef,
-    pageCode: "mk2i87qb",
-    className: styles.simulator
-  }));
+    className: styles['lc-painter-design-simulator']
+  })))));
 };
 export default Design;