@fonixtree/magic-design 0.0.58 → 0.0.60

package/es/composite-comp/dito/components/Recommend/mobile/index.less

@@ -57,7 +57,7 @@
   .scrollContainer {
     display: flex;
     flex-direction: row;
-    align-items: center;
+    align-items: flex-start;
     margin: 0 16px;
     overflow-x: auto;
     padding-bottom: 15px;

package/es/composite-comp/dito/components/Recommend/pc/index.less

@@ -87,7 +87,7 @@
   .scrollContainer {
     display: flex;
     flex-direction: row;
-    align-items: center;
+    align-items: flex-start;
     flex: 1;
     margin: 0;
     overflow-x: auto;

package/es/composite-comp/dito/components/SearchBar/defaultJSON.js

@@ -25,7 +25,7 @@ var getDefaultJSON = function getDefaultJSON() {
         h5Name: 'name2',
         pcName: 'name2',
         h5ImgSrc: _ditoLogo["default"],
-        pcImgSrc: 'https://online.iwhalecloud.com/static/banner3.d4d11f4b.webp',
+        pcImgSrc: _ditoLogo["default"],
         clickUrl: ''
       },
       hover: {
@@ -38,7 +38,7 @@ var getDefaultJSON = function getDefaultJSON() {
     },
     icon: {
       open: true,
-      color: '#2F54EB'
+      color: '#D92929'
     },
     customize: {
       layout: 'left',

package/es/composite-comp/dito/components/SearchBar/index.js

@@ -11,6 +11,8 @@ var _defaultJSON = require("./defaultJSON");
 
 var _index = _interopRequireDefault(require("./mobile/index"));
 
+var _index2 = _interopRequireDefault(require("./pc/index"));
+
 var _coreUtil = require("../../../../utils/coreUtil");
 
 var _compositeDecorator = _interopRequireDefault(require("../../../../decorator/compositeDecorator"));
@@ -70,7 +72,9 @@ function (_super) {
 
   SearchBar.prototype.render = function () {
     var nodeData = this.props.nodeData;
-    return /*#__PURE__*/_react["default"].createElement("div", null, (0, _coreUtil.isPc)() ? null : /*#__PURE__*/_react["default"].createElement(_index["default"], {
+    return /*#__PURE__*/_react["default"].createElement("div", null, (0, _coreUtil.isPc)() ? /*#__PURE__*/_react["default"].createElement(_index2["default"], {
+      data: nodeData
+    }) : /*#__PURE__*/_react["default"].createElement(_index["default"], {
       data: nodeData
     }));
   };

package/es/composite-comp/dito/components/SearchBar/mobile/index.js

@@ -233,44 +233,43 @@ function (_super) {
 
   SearchMobile.prototype.render = function () {
     var data = this.props.data;
-    var messageNum = this.state.messageNum;
-    var styleWrap = {};
-
-    if (data.background.bgType === 'color') {
-      styleWrap = {
-        backgroundColor: data.background.color,
-        opacity: data.background.opacity
-      };
-    } else {
-      styleWrap = {
-        backgroundImage: "url(" + data.background.image + ")",
-        backgroundPosition: 'center',
-        backgroundRepeat: 'no-repeat',
-        backgroundSize: '100%'
-      };
-    }
+    var messageNum = this.state.messageNum; // let styleWrap = {};
+    // if (data.background.bgType === 'color') {
+    //   styleWrap = {
+    //     backgroundColor: data.background.color,
+    //     opacity: data.background.opacity,
+    //   };
+    // } else {
+    //   styleWrap = {
+    //     backgroundImage: `url(${data.background.image})`,
+    //     backgroundPosition: 'center',
+    //     backgroundRepeat: 'no-repeat',
+    //     backgroundSize: '100%',
+    //   };
+    // }
 
     return /*#__PURE__*/_react["default"].createElement("div", {
-      className: "m-search-bar",
-      style: styleWrap
+      className: "m-search-bar"
     }, /*#__PURE__*/_react["default"].createElement("div", {
       className: "right"
-    }, /*#__PURE__*/_react["default"].createElement(_common.Iconfont, {
-      color: "#2C2C2C",
+    }, /*#__PURE__*/_react["default"].createElement("div", {
+      className: "search-input-wrap",
       onClick: function onClick() {
         return (0, _coreUtil.clickUrl)('/search-page');
-      },
+      }
+    }, /*#__PURE__*/_react["default"].createElement(_common.Iconfont, {
+      color: "#8493AF",
       size: 24,
       type: "icon-search2"
-    }), /*#__PURE__*/_react["default"].createElement("div", {
+    })), /*#__PURE__*/_react["default"].createElement("div", {
       className: "message-wrap"
     }, /*#__PURE__*/_react["default"].createElement(_common.Iconfont, {
-      color: "#2C2C2C",
+      color: "#262626",
       onClick: function onClick() {
         return (0, _coreUtil.clickUrl)('/message-center');
       },
       size: 24,
-      type: "icon-message"
+      type: "icon-ChatDots"
     }), !!messageNum && /*#__PURE__*/_react["default"].createElement("span", {
       className: "num"
     }, messageNum))), data.logo.open && /*#__PURE__*/_react["default"].createElement(_components.MetaImage, {

package/es/composite-comp/dito/components/SearchBar/mobile/index.less

@@ -1,6 +1,6 @@
 .m-search-bar {
-  height: 44px;
-  padding: 10px 16px;
+  height: 48px;
+  padding: 8px 16px;
   display: flex;
   flex-direction: row-reverse;
   align-items: center;
@@ -8,13 +8,23 @@
   width: 100%;
 
   .right {
-    width: 60px;
     display: flex;
     align-items: center;
     justify-content: space-between;
 
+    .search-input-wrap {
+      width: 195px;
+      background: #fff;
+      border-radius: 4px;
+      border: 1px solid #D2D9E5;
+      padding: 4px 12px;
+      height: 32px;
+      text-align: right;
+    }
+
     .message-wrap {
       position: relative;
+      margin-left: 16px;
 
       .num {
         position: absolute;

package/es/composite-comp/dito/components/SearchBar/pc/index.js

@@ -0,0 +1,151 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = void 0;
+
+var _react = _interopRequireDefault(require("react"));
+
+require("./index.less");
+
+var _antd = require("antd");
+
+var _locale = require("../../../../../locale");
+
+var _components = require("../../../../../meta-comp/components");
+
+var _common = require("../../../../../common");
+
+var _coreUtil = require("../../../../../utils/coreUtil");
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
+
+var __extends = void 0 && (void 0).__extends || function () {
+  var _extendStatics = function extendStatics(d, b) {
+    _extendStatics = Object.setPrototypeOf || {
+      __proto__: []
+    } instanceof Array && function (d, b) {
+      d.__proto__ = b;
+    } || function (d, b) {
+      for (var p in b) {
+        if (b.hasOwnProperty(p)) d[p] = b[p];
+      }
+    };
+
+    return _extendStatics(d, b);
+  };
+
+  return function (d, b) {
+    _extendStatics(d, b);
+
+    function __() {
+      this.constructor = d;
+    }
+
+    d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
+  };
+}();
+
+var SearchPc =
+/** @class */
+function (_super) {
+  __extends(SearchPc, _super);
+
+  function SearchPc() {
+    var _this = _super !== null && _super.apply(this, arguments) || this;
+
+    _this.state = {
+      // messageNum: '',
+      inputVal: ''
+    };
+
+    _this.onChangeVal = function (val) {
+      // console.log('--onChangeVal', val);
+      _this.setState({
+        inputVal: val
+      });
+    };
+
+    _this.searchProduct = function () {
+      console.log('--input', _this.state.inputVal);
+      (0, _coreUtil.clickUrl)({
+        pathname: "/product/list?q=" + _this.state.inputVal
+      });
+    };
+
+    _this.keyUp = function (e) {
+      if (e.keyCode === 13) {
+        _this.searchProduct();
+      }
+    };
+
+    return _this;
+  }
+
+  SearchPc.prototype.componentDidMount = function () {};
+
+  SearchPc.prototype.render = function () {
+    var _this = this;
+
+    var data = this.props.data;
+    var inputVal = this.state.inputVal;
+    console.log('--pc data', data);
+    return /*#__PURE__*/_react["default"].createElement("div", {
+      className: "pc-search-bar"
+    }, /*#__PURE__*/_react["default"].createElement("div", {
+      className: "right"
+    }, /*#__PURE__*/_react["default"].createElement("div", {
+      className: "search-input-wrap",
+      style: {
+        borderColor: data.icon.color
+      }
+    }, /*#__PURE__*/_react["default"].createElement(_antd.Input, {
+      className: "search-input",
+      onChange: function onChange(e) {
+        return _this.onChangeVal(e.target.value);
+      },
+      onKeyUp: this.keyUp,
+      placeholder: (0, _locale.i18n)('PLEASE_INPUT_KEYWORDS'),
+      value: inputVal
+    }), /*#__PURE__*/_react["default"].createElement("div", {
+      className: "search-icon",
+      onClick: this.searchProduct,
+      style: {
+        background: data.icon.color
+      }
+    }, /*#__PURE__*/_react["default"].createElement(_common.Iconfont, {
+      color: "#fff",
+      size: 24,
+      type: "icon-search2"
+    }))), /*#__PURE__*/_react["default"].createElement("div", {
+      className: "shopping-wrap",
+      onClick: function onClick() {
+        return (0, _coreUtil.clickUrl)('/cart');
+      },
+      style: {
+        borderColor: data.icon.color,
+        color: data.icon.color
+      }
+    }, /*#__PURE__*/_react["default"].createElement(_common.Iconfont, {
+      color: data.icon.color,
+      size: 16,
+      type: "icon-ShoppingCartSimple"
+    }), /*#__PURE__*/_react["default"].createElement("span", {
+      className: "shopping-txt"
+    }, (0, _locale.i18n)('SHOPPING_CART')))), data.logo.open && /*#__PURE__*/_react["default"].createElement(_components.MetaImage, {
+      data: data.logo,
+      style: {
+        height: 64
+      }
+    }));
+  };
+
+  SearchPc.defaultProps = {
+    data: {}
+  };
+  return SearchPc;
+}(_react["default"].Component);
+
+var _default = SearchPc;
+exports["default"] = _default;

package/es/composite-comp/dito/components/SearchBar/pc/index.less

@@ -0,0 +1,57 @@
+.pc-search-bar {
+  // height: 48px;
+  padding: 20px 100px 30px;
+  display: flex;
+  flex-direction: row-reverse;
+  align-items: flex-start;
+  justify-content: space-between;
+  width: 100%;
+
+  .right {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+
+    .search-input-wrap {
+      border: 1px solid #2F54EB;
+      border-radius: 6px;
+      height: 40px;
+      display: flex;
+      width: 440px;
+      .search-input {
+        border: none;
+        height: 38px;
+        box-shadow: none;
+        font-family: 'Open Sans';
+        font-style: normal;
+        font-weight: 400;
+        font-size: 14px;
+      }
+      .search-icon {
+        cursor: pointer;
+        height: 100%;
+        // width: 40px;
+        text-align: center;
+        padding: 8px;
+      }
+    }
+
+    .shopping-wrap {
+      border-radius: 4px;
+      margin-left: 16px;
+      padding: 8px 16px;
+      font-family: 'Open Sans';
+      font-style: normal;
+      font-weight: 400;
+      font-size: 14px;
+      line-height: 22px;
+      display: flex;
+      align-items: center;
+      cursor: pointer;
+      border: 1px solid #2F54EB;
+      .shopping-txt {
+        margin-left: 6px;
+      }
+    }
+  }
+}

package/es/composite-comp/dito/config-panels/PcNavigationConfig/PcNavConfigCategory/index.js

@@ -7,10 +7,12 @@ exports["default"] = void 0;
 
 var _react = _interopRequireDefault(require("react"));
 
-var _TextOnlyFontConfig = _interopRequireDefault(require("../TextOnlyFontConfig"));
+var _common = require("../../../../../common");
 
 var _coreUtil = require("../../../../../utils/coreUtil");
 
+var _TextOnlyFontConfig = _interopRequireDefault(require("../TextOnlyFontConfig"));
+
 var _Collapse = _interopRequireDefault(require("../../../../../common/Collapse"));
 
 var _locale = require("../../../../../locale");
@@ -69,7 +71,18 @@ function (_super) {
       onRefresh: this.reRender,
       source: [{
         key: 'category1',
-        name: (0, _locale.i18n)('ALL_CATEGORY'),
+        name: /*#__PURE__*/_react["default"].createElement("div", {
+          onClick: function onClick() {
+            return (0, _coreUtil.clickUrl)('/#/PageCategoryManagement');
+          }
+        }, (0, _locale.i18n)('ALL_CATEGORY'), /*#__PURE__*/_react["default"].createElement(_common.Iconfont, {
+          color: "#2F54EB",
+          size: 16,
+          style: {
+            marginLeft: 10
+          },
+          type: "icon-edit"
+        })),
         value: /*#__PURE__*/_react["default"].createElement(_TextOnlyFontConfig["default"], {
           data: panelProps.allCategory,
           needIcon: true

package/es/core/Designer/CompListPanel/index.js

@@ -19,6 +19,8 @@ require("./index.less");
 
 var _locale = require("../../../locale");
 
+var _coreUtil = require("../../../utils/coreUtil");
+
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
 
 function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { "default": obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj["default"] = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
@@ -114,10 +116,12 @@ function (_super) {
       }, /*#__PURE__*/_react["default"].createElement("h5", {
         className: "cat-name"
       }, compCat, "(", "" + compSource[compCat].length, ")"), compSource[compCat].map(function (comp) {
-        return /*#__PURE__*/_react["default"].createElement(_CompCard["default"], _extends({}, comp, {
+        return (0, _coreUtil.isActiveFloor)(comp.terminalType) ? /*#__PURE__*/_react["default"].createElement(_CompCard["default"], _extends({}, comp, {
           key: comp.moduleId,
-          onAdd: _this.onAddClick
-        }));
+          onAdd: function onAdd() {
+            return _this.onAddClick(comp);
+          }
+        })) : null;
       }));
     })));
   };
@@ -125,34 +129,5 @@ function (_super) {
   return CompListPanel;
 }(_react.Component);
 
-var _default = CompListPanel; // export default function CompListPanel({ visible, onClose, compSource, onAdd }) {
-//   useEffect(() => {
-//     if (visible) {
-//       document.getElementsByClassName('component-list')[0].scrollTop = 0;
-//     }
-//   }, [visible]);
-//   return (
-//     <div className={classNames('compListPanel', { visible })}>
-//       <header className="header">
-//         <Button icon="icon-close" onClick={onClose} type="icon" />
-//       </header>
-//       <h2 className="title">{i18n('ADD_COMPONENT')}</h2>
-//       <div className="component-list">
-//         {
-//           Object.keys(compSource).map(compCat => (
-//             <div key={compCat} className="cat-list">
-//               <h5 className="cat-name">{compCat}({`${compSource[compCat].length}`})</h5>
-//               {
-//                 compSource[compCat].map(comp => (
-//                   <CompCard {...comp} key={comp.moduleId} onAdd={onAdd} />
-//                 ))
-//               }
-//             </div>
-//           ))
-//         }
-//       </div>
-//     </div>
-//   );
-// }
-
+var _default = CompListPanel;
 exports["default"] = _default;

package/es/core/Designer/ConfigPanel/TerminalSelect/index.js

@@ -0,0 +1,73 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = TerminalSelect;
+
+var _react = _interopRequireDefault(require("react"));
+
+var _common = require("../../../../common");
+
+require("./index.less");
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
+
+function TerminalSelect(_a) {
+  var value = _a.value,
+      onChange = _a.onChange,
+      terminalType = _a.terminalType;
+  var isActiveMobile = ['MOBILE', 'ALL'].includes(value);
+  var isActivePc = ['PC', 'ALL'].includes(value);
+
+  var onTerminalClick = function onTerminalClick(terminal) {
+    // 至少选中一种终端
+    if (value === terminal) {
+      return;
+    }
+
+    if (value === 'ALL') {
+      if (terminal === 'PC') {
+        onChange('MOBILE');
+      } else {
+        onChange('PC');
+      }
+    } else {
+      onChange('ALL');
+    }
+  };
+
+  return /*#__PURE__*/_react["default"].createElement("div", {
+    className: "terminal_wrap"
+  }, ['MOBILE', 'ALL'].includes(terminalType) && /*#__PURE__*/_react["default"].createElement("div", {
+    className: "terminal_item",
+    onClick: function onClick() {
+      return onTerminalClick('MOBILE');
+    }
+  }, /*#__PURE__*/_react["default"].createElement(_common.Iconfont, {
+    color: isActiveMobile ? '#2F54EB' : '#C4C4C4',
+    size: 20,
+    type: "icon-mobile"
+  }), /*#__PURE__*/_react["default"].createElement("span", {
+    className: "select"
+  }, /*#__PURE__*/_react["default"].createElement(_common.Iconfont, {
+    color: isActiveMobile ? '#00AC5A' : '#A3AEC3',
+    size: 9,
+    type: "icon-select"
+  }))), ['PC', 'ALL'].includes(terminalType) && /*#__PURE__*/_react["default"].createElement("div", {
+    className: "terminal_item",
+    onClick: function onClick() {
+      return onTerminalClick('PC');
+    }
+  }, /*#__PURE__*/_react["default"].createElement(_common.Iconfont, {
+    color: isActivePc ? '#2F54EB' : '#C4C4C4',
+    size: 20,
+    type: "icon-pc"
+  }), /*#__PURE__*/_react["default"].createElement("span", {
+    className: "select"
+  }, /*#__PURE__*/_react["default"].createElement(_common.Iconfont, {
+    color: isActivePc ? '#00AC5A' : '#A3AEC3',
+    size: 9,
+    type: "icon-select"
+  }))));
+}

package/es/core/Designer/ConfigPanel/TerminalSelect/index.less

@@ -0,0 +1,29 @@
+.terminal_wrap {
+  display: flex;
+  .terminal_item {
+    position: relative;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: 24px;
+    height: 24px;
+    background-color: #EDF0F4;
+    border-radius: 2px;
+    cursor: pointer;
+    .select {
+      position: absolute;
+      right: -4px;
+      top: -4px;
+      line-height: 0;
+    }
+  }
+  .terminal_item + .terminal_item {
+    margin-left: 16px;
+  }
+  .active {
+    background-color: #2F54EB;
+  }
+}
+.terminal_wrap+ span {
+  margin-left: 14px;
+}

package/es/core/Designer/ConfigPanel/index.js

@@ -9,6 +9,8 @@ exports["default"] = void 0;
 
 var _react = _interopRequireWildcard(require("react"));
 
+var _TerminalSelect = _interopRequireDefault(require("./TerminalSelect"));
+
 var _coreUtil = require("../../../utils/coreUtil");
 
 var _commonUtil = require("../../../utils/commonUtil");
@@ -72,10 +74,10 @@ function (_super) {
       selectedNode: {}
     };
 
-    _this.resetState = function (propsData) {
+    _this.resetState = function (propsData, clickedFloor) {
       var pageData = propsData.pageData;
       var selectedNode = pageData.find(function (floor) {
-        return floor.id === _mobx.store.clickedFloor;
+        return floor.id === clickedFloor;
       });
 
       _this.setState({
@@ -252,7 +254,7 @@ function (_super) {
           groupName = panelProps.groupName.text;
 
         case 'TAG':
-          groupName = panelProps.button.text;
+          groupName = '';
       }
 
       return groupName || 'Group Name';
@@ -268,6 +270,18 @@ function (_super) {
       }));
     };
 
+    _this.onTerminalChange = function (terminal) {
+      var selectedNode = _this.state.selectedNode;
+      selectedNode.activeTerminal = terminal;
+
+      _this.setState({
+        selectedNode: selectedNode
+      }); // 刷新页面组件列表 和 viewArea
+
+
+      (0, _coreUtil.renderPreview)();
+    };
+
     return _this;
   }
 
@@ -275,12 +289,12 @@ function (_super) {
     var _this = this;
 
     this.distroy = (0, _mobx.autorun)(function () {
-      _this.resetState(_this.props);
+      _this.resetState(_this.props, _mobx.store.clickedFloor);
     });
   };
 
   ConfigPanel.prototype.componentWillReceiveProps = function (nextProps) {
-    this.resetState(nextProps);
+    this.resetState(nextProps, _mobx.store.clickedFloor);
   };
 
   ConfigPanel.prototype.componentWillUnmount = function () {
@@ -301,10 +315,17 @@ function (_super) {
     }, /*#__PURE__*/_react["default"].createElement("span", {
       className: "title",
       title: (_a = _constants.compInfoMap[selectedNode === null || selectedNode === void 0 ? void 0 : selectedNode.type]) === null || _a === void 0 ? void 0 : _a.name
-    }, (_b = _constants.compInfoMap[selectedNode === null || selectedNode === void 0 ? void 0 : selectedNode.type]) === null || _b === void 0 ? void 0 : _b.name), device === _constants.deviceTypeMap.PC && /*#__PURE__*/_react["default"].createElement(_Button["default"], {
+    }, (_b = _constants.compInfoMap[selectedNode === null || selectedNode === void 0 ? void 0 : selectedNode.type]) === null || _b === void 0 ? void 0 : _b.name), /*#__PURE__*/_react["default"].createElement("div", {
+      className: "right_wrap"
+    }, /*#__PURE__*/_react["default"].createElement(_TerminalSelect["default"], {
+      onChange: this.onTerminalChange,
+      terminalType: selectedNode === null || selectedNode === void 0 ? void 0 : selectedNode.terminalType,
+      value: selectedNode === null || selectedNode === void 0 ? void 0 : selectedNode.activeTerminal
+    }), device === _constants.deviceTypeMap.PC && /*#__PURE__*/_react["default"].createElement(_Button["default"], {
       onClick: this.onDoneClick,
+      size: "small",
       type: "light"
-    }, (0, _locale.i18n)('DONE'))), this.getConfigPanelInstance()), /*#__PURE__*/_react["default"].createElement("div", {
+    }, (0, _locale.i18n)('DONE')))), this.getConfigPanelInstance()), /*#__PURE__*/_react["default"].createElement("div", {
       className: "sec_config_wrap"
     }, /*#__PURE__*/_react["default"].createElement("div", {
       className: "config_header"

package/es/core/Designer/ConfigPanel/index.less

@@ -39,6 +39,10 @@
         line-height: 32px;
         color: #232F46;
       }
+      .right_wrap {
+        display: flex;
+        align-items: center;
+      }
     }
   }