@fonixtree/magic-design 1.0.5 → 2.0.2

package/es/meta-comp/config-panels/PlayIconConfig/index.js

@@ -0,0 +1,211 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = void 0;
+
+var _react = _interopRequireDefault(require("react"));
+
+var _antd = require("antd");
+
+var _classnames = _interopRequireDefault(require("classnames"));
+
+require("./index.less");
+
+var _PlaySvg = _interopRequireDefault(require("./PlaySvg"));
+
+var _BaseConfig = _interopRequireDefault(require("../BaseConfig"));
+
+var _common = require("../../../common");
+
+var _locale = require("../../../locale");
+
+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 __());
+  };
+}();
+/* eslint-disable react/no-this-in-sfc */
+
+
+var Option = _antd.Select.Option;
+var iconColorList = [{
+  key: 'Light',
+  value: (0, _locale.i18n)('LIGHT')
+}, {
+  key: 'Dark',
+  value: (0, _locale.i18n)('DARK')
+}];
+var DarkIconList = [{
+  iconName: 'dark-playicon-01'
+}, {
+  iconName: 'dark-playicon-02'
+}, {
+  iconName: 'dark-playicon-03'
+}, {
+  iconName: 'dark-playicon-04'
+}, {
+  iconName: 'dark-playicon-05'
+}];
+var LightIconList = [{
+  iconName: 'light-playicon-01'
+}, {
+  iconName: 'light-playicon-02'
+}, {
+  iconName: 'light-playicon-03'
+}, {
+  iconName: 'light-playicon-04'
+}, {
+  iconName: 'light-playicon-05'
+}];
+var iconList = LightIconList;
+
+var PlayIconConfig =
+/** @class */
+function (_super) {
+  __extends(PlayIconConfig, _super);
+
+  function PlayIconConfig() {
+    var _this = _super !== null && _super.apply(this, arguments) || this;
+
+    _this.state = {
+      iconSelectedIndex: 0
+    };
+
+    _this.reRender = function () {
+      (0, _coreUtil.renderPreview)();
+
+      _this.setState({});
+    };
+
+    return _this;
+  }
+
+  PlayIconConfig.prototype.componentDidMount = function () {
+    window.document.addEventListener('button-render', this.selfRender);
+    iconList = this.props.data.iconColor === 'Light' ? LightIconList : DarkIconList;
+  };
+
+  PlayIconConfig.prototype.componentWillUnmount = function () {
+    window.document.removeEventListener('button-render', this.selfRender);
+  };
+
+  PlayIconConfig.prototype.render = function () {
+    var _this = this;
+
+    var data = this.props.data;
+    var iconSelectedIndex = this.state.iconSelectedIndex;
+    return /*#__PURE__*/_react["default"].createElement("div", {
+      className: "play-config"
+    }, /*#__PURE__*/_react["default"].createElement(_common.Field, {
+      split: true,
+      title: "Play Icon Type"
+    }, /*#__PURE__*/_react["default"].createElement("div", {
+      className: "icon-wrap"
+    }, iconList.map(function (item, i) {
+      return /*#__PURE__*/_react["default"].createElement("div", {
+        key: item.iconName,
+        className: (0, _classnames["default"])('icon-item-wrap', {
+          'icon-selected-wrap': i === iconSelectedIndex
+        }),
+        onClick: function onClick() {
+          _this.setState({
+            iconSelectedIndex: i
+          });
+
+          data.iconType = item.iconName;
+
+          _this.reRender();
+        }
+      }, /*#__PURE__*/_react["default"].createElement("div", {
+        className: "selected-icon"
+      }, /*#__PURE__*/_react["default"].createElement(_common.Iconfont, {
+        color: "#fff",
+        size: 8,
+        type: "icon-vector"
+      })), /*#__PURE__*/_react["default"].createElement(_PlaySvg["default"], {
+        imgName: item.iconName,
+        imgWidth: 28
+      }));
+    }))), /*#__PURE__*/_react["default"].createElement(_common.Field, {
+      split: true,
+      title: "Play Icon Color"
+    }, /*#__PURE__*/_react["default"].createElement(_antd.Select, {
+      className: "icon-color-select",
+      onChange: function onChange(value) {
+        data.iconColor = value;
+        iconList = value === 'Light' ? LightIconList : DarkIconList;
+        data.iconType = iconList[iconSelectedIndex].iconName;
+
+        _this.reRender();
+      },
+      size: "large",
+      value: data.iconColor
+    }, iconColorList.map(function (v) {
+      return /*#__PURE__*/_react["default"].createElement(Option, {
+        key: v.key,
+        value: v.key
+      }, v.value);
+    }))), /*#__PURE__*/_react["default"].createElement(_common.Field, {
+      title: "Play Icon Size"
+    }, /*#__PURE__*/_react["default"].createElement(_common.Slider, {
+      inputType: "int",
+      maxVal: 100,
+      minVal: 40,
+      onChange: function onChange(_a) {
+        var count = _a.count;
+
+        if ((0, _coreUtil.isPc)()) {
+          data.pcSize = count;
+        } else {
+          data.size = count;
+        }
+
+        _this.reRender();
+      },
+      value: {
+        count: (0, _coreUtil.isPc)() ? data.pcSize : data.size
+      }
+    })));
+  };
+
+  PlayIconConfig.defaultProps = {
+    data: {
+      open: false,
+      type: 'PLAY',
+      size: 48,
+      pcSize: 60,
+      iconType: 'light-playicon-01',
+      iconColor: 'Light'
+    }
+  };
+  return PlayIconConfig;
+}(_BaseConfig["default"]);
+
+var _default = PlayIconConfig;
+exports["default"] = _default;

