@riil-frontend/component-topology 3.1.6 → 3.1.9

package/es/core/editor/components/settings/propertyViews/node/NodePropertyView.js

@@ -1,186 +1,51 @@
 import _Tab from "@alifd/next/es/tab";
-import _Input from "@alifd/next/es/input";
-import _Form from "@alifd/next/es/form";
-import _Field from "@alifd/next/es/field";
 import _extends from "@babel/runtime/helpers/extends";
-import _Collapse from "@alifd/next/es/collapse";
-import _Select from "@alifd/next/es/select";
-import React, { useEffect } from 'react';
-import NodeSizeInput from "../../common/NodeSizeInput/NodeSizeInput";
-import textStyles from "../../../../../common/text.module.scss";
-import NodeIconSelect from "./NodeIconSelect";
-import NodeRelateResourceButton from "./data/NodeRelateResourceButton";
-import styles from "./NodePropertyView.module.scss";
-import TabView from "../../common/tab/TabView";
+import React from 'react';
 import useHtElement from "../../../../../common/hooks/useHtElement";
-var Option = _Select.Option;
-var CollapsePanel = _Collapse.Panel;
-
-function parseValues(values) {
-  return _extends({}, values, {
-    'attrObject.customName': values['attrObject.customName'] || values['attrObject.name'],
-    'attrObject.bindTopo': values['attrObject.bindTopo'] || '' // 解决切换节点时关联拓扑选项未重置
-
-  });
-}
-
-function getBindType(values) {
-  if (values.tag) {
-    return 'resource';
-  }
-
-  if (values.attrObject.bindType) {
-    return values.attrObject.bindType;
-  }
-
-  return 'none';
-}
-
+import TabView from "../../common/tab/TabView";
+import Data from "./data/Data";
+import styles from "./NodePropertyView.module.scss";
+import Setting from "./Setting";
 export default function NodePropertyView(props) {
   var _topo$options$editor;
 
   var topo = props.topo,
       topoEditApi = props.topoEditApi,
       values = props.values,
-      _onChange = props.onChange,
+      onChange = props.onChange,
       editorProps = props.editorProps,
       settingRuntimeState = props.settingRuntimeState;
-  var bindType = getBindType(values);
   var node = useHtElement({
     topo: topo,
     id: values.id
   });
 
-  var field = _Field.useField({
-    autoUnmount: false,
-    values: parseValues(values),
-    onChange: function onChange(name, value) {
-      var newValues = field.getValues();
-
-      _onChange(name, value, newValues);
-    }
-  });
-
-  useEffect(function () {
-    field.setValues(parseValues(values));
-  }, [values]);
-
-  var setBindType = function setBindType(newBindType) {
-    _onChange('attrObject.bindType', newBindType);
-
-    if (newBindType === 'topo') {//
-    }
-  };
-
-  var handleBindTopoChange = function handleBindTopoChange(value, data) {
-    // 设置名称为拓扑名称，清空自定义名称
-    node.a('name', data.label);
-    node.a('customName', null);
-  };
-
   var renderData = function renderData() {
-    var RelateTopoTree = editorProps === null || editorProps === void 0 ? void 0 : editorProps.relateTopoTree;
-    return /*#__PURE__*/React.createElement(_Collapse, {
-      defaultExpandedKeys: ['相关资源'],
-      style: {
-        border: 'none'
-      }
-    }, /*#__PURE__*/React.createElement(CollapsePanel, {
-      key: "\u76F8\u5173\u8D44\u6E90",
-      title: "\u76F8\u5173\u8D44\u6E90"
-    }, /*#__PURE__*/React.createElement(_Form, {
-      field: field,
-      labelAlign: "top"
-    }, !values.tag && /*#__PURE__*/React.createElement(_Form.Item, {
-      label: "\u5173\u8054\u7C7B\u578B"
-    }, /*#__PURE__*/React.createElement(_Select, {
-      name: "bindType",
-      value: bindType,
-      style: {
-        width: '100%',
-        marginRight: 8
-      },
-      onChange: setBindType
-    }, /*#__PURE__*/React.createElement(Option, {
-      value: "none"
-    }, "\u672A\u5173\u8054"), /*#__PURE__*/React.createElement(Option, {
-      value: "resource"
-    }, "\u5173\u8054\u8D44\u6E90"), RelateTopoTree && /*#__PURE__*/React.createElement(Option, {
-      value: "topo"
-    }, "\u5173\u8054\u62D3\u6251"))), bindType === 'resource' && /*#__PURE__*/React.createElement(_Form.Item, {
-      label: "\u5173\u8054\u8D44\u6E90"
-    }, /*#__PURE__*/React.createElement("div", {
-      style: {
-        display: 'flex'
-      }
-    }, /*#__PURE__*/React.createElement("div", {
-      className: textStyles.textEllipsis,
-      style: {
-        flex: 1,
-        paddingRight: 16,
-        color: '#4D6277'
-      },
-      title: values.tag ? values.name : null
-    }, values.tag ? values.name : '—'), /*#__PURE__*/React.createElement(NodeRelateResourceButton, {
-      node: values,
-      topo: topo,
-      topoEditApi: topoEditApi
-    }))), bindType === 'topo' && RelateTopoTree && /*#__PURE__*/React.createElement(_Form.Item, {
-      label: "\u5173\u8054\u62D3\u6251"
-    }, /*#__PURE__*/React.createElement(RelateTopoTree, {
-      name: "attrObject.bindTopo",
-      topo: topo,
-      onChange: handleBindTopoChange
-    })))));
+    return /*#__PURE__*/React.createElement(Data, props);
   };
 
-  var renderViewSetting = function renderViewSetting() {
-    return /*#__PURE__*/React.createElement(_Form, {
-      field: field,
-      labelAlign: "top"
-    }, /*#__PURE__*/React.createElement(_Form.Item, null, /*#__PURE__*/React.createElement(_Collapse, {
-      defaultExpandedKeys: ['显示设置'],
-      style: {
-        border: 'none'
-      }
-    }, /*#__PURE__*/React.createElement(CollapsePanel, {
-      key: "\u663E\u793A\u8BBE\u7F6E",
-      title: "\u663E\u793A\u8BBE\u7F6E"
-    }, /*#__PURE__*/React.createElement(_Form.Item, {
-      label: "\u56FE\u7247\u540D\u79F0"
-    }, /*#__PURE__*/React.createElement(_Input, {
-      name: "attrObject.customName"
-    })), /*#__PURE__*/React.createElement(_Form.Item, {
-      label: "\u663E\u793A\u56FE\u7247"
-    }, /*#__PURE__*/React.createElement(NodeIconSelect, {
-      name: "image",
-      topo: topo
-    })), /*#__PURE__*/React.createElement(_Form.Item, {
-      label: "\u56FE\u7247\u5C3A\u5BF8"
-    }, /*#__PURE__*/React.createElement(NodeSizeInput, {
-      node: values.id,
-      value: {
-        width: values.width,
-        height: values.height
-      },
-      onChange: function onChange(size) {
-        _onChange('width', size.width);
-
-        _onChange('height', size.height);
-      },
-      settingRuntimeState: settingRuntimeState
-    }))))));
+  var renderSetting = function renderSetting() {
+    var nodeSettingViewProps = editorProps.nodeSettingViewProps;
+    return /*#__PURE__*/React.createElement(Setting, _extends({}, props, nodeSettingViewProps));
   }; // 未绑定资源的节点，根据参数控制是否可关联资源
 
 
   var showRelateResource = !!values.tag || !values.tag && ((_topo$options$editor = topo.options.editor) === null || _topo$options$editor === void 0 ? void 0 : _topo$options$editor.enableRelateResource) !== false;
+  var content;
+
+  if (showRelateResource) {
+    content = /*#__PURE__*/React.createElement(TabView, null, /*#__PURE__*/React.createElement(_Tab.Item, {
+      title: "\u6570\u636E",
+      key: "1"
+    }, renderData()), /*#__PURE__*/React.createElement(_Tab.Item, {
+      title: "\u8BBE\u7F6E",
+      key: "2"
+    }, renderSetting()));
+  } else {
+    content = renderSetting();
+  }
+
   return /*#__PURE__*/React.createElement("div", {
     className: styles.NodePropertyView
-  }, showRelateResource ? /*#__PURE__*/React.createElement(TabView, null, /*#__PURE__*/React.createElement(_Tab.Item, {
-    title: "\u6570\u636E",
-    key: "1"
-  }, renderData()), /*#__PURE__*/React.createElement(_Tab.Item, {
-    title: "\u8BBE\u7F6E",
-    key: "2"
-  }, renderViewSetting())) : renderViewSetting());
+  }, content);
 }

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

