@fonixtree/magic-design 0.1.73 → 0.1.74

package/es/common/ImagePicker/index.js

@@ -17,6 +17,8 @@ var _ImageModal = _interopRequireDefault(require("../ImageModal"));
 
 var _ = require("..");
 
+var _AiImageGenerator = _interopRequireDefault(require("../../core/Designer/AiImageGenerator"));
+
 var _Iconfont = _interopRequireDefault(require("../Iconfont"));
 
 var _coreUtil = require("../../utils/coreUtil");
@@ -68,7 +70,8 @@ function (_super) {
 
     _this.state = {
       visible: false,
-      inputVal: ''
+      inputVal: '',
+      aiImageVisible: false
     };
 
     _this.onChange = function (v) {
@@ -93,6 +96,12 @@ function (_super) {
       }
     };
 
+    _this.onAiImageClick = function () {
+      _this.setState({
+        aiImageVisible: true
+      });
+    };
+
     _this.getImagePick = function () {
       var visible = _this.state.visible;
       var value = _this.props.value;
@@ -162,6 +171,19 @@ function (_super) {
       }));
     };
 
+    _this.onAiImageConfirm = function (data) {
+      _this.setState({
+        aiImageVisible: false
+      });
+
+      _this.props.onChange({
+        contentTitle: data.fileName,
+        contentType: 'File',
+        imgUrl: data.oriUrl,
+        url: data.oriUrl
+      });
+    };
+
     _this.getImageUrl = function () {
       var onChange = _this.props.onChange;
       var inputVal = _this.state.inputVal;
@@ -236,6 +258,7 @@ function (_super) {
 
     var imageSelectedWay = this.props.imageSelectedWay;
     var way = (0, _coreUtil.isPc)() ? imageSelectedWay.pc : imageSelectedWay.mobile;
+    var aiImageVisible = this.state.aiImageVisible;
     return /*#__PURE__*/_react["default"].createElement("div", {
       className: "image-picker-wrap"
     }, /*#__PURE__*/_react["default"].createElement(_.Field, {
@@ -254,7 +277,25 @@ function (_super) {
         key: v.key,
         value: v.key
       }, v.value);
-    })))), way === 'url' ? this.getImageUrl() : this.getImagePick());
+    })), /*#__PURE__*/_react["default"].createElement("div", {
+      className: "ai-btn",
+      onClick: this.onAiImageClick
+    }, /*#__PURE__*/_react["default"].createElement(_Iconfont["default"], {
+      color: "#2F54EB",
+      size: 20,
+      type: "icon-ai"
+    }), /*#__PURE__*/_react["default"].createElement("span", {
+      className: "btn-txt"
+    }, (0, _locale.i18n)('AI_IMAGE'))))), way === 'url' ? this.getImageUrl() : this.getImagePick(), /*#__PURE__*/_react["default"].createElement(_AiImageGenerator["default"], {
+      onClose: function onClose() {
+        return _this.setState({
+          aiImageVisible: false
+        });
+      },
+      onConfirm: this.onAiImageConfirm,
+      single: true,
+      visible: aiImageVisible
+    }));
   };
 
   ImagePicker.defaultProps = {

package/es/common/ImagePicker/index.less

@@ -7,6 +7,7 @@
     justify-content: space-between;
     align-items: center;
     .ai-btn {
+      cursor: pointer;
       background: #FFFFFF;
       border: 1px solid #2F54EB;
       border-radius: 8px;

package/es/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'
 };
 /** 授信状态 */
 

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

@@ -23,17 +23,17 @@ function GenerateSize(_a) {
     options: [{
       value: '1',
       label: '1:1'
-    }, {
-      value: '2',
-      label: '4:3'
-    }, {
-      value: '3',
-      label: '16:9'
     }]
   }), /*#__PURE__*/_react["default"].createElement(_antd.Select, {
     defaultValue: "1",
     options: [{
       value: '1',
+      label: '256x256'
+    }, {
+      value: '2',
+      label: '512x512'
+    }, {
+      value: '3',
       label: '1024x1024'
     }],
     style: {

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

@@ -0,0 +1,141 @@
+"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,
+      selectIndex = _a.selectIndex;
+
+  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);
+    });
+    onChange(newSource.length ? newSource : []);
+    setIsEdit(false);
+  };
+
+  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) {
+    return /*#__PURE__*/_react["default"].createElement("div", {
+      className: (0, _classnames["default"])('historyNode', {
+        active: selectIndex === index
+      }),
+      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: 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/es/core/Designer/AiImageGenerator/History/index.less

@@ -0,0 +1,69 @@
+.history_wrap {
+  position: relative;
+  height: calc(100vh - 100px);
+  overflow: scroll;
+  width: 132px;
+  min-height: 100%;
+  background-color: #FFF;
+  border-radius: 4px;
+  .history_header {
+    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;
+        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;
+  }
+}