@riil-frontend/component-topology 3.5.0-a.9 → 3.5.2

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

@@ -9,19 +9,18 @@ var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends")
 
 var _react = _interopRequireDefault(require("react"));
 
+var _propTypes = _interopRequireDefault(require("prop-types"));
+
 var _ResourceInfoDisplay = require("../../../constants/ResourceInfoDisplay");
 
 var _BasicConfig = _interopRequireDefault(require("./ResourceDisplay/BasicConfig"));
 
-var CommonOptions = [{
+var defaultCommonOptions = [{
   value: 'graph:name',
   label: '图片名称'
 }, {
   value: 'attribute:display_name',
   label: '显示名称'
-}, {
-  value: 'attribute:ipv4_address',
-  label: 'IP地址'
 }];
 /**
  * 资源标注配置
@@ -30,19 +29,26 @@ var CommonOptions = [{
  */
 
 function NodeTag(props, ref) {
+  var commonOptions = props.commonOptions;
   return /*#__PURE__*/_react["default"].createElement(_BasicConfig["default"], (0, _extends2["default"])({
     ref: ref
   }, props, {
     limit: 3,
     elementType: "node",
     showType: "tag",
-    commonOptions: CommonOptions,
+    commonOptions: commonOptions || defaultCommonOptions,
     defaultCommonConfig: _ResourceInfoDisplay.DEFAULT_NODE_TAG_COMMON_CONFIG,
     type: "node"
   }));
 }
 
 ;
+NodeTag.propTypes = {
+  commonOptions: _propTypes["default"].array
+};
+NodeTag.defaultProps = {
+  commonOptions: defaultCommonOptions
+};
 
 var _default = /*#__PURE__*/_react["default"].forwardRef(NodeTag);
 

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

@@ -9,14 +9,13 @@ var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends")
 
 var _react = _interopRequireDefault(require("react"));
 
+var _propTypes = _interopRequireDefault(require("prop-types"));
+
 var _ResourceInfoDisplay = require("../../../constants/ResourceInfoDisplay");
 
 var _BasicConfig = _interopRequireDefault(require("./ResourceDisplay/BasicConfig"));
 
-var CommonOptions = [{
-  value: 'attribute:ipv4_address',
-  label: 'IP地址'
-}, {
+var defaultCommonOptions = [{
   value: 'attribute:display_name',
   label: '显示名称'
 }, {
@@ -30,17 +29,25 @@ var CommonOptions = [{
  */
 
 function NodeTip(props, ref) {
+  var commonOptions = props.commonOptions;
   return /*#__PURE__*/_react["default"].createElement(_BasicConfig["default"], (0, _extends2["default"])({
     ref: ref
   }, props, {
     limit: 4,
     elementType: "node",
     showType: "tip",
-    commonOptions: CommonOptions,
+    commonOptions: commonOptions || defaultCommonOptions,
     defaultCommonConfig: _ResourceInfoDisplay.DEFAULT_TIP_COMMON_CONFIG
   }));
 }
 
+NodeTip.propTypes = {
+  commonOptions: _propTypes["default"].array
+};
+NodeTip.defaultProps = {
+  commonOptions: defaultCommonOptions
+};
+
 var _default = /*#__PURE__*/_react["default"].forwardRef(NodeTip);
 
 exports["default"] = _default;

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

@@ -20,32 +20,14 @@ var _default = function _default(props) {
 
   var executeByConfig = /*#__PURE__*/function () {
     var _ref = (0, _asyncToGenerator2["default"])( /*#__PURE__*/_regenerator["default"].mark(function _callee(config) {
-      var edgeFlowConfig;
       return _regenerator["default"].wrap(function _callee$(_context) {
         while (1) {
           switch (_context.prev = _context.next) {
             case 0:
               // 更新节点名称显示隐藏
-              topo.attributeMetricDisplay.updateNodesNameVisible(); // 更新连线展开折叠状态
+              topo.attributeMetricDisplay.updateNodesNameVisible();
 
-              if (displaySettingProps !== null && displaySettingProps !== void 0 && displaySettingProps.showLinkConfig) {
-                if (config.expandAllEdges) {
-                  topo.getHtTopo().expandAllEdgeGroups();
-                } else {
-                  topo.getHtTopo().collapseAllEdgeGroups();
-                } // 更新连线流动效果
-
-
-                edgeFlowConfig = config.edgeFlow ? {
-                  type: config.edgeFlow,
-                  // 必填，支持传送带drip、光点point、箭头arrow
-                  direction: config.edgeFlowDirection || 'from' // 流动方向，可为空，默认源到目的
-
-                } : null;
-                topo.getHtTopo().setGlobalEdgeFlow(edgeFlowConfig);
-              }
-
-            case 2:
+            case 1:
             case "end":
               return _context.stop();
           }
@@ -85,7 +67,7 @@ var _default = function _default(props) {
               extraOnOk = (displaySettingProps === null || displaySettingProps === void 0 ? void 0 : displaySettingProps.onOk) || (displaySettingProps === null || displaySettingProps === void 0 ? void 0 : displaySettingProps.onDisplaySettingDrawerOk);
 
               if (extraOnOk) {
-                extraOnOk();
+                extraOnOk(displayConfig);
               }
 
             case 11:

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

@@ -207,6 +207,7 @@ var Topology = function Topology(props) {
       case _componentTopologyGraph.TopoEvent.EVENT_DATA_DELETE:
         onDeleteElement(event.data);
         break;
+      // FIXME 保存逻辑优化
 
       case _componentTopologyGraph.TopoEvent.EVENT_SAVE_TOPO:
         onSaveTopo(event.data);

package/lib/core/editor/components/settings/propertyViews/edge/CommonEdgePropertyView.js

@@ -5,36 +5,29 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 exports.__esModule = true;
 exports["default"] = CommonEdgePropertyView;
 
-var _regenerator = _interopRequireDefault(require("@babel/runtime/regenerator"));
-
-var _select = _interopRequireDefault(require("@alifd/next/lib/select"));
-
 var _form = _interopRequireDefault(require("@alifd/next/lib/form"));
 
 var _numberPicker = _interopRequireDefault(require("@alifd/next/lib/number-picker"));
 
 var _field = _interopRequireDefault(require("@alifd/next/lib/field"));
 
-var _asyncToGenerator2 = _interopRequireDefault(require("@babel/runtime/helpers/asyncToGenerator"));
-
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 
 var _collapse = _interopRequireDefault(require("@alifd/next/lib/collapse"));
 
+var _rlog = _interopRequireDefault(require("@riil-frontend/component-topology-utils/es/rlog"));
+
 var _react = _interopRequireWildcard(require("react"));
 
 var _ColorPicker = _interopRequireDefault(require("../../../../../../common/components/ColorPicker"));
 
-var _LineType = _interopRequireDefault(require("../../common/LineType"));
-
-var _link = _interopRequireDefault(require("../../../../../../topoCenter/services/link"));
-
-var _rlog = _interopRequireDefault(require("@riil-frontend/component-topology-utils/es/rlog"));
+var _BindExitLinkSelect = _interopRequireDefault(require("../../../../../../topoCenter/components/editor/propertyViews/edge/link/BindExitLinkSelect"));
 
 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; }
 
+// import LineType from "../../common/LineType";
 var CollapsePanel = _collapse["default"].Panel;
 
 function parseValues(values, edge) {
@@ -49,58 +42,10 @@ function CommonEdgePropertyView(props) {
       edge = props.edge,
       values = props.values,
       _onChange = props.onChange,
-      editorProps = props.editorProps;
+      editorProps = props.editorProps,
+      extraDisplaySetting = props.extraDisplaySetting;
   var store = topo.store;
 
-  var _store$useModel = store.useModel("topoConfig"),
-      editState = _store$useModel[0],
-      editDispatchers = _store$useModel[1]; // 可关联出口链路
-
-
-  var _useState = (0, _react.useState)([]),
-      associatedlinks = _useState[0],
-      setAssociatedlinks = _useState[1]; // const [isLine, setIsLine] = useState(false);
-
-
-  var getLinkByNodes = /*#__PURE__*/function () {
-    var _ref = (0, _asyncToGenerator2["default"])( /*#__PURE__*/_regenerator["default"].mark(function _callee(id) {
-      var result, hasLinkIds, axlink;
-      return _regenerator["default"].wrap(function _callee$(_context) {
-        while (1) {
-          switch (_context.prev = _context.next) {
-            case 0:
-              _context.next = 2;
-              return _link["default"].queryAssociatedlinks(id);
-
-            case 2:
-              result = _context.sent;
-              hasLinkIds = topo.getLines().map(function (line) {
-                return line.id;
-              });
-              axlink = [];
-              result.data.map(function (exLink) {
-                if (hasLinkIds.indexOf(exLink.id) < 0) {
-                  axlink.push(exLink);
-                }
-              });
-
-              _rlog["default"].debug("出口链路列表", result.data, axlink);
-
-              setAssociatedlinks(axlink);
-
-            case 8:
-            case "end":
-              return _context.stop();
-          }
-        }
-      }, _callee);
-    }));
-
-    return function getLinkByNodes(_x) {
-      return _ref.apply(this, arguments);
-    };
-  }();
-
   var field = _field["default"].useField({
     autoUnmount: false,
     values: parseValues(values, edge),
@@ -113,11 +58,6 @@ function CommonEdgePropertyView(props) {
     }
   });
 
-  (0, _react.useEffect)(function () {
-    console.log("CommonEdgePropertyView-edge", edge, edge.getSource().getTag(), edge.getTarget());
-    var ids = [edge.getSource().getTag(), edge.getTarget().getTag()];
-    getLinkByNodes(ids);
-  }, [edge]);
   (0, _react.useEffect)(function () {
     field.setValues(parseValues(values, edge));
   }, [values]);
@@ -130,72 +70,6 @@ function CommonEdgePropertyView(props) {
     }));
   };
 
-  var bindExitLink = /*#__PURE__*/function () {
-    var _ref2 = (0, _asyncToGenerator2["default"])( /*#__PURE__*/_regenerator["default"].mark(function _callee2(value) {
-      var data, exitLink, aobj, config, exconfig, exportLinkIdList, _yield$editDispatcher, elements;
-
-      return _regenerator["default"].wrap(function _callee2$(_context2) {
-        while (1) {
-          switch (_context2.prev = _context2.next) {
-            case 0:
-              data = associatedlinks.find(function (link) {
-                return link.id === value;
-              });
-
-              _rlog["default"].debug("bindExitLink--- v, edge", data, edge);
-
-              exitLink = {
-                attributes: [],
-                ciType: "network_link",
-                dtype: "link",
-                id: data.id,
-                interfaceSource: data["network_link.source_device_id"],
-                interfaceTarget: data["network_link.destination_device_id"],
-                metrics: [],
-                name: data.name,
-                "network_link.connect_type": "exit",
-                "network_link.destination_ipv4": data["network_link.destination_ipv4"],
-                operation: "delete",
-                connect_type: "exit",
-                source: data.source_id,
-                target: data.destination_id,
-                type: "link"
-              };
-              aobj = edge.getAttrObject();
-              edge.setAttrObject((0, _extends2["default"])({}, aobj, exitLink));
-              edge.setTag(data.id);
-              config = topo.resourceConfig.getConfigFromHt();
-
-              _rlog["default"].debug("getConfigFromHt", config, topo.resourceConfig);
-
-              exconfig = (0, _extends2["default"])({}, config);
-              exportLinkIdList = config.exportLinkIdList;
-              exportLinkIdList.push(data.id);
-              topo.resourceConfig.updateConfig((0, _extends2["default"])({}, config, {
-                exportLinkIdList: exportLinkIdList
-              }));
-              _context2.next = 14;
-              return editDispatchers.fetchDataByConfig();
-
-            case 14:
-              _yield$editDispatcher = _context2.sent;
-              elements = _yield$editDispatcher.elements;
-
-              _rlog["default"].debug("fetchDataByConfig", elements);
-
-            case 17:
-            case "end":
-              return _context2.stop();
-          }
-        }
-      }, _callee2);
-    }));
-
-    return function bindExitLink(_x2) {
-      return _ref2.apply(this, arguments);
-    };
-  }();
-
   return /*#__PURE__*/_react["default"].createElement(_form["default"], {
     field: field,
     labelAlign: "top"
@@ -247,23 +121,5 @@ function CommonEdgePropertyView(props) {
     value: values["styleMap.edge.color"],
     align: "br",
     onChange: setLineColor
-  })))), /*#__PURE__*/_react["default"].createElement("div", null, /*#__PURE__*/_react["default"].createElement(_form["default"].Item, {
-    label: "\u5173\u8054\u51FA\u53E3\u94FE\u8DEF",
-    style: {
-      marginBottom: 0
-    }
-  }, /*#__PURE__*/_react["default"].createElement(_select["default"], {
-    style: {
-      width: 232
-    },
-    disabled: associatedlinks.length < 1,
-    onChange: function onChange(v) {
-      bindExitLink(v);
-    }
-  }, associatedlinks.map(function (item, index) {
-    return /*#__PURE__*/_react["default"].createElement(_select["default"].Option, {
-      value: item.id,
-      key: index
-    }, item.attributes.display_name);
-  }))))))));
+  })))), extraDisplaySetting))));
 }

