@luck-design-biz/luckda 0.0.24-1 → 0.0.25-1

package/lib/lowcode/painter/DesignToolbar.js

@@ -0,0 +1,170 @@
+"use strict";
+
+var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
+var _react = _interopRequireWildcard(require("react"));
+var _classnames = _interopRequireDefault(require("classnames"));
+var _ahooks = require("ahooks");
+var _antd = require("luck-design/antd");
+var _utils = require("@luck-design-biz/base/utils");
+var _ContextProvider = require("../engine/provider/ContextProvider");
+var _JsonEditor = _interopRequireDefault(require("../painter/components/code-editor/JsonEditor"));
+var _constants = require("../constants");
+var _toolbar = require("./services/toolbar");
+var _design = _interopRequireDefault(require("./style/design.less"));
+var DesignToolbar = function DesignToolbar(_ref) {
+  var locale = _ref.locale,
+    onLangChange = _ref.onLangChange;
+  var editorRef = (0, _react.useRef)();
+  var context = (0, _ContextProvider.useContext)();
+  var _usePageData = (0, _ContextProvider.usePageData)(),
+    _usePageData2 = (0, _slicedToArray2.default)(_usePageData, 2),
+    pageData = _usePageData2[0],
+    setPageData = _usePageData2[1].setPageData;
+  var _ref2 = (0, _ContextProvider.useRemoteSource)() || {},
+    pageinfo = _ref2.pageinfo;
+  var _useState = (0, _react.useState)(null),
+    _useState2 = (0, _slicedToArray2.default)(_useState, 2),
+    langList = _useState2[0],
+    setLangList = _useState2[1];
+  var _useState3 = (0, _react.useState)('pc'),
+    _useState4 = (0, _slicedToArray2.default)(_useState3, 2),
+    activedTarget = _useState4[0],
+    setActivedTarget = _useState4[1];
+  var _useState5 = (0, _react.useState)(false),
+    _useState6 = (0, _slicedToArray2.default)(_useState5, 2),
+    show = _useState6[0],
+    setShow = _useState6[1];
+  (0, _react.useEffect)(function () {
+    var topicId = context.$subscriber(context.topics.LANG_SETTING_SELECT).on(function (_ref3) {
+      var _langList = _ref3.langList;
+      return setLangList(_langList);
+    }).watch();
+    return function () {
+      return context.$unsubscriber(context.topics.LANG_SETTING_SELECT, topicId);
+    };
+  }, []);
+  var handleSave = (0, _ahooks.useMemoizedFn)(function () {
+    var _pageinfo$relationshi;
+    (0, _toolbar.updatePageData)({}, {
+      pageData: JSON.stringify(pageData),
+      pageCode: pageinfo === null || pageinfo === void 0 || (_pageinfo$relationshi = pageinfo.relationship) === null || _pageinfo$relationshi === void 0 ? void 0 : _pageinfo$relationshi.pageCode
+    }).then(function (_ref4) {
+      var code = _ref4.code;
+      if (code === 1) {
+        (0, _utils.showPop)((0, _utils.formatMessage)({
+          id: 'app.base.tip.operate.success'
+        }), null, 'success');
+      }
+    });
+  }, []);
+  var handleOk = (0, _ahooks.useMemoizedFn)(function () {
+    var code = editorRef.current.editor.getValue();
+    try {
+      var data = JSON.parse(code);
+      setPageData(data);
+      setShow(false);
+    } catch (e) {
+      _antd.message.warning((0, _utils.formatMessage)({
+        id: 'luckda.lowcode.error.pagedata',
+        label: '页面数据错误'
+      }));
+    }
+  });
+  return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement("div", {
+    className: _design.default['lc-painter-design-toolbar']
+  }, /*#__PURE__*/_react.default.createElement(_antd.Select, {
+    size: "small",
+    value: langList ? locale : undefined,
+    className: _design.default['i18n-selecter'],
+    style: {
+      fontSize: 12
+    },
+    onSelect: onLangChange
+  }, langList === null || langList === void 0 ? void 0 : langList.map(function (item) {
+    return /*#__PURE__*/_react.default.createElement(_antd.Select.Option, {
+      key: item.field,
+      value: item.field
+    }, item.title);
+  })), /*#__PURE__*/_react.default.createElement("span", {
+    className: (0, _classnames.default)(_design.default['toolbar-item'], (0, _defineProperty2.default)({}, _design.default.actived, activedTarget === 'pc')),
+    onClick: function onClick() {
+      return setActivedTarget('pc');
+    }
+  }, /*#__PURE__*/_react.default.createElement(_antd.Icon, {
+    type: "laptop"
+  })), /*#__PURE__*/_react.default.createElement("span", {
+    className: (0, _classnames.default)(_design.default['toolbar-item'], (0, _defineProperty2.default)({}, _design.default.actived, activedTarget === 'mobile')),
+    onClick: function onClick() {
+      return setActivedTarget('mobile');
+    }
+  }, /*#__PURE__*/_react.default.createElement(_antd.Icon, {
+    type: "mobile"
+  })), /*#__PURE__*/_react.default.createElement(_antd.Divider, {
+    type: "vertical"
+  }), /*#__PURE__*/_react.default.createElement("span", {
+    style: {
+      width: 'auto',
+      fontSize: 12
+    },
+    className: _design.default['toolbar-item'],
+    onClick: function onClick() {
+      context.$publisher(context.topics.COMPONENT_ACTIVE, {
+        id: _constants.LC_BUILDIN_UNIT_KEY.PAGE_ROOT
+      });
+    }
+  }, "\u9875\u9762\u5C5E\u6027"), /*#__PURE__*/_react.default.createElement(_antd.Divider, {
+    type: "vertical"
+  }), /*#__PURE__*/_react.default.createElement(_antd.Button, {
+    size: "small",
+    style: {
+      fontSize: 12,
+      margin: '0 4px 0 2px'
+    }
+  }, "\u9884\u89C8"), /*#__PURE__*/_react.default.createElement(_antd.Button, {
+    size: "small",
+    type: "primary",
+    style: {
+      fontSize: 12,
+      padding: '0 7px 0 0'
+    }
+  }, /*#__PURE__*/_react.default.createElement("div", {
+    style: {
+      display: 'inline-block',
+      padding: '0 7px'
+    },
+    onClick: handleSave
+  }, "\u4FDD\u5B58"), /*#__PURE__*/_react.default.createElement("div", {
+    style: {
+      display: 'inline-block'
+    },
+    onClick: function onClick() {
+      return setShow(true);
+    }
+  }, /*#__PURE__*/_react.default.createElement(_antd.Icon, {
+    type: "eye"
+  })))), /*#__PURE__*/_react.default.createElement(_antd.Modal, {
+    visible: show,
+    width: 1024,
+    getContainer: function getContainer() {
+      return document.getElementById('lc-design-workspace');
+    },
+    zIndex: 3000,
+    bodyStyle: {
+      height: '70vh'
+    },
+    onOk: handleOk,
+    onCancel: function onCancel() {
+      return setShow(false);
+    }
+  }, /*#__PURE__*/_react.default.createElement(_JsonEditor.default, {
+    ref: editorRef
+  }, JSON.stringify(pageData, null, '\t'))));
+};
+var _default = exports.default = DesignToolbar;