@@ -0,0 +1,76 @@
+import _Form from "@alifd/next/es/form";
+import _Input from "@alifd/next/es/input";
+import _Field from "@alifd/next/es/field";
+import _extends from "@babel/runtime/helpers/extends";
+import _Collapse from "@alifd/next/es/collapse";
+import React, { useEffect } from 'react';
+import NodeSizeInput from "../../../common/NodeSizeInput/NodeSizeInput";
+import NodeIconSelect from "../NodeIconSelect";
+var CollapsePanel = _Collapse.Panel;
+
+function parseValues(values) {
+  return _extends({}, values, {
+    'attrObject.customName': values['attrObject.customName'] || values['attrObject.name'],
+    'attrObject.bindTopo': values['attrObject.bindTopo'] || '' // 解决切换节点时关联拓扑选项未重置
+
+  });
+}
+
+export default function Setting(props) {
+  var topo = props.topo,
+      values = props.values,
+      _onChange = props.onChange,
+      editorProps = props.editorProps,
+      settingRuntimeState = props.settingRuntimeState,
+      _props$showImageSetti = props.showImageSetting,
+      showImageSetting = _props$showImageSetti === void 0 ? true : _props$showImageSetti;
+
+  var field = _Field.useField({
+    autoUnmount: false,
+    values: parseValues(values),
+    onChange: function onChange(name, value) {
+      var newValues = field.getValues();
+
+      _onChange(name, value, newValues);
+    }
+  });
+
+  useEffect(function () {
+    field.setValues(parseValues(values));
+  }, [values]);
+  return /*#__PURE__*/React.createElement(_Form, {
+    field: field,
+    labelAlign: "top"
+  }, /*#__PURE__*/React.createElement(_Form.Item, null, /*#__PURE__*/React.createElement(_Collapse, {
+    defaultExpandedKeys: ['显示设置'],
+    style: {
+      border: 'none'
+    }
+  }, /*#__PURE__*/React.createElement(CollapsePanel, {
+    key: "\u663E\u793A\u8BBE\u7F6E",
+    title: "\u663E\u793A\u8BBE\u7F6E"
+  }, /*#__PURE__*/React.createElement(_Form.Item, {
+    label: "\u56FE\u7247\u540D\u79F01"
+  }, /*#__PURE__*/React.createElement(_Input, {
+    name: "attrObject.customName"
+  })), showImageSetting && /*#__PURE__*/React.createElement(_Form.Item, {
+    label: "\u663E\u793A\u56FE\u7247"
+  }, /*#__PURE__*/React.createElement(NodeIconSelect, {
+    name: "image",
+    topo: topo
+  })), /*#__PURE__*/React.createElement(_Form.Item, {
+    label: "\u56FE\u7247\u5C3A\u5BF8"
+  }, /*#__PURE__*/React.createElement(NodeSizeInput, {
+    node: values.id,
+    value: {
+      width: values.width,
+      height: values.height
+    },
+    onChange: function onChange(size) {
+      _onChange('width', size.width);
+
+      _onChange('height', size.height);
+    },
+    settingRuntimeState: settingRuntimeState
+  }))))));
+}

