@riil-frontend/component-topology 3.1.6 → 3.1.9

package/lib/core/viewer/components/plugins/{BaseInfo → ResourceDetail}/components/ResourceOverview/index.js

@@ -9,10 +9,10 @@ var _regenerator = _interopRequireDefault(require("@babel/runtime/regenerator"))
 
 var _message = _interopRequireDefault(require("@alifd/next/lib/message"));
 
-var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
-
 var _table = _interopRequireDefault(require("@alifd/next/lib/table"));
 
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+
 var _button = _interopRequireDefault(require("@alifd/next/lib/button"));
 
 var _icon = _interopRequireDefault(require("@alifd/next/lib/icon"));
@@ -23,12 +23,8 @@ var _react = _interopRequireWildcard(require("react"));
 
 var _reactRouterDom = require("react-router-dom");
 
-var _utils = require("@riil-frontend/utils");
-
 var _moment = _interopRequireDefault(require("moment"));
 
-var _componentTopologyGraph = require("@riil-frontend/component-topology-graph");
-
 var _topo = _interopRequireDefault(require("@riil-frontend/component-topology-common/es/services/topo"));
 
 var _topoData = require("../../../../../../../utils/topoData");
@@ -37,8 +33,6 @@ var _overview = _interopRequireDefault(require("../../../../../../services/overv
 
 var _alarm = _interopRequireDefault(require("../../../../../../services/alarm"));
 
-var _DictCache = _interopRequireDefault(require("../../../../../../models/cache/DictCache"));
-
 var _services = require("../../../../../../services");
 
 var _indexModule = _interopRequireDefault(require("./index.module.scss"));
@@ -47,6 +41,14 @@ var _SingleResourceStrategyLink = _interopRequireDefault(require("./SingleResour
 
 var _BlockBox = _interopRequireDefault(require("./BlockBox"));
 
+var _useCiAttrAndMetricData = _interopRequireDefault(require("./useCiAttrAndMetricData"));
+
+var _ResourceOverviewMetric = _interopRequireDefault(require("./ResourceOverviewMetric"));
+
+var _BaseInfo = _interopRequireDefault(require("./BaseInfo"));
+
+var _BaseInfoBlock = _interopRequireDefault(require("./BaseInfoBlock"));
+
 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; }
@@ -62,127 +64,6 @@ function formatUrl(url) {
   } else {
     return url;
   }
-} // 基本信息
-
-
-function BaseInfoRender(type, data) {
-  var _itemCols$type;
-
-  var itemCols = {
-    node: [{
-      label: '资源名称：',
-      objKey: 'resource',
-      render: function render(valueData, key) {
-        var display_name = valueData.display_name,
-            link = valueData.link;
-        return /*#__PURE__*/_react["default"].createElement("div", {
-          className: _indexModule["default"].item,
-          key: key
-        }, /*#__PURE__*/_react["default"].createElement("span", {
-          className: _indexModule["default"].label
-        }, "\u8D44\u6E90\u540D\u79F0\uFF1A"), /*#__PURE__*/_react["default"].createElement("span", {
-          className: _indexModule["default"].content,
-          title: display_name
-        }, valueData ? /*#__PURE__*/_react["default"].createElement(_reactRouterDom.Link, {
-          className: _indexModule["default"].link,
-          to: formatUrl(link)
-        }, display_name) : '-'));
-      }
-    }, {
-      label: 'IP地址：',
-      objKey: 'ipv4_address'
-    }, {
-      label: '资产编号：',
-      objKey: 'asset_number'
-    }, {
-      label: '资源类型：',
-      objKey: 'ciName'
-    }, {
-      label: '资源位置：',
-      objKey: 'res_address'
-    } // {
-    //   label: '负责人：',
-    //   objKey: 'principal'
-    // },
-    ],
-    link: [{
-      label: '链路带宽：',
-      objKey: 'rated_bandwidth',
-      style: {
-        width: '100%'
-      }
-    }, {
-      label: '源IP地址：',
-      objKey: 'source_ipv4'
-    }, {
-      label: '目的IP地址：',
-      objKey: 'destination_ipv4'
-    }, {
-      label: '源端口：',
-      objKey: 'source_Interface'
-    }, {
-      label: '目的端口：',
-      objKey: 'destination_Interface'
-    }]
-  };
-  return /*#__PURE__*/_react["default"].createElement("div", {
-    className: _indexModule["default"]['base-info']
-  }, (_itemCols$type = itemCols[type]) === null || _itemCols$type === void 0 ? void 0 : _itemCols$type.map(function (_ref, key) {
-    var label = _ref.label,
-        objKey = _ref.objKey,
-        style = _ref.style,
-        render = _ref.render;
-    return data[objKey] === false ? '' : render ? render(data[objKey], key) : /*#__PURE__*/_react["default"].createElement("div", {
-      className: _indexModule["default"].item,
-      style: style || {},
-      key: key
-    }, /*#__PURE__*/_react["default"].createElement("span", {
-      className: _indexModule["default"].label
-    }, label), /*#__PURE__*/_react["default"].createElement("span", {
-      className: _indexModule["default"].content,
-      title: data[objKey]
-    }, data[objKey] || '-'));
-  }));
-} // 关键指标
-
-
-function indicatorRender(type, data) {
-  function formatValue(itemData) {
-    var format = (0, _utils.metricValueFormat)({
-      value: itemData.value,
-      dataType: itemData.dataType,
-      dict: _DictCache["default"].getDictObject(),
-      unit: itemData.unit,
-      code: itemData.code
-    });
-    return format.value + " " + (format.value === '-' ? '' : format.unit);
-  }
-
-  return /*#__PURE__*/_react["default"].createElement("div", {
-    className: _indexModule["default"].indicator
-  }, /*#__PURE__*/_react["default"].createElement("div", {
-    className: _indexModule["default"].row
-  }, data.slice(0, 3).map(function (item) {
-    return /*#__PURE__*/_react["default"].createElement("div", {
-      className: _indexModule["default"].item,
-      key: item.code
-    }, /*#__PURE__*/_react["default"].createElement("span", {
-      className: _indexModule["default"].content
-    }, formatValue(item)), /*#__PURE__*/_react["default"].createElement("span", {
-      className: _indexModule["default"].label
-    }, item.name));
-  })), type === 'node' ? /*#__PURE__*/_react["default"].createElement("div", {
-    className: _indexModule["default"].row
-  }, data.slice(3, 6).map(function (item) {
-    return /*#__PURE__*/_react["default"].createElement("div", {
-      className: _indexModule["default"].item,
-      key: item.code
-    }, /*#__PURE__*/_react["default"].createElement("span", {
-      className: _indexModule["default"].content
-    }, formatValue(item)), /*#__PURE__*/_react["default"].createElement("span", {
-      className: _indexModule["default"].label
-    }, item.name));
-  })) : '');
 }
 /**
  * 资源概览
@@ -190,18 +71,19 @@ function indicatorRender(type, data) {
 
 
 function ResourceOverview(props) {
+  var _viewerProps$resource, _baseInfo$resource;
+
   var topo = props.topo,
       id = props.id,
       type = props.type,
       ciType = props.ciType,
-      userId = props.userId;
-
-  var _topo$store$useModelS = topo.store.useModelState('topoBizMod'),
-      attrsAndMetrics = _topo$store$useModelS.attrsAndMetrics;
-
-  var _topo$store$useModelS2 = topo.store.useModelState('topoMod').data,
-      linkGroups = _topo$store$useModelS2.linkGroups,
-      links = _topo$store$useModelS2.links;
+      userId = props.userId,
+      viewerProps = props.viewerProps;
+  var resourceOverviewProps = (viewerProps === null || viewerProps === void 0 ? void 0 : (_viewerProps$resource = viewerProps.resourceDetailProps) === null || _viewerProps$resource === void 0 ? void 0 : _viewerProps$resource.resourceOverviewProps) || {};
+  var ciAttrAndMetricData = (0, _useCiAttrAndMetricData["default"])({
+    topo: topo,
+    id: id
+  });
 
   var _useState = (0, _react.useState)({
     // 资源
@@ -247,9 +129,25 @@ function ResourceOverview(props) {
       isAppTopo = _useState4[0],
       setIsAppTopo = _useState4[1];
 
+  var ciTypeMeta = (0, _react.useMemo)(function () {
+    var typeMeta;
+
+    if (ciType === 'network_link') {
+      // 网络链路要按链路类型查询属性、指标
+      var link = topo.dataModel.getDataById(id);
+      var linkConnectType = link.attributes['network_link.connect_type'];
+      typeMeta = topo.ciTyeCache.getNetworkLinkCiType(linkConnectType);
+    } else {
+      typeMeta = topo.ciTyeCache.getCiType(ciType);
+    }
+
+    return typeMeta;
+  }, [id]);
   (0, _react.useEffect)(function () {
-    init();
-  }, [attrsAndMetrics, id]);
+    if (ciAttrAndMetricData) {
+      init();
+    }
+  }, [ciAttrAndMetricData, ciTypeMeta, id]);
 
   function init() {
     return _init.apply(this, arguments);
@@ -259,27 +157,15 @@ function ResourceOverview(props) {
     _init = (0, _asyncToGenerator2["default"])( /*#__PURE__*/_regenerator["default"].mark(function _callee() {
       var _topo$options$resourc, _modelAttributeMap$ow, _modelAttributeMap$, _modelAttributeMap$2, _modelAttributeMap$3, _modelAttributeMap$di, _modelAttributeMap$ip, _modelAttributeMap$as, _modelAttributeMap$5, _modelAttributeMap$6, _modelAttributeMap$so, _attributeMap$source_, _modelAttributeMap$de, _attributeMap$destina;
 
-      var ciTypeMeta, link, linkConnectType, _ciTypeMeta, modelMetrics, ciName, modelAttributeMap, domain, topModelMetrics, isAppTopoFlag, _findItem, attributeMap, metrics, res_address, _attributeMap$, rated_bandwidth, _modelAttributeMap$4;
+      var modelMetrics, ciName, modelAttributeMap, domain, topModelMetrics, isAppTopoFlag, attributeMap, metrics, res_address, _attributeMap$, rated_bandwidth, _modelAttributeMap$4;
 
       return _regenerator["default"].wrap(function _callee$(_context) {
         while (1) {
           switch (_context.prev = _context.next) {
             case 0:
-              console.log('初始化/更新概览 props', props);
-
-              if (ciType === 'network_link') {
-                // 网络链路要按链路类型查询属性、指标
-                link = [].concat(linkGroups, links).find(function (item) {
-                  return item.id === id;
-                });
-                linkConnectType = link.attributes['network_link.connect_type'];
-                ciTypeMeta = topo.ciTyeCache.getNetworkLinkCiType(linkConnectType);
-              } else {
-                ciTypeMeta = topo.ciTyeCache.getCiType(ciType);
-              } // 指标模型
-
+              console.log('初始化/更新概览 props', props); // 指标模型
 
-              _ciTypeMeta = ciTypeMeta, modelMetrics = _ciTypeMeta.metrics, ciName = _ciTypeMeta.displayName, modelAttributeMap = _ciTypeMeta.attributeMap, domain = _ciTypeMeta.domain;
+              modelMetrics = ciTypeMeta.metrics, ciName = ciTypeMeta.displayName, modelAttributeMap = ciTypeMeta.attributeMap, domain = ciTypeMeta.domain;
               topModelMetrics = modelMetrics.slice(0, 6); // 应用拓扑处理
 
               isAppTopoFlag = !!((_topo$options$resourc = topo.options.resourceOverviewDrawer) !== null && _topo$options$resourc !== void 0 && _topo$options$resourc.getData);
@@ -287,41 +173,41 @@ function ResourceOverview(props) {
               setIsAppTopo(isAppTopoFlag);
 
               if (!isAppTopoFlag) {
-                _context.next = 10;
+                _context.next = 9;
                 break;
               }
 
               initAppTopo(topModelMetrics, modelAttributeMap, ciName, domain);
               return _context.abrupt("return");
 
-            case 10:
+            case 9:
               // 拓扑（默认） ---------------------------
               // 基本信息
-              _findItem = (0, _topoData.findItem)(attrsAndMetrics, 'id', id), attributeMap = _findItem.attributeMap, metrics = _findItem.metrics;
-              console.log('基本信息', attributeMap, attrsAndMetrics, modelAttributeMap); // userVisible
+              attributeMap = ciAttrAndMetricData.attributeMap, metrics = ciAttrAndMetricData.metrics;
+              console.log('基本信息', attributeMap, modelAttributeMap); // userVisible
               // 位置
 
               res_address = false;
 
               if (!((_modelAttributeMap$ow = modelAttributeMap.owned_computer_room) !== null && _modelAttributeMap$ow !== void 0 && _modelAttributeMap$ow.userVisible)) {
-                _context.next = 19;
+                _context.next = 18;
                 break;
               }
 
-              _context.next = 16;
+              _context.next = 15;
               return getAddressFormat(attributeMap);
 
-            case 16:
+            case 15:
               res_address = _context.sent;
-              _context.next = 20;
+              _context.next = 19;
               break;
 
-            case 19:
+            case 18:
               if ((_modelAttributeMap$ = modelAttributeMap[ciType + ".computer_room"]) !== null && _modelAttributeMap$ !== void 0 && _modelAttributeMap$.userVisible || (_modelAttributeMap$2 = modelAttributeMap[ciType + ".area"]) !== null && _modelAttributeMap$2 !== void 0 && _modelAttributeMap$2.userVisible) {
                 res_address = attributeMap[ciType + ".computer_room "] || attributeMap[ciType + ".area"] ? " " + (((_attributeMap$ = attributeMap[ciType + ".area_object"]) === null || _attributeMap$ === void 0 ? void 0 : _attributeMap$.displayName) || '') + " " + (attributeMap[ciType + ".computer_room"] || '') : false;
               }
 
-            case 20:
+            case 19:
               // 链路带宽(取实际带宽)
               rated_bandwidth = false;
 
@@ -352,16 +238,16 @@ function ResourceOverview(props) {
               }); // 资源/链路-关键指标 数据 metrics，模型 topo.ciTyeCache.getCiType(ciType)
 
               setIndicator(topModelMetrics.map(function (item) {
-                var _findItem2;
+                var _findItem;
 
                 return (0, _extends2["default"])({}, item, {
-                  value: ((_findItem2 = (0, _topoData.findItem)(metrics, 'code', item.code)) === null || _findItem2 === void 0 ? void 0 : _findItem2.value) || ''
+                  value: ((_findItem = (0, _topoData.findItem)(metrics, 'code', item.code)) === null || _findItem === void 0 ? void 0 : _findItem.value) || ''
                 });
               })); // 资源-告警/风险
 
               getAlarmRiskData(id);
 
-            case 25:
+            case 24:
             case "end":
               return _context.stop();
           }
@@ -485,7 +371,7 @@ function ResourceOverview(props) {
 
   function _getAttribute() {
     _getAttribute = (0, _asyncToGenerator2["default"])( /*#__PURE__*/_regenerator["default"].mark(function _callee3(id) {
-      var res, _ref3, attributes, attributeMap;
+      var res, _ref2, attributes, attributeMap;
 
       return _regenerator["default"].wrap(function _callee3$(_context3) {
         while (1) {
@@ -503,7 +389,7 @@ function ResourceOverview(props) {
 
             case 2:
               res = _context3.sent;
-              _ref3 = res[0] || {}, attributes = _ref3.attributes;
+              _ref2 = res[0] || {}, attributes = _ref2.attributes;
               attributeMap = {};
               attributes.forEach(function (item) {
                 attributeMap[item.code] = item.value;
@@ -526,14 +412,14 @@ function ResourceOverview(props) {
 
 
   function _getAddressFormat() {
-    _getAddressFormat = (0, _asyncToGenerator2["default"])( /*#__PURE__*/_regenerator["default"].mark(function _callee4(_ref2) {
+    _getAddressFormat = (0, _asyncToGenerator2["default"])( /*#__PURE__*/_regenerator["default"].mark(function _callee4(_ref) {
       var owned_computer_room, owned_cabinet, start_u_location, end_u_location, address, _res$find, _res$find$attributes, _res$find2, _res$find2$attributes, res, u;
 
       return _regenerator["default"].wrap(function _callee4$(_context4) {
         while (1) {
           switch (_context4.prev = _context4.next) {
             case 0:
-              owned_computer_room = _ref2.owned_computer_room, owned_cabinet = _ref2.owned_cabinet, start_u_location = _ref2.start_u_location, end_u_location = _ref2.end_u_location;
+              owned_computer_room = _ref.owned_computer_room, owned_cabinet = _ref.owned_cabinet, start_u_location = _ref.start_u_location, end_u_location = _ref.end_u_location;
               console.log('获取地址信息：', {
                 owned_computer_room: owned_computer_room,
                 owned_cabinet: owned_cabinet,
@@ -749,20 +635,25 @@ function ResourceOverview(props) {
     return _alarmRiskOperation.apply(this, arguments);
   }
 
+  var elementData = {
+    id: id,
+    ciType: ciType,
+    type: type,
+    name: baseInfo === null || baseInfo === void 0 ? void 0 : (_baseInfo$resource = baseInfo.resource) === null || _baseInfo$resource === void 0 ? void 0 : _baseInfo$resource.display_name
+  };
   return /*#__PURE__*/_react["default"].createElement("div", {
     className: _indexModule["default"]['resource-overview']
-  }, /*#__PURE__*/_react["default"].createElement(_BlockBox["default"], {
-    headerTitle: "\u57FA\u672C\u4FE1\u606F",
-    headerExtra: ciType === 'network_link' && /*#__PURE__*/_react["default"].createElement(_SingleResourceStrategyLink["default"], {
-      id: id,
-      ciType: ciType,
-      name: baseInfo.resource.display_name
-    })
-  }, BaseInfoRender(type, baseInfo)), /*#__PURE__*/_react["default"].createElement(_BlockBox["default"], {
+  }, /*#__PURE__*/_react["default"].createElement(_BaseInfoBlock["default"], (0, _extends2["default"])({
+    data: elementData,
+    ciTypeMeta: ciTypeMeta,
+    baseInfo: baseInfo
+  }, resourceOverviewProps === null || resourceOverviewProps === void 0 ? void 0 : resourceOverviewProps.baseInfoProps)), /*#__PURE__*/_react["default"].createElement(_BlockBox["default"], {
     headerTitle: "\u5173\u952E\u6307\u6807"
-  }, /*#__PURE__*/_react["default"].createElement("div", {
-    className: _indexModule["default"].indicator
-  }, indicatorRender(type, indicator))), /*#__PURE__*/_react["default"].createElement(_BlockBox["default"], {
+  }, /*#__PURE__*/_react["default"].createElement(_ResourceOverviewMetric["default"], {
+    topo: topo,
+    type: type,
+    data: indicator
+  })), /*#__PURE__*/_react["default"].createElement(_BlockBox["default"], {
     headerTitle: "\u6700\u8FD1\u7684\u544A\u8B66\u548C\u98CE\u9669"
   }, /*#__PURE__*/_react["default"].createElement("div", {
     className: _indexModule["default"].alarm

package/lib/core/viewer/components/plugins/ResourceDetail/components/ResourceOverview/useCiAttrAndMetricData.js

@@ -0,0 +1,17 @@
+"use strict";
+
+exports.__esModule = true;
+exports["default"] = useCiAttrAndMetricData;
+
+function useCiAttrAndMetricData(props) {
+  var topo = props.topo,
+      id = props.id;
+
+  var _topo$store$useModelS = topo.store.useModelState('topoBizMod'),
+      attrsAndMetrics = _topo$store$useModelS.attrsAndMetrics;
+
+  var data = attrsAndMetrics.find(function (item) {
+    return item.id === id;
+  });
+  return data;
+}

package/lib/core/viewer/components/plugins/ResourceDetail/index.js

@@ -0,0 +1,11 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+exports.__esModule = true;
+exports["default"] = void 0;
+
+var _ResourceDetailPlugin = _interopRequireDefault(require("./ResourceDetailPlugin"));
+
+var _default = _ResourceDetailPlugin["default"];
+exports["default"] = _default;

package/lib/core/viewer/components/plugins/ResourceDetail/index.module.scss

@@ -1,40 +1,49 @@
-.topo-drawer {
-  width: 832px;
+@import '~@alifd/next/variables.scss';
 
-  .drawerHeader {
-    margin-top: 10px;
+.title-popup{
+  width: 240px;
+  .search{
+    width: 100%;
+    padding: 4px 16px 12px;
   }
+  .not-data{
+    color: var(--color-text1-4);
+    font-size: 14px;
+    line-height: 200px;
+    text-align: center;
+  }
+  :global {
+    .#{$css-prefix}menu-content{
+      height: 200px;
+      overflow-y: auto;
+    }
+  }
+}
 
-  .topo-drawer-header-title {
+.baseInfo {
+  box-shadow: 0px 0px 6px 1px #F2F7FD;
+  .drawer-title{
     font-size: 16px;
-    color: #333333;
-    line-height: 22px;
     font-weight: 500;
+    color: #4D6277;
   }
-
-  .topo-drawer-header-link {
-    color: #1071da;
-    font-size: 14px;
-    font-weight: 400;
-    line-height: 22px;
-    padding-left: 12px;
-  }
-
-  .topo-drawer-alarm-banner {
-    padding-bottom: 8px;
-    margin-top: -10px;
-
-    .topo-drawer-alarm-txt {
-      font-size: 12px;
-      color: #333333;
-      line-height: 20px;
+  :global {
+    .#{$css-prefix}drawer-body {
+      height: calc(100% - 49px);
+      padding: 16px 24px;
+      .#{$css-prefix}tabs-content{
+        height: calc(100% - 31px);
+        overflow: auto;
+      }
     }
-
-    .topo-drawer-alarm-refresh {
-      font-size: 12px;
-      color: #096dd9;
-      position: absolute;
-      right: 40px;
+  }
+  .tab{
+    height: 100%;
+    :global {
+      .#{$css-prefix}tabs-content{
+        height: calc(100% - 31px);
+        overflow: auto;
+      }
     }
   }
 }

package/lib/core/viewer/components/plugins/ViewerPlugin.js

@@ -13,13 +13,13 @@ var _ResourceWebControllUrlSettingDialog = _interopRequireDefault(require("./Res
 
 var _MetricPollingPlugin = _interopRequireDefault(require("./MetricPollingPlugin"));
 
-var _BaseInfo = _interopRequireDefault(require("./BaseInfo"));
+var _ResourceDetail = _interopRequireDefault(require("./ResourceDetail"));
 
 function ViewerPlugin(props) {
   var topo = props.topo,
       viewerProps = props.viewerProps;
   var store = topo.store;
-  var plugins = [_MetricPollingPlugin["default"], _ResourceWebControllUrlSettingDialog["default"], _BaseInfo["default"]].concat((viewerProps === null || viewerProps === void 0 ? void 0 : viewerProps.plugins) || []);
+  var plugins = [_MetricPollingPlugin["default"], _ResourceWebControllUrlSettingDialog["default"], _ResourceDetail["default"]].concat((viewerProps === null || viewerProps === void 0 ? void 0 : viewerProps.plugins) || []);
   return /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, plugins.map(function (Plugin, index) {
     return /*#__PURE__*/_react["default"].createElement(Plugin, (0, _extends2["default"])({
       key: index,

package/lib/core/viewer/components/titlebar/BasicTools.js

@@ -17,7 +17,7 @@ var _NodesDragSwitch = _interopRequireDefault(require("./widgets/NodesDragSwitch
 
 var _AlarmListShowButton = _interopRequireDefault(require("./widgets/AlarmListShowButton"));
 
-var _SettingButton = _interopRequireDefault(require("./widgets/SettingButton"));
+var _SettingButtonWidget = _interopRequireDefault(require("./widgets/SettingButtonWidget"));
 
 function BasicTools(props) {
   var topo = props.topo,
@@ -31,7 +31,7 @@ function BasicTools(props) {
     topo: topo
   }, props)), /*#__PURE__*/_react["default"].createElement(_AlarmListShowButton["default"], (0, _extends2["default"])({
     topo: topo
-  }, props)), /*#__PURE__*/_react["default"].createElement(_SettingButton["default"], props), /*#__PURE__*/_react["default"].createElement(_NodesDragSwitch["default"], (0, _extends2["default"])({
+  }, props)), /*#__PURE__*/_react["default"].createElement(_SettingButtonWidget["default"], props), /*#__PURE__*/_react["default"].createElement(_NodesDragSwitch["default"], (0, _extends2["default"])({
     topo: topo
   }, props)), children);
 }

package/lib/core/viewer/components/titlebar/widgets/SettingButton.js

@@ -24,9 +24,8 @@ function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj &&
  */
 function SettingButton(props) {
   var topo = props.topo,
-      viewerProps = props.viewerProps,
+      displaySettingProps = props.displaySettingProps,
       style = props.style;
-  var id = topo.id;
 
   var _useState = (0, _react.useState)(false),
       visible = _useState[0],
@@ -44,7 +43,7 @@ function SettingButton(props) {
   })), /*#__PURE__*/_react["default"].createElement(_DisplaySettingDrawer["default"], {
     visible: visible,
     topo: topo,
-    viewerProps: viewerProps,
+    displaySettingProps: displaySettingProps,
     onClose: function onClose() {
       setVisible(false);
     }

package/lib/core/viewer/components/titlebar/widgets/SettingButtonWidget.js

@@ -0,0 +1,28 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+exports.__esModule = true;
+exports["default"] = SettingButtonWidget;
+
+var _react = _interopRequireDefault(require("react"));
+
+var _SettingButton = _interopRequireDefault(require("./SettingButton"));
+
+/**
+ * 设置按钮
+ *
+ * @return {any}
+ */
+function SettingButtonWidget(props) {
+  var topo = props.topo,
+      viewerProps = props.viewerProps,
+      style = props.style;
+  return /*#__PURE__*/_react["default"].createElement(_SettingButton["default"], {
+    topo: topo,
+    displaySettingProps: viewerProps === null || viewerProps === void 0 ? void 0 : viewerProps.displaySettingProps,
+    style: style
+  });
+}
+
+;

package/lib/topoCenter/components/TopoView.js

@@ -70,10 +70,9 @@ function NetworkTopologyCore(props) {
       plugins: [],
       // 右侧工具栏按钮
       ViewerTitlebarRightTools: _ViewerTools["default"],
-      showLinkConfig: true,
-      // 是否显示链路相关配置
-      onDisplaySettingDrawerOk: function onDisplaySettingDrawerOk() {},
-      displaySettingDrawerProps: {
+      displaySettingProps: {
+        showLinkConfig: true,
+        // 是否显示链路相关配置
         linkTagConfig: function linkTagConfig(params) {
           return /*#__PURE__*/_react["default"].createElement(_LinkTag["default"], params);
         },

package/lib/topoCenter/models/TopoCenter.js

@@ -42,12 +42,16 @@ var TopoCenter = /*#__PURE__*/function (_TopoApp) {
     }, options, {
       usePermission: true,
       storeModels: (0, _extends2["default"])({}, _store["default"], options.storeModels),
-      // 默认链路标注/悬浮框显示配置
-      defaultLinkTagTipConfig: {
-        tag: _ResourceInfoDisplay.DEFAULT_LINK_TAG_COMMON_CONFIG,
-        tip: _ResourceInfoDisplay.DEFAULT_TIP_COMMON_CONFIG
+      tagTip: {
+        // 默认链路标注/悬浮框显示配置
+        getDefaultLinkTagConfig: function getDefaultLinkTagConfig() {
+          return _ResourceInfoDisplay.DEFAULT_LINK_TAG_COMMON_CONFIG;
+        },
+        getDefaultLinkTipConfig: function getDefaultLinkTipConfig() {
+          return _ResourceInfoDisplay.DEFAULT_TIP_COMMON_CONFIG;
+        },
+        ExtElementTagTipBuilder: _LinkTagsTipsBuilder["default"]
       },
-      ExtElementTagTipBuilder: _LinkTagsTipsBuilder["default"],
       onSwitchToEditModeBegin: function () {
         var _onSwitchToEditModeBegin = (0, _asyncToGenerator2["default"])( /*#__PURE__*/_regenerator["default"].mark(function _callee(topo) {
           var topoDispatchers;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@riil-frontend/component-topology",
-  "version": "3.1.6",
+  "version": "3.1.9",
   "description": "拓扑",
   "scripts": {
     "start": "build-scripts start",
@@ -110,6 +110,6 @@
     "access": "public"
   },
   "license": "MIT",
-  "homepage": "https://unpkg.com/@riil-frontend/component-topology@3.1.6/build/index.html",
+  "homepage": "https://unpkg.com/@riil-frontend/component-topology@3.1.9/build/index.html",
   "gitHead": "2da19ffccbb7ca60a8acf396e39f542c68bb33f5"
 }