@fonixtree/magic-design 2.0.53 → 2.0.55

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

@@ -0,0 +1,390 @@
+"use strict";
+
+function _typeof(obj) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (obj) { return typeof obj; } : function (obj) { return obj && "function" == typeof Symbol && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }, _typeof(obj); }
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.getSecondConfigName = exports["default"] = void 0;
+
+var _react = _interopRequireWildcard(require("react"));
+
+var _TerminalSelect = _interopRequireDefault(require("./TerminalSelect"));
+
+var _coreUtil = require("../../../utils/coreUtil");
+
+var _commonUtil = require("../../../utils/commonUtil");
+
+var _Button = _interopRequireDefault(require("../../../common/Button"));
+
+var _constants = require("../../../constants");
+
+var _componentTypes = require("../../../constants/component-types");
+
+var _mobx = require("../../../mobx");
+
+var _locale = require("../../../locale");
+
+require("./index.less");
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
+
+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; }
+
+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 getSecondConfigName = function getSecondConfigName(selectedNode, clickedGroup) {
+  var _a, _b, _c, _d;
+
+  if (!selectedNode || !selectedNode.groupSource) {
+    return;
+  }
+
+  var panelProps = selectedNode.groupSource.find(function (src) {
+    return src.id === clickedGroup;
+  });
+  var panelIndex = selectedNode.groupSource.findIndex(function (src) {
+    return src.id === clickedGroup;
+  });
+
+  if (!panelProps) {
+    return;
+  }
+
+  var groupName = '';
+
+  switch (selectedNode.type) {
+    case 'IMAGE_GALLERY':
+    case 'BANNER':
+      groupName = ''; // if (!groupName) {
+      //   groupName = isPc() ? panelProps.image?.content?.pcName : panelProps.image?.content?.h5Name;
+      // }
+
+      if ((0, _coreUtil.isPc)()) {
+        groupName = panelProps.image.content.pcImgSrc ? panelProps.image.content.pcName : (0, _locale.i18n)('BANNER_GROUP_NAME');
+      } else {
+        groupName = panelProps.image.content.h5ImgSrc ? panelProps.image.content.h5Name : (0, _locale.i18n)('BANNER_GROUP_NAME');
+      }
+
+      break;
+
+    case 'CAROUSEL':
+      groupName = (0, _coreUtil.isPc)() ? (_b = (_a = panelProps.image) === null || _a === void 0 ? void 0 : _a.content) === null || _b === void 0 ? void 0 : _b.pcName : (_d = (_c = panelProps.image) === null || _c === void 0 ? void 0 : _c.content) === null || _d === void 0 ? void 0 : _d.h5Name;
+      break;
+
+    case 'MOBILE_NAVIGATION':
+    case 'PC_NAVIGATION':
+      groupName = (panelProps === null || panelProps === void 0 ? void 0 : panelProps.title.text) || (0, _locale.i18n)('NAVIGATION_NAME');
+      break;
+
+    case 'IMAGE_TEXT':
+      groupName = panelProps.title.open ? panelProps.title.text : (0, _locale.i18n)('IMAGE_AND_TEXT_NAME');
+      break;
+
+    case 'TEXT':
+    case 'WALLET':
+      groupName = panelProps.title.text;
+      break;
+
+    case 'RECOMMEND':
+    case 'AFFILIATE_RECOMMEND':
+      // console.log('RECOMMEND ---panelProps.groupName.text', panelProps.groupName.text);
+      groupName = panelProps.groupName.text;
+      break;
+
+    case 'BUTTON':
+      groupName = panelProps.button.text;
+      break;
+
+    case 'VIDEO':
+      groupName = 'Video' + (panelIndex + 1);
+      break;
+
+    case 'TAG':
+      groupName = panelProps.button.text;
+      break;
+  }
+
+  return groupName || 'Group Name';
+};
+
+exports.getSecondConfigName = getSecondConfigName;
+
+var ConfigPanel =
+/** @class */
+function (_super) {
+  __extends(ConfigPanel, _super);
+
+  function ConfigPanel() {
+    var _this = _super !== null && _super.apply(this, arguments) || this;
+
+    _this.preClickedGroup = null; // 以及面板展开状态
+
+    _this.configOpen = false;
+    _this.state = {
+      selectedNode: {}
+    };
+
+    _this.resetState = function (propsData, clickedFloor) {
+      var pageData = propsData.pageData;
+      var selectedNode = pageData.find(function (floor) {
+        return floor.id === clickedFloor;
+      });
+
+      _this.setState({
+        clickedGroup: _mobx.store.clickedGroup,
+        selectedNode: selectedNode
+      }); // 展开一级面板
+
+
+      if (selectedNode) {
+        _this.openConfig();
+      } else {
+        _this.closeConfig();
+      } // 展开二级面板
+
+
+      if (!_mobx.store.clickedGroup && _this.preClickedGroup) {
+        _this.closeSecConfig();
+      } else if (Boolean(_mobx.store.clickedGroup) != Boolean(_this.preClickedGroup)) {
+        _this.openSecConfig();
+      }
+
+      _this.preClickedGroup = _mobx.store.clickedGroup;
+    };
+
+    _this.animation = function (type) {
+      document.getElementsByClassName('config_wrap')[0].setAttribute('style', "animation-name:" + type + ";animation-duration: 0.3s;animation-fill-mode:both");
+    };
+
+    _this.openPcConfig = function () {
+      _this.animation('openPcConfig');
+    };
+
+    _this.closePcConfig = function () {
+      _this.animation('closePcConfig');
+    };
+
+    _this.openMobileConfig = function () {
+      _this.animation('openMobileConfig');
+    };
+
+    _this.closeMobileConfig = function () {
+      _this.animation('closeMobileConfig');
+    };
+
+    _this.openConfig = function () {
+      if (_this.configOpen) {
+        return;
+      }
+
+      if (window.magicDesign.device === 'pc') {
+        _this.openPcConfig();
+      } else {
+        _this.openMobileConfig();
+      }
+
+      _this.configOpen = true;
+    };
+
+    _this.closeConfig = function () {
+      if (!_this.configOpen) {
+        return;
+      }
+
+      if (window.magicDesign.device === 'pc') {
+        _this.closePcConfig();
+      } else {
+        _this.closeMobileConfig();
+      }
+
+      _this.configOpen = false;
+    };
+
+    _this.openSecConfig = function () {
+      var _a;
+
+      (_a = document.getElementsByClassName('sec_config_wrap')[0]) === null || _a === void 0 ? void 0 : _a.setAttribute('style', 'animation-name:openSecConfig;animation-duration: 0.3s;animation-fill-mode:both');
+    };
+
+    _this.closeSecConfig = function () {
+      var _a;
+
+      (_a = document.getElementsByClassName('sec_config_wrap')[0]) === null || _a === void 0 ? void 0 : _a.setAttribute('style', 'animation-name:closeSecConfig;animation-duration: 0.3s;animation-fill-mode:both');
+
+      _mobx.store.setState({
+        clickedMeta: ''
+      });
+    };
+
+    _this.onDoneClick = function () {
+      var _a = _this.props,
+          device = _a.device,
+          onClose = _a.onClose;
+
+      if (device === _constants.deviceTypeMap.PC) {
+        _this.closePcConfig();
+      }
+
+      onClose();
+    };
+
+    _this.getConfigPanelInstance = function () {
+      var device = _this.props.device;
+      var selectedNode = _this.state.selectedNode;
+      var Clazz = _componentTypes.configPanelMap[selectedNode === null || selectedNode === void 0 ? void 0 : selectedNode.type];
+      var panelProps = {
+        data: selectedNode,
+        device: device
+      };
+      var instance = Clazz ? /*#__PURE__*/_react["default"].createElement(Clazz, panelProps) : null;
+
+      if (!instance) {
+        _mobx.store.setState({
+          clickedFloor: null
+        });
+      }
+
+      return instance;
+    };
+
+    _this.getSecondConfigInstance = function () {
+      var selectedNode = _this.state.selectedNode;
+      var outputType = _this.props.outputType;
+      var Clazz = _componentTypes.secondConfigPanelMap[selectedNode === null || selectedNode === void 0 ? void 0 : selectedNode.type];
+      var panelProps = (0, _commonUtil.ensure)(function () {
+        return selectedNode === null || selectedNode === void 0 ? void 0 : selectedNode.groupSource.find(function (src) {
+          return src.id === _this.state.clickedGroup;
+        });
+      }, null);
+
+      if (panelProps) {
+        var instance = Clazz ? /*#__PURE__*/_react["default"].createElement(Clazz, {
+          panelProps: panelProps,
+          outputType: outputType,
+          parentNode: selectedNode
+        }) : null;
+        return instance;
+      }
+
+      return null;
+    };
+
+    _this.onSecConfigBack = function () {
+      _mobx.store.setState({
+        clickedGroup: null
+      });
+
+      window.document.dispatchEvent(new Event(_constants.eventType.UPDATE_FIRST_CONFIG, {
+        bubbles: false
+      }));
+    };
+
+    _this.onTerminalChange = function (terminal) {
+      var selectedNode = _this.state.selectedNode;
+      selectedNode.activeTerminal = terminal;
+
+      _this.setState({
+        selectedNode: selectedNode
+      }); // 刷新页面组件列表 和 viewArea
+
+
+      (0, _coreUtil.renderPreview)();
+    };
+
+    return _this;
+  }
+
+  ConfigPanel.prototype.componentDidMount = function () {
+    var _this = this;
+
+    this.distroy = (0, _mobx.autorun)(function () {
+      _this.resetState(_this.props, _mobx.store.clickedFloor);
+    });
+  };
+
+  ConfigPanel.prototype.componentWillReceiveProps = function (nextProps) {
+    if (JSON.stringify(this.props) !== JSON.stringify(nextProps)) {
+      this.resetState(nextProps, _mobx.store.clickedFloor);
+    }
+  };
+
+  ConfigPanel.prototype.componentWillUnmount = function () {
+    this.distroy();
+  };
+
+  ConfigPanel.prototype.render = function () {
+    var _a, _b;
+
+    var device = this.props.device;
+    var _c = this.state,
+        selectedNode = _c.selectedNode,
+        clickedGroup = _c.clickedGroup;
+    return /*#__PURE__*/_react["default"].createElement("div", {
+      className: "config_wrap"
+    }, /*#__PURE__*/_react["default"].createElement("div", {
+      className: "first_config_wrap"
+    }, /*#__PURE__*/_react["default"].createElement("div", {
+      className: "config_header"
+    }, /*#__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), /*#__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", {
+      className: "sec_config_wrap"
+    }, /*#__PURE__*/_react["default"].createElement("div", {
+      className: "config_header"
+    }, /*#__PURE__*/_react["default"].createElement("div", {
+      className: "button_wrap"
+    }, /*#__PURE__*/_react["default"].createElement(_Button["default"], {
+      icon: "icon-left",
+      onClick: this.onSecConfigBack,
+      type: "icon"
+    })), /*#__PURE__*/_react["default"].createElement("div", {
+      className: "title",
+      dangerouslySetInnerHTML: {
+        __html: getSecondConfigName(selectedNode, clickedGroup)
+      }
+    })), this.getSecondConfigInstance()));
+  };
+
+  return ConfigPanel;
+}(_react.Component);
+
+var _default = ConfigPanel;
+exports["default"] = _default;

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

@@ -0,0 +1,148 @@
+.config_wrap {
+  width: 354px;
+  background: #ffffff;
+  max-height: 100vh;
+  // overflow: scroll;
+  transition-property: transform;
+  transition-duration: .3s;
+  transition-timing-function: ease;
+  left: -354px;
+  z-index: 200;
+  // position: fixed;
+  position: absolute;
+  flex-shrink: 0;
+
+  &.show_config {
+    position: fixed;
+    transform: translateX(354px);
+  }
+
+  .first_config_wrap {
+    height: 100%;
+    padding: 24px;
+    height: 100vh;
+    overflow: auto;
+
+    .config_header {
+      font-size: 26px;
+      line-height: 36px;
+      display: flex;
+      justify-content: space-between;
+      margin-bottom: 10px;
+
+      .title {
+        overflow: hidden;
+        white-space: nowrap;
+        text-overflow: ellipsis;
+        font-family: 'Open Sans';
+        font-style: normal;
+        font-weight: 700;
+        font-size: 26px;
+        line-height: 32px;
+        color: #232F46;
+      }
+      .right_wrap {
+        display: flex;
+        align-items: center;
+      }
+    }
+  }
+
+  .sec_config_wrap {
+    position: absolute;
+    height: 100vh;
+    overflow: auto;
+    width: 354px;
+    z-index: 201;
+    left: -354px;
+    bottom: 0;
+    top: 0;
+    background-color: #FFF;
+    padding: 24px;
+
+    .config_header {
+      .button_wrap {
+        display: flex;
+      }
+
+      .title {
+        margin-top: 20px;
+        font-family: 'Open Sans';
+        font-style: normal;
+        font-weight: 700;
+        font-size: 26px;
+        line-height: 32px;
+        color: #232F46;
+        overflow: hidden;
+        text-overflow: ellipsis;
+        white-space: nowrap;
+      }
+    }
+  }
+}
+
+
+@keyframes openPcConfig {
+  from {
+    left: -354px;
+  }
+
+  to {
+    left: 0px;
+  }
+}
+
+@keyframes closePcConfig {
+  from {
+    left: 0px;
+  }
+
+  to {
+    left: -354px;
+  }
+}
+
+@keyframes openMobileConfig {
+  from {
+    left: 0px;
+    z-index: 50;
+  }
+
+  to {
+    left: 355px;
+    z-index: 50;
+  }
+}
+
+@keyframes closeMobileConfig {
+  from {
+    left: 355px;
+    z-index: 50;
+  }
+
+  to {
+    left: 0px;
+    z-index: 50;
+  }
+}
+
+
+@keyframes openSecConfig {
+  from {
+    left: -354px;
+  }
+
+  to {
+    left: 0px;
+  }
+}
+
+@keyframes closeSecConfig {
+  from {
+    left: 0px;
+  }
+
+  to {
+    left: -354px;
+  }
+}

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

@@ -0,0 +1,160 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = void 0;
+
+var _uuid = require("uuid");
+
+var _commonUtil = require("../../../utils/commonUtil");
+
+var _storeUtil = require("../../../utils/storeUtil");
+
+// 角色
+var roleMap = {
+  ASSISTANT: 'assistant',
+  USER: 'user'
+}; // 上下文缓存key
+
+var catchKey = 'fonixtree_chat_context';
+
+var FonixtreeGpt =
+/** @class */
+function () {
+  function FonixtreeGpt(params) {
+    var _this = this; // 客户端标识
+
+
+    this.clientId = ''; // 是否正在生成
+
+    this.isGenerating = false; // 初始化参数
+
+    this.initParams = {}; // 建立连接
+
+    this.initChatConnect = function () {
+      var _a = _this.initParams,
+          onMessage = _a.onMessage,
+          onEnd = _a.onEnd;
+      var text = '';
+      var sse;
+      _this.clientId = (0, _uuid.v4)();
+      var eventSource = new EventSource("/designer/v1/ai/sse/create?clientId=" + _this.clientId);
+
+      eventSource.onopen = function (event) {
+        console.log('onOpen');
+        sse = event.target;
+      };
+
+      eventSource.onmessage = function (event) {
+        if (event.data == '[DONE]') {
+          _this.isGenerating = false;
+
+          _this.insertMessage2Context(text, roleMap.ASSISTANT);
+
+          text = '';
+          onEnd();
+
+          if (sse) {
+            sse.close();
+          }
+
+          return;
+        }
+
+        var jsonData = JSON.parse(event.data); // 没有数据
+
+        if (!jsonData.choices.length) {
+          return;
+        }
+
+        text += jsonData.choices[0].delta.content || '';
+        onMessage(text);
+      };
+
+      eventSource.onerror = function (event) {
+        console.log('onerror', event);
+        _this.isGenerating = false;
+
+        _this.regenerate();
+      };
+    }; // 获取chat上下文
+
+
+    this.getContext = function () {
+      var messages = (0, _storeUtil.getSessionStore)(catchKey) || [];
+      return messages;
+    }; // 消息插入上下文中
+
+
+    this.insertMessage2Context = function (message, role) {
+      if (role === void 0) {
+        role = roleMap.USER;
+      }
+
+      var messages = (0, _storeUtil.getSessionStore)(catchKey) || [];
+      messages.push({
+        content: message,
+        role: role
+      });
+      (0, _storeUtil.setSessionStore)(catchKey, messages);
+    }; // 发送消息
+
+
+    this.sendMessage = function (message) {
+      if (!message) {
+        return;
+      }
+
+      _this.isGenerating = true;
+
+      _this.insertMessage2Context(message);
+
+      var messages = _this.getContext();
+
+      _this.initChatConnect();
+
+      var newMessages = messages.splice(messages.length - 5);
+      setTimeout(function () {
+        (0, _commonUtil.commonFetch)('/designer/v1/ai/stream-chat-completion', {
+          clientId: _this.clientId,
+          messages: newMessages
+        }, 'POST');
+      }, 200);
+    }; // 重新生成
+
+
+    this.regenerate = function () {
+      var messages = (0, _storeUtil.getSessionStore)(catchKey) || [];
+
+      if (!messages.length) {
+        return;
+      }
+
+      if (!_this.isGenerating) {
+        // 清空上下文中的最后一次答案
+        messages.pop();
+        (0, _storeUtil.setSessionStore)(catchKey, messages);
+      }
+
+      _this.initChatConnect();
+
+      var newMessages = messages.splice(messages.length - 5);
+      setTimeout(function () {
+        (0, _commonUtil.commonFetch)('/designer/v1/ai/stream-chat-completion', {
+          clientId: _this.clientId,
+          messages: newMessages
+        }, 'POST');
+      }, 200);
+    }; // setSessionStore(catchKey, []);
+
+
+    this.clientId = (0, _uuid.v4)();
+    this.initParams = params;
+  }
+
+  return FonixtreeGpt;
+}();
+
+var _default = FonixtreeGpt;
+exports["default"] = _default;