package/es/core/editor/components/settings/propertyViews/node/Setting/index.js

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

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

@@ -0,0 +1,125 @@
+import _Form from "@alifd/next/es/form";
+import _Field from "@alifd/next/es/field";
+import _extends from "@babel/runtime/helpers/extends";
+import _Collapse from "@alifd/next/es/collapse";
+import _Select from "@alifd/next/es/select";
+import React, { useEffect } from 'react';
+import useHtElement from "../../../../../../common/hooks/useHtElement";
+import textStyles from "../../../../../../common/text.module.scss";
+import NodeRelateResourceButton from "./NodeRelateResourceButton";
+var Option = _Select.Option;
+var CollapsePanel = _Collapse.Panel;
+
+function parseValues(values) {
+  return _extends({}, values, {
+    'attrObject.customName': values['attrObject.customName'] || values['attrObject.name'],
+    'attrObject.bindTopo': values['attrObject.bindTopo'] || '' // 解决切换节点时关联拓扑选项未重置
+
+  });
+}
+
+function getBindType(values) {
+  if (values.tag) {
+    return 'resource';
+  }
+
+  if (values.attrObject.bindType) {
+    return values.attrObject.bindType;
+  }
+
+  return 'none';
+}
+
+export default function Data(props) {
+  var topo = props.topo,
+      topoEditApi = props.topoEditApi,
+      values = props.values,
+      _onChange = props.onChange,
+      editorProps = props.editorProps;
+  var bindType = getBindType(values);
+  var node = useHtElement({
+    topo: topo,
+    id: values.id
+  });
+
+  var field = _Field.useField({
+    autoUnmount: false,
+    values: parseValues(values),
+    onChange: function onChange(name, value) {
+      var newValues = field.getValues();
+
+      _onChange(name, value, newValues);
+    }
+  });
+
+  useEffect(function () {
+    field.setValues(parseValues(values));
+  }, [values]);
+
+  var setBindType = function setBindType(newBindType) {
+    _onChange('attrObject.bindType', newBindType);
+
+    if (newBindType === 'topo') {//
+    }
+  };
+
+  var handleBindTopoChange = function handleBindTopoChange(value, data) {
+    // 设置名称为拓扑名称，清空自定义名称
+    node.a('name', data.label);
+    node.a('customName', null);
+  };
+
+  var RelateTopoTree = editorProps === null || editorProps === void 0 ? void 0 : editorProps.relateTopoTree;
+  return /*#__PURE__*/React.createElement(_Collapse, {
+    defaultExpandedKeys: ['相关资源'],
+    style: {
+      border: 'none'
+    }
+  }, /*#__PURE__*/React.createElement(CollapsePanel, {
+    key: "\u76F8\u5173\u8D44\u6E90",
+    title: "\u76F8\u5173\u8D44\u6E90"
+  }, /*#__PURE__*/React.createElement(_Form, {
+    field: field,
+    labelAlign: "top"
+  }, !values.tag && /*#__PURE__*/React.createElement(_Form.Item, {
+    label: "\u5173\u8054\u7C7B\u578B"
+  }, /*#__PURE__*/React.createElement(_Select, {
+    name: "bindType",
+    value: bindType,
+    style: {
+      width: '100%',
+      marginRight: 8
+    },
+    onChange: setBindType
+  }, /*#__PURE__*/React.createElement(Option, {
+    value: "none"
+  }, "\u672A\u5173\u8054"), /*#__PURE__*/React.createElement(Option, {
+    value: "resource"
+  }, "\u5173\u8054\u8D44\u6E90"), RelateTopoTree && /*#__PURE__*/React.createElement(Option, {
+    value: "topo"
+  }, "\u5173\u8054\u62D3\u6251"))), bindType === 'resource' && /*#__PURE__*/React.createElement(_Form.Item, {
+    label: "\u5173\u8054\u8D44\u6E90"
+  }, /*#__PURE__*/React.createElement("div", {
+    style: {
+      display: 'flex'
+    }
+  }, /*#__PURE__*/React.createElement("div", {
+    className: textStyles.textEllipsis,
+    style: {
+      flex: 1,
+      paddingRight: 16,
+      color: '#4D6277'
+    },
+    title: values.tag ? values.name : null
+  }, values.tag ? values.name : '—'), /*#__PURE__*/React.createElement(NodeRelateResourceButton, {
+    node: values,
+    topo: topo,
+    topoEditApi: topoEditApi
+  }))), bindType === 'topo' && RelateTopoTree && /*#__PURE__*/React.createElement(_Form.Item, {
+    label: "\u5173\u8054\u62D3\u6251"
+  }, /*#__PURE__*/React.createElement(RelateTopoTree, {
+    name: "attrObject.bindTopo",
+    topo: topo,
+    onChange: handleBindTopoChange
+  })))));
+}

