@titaui/pc 1.11.4-0 → 1.11.4-0.beta-2

package/lib/components/okr-flow/child-node/index.css

@@ -36,18 +36,20 @@
 
 .titaui-okr-flow--node {
   position: relative;
-  padding: 10px 12px;
-  width: 320px;
-  height: 96px;
+  padding: 12px 12px;
+  width: 340px;
+  border: 1px solid #fff;
   background: #ffffff;
   box-shadow: 0px 4px 10px 0px rgba(127, 145, 180, 0.1);
-  border-radius: 6px;
+  border-radius: 12px;
   box-sizing: border-box;
 }
 
 .titaui-okr-flow--node__private {
+  width: 340px;
+  height: 102px;
   background: url(../images/private-light.png) no-repeat;
-  background-size: contain;
+  background-size: 340px 102px;
 }
 
 .titaui-okr-flow--node__search {
@@ -56,7 +58,7 @@
 
 .titaui-okr-flow--node__kr {
   border: 1px solid rgba(90, 216, 166, 0.5);
-  background: #EEFBF6;
+  background: #eefbf6;
   height: 96px;
 }
 
@@ -75,25 +77,68 @@
   white-space: unset;
 }
 
+.titaui-okr-flow--node-krs {
+  margin-top: 12px;
+}
+
+.titaui-okr-flow--node-kr {
+  cursor: pointer;
+  display: flex;
+  line-height: 20px;
+  font-size: 12px;
+  margin-top: 8px;
+}
+
+.titaui-okr-flow--node-kr-icon {
+  color: rgba(40, 121, 255, 0.6);
+  margin-right: 8px;
+}
+
+.titaui-okr-flow--node-kr-title {
+  flex: 1;
+  font-size: 13px;
+  font-weight: 400;
+  color: #3f4755;
+}
+
+.titaui-okr-flow--node-kr-progress {
+  width: 32px;
+  text-align: right;
+  margin-left: 8px;
+  white-space: nowrap;
+}
+
+.titaui-okr-flow--node-kr-status--normal {
+  color: #2879ff;
+}
+
+.titaui-okr-flow--node-kr-status--risk {
+  color: #f6bd16;
+}
+
+.titaui-okr-flow--node-kr-status--expired {
+  color: #f05e5e;
+}
+
+.titaui-okr-flow--node-kr-status--complete {
+  color: #5ad8a6;
+}
+
 .titaui-okr-flow--node-title {
-  max-width: 252px;
-  height: 44px;
+  max-width: 270px;
   margin-right: 54px;
-  margin-bottom: 8px;
-  line-height: 22px;
+  margin-bottom: 4px;
+  line-height: 24px;
   color: #141c28;
   font-size: 14px;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  display: -webkit-box;
-  text-overflow: ellipsis;
-  -webkit-box-orient: vertical;
-  -webkit-line-clamp: 2;
+  font-weight: 600;
+  cursor: pointer;
 }
 
 .titaui-okr-flow--node-desp {
   font-family: PingFangSC-Regular, PingFang SC;
   position: relative;
+  cursor: pointer;
 }
 
 .titaui-okr-flow--node-right {
@@ -118,7 +163,7 @@
   overflow: hidden;
   text-overflow: ellipsis;
   white-space: nowrap;
-  line-height: 24px;
+  line-height: 20px;
   max-width: 96px;
 }
 
@@ -157,7 +202,7 @@
   line-height: 24px;
   font-size: 12px;
   font-family: PingFangSC-Regular, PingFang SC;
-  color: #6F7886;
+  color: #6f7886;
 }
 
 .titaui-okr-flow--node-weight:before {
@@ -179,7 +224,7 @@
   align-items: center;
   font-size: 12px;
   line-height: 24px;
-  color: #6F7886;
+  color: #6f7886;
 }
 
 .titaui-okr-flow--node-progress .t-c-progress-circle {
@@ -291,12 +336,13 @@
 }
 
 .titaui-okr-flow--node-status {
+  cursor: pointer;
   position: absolute;
   right: 0;
   top: 0;
   width: 50px;
   height: 32px;
-  border-radius: 0 6px 0 20px;
+  border-radius: 0 12px 0 20px;
   font-size: 13px;
   text-align: center;
   line-height: 32px;
@@ -367,7 +413,7 @@
 }
 
 .titaui-okr-flow__dark .titaui-okr-flow--node-status__normal {
-  color: #1FA7FF;
+  color: #1fa7ff;
   background: #3b4e6e;
 }
 