package/lib/lowcode/painter/I18n.js

@@ -34,7 +34,7 @@ var formatDataFunc = function formatDataFunc(data) {
   }, {}));
 };
 var I18n = function I18n() {
-  var context = (0, _ContextProvider.useLDContext)();
+  var context = (0, _ContextProvider.useContext)();
   var _useState = (0, _react.useState)([]),
     _useState2 = (0, _slicedToArray2.default)(_useState, 2),
     langList = _useState2[0],

package/lib/lowcode/painter/Outline.js

@@ -20,14 +20,16 @@ var _ContextProvider = require("../engine/provider/ContextProvider");
 var _constants = require("../constants");
 var _dataProcess = require("../engine/tools/dataProcess");
 var _outline = _interopRequireDefault(require("./style/outline.less"));
+var _TreeEditor = _interopRequireDefault(require("./components/TreeEditor"));
 var _excluded = ["props", "children"];
 var TreeNode = _antd.Tree.TreeNode;
-var PAGE_CELL = [_constants.CELL_KEY.PAGE_HEADER, _constants.CELL_KEY.PAGE_CONTENT, _constants.CELL_KEY.PAGE_FOOTER];
 var Outline = function Outline(_ref) {
   var open = _ref.open;
-  var openModal = (0, _react.useRef)(void 0);
   var clickBySelf = (0, _react.useRef)(false);
-  var context = (0, _ContextProvider.useLDContext)();
+  var ctx = (0, _ContextProvider.useContext)();
+  var _usePageData = (0, _ContextProvider.usePageData)(),
+    _usePageData2 = (0, _slicedToArray2.default)(_usePageData, 1),
+    pageData = _usePageData2[0];
   var _useState = (0, _react.useState)(null),
     _useState2 = (0, _slicedToArray2.default)(_useState, 2),
     pageAndModal = _useState2[0],
@@ -47,34 +49,30 @@ var Outline = function Outline(_ref) {
   var latestModalExpandedKeysRef = (0, _ahooks.useLatest)(modalExpandedKeys);
   var lastPageExpandedKeysRef = (0, _ahooks.useLatest)(pageExpandedKeys);
   (0, _react.useEffect)(function () {
-    var _id = context.$subscriber(context.topics.COMPONENT_ACTIVE).on(function (payload) {
+    var _id = ctx.$subscriber(ctx.topics.COMPONENT_ACTIVE).on(function (payload) {
       setSelectedKey(payload.id);
       if (clickBySelf.current) {
         clickBySelf.current = false;
         return;
       }
-      if (openModal.current) {
-        setModalExpandedKeys((0, _lodash.uniq)([].concat((0, _toConsumableArray2.default)(latestModalExpandedKeysRef.current), (0, _toConsumableArray2.default)((0, _lodash.split)((0, _dataProcess.getPathById)(context.pageData, payload.id), '/')))));
+      var _split = (0, _lodash.split)((0, _dataProcess.getPathById)(pageData, payload.id), '/'),
+        _split2 = (0, _slicedToArray2.default)(_split, 1),
+        _root = _split2[0];
+      if (!_constants.LC_BUILDIN_UNIT_KEY_LIST.includes(_root)) {
+        setModalExpandedKeys((0, _lodash.uniq)([].concat((0, _toConsumableArray2.default)(latestModalExpandedKeysRef.current), (0, _toConsumableArray2.default)((0, _lodash.split)((0, _dataProcess.getPathById)(pageData, payload.id), '/')))));
       } else {
-        setPageExpandedKeys((0, _lodash.uniq)([].concat((0, _toConsumableArray2.default)(lastPageExpandedKeysRef.current), (0, _toConsumableArray2.default)((0, _lodash.split)((0, _dataProcess.getPathById)(context.pageData, payload.id), '/')))));
+        setPageExpandedKeys((0, _lodash.uniq)([].concat((0, _toConsumableArray2.default)(lastPageExpandedKeysRef.current), (0, _toConsumableArray2.default)((0, _lodash.split)((0, _dataProcess.getPathById)(pageData, payload.id), '/')))));
       }
     }).watch();
     return function () {
-      context.$unsubscriber(context.topics.COMPONENT_ACTIVE, _id);
+      ctx.$unsubscriber(ctx.topics.COMPONENT_ACTIVE, _id);
     };
-  }, [context.pageData]);
-  var handleSelect = function handleSelect(_key) {
+  }, [pageData]);
+  var handleSelect = (0, _ahooks.useMemoizedFn)(function (_key) {
     clickBySelf.current = true;
-    context.$publisher(context.topics.COMPONENT_ACTIVE, _key ? {
+    ctx.$publisher(ctx.topics.COMPONENT_ACTIVE, _key ? {
       id: _key
     } : null);
-  };
-  var handleOpenModal = (0, _ahooks.useMemoizedFn)(function (_key) {
-    var _comp = context.componentMap.get(_key);
-    var _prevComp = openModal.current ? context.componentMap.get(openModal.current) : null;
-    _prevComp === null || _prevComp === void 0 || _prevComp.api.doClose();
-    _comp.api.doOpen();
-    openModal.current = _key;
   });
   var render = (0, _ahooks.useMemoizedFn)(function (_ref2) {
     var props = _ref2.props,
@@ -85,7 +83,9 @@ var Outline = function Outline(_ref) {
         icon: /*#__PURE__*/_react.default.createElement(_antd.Icon, {
           type: "layout"
         }),
-        title: props.name,
+        title: /*#__PURE__*/_react.default.createElement(_TreeEditor.default, {
+          item: props
+        }),
         key: props.id
       }, (children === null || children === void 0 ? void 0 : children.length) && children.map(function (_id) {
         return render(childrenMap[_id]);
@@ -96,12 +96,12 @@ var Outline = function Outline(_ref) {
     });
   });
   (0, _ahooks.useDeepCompareLayoutEffect)(function () {
-    if (!context.pageData) {
+    if (!pageData) {
       return;
     }
-    var _reduce = (0, _lodash.reduce)(context.pageData.children, function (result, _id) {
-        var resultKey = PAGE_CELL.includes(_id) ? 'page' : 'modal';
-        result[resultKey][_id] = context.pageData[_id];
+    var _reduce = (0, _lodash.reduce)(pageData.children, function (result, _id) {
+        var resultKey = _constants.LC_BUILDIN_UNIT_KEY_LIST.includes(_id) ? 'page' : 'modal';
+        result[resultKey][_id] = pageData[_id];
         if (!result[resultKey].children) {
           result[resultKey].children = [];
         }
@@ -117,13 +117,13 @@ var Outline = function Outline(_ref) {
       page: render(page),
       modal: render(modal)
     });
-  }, [context.pageData]);
+  }, [pageData]);
   return /*#__PURE__*/_react.default.createElement("div", {
     className: _outline.default['lc-painter-outline']
   }, /*#__PURE__*/_react.default.createElement("div", {
-    className: (0, _classnames.default)(_outline.default['page-node'], (0, _defineProperty2.default)({}, _outline.default['page-node-active'], selectedKey === _constants.CELL_KEY.PAGE_ROOT)),
+    className: (0, _classnames.default)(_outline.default['page-node'], (0, _defineProperty2.default)({}, _outline.default['page-node-active'], selectedKey === _constants.LC_BUILDIN_UNIT_KEY.PAGE_ROOT)),
     onClick: function onClick() {
-      return handleSelect(_constants.CELL_KEY.PAGE_ROOT);
+      return handleSelect(_constants.LC_BUILDIN_UNIT_KEY.PAGE_ROOT);
     }
   }, /*#__PURE__*/_react.default.createElement(_antd.Icon, {
     type: "layout"
@@ -139,7 +139,7 @@ var Outline = function Outline(_ref) {
     type: "inner",
     hoverable: true,
     title: (0, _utils.formatMessage)({
-      id: 'luckda.lowcode.model',
+      id: 'luckda.lowcode.modal',
       label: '模态视图层'
     }),
     style: {
@@ -162,21 +162,29 @@ var Outline = function Outline(_ref) {
       var selected = _ref4.selected,
         node = _ref4.node;
       if (selected && node.props.pos.split('-').length === 2) {
-        handleOpenModal(_key);
+        // 选中节点是模态视图，则打开模态视图组件
+        ctx.$publisher(ctx.topics.COMPONENT_MODAL_TOGGLE, {
+          toggle: true,
+          id: _key
+        });
         handleSelect(_key);
       } else if (!selected && node.props.pos.split('-').length === 2) {
-        var _comp = context.componentMap.get(openModal.current);
-        _comp.api.doClose();
-        openModal.current = void 0;
+        // 取消选中节点是模态视图，则关闭模态视图
+        ctx.$publisher(ctx.topics.COMPONENT_MODAL_TOGGLE, {
+          toggle: false,
+          id: _key
+        });
         handleSelect(null);
       } else {
+        // 选中节点是模态视图下的子组件，则打开该组件的模态视图组件
         handleSelect(node.props.eventKey);
-        var _split = (0, _lodash.split)((0, _dataProcess.getPathById)(context.pageData, node.props.eventKey), '/'),
-          _split2 = (0, _slicedToArray2.default)(_split, 1),
-          parentModal = _split2[0];
-        if (!openModal.current || openModal.current !== parentModal) {
-          handleOpenModal(parentModal);
-        }
+        var _split3 = (0, _lodash.split)((0, _dataProcess.getPathById)(pageData, node.props.eventKey), '/'),
+          _split4 = (0, _slicedToArray2.default)(_split3, 1),
+          parentModal = _split4[0];
+        ctx.$publisher(ctx.topics.COMPONENT_MODAL_TOGGLE, {
+          toggle: true,
+          id: parentModal
+        });
       }
     },
     expandedKeys: modalExpandedKeys,
@@ -185,7 +193,10 @@ var Outline = function Outline(_ref) {
         node = _ref6.node;
       if (expanded && node.props.pos.split('-').length === 2) {
         handleSelect(null);
-        handleOpenModal(node.props.eventKey);
+        ctx.$publisher(ctx.topics.COMPONENT_MODAL_TOGGLE, {
+          toggle: true,
+          id: node.props.eventKey
+        });
       }
       setModalExpandedKeys(_keys);
     }
@@ -201,11 +212,9 @@ var Outline = function Outline(_ref) {
       var _ref9 = (0, _slicedToArray2.default)(_ref7, 1),
         _key = _ref9[0];
       var node = _ref8.node;
-      if (openModal.current) {
-        var _prevComp = context.componentMap.get(openModal.current);
-        _prevComp.api.doClose();
-        openModal.current = void 0;
-      }
+      ctx.$publisher(ctx.topics.COMPONENT_MODAL_TOGGLE, {
+        toggle: false
+      });
       handleSelect(node.props.eventKey);
     },
     expandedKeys: pageExpandedKeys,

package/lib/lowcode/painter/Panel.js

@@ -7,34 +7,44 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.default = void 0;
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
-var _objectSpread3 = _interopRequireDefault(require("@babel/runtime/helpers/objectSpread2"));
+var _objectSpread2 = _interopRequireDefault(require("@babel/runtime/helpers/objectSpread2"));
 var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
 var _react = _interopRequireWildcard(require("react"));
 var _ahooks = require("ahooks");
 var _antd = require("luck-design/antd");
 var _classnames = _interopRequireDefault(require("classnames"));
 var _lodash = require("lodash");
+var _utils = require("@luck-design-biz/base/utils");
 var _ContextProvider = require("../engine/provider/ContextProvider");
-var _PanelItem = _interopRequireDefault(require("./components/PanelItem"));
-var _panelItemFactory = _interopRequireDefault(require("../engine/factory/panel-item-factory"));
+var _AttrsPanel = _interopRequireDefault(require("./components/AttrsPanel"));
+var _StylePanel = _interopRequireDefault(require("./panel-section/StylePanel"));
+var _AdvancePanel = _interopRequireDefault(require("./components/AdvancePanel"));
 var _dataProcess = require("../engine/tools/dataProcess");
 var _panel = _interopRequireDefault(require("./style/panel.less"));
+var _constants = require("../constants");
+var _I18N_PREFIX_ = 'luckda.lowcode.painter.panel';
 var _TAB_LIST_ = [{
-  title: '属性',
+  title: (0, _utils.formatMessage)({
+    id: "".concat(_I18N_PREFIX_, ".attrs"),
+    label: '属性'
+  }),
   key: 'attrs'
 }, {
-  title: '样式',
-  key: 'styles'
+  title: (0, _utils.formatMessage)({
+    id: "".concat(_I18N_PREFIX_, ".css"),
+    label: '样式'
+  }),
+  key: 'css'
 }, {
-  title: '高级',
+  title: (0, _utils.formatMessage)({
+    id: "".concat(_I18N_PREFIX_, ".advance"),
+    label: '高级'
+  }),
   key: 'advance'
 }];
 var Panel = function Panel() {
-  var _nextRef$current, _nextRef$current2;
   var activeTabRef = (0, _react.useRef)(null);
   var underLineRef = (0, _react.useRef)(null);
-  var nextRef = (0, _react.useRef)(null);
-  var factory = (0, _react.useRef)(new _panelItemFactory.default());
   var _useState = (0, _react.useState)(null),
     _useState2 = (0, _slicedToArray2.default)(_useState, 2),
     activeNode = _useState2[0],
@@ -43,76 +53,60 @@ var Panel = function Panel() {
     _useState4 = (0, _slicedToArray2.default)(_useState3, 2),
     activeTabKey = _useState4[0],
     setActiveTabKey = _useState4[1];
-  var _useBoolean = (0, _ahooks.useBoolean)(false),
-    _useBoolean2 = (0, _slicedToArray2.default)(_useBoolean, 2),
-    open = _useBoolean2[0],
-    _useBoolean2$ = _useBoolean2[1],
-    setTrue = _useBoolean2$.setTrue,
-    setFalse = _useBoolean2$.setFalse;
-  var context = (0, _ContextProvider.useLDContext)();
-  var handleChange = (0, _ahooks.useMemoizedFn)(function (field, value) {
+  var context = (0, _ContextProvider.useContext)();
+  var _usePageData = (0, _ContextProvider.usePageData)(),
+    _usePageData2 = (0, _slicedToArray2.default)(_usePageData, 2),
+    pageData = _usePageData2[0],
+    setPageData = _usePageData2[1].setPageData;
+  var meta = (0, _ahooks.useCreation)(function () {
+    try {
+      return (0, _lodash.isNil)(activeNode) ? null : require("../engine/meta/".concat(activeNode.node.component.toLowerCase(), ".props.json"));
+    } catch (e) {
+      return null;
+    }
+  }, [activeNode]);
+  var handleChange = (0, _ahooks.useMemoizedFn)(function (field, value, repositioning) {
+    var cloneData = (0, _lodash.cloneDeep)(pageData);
+    if (field === 'enableHeader') {
+      if (value) {
+        var headerMeta = require("../engine/meta/pageheader.props.default.json");
+        (0, _dataProcess.add)(cloneData, _constants.LC_BUILDIN_UNIT_KEY.PAGE_ROOT, _constants.LC_BUILDIN_UNIT_KEY.PAGE_HEADER, (0, _objectSpread2.default)((0, _objectSpread2.default)({}, headerMeta), {}, {
+          buildIn: true
+        }));
+      } else {
+        (0, _dataProcess.deleteById)(cloneData, _constants.LC_BUILDIN_UNIT_KEY.PAGE_HEADER);
+      }
+    } else if (field === 'enableFooter') {
+      if (value) {
+        var footerMeta = require("../engine/meta/pagefooter.props.default.json");
+        (0, _dataProcess.add)(cloneData, _constants.LC_BUILDIN_UNIT_KEY.PAGE_ROOT, _constants.LC_BUILDIN_UNIT_KEY.PAGE_FOOTER, (0, _objectSpread2.default)((0, _objectSpread2.default)({}, footerMeta), {}, {
+          buildIn: true
+        }));
+      } else {
+        (0, _dataProcess.deleteById)(cloneData, _constants.LC_BUILDIN_UNIT_KEY.PAGE_FOOTER);
+      }
+    }
     var component = context.componentMap.get(activeNode.node.id);
     var _component$api$getSel = component.api.getSelfAndParentLCData(),
       node = _component$api$getSel.node;
-    var cloneData = (0, _lodash.cloneDeep)(context.pageData);
-    (0, _dataProcess.modifyById)(cloneData, activeNode.node.id, (0, _objectSpread3.default)((0, _objectSpread3.default)({}, node.props), {}, (0, _defineProperty2.default)({}, field, value)));
-    context._setPageData(cloneData).then(function (newData) {
+    var oldValue = (0, _defineProperty2.default)({}, field, (0, _lodash.get)(node.props, field));
+    var newNodeData = (0, _lodash.set)(node.props, field, value);
+    (0, _dataProcess.modifyById)(cloneData, activeNode.node.id, newNodeData);
+    setPageData(cloneData).then(function (newData) {
       context.$publisher(context.topics.COMPONENT_MODIFY, {
         id: activeNode.node.id,
-        pageData: (0, _lodash.cloneDeep)(newData)
+        pageData: (0, _lodash.cloneDeep)(newData),
+        oldValue: oldValue,
+        newValue: (0, _defineProperty2.default)({}, field, value)
+      });
+      if (repositioning) context.$publisher(context.topics.COMPONENT_REPOSITIONING, {
+        id: activeNode.node.id
       });
-    });
-    setFalse();
-  });
-  var renderPanelItems = (0, _ahooks.useMemoizedFn)(function (items) {
-    return items.map(function (item) {
-      var Comp = factory.current.getPanelItemFor((0, _lodash.startsWith)(item.type, '_') ? 'dynamic' : item.type, item.type);
-      if (item.type === 'group') {
-        return /*#__PURE__*/_react.default.createElement(Comp, {
-          key: item.key,
-          label: item.name,
-          defaultCollapsed: true
-        }, renderPanelItems(item.props));
-      }
-      console.log(11111, item.key, activeNode.node);
-      return /*#__PURE__*/_react.default.createElement(_PanelItem.default, {
-        key: item.key,
-        label: item.name
-      }, Comp && /*#__PURE__*/_react.default.createElement(Comp, {
-        defaultValue: activeNode.node[item.key],
-        next: function next() {
-          if (!item.next) return;
-          nextRef.current = {
-            name: item.next.name,
-            NextComp: renderPanelItems(item.next.props)
-          };
-          setTrue();
-        },
-        options: item.options,
-        disabled: item.disabled,
-        onChange: function onChange(value) {
-          return handleChange(item.key, value);
-        },
-        size: "small"
-      }));
     });
   });
-  var PropsComps = (0, _ahooks.useCreation)(function () {
-    var _meta;
-    try {
-      _meta = require("../engine/meta/".concat(activeNode.node.component.toLowerCase(), ".props.json"));
-    } catch (e) {
-      return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null);
-    }
-    return renderPanelItems(_meta.props);
-  }, [activeNode]);
-  (0, _react.useEffect)(function () {
-    if (!open) {
-      nextRef.current = null;
-    }
-  }, [open]);
   (0, _react.useEffect)(function () {
     var _id = context.$subscriber(context.topics.COMPONENT_ACTIVE).on(function (payload) {
+      setActiveTabKey('attrs');
       if (!payload.id) {
         setActiveNode(null);
         return;
@@ -127,12 +121,12 @@ var Panel = function Panel() {
       });
     }).watch();
     return function () {
-      context.$unsubscriber(context.topics.COMPONENT_ACTIVE, _id);
+      return context.$unsubscriber(context.topics.COMPONENT_ACTIVE, _id);
     };
-  }, [context.pageData]);
+  }, []);
   (0, _react.useLayoutEffect)(function () {
     underLineRef.current.style.left = "".concat(activeTabRef.current.offsetLeft + activeTabRef.current.offsetWidth / 2 - 10, "px");
-  }, [activeTabKey, !!activeNode]);
+  }, [activeTabKey, meta === null || meta === void 0 ? void 0 : meta.component]);
   return /*#__PURE__*/_react.default.createElement("div", {
     className: _panel.default['lc-painter-panel']
   }, /*#__PURE__*/_react.default.createElement("div", {
@@ -169,7 +163,16 @@ var Panel = function Panel() {
     className: (0, _classnames.default)(_panel.default['lc-painter-panel-tabbar'], (0, _defineProperty2.default)({}, _panel.default.hidden, !activeNode))
   }, /*#__PURE__*/_react.default.createElement("ul", {
     className: _panel.default.headerList
-  }, _TAB_LIST_.map(function (_item) {
+  }, (0, _lodash.reduce)(_TAB_LIST_, function (ret, item) {
+    if (item.key === 'css' && !!(meta !== null && meta !== void 0 && meta.css)) {
+      ret.push(item);
+    } else if (item.key === 'advance' && !!(meta !== null && meta !== void 0 && meta.advance)) {
+      ret.push(item);
+    } else if (item.key === 'attrs') {
+      ret.push(item);
+    }
+    return ret;
+  }, []).map(function (_item) {
     return /*#__PURE__*/_react.default.createElement("li", {
       key: _item.key,
       ref: activeTabKey === _item.key ? activeTabRef : null,
@@ -181,35 +184,28 @@ var Panel = function Panel() {
   })), /*#__PURE__*/_react.default.createElement("div", {
     ref: underLineRef,
     className: _panel.default.underline
-  })), activeTabKey === _TAB_LIST_[0].key && /*#__PURE__*/_react.default.createElement("div", {
-    className: (0, _classnames.default)(_panel.default['lc-painter-panel-content'], (0, _defineProperty2.default)({}, _panel.default.hidden, !activeNode))
-  }, PropsComps, /*#__PURE__*/_react.default.createElement(_antd.Drawer, {
-    visible: open,
-    width: 320,
-    mask: false,
-    closable: false,
-    getContainer: false,
-    destroyOnClose: true,
-    style: {
-      position: 'absolute'
-    },
-    bodyStyle: {
-      padding: 0,
-      height: '100%'
+  })), activeTabKey === _TAB_LIST_[0].key && /*#__PURE__*/_react.default.createElement(_AttrsPanel.default, {
+    meta: meta,
+    value: activeNode === null || activeNode === void 0 ? void 0 : activeNode.node,
+    onChange: function onChange(field, value, repositioning) {
+      return handleChange(field, value, repositioning);
     }
-  }, /*#__PURE__*/_react.default.createElement("div", {
-    className: _panel.default['next-content']
-  }, /*#__PURE__*/_react.default.createElement("div", {
-    className: _panel.default['next-content-header'],
-    onClick: setFalse
-  }, /*#__PURE__*/_react.default.createElement(_antd.Icon, {
-    type: "left"
-  }), (_nextRef$current = nextRef.current) === null || _nextRef$current === void 0 ? void 0 : _nextRef$current.name, /*#__PURE__*/_react.default.createElement(_antd.Icon, {
-    type: "close"
-  })), /*#__PURE__*/_react.default.createElement("div", {
-    className: _panel.default['next-content-body']
-  }, (_nextRef$current2 = nextRef.current) === null || _nextRef$current2 === void 0 ? void 0 : _nextRef$current2.NextComp)))), activeTabKey === _TAB_LIST_[1].key && /*#__PURE__*/_react.default.createElement("div", null, "\u6837\u5F0F\u9762\u677F"), activeTabKey === _TAB_LIST_[2].key && /*#__PURE__*/_react.default.createElement("div", null, "\u9AD8\u7EA7\u9762\u677F"), /*#__PURE__*/_react.default.createElement("div", {
+  }), activeTabKey === _TAB_LIST_[1].key && /*#__PURE__*/_react.default.createElement(_StylePanel.default, {
+    value: activeNode === null || activeNode === void 0 ? void 0 : activeNode.node.css,
+    onChange: function onChange(_, newCss) {
+      return handleChange('css', newCss);
+    }
+  }), activeTabKey === _TAB_LIST_[2].key && /*#__PURE__*/_react.default.createElement(_AdvancePanel.default, {
+    meta: meta,
+    value: activeNode === null || activeNode === void 0 ? void 0 : activeNode.node.advance,
+    onChange: function onChange(val) {
+      return handleChange('advance', val);
+    }
+  }), /*#__PURE__*/_react.default.createElement("div", {
     className: (0, _classnames.default)(_panel.default['lc-painter-panel-empty'], (0, _defineProperty2.default)({}, _panel.default.hidden, !!activeNode))
-  }, "\u8BF7\u5728\u5DE6\u4FA7\u753B\u5E03\u9009\u4E2D\u8282\u70B9"));
+  }, (0, _utils.formatMessage)({
+    id: "".concat(_I18N_PREFIX_, ".empty"),
+    label: '请在左侧画布选中节点'
+  })));
 };
 var _default = exports.default = Panel;

package/lib/lowcode/painter/Ribbon.js

@@ -22,7 +22,7 @@ var _DRAWER_PROPS = {
   placement: 'left',
   mask: false,
   getContainer: false,
-  zIndex: 10000,
+  zIndex: 2000,
   headerStyle: {
     borderBottom: 'none'
   },