@riil-frontend/component-topology 7.0.0-dev.8 → 7.0.1

package/es/networkTopo/services/topo/blacklist.js

@@ -0,0 +1,60 @@
+import _asyncToGenerator from "@babel/runtime/helpers/asyncToGenerator";
+import _regeneratorRuntime from "@babel/runtime/regenerator";
+import { request } from '@riil-frontend/component-topology-utils';
+import { TOPO_API_ROOT } from "./constants";
+export default {
+  /**
+   * 查询黑名单列表
+   */
+  queryBlackList: function queryBlackList(topoId) {
+    return _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee() {
+      return _regeneratorRuntime.wrap(function _callee$(_context) {
+        while (1) {
+          switch (_context.prev = _context.next) {
+            case 0:
+              _context.next = 2;
+              return request.post(TOPO_API_ROOT + "/blackList/" + topoId);
+
+            case 2:
+              return _context.abrupt("return", _context.sent);
+
+            case 3:
+            case "end":
+              return _context.stop();
+          }
+        }
+      }, _callee);
+    }))();
+  },
+
+  /**
+   * （批量）添加节点到黑名单
+   * @param {*} id 拓扑ID
+   * @param {*} ciIdList 节点ID
+   * @returns
+   */
+  addToBlocklist: function addToBlocklist(id, ciIdList) {
+    return _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee2() {
+      var ciIds;
+      return _regeneratorRuntime.wrap(function _callee2$(_context2) {
+        while (1) {
+          switch (_context2.prev = _context2.next) {
+            case 0:
+              ciIds = ciIdList.join(',');
+
+              if (!(ciIdList.length > 0)) {
+                _context2.next = 3;
+                break;
+              }
+
+              return _context2.abrupt("return", request.post(TOPO_API_ROOT + "/blackList/add?topoId=" + id + "&ciList=" + (encodeURIComponent(ciIds) || '""')));
+
+            case 3:
+            case "end":
+              return _context2.stop();
+          }
+        }
+      }, _callee2);
+    }))();
+  }
+};

package/es/networkTopo/services/topo/ciInfo.js

@@ -0,0 +1,69 @@
+import _asyncToGenerator from "@babel/runtime/helpers/asyncToGenerator";
+import _regeneratorRuntime from "@babel/runtime/regenerator";
+import rlog from '@riil-frontend/component-topology-utils/es/rlog';
+import { request } from '@riil-frontend/component-topology-utils';
+import { TOPO_API_ROOT } from "./constants";
+export default {
+  /**
+   * 批量查询ci类型的属性和指标定义
+   * @param {string[]} ciTypes
+   */
+  batchQueryCiTypeInfo: function batchQueryCiTypeInfo(ciTypes) {
+    return _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee() {
+      var param;
+      return _regeneratorRuntime.wrap(function _callee$(_context) {
+        while (1) {
+          switch (_context.prev = _context.next) {
+            case 0:
+              if (ciTypes.length) {
+                _context.next = 2;
+                break;
+              }
+
+              return _context.abrupt("return", []);
+
+            case 2:
+              param = {
+                typeCodes: ciTypes
+              }; // rlog.debug('getBatchCi', param);
+
+              _context.next = 5;
+              return request.post(TOPO_API_ROOT + "/attributes/once", param);
+
+            case 5:
+              return _context.abrupt("return", _context.sent);
+
+            case 6:
+            case "end":
+              return _context.stop();
+          }
+        }
+      }, _callee);
+    }))();
+  },
+
+  /**
+   * 批量查询ci的属性和指标
+   * @param {*} params Topo ID
+   */
+  batchQueryCiInfo: function batchQueryCiInfo(params) {
+    return _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee2() {
+      return _regeneratorRuntime.wrap(function _callee2$(_context2) {
+        while (1) {
+          switch (_context2.prev = _context2.next) {
+            case 0:
+              _context2.next = 2;
+              return request.post(TOPO_API_ROOT + "/attributes/polling", params);
+
+            case 2:
+              return _context2.abrupt("return", _context2.sent);
+
+            case 3:
+            case "end":
+              return _context2.stop();
+          }
+        }
+      }, _callee2);
+    }))();
+  }
+};

package/es/networkTopo/services/topo/constants.js

@@ -0,0 +1 @@
+export var TOPO_API_ROOT = '/topo/v1/api';

package/es/networkTopo/services/topo/icon.js