package/lib/core/editor/components/settings/propertyViews/edge/EdgePropertyView.js

@@ -3,7 +3,7 @@
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
 
 exports.__esModule = true;
-exports["default"] = EdgePropertyViewMatch;
+exports["default"] = EdgePropertyViewRoute;
 
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 
@@ -27,7 +27,7 @@ var commonViews = {
  * @return {React.ReactNode || null}
  */
 
-function EdgePropertyViewMatch(props) {
+function EdgePropertyViewRoute(props) {
   var topo = props.topo,
       values = props.values,
       editorProps = props.editorProps;

package/lib/core/editor/components/settings/propertyViews/node/Setting/Setting.js

@@ -69,7 +69,7 @@ function Setting(props) {
     key: "\u663E\u793A\u8BBE\u7F6E",
     title: "\u663E\u793A\u8BBE\u7F6E"
   }, /*#__PURE__*/_react["default"].createElement(_form["default"].Item, {
-    label: "\u56FE\u7247\u540D\u79F01"
+    label: "\u56FE\u7247\u540D\u79F0"
   }, /*#__PURE__*/_react["default"].createElement(_input["default"], {
     name: "attrObject.customName"
   })), showImageSetting && /*#__PURE__*/_react["default"].createElement(_form["default"].Item, {

package/lib/core/editor/components/settings/propertyViews/node/data/Data.js

@@ -32,22 +32,22 @@ var CollapsePanel = _collapse["default"].Panel;
 
 function parseValues(values) {
   return (0, _extends2["default"])({}, values, {
-    'attrObject.customName': values['attrObject.customName'] || values['attrObject.name'],
-    'attrObject.bindTopo': values['attrObject.bindTopo'] || '' // 解决切换节点时关联拓扑选项未重置
+    "attrObject.customName": values["attrObject.customName"] || values["attrObject.name"],
+    "attrObject.bindTopo": values["attrObject.bindTopo"] || "" // 解决切换节点时关联拓扑选项未重置
 
   });
 }
 
 function getBindType(values) {
   if (values.tag) {
-    return 'resource';
+    return "resource";
   }
 
   if (values.attrObject.bindType) {
     return values.attrObject.bindType;
   }
 
-  return 'none';
+  return "none";
 }
 
 function Data(props) {
@@ -77,23 +77,24 @@ function Data(props) {
   }, [values]);
 
   var setBindType = function setBindType(newBindType) {
-    _onChange('attrObject.bindType', newBindType);
+    _onChange("attrObject.bindType", newBindType);
 
-    if (newBindType === 'topo') {//
+    if (newBindType === "topo") {//
     }
   };
 
   var handleBindTopoChange = function handleBindTopoChange(value, data) {
     // 设置名称为拓扑名称，清空自定义名称
-    node.a('name', data.label);
-    node.a('customName', null);
+    node.a("name", data.label);
+    node.a("customName", null);
+    topoEditApi.deleteExLink(node);
   };
 
   var RelateTopoTree = editorProps === null || editorProps === void 0 ? void 0 : editorProps.relateTopoTree;
   return /*#__PURE__*/_react["default"].createElement(_collapse["default"], {
-    defaultExpandedKeys: ['相关资源'],
+    defaultExpandedKeys: ["相关资源"],
     style: {
-      border: 'none'
+      border: "none"
     }
   }, /*#__PURE__*/_react["default"].createElement(CollapsePanel, {
     key: "\u76F8\u5173\u8D44\u6E90",
@@ -107,7 +108,7 @@ function Data(props) {
     name: "bindType",
     value: bindType,
     style: {
-      width: '100%',
+      width: "100%",
       marginRight: 8
     },
     onChange: setBindType
@@ -117,25 +118,25 @@ function Data(props) {
     value: "resource"
   }, "\u5173\u8054\u8D44\u6E90"), RelateTopoTree && /*#__PURE__*/_react["default"].createElement(Option, {
     value: "topo"
-  }, "\u5173\u8054\u62D3\u6251"))), bindType === 'resource' && /*#__PURE__*/_react["default"].createElement(_form["default"].Item, {
+  }, "\u5173\u8054\u62D3\u6251"))), bindType === "resource" && /*#__PURE__*/_react["default"].createElement(_form["default"].Item, {
     label: "\u5173\u8054\u8D44\u6E90"
   }, /*#__PURE__*/_react["default"].createElement("div", {
     style: {
-      display: 'flex'
+      display: "flex"
     }
   }, /*#__PURE__*/_react["default"].createElement("div", {
     className: _textModule["default"].textEllipsis,
     style: {
       flex: 1,
       paddingRight: 16,
-      color: '#4D6277'
+      color: "#4D6277"
     },
     title: values.tag ? values.name : null
-  }, values.tag ? values.name : '—'), /*#__PURE__*/_react["default"].createElement(_NodeRelateResourceButton["default"], {
+  }, values.tag ? values.name : "—"), /*#__PURE__*/_react["default"].createElement(_NodeRelateResourceButton["default"], {
     node: values,
     topo: topo,
     topoEditApi: topoEditApi
-  }))), bindType === 'topo' && RelateTopoTree && /*#__PURE__*/_react["default"].createElement(_form["default"].Item, {
+  }))), bindType === "topo" && RelateTopoTree && /*#__PURE__*/_react["default"].createElement(_form["default"].Item, {
     label: "\u5173\u8054\u62D3\u6251"
   }, /*#__PURE__*/_react["default"].createElement(RelateTopoTree, {
     name: "attrObject.bindTopo",

package/lib/core/editor/components/titlebar/TopoEditorTitleBar.js

@@ -9,13 +9,13 @@ var _regenerator = _interopRequireDefault(require("@babel/runtime/regenerator"))
 
 var _box = _interopRequireDefault(require("@alifd/next/lib/box"));
 
-var _asyncToGenerator2 = _interopRequireDefault(require("@babel/runtime/helpers/asyncToGenerator"));
-
 var _dialog = _interopRequireDefault(require("@alifd/next/lib/dialog"));
 
 var _button = _interopRequireDefault(require("@alifd/next/lib/button"));
 
-var _react = _interopRequireDefault(require("react"));
+var _asyncToGenerator2 = _interopRequireDefault(require("@babel/runtime/helpers/asyncToGenerator"));
+
+var _react = _interopRequireWildcard(require("react"));
 
 var _classnames = _interopRequireDefault(require("classnames"));
 
@@ -23,9 +23,55 @@ var _TitleWidget = _interopRequireDefault(require("../../../components/titlebar/
 
 var _TitleBarModule = _interopRequireDefault(require("../../../components/titlebar/TitleBar.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 TopoEditorTitleBar(props) {
   var topo = props.topo,
       topoEditApi = props.topoEditApi;
+  var store = topo.store;
+
+  var _store$useModel = store.useModel("topoEdit"),
+      topoEditState = _store$useModel[0],
+      topoEditDispatchers = _store$useModel[1];
+
+  var saving = topoEditState.saving;
+
+  var _useState = (0, _react.useState)(false),
+      exitFlag = _useState[0],
+      setExitFlag = _useState[1];
+
+  var saveAndExit = /*#__PURE__*/function () {
+    var _ref = (0, _asyncToGenerator2["default"])( /*#__PURE__*/_regenerator["default"].mark(function _callee() {
+      return _regenerator["default"].wrap(function _callee$(_context) {
+        while (1) {
+          switch (_context.prev = _context.next) {
+            case 0:
+              _context.next = 2;
+              return topo.save();
+
+            case 2:
+              setExitFlag(true);
+
+            case 3:
+            case "end":
+              return _context.stop();
+          }
+        }
+      }, _callee);
+    }));
+
+    return function saveAndExit() {
+      return _ref.apply(this, arguments);
+    };
+  }();
+
+  (0, _react.useEffect)(function () {
+    if (!saving && exitFlag) {
+      topo.exitEditMode();
+    }
+  }, [exitFlag, saving]);
   return /*#__PURE__*/_react["default"].createElement("div", {
     className: (0, _classnames["default"])(_TitleBarModule["default"].titlebar, _TitleBarModule["default"].titlebarEditMode)
   }, /*#__PURE__*/_react["default"].createElement("div", {
@@ -46,6 +92,7 @@ function TopoEditorTitleBar(props) {
   }, "\u6DFB\u52A0\u8D44\u6E90"), /*#__PURE__*/_react["default"].createElement(_button["default"], {
     className: _TitleBarModule["default"].button,
     onClick: function onClick() {
+      setExitFlag(false);
       topo.save();
     }
   }, "\u4FDD\u5B58"), /*#__PURE__*/_react["default"].createElement(_button["default"], {
@@ -55,19 +102,19 @@ function TopoEditorTitleBar(props) {
         title: "提示",
         content: "若直接退出，图上修改的内容将不会保存！",
         onOk: function () {
-          var _onOk = (0, _asyncToGenerator2["default"])( /*#__PURE__*/_regenerator["default"].mark(function _callee() {
-            return _regenerator["default"].wrap(function _callee$(_context) {
+          var _onOk = (0, _asyncToGenerator2["default"])( /*#__PURE__*/_regenerator["default"].mark(function _callee2() {
+            return _regenerator["default"].wrap(function _callee2$(_context2) {
               while (1) {
-                switch (_context.prev = _context.next) {
+                switch (_context2.prev = _context2.next) {
                   case 0:
-                    topo.exitEditMode();
+                    saveAndExit();
 
                   case 1:
                   case "end":
-                    return _context.stop();
+                    return _context2.stop();
                 }
               }
-            }, _callee);
+            }, _callee2);
           }));
 
           function onOk() {
@@ -77,23 +124,19 @@ function TopoEditorTitleBar(props) {
           return onOk;
         }(),
         onCancel: function () {
-          var _onCancel = (0, _asyncToGenerator2["default"])( /*#__PURE__*/_regenerator["default"].mark(function _callee2() {
-            return _regenerator["default"].wrap(function _callee2$(_context2) {
+          var _onCancel = (0, _asyncToGenerator2["default"])( /*#__PURE__*/_regenerator["default"].mark(function _callee3() {
+            return _regenerator["default"].wrap(function _callee3$(_context3) {
               while (1) {
-                switch (_context2.prev = _context2.next) {
+                switch (_context3.prev = _context3.next) {
                   case 0:
-                    _context2.next = 2;
-                    return topo.save();
-
-                  case 2:
                     topo.exitEditMode();
 
-                  case 3:
+                  case 1:
                   case "end":
-                    return _context2.stop();
+                    return _context3.stop();
                 }
               }
-            }, _callee2);
+            }, _callee3);
           }));
 
           function onCancel() {
@@ -103,7 +146,10 @@ function TopoEditorTitleBar(props) {
           return onCancel;
         }(),
         cancelProps: {
-          children: '保存'
+          children: "退出"
+        },
+        okProps: {
+          children: "保存并退出"
         }
       });
     }