package/es/meta-comp/config-panels/PlayIconConfig/index.less

@@ -1,4 +1,39 @@
-.m-button-config {
-  padding: 0 12px;
+.play-config {
+  padding: 12px;
   background-color: #F5F6F7;
+  border-radius: 6px;
+  .icon-wrap {
+    display: flex;
+    align-items: center;
+    justify-content: flex-start;
+    .icon-item-wrap {
+      margin-right: 12px;
+      border-radius: 4px;
+      background-color: #D2D9E5;
+      padding: 4px;
+      line-height: 1;
+      border: 1px solid transparent;
+      min-height: 34px;
+      .selected-icon {
+        display: none;
+      }
+    }
+    .icon-selected-wrap {
+      border-color: #00AC5A;
+      position: relative;
+      .selected-icon {
+        position: absolute;
+        display: block;
+        top: -7px;
+        right: -7px;
+        background-color: #00AC5A;
+        width: 14px;
+        height: 14px;
+        border-radius: 50%;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+      }
+    }
+  }
 }

package/es/meta-comp/config-panels/TextConfig/index.js

@@ -241,8 +241,12 @@ function (_super) {
       }, /*#__PURE__*/_react["default"].createElement(_antd.Select.Option, {
         value: 400
       }, (0, _locale.i18n)('REGULAR')), /*#__PURE__*/_react["default"].createElement(_antd.Select.Option, {
+        value: 500
+      }, (0, _locale.i18n)('MEDIUM')), /*#__PURE__*/_react["default"].createElement(_antd.Select.Option, {
         value: 600
-      }, (0, _locale.i18n)('MEDIUM')))), /*#__PURE__*/_react["default"].createElement(_common.Field, {
+      }, (0, _locale.i18n)('SEMIBOLD')), /*#__PURE__*/_react["default"].createElement(_antd.Select.Option, {
+        value: 700
+      }, (0, _locale.i18n)('BOLD')))), /*#__PURE__*/_react["default"].createElement(_common.Field, {
         title: (0, _locale.i18n)('FONT_SIZE')
       }, /*#__PURE__*/_react["default"].createElement(_common.Slider, {
         onChange: function onChange(_a) {

package/es/mobx/Store.js

@@ -38,6 +38,8 @@ function () {
 
     this.CarouselStore = {}; // 轮播组件暂存数据
 
+    this.imgGenVisible = false; // 图片生成器是否可见
+
     (0, _mobx.makeObservable)(this, {
       MPageData: _mobx.observable,
       locale: _mobx.observable,
@@ -47,6 +49,7 @@ function () {
       clickedFloor: _mobx.observable,
       hoveredFloor: _mobx.observable,
       CarouselStore: _mobx.observable,
+      imgGenVisible: _mobx.observable,
       setState: _mobx.action.bound
     });
   }

package/es/utils/androidUtil.js

@@ -21,7 +21,8 @@ var browserVersion = function browserVersion() {
     webApp: u.indexOf('Safari') == -1,
     weixin: u.indexOf('MicroMessenger') > -1,
     qq: u.match(/\sQQ/i) == ' qq',
-    isApp: u.indexOf('app/CYLON-APP') > -1
+    isApp: u.indexOf('app/CYLON-APP') > -1,
+    isAshitaApp: u.indexOf('app/ASHITA-APP') > -1
   };
 };
 

package/es/utils/businessUtil.js

@@ -153,6 +153,19 @@ var newParseUrl = function newParseUrl(urlObj) {
       };
       break;
 
+    case _constants.urlTypeMap.AFFILIATE_PRODUCT:
+      // 分销商品
+      link = '';
+      params = {
+        action: 'operation',
+        params: {
+          type: 'AFFILIATE_PRODUCT',
+          productName: value,
+          productId: productId
+        }
+      };
+      break;
+
     default:
       var map = {
         '/main/cart': 'CART',

package/es/utils/commonUtil.js

@@ -7,13 +7,14 @@ exports.addZero = exports.addUrlQuery = void 0;
 exports.asyncDataURLtoImage = asyncDataURLtoImage;
 exports.checkFileName = exports.calcLastTime = exports.asyncNextTick = void 0;
 exports.commonFetch = commonFetch;
+exports.compatibleNewPageData = void 0;
 exports.convertImageUrl = convertImageUrl;
 exports.convertToRem = void 0;
 exports.copy2ClipBoard = copy2ClipBoard;
 exports.covertKey = covertKey;
-exports.dragSource = void 0;
+exports.dragSource = exports.downloadBase64Image = void 0;
 exports.ensure = ensure;
-exports.getColorRgba = void 0;
+exports.getGAData = exports.getColorRgba = void 0;
 exports.getPageDataMap = getPageDataMap;
 exports.nextTick = exports.navigateTo = exports.importAsync = exports.getUrlParams = void 0;
 exports.pushGA = pushGA;
@@ -28,10 +29,30 @@ var _axios = _interopRequireDefault(require("axios"));
 
 var _lodash = require("lodash");
 
+var _uuid = require("uuid");
+
 var _qs = _interopRequireDefault(require("qs"));
 
+var _constants = require("../constants");
+
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
 
+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 __awaiter = void 0 && (void 0).__awaiter || function (thisArg, _arguments, P, generator) {
   function adopt(value) {
     return value instanceof P ? value : new P(function (resolve) {
@@ -722,13 +743,18 @@ var asyncNextTick = function asyncNextTick(asyncFunc, interval, count) {
 exports.asyncNextTick = asyncNextTick;
 
 var convertToRem = function convertToRem(value) {
-  return value; // PTO项目 解开注释
-  // if (window.magicDesign.device === 'pc' || window.magicDesign.mode === 'designer') {
-  //   return value;
-  // }
-  // const pxValue = parseFloat(value);
-  // const remValue = pxValue / 50; // 假设1rem = 50px
-  // return `${remValue}rem`;
+  // return value; // PTO项目 解开注释
+  if (window.magicDesign.device === 'pc' || window.magicDesign.mode === 'designer') {
+    return value + "px";
+  }
+
+  var baseFont = ensure(function () {
+    return window.getComputedStyle(document.getElementsByTagName('html')[0]).fontSize.replace('px', '');
+  }, 50);
+  var pxValue = parseFloat(value);
+  var remValue = pxValue / baseFont; // 假设1rem = 50px
+
+  return remValue + "rem";
 };
 /** px to rem */
 
@@ -736,30 +762,112 @@ var convertToRem = function convertToRem(value) {
 exports.convertToRem = convertToRem;
 
 var pxToRem = function pxToRem(styleObj) {
-  return styleObj; // PTO项目 解开注释
-  // if (window.magicDesign.device === 'pc' || window.magicDesign.mode === 'designer') {
-  //   return styleObj;
-  // }
-  // const remObj = {};
-  // for (const key in styleObj) {
-  //   if (styleObj.hasOwnProperty(key)) {
-  //     const value = styleObj[key];
-  //     if (typeof value === 'string' && value.endsWith('px')) {
-  //       remObj[key] = key === 'opacity' || key === 'lineHeight' ? value : convertToRem(value);
-  //     } else if (typeof value === 'number') {
-  //       remObj[key] = convertToRem(value);
-  //     } else if ((key === 'padding' || key === 'margin') && typeof value === 'string') {
-  //       const paddingValues = value.split(' ');
-  //       const remPaddingValues = paddingValues.map((paddingValue) => {
-  //         return paddingValue.endsWith('px') ? convertToRem(paddingValue) : paddingValue;
-  //       });
-  //       remObj[key] = remPaddingValues.join(' ');
-  //     } else {
-  //       remObj[key] = value;
-  //     }
-  //   }
-  // }
-  // return remObj;
+  // return styleObj; // PTO项目 解开注释
+  if (window.magicDesign.device === 'pc' || window.magicDesign.mode === 'designer') {
+    return styleObj;
+  }
+
+  var remObj = {};
+
+  for (var key in styleObj) {
+    if (styleObj.hasOwnProperty(key)) {
+      var value = styleObj[key];
+
+      if (typeof value === 'string' && value.endsWith('px')) {
+        remObj[key] = key === 'opacity' || key === 'lineHeight' ? value : convertToRem(value);
+      } else if (typeof value === 'number') {
+        remObj[key] = convertToRem(value);
+      } else if ((key === 'padding' || key === 'margin') && typeof value === 'string') {
+        var paddingValues = value.split(' ');
+        var remPaddingValues = paddingValues.map(function (paddingValue) {
+          return paddingValue.endsWith('px') ? convertToRem(paddingValue) : paddingValue;
+        });
+        remObj[key] = remPaddingValues.join(' ');
+      } else {
+        remObj[key] = value;
+      }
+    }
+  }
+
+  return remObj;
+};
+/**
+ * 处理新老数据兼容问题
+ * @param pageData 大JSON
+ */
+
+
+exports.pxToRem = pxToRem;
+
+var compatibleNewPageData = function compatibleNewPageData(pageData) {
+  if (pageData.childNodes && pageData.childNodes.length > 0) {
+    pageData.childNodes.forEach(function (child) {
+      // 兼容新功能：banner 轮播的 dots 点 区分pc 移动
+      if (child.type === 'BANNER') {
+        if (!child.setting.dots.color.pc || !child.setting.dots.hoverColor.pc || !child.setting.dots.size.pc) {
+          child.setting.dots = __assign(__assign({}, child.setting.dots), {
+            color: {
+              pc: '#fff',
+              mobile: '#fff'
+            },
+            hoverColor: {
+              pc: '#fff',
+              mobile: '#fff'
+            },
+            size: {
+              pc: 16,
+              mobile: 8
+            },
+            hoverSize: {
+              pc: 16,
+              mobile: 8
+            }
+          });
+        }
+      } // 兼容新开发的功能： video新增播放按钮 的设置
+
+
+      if (child.type === 'VIDEO') {
+        // console.log('--compatibleNewPageData -- video ');
+        child.groupSource.forEach(function (group) {
+          if (!group.playIcon) {
+            group.playIcon = {
+              open: true,
+              parentId: group.id,
+              id: (0, _uuid.v4)(),
+              type: 'PLAY',
+              size: 48,
+              pcSize: 60,
+              iconType: 'light-playicon-01',
+              iconColor: 'Light'
+            };
+          }
+        }); // console.log('--compatibleNewPageData -- video add group.playIcon ', child.groupSource);
+      }
+    });
+  }
+};
+
+exports.compatibleNewPageData = compatibleNewPageData;
+
+var getGAData = function getGAData(data) {
+  var _a;
+
+  return {
+    moduleId: data.id,
+    moduleName: data.moduleIndex + '.' + ((_a = _constants.compInfoMap[data.type]) === null || _a === void 0 ? void 0 : _a.name)
+  };
+};
+
+exports.getGAData = getGAData;
+
+var downloadBase64Image = function downloadBase64Image(base64String, filename) {
+  // 创建一个虚拟的链接元素
+  var link = document.createElement('a');
+  link.href = base64String;
+  link.download = filename; // 模拟点击下载
+
+  link.click();
 };
 
-exports.pxToRem = pxToRem;
+exports.downloadBase64Image = downloadBase64Image;

package/es/utils/coreUtil.js

@@ -304,7 +304,7 @@ var clickUrl = function clickUrl(url) {
   var _b = data.params,
       params = _b === void 0 ? {} : _b;
 
-  if ((0, _androidUtil.browserVersion)().isApp) {
+  if ((0, _androidUtil.browserVersion)().isAshitaApp) {
     (0, _androidUtil.sendToApp)(data);
   } else {
     // 视频
@@ -319,10 +319,9 @@ var clickUrl = function clickUrl(url) {
     if (params.type === 'GET_COUPON') {
       getCoupon(params.couponId);
       return;
-    } // 分享
-
+    }
 
-    if (params.type === 'SHARE_URL') {
+    if (params.type === 'SHARE_URL' || params.type === 'AFFILIATE_PRODUCT') {
       if (window.magicDesign.handleAction) {
         window.magicDesign.handleAction(params);
       }

package/lib/assets/fonts/magic-box-iconfont.css

@@ -1,8 +1,8 @@
 @font-face {
   font-family: "magic-box-iconfont"; /* Project id 3317752 */
-  src: url('magic-box-iconfont.woff2?t=1686648198297') format('woff2'),
-       url('magic-box-iconfont.woff?t=1686648198297') format('woff'),
-       url('magic-box-iconfont.ttf?t=1686648198297') format('truetype');
+  src: url('magic-box-iconfont.woff2?t=1687675025610') format('woff2'),
+       url('magic-box-iconfont.woff?t=1687675025610') format('woff'),
+       url('magic-box-iconfont.ttf?t=1687675025610') format('truetype');
 }
 
 .magic-box-iconfont {
@@ -13,6 +13,50 @@
   -moz-osx-font-smoothing: grayscale;
 }
 
+.magic-box-icon-w-play-03:before {
+  content: "\e67b";
+}
+
+.magic-box-icon-b-play-03:before {
+  content: "\e671";
+}
+
+.magic-box-icon-select2:before {
+  content: "\e67a";
+}
+
+.magic-box-icon-b-play-02:before {
+  content: "\e672";
+}
+
+.magic-box-icon-b-play-05:before {
+  content: "\e673";
+}
+
+.magic-box-icon-b-play-01:before {
+  content: "\e674";
+}
+
+.magic-box-icon-w-play-01:before {
+  content: "\e675";
+}
+
+.magic-box-icon-w-play-04:before {
+  content: "\e676";
+}
+
+.magic-box-icon-w-play-02:before {
+  content: "\e677";
+}
+
+.magic-box-icon-b-play-04:before {
+  content: "\e678";
+}
+
+.magic-box-icon-w-play-05:before {
+  content: "\e679";
+}
+
 .magic-box-icon-ListBullets02:before {
   content: "\e670";
 }

package/lib/assets/fonts/magic-box-iconfont.css.bak

@@ -1,8 +1,8 @@
 @font-face {
   font-family: "magic-box-iconfont"; /* Project id 3317752 */
-  src: url('magic-box-iconfont.woff2?t=1686648198297') format('woff2'),
-       url('magic-box-iconfont.woff?t=1686648198297') format('woff'),
-       url('magic-box-iconfont.ttf?t=1686648198297') format('truetype');
+  src: url('magic-box-iconfont.woff2?t=1687675025610') format('woff2'),
+       url('magic-box-iconfont.woff?t=1687675025610') format('woff'),
+       url('magic-box-iconfont.ttf?t=1687675025610') format('truetype');
 }
 
 .magic-box-iconfont {
@@ -13,6 +13,50 @@
   -moz-osx-font-smoothing: grayscale;
 }
 
+.icon-w-play-03:before {
+  content: "\e67b";
+}
+
+.icon-b-play-03:before {
+  content: "\e671";
+}
+
+.icon-select2:before {
+  content: "\e67a";
+}
+
+.icon-b-play-02:before {
+  content: "\e672";
+}
+
+.icon-b-play-05:before {
+  content: "\e673";
+}
+
+.icon-b-play-01:before {
+  content: "\e674";
+}
+
+.icon-w-play-01:before {
+  content: "\e675";
+}
+
+.icon-w-play-04:before {
+  content: "\e676";
+}
+
+.icon-w-play-02:before {
+  content: "\e677";
+}
+
+.icon-b-play-04:before {
+  content: "\e678";
+}
+
+.icon-w-play-05:before {
+  content: "\e679";
+}
+
 .icon-ListBullets02:before {
   content: "\e670";
 }