@fonixtree/magic-design 0.1.74 → 0.1.75

package/es/common/ImagePicker/index.js

@@ -17,8 +17,6 @@ var _ImageModal = _interopRequireDefault(require("../ImageModal"));
 
 var _ = require("..");
 
-var _AiImageGenerator = _interopRequireDefault(require("../../core/Designer/AiImageGenerator"));
-
 var _Iconfont = _interopRequireDefault(require("../Iconfont"));
 
 var _coreUtil = require("../../utils/coreUtil");
@@ -70,8 +68,7 @@ function (_super) {
 
     _this.state = {
       visible: false,
-      inputVal: '',
-      aiImageVisible: false
+      inputVal: ''
     };
 
     _this.onChange = function (v) {
@@ -96,12 +93,6 @@ function (_super) {
       }
     };
 
-    _this.onAiImageClick = function () {
-      _this.setState({
-        aiImageVisible: true
-      });
-    };
-
     _this.getImagePick = function () {
       var visible = _this.state.visible;
       var value = _this.props.value;
@@ -171,19 +162,6 @@ 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;
@@ -258,7 +236,6 @@ 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, {
@@ -277,25 +254,7 @@ function (_super) {
         key: v.key,
         value: v.key
       }, v.value);
-    })), /*#__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
-    }));
+    })))), way === 'url' ? this.getImageUrl() : this.getImagePick());
   };
 
   ImagePicker.defaultProps = {

package/es/common/ImagePicker/index.less

@@ -7,7 +7,6 @@
     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,8 +7,7 @@ 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',
-  FONIXTREE_AI_IMG_HIS: 'fonixtree_ai_img_his'
+  MAGIC_RENDER_PAGEDATA: 'MAGIC_RENDER_PAGEDATA'
 };
 /** 授信状态 */
 

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/index.js

@@ -17,17 +17,13 @@ var _GenerateArtist = _interopRequireDefault(require("./GenerateArtist"));
 
 var _UploadReference = _interopRequireDefault(require("./UploadReference"));
 
-var _History = _interopRequireDefault(require("./History"));
-
 var _nodata = _interopRequireDefault(require("./images/nodata.png"));
 
 var _common = require("../../../common");
 
-var _commonUtil = require("../../../utils/commonUtil");
-
-var _storeUtil = require("../../../utils/storeUtil");
+var _mobx = require("../../../mobx");
 
-var _constants = require("../../../constants");
+var _commonUtil = require("../../../utils/commonUtil");
 
 require("./index.less");
 
@@ -63,22 +59,6 @@ var __extends = void 0 && (void 0).__extends || function () {
   };
 }();
 
