@riil-frontend/component-topology 11.0.10 → 11.0.12

package/es/core/models/utils/nodeNameVisibleUtil.js

@@ -0,0 +1,116 @@
+import { getNodes, isNode } from "../../../utils/htElementUtils";
+/**
+ * 根据配置执行节点名称显示隐藏
+ * 1. 资源根据标注配置显示隐藏
+ * 2. 默认标注配置不勾选图片名称，图片节点名称不显示
+ * 3. 自定义标注配置，图片名称显示
+ */
+
+export function updateNodesNameVisible(topo) {
+  getNodesNameVisible(topo).forEach(function (_ref) {
+    var htNode = _ref.htNode,
+        visible = _ref.visible;
+    var prevVisible = htNode.a('isShowName');
+
+    if (prevVisible !== visible) {
+      htNode.a('isShowName', visible);
+    }
+  });
+}
+/**
+ * 新加入节点按配置显示隐藏名称
+ * @param {*} topo 
+ */
+
+export function setNewNodeNameVisible(topo, element) {
+  if (isNode(element)) {
+    var _topo$store$getModelS = topo.store.getModelState('displayConfig'),
+        nodeTag = _topo$store$getModelS.nodeTag;
+
+    var nameVisible = getNodeNameVisible({
+      node: element,
+      topo: topo,
+      nodeTag: nodeTag
+    });
+    element.a('isShowName', nameVisible);
+  }
+}
+export function getNodesNameVisible(topo) {
+  var _topo$store$getModelS2 = topo.store.getModelState('displayConfig'),
+      nodeTag = _topo$store$getModelS2.nodeTag;
+
+  var dm = topo.getDataModel();
+  var htNodes = getNodes(dm);
+  return htNodes.map(function (htNode) {
+    var node = topo.dataModel.getDataById(htNode.getTag());
+    return {
+      htNode: htNode,
+      node: node,
+      visible: getNodeNameVisible({
+        node: node,
+        topo: topo,
+        nodeTag: nodeTag
+      })
+    };
+  });
+}
+/**
+ * 从配置获得资源节点名称是否显示
+ * @param {*} node
+ * @returns
+ */
+
+export function getNodeNameVisible(_ref2) {
+  var node = _ref2.node,
+      topo = _ref2.topo,
+      nodeTag = _ref2.nodeTag;
+
+  if (node !== null && node !== void 0 && node.ciType) {
+    return getCiNodeNameVisible({
+      node: node,
+      nodeTag: nodeTag
+    });
+  } else {
+    return getCommonNodeNameVisible({
+      node: node,
+      nodeTag: nodeTag
+    });
+  }
+} // 非CI节点
+
+function getCommonNodeNameVisible(_ref3) {
+  var node = _ref3.node,
+      nodeTag = _ref3.nodeTag;
+  var visible = true;
+
+  if (nodeTag) {
+    var isCustom = nodeTag.isCustom,
+        data = nodeTag.data;
+
+    if (!isCustom) {
+      var items = data || [];
+      visible = !!items.filter(function (item) {
+        return item.type === 'graph';
+      }).length;
+    }
+  }
+
+  return visible;
+}
+
+function getCiNodeNameVisible(_ref4) {
+  var node = _ref4.node,
+      nodeTag = _ref4.nodeTag;
+  var visible = true;
+
+  if (nodeTag) {
+    var isCustom = nodeTag.isCustom,
+        data = nodeTag.data;
+    var items = (isCustom ? data[node.ciType] : data) || [];
+    visible = !!items.filter(function (item) {
+      return item.type === 'graph';
+    }).length;
+  }
+
+  return visible;
+}

package/es/utils/topoData.js

@@ -11,6 +11,7 @@ import { getBackgroundImageUrl } from "../core/utils/backgroundUtil";
 import { isClusterHtElement, processCluster } from "./clusterUtil";
 import { isGroup } from "./htElementUtils";
 import v140UpgradeSerializeNodeImageSize from "../core/upgrade/v140UpgradeSerializeNodeImageSize";
+import { getNodeNameVisible } from "../core/models/utils/nodeNameVisibleUtil";
 /**
  * 查找数组中对应key的值为value的元素并返回,只查找第一个符合的元素
  * @param {Array} arr 数组
@@ -63,13 +64,20 @@ var tfNode = function tfNode(topoEngine, node) {
  */
 
 
