@riil-frontend/component-topology 3.1.5 → 3.1.8

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

@@ -1,24 +1,25 @@
 import _Message from "@alifd/next/es/message";
-import _extends from "@babel/runtime/helpers/extends";
 import _Table from "@alifd/next/es/table";
+import _extends from "@babel/runtime/helpers/extends";
 import _Button from "@alifd/next/es/button";
 import _Icon from "@alifd/next/es/icon";
 import _asyncToGenerator from "@babel/runtime/helpers/asyncToGenerator";
 import _regeneratorRuntime from "@babel/runtime/regenerator";
-import React, { useState, useEffect, useRef, useCallback } from 'react';
+import React, { useState, useEffect, useRef, useCallback, useMemo } from 'react';
 import { Link } from 'react-router-dom';
-import { metricValueFormat } from '@riil-frontend/utils';
 import moment from 'moment';
-import { TopoEvent } from '@riil-frontend/component-topology-graph';
 import topoService from '@riil-frontend/component-topology-common/es/services/topo';
 import { findItem } from "../../../../../../../utils/topoData";
 import service from "../../../../../../services/overview";
 import alarmService from "../../../../../../services/alarm";
-import DictCache from "../../../../../../models/cache/DictCache";
 import { queryCisByIds } from "../../../../../../services";
 import styles from "./index.module.scss";
 import SingleResourceStrategyLink from "./SingleResourceStrategyLink";
