@fonixtree/magic-design 1.0.5 → 1.0.7

package/lib/constants/component-types.js

@@ -27,6 +27,10 @@ var _Video = _interopRequireDefault(require("../composite-comp/bol/components/Vi
 
 var _Wallet = _interopRequireDefault(require("../composite-comp/bol/components/Wallet"));
 
+var _CustomCode = _interopRequireDefault(require("../composite-comp/bol/components/CustomCode"));
+
+var _Location = _interopRequireDefault(require("../composite-comp/bol/components/Location"));
+
 var _FlashDeal = _interopRequireDefault(require("../composite-comp/dito/components/FlashDeal"));
 
 var _SearchBar = _interopRequireDefault(require("../composite-comp/dito/components/SearchBar"));
@@ -59,6 +63,10 @@ var _TagCompConfig = _interopRequireDefault(require("../composite-comp/bol/confi
 
 var _VideoConfig = _interopRequireDefault(require("../composite-comp/bol/config-panels/VideoConfig"));
 
+var _CustomCodeConfig = _interopRequireDefault(require("../composite-comp/bol/config-panels/CustomCodeConfig"));
+
+var _LocationConfig = _interopRequireDefault(require("../composite-comp/bol/config-panels/LocationConfig"));
+
 var _WalletConfig = _interopRequireDefault(require("../composite-comp/bol/config-panels/WalletConfig"));
 
 var _FlashDealConfig = _interopRequireDefault(require("../composite-comp/dito/config-panels/FlashDealConfig"));
@@ -105,13 +113,13 @@ var _a, _b, _c; // 组件
 /**
  * 渲染组件索引
  */
-var componentMap = (_a = {}, _a[_Banner["default"].type] = _Banner["default"], _a[_Video["default"].type] = _Video["default"], _a[_Text["default"].type] = _Text["default"], _a[_FlashDeal["default"].type] = _FlashDeal["default"], _a[_SearchBar["default"].type] = _SearchBar["default"], _a[_SignBoard["default"].type] = _SignBoard["default"], _a[_ImageText["default"].type] = _ImageText["default"], _a[_Recommend["default"].type] = _Recommend["default"], _a[_MobileNavigation["default"].type] = _MobileNavigation["default"], _a[_PcNavigation["default"].type] = _PcNavigation["default"], _a[_Divider["default"].type] = _Divider["default"], _a[_ImageGallery["default"].type] = _ImageGallery["default"], _a[_Newsletter["default"].type] = _Newsletter["default"], _a[_Carousel["default"].type] = _Carousel["default"], _a[_Button["default"].type] = _Button["default"], _a[_Tag["default"].type] = _Tag["default"], _a[_Wallet["default"].type] = _Wallet["default"], _a);
+var componentMap = (_a = {}, _a[_Banner["default"].type] = _Banner["default"], _a[_Video["default"].type] = _Video["default"], _a[_Text["default"].type] = _Text["default"], _a[_FlashDeal["default"].type] = _FlashDeal["default"], _a[_SearchBar["default"].type] = _SearchBar["default"], _a[_SignBoard["default"].type] = _SignBoard["default"], _a[_ImageText["default"].type] = _ImageText["default"], _a[_Recommend["default"].type] = _Recommend["default"], _a[_MobileNavigation["default"].type] = _MobileNavigation["default"], _a[_PcNavigation["default"].type] = _PcNavigation["default"], _a[_Divider["default"].type] = _Divider["default"], _a[_ImageGallery["default"].type] = _ImageGallery["default"], _a[_Newsletter["default"].type] = _Newsletter["default"], _a[_Carousel["default"].type] = _Carousel["default"], _a[_Button["default"].type] = _Button["default"], _a[_Tag["default"].type] = _Tag["default"], _a[_Wallet["default"].type] = _Wallet["default"], _a[_CustomCode["default"].type] = _CustomCode["default"], _a[_Location["default"].type] = _Location["default"], _a);
 /**
  * 一级配置面板索引
  */
 
 exports.componentMap = componentMap;
-var configPanelMap = (_b = {}, _b[_Banner["default"].type] = _BannerConfig["default"], _b[_Video["default"].type] = _VideoConfig["default"], _b[_Text["default"].type] = _TextCompConfig["default"], _b[_FlashDeal["default"].type] = _FlashDealConfig["default"], _b[_SearchBar["default"].type] = _SearchBarConfig["default"], _b[_SignBoard["default"].type] = _SignBoardConfig["default"], _b[_ImageText["default"].type] = _ImageTextConfig["default"], _b[_Recommend["default"].type] = _RecommendConfig["default"], _b[_MobileNavigation["default"].type] = _MobileNavigationConfig["default"], _b[_PcNavigation["default"].type] = _PcNavigationConfig["default"], _b[_Divider["default"].type] = _DividerConfig["default"], _b[_ImageGallery["default"].type] = _ImageGalleryConfig["default"], _b[_Newsletter["default"].type] = _NewsletterConfig["default"], _b[_Carousel["default"].type] = _CarouselConfig["default"], _b[_Button["default"].type] = _ButtonCompConfig["default"], _b[_Tag["default"].type] = _TagCompConfig["default"], _b[_Wallet["default"].type] = _WalletConfig["default"], _b);
+var configPanelMap = (_b = {}, _b[_Banner["default"].type] = _BannerConfig["default"], _b[_Video["default"].type] = _VideoConfig["default"], _b[_Text["default"].type] = _TextCompConfig["default"], _b[_FlashDeal["default"].type] = _FlashDealConfig["default"], _b[_SearchBar["default"].type] = _SearchBarConfig["default"], _b[_SignBoard["default"].type] = _SignBoardConfig["default"], _b[_ImageText["default"].type] = _ImageTextConfig["default"], _b[_Recommend["default"].type] = _RecommendConfig["default"], _b[_MobileNavigation["default"].type] = _MobileNavigationConfig["default"], _b[_PcNavigation["default"].type] = _PcNavigationConfig["default"], _b[_Divider["default"].type] = _DividerConfig["default"], _b[_ImageGallery["default"].type] = _ImageGalleryConfig["default"], _b[_Newsletter["default"].type] = _NewsletterConfig["default"], _b[_Carousel["default"].type] = _CarouselConfig["default"], _b[_Button["default"].type] = _ButtonCompConfig["default"], _b[_Tag["default"].type] = _TagCompConfig["default"], _b[_Wallet["default"].type] = _WalletConfig["default"], _b[_CustomCode["default"].type] = _CustomCodeConfig["default"], _b[_Location["default"].type] = _LocationConfig["default"], _b);
 /**
  * 二级配置面板索引
  */

package/lib/constants/index.js

@@ -7,7 +7,8 @@ exports.urlTypeMap = exports.urlType = exports.respCodeMap = exports.quickMenuCo
 var STORAGE_KEY = {
   LOCALE: 'magicLocale',
   MAGIC_RENDER_HTML: 'MAGIC_RENDER_HTML',
-  MAGIC_RENDER_PAGEDATA: 'MAGIC_RENDER_PAGEDATA'
+  MAGIC_RENDER_PAGEDATA: 'MAGIC_RENDER_PAGEDATA',
+  FONIXTREE_AI_IMG_HIS: 'fonixtree_ai_img_his'
 };
 /** 授信状态 */
 
@@ -57,7 +58,8 @@ var urlTypeMap = {
   VIDEO: 'Video',
   SHARE_URL: 'ShareURL',
   MINI_APP: 'MiniApp',
-  STORE: 'Store'
+  STORE: 'Store',
+  AFFILIATE_PRODUCT: 'AffiliateProduct'
 };
 exports.urlTypeMap = urlTypeMap;
 var respCodeMap = {
@@ -127,6 +129,14 @@ var compInfoMap = {
     name: 'Image and Text',
     icon: 'icon-filled-image'
   },
+  LOCATION: {
+    name: 'Location',
+    icon: 'icon-location'
+  },
+  CUSTOM_CODE: {
+    name: 'Custom Code',
+    icon: 'icon-html'
+  },
   RECOMMEND: {
     name: 'Recommend',
     icon: 'icon-forms'

package/lib/constants/layout.js

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.videoPCLayout = exports.videoH5Layout = exports.searchLayout = exports.recommendLayoutPc = exports.recommendLayoutMobile = exports.pcNavigationLayout = exports.newsletterLayout = exports.mobileNavigationLayout = exports.imageTextLayoutPc = exports.imageTextLayoutMobile = exports.imageGalleryLayout = exports.dividerLayout = exports.carouselLayout = exports.WalletLayout = void 0;
+exports.videoPCLayout = exports.videoH5Layout = exports.searchLayout = exports.recommendLayoutPc = exports.recommendLayoutMobile = exports.pcNavigationLayout = exports.newsletterLayout = exports.mobileNavigationLayout = exports.locationLayout = exports.imageTextLayoutPc = exports.imageTextLayoutMobile = exports.imageGalleryLayout = exports.dividerLayout = exports.carouselLayout = exports.WalletLayout = void 0;
 
 var _dividerLayout = _interopRequireDefault(require("../assets/images/layout-icon/dividerLayout.svg"));
 
@@ -37,8 +37,14 @@ var _layoutImagetextP2 = _interopRequireDefault(require("../assets/images/layout
 
 var _layoutImagetextP3 = _interopRequireDefault(require("../assets/images/layout-icon/layout-imagetext-p4.png"));
 
+var _imageTextLeft = _interopRequireDefault(require("../assets/images/layout-icon/imageTextLeft.svg"));
+
+var _imageTextRight = _interopRequireDefault(require("../assets/images/layout-icon/imageTextRight.svg"));
+
 var _newsletter = _interopRequireDefault(require("../assets/images/layout-icon/newsletter.svg"));
 
+var _locationLayout = _interopRequireDefault(require("../assets/images/layout-icon/locationLayout.png"));
+
 var _layoutRecommend = _interopRequireDefault(require("../assets/images/layout-icon/layout-recommend-1.png"));
 
 var _layoutRecommend2 = _interopRequireDefault(require("../assets/images/layout-icon/layout-recommend-2.png"));
@@ -86,6 +92,12 @@ var searchLayout = [{
   image: _layoutSearch["default"]
 }];
 exports.searchLayout = searchLayout;
+var locationLayout = [{
+  id: 'top',
+  name: 'top',
+  image: _locationLayout["default"]
+}];
+exports.locationLayout = locationLayout;
 var imageGalleryLayout = [{
   id: 'layout1',
   name: 'layout1',
@@ -128,6 +140,14 @@ var imageTextLayoutPc = [{
   id: 'layout3',
   name: 'center',
   image: _layoutImagetextP3["default"]
+}, {
+  id: 'layout4',
+  name: 'leftImage',
+  image: _imageTextLeft["default"]
+}, {
+  id: 'layout5',
+  name: 'rightImage',
+  image: _imageTextRight["default"]
 }];
 exports.imageTextLayoutPc = imageTextLayoutPc;
 var imageTextLayoutMobile = [{

package/lib/core/Designer/AiImageGenerator/GenerateArtist/index.js

@@ -0,0 +1,72 @@
+"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["default"] = GenerateArtist;
+
+var _react = _interopRequireWildcard(require("react"));
+
+var _classnames = _interopRequireDefault(require("classnames"));
+
+var _back = _interopRequireDefault(require("./images/back1.png"));
+
+var _back2 = _interopRequireDefault(require("./images/back2.png"));
+
+var _back3 = _interopRequireDefault(require("./images/back3.png"));
+
+var _back4 = _interopRequireDefault(require("./images/back4.png"));
+
+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; }
+
+function GenerateArtist() {
+  var _a = (0, _react.useState)(1),
+      active = _a[0],
+      setActive = _a[1];
+
+  var source = [{
+    key: 1,
+    name: 'Creativity',
+    src: _back["default"]
+  }, {
+    key: 2,
+    name: 'Quadratic element',
+    src: _back2["default"]
+  }, {
+    key: 3,
+    name: 'Expect',
+    src: _back3["default"]
+  }, {
+    key: 4,
+    name: 'Concreteness',
+    src: _back4["default"]
+  }];
+  return /*#__PURE__*/_react["default"].createElement("div", {
+    className: "artist_wrap"
+  }, source.map(function (node) {
+    return /*#__PURE__*/_react["default"].createElement("div", {
+      key: node.key,
+      className: (0, _classnames["default"])('art_node', {
+        art_active: node.key === active
+      }),
+      onClick: function onClick() {
+        return setActive(node.key);
+      }
+    }, /*#__PURE__*/_react["default"].createElement("img", {
+      alt: "",
+      src: node.src
+    }), /*#__PURE__*/_react["default"].createElement("div", {
+      className: "art_mask"
+    }), /*#__PURE__*/_react["default"].createElement("div", {
+      className: "art_title"
+    }, node.name));
+  }));
+}

package/lib/core/Designer/AiImageGenerator/GenerateArtist/index.less

@@ -0,0 +1,41 @@
+.artist_wrap {
+  display: flex;
+  flex-wrap: wrap;
+  justify-content: space-between;
+  .art_node {
+    position: relative;
+    margin-bottom: 8px;
+    width: 140px;
+    height: 80px;
+    border-radius:6px;
+    overflow: hidden;
+    cursor: pointer;
+    border: 2px solid transparent;
+    &.art_active {
+      border: 2px solid #2F54EB;
+    }
+    img {
+      height: 100%;
+      width: 100%;
+    }
+    .art_mask {
+      position: absolute;
+      top: 0;
+      border-radius: 4px;
+      height: 100%;
+      width: 100%;
+      background: linear-gradient(360deg, rgba(0, 0, 0, 0.6) 0%, rgba(255, 255, 255, 0) 53.89%);
+    }
+    .art_title {
+      position: absolute;
+      bottom: 6px;
+      left: 6px;
+      font-family: 'Open Sans';
+      font-style: normal;
+      font-weight: 400;
+      font-size: 12px;
+      line-height: 16px;
+      color: #FFF;
+    }
+  }
+}

package/lib/core/Designer/AiImageGenerator/GenerateSize/index.js

@@ -0,0 +1,43 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = GenerateSize;
+
+var _react = _interopRequireDefault(require("react"));
+
+var _antd = require("antd");
+
+require("./index.less");
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
+
+function GenerateSize(_a) {
+  var value = _a.value,
+      onChange = _a.onChange;
+  return /*#__PURE__*/_react["default"].createElement("div", {
+    className: "gene_size_wrap"
+  }, /*#__PURE__*/_react["default"].createElement(_antd.Select, {
+    defaultValue: "1",
+    options: [{
+      value: '1',
+      label: '1:1'
+    }]
+  }), /*#__PURE__*/_react["default"].createElement(_antd.Select, {
+    defaultValue: "1",
+    options: [{
+      value: '1',
+      label: '256x256'
+    }, {
+      value: '2',
+      label: '512x512'
+    }, {
+      value: '3',
+      label: '1024x1024'
+    }],
+    style: {
+      marginLeft: 10
+    }
+  }));
+}

package/lib/core/Designer/AiImageGenerator/GenerateSize/index.less

@@ -0,0 +1,3 @@
+.gene_size_wrap {
+  display: flex;
+}

package/lib/core/Designer/AiImageGenerator/History/index.js

@@ -0,0 +1,147 @@
+"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["default"] = void 0;
+
+var _react = _interopRequireWildcard(require("react"));
+
+var _classnames = _interopRequireDefault(require("classnames"));
+
+var _common = require("../../../../common");
+
+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 __spreadArrays = void 0 && (void 0).__spreadArrays || function () {
+  for (var s = 0, i = 0, il = arguments.length; i < il; i++) {
+    s += arguments[i].length;
+  }
+
+  for (var r = Array(s), k = 0, i = 0; i < il; i++) {
+    for (var a = arguments[i], j = 0, jl = a.length; j < jl; j++, k++) {
+      r[k] = a[j];
+    }
+  }
+
+  return r;
+};
+
+function History(_a) {
+  var source = _a.source,
+      onClick = _a.onClick,
+      onChange = _a.onChange,
+      selectKey = _a.selectKey;
+
+  var _b = (0, _react.useState)(false),
+      isEdit = _b[0],
+      setIsEdit = _b[1];
+
+  var _c = (0, _react.useState)([]),
+      selected = _c[0],
+      setSelected = _c[1];
+
+  var historyConfig = function historyConfig() {
+    if (isEdit) {
+      setSelected([]);
+    }
+
+    setIsEdit(!isEdit);
+  };
+
+  var onDeleteHistory = function onDeleteHistory() {
+    if (!selected.length) {
+      return;
+    }
+
+    var newSource = source.filter(function (src, index) {
+      return !selected.includes(index);
+    });
+    var newSelectIndex = newSource.findIndex(function (src) {
+      return src.key === selectKey;
+    });
+    onChange(newSource.length ? newSource : [], newSelectIndex);
+    setIsEdit(false);
+    setSelected([]);
+  };
+
+  var onHisItemClick = function onHisItemClick(index) {
+    if (!isEdit) {
+      onClick(index);
+      return;
+    }
+
+    if (selected.includes(index)) {
+      var newSelecetd = selected.filter(function (sel) {
+        return sel !== index;
+      });
+      setSelected(newSelecetd);
+    } else {
+      setSelected(__spreadArrays(selected, [index]));
+    }
+  };
+
+  return /*#__PURE__*/_react["default"].createElement("div", {
+    className: "history_wrap"
+  }, /*#__PURE__*/_react["default"].createElement("div", {
+    className: "history_header"
+  }, /*#__PURE__*/_react["default"].createElement("div", {
+    className: "title"
+  }, "History"), /*#__PURE__*/_react["default"].createElement(_common.Iconfont, {
+    color: "#2F54EB",
+    onClick: historyConfig,
+    size: 20,
+    style: {
+      cursor: 'pointer'
+    },
+    type: isEdit ? 'icon-close' : 'icon-setting1'
+  })), /*#__PURE__*/_react["default"].createElement("div", {
+    className: "history_list"
+  }, source.length > 0 && source.map(function (his, index) {
+    var _a;
+
+    return /*#__PURE__*/_react["default"].createElement("div", {
+      className: (0, _classnames["default"])('historyNode', {
+        active: selectKey === his.key
+      }),
+      onClick: function onClick() {
+        return onHisItemClick(index);
+      }
+    }, isEdit && /*#__PURE__*/_react["default"].createElement("div", {
+      className: "hisSelectIcon"
+    }, /*#__PURE__*/_react["default"].createElement(_common.Iconfont, {
+      color: "#2F54EB",
+      size: 20,
+      style: {
+        cursor: 'pointer'
+      },
+      type: selected.includes(index) ? 'icon-select1' : 'icon-uncheck'
+    })), /*#__PURE__*/_react["default"].createElement("img", {
+      alt: "",
+      src: ((_a = his === null || his === void 0 ? void 0 : his.images) === null || _a === void 0 ? void 0 : _a.length) ? his.images[0] : ''
+    }), his.images.length > 1 && /*#__PURE__*/_react["default"].createElement("span", {
+      className: "hisImgNum"
+    }, his.images.length));
+  })), isEdit && /*#__PURE__*/_react["default"].createElement("div", {
+    className: "historyBottom",
+    onClick: onDeleteHistory
+  }, /*#__PURE__*/_react["default"].createElement(_common.Iconfont, {
+    color: "#FF4141",
+    size: 16,
+    style: {
+      cursor: 'pointer'
+    },
+    type: "icon-delete1"
+  }), /*#__PURE__*/_react["default"].createElement("span", null, "Delete"), " "));
+}
+
+var _default = History;
+exports["default"] = _default;

package/lib/core/Designer/AiImageGenerator/History/index.less

@@ -0,0 +1,75 @@
+.history_wrap {
+  position: relative;
+  height: calc(100vh - 100px);
+  overflow: scroll;
+  width: 132px;
+  min-height: 100%;
+  background-color: #FFF;
+  border-radius: 4px;
+  
+  .history_header {
+    font-size: 14px;
+    display: flex;
+    justify-content: space-between;
+    padding: 16px;
+  }
+  .history_list {
+    padding: 0 16px;
+    max-height: calc(100vh - 200px);
+    overflow: scroll;
+    
+    .historyNode {
+      cursor: pointer;
+      border: 2px solid transparent;
+      border-radius: 6px;
+      position: relative;
+      margin-bottom: 12px;
+      .hisSelectIcon {
+        position: absolute;
+        right: 6px;
+        top: 6px;
+        background-color: #FFF;
+        border-radius: 50%;
+        display: flex;
+        width: 18px;
+        height: 18px;
+        align-items: center;
+        justify-content: center;
+      }
+      img {
+        border-radius: 4px;
+        width: 96px;
+        height: 96px;
+      }
+      .hisImgNum {
+        width: 18px;
+        height: 18px;
+        position: absolute;
+        bottom: 6px;
+        right: 6px;
+        background: #2F54EBCC;
+        color: #FFF;
+        font-family: 'Open Sans';
+        font-size: 12px;
+        font-weight: 400;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+      }
+    }
+    .active {
+      border: 2px solid #2F54EB;
+    }
+  }
+  .historyBottom {
+    cursor: pointer;
+    position: absolute;
+    bottom: 16px;
+    left: 0;
+    right: 0;
+    margin-top: 10px;
+    color: #FF4141;
+    text-align: center;
+    font-size: 14px;
+  }
+}

package/lib/core/Designer/AiImageGenerator/NumberSlider/index.js

@@ -0,0 +1,31 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = NumberSlider;
+
+var _react = _interopRequireDefault(require("react"));
+
+var _antd = require("antd");
+
+require("./index.less");
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
+
+function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
+
+function NumberSlider(props) {
+  var value = props.value;
+  return /*#__PURE__*/_react["default"].createElement("div", {
+    className: "number_slider_wrap"
+  }, /*#__PURE__*/_react["default"].createElement("span", {
+    className: "slider_value"
+  }, value), /*#__PURE__*/_react["default"].createElement(_antd.Slider, _extends({
+    className: "cylon-slider-sm",
+    defaultValue: 4,
+    max: 9,
+    min: 1,
+    step: 1
+  }, props)));
+}

package/lib/core/Designer/AiImageGenerator/NumberSlider/index.less

@@ -0,0 +1,8 @@
+.number_slider_wrap {
+  position: relative;
+  .slider_value {
+    position: absolute;
+    right: 10px;
+    top: -30px;
+  }
+}

package/lib/core/Designer/AiImageGenerator/UploadReference/index.js

@@ -0,0 +1,55 @@
+"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["default"] = UploadReference;
+
+var _react = _interopRequireWildcard(require("react"));
+
+var _antd = require("antd");
+
+var _common = require("../../../../common");
+
+require("./index.less");
+
+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; }
+
+function UploadReference() {
+  var _a = (0, _react.useState)(5),
+      num = _a[0],
+      setNum = _a[1];
+
+  return /*#__PURE__*/_react["default"].createElement("div", {
+    className: "ref_wrap"
+  }, /*#__PURE__*/_react["default"].createElement("div", {
+    className: "upload_btn"
+  }, /*#__PURE__*/_react["default"].createElement(_common.Iconfont, {
+    color: "#A3AEC3",
+    size: 30,
+    type: "icon-add"
+  })), /*#__PURE__*/_react["default"].createElement("div", {
+    className: "proportion_wrap"
+  }, /*#__PURE__*/_react["default"].createElement("div", {
+    className: "title"
+  }, "Proportion"), /*#__PURE__*/_react["default"].createElement("div", {
+    className: "desc"
+  }, "Big numbers have big effects"), /*#__PURE__*/_react["default"].createElement("div", {
+    className: "slider_wrap"
+  }, /*#__PURE__*/_react["default"].createElement("span", {
+    className: "slider_value"
+  }, num), /*#__PURE__*/_react["default"].createElement(_antd.Slider, {
+    className: "cylon-slider-sm",
+    defaultValue: num,
+    max: 10,
+    min: 1,
+    onChange: function onChange(val) {
+      return setNum(val);
+    },
+    step: 1
+  }))));
+}

package/lib/core/Designer/AiImageGenerator/UploadReference/index.less

@@ -0,0 +1,45 @@
+.ref_wrap {
+  display: flex;
+  align-items: center;
+  .upload_btn {
+    height:80px;
+    width: 80px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    background: #F5F6F7;
+    border: 1px dashed #D2D9E5;
+    border-radius: 4px;
+  }
+  .proportion_wrap {
+    height: 80px;
+    margin-left: 12px;
+    background-color: #F5F6F7;
+    padding: 4px 8px;
+    .title {
+      font-family: 'Open Sans';
+      font-style: normal;
+      font-weight: 400;
+      font-size: 12px;
+      line-height: 20px;
+      color: #232F46;
+    }
+    .desc {
+      font-family: 'Open Sans';
+      font-style: normal;
+      font-weight: 400;
+      font-size: 12px;
+      line-height: 16px;
+      color: #8493AF;
+    }
+    .slider_wrap {
+      padding-top: 12px;
+      position: relative;
+      .slider_value {
+        position: absolute;
+        right: 0px;
+        top: 0;
+      }
+    }
+  }
+}