@@ -0,0 +1,131 @@
+import _asyncToGenerator from "@babel/runtime/helpers/asyncToGenerator";
+import _regeneratorRuntime from "@babel/runtime/regenerator";
+import { request } from '@riil-frontend/component-topology-utils';
+import { TOPO_API_ROOT } from "./constants";
+var API_ROOT = TOPO_API_ROOT;
+export var UPLOAD_ICON_URL = API_ROOT + "/shape/upload";
+export default {
+  UPLOAD_ICON_URL: UPLOAD_ICON_URL,
+  listAll: function listAll() {
+    return _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee() {
+      return _regeneratorRuntime.wrap(function _callee$(_context) {
+        while (1) {
+          switch (_context.prev = _context.next) {
+            case 0:
+              _context.next = 2;
+              return request.get(API_ROOT + "/shape");
+
+            case 2:
+              return _context.abrupt("return", _context.sent);
+
+            case 3:
+            case "end":
+              return _context.stop();
+          }
+        }
+      }, _callee);
+    }))();
+  },
+
+  /**
+   * 批量重命名
+   * @param data {[{id, name}]}
+   */
+  batchRename: function batchRename(data) {
+    return _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee2() {
+      return _regeneratorRuntime.wrap(function _callee2$(_context2) {
+        while (1) {
+          switch (_context2.prev = _context2.next) {
+            case 0:
+              _context2.next = 2;
+              return request.post(API_ROOT + "/shape/batch", data);
+
+            case 2:
+              return _context2.abrupt("return", _context2.sent);
+
+            case 3:
+            case "end":
+              return _context2.stop();
+          }
+        }
+      }, _callee2);
+    }))();
+  },
+
+  /**
+   * 重命名
+   */
+  rename: function rename(_ref) {
+    return _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee3() {
+      var id, name;
+      return _regeneratorRuntime.wrap(function _callee3$(_context3) {
+        while (1) {
+          switch (_context3.prev = _context3.next) {
+            case 0:
+              id = _ref.id, name = _ref.name;
+              _context3.next = 3;
+              return request.post(API_ROOT + "/shape/batch", [{
+                id: id,
+                name: name
+              }]);
+
+            case 3:
+              return _context3.abrupt("return", _context3.sent);
+
+            case 4:
+            case "end":
+              return _context3.stop();
+          }
+        }
+      }, _callee3);
+    }))();
+  },
+  "delete": function _delete(id) {
+    return _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee4() {
+      return _regeneratorRuntime.wrap(function _callee4$(_context4) {
+        while (1) {
+          switch (_context4.prev = _context4.next) {
+            case 0:
+              _context4.next = 2;
+              return request["delete"](API_ROOT + "/shape/" + id);
+
+            case 2:
+              return _context4.abrupt("return", _context4.sent);
+
+            case 3:
+            case "end":
+              return _context4.stop();
+          }
+        }
+      }, _callee4);
+    }))();
+  },
+  getIconJsonUrl: function getIconJsonUrl(id) {
+    return API_ROOT + "/shape/" + id + ".json";
+  },
+  getIconImageUrl: function getIconImageUrl(id) {
+    return API_ROOT + "/shape/download/" + id;
+  },
+  getIconJson: function getIconJson(id) {
+    var _this = this;
+
+    return _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee5() {
+      return _regeneratorRuntime.wrap(function _callee5$(_context5) {
+        while (1) {
+          switch (_context5.prev = _context5.next) {
+            case 0:
+              _context5.next = 2;
+              return request.get(_this.getDownloadUrl(id));
+
+            case 2:
+              return _context5.abrupt("return", _context5.sent);
+
+            case 3:
+            case "end":
+              return _context5.stop();
+          }
+        }
+      }, _callee5);
+    }))();
+  }
+};

package/es/networkTopo/services/topo/index.js

@@ -0,0 +1,18 @@
+import _extends from "@babel/runtime/helpers/extends";
+import icon from "./icon";
+import basic, { TOPO_GROUP_ID, TOPO_PARENT_ID } from "./basic";
+import auth from "./auth";
+import alert from "../alert";
+import resourceWebUrl from "./resourceWebUrl";
+import relation from "./relation";
+import ciInfo from "./ciInfo";
+import networkLink from "./networkLink";
+export { TOPO_GROUP_ID, TOPO_PARENT_ID };
+export default _extends({}, basic, alert, {
+  ciInfo: ciInfo,
+  relation: relation,
+  auth: auth,
+  icon: icon,
+  resourceWebUrl: resourceWebUrl,
+  networkLink: networkLink
+});

package/es/networkTopo/services/topo/networkLink.js