@@ -386,7 +432,7 @@
 }
 
 .titaui-okr-flow__dark .titaui-okr-flow--node-kr-status__normal {
-  color: #1FA7FF;
+  color: #1fa7ff;
   background: #3b4e6e;
 }
 

package/lib/components/okr-flow/child-node/work-node.js

@@ -31,6 +31,10 @@ var _bsGlobal = require("../../../utils/bs-global");
 
 var _getLocale = require("../../../utils/getLocale");
 
+var _tools = require("../../../utils/tools");
+
+var _drawerManager = _interopRequireDefault(require("../../../components/drawer-manager"));
+
 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); }
@@ -61,7 +65,7 @@ function WorkNode(_ref) {
       darkTheme = _ref.darkTheme;
   var workId = data.workId,
       _data$workName = data.workName,
-      workName = _data$workName === void 0 ? "" : _data$workName,
+      workName = _data$workName === void 0 ? '' : _data$workName,
       okrType = data.okrType,
       departmentId = data.departmentId,
       departmentName = data.departmentName,
@@ -71,6 +75,7 @@ function WorkNode(_ref) {
       manualRiskLevel = data.manualRiskLevel,
       progress = data.progress,
       okrClassify = data.okrClassify,
+      Krs = data.Krs,
       cycleType = data.cycleType,
       startDate = data.startDate,
       endDate = data.endDate,
@@ -92,9 +97,11 @@ function WorkNode(_ref) {
       imgWidth = _useState6[0],
       setImgWidth = _useState6[1];
 
+  var bodyr = (0, _react.useRef)();
+
   var getOkrTypeMap = function getOkrTypeMap() {
     return {
-      1: (0, _getLocale.getLocale)("OKR_MyO_Pop_Individual"),
+      1: (0, _getLocale.getLocale)('OKR_MyO_Pop_Individual'),
       // 2: <OpenDepartmentName id={departmentId} name={departmentName} />,
       2: /*#__PURE__*/_react["default"].createElement("img", {
         src: darkTheme ? whiteImg : departUrl,
@@ -103,8 +110,8 @@ function WorkNode(_ref) {
         },
         width: imgWidth
       }),
-      3: (0, _getLocale.getLocale)("OKR_MyO_Pop_Company"),
-      4: groupName || (0, _getLocale.getLocale)("OKR_MyO_Text_Team")
+      3: (0, _getLocale.getLocale)('OKR_MyO_Pop_Company'),
+      4: groupName || (0, _getLocale.getLocale)('OKR_MyO_Text_Team')
     };
   };
 
@@ -115,7 +122,7 @@ function WorkNode(_ref) {
         while (1) {
           switch (_context.prev = _context.next) {
             case 0:
-              name = departmentName || "默认部门";
+              name = departmentName || '默认部门';
 
               if (!(0, _bsGlobal.isWx)()) {
                 _context.next = 5;
@@ -126,15 +133,15 @@ function WorkNode(_ref) {
               return (0, _openDataPainter.getOpenData)({
                 id: departmentId,
                 name: departmentName,
-                type: "departmentName"
+                type: 'departmentName'
               });
 
             case 4:
               name = _context.sent;
 
             case 5:
-              getCanvasImg("white", name);
-              getCanvasImg("dark", name);
+              getCanvasImg('white', name);
+              getCanvasImg('dark', name);
 
             case 7:
             case "end":
@@ -150,11 +157,11 @@ function WorkNode(_ref) {
   }();
 
   var getCanvasImg = function getCanvasImg() {
-    var theme = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : "white";
+    var theme = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : 'white';
     var name = arguments.length > 1 ? arguments[1] : undefined;
-    var canvas = document.createElement("canvas");
-    var ctx = canvas.getContext("2d");
-    var font = "normal 12px/24px -apple-system, Arial, Verdana, Helvetica Neue, Helvetica, sans-serif, PingFang SC, Microsoft YaHei";
+    var canvas = document.createElement('canvas');
+    var ctx = canvas.getContext('2d');
+    var font = 'normal 12px/24px -apple-system, Arial, Verdana, Helvetica Neue, Helvetica, sans-serif, PingFang SC, Microsoft YaHei';
     ctx.font = font; // const fitStr = fittingString(ctx, name, 92);
 
     var _ctx$measureText = ctx.measureText(name),
@@ -163,11 +170,11 @@ function WorkNode(_ref) {
     var actualWidth = Math.min(width, 92);
     (0, _openDataPainter.setSize)(canvas, ctx, actualWidth, 24);
     setImgWidth(actualWidth);
-    ctx.textBaseline = "middle";
+    ctx.textBaseline = 'middle';
     ctx.font = font;
-    ctx.fillStyle = theme == "white" ? "#FFFFFF" : "#6f7886";
+    ctx.fillStyle = theme == 'white' ? '#FFFFFF' : '#6f7886';
     ctx.fillText(name, 0, 12);
-    theme == "white" ? setWhiteImg(canvas.toDataURL()) : setDepartUrl(canvas.toDataURL());
+    theme == 'white' ? setWhiteImg(canvas.toDataURL()) : setDepartUrl(canvas.toDataURL());
   };
 
   (0, _react.useEffect)(function () {
@@ -176,6 +183,18 @@ function WorkNode(_ref) {
     }
   }, []);
 
+  var openODetail = function openODetail(id) {
+    _drawerManager["default"].open('okrDetail', {
+      okrId: workId
+    });
+  };
+
+  var openKr = function openKr(id) {
+    _drawerManager["default"].open('krDetail', {
+      krId: id
+    });
+  };
+
   var getCycleTextByType = function getCycleTextByType() {
     var cycleType = data.cycleType,
         yqmnum = data.yqmnum,
@@ -187,7 +206,7 @@ function WorkNode(_ref) {
 
     switch (cycleTypeCopy) {
       case 0:
-        return (0, _getLocale.getLocale)("Mod_Customization");
+        return (0, _getLocale.getLocale)('Mod_Customization');
 
       case 1:
         return "".concat(annualNum, "\u5E74");
@@ -202,26 +221,29 @@ function WorkNode(_ref) {
         return "".concat(yqmnum, "-").concat((yqmnum + 1) % 12 || 12, "\u6708");
 
       case 5:
-        return "".concat(yqmnum == 1 ? "上" : "下", "\u534A\u5E74");
+        return "".concat(yqmnum == 1 ? '上' : '下', "\u534A\u5E74");
 
       case -1:
-        return KrIndex ? "KR".concat(KrIndex) : "KR";
+        return KrIndex ? "KR".concat(KrIndex) : 'KR';
     }
   }; // 1：正常 2：有风险 3：过期 4:完成 5：过期完成 ,
 
 
-  var riskLevelSuffix = ["normal", "normal", "risk", "expired", "complete", "complete_over"];
+  var riskLevelSuffix = ['normal', 'normal', 'risk', 'expired', 'complete', 'complete_over', 'normal'];
   if (!MapOkrVisible) return /*#__PURE__*/_react["default"].createElement("div", {
     className: (0, _classnames["default"])("".concat(_precls["default"], "--node"), "".concat(_precls["default"], "--node__private"))
   });
   return /*#__PURE__*/_react["default"].createElement("div", {
-    className: (0, _classnames["default"])("".concat(_precls["default"], "--node"), _defineProperty({}, "".concat(_precls["default"], "--node__search"), isSearchRes))
+    className: (0, _classnames["default"])("".concat(_precls["default"], "--node"), _defineProperty({}, "".concat(_precls["default"], "--node__search"), isSearchRes)),
+    ref: bodyr
   }, /*#__PURE__*/_react["default"].createElement("div", {
-    className: (0, _classnames["default"])("".concat(_precls["default"], "--node-title"))
-  }, workName, /*#__PURE__*/_react["default"].createElement(_okrClassify["default"], {
+    className: (0, _classnames["default"])("".concat(_precls["default"], "--node-title")),
+    onClick: openODetail
+  }, (0, _tools.htmlDecodeByRegExp)(workName), /*#__PURE__*/_react["default"].createElement(_okrClassify["default"], {
     classify: okrClassify
   })), /*#__PURE__*/_react["default"].createElement("div", {
-    className: (0, _classnames["default"])("".concat(_precls["default"], "--node-desp"))
+    className: (0, _classnames["default"])("".concat(_precls["default"], "--node-desp")),
+    onClick: openODetail
   }, /*#__PURE__*/_react["default"].createElement(_creator["default"], {
     creator: principalUser || {}
   }), /*#__PURE__*/_react["default"].createElement("div", {
@@ -230,7 +252,22 @@ function WorkNode(_ref) {
     className: (0, _classnames["default"])("".concat(_precls["default"], "--node-type"))
   }, getOkrTypeMap()[okrType])), /*#__PURE__*/_react["default"].createElement("span", {
     className: (0, _classnames["default"])("".concat(_precls["default"], "--node-cycle"))
-  }, getCycleTextByType()))), /*#__PURE__*/_react["default"].createElement("span", {
+  }, getCycleTextByType()))), !!(Krs !== null && Krs !== void 0 && Krs.length) && /*#__PURE__*/_react["default"].createElement("div", {
+    className: (0, _classnames["default"])("".concat(_precls["default"], "--node-krs"))
+  }, Krs.map(function (item, key) {
+    return /*#__PURE__*/_react["default"].createElement("div", {
+      className: (0, _classnames["default"])("".concat(_precls["default"], "--node-kr")),
+      onClick: function onClick() {
+        return openKr(item.mileStoneId);
+      }
+    }, /*#__PURE__*/_react["default"].createElement("span", {
+      className: (0, _classnames["default"])("".concat(_precls["default"], "--node-kr-icon"))
+    }, "KR", item.SortNum + 1), /*#__PURE__*/_react["default"].createElement("div", {
+      className: (0, _classnames["default"])("".concat(_precls["default"], "--node-kr-title"))
+    }, item.mileStoneName), /*#__PURE__*/_react["default"].createElement("div", {
+      className: (0, _classnames["default"])("".concat(_precls["default"], "--node-kr-progress ").concat(_precls["default"], "--node-kr-status--").concat(riskLevelSuffix[item.riskLevel]))
+    }, item.progress, "%"));
+  })), /*#__PURE__*/_react["default"].createElement("span", {
     className: (0, _classnames["default"])("".concat(_precls["default"], "--node-status"), "".concat(_precls["default"], "--node-status__").concat(riskLevelSuffix[manualRiskLevel]))
   }, /*#__PURE__*/_react["default"].createElement(_tooltipText["default"], {
     text: "".concat(progress, "%"),

package/lib/components/okr-flow/empty/index.css

@@ -1,5 +1,12 @@
 .titaui-okr-flow--empty {
-  padding-top: 125px;
+  width: 200px;
+  height: 200px;
+  position: absolute;
+  left: 0;
+  right: 0;
+  top: 0;
+  bottom: 0;
+  margin: auto;
   text-align: center;
 }
 

package/lib/components/okr-flow/export-modal/index.js

@@ -33,8 +33,12 @@ var _precls = _interopRequireDefault(require("../precls"));
 
 var _getLocale = require("../../../utils/getLocale");
 
+var _isEqual = _interopRequireDefault(require("lodash/isEqual"));
+
 require("rc-color-picker/assets/index.css");
 
+var Sentry = _interopRequireWildcard(require("@sentry/browser"));
+
 require("./index.css");
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
@@ -45,6 +49,14 @@ function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj &&
 
 function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
 
+function _toConsumableArray(arr) { return _arrayWithoutHoles(arr) || _iterableToArray(arr) || _unsupportedIterableToArray(arr) || _nonIterableSpread(); }
+
+function _nonIterableSpread() { throw new TypeError("Invalid attempt to spread non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
+
+function _iterableToArray(iter) { if (typeof Symbol !== "undefined" && iter[Symbol.iterator] != null || iter["@@iterator"] != null) return Array.from(iter); }
+
+function _arrayWithoutHoles(arr) { if (Array.isArray(arr)) return _arrayLikeToArray(arr); }
+
 function asyncGeneratorStep(gen, resolve, reject, _next, _throw, key, arg) { try { var info = gen[key](arg); var value = info.value; } catch (error) { reject(error); return; } if (info.done) { resolve(value); } else { Promise.resolve(value).then(_next, _throw); } }
 
 function _asyncToGenerator(fn) { return function () { var self = this, args = arguments; return new Promise(function (resolve, reject) { var gen = fn.apply(self, args); function _next(value) { asyncGeneratorStep(gen, resolve, reject, _next, _throw, "next", value); } function _throw(err) { asyncGeneratorStep(gen, resolve, reject, _next, _throw, "throw", err); } _next(undefined); }); }; }
@@ -77,7 +89,7 @@ var ExportMapModal = function ExportMapModal(props) {
       mapInstance = _useState2[0],
       setMapInstance = _useState2[1];
 
-  var _useState3 = (0, _react.useState)("none"),
+  var _useState3 = (0, _react.useState)('none'),
       _useState4 = _slicedToArray(_useState3, 2),
       bgColor = _useState4[0],
       setBgColor = _useState4[1];
@@ -88,6 +100,7 @@ var ExportMapModal = function ExportMapModal(props) {
       setIsExport = _useState6[1];
 
   var modalRef = (0, _react.useRef)();
+  var virtualElements = (0, _react.useRef)([]);
   (0, _react.useEffect)(function () {
     if ((0, _bsGlobal.isWx)() && window.WWOpenData) {
       if (window.WWOpenData.enableCanvasSharing) {
@@ -112,12 +125,12 @@ var ExportMapModal = function ExportMapModal(props) {
         while (1) {
           switch (_context.prev = _context.next) {
             case 0:
-              okrMapRef = document.querySelector(".titaui-okr-flow__export") || document.createElement("div");
+              okrMapRef = document.querySelector('.titaui-okr-flow__export') || document.createElement('div');
               width = okrMapRef.clientWidth; // 获取dom 宽度
 
               height = okrMapRef.clientHeight; // 获取dom 高度
 
-              canvas = document.createElement("canvas"); // 创建一个canvas节点
+              canvas = document.createElement('canvas'); // 创建一个canvas节点
 
               scale = 20; // 定义任意放大倍数 支持小数
 
@@ -144,6 +157,8 @@ var ExportMapModal = function ExportMapModal(props) {
               };
               _context.next = 12;
               return (0, _html2canvas["default"])(okrMapRef, opts).then(function (result) {
+                var _window, _window$BSGlobal, _window$BSGlobal$logi, _window2, _window2$BSGlobal, _window2$BSGlobal$ten;
+
                 if ((0, _bsGlobal.isWx)() && window.WWOpenData) {
                   if (window.WWOpenData.enableCanvasSharing) {
                     window.WWOpenData.enableCanvasSharing();
@@ -154,36 +169,94 @@ var ExportMapModal = function ExportMapModal(props) {
                   }
                 }
 
-                var imgUrl = result.toDataURL("image/png"); // 得到图片的base64编码数据
+                var userId = (_window = window) === null || _window === void 0 ? void 0 : (_window$BSGlobal = _window.BSGlobal) === null || _window$BSGlobal === void 0 ? void 0 : (_window$BSGlobal$logi = _window$BSGlobal.loginUserInfo) === null || _window$BSGlobal$logi === void 0 ? void 0 : _window$BSGlobal$logi.Id;
+                var telentId = (_window2 = window) === null || _window2 === void 0 ? void 0 : (_window2$BSGlobal = _window2.BSGlobal) === null || _window2$BSGlobal === void 0 ? void 0 : (_window2$BSGlobal$ten = _window2$BSGlobal.tenantInfo) === null || _window2$BSGlobal$ten === void 0 ? void 0 : _window2$BSGlobal$ten.Id;
+                var imgUrl = result.toDataURL('image/png'); // 得到图片的base64编码数据
 
                 // 得到图片的base64编码数据
-                (0, _requestApis.getBase64DownloadUrl)(imgUrl.split(",")[1]).then(function (url) {
-                  var image = new Image();
-                  image.setAttribute("crossOrigin", "anonymous");
+                _toast["default"].Warning('导出中，请勿关闭弹窗', {
+                  canClose: true
+                });
+
+                var equalIndex = imgUrl.indexOf('='); // 获取=号下标
+
+                // 获取=号下标
+                var size = 0;
+
+                if (equalIndex > 0) {
+                  var str = imgUrl.substring(0, equalIndex); // 去除=号
+
+                  // 去除=号
+                  var strLength = str.length;
+                  var fileLength = strLength - strLength / 8 * 2; // 真实的图片byte大小
+
+                  // 真实的图片byte大小
+                  size = Math.floor(fileLength); // 向下取整
+                } else {
+                  var _strLength = imgUrl.length;
+
+                  var _fileLength = _strLength - _strLength / 8 * 2;
+
+                  size = Math.floor(_fileLength); // 向下取整
+                }
+
+                size = size / 1024 / 1024; // @ts-ignore
+
+                // @ts-ignore
+                window.titaTracker && window.titaTracker("action").record({
+                  actionName: userId + '租户：' + telentId + '我得到了图片大小为：' + size + '，路径为' + imgUrl.slice(1, 200),
+                  actionGroup: 'okr地图图片',
+                  productName: 'okr地图导出'
+                });
+                Sentry.withScope(function (scope) {
+                  scope.setTag("error-level", "P0");
+                  scope.setTag("error-type", "地图导出-图片生成");
+                  scope.setExtra("userMessage", userId + '租户：' + telentId + '我得到了图片大小为：' + size + '，路径为' + imgUrl);
+                });
+                (0, _requestApis.getBase64DownloadUrl)(imgUrl.split(',')[1]).then(function (url) {
+                  var image = new Image(); // @ts-ignore
+
+                  // @ts-ignore
+                  window.titaTracker && window.titaTracker("action").record({
+                    actionName: userId + '租户：' + telentId + '我获得了地址' + url.Data.obj,
+                    actionGroup: 'okr地图接口',
+                    productName: 'okr地图导出'
+                  });
+                  Sentry.withScope(function (scope) {
+                    scope.setTag("error-level", "P0");
+                    scope.setTag("error-type", "地图导出-图片地址");
+                    scope.setExtra("userMessage", userId + '租户：' + telentId + '我得到了图片大小为：' + size + '，路径为' + imgUrl);
+                  });
+
+                  _toast["default"].Warning('图片上传成功，准备本地下载', {
+                    canClose: true
+                  });
+
+                  image.setAttribute('crossOrigin', 'anonymous');
 
                   image.onload = function () {
                     if (!url.Data.obj) {
-                      _toast["default"].Error("导出失败，请稍后重试", {
+                      _toast["default"].Error('导出失败，请稍后重试', {
                         canClose: false
                       });
                     }
 
-                    var a = document.createElement("a"); // 生成一个a元素
+                    var a = document.createElement('a'); // 生成一个a元素
 
                     // 生成一个a元素
-                    var event = new MouseEvent("click"); // 创建一个单击事件
+                    var event = new MouseEvent('click'); // 创建一个单击事件
 
                     // 创建一个单击事件
-                    a.download = "okr地图"; // 设置图片名称
+                    a.download = 'okr地图'; // 设置图片名称
 
                     // 设置图片名称
-                    a.href = url.Data.obj; // 将生成的URL设置为a.href属性
+                    a.href = url.Data.obj; // 将生成的URL设置为a
 
-                    // 将生成的URL设置为a.href属性
+                    // 将生成的URL设置为a
                     a.dispatchEvent(event); // 触发a的单击事件
 
                     // 触发a的单击事件
-                    _toast["default"].Success("导出成功");
+                    _toast["default"].Success('导出成功');
 
                     setIsExport(false);
 
@@ -217,7 +290,7 @@ var ExportMapModal = function ExportMapModal(props) {
 
   var confirmHandler = function confirmHandler() {
     if (isExport) {
-      _toast["default"].Warning("正在导出中", {
+      _toast["default"].Warning('正在导出中', {
         canClose: true
       });
 
@@ -233,11 +306,24 @@ var ExportMapModal = function ExportMapModal(props) {
   };
 
   var colorChangeHandler = function colorChangeHandler(colors) {
-    setBgColor(colors ? colors.color : "none");
+    setBgColor(colors ? colors.color : 'none');
+  };
+
+  var NodeDebug = function NodeDebug() {
+    var elements = (0, _reactFlowRenderer.useStoreState)(function (state) {
+      return [].concat(_toConsumableArray(state.nodes), _toConsumableArray(state.edges));
+    }, _isEqual["default"]);
+    var setElements = (0, _reactFlowRenderer.useStoreActions)(function (actions) {
+      return actions.setElements;
+    });
+    var newElements = (0, _utils.getLayoutedElements)(elements, direction);
+    virtualElements = newElements;
+    setElements(newElements);
+    return null;
   };
 
   return /*#__PURE__*/_react["default"].createElement(_dialog["default"], {
-    title: (0, _getLocale.getLocale)("OKR_Ali_Exportmap"),
+    title: (0, _getLocale.getLocale)('OKR_Ali_Exportmap'),
     noFooterLine: true,
     visible: visible,
     width: "1000px",
@@ -245,6 +331,7 @@ var ExportMapModal = function ExportMapModal(props) {
     onOk: confirmHandler,
     onCancel: onCloseHandler,
     ref: modalRef,
+    confirmLoading: isExport,
     className: "export-map-modal titaui-dialog",
     forceRender: true
   }, /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, /*#__PURE__*/_react["default"].createElement("div", {
@@ -253,7 +340,7 @@ var ExportMapModal = function ExportMapModal(props) {
     style: {
       marginRight: 10
     }
-  }, (0, _getLocale.getLocale)("OKR_Ali_Selectbackground")), /*#__PURE__*/_react["default"].createElement(_rcColorPicker["default"], {
+  }, (0, _getLocale.getLocale)('OKR_Ali_Selectbackground')), /*#__PURE__*/_react["default"].createElement(_rcColorPicker["default"], {
     animation: "slide-up",
     color: "#FFFFFF",
     onChange: colorChangeHandler,
@@ -275,7 +362,7 @@ var ExportMapModal = function ExportMapModal(props) {
     nodesDraggable: false,
     nodesConnectable: false,
     className: (0, _classnames["default"])("".concat(_precls["default"], "__export"), _defineProperty({}, "".concat(_precls["default"], "__dark"), darkTheme)),
-    elements: (0, _utils.getLayoutedElements)(dataSource, direction),
+    elements: dataSource,
     nodeTypes: _utils.nodeTypes,
     minZoom: 0.05,
     zoomOnScroll: false,
@@ -284,10 +371,10 @@ var ExportMapModal = function ExportMapModal(props) {
     paneMoveable: false,
     style: {
       height: 600,
-      width: "100%",
+      width: '100%',
       background: bgColor
     }
-  }))))));
+  }, /*#__PURE__*/_react["default"].createElement(NodeDebug, null)))))));
 };
 
 ExportMapModal.defaultProps = {

package/lib/components/okr-flow/export-modules/okr-search-panel/index.css

@@ -4,12 +4,14 @@
   display: flex;
   justify-content: center;
   align-items: center;
+  background: #f0f4fa;
 }
 
 .titaui-okr-flow--loading-img {
-  width: 162px;
+  width: 80px;
   height: 140px;
   background: url("../../images/loading-light.gif") no-repeat;
+  background-size: 100% auto;
 }
 
 .titaui-okr-flow--loading-img__dark {