@riil-frontend/component-topology 9.0.0-a.26 → 9.0.0-a.28

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

@@ -1,7 +1,10 @@
 import React, { useEffect } from 'react';
+import classNames from 'classnames';
 import useCanvasTheme from "../../hooks/useCanvasTheme";
 import styles from "./TopoView.module.scss";
 export default function GraphViewPanel(props) {
+  var _classNames;
+
   var topo = props.topo,
       hideBackgroundColor = props.hideBackgroundColor;
   var displayConfig = topo.store.useModelState('displayConfig');
@@ -30,9 +33,11 @@ export default function GraphViewPanel(props) {
   };
 
   return /*#__PURE__*/React.createElement("div", {
-    className: styles.viewPanel,
-    style: {
-      background: canvasColor || "url(" + canvasbackgroundImage + ")"
+    className: classNames(styles.viewPanel, (_classNames = {}, _classNames[styles.backgroundImg] = !!canvasbackgroundImage, _classNames)),
+    style: canvasColor ? {
+      background: canvasColor
+    } : {
+      backgroundImage: "url(" + canvasbackgroundImage + ")"
     },
     onFocus: onFocus
   }, props.children);

package/es/core/components/TopoView/TopoView.module.scss

@@ -10,14 +10,28 @@
   flex: 1;
   overflow: hidden;
   position: relative;
+
+  &.backgroundImg {
+    /* 背景图垂直、水平均居中 */
+    background-position: center center;
+    /* 背景图不平铺 */
+    background-repeat: no-repeat;
+    /* 当内容高度大于图片高度时，背景图像的位置相对于viewport固定 */
+    background-attachment: fixed;
+    /* 让背景图基于容器大小伸缩 */
+    background-size: cover;
+    /* 设置背景颜色，背景图加载过程中会显示背景色 */
+    // background-color: #464646;
+  }
 }
 
 // 解决拓扑图容器绝对定位z-index>0时浮层和右键菜单不显示问题
 :global {
-  body > .ht-ui-view {
+  body>.ht-ui-view {
     z-index: 10000;
   }
-  body > div[ht="ht-view ht.ui.ContextMenu"] {
+
+  body>div[ht="ht-view ht.ui.ContextMenu"] {
     z-index: 1000;
   }
-}
+}

package/es/core/editor/components/Toolbar/widgets/EdgeTypeButton/EdgeType.js

@@ -1,7 +1,8 @@
+import _Checkbox from "@alifd/next/es/checkbox";
 import _Field from "@alifd/next/es/field";
 import _Select from "@alifd/next/es/select";
 import _Form from "@alifd/next/es/form";
-import React, { useEffect } from 'react';
+import React, { useEffect, useState } from 'react';
 import { getEdgesBySelection, loopEdgesAndChildren } from "../../../../utils/edgeTypeStyleUtil";
 import styles from "./EdgeType.module.scss";
 import LineType from "./LineType";
@@ -76,10 +77,12 @@ function getValuesByEdges(topo) {
     })[0] || 'nil';
   }
 