-function updateNodeInfo(topoEngine, topoData) {
+function updateNodeInfo(topo, topoData) {
+  var _topo$store$getModelS = topo.store.getModelState('displayConfig'),
+      nodeTag = _topo$store$getModelS.nodeTag;
+
   return _extends({}, topoData, {
     nodes: topoData.nodes.map(function (node) {
       var attributes = node.attributes;
       return _extends({}, node, {
         ipAddress: node.ipAddress || (attributes === null || attributes === void 0 ? void 0 : attributes.ipv4_address) || null,
-        isShowName: topoEngine.attributeMetricDisplay.getNodeNameVisible(node)
+        isShowName: getNodeNameVisible({
+          node: node,
+          topo: topo,
+          nodeTag: nodeTag
+        })
       });
     })
   });

package/lib/components/ModelAttrSelectDrawer/components/MultipleTypeAttributeSelectDrawer.js

@@ -0,0 +1,97 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+exports.__esModule = true;
+exports["default"] = void 0;
+
+var _react = _interopRequireWildcard(require("react"));
+
+var _rlog = _interopRequireDefault(require("@riil-frontend/component-topology-utils/es/rlog"));
+
+var _ModelAttrSelectDrawer = _interopRequireDefault(require("./ModelAttrSelectDrawer"));
+
+function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { "default": obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj["default"] = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+
+function parseValue(value) {
+  var selected = {};
+  Object.keys(value).forEach(function (ciType) {
+    selected[ciType] = value[ciType].map(function (_ref) {
+      var type = _ref.type,
+          code = _ref.code;
+      return type + ":" + code;
+    });
+  });
+  return selected;
+}
+/**
+ * 资源显示属性、指标配置
+ */
+
+
+var MultipleTypeAttributeSelectDrawer = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
+  var value = props.value,
+      data = props.data,
+      showType = props.showType,
+      limit = props.limit,
+      onChange = props.onChange,
+      queryData = props.queryData;
+  var batchAttrMetric = (0, _react.useRef)();
+
+  var _useState = (0, _react.useState)(parseValue((value === null || value === void 0 ? void 0 : value.data) || {})),
+      selected = _useState[0],
+      setSelected = _useState[1];
+
+  (0, _react.useEffect)(function () {
+    setSelected(parseValue((value === null || value === void 0 ? void 0 : value.data) || {}));
+  }, [value]); // 点击选择数据，显示抽屉
+
+  var show = function show() {
+    queryData();
+    batchAttrMetric.current.show({
+      showType: showType
+    });
+  };
+
+  (0, _react.useImperativeHandle)(ref, function () {
+    return {
+      show: show
+    };
+  }); // 保存指标设置
+
+  var save = function save(showType, parm) {
+    _rlog["default"].debug('saveMarkSetting', showType, parm);
+
+    var newSelected = {};
+    Object.keys(parm).forEach(function (ciType) {
+      newSelected[ciType] = parm[ciType].map(function (id) {
+        var _id$split = id.split(':'),
+            type = _id$split[0],
+            code = _id$split[1];
+
+        return {
+          code: code,
+          type: type
+        };
+      });
+    });
+    onChange({
+      isCustom: true,
+      data: newSelected
+    });
+  };
+
+  return /*#__PURE__*/_react["default"].createElement(_ModelAttrSelectDrawer["default"], {
+    ref: batchAttrMetric,
+    value: selected,
+    dataSource: data,
+    limit: limit,
+    showType: showType,
+    onOk: save
+  });
+});
+MultipleTypeAttributeSelectDrawer.displayName = 'MultipleTypeAttributeSelectDrawer';
+var _default = MultipleTypeAttributeSelectDrawer;
+exports["default"] = _default;

package/lib/components/ModelAttrSelectDrawer/index.js

@@ -5,7 +5,7 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 exports.__esModule = true;
 exports["default"] = void 0;
 
-var _ModelAttrSelectDrawer = _interopRequireDefault(require("./components/ModelAttrSelectDrawer"));
+var _MultipleTypeAttributeSelectDrawer = _interopRequireDefault(require("./components/MultipleTypeAttributeSelectDrawer"));
 
-var _default = _ModelAttrSelectDrawer["default"];
+var _default = _MultipleTypeAttributeSelectDrawer["default"];
 exports["default"] = _default;

package/lib/components/VerticalIconTab/VerticalIconTab.js

@@ -15,10 +15,10 @@ var _react = _interopRequireWildcard(require("react"));
 
 var _classnames = _interopRequireDefault(require("classnames"));
 
-var _VerticalIconTabModule = _interopRequireDefault(require("./VerticalIconTab.module.scss"));
-
 var _variables = _interopRequireDefault(require("@alifd/theme-19926/variables.js"));
 
+var _VerticalIconTabModule = _interopRequireDefault(require("./VerticalIconTab.module.scss"));
+
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
 
 function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { "default": obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj["default"] = obj; if (cache) { cache.set(obj, newObj); } return newObj; }

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

@@ -15,6 +15,8 @@ var _ResourceInfoDisplay = require("../../../constants/ResourceInfoDisplay");
 
 var _BasicConfig = _interopRequireDefault(require("./ResourceDisplay/BasicConfig"));
 
+var _NodeAttrSettingDrawer = _interopRequireDefault(require("./components/NodeAttrSettingDrawer"));
+
 var defaultCommonOptions = [{
   value: 'graph:name',
   label: '图片名称'
@@ -31,15 +33,17 @@ var defaultCommonOptions = [{
 var NodeTag = /*#__PURE__*/_react["default"].forwardRef(function (props, ref) {
   var commonOptions = props.commonOptions;
   return /*#__PURE__*/_react["default"].createElement(_BasicConfig["default"], (0, _extends2["default"])({
-    ref: ref
-  }, props, {
+    ref: ref,
     limit: 3,
     elementType: "node",
     showType: "tag",
     commonOptions: commonOptions || defaultCommonOptions,
     defaultCommonConfig: _ResourceInfoDisplay.DEFAULT_NODE_TAG_COMMON_CONFIG,
+    customSettingDrawer: function customSettingDrawer(params) {
+      return /*#__PURE__*/_react["default"].createElement(_NodeAttrSettingDrawer["default"], params);
+    },
     type: "node"
-  }));
+  }, props));
 });
 
 NodeTag.displayName = 'NodeTag';

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

@@ -15,6 +15,8 @@ var _ResourceInfoDisplay = require("../../../constants/ResourceInfoDisplay");
 
 var _BasicConfig = _interopRequireDefault(require("./ResourceDisplay/BasicConfig"));
 
+var _NodeAttrSettingDrawer = _interopRequireDefault(require("./components/NodeAttrSettingDrawer"));
+
 var defaultCommonOptions = [{
   value: 'attribute:display_name',
   label: '显示名称'
@@ -31,14 +33,16 @@ var defaultCommonOptions = [{
 var NodeTip = /*#__PURE__*/_react["default"].forwardRef(function (props, ref) {
   var commonOptions = props.commonOptions;
   return /*#__PURE__*/_react["default"].createElement(_BasicConfig["default"], (0, _extends2["default"])({
-    ref: ref
-  }, props, {
+    ref: ref,
     limit: 4,
     elementType: "node",
     showType: "tip",
     commonOptions: commonOptions || defaultCommonOptions,
-    defaultCommonConfig: _ResourceInfoDisplay.DEFAULT_TIP_COMMON_CONFIG
-  }));
+    defaultCommonConfig: _ResourceInfoDisplay.DEFAULT_TIP_COMMON_CONFIG,
+    customSettingDrawer: function customSettingDrawer(params) {
+      return /*#__PURE__*/_react["default"].createElement(_NodeAttrSettingDrawer["default"], params);
+    }
+  }, props));
 });
 
 NodeTip.propTypes = {

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

@@ -0,0 +1,60 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+exports.__esModule = true;
+exports["default"] = void 0;
+
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+
+var _objectWithoutPropertiesLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutPropertiesLoose"));
+
+var _react = _interopRequireWildcard(require("react"));
+
+var _propTypes = _interopRequireDefault(require("prop-types"));
+
+var _rlog = _interopRequireDefault(require("@riil-frontend/component-topology-utils/lib/rlog"));
+
+var _ModelAttrSelectDrawer = _interopRequireDefault(require("../../../../components/ModelAttrSelectDrawer"));
+
+var _nodeCiTypeAttrUtil = require("../../ResourceViewAttributeSetting/nodeCiTypeAttrUtil");
+
+var _excluded = ["topo", "showType", "value"];
+
+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; }
+
+/**
+ * 节点标注、悬浮框设置
+ */
+var NodeAttrSettingDrawer = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
+  var topo = props.topo,
+      showType = props.showType,
+      value = props.value,
+      otherProps = (0, _objectWithoutPropertiesLoose2["default"])(props, _excluded);
+
+  var _useState = (0, _react.useState)([]),
+      data = _useState[0],
+      setData = _useState[1];
+
+  var queryData = function queryData() {
+    _rlog["default"].info('属性配置：加载数据');
+
+    var items = (0, _nodeCiTypeAttrUtil.getNodeModels)(topo);
+    setData(items);
+  };
+
+  return /*#__PURE__*/_react["default"].createElement(_ModelAttrSelectDrawer["default"], (0, _extends2["default"])({
+    ref: ref
+  }, otherProps, {
+    value: value,
+    data: data,
+    showType: showType,
+    queryData: queryData
+  }));
+});
+NodeAttrSettingDrawer.displayName = 'NodeAttrSettingDrawer';
+NodeAttrSettingDrawer.propTypes = {};
+var _default = NodeAttrSettingDrawer;
+exports["default"] = _default;

package/lib/core/components/ResourceViewAttributeSetting/nodeCiTypeAttrUtil.js

@@ -2,10 +2,104 @@
 
 exports.__esModule = true;
 exports.getNodeCiModSet = getNodeCiModSet;
+exports.getNodeModels = getNodeModels;
 
 var _topoData = require("../../../utils/topoData");
 
-// 资源类型含有属性和指标集合
+/**
+ * 获取节点标注、悬浮框配置
+ * @param {*} topo 
+ * @returns 
+ */
+function getNodeModels(topo) {
+  return getNodeModSet();
+
+  function getNodeModSet() {
+    var data = topo.store.getModelState('topoMod').data;
+    var ciTypes = (0, _topoData.getCiTypesFromCiElements)(data.nodes);
+    return getMods(ciTypes);
+  }
+  /**
+   *
+   * @param {array} ciTypeCodes
+   * @returns
+   */
+
+
+  function getMods(ciTypeCodes) {
+    var ciTypeMap = topo.ciTyeCache.ciTypes;
+    return Object.keys(ciTypeMap).filter(function (item) {
+      return ciTypeCodes.includes(item);
+    }).map(function (key) {
+      var ciTypeObj = ciTypeMap[key];
+      return {
+        id: ciTypeObj.code,
+        label: ciTypeObj.displayName,
+        icon: "/img/model/" + ciTypeObj.icon + ".svg",
+        list: buildModelFields(ciTypeObj, 'node')
+      };
+    });
+  }
+
+  function buildModels(ciTypeObj) {
+    return {
+      id: ciTypeObj.code,
+      label: ciTypeObj.displayName,
+      icon: "/img/model/" + ciTypeObj.icon + ".svg",
+      list: buildModelFields(ciTypeObj, 'node')
+    };
+  }
+  /**
+   * 过滤ci元数据中的属性和指标，用于属性和指标显示设置
+   * @param {} ciTypeObj
+   * @returns
+   */
+
+
+  function buildModelFields(ciTypeObj, type) {
+    var custom = [];
+
+    if (type === 'node') {
+      custom.push.apply(custom, [{
+        id: 'graph:name',
+        code: 'name',
+        name: '图片名称',
+        type: 'custom'
+      }, {
+        id: 'ciType:display_name',
+        code: 'ciType',
+        name: '资源类型',
+        type: 'custom'
+      }]);
+    }
+
+    var attributes = ciTypeObj.attributes.filter(function (attr) {
+      return !!attr.userVisible;
+    }).map(function (item) {
+      return {
+        type: 'attribute',
+        id: "attribute:" + item.code,
+        code: "attribute:" + item.code,
+        name: item.name,
+        typeName: '属性'
+      };
+    });
+    var metrics = ciTypeObj.metrics.map(function (item) {
+      return {
+        type: 'metric',
+        id: "metric:" + item.code,
+        code: "metric:" + item.code,
+        name: item.name,
+        typeName: '指标'
+      };
+    });
+    return [].concat(custom, attributes, metrics);
+  }
+
+  ;
+} // 资源类型含有属性和指标集合
+
+
 function getNodeCiModSet(params) {
   var topo = params.topo;
   var data = topo.store.getModelState('topoMod').data;
@@ -35,8 +129,7 @@ function getNodeCiModSet(params) {
         icon: ciTypeObj.icon,
         list: ciModfilter(ciTypeObj, globalConfig, 'node', ciTypeObj.code)
       };
-    }); // console.log("modSet--------------------", modSet);
-
+    });
     return modSet;
   }
   /**
@@ -66,13 +159,7 @@ function getNodeCiModSet(params) {
       (_tags$data$code = tags.data[code]) === null || _tags$data$code === void 0 ? void 0 : _tags$data$code.map(function (item) {
         tagArr.push(item.code + "-" + item.type);
       });
-    } // rlog.debug(
-    //   "过滤ci元数据中的属性和指标，用于属性和指标显示设置",
-    //   globalSetting,
-    //   tipArr,
-    //   tagArr
-    // );
-
+    }
 
     var custom = [];
 

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

@@ -57,6 +57,8 @@ var _basicIcons = _interopRequireDefault(require("../../common/icons/basicIcons"
 
 var _HelpIcon = _interopRequireDefault(require("../../editor/components/BottomFloatTool/HelpIcon"));
 
+var _nodeNameVisibleUtil = require("../../models/utils/nodeNameVisibleUtil");
+
 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; }
@@ -159,6 +161,7 @@ var Topology = function Topology(props) {
       htElements: topo.getDataModel().getDatas().toArray()
     });
 
+    (0, _nodeNameVisibleUtil.updateNodesNameVisible)(topo);
     (0, _clusterUtil.upgradeV103GraphClusterNode)(topo, topoData);
     (0, _graphLinkUtil.fixLink)(topo);
     (0, _clusterUtil.handleClusterNoPermission)(topo);
@@ -185,6 +188,7 @@ var Topology = function Topology(props) {
       htElements: topo.getDataModel().getDatas().toArray()
     });
 
+    (0, _nodeNameVisibleUtil.updateNodesNameVisible)(topo);
     (0, _clusterUtil.upgradeV103GraphClusterNode)(topo, topoData);
     (0, _graphLinkUtil.fixLink)(topo);
     (0, _clusterUtil.handleClusterNoPermission)(topo);

package/lib/core/editor/components/BottomFloatTool/HelpIcon.js

@@ -5,11 +5,108 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 exports.__esModule = true;
 exports["default"] = void 0;
 
-var _react = _interopRequireDefault(require("react"));
+var _balloon = _interopRequireDefault(require("@alifd/next/lib/balloon"));
+
+var _grid = _interopRequireDefault(require("@alifd/next/lib/grid"));
+
+var _react = _interopRequireWildcard(require("react"));
+
+var _HelpIconModule = _interopRequireDefault(require("./HelpIcon.module.scss"));
+
+var _useCanvasThemeConfig2 = _interopRequireDefault(require("../../../hooks/useCanvasThemeConfig"));
+
+function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { "default": obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj["default"] = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
 
 function HelpIcon(props) {
-  var topo = props.topo;
-  return /*#__PURE__*/_react["default"].createElement("div", null, "HelpIcon");
+  var topo = props.topo,
+      topoType = props.topoType;
+  var localStorageVal = localStorage.getItem(topoType + 'helpBoxHidden');
+
+  var _useState = (0, _react.useState)(),
+      helpBoxIsShow = _useState[0],
+      setHelpBoxIsShow = _useState[1]; //TODO:在主得style里面需要增加color与background属性，根据外部传值进行改变，默认值为$color-text1-4,#fff
+
+
+  var Row = _grid["default"].Row,
+      Col = _grid["default"].Col;
+
+  var _useCanvasThemeConfig = (0, _useCanvasThemeConfig2["default"])({
+    topo: topo
+  }),
+      themeConfig = _useCanvasThemeConfig.themeConfig;
+
+  var helpIconNames = themeConfig.editor.helpIcon;
+
+  var onChange = function onChange(visible, type) {
+    if (type != 'docClick') {
+      setHelpBoxIsShow(visible);
+      localStorage.setItem(topoType + 'helpBoxHidden', !visible);
+    }
+  };
+
+  var topoModState = topo.store.useModelState('topoMod');
+  var graphLoaded = topoModState.graphLoaded;
+  (0, _react.useEffect)(function () {
+    if (graphLoaded) {
+      setHelpBoxIsShow(localStorageVal == 'true' ? false : true);
+    }
+  }, [topo, graphLoaded]);
+  return /*#__PURE__*/_react["default"].createElement(_balloon["default"], {
+    triggerType: "click",
+    align: "t",
+    trigger: /*#__PURE__*/_react["default"].createElement("div", {
+      className: _HelpIconModule["default"].topoHelpIconBtn,
+      onClick: function onClick() {
+        open;
+      }
+    }, /*#__PURE__*/_react["default"].createElement("img", {
+      src: "/img/topo/editor/bottomFloatTool/default.svg",
+      alt: ""
+    })),
+    closable: true,
+    visible: helpBoxIsShow,
+    onVisibleChange: onChange,
+    shouldUpdatePosition: true,
+    id: helpIconNames
+  }, /*#__PURE__*/_react["default"].createElement("div", {
+    className: _HelpIconModule["default"].topoHelpIcon
+  }, /*#__PURE__*/_react["default"].createElement("div", {
+    className: _HelpIconModule["default"][helpIconNames + 'Box']
+  }, /*#__PURE__*/_react["default"].createElement("span", {
+    className: _HelpIconModule["default"].title
+  }, "\u5FEB\u6377\u952E"), /*#__PURE__*/_react["default"].createElement("div", {
+    className: _HelpIconModule["default"].conten
+  }, /*#__PURE__*/_react["default"].createElement(Row, null, /*#__PURE__*/_react["default"].createElement(Col, {
+    span: "16"
+  }, "\u590D\u5236"), /*#__PURE__*/_react["default"].createElement(Col, {
+    span: "8"
+  }, "ctrl/\u2318+c")), /*#__PURE__*/_react["default"].createElement(Row, null, /*#__PURE__*/_react["default"].createElement(Col, {
+    span: "16"
+  }, "\u7C98\u8D34"), /*#__PURE__*/_react["default"].createElement(Col, {
+    span: "8"
+  }, "ctrl/\u2318+v")), /*#__PURE__*/_react["default"].createElement(Row, null, /*#__PURE__*/_react["default"].createElement(Col, {
+    span: "16"
+  }, "\u64A4\u9500"), /*#__PURE__*/_react["default"].createElement(Col, {
+    span: "8"
+  }, "ctrl/\u2318+z")), /*#__PURE__*/_react["default"].createElement(Row, null, /*#__PURE__*/_react["default"].createElement(Col, {
+    span: "16"
+  }, "\u6062\u590D"), /*#__PURE__*/_react["default"].createElement(Col, {
+    span: "8"
+  }, "ctrl/\u2318+y")), /*#__PURE__*/_react["default"].createElement(Row, null, /*#__PURE__*/_react["default"].createElement(Col, {
+    span: "16"
+  }, "\u6587\u5B57\u52A0\u7C97"), /*#__PURE__*/_react["default"].createElement(Col, {
+    span: "8"
+  }, "ctrl/\u2318+b")), /*#__PURE__*/_react["default"].createElement(Row, null, /*#__PURE__*/_react["default"].createElement(Col, {
+    span: "16"
+  }, "\u9009\u62E9-\u62D6\u52A8"), /*#__PURE__*/_react["default"].createElement(Col, {
+    span: "8"
+  }, "\u7A7A\u683C")), /*#__PURE__*/_react["default"].createElement(Row, null, /*#__PURE__*/_react["default"].createElement(Col, {
+    span: "16"
+  }, "\u9000\u51FA\u94FE\u8DEF/\u7EBF\u7ED8\u5236"), /*#__PURE__*/_react["default"].createElement(Col, {
+    span: "8"
+  }, "\u9F20\u6807\u53F3\u952E"))))));
 }
 
 var _default = HelpIcon;