@fonixtree/magic-design 1.0.65 → 1.0.67

package/lib/core/Designer/PageCompList/index.js

@@ -15,10 +15,10 @@ var _immutabilityHelper = _interopRequireDefault(require("immutability-helper"))
 
 var _react = _interopRequireWildcard(require("react"));
 
-var _findIndex = _interopRequireDefault(require("lodash/findIndex"));
-
 var _findLastIndex = _interopRequireDefault(require("lodash/findLastIndex"));
 
+var _findIndex = _interopRequireDefault(require("lodash/findIndex"));
+
 var _common = require("../../../common");
 
 var _coreUtil = require("../../../utils/coreUtil");
@@ -63,8 +63,7 @@ function PageCompList(_a) {
       pageData = _a.pageData,
       onAdd = _a.onAdd,
       renderPagesManage = _a.renderPagesManage,
-      pageName = _a.pageName,
-      pageType = _a.pageType;
+      pageName = _a.pageName;
 
   var _b = (0, _react.useState)(pageData || []),
       components = _b[0],
@@ -293,7 +292,7 @@ function PageCompList(_a) {
       type: "icon-drag"
     }), /*#__PURE__*/_react["default"].createElement("span", {
       className: "card-title ml16"
-    }, index + 1, ". ", (_b = _constants.compInfoMap[comp.type]) === null || _b === void 0 ? void 0 : _b.name)), pageType !== 'Menu' && /*#__PURE__*/_react["default"].createElement(_antd.Dropdown, {
+    }, index + 1, ". ", (_b = _constants.compInfoMap[comp.type]) === null || _b === void 0 ? void 0 : _b.name)), /*#__PURE__*/_react["default"].createElement(_antd.Dropdown, {
       overlay: menu,
       placement: "bottomRight",
       trigger: ['click']
@@ -316,7 +315,7 @@ function PageCompList(_a) {
     className: "page-comp-list"
   }, /*#__PURE__*/_react["default"].createElement("div", {
     className: "title mb16"
-  }, pageName), pageType !== 'Menu' && /*#__PURE__*/_react["default"].createElement(_common.Button, {
+  }, pageName), /*#__PURE__*/_react["default"].createElement(_common.Button, {
     icon: "icon-add",
     onClick: onAdd,
     size: "large",

package/lib/core/Designer/QuickMenuBar/index.js

@@ -116,8 +116,7 @@ function (_super) {
         language = _a.language,
         outputType = _a.outputType,
         onHtmlSave = _a.onHtmlSave,
-        onHtmlBack = _a.onHtmlBack,
-        pageType = _a.pageType;
+        onHtmlBack = _a.onHtmlBack;
     var languageTemp = langBook[language] || {};
     return /*#__PURE__*/_react["default"].createElement("div", {
       className: "quick_menu_wrap"
@@ -139,7 +138,7 @@ function (_super) {
       className: "menu_center"
     }, /*#__PURE__*/_react["default"].createElement("div", {
       className: "device_group"
-    }, pageType !== 'Menu' && /*#__PURE__*/_react["default"].createElement("div", {
+    }, /*#__PURE__*/_react["default"].createElement("div", {
       className: (0, _classnames["default"])('device_pc', {
         active: device === _constants.deviceTypeMap.PC
       }),
@@ -151,8 +150,7 @@ function (_super) {
       type: "icon-pc"
     })), /*#__PURE__*/_react["default"].createElement("div", {
       className: (0, _classnames["default"])('device_phone', {
-        active: device === _constants.deviceTypeMap.PHONE,
-        only_mobile: pageType === 'Menu'
+        active: device === _constants.deviceTypeMap.PHONE
       }),
       "data-code": _constants.quickMenuCode.MODE_PHONE,
       onClick: this.onBtnClick
@@ -183,11 +181,7 @@ function (_super) {
       type: "light"
     }, (0, _locale.i18n)('SAVE'))) : /*#__PURE__*/_react["default"].createElement("div", {
       className: "menu_right"
-    }, window.magicDesign.templateType === _constants.tempTypeMap.PAGE && /*#__PURE__*/_react["default"].createElement(_Button["default"], {
-      "data-code": _constants.quickMenuCode.SET_AS_TEMPLATE,
-      onClick: this.onBtnClick,
-      type: "text"
-    }, (0, _locale.i18n)('SET_AS_TEMPLATE')), /*#__PURE__*/_react["default"].createElement(_Button["default"], {
+    }, /*#__PURE__*/_react["default"].createElement(_Button["default"], {
       "data-code": _constants.quickMenuCode.PREVIEW,
       onClick: this.onBtnClick
     }, (0, _locale.i18n)('PREVIEW')), /*#__PURE__*/_react["default"].createElement(_Button["default"], {
@@ -204,7 +198,7 @@ function (_super) {
       onClick: this.onBtnClick,
       tip: "The page is in use. Please copy or create a new page",
       type: "primary"
-    }, (0, _locale.i18n)('PUBLISH_NOW'), window.magicDesign.templateType === 'Page' && /*#__PURE__*/_react["default"].createElement(_antd.Dropdown, {
+    }, (0, _locale.i18n)('PUBLISH_NOW'), /*#__PURE__*/_react["default"].createElement(_antd.Dropdown, {
       getPopupContainer: function getPopupContainer() {
         return document.querySelector('.publish_wrap');
       },

package/lib/core/Designer/QuickMenuBar/index.less

@@ -61,10 +61,6 @@
         align-items: center;
         justify-content: center;
       }
-      .only_mobile {
-        border-top-left-radius: 8px;
-        border-bottom-left-radius: 8px;
-      }
 
       .active {
         background: #E9F0FF;

package/lib/core/Designer/RenderHtml/index.js

@@ -58,24 +58,21 @@ function (_super) {
         _this.setState({
           renderProps: renderProps
         }, function () {
-          /** 兼容分批加载 */
-          setTimeout(function () {
-            document.querySelector('#render-html-wrap > div').style = 'max-width:600px;margin:auto;';
-            /** 去除设计器模式下元素 */
-
-            document.querySelectorAll('#render-html-wrap > div .composite_mask').forEach(function (el) {
-              el.remove();
-            });
-            var html = document.querySelector('#render-html-wrap').innerHTML;
-            /** 处理背景图资源引号问题 */
-
-            html = html.replace(/url\("((\S|\s)*)"\)/g, 'url($1)');
-            resolve(html);
-
-            _this.setState({
-              renderProps: null
-            });
-          }, 1000);
+          document.querySelector('#render-html-wrap > div').style = 'max-width:600px;margin:auto;';
+          /** 去除设计器模式下元素 */
+
+          document.querySelectorAll('#render-html-wrap > div .composite_mask').forEach(function (el) {
+            el.remove();
+          });
+          var html = document.querySelector('#render-html-wrap').innerHTML;
+          /** 处理背景图资源引号问题 */
+
+          html = html.replace(/url\("((\S|\s)*)"\)/g, 'url($1)');
+          resolve(html);
+
+          _this.setState({
+            renderProps: null
+          });
         });
       });
     };

package/lib/core/Designer/RenderHtml/index.less

@@ -1,5 +1,5 @@
 #render-html-wrap {
   position: fixed;
-  top: -99999px;
+  top: 10px;
   left: 0;
 }

package/lib/core/Designer/ToolBarModal/ToolBtn/components/AlignPicker/images/AlignCenterSVG.js

@@ -12,29 +12,16 @@ function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "d
 var _default = function _default(_a) {
   var onChange = _a.onChange;
   return /*#__PURE__*/_react["default"].createElement("svg", {
-    fill: "none",
-    height: "10",
     id: "ne-t-alignment-center",
     onClick: onChange,
-    viewBox: "0 0 15 10",
-    width: "15",
+    viewBox: "0 0 256 256",
     xmlns: "http://www.w3.org/2000/svg"
+  }, /*#__PURE__*/_react["default"].createElement("g", {
+    fill: "currentColor",
+    fillRule: "nonzero"
   }, /*#__PURE__*/_react["default"].createElement("path", {
-    clipRule: "evenodd",
-    d: "M0.25 1C0.25 0.585786 0.585786 0.25 1 0.25H13.375C13.7892 0.25 14.125 0.585786 14.125 1C14.125 1.41421 13.7892 1.75 13.375 1.75H1C0.585786 1.75 0.25 1.41421 0.25 1Z",
-    fill: "#232F46",
-    fillRule: "evenodd"
-  }), /*#__PURE__*/_react["default"].createElement("path", {
-    clipRule: "evenodd",
-    d: "M0.25 4.9375C0.25 4.52329 0.585786 4.1875 1 4.1875H13.375C13.7892 4.1875 14.125 4.52329 14.125 4.9375C14.125 5.35171 13.7892 5.6875 13.375 5.6875H1C0.585786 5.6875 0.25 5.35171 0.25 4.9375Z",
-    fill: "#232F46",
-    fillRule: "evenodd"
-  }), /*#__PURE__*/_react["default"].createElement("path", {
-    clipRule: "evenodd",
-    d: "M0.25 8.875C0.25 8.46079 0.585786 8.125 1 8.125H13.375C13.7892 8.125 14.125 8.46079 14.125 8.875C14.125 9.28921 13.7892 9.625 13.375 9.625H1C0.585786 9.625 0.25 9.28921 0.25 8.875Z",
-    fill: "#232F46",
-    fillRule: "evenodd"
-  }));
+    d: "M181 148c5.523 0 10 4.477 10 10 0 5.43-4.327 9.848-9.72 9.996L181 168H76c-5.523 0-10-4.477-10-10 0-5.43 4.327-9.848 9.72-9.996L76 148h105ZM218 89c5.523 0 10 4.477 10 10 0 5.43-4.327 9.848-9.72 9.996L218 109H38c-5.523 0-10-4.477-10-10 0-5.43 4.327-9.848 9.72-9.996L38 89h180ZM181 30c5.523 0 10 4.477 10 10 0 5.43-4.327 9.848-9.72 9.996L181 50H76c-5.523 0-10-4.477-10-10 0-5.43 4.327-9.848 9.72-9.996L76 30h105ZM218 207c5.523 0 10 4.477 10 10 0 5.43-4.327 9.848-9.72 9.996L218 227H38c-5.523 0-10-4.477-10-10 0-5.43 4.327-9.848 9.72-9.996L38 207h180Z"
+  })));
 };
 
 exports["default"] = _default;

package/lib/core/Designer/ToolBarModal/ToolBtn/components/AlignPicker/images/AlignLeftSVG.js

@@ -12,29 +12,16 @@ function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "d
 var _default = function _default(_a) {
   var onChange = _a.onChange;
   return /*#__PURE__*/_react["default"].createElement("svg", {
-    fill: "none",
-    height: "10",
     id: "ne-t-alignment-left",
     onClick: onChange,
-    viewBox: "0 0 15 10",
-    width: "15",
+    viewBox: "0 0 256 256",
     xmlns: "http://www.w3.org/2000/svg"
+  }, /*#__PURE__*/_react["default"].createElement("g", {
+    fill: "currentColor",
+    fillRule: "nonzero"
   }, /*#__PURE__*/_react["default"].createElement("path", {
-    clipRule: "evenodd",
-    d: "M0.25 1C0.25 0.585786 0.585786 0.25 1 0.25H10C10.4142 0.25 10.75 0.585786 10.75 1C10.75 1.41421 10.4142 1.75 10 1.75H1C0.585786 1.75 0.25 1.41421 0.25 1Z",
-    fill: "#232F46",
-    fillRule: "evenodd"
-  }), /*#__PURE__*/_react["default"].createElement("path", {
-    clipRule: "evenodd",
-    d: "M0.25 4.9375C0.25 4.52329 0.585786 4.1875 1 4.1875H13.375C13.7892 4.1875 14.125 4.52329 14.125 4.9375C14.125 5.35171 13.7892 5.6875 13.375 5.6875H1C0.585786 5.6875 0.25 5.35171 0.25 4.9375Z",
-    fill: "#232F46",
-    fillRule: "evenodd"
-  }), /*#__PURE__*/_react["default"].createElement("path", {
-    clipRule: "evenodd",
-    d: "M0.25 8.875C0.25 8.46079 0.585786 8.125 1 8.125H10C10.4142 8.125 10.75 8.46079 10.75 8.875C10.75 9.28921 10.4142 9.625 10 9.625H1C0.585786 9.625 0.25 9.28921 0.25 8.875Z",
-    fill: "#232F46",
-    fillRule: "evenodd"
-  }));
+    d: "M143 148c5.523 0 10 4.477 10 10 0 5.43-4.327 9.848-9.72 9.996L143 168H38c-5.523 0-10-4.477-10-10 0-5.43 4.327-9.848 9.72-9.996L38 148h105ZM218 89c5.523 0 10 4.477 10 10 0 5.43-4.327 9.848-9.72 9.996L218 109H38c-5.523 0-10-4.477-10-10 0-5.43 4.327-9.848 9.72-9.996L38 89h180ZM143 30c5.523 0 10 4.477 10 10 0 5.43-4.327 9.848-9.72 9.996L143 50H38c-5.523 0-10-4.477-10-10 0-5.43 4.327-9.848 9.72-9.996L38 30h105ZM218 207c5.523 0 10 4.477 10 10 0 5.43-4.327 9.848-9.72 9.996L218 227H38c-5.523 0-10-4.477-10-10 0-5.43 4.327-9.848 9.72-9.996L38 207h180Z"
+  })));
 };
 
 exports["default"] = _default;

package/lib/core/Designer/ToolBarModal/ToolBtn/components/AlignPicker/images/AlignRightSVG.js

@@ -12,29 +12,16 @@ function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "d
 var _default = function _default(_a) {
   var onChange = _a.onChange;
   return /*#__PURE__*/_react["default"].createElement("svg", {
-    fill: "none",
-    height: "10",
     id: "ne-t-alignment-right",
     onClick: onChange,
-    viewBox: "0 0 15 10",
-    width: "15",
+    viewBox: "0 0 256 256",
     xmlns: "http://www.w3.org/2000/svg"
+  }, /*#__PURE__*/_react["default"].createElement("g", {
+    fill: "currentColor",
+    fillRule: "nonzero"
   }, /*#__PURE__*/_react["default"].createElement("path", {
-    clipRule: "evenodd",
-    d: "M3.625 1C3.625 0.585786 3.96079 0.25 4.375 0.25H13.375C13.7892 0.25 14.125 0.585786 14.125 1C14.125 1.41421 13.7892 1.75 13.375 1.75H4.375C3.96079 1.75 3.625 1.41421 3.625 1Z",
-    fill: "#232F46",
-    fillRule: "evenodd"
-  }), /*#__PURE__*/_react["default"].createElement("path", {
-    clipRule: "evenodd",
-    d: "M0.25 4.9375C0.25 4.52329 0.585786 4.1875 1 4.1875H13.375C13.7892 4.1875 14.125 4.52329 14.125 4.9375C14.125 5.35171 13.7892 5.6875 13.375 5.6875H1C0.585786 5.6875 0.25 5.35171 0.25 4.9375Z",
-    fill: "#232F46",
-    fillRule: "evenodd"
-  }), /*#__PURE__*/_react["default"].createElement("path", {
-    clipRule: "evenodd",
-    d: "M3.625 8.875C3.625 8.46079 3.96079 8.125 4.375 8.125H13.375C13.7892 8.125 14.125 8.46079 14.125 8.875C14.125 9.28921 13.7892 9.625 13.375 9.625H4.375C3.96079 9.625 3.625 9.28921 3.625 8.875Z",
-    fill: "#232F46",
-    fillRule: "evenodd"
-  }));
+    d: "M218 148c5.523 0 10 4.477 10 10 0 5.43-4.327 9.848-9.72 9.996L218 168H113c-5.523 0-10-4.477-10-10 0-5.43 4.327-9.848 9.72-9.996L113 148h105ZM218 89c5.523 0 10 4.477 10 10 0 5.43-4.327 9.848-9.72 9.996L218 109H38c-5.523 0-10-4.477-10-10 0-5.43 4.327-9.848 9.72-9.996L38 89h180ZM218 30c5.523 0 10 4.477 10 10 0 5.43-4.327 9.848-9.72 9.996L218 50H113c-5.523 0-10-4.477-10-10 0-5.43 4.327-9.848 9.72-9.996L113 30h105ZM218 207c5.523 0 10 4.477 10 10 0 5.43-4.327 9.848-9.72 9.996L218 227H38c-5.523 0-10-4.477-10-10 0-5.43 4.327-9.848 9.72-9.996L38 207h180Z"
+  })));
 };
 
 exports["default"] = _default;

package/lib/core/Designer/ToolBarModal/ToolBtn/components/BulletPicker/index.js

@@ -17,8 +17,6 @@ var _InitialSVG = _interopRequireDefault(require("./images/InitialSVG"));
 
 var _SquareSVG = _interopRequireDefault(require("./images/SquareSVG"));
 
-var _Iconfont = _interopRequireDefault(require("../../../../../../common/Iconfont"));
-
 require("./index.less");
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
@@ -74,37 +72,18 @@ function (_super) {
 
     var _a = this.props,
         value = _a.value,
-        _onChange = _a.onChange;
+        onChange = _a.onChange;
     var visibility = this.state.visibility;
-    var list = value === null || value === void 0 ? void 0 : value.list;
-
-    var iconClick = function iconClick() {
-      if (list) _onChange('');else _onChange('initial');
-    };
-
+    var list = (value === null || value === void 0 ? void 0 : value.list) || 'initial';
     return /*#__PURE__*/_react["default"].createElement("div", {
-      className: (0, _classnames["default"])('bullet-tool-btn-wrap')
-    }, /*#__PURE__*/_react["default"].createElement(_InitialSVG["default"], {
-      onChange: iconClick
-    }), /*#__PURE__*/_react["default"].createElement(_Iconfont["default"], {
-      className: "btn_icon",
-      color: "#8493AF",
+      className: (0, _classnames["default"])('tool-btn-wrap'),
       onClick: function onClick() {
         _this.setState({
           visibility: !visibility
         });
-      },
-      size: 12,
-      type: "icon-outlined-down"
-    }), /*#__PURE__*/_react["default"].createElement(_IconSelectPicker["default"], {
-      onChange: function onChange(v) {
-        _onChange(v);
-
-        _this.setState({
-          visibility: !visibility
-        });
-      },
-      value: list,
+      }
+    }, SvgMap[list] ? SvgMap[list]({}) : /*#__PURE__*/_react["default"].createElement(_InitialSVG["default"], null), /*#__PURE__*/_react["default"].createElement(_IconSelectPicker["default"], {
+      onChange: onChange,
       visibility: visibility
     }));
   };

package/lib/core/Designer/ToolBarModal/ToolBtn/components/BulletPicker/index.less

@@ -1,10 +1,26 @@
-.bullet-tool-btn-wrap {
+.tool-btn-wrap {
+  width: 26px;
+  height: 26px;
   display: flex;
   align-items: center;
   justify-content: center;
-  padding: 0 3px;
+  cursor: pointer;
+  border-radius: 6px;
+  padding: 0;
+  border: none;
+  transition: .2s all linear;
+  position: relative;
 
-  .btn_icon {
-    margin-left: 3px;
+  &:hover {
+    background: #f8f8f8;
+  }
+
+  &.active {
+    background: #E7E9E8;
+  }
+
+  svg {
+    height: 18px;
+    height: 18px;
   }
 }

package/lib/core/Designer/ToolBarModal/ToolBtn/components/ColorPickerBtn/index.js

@@ -9,8 +9,6 @@ var _react = _interopRequireDefault(require("react"));
 
 var _classnames = _interopRequireDefault(require("classnames"));
 
-var _UnderlineSelectPicker = _interopRequireDefault(require("./UnderlineSelectPicker"));
-
 var _FontColorSVG = _interopRequireDefault(require("../../images/FontColorSVG"));
 
 var _BackgroundSVG = _interopRequireDefault(require("../../images/BackgroundSVG"));
@@ -19,8 +17,6 @@ var _UnderlineSVG = _interopRequireDefault(require("../../images/UnderlineSVG"))
 
 var _ColorPicker = _interopRequireDefault(require("../../../../../../common/ColorPicker"));
 
-var _Iconfont = _interopRequireDefault(require("../../../../../../common/Iconfont"));
-
 require("./index.less");
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
@@ -60,8 +56,7 @@ function (_super) {
     var _this = _super !== null && _super.apply(this, arguments) || this;
 
     _this.state = {
-      visibility: false,
-      showSelectUnderline: false
+      visibility: false
     };
     return _this;
   }
@@ -73,18 +68,11 @@ function (_super) {
         value = _a.value,
         onChange = _a.onChange,
         _b = _a.type,
-        type = _b === void 0 ? 'color' : _b,
-        underlineValue = _a.underlineValue,
-        underlineOnChange = _a.underlineOnChange;
-    var _c = this.state,
-        visibility = _c.visibility,
-        showSelectUnderline = _c.showSelectUnderline;
+        type = _b === void 0 ? 'color' : _b;
+    var visibility = this.state.visibility;
     var color = value === null || value === void 0 ? void 0 : value.color;
     return /*#__PURE__*/_react["default"].createElement("div", {
-      className: (0, _classnames["default"])('color-picker-tool-btn-wrap', {
-        padding: type == 'text-decoration-color'
-      })
-    }, /*#__PURE__*/_react["default"].createElement("div", {
+      className: (0, _classnames["default"])('tool-btn-wrap'),
       onClick: function onClick() {
         _this.setState({
           visibility: !visibility
@@ -96,26 +84,7 @@ function (_super) {
       color: color || '#262626'
     }), type == 'text-decoration-color' && /*#__PURE__*/_react["default"].createElement(_UnderlineSVG["default"], {
       color: color || '#262626'
-    })), type == 'text-decoration-color' && /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, /*#__PURE__*/_react["default"].createElement(_Iconfont["default"], {
-      className: "btn_icon",
-      color: "#8493AF",
-      onClick: function onClick() {
-        return _this.setState({
-          showSelectUnderline: !showSelectUnderline
-        });
-      },
-      size: 12,
-      type: "icon-outlined-down"
-    }), showSelectUnderline && /*#__PURE__*/_react["default"].createElement(_UnderlineSelectPicker["default"], {
-      onChange: function onChange(v) {
-        underlineOnChange(v);
-
-        _this.setState({
-          showSelectUnderline: !showSelectUnderline
-        });
-      },
-      value: underlineValue
-    })), /*#__PURE__*/_react["default"].createElement(_ColorPicker["default"], {
+    }), /*#__PURE__*/_react["default"].createElement(_ColorPicker["default"], {
       color: color,
       onChangeColor: onChange,
       onClose: function onClose() {

package/lib/core/Designer/ToolBarModal/ToolBtn/components/ColorPickerBtn/index.less

@@ -1,27 +1,26 @@
-.color-picker-tool-btn-wrap {
+.tool-btn-wrap {
+  width: 26px;
+  height: 26px;
   display: flex;
   align-items: center;
   justify-content: center;
+  cursor: pointer;
+  border-radius: 6px;
+  padding: 0;
+  border: none;
+  transition: .2s all linear;
+  position: relative;
 
-  >div {
-    display: flex;
-    align-items: center;
-    justify-content: center;
+  &:hover {
+    background: #f8f8f8;
   }
 
-  &.padding {
-    padding: 0 5px;
+  &.active {
+    background: #E7E9E8;
   }
 
-  .underlineWrap {
-    position: absolute;
-    left: 0;
-    top: 27px;
-    padding: 5px;
-    background-color: #fff;
-    // border: 1px solid #E7E9E8;
-    box-shadow: 0 8px 16px 4px hsla(0, 0%, 0%, 0.04);
-    color: #262626;
-    border-radius: 6px;
+  svg {
+    height: 18px;
+    height: 18px;
   }
 }

package/lib/core/Designer/ToolBarModal/ToolBtn/components/OrderedPicker/index.js

@@ -23,8 +23,6 @@ var _LowerRomanSVG = _interopRequireDefault(require("./images/LowerRomanSVG"));
 
 var _UpperRomanSVG = _interopRequireDefault(require("./images/UpperRomanSVG"));
 
-var _Iconfont = _interopRequireDefault(require("../../../../../../common/Iconfont"));
-
 require("./index.less");
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
@@ -83,37 +81,18 @@ function (_super) {
 
     var _a = this.props,
         value = _a.value,
-        _onChange = _a.onChange;
+        onChange = _a.onChange;
     var visibility = this.state.visibility;
-    var list = value === null || value === void 0 ? void 0 : value.list;
-
-    var iconClick = function iconClick() {
-      if (list) _onChange('');else _onChange('decimal');
-    };
-
+    var list = (value === null || value === void 0 ? void 0 : value.list) || 'decimal';
     return /*#__PURE__*/_react["default"].createElement("div", {
-      className: (0, _classnames["default"])('ordered-tool-btn-wrap')
-    }, /*#__PURE__*/_react["default"].createElement(_DecimalSVG["default"], {
-      onChange: iconClick
-    }), /*#__PURE__*/_react["default"].createElement(_Iconfont["default"], {
-      className: "btn_icon",
-      color: "#8493AF",
+      className: (0, _classnames["default"])('tool-btn-wrap'),
       onClick: function onClick() {
         _this.setState({
           visibility: !visibility
         });
-      },
-      size: 12,
-      type: "icon-outlined-down"
-    }), /*#__PURE__*/_react["default"].createElement(_IconSelectPicker["default"], {
-      onChange: function onChange(v) {
-        _onChange(v);
-
-        _this.setState({
-          visibility: !visibility
-        });
-      },
-      value: list,
+      }
+    }, SvgMap[list] ? SvgMap[list]({}) : /*#__PURE__*/_react["default"].createElement(_DecimalSVG["default"], null), /*#__PURE__*/_react["default"].createElement(_IconSelectPicker["default"], {
+      onChange: onChange,
       visibility: visibility
     }));
   };

package/lib/core/Designer/ToolBarModal/ToolBtn/components/OrderedPicker/index.less

@@ -1,10 +1,26 @@
-.ordered-tool-btn-wrap {
+.tool-btn-wrap {
+  width: 26px;
+  height: 26px;
   display: flex;
   align-items: center;
   justify-content: center;
-  padding: 0 3px;
+  cursor: pointer;
+  border-radius: 6px;
+  padding: 0;
+  border: none;
+  transition: .2s all linear;
+  position: relative;
 
-  .btn_icon {
-    margin-left: 3px;
+  &:hover {
+    background: #f8f8f8;
+  }
+
+  &.active {
+    background: #E7E9E8;
+  }
+
+  svg {
+    height: 18px;
+    height: 18px;
   }
 }

package/lib/core/Designer/ToolBarModal/ToolBtn/index.js

@@ -27,12 +27,6 @@ var _OrderSVG = _interopRequireDefault(require("./images/OrderSVG"));
 
 var _UnorderSVG = _interopRequireDefault(require("./images/UnorderSVG"));
 
-var _AlignLeftSVG = _interopRequireDefault(require("./images/AlignLeftSVG"));
-
-var _AlignCenterSVG = _interopRequireDefault(require("./images/AlignCenterSVG"));
-
-var _AlignRightSVG = _interopRequireDefault(require("./images/AlignRightSVG"));
-
 var _BulletPicker = _interopRequireDefault(require("./components/BulletPicker"));
 
 var _OrderedPicker = _interopRequireDefault(require("./components/OrderedPicker"));
@@ -69,22 +63,6 @@ var __extends = void 0 && (void 0).__extends || function () {
   };
 }();
 
-var __assign = void 0 && (void 0).__assign || function () {
-  __assign = Object.assign || function (t) {
-    for (var s, i = 1, n = arguments.length; i < n; i++) {
-      s = arguments[i];
-
-      for (var p in s) {
-        if (Object.prototype.hasOwnProperty.call(s, p)) t[p] = s[p];
-      }
-    }
-
-    return t;
-  };
-
-  return __assign.apply(this, arguments);
-};
-
 var iconTypeMap = {
   bold: _BoldSVG["default"],
   italic: _ItalicSVG["default"],
@@ -116,10 +94,7 @@ var iconTypeMap = {
     return /*#__PURE__*/_react["default"].createElement(_ColorPickerBtn["default"], _extends({
       type: "text-decoration-color"
     }, props));
-  },
-  alignLeft: _AlignLeftSVG["default"],
-  alignCenter: _AlignCenterSVG["default"],
-  alignRight: _AlignRightSVG["default"]
+  }
 };
 
 var ToolBtn =
@@ -162,10 +137,10 @@ function (_super) {
       className: (0, _classnames["default"])('tool-btn-wrap', {
         active: active
       })
-    }, iconTypeMap[type](__assign({
+    }, iconTypeMap[type]({
       value: value,
       onChange: onChange
-    }, this.props)));
+    }));
   };
 
   ToolBtn.defaultProps = {};

package/lib/core/Designer/ToolBarModal/ToolBtn/index.less

@@ -1,6 +1,5 @@
 .tool-btn-wrap {
-  width: auto;
-  min-width: 26px;
+  width: 26px;
   height: 26px;
   display: flex;
   align-items: center;