-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) {
@@ -234,25 +214,13 @@ function (_super) {
 
     _this.state = {
       loading: false,
-      selected: [],
-      prompt: '',
-      history: [],
-      hisCursor: 0
+      visible: false,
+      images: []
     };
     _this.formRef = /*#__PURE__*/_react["default"].createRef();
 
-    _this.onHisConfigClick = function () {};
-
-    _this.historyChange = function (newHis) {
-      (0, _storeUtil.setSessionStore)(_constants.STORAGE_KEY.FONIXTREE_AI_IMG_HIS, newHis);
-
-      _this.setState({
-        history: newHis
-      });
-    };
-
     _this.getColumnNum = function (num) {
-      if (num <= 1) {
+      if (num === 1) {
         return 1;
       } else if (num > 1 && num <= 4) {
         return 2;
@@ -262,89 +230,42 @@ function (_super) {
     };
 
     _this.onCloseDrawer = function () {
-      _this.props.onClose();
-    };
-
-    _this.onConfirm = function () {
-      return __awaiter(_this, void 0, void 0, function () {
-        var _a, history, hisCursor, selected, images, imageList, result;
-
-        return __generator(this, function (_b) {
-          switch (_b.label) {
-            case 0:
-              _a = this.state, history = _a.history, hisCursor = _a.hisCursor, selected = _a.selected;
-
-              if (!selected.length) {
-                return [2
-                /*return*/
-                ];
-              }
-
-              images = history[hisCursor].images;
-              imageList = selected.map(function (sel) {
-                return images[sel];
-              });
-              return [4
-              /*yield*/
-              , (0, _commonUtil.commonFetch)('/designer/v1/uploadImage', {
-                base64Images: imageList
-              }, 'POST')];
-
-            case 1:
-              result = _b.sent();
-              this.props.onConfirm(result[0]);
-              return [2
-              /*return*/
-              ];
-          }
-        });
+      _mobx.store.setState({
+        imgGenVisible: false
       });
     };
 
+    _this.onHisConfigClick = function () {};
+
     _this.onGenarate = function (prompt) {
       return __awaiter(_this, void 0, void 0, function () {
-        var history, formVal, params, result, e_1;
+        var formVal, result, e_1;
         return __generator(this, function (_a) {
           switch (_a.label) {
             case 0:
-              history = this.state.history;
-
-              if (!prompt) {
-                return [2
-                /*return*/
-                ];
-              }
-
               formVal = this.formRef.current.getFieldsValue(true);
-              params = {
-                prompt: prompt,
-                n: formVal.number || 1,
-                height: 256,
-                width: 256
-              };
+              this.setState({
+                loading: true
+              });
               _a.label = 1;
 
             case 1:
               _a.trys.push([1, 3,, 4]);
 
-              this.setState({
-                prompt: prompt,
-                loading: true
-              });
               return [4
               /*yield*/
-              , (0, _commonUtil.commonFetch)('/designer/v1/ai/create-image', params, 'POST')];
+              , (0, _commonUtil.commonFetch)('/designer/v1/ai/create-image', {
+                prompt: prompt,
+                n: formVal.number || 4,
+                height: 256,
+                width: 256
+              }, 'POST')];
 
             case 2:
               result = _a.sent();
-              history.push({
-                images: result.imageList,
-                params: params
-              });
-              this.historyChange(history);
               this.setState({
                 loading: false,
-                hisCursor: history.length - 1
+                images: result.imageList
               });
               return [3
               /*break*/
@@ -368,197 +289,16 @@ function (_super) {
       });
     };
 
-    _this.onRegenerate = function () {
-      return __awaiter(_this, void 0, void 0, function () {
-        var _a, history, hisCursor, params, result, e_2;
-
-        return __generator(this, function (_b) {
-          switch (_b.label) {
-            case 0:
-              _a = this.state, history = _a.history, hisCursor = _a.hisCursor;
-              params = history[hisCursor].params;
-              _b.label = 1;
-
-            case 1:
-              _b.trys.push([1, 3,, 4]);
-
-              this.setState({
-                loading: true
-              });
-              return [4
-              /*yield*/
-              , (0, _commonUtil.commonFetch)('/designer/v1/ai/create-image', params, 'POST')];
-
-            case 2:
-              result = _b.sent();
-              history[hisCursor] = {
-                images: result.imageList,
-                params: params
-              };
-              this.historyChange(history);
-              this.setState({
-                loading: false
-              });
-              return [3
-              /*break*/
-              , 4];
-
-            case 3:
-              e_2 = _b.sent();
-              this.setState({
-                loading: false
-              });
-              return [3
-              /*break*/
-              , 4];
-
-            case 4:
-              return [2
-              /*return*/
-              ];
-          }
-        });
-      });
-    };
-
     _this.getImageList = function (images) {
-      var selected = _this.state.selected;
-      return images.map(function (img, index) {
+      var columnNum = _this.getColumnNum(images.length);
+
+      return images.map(function (img) {
         return /*#__PURE__*/_react["default"].createElement("div", {
-          className: "aiImageItem"
+          className: "aiImageWrap" + columnNum
         }, /*#__PURE__*/_react["default"].createElement("img", {
           alt: "",
           src: img
-        }), /*#__PURE__*/_react["default"].createElement("div", {
-          className: "imgHandleBtnWrap"
-        }, /*#__PURE__*/_react["default"].createElement("div", {
-          className: "refreshBtnWrap"
-        }, /*#__PURE__*/_react["default"].createElement(_common.Iconfont, {
-          color: "#232F46",
-          onClick: function onClick() {
-            return _this.onRefresh(index);
-          },
-          size: 16,
-          type: "icon-refresh"
-        })), /*#__PURE__*/_react["default"].createElement("div", {
-          className: "downloadBtnWrap"
-        }, /*#__PURE__*/_react["default"].createElement(_common.Iconfont, {
-          color: "#232F46",
-          onClick: function onClick() {
-            return _this.onDownload(index);
-          },
-          size: 16,
-          type: "icon-download1"
-        }))), /*#__PURE__*/_react["default"].createElement("div", {
-          className: "imgSelectBtnWrap"
-        }, /*#__PURE__*/_react["default"].createElement(_common.Iconfont, {
-          color: "#2F54EB",
-          onClick: function onClick() {
-            return _this.onSelectClick(index);
-          },
-          size: 22,
-          style: {
-            cursor: 'pointer'
-          },
-          type: selected.includes(index) ? 'icon-select1' : 'icon-uncheck'
-        })));
-      });
-    };
-
-    _this.onRefresh = function (index) {
-      return __awaiter(_this, void 0, void 0, function () {
-        var _a, history, hisCursor, _b, images, params, result, e_3;
-
-        return __generator(this, function (_c) {
-          switch (_c.label) {
-            case 0:
-              _a = this.state, history = _a.history, hisCursor = _a.hisCursor;
-              _b = history[hisCursor], images = _b.images, params = _b.params;
-              _c.label = 1;
-
-            case 1:
-              _c.trys.push([1, 3,, 4]);
-
-              this.setState({
-                loading: true
-              });
-              return [4
-              /*yield*/
-              , (0, _commonUtil.commonFetch)('/designer/v1/ai/create-image', __assign(__assign({}, params), {
-                n: 1
-              }), 'POST')];
-
-            case 2:
-              result = _c.sent();
-              images[index] = result.imageList[0];
-              this.historyChange(history);
-              this.setState({
-                loading: false
-              });
-              return [3
-              /*break*/
-              , 4];
-
-            case 3:
-              e_3 = _c.sent();
-              this.setState({
-                loading: false
-              });
-              return [3
-              /*break*/
-              , 4];
-
-            case 4:
-              return [2
-              /*return*/
-              ];
-          }
-        });
-      });
-    };
-
-    _this.onDownload = function (index) {
-      var _a = _this.state,
-          prompt = _a.prompt,
-          history = _a.history,
-          hisCursor = _a.hisCursor;
-      var images = history[hisCursor].images;
-      (0, _commonUtil.downloadBase64Image)(images[index], prompt + ".png");
-    };
-
-    _this.onSelectClick = function (index) {
-      var selected = _this.state.selected;
-      var single = _this.props.single; // 单选模式下，智能选中一个
-
-      if (single) {
-        _this.setState({
-          selected: [index]
-        });
-
-        return;
-      } // 多选模式，可以选择多个
-
-
-      if (selected.includes(index)) {
-        var newSelected = selected.filter(function (sel) {
-          return sel !== index;
-        });
-
-        _this.setState({
-          selected: newSelected
-        });
-      } else {
-        selected.push(index);
-
-        _this.setState({
-          selected: selected
-        });
-      }
-    };
-
-    _this.onHistoryClick = function (index) {
-      _this.setState({
-        hisCursor: index
+        }));
       });
     };
 
@@ -566,9 +306,12 @@ function (_super) {
   }
 
   AiImageGenerator.prototype.componentDidMount = function () {
-    var history = (0, _storeUtil.getSessionStore)(_constants.STORAGE_KEY.FONIXTREE_AI_IMG_HIS) || [];
-    this.setState({
-      history: history
+    var _this = this;
+
+    this.destory = (0, _mobx.autorun)(function () {
+      _this.setState({
+        visible: _mobx.store.imgGenVisible
+      });
     });
   };
 
@@ -577,15 +320,10 @@ function (_super) {
   };
 
   AiImageGenerator.prototype.render = function () {
-    var _a;
-
-    var _b = this.state,
-        loading = _b.loading,
-        history = _b.history,
-        hisCursor = _b.hisCursor;
-    var visible = this.props.visible;
-    var images = ((_a = history[hisCursor]) === null || _a === void 0 ? void 0 : _a.images) || [];
-    var columnNum = this.getColumnNum(images.length || []);
+    var _a = this.state,
+        visible = _a.visible,
+        images = _a.images,
+        loading = _a.loading;
     return /*#__PURE__*/_react["default"].createElement(_antd.Drawer, {
       bodyStyle: {
         padding: 16,
@@ -611,7 +349,6 @@ function (_super) {
         type: "light"
       }, "Cancel"), /*#__PURE__*/_react["default"].createElement(_common.Button, {
         className: "ml8",
-        onClick: this.onConfirm,
         size: "small",
         type: "primary"
       }, "Confirm"))),
@@ -667,24 +404,19 @@ function (_super) {
     })))), /*#__PURE__*/_react["default"].createElement("div", {
       className: "middle_wrap"
     }, /*#__PURE__*/_react["default"].createElement("div", {
-      className: "img_wrap",
-      style: {
-        gridTemplateColumns: "repeat(" + columnNum + ", 1fr)",
-        gridTemplateRows: "repeat(" + columnNum + ", 1fr)"
-      }
-    }, images.length > 0 ? this.getImageList(images) : /*#__PURE__*/_react["default"].createElement("div", {
-      className: "noDataWrap"
-    }, /*#__PURE__*/_react["default"].createElement("img", {
+      className: "img_wrap"
+    }, images.length > 0 ? this.getImageList(images) : /*#__PURE__*/_react["default"].createElement("img", {
       alt: "",
       className: "no_data",
       src: _nodata["default"]
-    })), /*#__PURE__*/_react["default"].createElement("div", null)), /*#__PURE__*/_react["default"].createElement("div", {
+    }), /*#__PURE__*/_react["default"].createElement("div", null)), /*#__PURE__*/_react["default"].createElement("div", {
       className: "btn_wrap"
     }, /*#__PURE__*/_react["default"].createElement("div", {
       className: "regenerate_btn",
-      onClick: this.onRegenerate
+      onClick: this.onRegenarate
     }, /*#__PURE__*/_react["default"].createElement(_common.Iconfont, {
       color: "#232F46",
+      onClick: this.onCloseDrawer,
       size: 16,
       style: {
         marginRight: 5
@@ -696,12 +428,20 @@ function (_super) {
       enterButton: "Generate",
       onSearch: this.onGenarate,
       size: "large"
-    }))), /*#__PURE__*/_react["default"].createElement(_History["default"], {
-      onChange: this.historyChange,
-      onClick: this.onHistoryClick,
-      selectIndex: hisCursor,
-      source: history
-    }))));
+    }))), /*#__PURE__*/_react["default"].createElement("div", {
+      className: "right_wrap"
+    }, /*#__PURE__*/_react["default"].createElement("div", {
+      className: "right_header"
+    }, /*#__PURE__*/_react["default"].createElement("div", {
+      className: "title"
+    }, "History"), /*#__PURE__*/_react["default"].createElement(_common.Iconfont, {
+      onClick: this.onHisConfigClick,
+      size: 20,
+      style: {
+        cursor: 'pointer'
+      },
+      type: "icon-setting1"
+    }))))));
   };
 
   return AiImageGenerator;