@@ -0,0 +1,33 @@
+import _asyncToGenerator from "@babel/runtime/helpers/asyncToGenerator";
+import _regeneratorRuntime from "@babel/runtime/regenerator";
+import { request } from '@riil-frontend/component-topology-utils';
+import { TOPO_API_ROOT } from "./constants";
+var API_ROOT = TOPO_API_ROOT;
+export default {
+  /**
+   * 批量查询ci类型是否可创建链路
+   * 
+   * @param {*} typeCodes 
+   * @returns 
+   */
+  getCiTypesConnectable: function getCiTypesConnectable(typeCodes) {
+    return _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee() {
+      return _regeneratorRuntime.wrap(function _callee$(_context) {
+        while (1) {
+          switch (_context.prev = _context.next) {
+            case 0:
+              _context.next = 2;
+              return request.post(API_ROOT + "/networkLink/ciTypesConnectable", typeCodes);
+
+            case 2:
+              return _context.abrupt("return", _context.sent);
+
+            case 3:
+            case "end":
+              return _context.stop();
+          }
+        }
+      }, _callee);
+    }))();
+  }
+};

package/es/networkTopo/services/topo/relation.js

@@ -0,0 +1,27 @@
+import _asyncToGenerator from "@babel/runtime/helpers/asyncToGenerator";
+import _regeneratorRuntime from "@babel/runtime/regenerator";
+import { request } from '@riil-frontend/component-topology-utils';
+import { TOPO_API_ROOT } from "./constants";
+var API_ROOT = TOPO_API_ROOT;
+export default {
+  batchQueryRelation: function batchQueryRelation(ids) {
+    return _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee() {
+      return _regeneratorRuntime.wrap(function _callee$(_context) {
+        while (1) {
+          switch (_context.prev = _context.next) {
+            case 0:
+              _context.next = 2;
+              return request.post(API_ROOT + "/structure/relationList", ids);
+
+            case 2:
+              return _context.abrupt("return", _context.sent);
+
+            case 3:
+            case "end":
+              return _context.stop();
+          }
+        }
+      }, _callee);
+    }))();
+  }
+};

package/es/networkTopo/services/topo/resourceWebUrl.js

@@ -0,0 +1,84 @@
+import _asyncToGenerator from "@babel/runtime/helpers/asyncToGenerator";
+import _regeneratorRuntime from "@babel/runtime/regenerator";
+
+/**
+ * 资源 web 控制台地址
+ */
+import { request } from '@riil-frontend/component-topology-utils';
+import { TOPO_API_ROOT } from "./constants";
+var API_ROOT = TOPO_API_ROOT;
+export default {
+  list: function list(ids) {
+    return _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee() {
+      return _regeneratorRuntime.wrap(function _callee$(_context) {
+        while (1) {
+          switch (_context.prev = _context.next) {
+            case 0:
+              _context.next = 2;
+              return request.post(API_ROOT + "/webUrl/list", ids);
+
+            case 2:
+              return _context.abrupt("return", _context.sent);
+
+            case 3:
+            case "end":
+              return _context.stop();
+          }
+        }
+      }, _callee);
+    }))();
+  },
+  save: function save(id, url) {
+    var _this = this;
+
+    return _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee2() {
+      return _regeneratorRuntime.wrap(function _callee2$(_context2) {
+        while (1) {
+          switch (_context2.prev = _context2.next) {
+            case 0:
+              if (!url) {
+                _context2.next = 6;
+                break;
+              }
+
+              _context2.next = 3;
+              return request.post(API_ROOT + "/webUrl", {
+                ciId: id,
+                webUrl: url
+              });
+
+            case 3:
+              return _context2.abrupt("return", _context2.sent);
+
+            case 6:
+              return _context2.abrupt("return", _this.deleteByIds([id]));
+
+            case 7:
+            case "end":
+              return _context2.stop();
+          }
+        }
+      }, _callee2);
+    }))();
+  },
+  deleteByIds: function deleteByIds(ids) {
+    return _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee3() {
+      return _regeneratorRuntime.wrap(function _callee3$(_context3) {
+        while (1) {
+          switch (_context3.prev = _context3.next) {
+            case 0:
+              _context3.next = 2;
+              return request.put(API_ROOT + "/webUrl/list/delete", ids);
+
+            case 2:
+              return _context3.abrupt("return", _context3.sent);
+
+            case 3:
+            case "end":
+              return _context3.stop();
+          }
+        }
+      }, _callee3);
+    }))();
+  }
+};

package/es/networkTopo/store/topoTreeMod.js