-import BlockBox from "./BlockBox"; // url 处理，UICBB 的地址需截取前缀
+import BlockBox from "./BlockBox";
+import useCiAttrAndMetricData from "./useCiAttrAndMetricData";
+import ResourceOverviewMetric from "./ResourceOverviewMetric";
+import BaseInfo from "./BaseInfo";
+import BaseInfoBlock from "./BaseInfoBlock"; // url 处理，UICBB 的地址需截取前缀
 
 function formatUrl(url) {
   var _window, _window$location;
@@ -30,127 +31,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.createElement("div", {
-          className: styles.item,
-          key: key
-        }, /*#__PURE__*/React.createElement("span", {
-          className: styles.label
-        }, "\u8D44\u6E90\u540D\u79F0\uFF1A"), /*#__PURE__*/React.createElement("span", {
-          className: styles.content,
-          title: display_name
-        }, valueData ? /*#__PURE__*/React.createElement(Link, {
-          className: styles.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.createElement("div", {
-    className: styles['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.createElement("div", {
-      className: styles.item,
-      style: style || {},
-      key: key
-    }, /*#__PURE__*/React.createElement("span", {
-      className: styles.label
-    }, label), /*#__PURE__*/React.createElement("span", {
-      className: styles.content,
-      title: data[objKey]
-    }, data[objKey] || '-'));
-  }));
-} // 关键指标
-
-
-function indicatorRender(type, data) {
-  function formatValue(itemData) {
-    var format = metricValueFormat({
-      value: itemData.value,
-      dataType: itemData.dataType,
-      dict: DictCache.getDictObject(),
-      unit: itemData.unit,
-      code: itemData.code
-    });
-    return format.value + " " + (format.value === '-' ? '' : format.unit);
-  }
-
-  return /*#__PURE__*/React.createElement("div", {
-    className: styles.indicator
-  }, /*#__PURE__*/React.createElement("div", {
-    className: styles.row
-  }, data.slice(0, 3).map(function (item) {
-    return /*#__PURE__*/React.createElement("div", {
-      className: styles.item,
-      key: item.code
-    }, /*#__PURE__*/React.createElement("span", {
-      className: styles.content
-    }, formatValue(item)), /*#__PURE__*/React.createElement("span", {
-      className: styles.label
-    }, item.name));
-  })), type === 'node' ? /*#__PURE__*/React.createElement("div", {
-    className: styles.row
-  }, data.slice(3, 6).map(function (item) {
-    return /*#__PURE__*/React.createElement("div", {
-      className: styles.item,
-      key: item.code
-    }, /*#__PURE__*/React.createElement("span", {
-      className: styles.content
-    }, formatValue(item)), /*#__PURE__*/React.createElement("span", {
-      className: styles.label
-    }, item.name));
-  })) : '');
 }
 /**
  * 资源概览
@@ -158,18 +38,19 @@ function indicatorRender(type, data) {
 
 
 export default 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 = useCiAttrAndMetricData({
+    topo: topo,
+    id: id
+  });
 
   var _useState = useState({
     // 资源
@@ -215,9 +96,25 @@ export default function ResourceOverview(props) {
       isAppTopo = _useState4[0],
       setIsAppTopo = _useState4[1];
 
+  var ciTypeMeta = 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]);
   useEffect(function () {
-    init();
-  }, [attrsAndMetrics, id]);
+    if (ciAttrAndMetricData) {
+      init();
+    }
+  }, [ciAttrAndMetricData, ciTypeMeta, id]);
 
   function init() {
     return _init.apply(this, arguments);
@@ -227,27 +124,15 @@ export default function ResourceOverview(props) {
     _init = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.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 _regeneratorRuntime.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);
@@ -255,41 +140,41 @@ export default 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 = 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;
 
@@ -320,16 +205,16 @@ export default function ResourceOverview(props) {
               }); // 资源/链路-关键指标 数据 metrics，模型 topo.ciTyeCache.getCiType(ciType)
 
               setIndicator(topModelMetrics.map(function (item) {
-                var _findItem2;
+                var _findItem;
 
                 return _extends({}, item, {
-                  value: ((_findItem2 = findItem(metrics, 'code', item.code)) === null || _findItem2 === void 0 ? void 0 : _findItem2.value) || ''
+                  value: ((_findItem = findItem(metrics, 'code', item.code)) === null || _findItem === void 0 ? void 0 : _findItem.value) || ''
                 });
               })); // 资源-告警/风险
 
               getAlarmRiskData(id);
 
-            case 25:
+            case 24:
             case "end":
               return _context.stop();
           }
@@ -453,7 +338,7 @@ export default function ResourceOverview(props) {
 
   function _getAttribute() {
     _getAttribute = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee3(id) {
-      var res, _ref3, attributes, attributeMap;
+      var res, _ref2, attributes, attributeMap;
 
       return _regeneratorRuntime.wrap(function _callee3$(_context3) {
         while (1) {
@@ -471,7 +356,7 @@ export default 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;
@@ -494,14 +379,14 @@ export default function ResourceOverview(props) {
 
 
   function _getAddressFormat() {
-    _getAddressFormat = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee4(_ref2) {
+    _getAddressFormat = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.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 _regeneratorRuntime.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,
@@ -717,20 +602,25 @@ export default 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.createElement("div", {
     className: styles['resource-overview']
-  }, /*#__PURE__*/React.createElement(BlockBox, {
-    headerTitle: "\u57FA\u672C\u4FE1\u606F",
-    headerExtra: ciType === 'network_link' && /*#__PURE__*/React.createElement(SingleResourceStrategyLink, {
-      id: id,
-      ciType: ciType,
-      name: baseInfo.resource.display_name
-    })
-  }, BaseInfoRender(type, baseInfo)), /*#__PURE__*/React.createElement(BlockBox, {
+  }, /*#__PURE__*/React.createElement(BaseInfoBlock, _extends({
+    data: elementData,
+    ciTypeMeta: ciTypeMeta,
+    baseInfo: baseInfo
+  }, resourceOverviewProps === null || resourceOverviewProps === void 0 ? void 0 : resourceOverviewProps.baseInfoProps)), /*#__PURE__*/React.createElement(BlockBox, {
     headerTitle: "\u5173\u952E\u6307\u6807"
-  }, /*#__PURE__*/React.createElement("div", {
-    className: styles.indicator
-  }, indicatorRender(type, indicator))), /*#__PURE__*/React.createElement(BlockBox, {
+  }, /*#__PURE__*/React.createElement(ResourceOverviewMetric, {
+    topo: topo,
+    type: type,
+    data: indicator
+  })), /*#__PURE__*/React.createElement(BlockBox, {
     headerTitle: "\u6700\u8FD1\u7684\u544A\u8B66\u548C\u98CE\u9669"
   }, /*#__PURE__*/React.createElement("div", {
     className: styles.alarm

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

@@ -0,0 +1,12 @@
+export default 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/es/core/viewer/components/plugins/ResourceDetail/index.js

@@ -0,0 +1,2 @@
+import ResourceDetailPlugin from "./ResourceDetailPlugin";
+export default ResourceDetailPlugin;

package/es/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/es/core/viewer/components/plugins/ViewerPlugin.js

@@ -2,12 +2,12 @@ import _extends from "@babel/runtime/helpers/extends";
 import React from 'react';
 import ResourceWebControllUrlSettingDialog from "./ResourceWebControllUrlSettingDialog";
 import MetricPollingPlugin from "./MetricPollingPlugin";
-import BaseInfo from "./BaseInfo";
+import ResourceDetail from "./ResourceDetail";
 export default function ViewerPlugin(props) {
   var topo = props.topo,
       viewerProps = props.viewerProps;
   var store = topo.store;
-  var plugins = [MetricPollingPlugin, ResourceWebControllUrlSettingDialog, BaseInfo].concat((viewerProps === null || viewerProps === void 0 ? void 0 : viewerProps.plugins) || []);
+  var plugins = [MetricPollingPlugin, ResourceWebControllUrlSettingDialog, ResourceDetail].concat((viewerProps === null || viewerProps === void 0 ? void 0 : viewerProps.plugins) || []);
   return /*#__PURE__*/React.createElement(React.Fragment, null, plugins.map(function (Plugin, index) {
     return /*#__PURE__*/React.createElement(Plugin, _extends({
       key: index,

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

@@ -4,7 +4,7 @@ import React from "react";
 import EditButton from "./widgets/EditButton";
 import NodesDragSwitch from "./widgets/NodesDragSwitch";
 import AlarmListShowButton from "./widgets/AlarmListShowButton";
-import SettingButton from "./widgets/SettingButton";
+import SettingButton from "./widgets/SettingButtonWidget";
 export default function BasicTools(props) {
   var topo = props.topo,
       _props$showEditButton = props.showEditButton,

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

@@ -1,6 +1,6 @@
 import _Button from "@alifd/next/es/button";
 import _Icon from "@alifd/next/es/icon";
-import React, { useEffect, useState } from 'react';
+import React, { useState } from 'react';
 import DisplaySettingDrawer from "../../../../components/DisplaySettingDrawer";
 /**
  * 设置按钮
@@ -10,9 +10,8 @@ import DisplaySettingDrawer from "../../../../components/DisplaySettingDrawer";
 
 export default function SettingButton(props) {
   var topo = props.topo,
-      viewerProps = props.viewerProps,
+      displaySettingProps = props.displaySettingProps,
       style = props.style;
-  var id = topo.id;
 
   var _useState = useState(false),
       visible = _useState[0],
@@ -30,7 +29,7 @@ export default function SettingButton(props) {
   })), /*#__PURE__*/React.createElement(DisplaySettingDrawer, {
     visible: visible,
     topo: topo,
-    viewerProps: viewerProps,
+    displaySettingProps: displaySettingProps,
     onClose: function onClose() {
       setVisible(false);
     }

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

@@ -0,0 +1,19 @@
+import React from 'react';
+import SettingButton from "./SettingButton";
+/**
+ * 设置按钮
+ *
+ * @return {any}
+ */
+
+export default function SettingButtonWidget(props) {
+  var topo = props.topo,
+      viewerProps = props.viewerProps,
+      style = props.style;
+  return /*#__PURE__*/React.createElement(SettingButton, {
+    topo: topo,
+    displaySettingProps: viewerProps === null || viewerProps === void 0 ? void 0 : viewerProps.displaySettingProps,
+    style: style
+  });
+}
+;

package/es/topoCenter/components/TopoView.js

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

package/es/topoCenter/models/TopoCenter.js

@@ -23,12 +23,16 @@ var TopoCenter = /*#__PURE__*/function (_TopoApp) {
     }, options, {
       usePermission: true,
       storeModels: _extends({}, customStoreModels, options.storeModels),
-      // 默认链路标注/悬浮框显示配置
-      defaultLinkTagTipConfig: {
-        tag: DEFAULT_LINK_TAG_COMMON_CONFIG,
-        tip: DEFAULT_TIP_COMMON_CONFIG
+      tagTip: {
+        // 默认链路标注/悬浮框显示配置
+        getDefaultLinkTagConfig: function getDefaultLinkTagConfig() {
+          return DEFAULT_LINK_TAG_COMMON_CONFIG;
+        },
+        getDefaultLinkTipConfig: function getDefaultLinkTipConfig() {
+          return DEFAULT_TIP_COMMON_CONFIG;
+        },
+        ExtElementTagTipBuilder: LinkTagsTipsBuilder
       },
-      ExtElementTagTipBuilder: LinkTagsTipsBuilder,
       onSwitchToEditModeBegin: function () {
         var _onSwitchToEditModeBegin = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee(topo) {
           var topoDispatchers;

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

@@ -37,16 +37,15 @@ function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj &&
  */
 function DisplaySetting(props, ref) {
   var topo = props.topo,
-      viewerProps = props.viewerProps;
+      displaySettingProps = props.displaySettingProps;
   var displayConfig = topo.store.getModelState('displayConfig');
 
-  var _ref = (viewerProps === null || viewerProps === void 0 ? void 0 : viewerProps.displaySettingDrawerProps) || {},
+  var _ref = displaySettingProps || {},
       linkTagConfig = _ref.linkTagConfig,
       linkTipConfig = _ref.linkTipConfig,
       showEdgeExpandConfig = _ref.showEdgeExpandConfig,
-      extraConfig = _ref.extraConfig;
-
-  var showLinkConfig = !!(viewerProps !== null && viewerProps !== void 0 && viewerProps.showLinkConfig);
+      extraConfig = _ref.extraConfig,
+      showLinkConfig = _ref.showLinkConfig;
 
   var field = _field["default"].useField({
     autoUnmount: false,

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

@@ -28,7 +28,7 @@ function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj &&
 function DisplaySettingDrawer(props) {
   var visible = props.visible,
       topo = props.topo,
-      viewerProps = props.viewerProps,
+      displaySettingProps = props.displaySettingProps,
       onClose = props.onClose;
   var settingRef = (0, _react.useRef)();
 
@@ -95,7 +95,7 @@ function DisplaySettingDrawer(props) {
   }, visible && /*#__PURE__*/_react["default"].createElement(_DisplaySetting["default"], {
     ref: settingRef,
     topo: topo,
-    viewerProps: viewerProps
+    displaySettingProps: displaySettingProps
   }));
 }