package/es/core/models/AttributeMetricDisplay.js

@@ -4,7 +4,7 @@ import _regeneratorRuntime from "@babel/runtime/regenerator";
 import topoServer from '@riil-frontend/component-topology-common/es/services/topo';
 import rlog from '@riil-frontend/component-topology-utils/es/rlog';
 import { keyBy } from 'lodash';
-import { DEFAULT_LINK_TAG_COMMON_CONFIG, DEFAULT_NODE_TAG_COMMON_CONFIG, DEFAULT_TAG_COMMON_CONFIG, DEFAULT_TIP_COMMON_CONFIG } from "../../constants/ResourceInfoDisplay";
+import { DEFAULT_NODE_TAG_COMMON_CONFIG, DEFAULT_TIP_COMMON_CONFIG } from "../../constants/ResourceInfoDisplay";
 import { findItem } from "../../utils/topoData";
 import { queryCisByIds } from "../services";
 import AttributeFormatter from "./attributeFormatter";
@@ -35,8 +35,10 @@ var filterByPermission = function filterByPermission(resource, items) {
 
 var AttributeMetricDisplay = /*#__PURE__*/function () {
   function AttributeMetricDisplay(topo) {
+    var _this$topo$options$ta;
+
     this.topo = topo;
-    var ExtElementTagTipBuilder = this.topo.options.ExtElementTagTipBuilder;
+    var ExtElementTagTipBuilder = (_this$topo$options$ta = this.topo.options.tagTip) === null || _this$topo$options$ta === void 0 ? void 0 : _this$topo$options$ta.ExtElementTagTipBuilder;
 
     if (ExtElementTagTipBuilder) {
       this.extElementTagTipBuilder = new ExtElementTagTipBuilder(this);
@@ -236,10 +238,12 @@ var AttributeMetricDisplay = /*#__PURE__*/function () {
       return filterUnExistedFields(items, ciTypeMeta);
     }
 
-    var defaultLinkTagTipConfig = this.topo.options.defaultLinkTagTipConfig;
+    var tagTipOptions = this.topo.options.tagTip;
+    var defaultLinkTagConfig = tagTipOptions !== null && tagTipOptions !== void 0 && tagTipOptions.getDefaultLinkTagConfig ? tagTipOptions === null || tagTipOptions === void 0 ? void 0 : tagTipOptions.getDefaultLinkTagConfig(link) : null;
+    var defaultLinkTipConfig = tagTipOptions !== null && tagTipOptions !== void 0 && tagTipOptions.getDefaultLinkTipConfig ? tagTipOptions === null || tagTipOptions === void 0 ? void 0 : tagTipOptions.getDefaultLinkTipConfig(link) : null;
     return {
-      tags: getItems(linkTag || (defaultLinkTagTipConfig === null || defaultLinkTagTipConfig === void 0 ? void 0 : defaultLinkTagTipConfig.tag)),
-      tips: getItems(linkTip || (defaultLinkTagTipConfig === null || defaultLinkTagTipConfig === void 0 ? void 0 : defaultLinkTagTipConfig.tip))
+      tags: getItems(linkTag || defaultLinkTagConfig),
+      tips: getItems(linkTip || defaultLinkTipConfig)
     };
   };
 

package/es/core/models/TopoApp.js

@@ -20,7 +20,7 @@ import { updateEdgeExpanded } from "../utils/edgeUtil";
 import PluginManager from "./PluginManager";
 import topoFactory from "./topoFactory"; // eslint-disable-next-line no-undef
 
-var version = typeof "3.1.6" === 'string' ? "3.1.6" : null;
+var version = typeof "3.1.9" === 'string' ? "3.1.9" : null;
 console.info("\u62D3\u6251\u7248\u672C: " + version);
 /**
  * 拓扑显示和编辑

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

@@ -5,12 +5,13 @@ import _asyncToGenerator from "@babel/runtime/helpers/asyncToGenerator";
 import _MenuButton from "@alifd/next/es/menu-button";
 import _Search from "@alifd/next/es/search";
 import _regeneratorRuntime from "@babel/runtime/regenerator";
-import React, { useState, useEffect, useRef, useCallback } from 'react';
-import { isAvailableArray, dataSearch } from '@riil-frontend/utils';
 import { TopoEvent } from '@riil-frontend/component-topology-graph';
+import { dataSearch, isAvailableArray } from '@riil-frontend/utils';
+import React, { useEffect, useState } from 'react';
+import PropTypes from 'prop-types';
 import service from "../../../../services/overview";
-import styles from "./index.module.scss";
 import ResourceOverview from "./components/ResourceOverview";
+import styles from "./index.module.scss";
 
 function Title(_ref) {
   var id = _ref.id,
@@ -72,8 +73,9 @@ function Title(_ref) {
 } // 基本信息
 
 
-function BaseInfo(props) {
-  var topo = props.topo;
+function ResourceDetail(props) {
+  var topo = props.topo,
+      canShow = props.canShow;
 
   var _topo$store$useModel = topo.store.useModel('topoBaseInfoOverview'),
       topoState = _topo$store$useModel[0],
@@ -189,8 +191,6 @@ function BaseInfo(props) {
   }
 
   function init(data, targetType) {
-    var _topo$options$resourc;
-
     console.log('初始化基本信息', data, targetType);
     var id = data.id,
         name = data.name,
@@ -199,11 +199,15 @@ function BaseInfo(props) {
         ciName = data.ciName,
         operation = data.operation; // 仅展示资源和链路的概览
 
-    if (!['node', 'link', 'linkGroup'].includes(type)) return; // 应用拓扑中没有链路详情
-
-    if ((_topo$options$resourc = topo.options.resourceOverviewDrawer) !== null && _topo$options$resourc !== void 0 && _topo$options$resourc.getData && type === 'link') return; // 没有权限不显示
+    if (!['node', 'link', 'linkGroup'].includes(type)) return; // 没有权限不显示
 
     if (!operation) return;
+    var htElement = topo.getDataModel().getDataByTag(id);
+
+    if (!canShow(htElement)) {
+      return;
+    }
+
     setActiveData({
       id: id,
       name: name,
@@ -273,4 +277,12 @@ function BaseInfo(props) {
   }))))));
 }
 
-export default BaseInfo;
+ResourceDetail.propTypes = {
+  canShow: PropTypes.func
+};
+ResourceDetail.defaultProps = {
+  canShow: function canShow(htElement) {
+    return true;
+  }
+};
+export default ResourceDetail;

package/es/core/viewer/components/plugins/ResourceDetail/ResourceDetailPlugin.js

@@ -0,0 +1,11 @@
+import _extends from "@babel/runtime/helpers/extends";
+import React from 'react';
+import ResourceDetail from "./ResourceDetail";
+
+function ResourceDetailPlugin(props) {
+  var viewerProps = props.viewerProps;
+  var resourceDetailProps = viewerProps === null || viewerProps === void 0 ? void 0 : viewerProps.resourceDetailProps;
+  return /*#__PURE__*/React.createElement(ResourceDetail, _extends({}, props, resourceDetailProps));
+}
+
+export default ResourceDetailPlugin;

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

@@ -0,0 +1,131 @@
+import React from 'react';
+import { Link } from 'react-router-dom';
+import styles from "./index.module.scss"; // url 处理，UICBB 的地址需截取前缀
+
+function formatUrl(url) {
+  var _window, _window$location;
+
+  var prefix = '/default/pagecenter';
+
+  if (((_window = window) === null || _window === void 0 ? void 0 : (_window$location = _window.location) === null || _window$location === void 0 ? void 0 : _window$location.pathname.indexOf(prefix)) === 0 && (url === null || url === void 0 ? void 0 : url.indexOf(prefix)) === 0) {
+    return url.split(prefix)[1];
+  } else {
+    return url;
+  }
+}
+
+function AttributeItem(props) {
+  var style = props.style,
+      key = props.key,
+      label = props.label,
+      contentTitle = props.contentTitle,
+      children = props.children;
+  return /*#__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: contentTitle
+  }, children));
+}
+
+function BaseInfoContent(props) {
+  var _itemCols$type;
+
+  var topo = props.topo,
+      type = props.type,
+      data = props.data;
+  var itemCols = {
+    node: [{
+      label: '资源名称：',
+      objKey: 'resource',
+      render: function render(valueData, key) {
+        var display_name = valueData.display_name,
+            link = valueData.link;
+        return /*#__PURE__*/React.createElement(AttributeItem, {
+          key: key,
+          label: "\u8D44\u6E90\u540D\u79F0\uFF1A",
+          contentTitle: 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(React.Fragment, null, (_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(AttributeItem, {
+      key: key,
+      label: label,
+      style: style || {},
+      contentTitle: data[objKey]
+    }, data[objKey] || '-');
+  }));
+} // 基本信息
+
+
+export default function BaseInfo(props) {
+  var topo = props.topo,
+      type = props.type,
+      data = props.data,
+      baseInfo = props.baseInfo,
+      renderContent = props.renderContent;
+  var content = renderContent ? renderContent({
+    type: type,
+    data: data,
+    AttributeItem: AttributeItem
+  }) : null;
+
+  if (!content) {
+    content = /*#__PURE__*/React.createElement(BaseInfoContent, {
+      type: type,
+      data: baseInfo
+    });
+  }
+
+  return /*#__PURE__*/React.createElement("div", {
+    className: styles['base-info']
+  }, content);
+}