@@ -162,7 +162,11 @@ export default function (topoApp) {
 
                     rlog.debug('editTopoOnTree', conditions);
                     _context4.next = 4;
-                    return topoApp.serverApi.editTopoonTree(parseInt(conditions.id, 10), conditions.name, conditions.type);
+                    return topoApp.serverApi.editTopo({
+                      id: parseInt(conditions.id, 10),
+                      name: conditions.name,
+                      type: conditions.type
+                    });
 
                   case 4:
                     resTreeData = _context4.sent;

package/es/networkTopo/utils/storage.js

@@ -0,0 +1,38 @@
+// 数据字典缓存
+import { isAvailableArray } from '@riil-frontend/utils';
+export var DICT = {
+  getAll: function getAll() {
+    return JSON.parse(window.sessionStorage.getItem('dists'));
+  },
+  get: function get(code) {
+    if (isAvailableArray(this.getAll())) {
+      return this.getAll().find(function (item) {
+        return item.code === code;
+      });
+    }
+
+    return null;
+  },
+  set: function set(dists) {
+    window.sessionStorage.setItem('dists', JSON.stringify(dists));
+  },
+  isEmpty: function isEmpty() {
+    return !window.sessionStorage.getItem('dists');
+  }
+}; // storage 方法封装
+
+export var SessionStorage = {
+  get: function get(key) {
+    if (window.sessionStorage.getItem(key)) {
+      return JSON.parse(window.sessionStorage.getItem(key));
+    }
+
+    return null;
+  },
+  set: function set(key, value) {
+    window.sessionStorage.setItem(key, JSON.stringify(value));
+  },
+  remove: function remove(key) {
+    window.sessionStorage.removeItem(key);
+  }
+};

package/es/utils/tree.js

@@ -33,6 +33,7 @@ export function formatTree(json, funcPermissions) {
       }
 
       return {
+        data: node,
         id: "" + id,
         label: name,
         parentId: parentId,

package/lib/core/components/DisplaySettingDrawer/DisplaySetting.js

@@ -7,10 +7,10 @@ exports["default"] = void 0;
 
 var _box = _interopRequireDefault(require("@alifd/next/lib/box"));
 
-var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
-
 var _form = _interopRequireDefault(require("@alifd/next/lib/form"));
 
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+
 var _field = _interopRequireDefault(require("@alifd/next/lib/field"));
 
 var _react = _interopRequireWildcard(require("react"));
@@ -84,22 +84,7 @@ function DisplaySetting(props, ref) {
   return /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, /*#__PURE__*/_react["default"].createElement(_form["default"], {
     field: field,
     labelAlign: "top"
-  }, isNetworkTopo && /*#__PURE__*/_react["default"].createElement(_form["default"].Item, {
-    label: "\u663E\u793A\u544A\u8B66\u4FE1\u606F",
-    patternTrigger: "onChange"
-  }, /*#__PURE__*/_react["default"].createElement(_BooleanRadio["default"], {
-    name: "alarmSwitch",
-    trueText: "\u663E\u793A\u544A\u8B66\u4FE1\u606F",
-    falseText: "\u544A\u8B66\u9759\u9ED8"
-  })), isNetworkTopo && /*#__PURE__*/_react["default"].createElement(_form["default"].Item, {
-    label: "\u544A\u8B66\u5217\u8868",
-    patternTrigger: "onChange"
-  }, /*#__PURE__*/_react["default"].createElement(_BooleanRadio["default"], {
-    name: "alarmListDefaultOpen",
-    trueText: "\u9ED8\u8BA4\u5C55\u5F00",
-    falseText: "\u9ED8\u8BA4\u6536\u8D77",
-    trueOptionDisabled: !field.getValue("alarmSwitch")
-  })), /*#__PURE__*/_react["default"].createElement(_form["default"].Item, {
+  }, /*#__PURE__*/_react["default"].createElement(_form["default"].Item, {
     label: /*#__PURE__*/_react["default"].createElement(Label, {
       label: "\u8D44\u6E90\u6807\u6CE8",
       helpText: "\u6700\u591A\u652F\u6301\u52FE\u90093\u9879"
@@ -134,12 +119,6 @@ function DisplaySetting(props, ref) {
   }, linkTipConfig({
     name: "linkTip",
     topo: topo
-  })), showEdgeExpandConfig && /*#__PURE__*/_react["default"].createElement(_form["default"].Item, {
-    label: /*#__PURE__*/_react["default"].createElement(_LineExpandAllRadioGroup["default"].Label, null),
-    patternTrigger: "onChange"
-  }, /*#__PURE__*/_react["default"].createElement(_LineExpandAllRadioGroup["default"], {
-    name: "expandAllEdges",
-    isNetworkTopo: isNetworkTopo
   })), showLinkConfig && /*#__PURE__*/_react["default"].createElement(_form["default"].Item, {
     label: "\u94FE\u8DEF\u52A8\u6001\u6548\u679C",
     patternTrigger: "onChange"

package/lib/core/components/DisplaySettingDrawer/DisplaySettingDrawer.js

@@ -23,8 +23,6 @@ var _DisplaySetting = _interopRequireDefault(require("./DisplaySetting"));
 
 var _useDisplaySetting = _interopRequireDefault(require("./hooks/useDisplaySetting"));
 
-var _EditorDisplaySetting = _interopRequireDefault(require("./EditorDisplaySetting"));
-
 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; }
@@ -33,6 +31,7 @@ function DisplaySettingDrawer(props) {
   var visible = props.visible,
       topo = props.topo,
       displaySettingProps = props.displaySettingProps,
+      displaySettingRender = props.displaySettingRender,
       isEditor = props.isEditor,
       onClose = props.onClose;
   var settingRef = (0, _react.useRef)();
@@ -90,7 +89,7 @@ function DisplaySettingDrawer(props) {
     };
   }();
 
-  var DisplaySettingWidget = isEditor ? _EditorDisplaySetting["default"] : _DisplaySetting["default"];
+  var DisplaySettingWidget = displaySettingRender || _DisplaySetting["default"];
   return /*#__PURE__*/_react["default"].createElement(_Drawer["default"], {
     title: "\u663E\u793A\u8BBE\u7F6E",
     visible: visible,
@@ -105,6 +104,7 @@ function DisplaySettingDrawer(props) {
   }, visible && /*#__PURE__*/_react["default"].createElement(DisplaySettingWidget, {
     ref: settingRef,
     topo: topo,
+    isEditor: isEditor,
     displaySettingProps: displaySettingProps
   }));
 }

package/lib/core/components/DisplaySettingDrawer/LineExpandAllRadioGroup.js

@@ -30,8 +30,7 @@ var LineExpandAllRadioGroup = /*#__PURE__*/_react["default"].forwardRef(function
 
   var value = props.value,
       onChange = props.onChange,
-      isEdit = props.isEdit,
-      isNetworkTopo = props.isNetworkTopo;
+      isEdit = props.isEdit;
 
   var _useState = (0, _react.useState)(value === 1 ? "0" : "1"),
       showType = _useState[0],

package/lib/core/components/TopoView/GraphViewPanel.js

@@ -5,12 +5,16 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 exports.__esModule = true;
 exports["default"] = GraphViewPanel;
 
-var _react = _interopRequireDefault(require("react"));
+var _react = _interopRequireWildcard(require("react"));
 
 var _useCanvasTheme2 = _interopRequireDefault(require("../../hooks/useCanvasTheme"));
 
 var _TopoViewModule = _interopRequireDefault(require("./TopoView.module.scss"));
 
+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 GraphViewPanel(props) {
   var topo = props.topo,
       hideBackgroundColor = props.hideBackgroundColor;
@@ -24,10 +28,26 @@ function GraphViewPanel(props) {
   }),
       canvasColor = _useCanvasTheme.canvasColor;
 
+  (0, _react.useEffect)(function () {
+    // eslint-disable-next-line no-underscore-dangle
+    window._debugtopo = topo; // eslint-disable-next-line no-underscore-dangle
+
+    window._topo = topo;
+  }, []);
+
+  var onFocus = function onFocus() {
+    // eslint-disable-next-line no-underscore-dangle
+    window._debugtopo = topo; // eslint-disable-next-line no-underscore-dangle
+
+    window._topo = topo;
+  };
+
   return /*#__PURE__*/_react["default"].createElement("div", {
     className: _TopoViewModule["default"].viewPanel,
     style: {
       background: canvasColor
-    }
+    },
+    onFocus: onFocus,
+    on: true
   }, props.children);
 }

package/lib/core/editor/components/Toolbar/buttons.js

@@ -57,7 +57,7 @@ function getButtons(isNetworkTopo) {
   _Divider["default"], _NodeImageButton["default"], // 替换图片
   _NodeSizeButton["default"], // 图片尺寸
   _Divider["default"], _Layout["default"], // 布局方式
-  _NodeAlignWidget["default"] // 对齐方式
-  // SearchWidget, // 搜索
+  _NodeAlignWidget["default"], // 对齐方式
+  _SearchWidget["default"] // 搜索
   ]);
 }