-  function getEdgesValues(edges) {
+  function getEdgesValues(edges, topo) {
     var edgeValues = [];
+    var htTopo = topo.getHtTopo();
     edges.forEach(function (edge) {
       edgeValues.push({
+        baseAgreement: htTopo.getEdgeMultarc(edges),
         lineButton: edge.s('edge.type'),
         startPoint: getStartPoint(edge),
         endPoint: getEndPoint(edge),
@@ -90,8 +93,9 @@ function getValuesByEdges(topo) {
   }
 
   var selectionEdges = getEdgesBySelection(topo);
-  var edgeValues = getEdgesValues(selectionEdges);
+  var edgeValues = getEdgesValues(selectionEdges, topo);
   var values = {
+    baseAgreement: false,
     lineButton: undefined,
     startPoint: undefined,
     endPoint: undefined,
@@ -117,10 +121,18 @@ function EdgeType(props) {
       selection = props.selection,
       _onChange = props.onChange;
 
+  var _useState = useState(false),
+      disable = _useState[0],
+      setDisabel = _useState[1];
+
   var field = _Field.useField({
     autoUnmount: false,
     values: getValuesByEdges(topo),
     onChange: function onChange(name, value) {
+      if (name == 'baseAgreement') {
+        setDisabel(value);
+      }
+
       if (['startPoint', 'endPoint'].includes(name) && value === 'nil') {
         _onChange(name, null);
       } else {
@@ -139,8 +151,12 @@ function EdgeType(props) {
     inline: true,
     labelAlign: "top"
   }, /*#__PURE__*/React.createElement(FormItem, null, /*#__PURE__*/React.createElement(LineType, {
-    name: "lineButton"
-  })), /*#__PURE__*/React.createElement(FormItem, {
+    name: "lineButton",
+    disable: disable
+  })), /*#__PURE__*/React.createElement(FormItem, null, /*#__PURE__*/React.createElement(_Checkbox, {
+    name: "baseAgreement",
+    onChange: _onChange
+  }, "\u81EA\u52A8\u8C03\u6574")), /*#__PURE__*/React.createElement(FormItem, {
     label: "\u8D77\u70B9"
   }, /*#__PURE__*/React.createElement(_Select, {
     name: "startPoint",

package/es/core/editor/components/Toolbar/widgets/EdgeTypeButton/EdgeType.module.scss

@@ -5,7 +5,6 @@
   background: #FFFFFF;
   border-radius: 4px;
   margin-bottom: -7px;
-
   :global {
     .#{$css-prefix}form-item:first-child{
       margin-top: 0;
@@ -15,6 +14,11 @@
       margin-top: 7px;
       margin-bottom: 7px;
     }
+    .#{$css-prefix}form-item:nth-child(2){
+      display: block !important;
+      margin-top: 7px;
+      margin-bottom: 0px;
+    }
     .#{$css-prefix}form.#{$css-prefix}inline .#{$css-prefix}form-item:not(:last-child) {
       margin-right: 8px;
       .#{$css-prefix}select-trigger {

package/es/core/editor/components/Toolbar/widgets/EdgeTypeButton/LineType.js

@@ -20,28 +20,47 @@ var LINE_TYPE_OPTIONS = [{
   value: 'ortho',
   label: '双折线',
   icon: 'topo_linear_icon_bilinear'
+}, {
+  value: 'arc',
+  label: '单弧线',
+  icon: 'topo_linear_icon_arc_line'
 }, {
   value: 'doublearc',
   label: '双弧线',
   icon: 'topo_linear_icon_arcline'
+}, {
+  value: 'points',
+  label: '自由线形',
+  icon: 'topo_linear_icon_pointsline'
 }];
 var LineType = /*#__PURE__*/React.forwardRef(function (props, ref) {
   var value = props.value,
-      onChange = props.onChange;
+      onChange = props.onChange,
+      disable = props.disable;
 
   function lineButton(item) {
-    var _classNames;
+    if (disable) {
+      return /*#__PURE__*/React.createElement(_Button, {
+        className: styles.redioBtnDisable
+      }, /*#__PURE__*/React.createElement("img", {
+        src: "/img/topo/editor/lineType/" + item.icon + "_disable.svg",
+        alt: "",
+        className: styles.iconImg
+      }));
+    } else {
+      var _classNames;
 
-    return /*#__PURE__*/React.createElement(_Button, {
-      className: classNames(styles.redioBtn, (_classNames = {}, _classNames[styles.selected] = value === item.value, _classNames)),
-      onClick: function onClick() {
-        onChange(item.value);
-      }
-    }, /*#__PURE__*/React.createElement("img", {
-      src: "/img/topo/editor/lineType/" + item.icon + ".svg",
-      alt: "",
-      className: styles.iconImg
-    }));
+      return /*#__PURE__*/React.createElement(_Button, {
+        className: classNames(styles.redioBtn, (_classNames = {}, _classNames[styles.selected] = value === item.value, _classNames)),
+        onClick: function onClick() {
+          onChange(item.value);
+        }
+      }, /*#__PURE__*/React.createElement("img", {
+        src: "/img/topo/editor/lineType/" + item.icon + ".svg",
+        alt: "",
+        className: styles.iconImg
+      }));
+    }
   }
 
   return /*#__PURE__*/React.createElement("div", {

package/es/core/editor/components/Toolbar/widgets/EdgeTypeButton/LineType.module.scss

@@ -1,5 +1,15 @@
 .lineType{
   display:flex;
+  .redioBtnDisable {
+    width: 24px;
+    height: 24px;
+    border-radius: 4px;
+    border: none !important;
+    color: #4D6277;
+    padding: 0;
+    margin-right: 10px;
+    text-align: center;
+  }
   .redioBtn {
     width: 24px;
     height: 24px;
@@ -7,9 +17,9 @@
     border: none !important;
     color: #4D6277;
     padding: 0;
-    margin-right: 16px;
+    margin-right: 10px;
     text-align: center;
-
+  
     .iconImg {
       vertical-align: middle;
     }

package/es/core/editor/components/Toolbar/widgets/EdgeTypeButton/index.js

@@ -49,6 +49,12 @@ function EdgeTypeButton(props) {
       return;
     }
 
+    if (name == 'baseAgreement') {
+      /** TODO: 自动调整api调用*/
+      htTopo.setEdgeMultarc(edges, value);
+      return;
+    }
+
     setEdgesAndChildren(topo, edges, function (edge) {
       if (name === 'startPoint') {
         // 删除设置

package/es/core/editor/components/settings/propertyViews/group/DataTab/hoooks/useGroupRelateResource.js

@@ -1,8 +1,7 @@
 import _extends from "@babel/runtime/helpers/extends";
 import { iconFactory } from "@riil-frontend/component-topology-graph";
 import sortBy from "lodash/sortBy";
-import { getGroupChildrenResourceElements } from "../../../../../../../../utils/htElementDataUtil";
-import { getNodeData } from "../../../../../../../../utils/htElementUtils";
+import { getGroupChildren, getNodeData } from "../../../../../../../../utils/htElementUtils";
 
 function sortResourcesByName(resources) {
   return sortBy(resources, "name");
@@ -19,7 +18,9 @@ export default function useGroupRelateResource(props) {
   } : _props$useGroupSortRe; // const [resources, setResources] = useState([]);
   // 过滤出资源
 
-  var resourceNodes = getGroupChildrenResourceElements(group); // 资源按名称排序
+  var resourceNodes = getGroupChildren(group).filter(function (item) {
+    return !!item.getTag();
+  }); // 资源按名称排序
 
   var useSortNodes = useGroupSortResources || ((_topo$options$editor = topo.options.editor) === null || _topo$options$editor === void 0 ? void 0 : _topo$options$editor.sortResources) || sortResourcesByName;
   var data = useSortNodes(resourceNodes.map(function (node) {

package/es/core/editor/components/settings/propertyViews/node/data/BindIpInput.js

@@ -38,7 +38,6 @@ export default function BindIpInput(props) {
       if (errors) {
         console.error("saveIp-error", errors, vals);
       } else {
-        // console.log("saveIp", txtValue);
         setError("");
         onChange(txtValue);
         topoEditApi.relateNodeIp(txtValue, nodeElement);
@@ -58,13 +57,6 @@ export default function BindIpInput(props) {
 
   var checkIp = function checkIp(rule, value, callback) {
     var dm = topo.getDataModel();
-    var rex = /^((25[0-5]|2[0-4]\d|((1\d{2})|([1-9]?\d)))\.){3}(25[0-5]|2[0-4]\d|((1\d{2})|([1-9]?\d)))$/;
-    var reg = value.match(rex);
-
-    if (reg === null) {
-      return callback();
-    }
-
     var isUnique = isUniqueIp(dm, value, nodeElement); // console.log("checkIp", isUnique);
 
     if (!isUnique) {

package/es/core/hooks/useCanvasTheme.js

@@ -60,6 +60,7 @@ export default function useCanvasTheme(props) {
     if (graphLoaded) {
       try {
         topo.getHtTopo().getGraphView().dm().setBackground(canvasColor);
+        topo.getHtTopo().getGraphView().dm().setBackground(canvasbackgroundImage);
       } catch (error) {
         console.error('切换主题失败', error);
       }

package/es/core/hooks/useTopoEdit.js

@@ -8,15 +8,14 @@ import _ from "lodash";
 import rlog from "@riil-frontend/component-topology-utils/es/rlog";
 import { TopoEvent } from "@riil-frontend/component-topology-graph";
 import { TPL_BLANK, TPL_TREE } from "../../utils/template";
-import topoPermissonUtil from "../../utils/topoPermissionUtil";
-import { getElements, getGroupElementByTag, isEdge, isExistedElement, isGroup, isLayer, isNode, getNodes } from "../../utils/htElementUtils";
+import { getGroupElementByTag, isEdge, isExistedElement, isGroup, isLayer, isNode, getNodes, getGroupChildren } from "../../utils/htElementUtils";
 import useResourceConfig from "./useResourceConfig";
 import useGroupAddResource from "./useGroupAddResource";
 import { findGroupChildren } from "../../utils/topoData";
-import { getGroupChildrenResourceElements } from "../../utils/htElementDataUtil";
+import { isResourceElement } from "../../utils/htElementDataUtil";
 import { isClusterHtElement, isClusterMemberHtElement } from "../../utils/clusterUtil";
 import { mergeExportLinkData } from "../models/utils/linkUtils";
-import { isUniqueIp } from "../../networkTopo/utils/exitLinkUtil";
+import { isUniqueIp, buildIpNode } from "../../networkTopo/utils/exitLinkUtil";
 
 var useTopoEdit = function useTopoEdit(params) {
   var topo = params.topo,
@@ -223,7 +222,7 @@ var useTopoEdit = function useTopoEdit(params) {
       return;
     }
 
-    if (!getGroupChildrenResourceElements(group).length || isClusterHtElement(group)) {
+    if (!getGroupChildren(group).filter(isResourceElement).length || isClusterHtElement(group)) {
       doDelete();
       return;
     } // 有子节点时需要确认
@@ -974,42 +973,23 @@ var useTopoEdit = function useTopoEdit(params) {
 
   function _relateNodeIp() {
     _relateNodeIp = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee16(txtValue, nodeElement) {
-      var dm, htTopo, elementNodes, isUnique, ids, ip, configObj, configData, _elements, newLinkElements, createElementsData;
+      var dm, htTopo, elementNodes, isUnique, ip, configObj, configData, _elements, newLinkElements, createElementsData;
 
       return _regeneratorRuntime.wrap(function _callee16$(_context16) {
         while (1) {
           switch (_context16.prev = _context16.next) {
             case 0:
-              // console.log("bindIPtoNode", data);
+              // console.log("bindIPtoNode", txtValue, nodeElement);
               // 根据配置查询拓扑数据
               dm = topo.getDataModel();
               htTopo = topo.getHtTopo();
               elementNodes = getNodes(dm); // 执行唯一性验证
 
               isUnique = isUniqueIp(dm, txtValue, nodeElement);
-              ids = [];
-              elementNodes.map(function (element) {
-                if (element.getTag()) {
-                  ids.push(element.getTag());
-                }
-              });
-              ip = {
-                id: "ip:" + txtValue,
-                name: txtValue,
-                customName: null,
-                bindType: "ip",
-                // 'groupId': null,
-                // 'groupTag': null,
-                ipAddress: txtValue,
-                // 'attributes': [],
-                // 'metrics': [],
-                type: "node",
-                isbinding: true // 'dtype': 'device'
-
-              }; // 获取关联链路
+              ip = buildIpNode(txtValue); // 获取关联链路
 
               if (!isUnique) {
-                _context16.next = 23;
+                _context16.next = 21;
                 break;
               }
 
@@ -1018,19 +998,17 @@ var useTopoEdit = function useTopoEdit(params) {
               nodeElement.setName(txtValue);
               nodeElement.setTag("ip:" + txtValue); // 获取配置
 
-              configObj = topo.resourceConfig.getConfig(); // console.log("configObj", configObj);
-              // configObj.linkIps = [...(configObj.linkIps ?? []), txtValue];
-              // console.log("configObj---over", configObj);
-
-              _context16.next = 15;
+              configObj = topo.resourceConfig.getConfig();
+              _context16.next = 13;
               return resourceConfig.updateConfig(configObj);
 
-            case 15:
-              _context16.next = 17;
+            case 13:
+              _context16.next = 15;
               return editDispatchers.fetchDataByConfig();
 
-            case 17:
+            case 15:
               configData = _context16.sent;
+              // console.log("configData", configData);
               _elements = configData.elements;
               newLinkElements = findUNExistedLinkElements(_elements);
               createElementsData = {
@@ -1046,7 +1024,7 @@ var useTopoEdit = function useTopoEdit(params) {
               console.log("createElementsData", createElementsData);
               htTopo.createElements(createElementsData);
 
-            case 23:
+            case 21:
             case "end":
               return _context16.stop();
           }

package/es/core/models/TopoApp.js

@@ -24,7 +24,7 @@ import ElementTagTipConfig from "./tagstips/ElementTagTipConfig";
 import SelectionModel from "./SelectionModel";
 import CiCache from "./cache/CiCache"; // eslint-disable-next-line no-undef
 
-var version = typeof "9.0.0-a.26" === 'string' ? "9.0.0-a.26" : null;
+var version = typeof "9.0.0-a.28" === 'string' ? "9.0.0-a.28" : null;
 console.info("\u62D3\u6251\u7248\u672C: " + version);
 /**
  * 拓扑显示和编辑

package/es/core/store/models/topoConfig.js

@@ -253,6 +253,7 @@ export default function (topoApp) {
                   case 0:
                     editState = rootState.topoConfig;
                     resources = editState.resources, _editState$groups = editState.groups, groups = _editState$groups === void 0 ? [] : _editState$groups, _editState$exportLink = editState.exportLinkIdList, exportLinkIdList = _editState$exportLink === void 0 ? [] : _editState$exportLink, _editState$ipNodes = editState.ipNodes, ipNodes = _editState$ipNodes === void 0 ? [] : _editState$ipNodes;
+                    console.log("editState", editState);
                     query = {
                       id: rootState.topoMod.topoId,
                       resources: resources,
@@ -260,10 +261,10 @@ export default function (topoApp) {
                       exportLinkIdList: exportLinkIdList,
                       ipNodes: ipNodes
                     };
-                    _context2.next = 5;
+                    _context2.next = 6;
                     return _this2.getTopoByConditions(query);
 
-                  case 5:
+                  case 6:
                     data = _context2.sent;
                     rlog.debug("按配置查询拓扑数据", {
                       config: {
@@ -274,7 +275,7 @@ export default function (topoApp) {
                     });
                     return _context2.abrupt("return", data);
 
-                  case 8:
+                  case 9:
                   case "end":
                     return _context2.stop();
                 }
@@ -316,7 +317,7 @@ export default function (topoApp) {
               while (1) {
                 switch (_context4.prev = _context4.next) {
                   case 0:
-                    // rlog.debug("getTopoByConditions--------", params);
+                    rlog.debug("getTopoByConditions--------", params);
                     topoId = params.id, resources = params.resources, groups = params.groups, exportLinkIdList = params.exportLinkIdList, ipNodes = params.ipNodes;
                     viewConditions = resToConditions(resources);
                     groupInfo = isAvailableArray(groups) && groups.map(function (group) {
@@ -326,21 +327,21 @@ export default function (topoApp) {
                       });
                     });
                     rlog.debug("getTopoByConditions--------", viewConditions, groupInfo);
-                    _context4.next = 6;
+                    _context4.next = 7;
                     return topoApp.serverApi.getTopoDataByResource(topoId, viewConditions, groupInfo, exportLinkIdList, ipNodes);
 
-                  case 6:
+                  case 7:
                     data = _context4.sent;
                     rlog.debug("getTopoByConditions--------data", data);
-                    _context4.next = 10;
+                    _context4.next = 11;
                     return buildTopoData(data);
 
-                  case 10:
+                  case 11:
                     data = _context4.sent;
-                    _context4.next = 13;
+                    _context4.next = 14;
                     return Promise.all([addLinkData(data), topoApp.ciTyeCache.getCiTypeMap(getCiTypes(data)), dispatch.customIcon.loadCustomIcons()]);
 
-                  case 13:
+                  case 14:
                     _yield$Promise$all = _context4.sent;
                     dataWithLinkDetail = _yield$Promise$all[0];
                     _combTopoData = combTopoData({
@@ -367,7 +368,7 @@ export default function (topoApp) {
                       topoDataTrans: topoDataTrans
                     });
 
-                  case 21:
+                  case 22:
                   case "end":
                     return _context4.stop();
                 }

package/es/networkTopo/utils/exitLinkUtil.js

@@ -12,14 +12,14 @@ function isPingHtNode(node, ip) {
 }
 
 function isIpHtNode(node, ip) {
-  return node.a('bindType') === ip && node.a('ipAddress') === ip;
+  return node.a("bindType") === 'ip' && node.a("bindIp") === ip;
 }
 
-function buildIpNode(ip) {
+export function buildIpNode(ip) {
   return {
-    'id': "ip:" + ip,
-    'name': ip,
-    bindType: 'ip',
+    id: "ip:" + ip,
+    name: ip,
+    bindType: "ip",
     // 绑定资源类型。关联资源 值为空，关联IP ip
     bindIp: ip,
     // TODO 所属区域，从序列化拿
@@ -49,11 +49,26 @@ function isExitLink(link) {
 
 export function isUniqueIp(dataModel, ip, nodeElement) {
   var nodes = getNodes(dataModel);
-  var isUnique = !!nodes.filter(function (node) {
-    return node.getId() !== nodeElement.getId();
-  }).filter(function (node) {
-    return isPingHtNode(node, ip) || isIpHtNode(node, ip);
-  });
+  var isUnique = true;
+  console.log("nodes-nodeElement", nodes, nodeElement);
+
+  if (nodeElement) {
+    console.log("nodes-nodeElement---filter", nodes.filter(function (node) {
+      return node.getId() !== (nodeElement === null || nodeElement === void 0 ? void 0 : nodeElement.getId());
+    }));
+    var arr = nodes.filter(function (node) {
+      return node.getId() !== (nodeElement === null || nodeElement === void 0 ? void 0 : nodeElement.getId());
+    }).filter(function (node) {
+      return isPingHtNode(node, ip) || isIpHtNode(node, ip);
+    });
+    isUnique = arr.length === 0;
+    console.log("nodes-nodeElement---filter", arr, isUnique);
+  } else {
+    isUnique = nodes.filter(function (node) {
+      return node.a("ipAddress") === ip;
+    }).length === 0;
+  }
+
   return isUnique;
 }
 /**

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

@@ -7,6 +7,8 @@ exports["default"] = GraphViewPanel;
 
 var _react = _interopRequireWildcard(require("react"));
 
+var _classnames = _interopRequireDefault(require("classnames"));
+
 var _useCanvasTheme2 = _interopRequireDefault(require("../../hooks/useCanvasTheme"));
 
 var _TopoViewModule = _interopRequireDefault(require("./TopoView.module.scss"));
@@ -16,6 +18,8 @@ function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "functio
 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 _classNames;
+
   var topo = props.topo,
       hideBackgroundColor = props.hideBackgroundColor;
   var displayConfig = topo.store.useModelState('displayConfig');
@@ -44,9 +48,11 @@ function GraphViewPanel(props) {
   };
 
   return /*#__PURE__*/_react["default"].createElement("div", {
-    className: _TopoViewModule["default"].viewPanel,
-    style: {
-      background: canvasColor || "url(" + canvasbackgroundImage + ")"
+    className: (0, _classnames["default"])(_TopoViewModule["default"].viewPanel, (_classNames = {}, _classNames[_TopoViewModule["default"].backgroundImg] = !!canvasbackgroundImage, _classNames)),
+    style: canvasColor ? {
+      background: canvasColor
+    } : {
+      backgroundImage: "url(" + canvasbackgroundImage + ")"
     },
     onFocus: onFocus
   }, props.children);

package/lib/core/components/TopoView/TopoView.module.scss

@@ -10,14 +10,28 @@
   flex: 1;
   overflow: hidden;
   position: relative;
+
+  &.backgroundImg {
+    /* 背景图垂直、水平均居中 */
+    background-position: center center;
+    /* 背景图不平铺 */
+    background-repeat: no-repeat;
+    /* 当内容高度大于图片高度时，背景图像的位置相对于viewport固定 */
+    background-attachment: fixed;
+    /* 让背景图基于容器大小伸缩 */
+    background-size: cover;
+    /* 设置背景颜色，背景图加载过程中会显示背景色 */
+    // background-color: #464646;
+  }
 }
 
 // 解决拓扑图容器绝对定位z-index>0时浮层和右键菜单不显示问题
 :global {
-  body > .ht-ui-view {
+  body>.ht-ui-view {
     z-index: 10000;
   }
-  body > div[ht="ht-view ht.ui.ContextMenu"] {
+
+  body>div[ht="ht-view ht.ui.ContextMenu"] {
     z-index: 1000;
   }
-}
+}