@fonixtree/magic-design 0.1.72 → 0.1.74

package/lib/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/lib/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/lib/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/lib/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/lib/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/lib/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) {
@@ -767,5 +788,83 @@ var pxToRem = function pxToRem(styleObj) {
 
   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/lib/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 {
     // 视频

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@fonixtree/magic-design",
   "author": "Cylon Team",
-  "version": "0.1.72",
+  "version": "0.1.74",
   "description": "Magic Design",
   "license": "MIT",
   "module": "es/index.js",
@@ -26,6 +26,7 @@
     "interactjs": "1.10.17",
     "lodash": "4.17.21",
     "macy": "2.5.1",
+    "marked": "4",
     "mobx": "6.6.1",
     "mobx-react": "7.5.2",
     "moment": "2.29.3",