@riil-frontend/component-topology 2.15.21 → 2.15.24

package/es/core/viewer/components/plugins/BaseInfo/index.js

@@ -100,10 +100,6 @@ function BaseInfo(props) {
       userId = _useState4[0],
       setUserId = _useState4[1];
 
-  var _useState5 = useState(null),
-      paramData = _useState5[0],
-      setParamData = _useState5[1];
-
   useEffect(function () {
     var notifier = topo.view.topoClient.notifier;
     notifier.on(TopoEvent.EVENT_DOUBLE_CLICK, openOverview);
@@ -120,111 +116,94 @@ function BaseInfo(props) {
   }, []); // 解决切换拓扑图隐藏概览
 
   useEffect(function () {
-    setVisible(false);
-    setParamData(null); // TODO 其他数据重置
+    setVisible(false); // TODO 其他数据重置
   }, [topoId]);
 
   function getUser() {
     return _getUser.apply(this, arguments);
-  } // function changeOverview (node) {
-  //   const data = node.getAttrObject()
-  //   console.log('单击切换基本信息', data);
-  //   setVisible(prev => {
-  //     prev && openOverview(data)
-  //     return prev
-  //   })
-  // }
-  // function openOverview (data) {
-  //   console.log('双击打开基本信息', data);
-  //   const {
-  //     id,
-  //     name,
-  //     type,
-  //     ciType,
-  //     ciName,
-  //     operation,
-  //   } = data
-  //   // 仅展示资源和链路的概览
-  //   if (!['node', 'link', 'linkGroup'].includes(type)) return
-  //   // 应用拓扑中没有链路详情
-  //   if (topo.options.resourceOverviewDrawer?.getData && type === 'link') return
-  //   // 没有权限不显示
-  //   if (!operation) return
-  //   setActiveData({
-  //     id,
-  //     name,
-  //     type: type === 'linkGroup' ? 'link' : type,
-  //     ciType,
-  //     ciName
-  //   })
-  //   const { metrics } = topo.ciTyeCache.getCiType(ciType)
-  //   topoDispatchers.update({
-  //     id,
-  //     metricCodes: metrics.slice(0, 6).map(item => item.code), // 需要展示的关键指标 code
-  //   })
-  //   setVisible(true)
-  // }
+  } // select切换
 
 
   function _getUser() {
-    _getUser = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee() {
-      var res;
-      return _regeneratorRuntime.wrap(function _callee$(_context) {
+    _getUser = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee2() {
+      return _regeneratorRuntime.wrap(function _callee2$(_context2) {
         while (1) {
-          switch (_context.prev = _context.next) {
+          switch (_context2.prev = _context2.next) {
             case 0:
-              _context.next = 2;
-              return service.getUserId();
-
-            case 2:
-              res = _context.sent;
-              setUserId((res === null || res === void 0 ? void 0 : res.user_id) || '');
-
-            case 4:
+              setUserId( /*#__PURE__*/function () {
+                var _ref2 = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee(prev) {
+                  var res;
+                  return _regeneratorRuntime.wrap(function _callee$(_context) {
+                    while (1) {
+                      switch (_context.prev = _context.next) {
+                        case 0:
+                          console.log('获取用户id', prev); // 如果已经获取过，就不再重新获取
+
+                          if (!prev) {
+                            _context.next = 3;
+                            break;
+                          }
+
+                          return _context.abrupt("return", prev);
+
+                        case 3:
+                          _context.next = 5;
+                          return service.getUserId();
+
+                        case 5:
+                          res = _context.sent;
+                          return _context.abrupt("return", (res === null || res === void 0 ? void 0 : res.user_id) || '');
+
+                        case 7:
+                        case "end":
+                          return _context.stop();
+                      }
+                    }
+                  }, _callee);
+                }));
+
+                return function (_x) {
+                  return _ref2.apply(this, arguments);
+                };
+              }());
+
+            case 1:
             case "end":
-              return _context.stop();
+              return _context2.stop();
           }
         }
-      }, _callee);
+      }, _callee2);
     }));
     return _getUser.apply(this, arguments);
   }
 
   function onChangeActive(activeNode) {
-    console.log('切换基本信息资源', activeNode);
-    activeNode && openOverview(_extends({}, activeNode, {
+    activeNode && init(_extends({}, activeNode, {
       type: 'node'
-    }));
-  }
+    }), 'select');
+  } // 单击切换
 
-  useEffect(function () {
-    (visible || (paramData === null || paramData === void 0 ? void 0 : paramData.isVisible)) && paramData && init(paramData);
-  }, [paramData, visible]);
 
   function changeOverview(node) {
     var data = node.getAttrObject();
-    console.log('单击切换基本信息', data);
-    setParamData(data);
-  }
+    init(data, 'click');
+  } // 双击打开
+
 
   function openOverview(data) {
-    console.log('双击打开基本信息', data);
-    setParamData(_extends({}, data, {
-      isVisible: true
-    }));
+    init(data, 'doubleClick');
   }
 
-  function init(data) {
+  function init(data, targetType) {
     var _topo$options$resourc;
 
-    console.log('初始化基本信息', data);
+    console.log('初始化基本信息', data, targetType);
     var id = data.id,
         name = data.name,
         type = data.type,
         ciType = data.ciType,
         ciName = data.ciName,
-        operation = data.operation,
-        isVisible = data.isVisible; // 仅展示资源和链路的概览
+        operation = data.operation; // 仅展示资源和链路的概览
 
     if (!['node', 'link', 'linkGroup'].includes(type)) return; // 应用拓扑中没有链路详情
 
@@ -250,9 +229,9 @@ function BaseInfo(props) {
 
     }); // 显示隐藏
 
-    isVisible && setVisible(true); // userId
+    targetType === 'doubleClick' && setVisible(true); // userId
 
-    userId || getUser();
+    getUser();
   }
 
   return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(_Drawer, {
@@ -273,7 +252,7 @@ function BaseInfo(props) {
   }, /*#__PURE__*/React.createElement(_Tab.Item, {
     title: "\u8D44\u6E90\u6982\u89C8",
     key: "1"
-  }, /*#__PURE__*/React.createElement(ResourceOverview, _extends({}, props, activeData, {
+  }, activeData.id && /*#__PURE__*/React.createElement(ResourceOverview, _extends({}, props, activeData, {
     userId: userId
   }))))));
 }

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

@@ -1,7 +1,10 @@
 import _Button from "@alifd/next/es/button";
 import _Icon from "@alifd/next/es/icon";
-import React, { useEffect, useState } from "react";
+import _Overlay from "@alifd/next/es/overlay";
+import React, { useEffect, useRef, useState } from "react";
 import { TopoEvent } from "@riil-frontend/component-topology-graph";
+import rlog from "@riil-frontend/component-topology-utils/es/rlog";
+var Popup = _Overlay.Popup;
 /**
  * 元素拖拽开关
  *
@@ -10,41 +13,40 @@ import { TopoEvent } from "@riil-frontend/component-topology-graph";
 
 export default function AlarmListShowButton(props) {
   var topo = props.topo,
-      style = props.style;
+      style = props.style,
+      viewerProps = props.viewerProps;
+  var AlarmListPanel = viewerProps.AlarmListPanel;
   var store = topo.store;
 
   var _store$useModel = store.useModel("topoAlarm"),
       topoState = _store$useModel[0];
 
-  var alarmPanelIsOpen = topoState.alarmPanelIsOpen; // const [visiable, setVisiable] = useState(false);
-  // useEffect(() => {
-  //   if (movable) {
-  //     setVisiable(false);
-  //   }
-  // }, []);
-  // 初始化时注册打开设置事件
-  //   useEffect(() => {
-  //     const handleRefresh = (e) => {
-  //       setMovable(false);
-  //     };
-  //     notifier && notifier.on(TopoEvent.EVENT_REFRESH, handleRefresh);
-  //     return () => {
-  //       notifier && notifier.off(TopoEvent.EVENT_REFRESH, handleRefresh);
-  //     };
-  //   }, [notifier]);
+  var alarmPanelIsOpen = topoState.alarmPanelIsOpen;
+  var alarmBtn = useRef();
 
   var showAlarmList = function showAlarmList() {
-    // const flag = !visiable;
-    //setVisiable(flag);
-    topo.alarm.switchAlarmPopPanel(true); // topo.getGraphView().setMovableFunc((data) => {
-    //   return flag; // self._graphView.dm().sm().getSelection().size()===1 && !(data instanceof ht.Grid);
-    // });
+    topo.alarm.switchAlarmPopPanel(true);
   };
 
-  return /*#__PURE__*/React.createElement(_Button, {
-    style: style,
-    onClick: showAlarmList
-  }, /*#__PURE__*/React.createElement(_Icon, {
-    type: "warning"
-  }));
+  var onVisibleChange = function onVisibleChange(visible) {
+    topo.alarm.switchAlarmPopPanel(visible);
+  };
+
+  return /*#__PURE__*/React.createElement(Popup, {
+    trigger: /*#__PURE__*/React.createElement(_Button, {
+      style: style,
+      ref: alarmBtn
+    }, /*#__PURE__*/React.createElement(_Icon, {
+      type: "warning"
+    })),
+    cache: true,
+    defaultVisible: true,
+    visible: alarmPanelIsOpen,
+    onVisibleChange: onVisibleChange,
+    offset: [112, 5],
+    triggerType: "click",
+    safeNode: function safeNode() {
+      return alarmBtn;
+    }
+  }, /*#__PURE__*/React.createElement(AlarmListPanel, props));
 }

package/es/index.js

@@ -1,4 +1,6 @@
+import { iconFactory } from '@riil-frontend/component-topology-graph';
 import Topology from "./core/components/TopoView";
+import * as htElementUtils from "./utils/htElementUtils";
 export * from "./createTopo";
 export * from "./core/components/titlebar";
-export { Topology };
+export { Topology, htElementUtils, iconFactory };

package/es/style.js

@@ -23,6 +23,7 @@ import '@alifd/next/es/divider/style';
 import '@alifd/next/es/box/style';
 import '@alifd/next/es/dropdown/style';
 import '@alifd/next/es/menu/style';
+import '@alifd/next/es/overlay/style';
 import '@alifd/next/es/radio/style';
 import '@alifd/next/es/checkbox/style';
 import '@alifd/next/es/grid/style';

package/es/topoCenter/components/TopoView.js

@@ -2,8 +2,8 @@ import _Loading from "@alifd/next/es/loading";
 import _extends from "@babel/runtime/helpers/extends";
 import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/objectWithoutPropertiesLoose";
 var _excluded = ["topo", "titleBar", "onEnterEdit"];
-import React, { useState, useEffect, useRef, useCallback } from 'react';
-import NodataPage from '@riil-frontend/component-topology-common/es/components/NoDataPage/index';
+import React, { useState, useEffect, useRef, useCallback } from "react";
+import NodataPage from "@riil-frontend/component-topology-common/es/components/NoDataPage/index";
 import BasicTopoView from "../../core/components/TopoView";
 import topoPermissonUtil from "../../utils/topoPermissionUtil";
 import Topo404 from "./Topo404";
@@ -20,7 +20,7 @@ function NetworkTopology(props) {
       onEnterEdit = props.onEnterEdit,
       otherProps = _objectWithoutPropertiesLoose(props, _excluded);
 
-  var topoState = topo.store.useModelState('topoMod');
+  var topoState = topo.store.useModelState("topoMod");
   var loading = topoState.loading,
       topoId = topoState.topoId,
       topoData = topoState.topoData,
@@ -30,7 +30,8 @@ function NetworkTopology(props) {
     var viewerProps = _extends({}, props.viewerProps, {
       showLinkConfig: true,
       // 是否显示链路相关配置
-      plugins: [AlarmListPanel]
+      AlarmListPanel: AlarmListPanel,
+      plugins: []
     });
 
     return /*#__PURE__*/React.createElement(BasicTopoView, _extends({}, otherProps, {
@@ -69,9 +70,9 @@ function NetworkTopology(props) {
   };
 
   return /*#__PURE__*/React.createElement("div", {
-    className: styles['topo-center-view']
+    className: styles["topo-center-view"]
   }, /*#__PURE__*/React.createElement(_Loading, {
-    className: styles['topo-center-mask-loading'],
+    className: styles["topo-center-mask-loading"],
     visible: loading
   }, renderContent()));
 }

package/es/topoCenter/components/editor/propertyViews/LayerRelatedResourceList.js

@@ -1,8 +1,7 @@
 import React, { useState, useEffect, useRef, useCallback } from 'react';
-import rlog from '@riil-frontend/component-topology-utils/es/rlog';
+import { iconFactory } from '@riil-frontend/component-topology-graph';
 import ResourceList from "../../../../core/editor/components/settings/common/GroupNodeList/ResourceList";
 import { getLayerChildrenNodes } from "../../../../utils/htElementUtils";
-import { getIconById } from "../../../../core/common/icons/icon";
 
 function getResourceNodes(store, htNodes) {
   var _store$getModelState = store.getModelState('topoMod'),
@@ -38,7 +37,7 @@ export default function LayerResourceList(props) {
         resource = _ref.resource;
     return {
       title: resource.name,
-      img: getIconById(node.getImage(), topo)
+      img: iconFactory.getIconImageUrl(node.getImage())
     };
   }); // rlog.debug('LayerResourceList', {nodes, resourceNodes, data});
 

package/es/topoCenter/hooks/editor/useDeleteEdges.js

@@ -4,6 +4,7 @@ import _Message from "@alifd/next/es/message";
 import _Dialog from "@alifd/next/es/dialog";
 import _regeneratorRuntime from "@babel/runtime/regenerator";
 import rlog from '@riil-frontend/component-topology-utils/es/rlog';
+import { isAggLink } from "../../../core/models/utils/linkUtils";
 import linkService from "../../services/link";
 import { getLinkPermission } from "../../utils/linPermissionUtil";
 /**
@@ -43,6 +44,7 @@ export default (function (_ref) {
   var deleteLink = function deleteLink(edge) {
     var id = edge.getTag();
     var link = topo.dataModel.getDataById(id);
+    var isAgg = isAggLink(link);
 
     if (!checkLinkDeleteable(link)) {
       return;
@@ -50,7 +52,7 @@ export default (function (_ref) {
 
     var htTopo = topo.getHtTopo();
     confirmDeleteLink( /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee() {
-      var success, edgesInNodes, _topo$store$getModel, topoState, topoDispatchers, _topoState$data, links, linkGroups;
+      var success, edgesInNodes, edgeGroupData, edgeData, _topo$store$getModel, topoState, topoDispatchers, _topoState$data, links, linkGroups;
 
       return _regeneratorRuntime.wrap(function _callee$(_context) {
         while (1) {
@@ -72,26 +74,32 @@ export default (function (_ref) {
               return _context.abrupt("return");
 
             case 6:
-              _Message.success('删除成功'); // 当前是连线组代理，清空组数据
+              _Message.success('删除成功'); // 获取两个节点间的连线数据列表 
 
 
-              if (htTopo.isEdgeGroupAgent(edge)) {
-                // 获取两个节点间的连线数据列表 
-                edgesInNodes = htTopo.getEdgeDatasInNodes(edge.getSource(), edge.getTarget()); // 如果仅一条连线且有连线数据，则清空连线组数据，此时展示连线的数据
+              edgesInNodes = htTopo.getEdgeDatasInNodes(edge.getSource(), edge.getTarget());
 
-                if (edgesInNodes.length === 1 && htTopo.getEdgeData(edge)) {
+              if (edgesInNodes.length >= 2) {
+                htTopo.deleteEdge(edge);
+              } else {
+                // 一根线时
+                edgeGroupData = htTopo.getEdgeGroupData(edge.getSource(), edge.getTarget());
+                edgeData = htTopo.getEdgeData(edge);
+
+                if (isAgg && edgeData) {
+                  // 当前是连线组代理 且 有连线数据，清空组数据
                   htTopo.setEdgeGroupData(edge.getSource(), edge.getTarget(), null);
+                } else if (!isAgg && edgeGroupData) {
+                  htTopo.setEdgeData(edge, null);
                 } else {
                   htTopo.deleteEdge(edge);
                 }
-              } else {
-                htTopo.deleteEdge(edge);
               } // 更新数据
 
 
               _topo$store$getModel = topo.store.getModel('topoMod'), topoState = _topo$store$getModel[0], topoDispatchers = _topo$store$getModel[1];
               _topoState$data = topoState.data, links = _topoState$data.links, linkGroups = _topoState$data.linkGroups;
-              _context.next = 12;
+              _context.next = 13;
               return topoDispatchers.update({
                 data: _extends({}, topoState.data, {
                   links: links.filter(function (link) {
@@ -103,11 +111,11 @@ export default (function (_ref) {
                 })
               });
 
-            case 12:
+            case 13:
               // 刷新链路动态线宽
               topo.linkDynamicStyleExecutor.execute();
 
-            case 13:
+            case 14:
             case "end":
               return _context.stop();
           }

package/lib/core/common/icons/defaultIcons.js

@@ -3,22 +3,17 @@
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
 
 exports.__esModule = true;
-exports["default"] = exports.DEFAULT_NODE_ICONS = void 0;
+exports.DEFAULT_NODE_ICONS = void 0;
 
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 
-var _ciTypeIcons = require("@riil-frontend/component-topology-graph/es/icons/ciTypeIcons");
+var _componentTopologyGraph = require("@riil-frontend/component-topology-graph");
 
-function getIconImgUrlById(id) {
-  return (0, _ciTypeIcons.getIconMap)()[id];
-}
 /**
  * 资源面板图片-默认节点图标
  *
  * @type {(*|{url: *})[]}
  */
-
-
 var DEFAULT_NODE_ICONS = [{
   id: 'ciType.switch',
   name: '交换机'
@@ -52,11 +47,7 @@ var DEFAULT_NODE_ICONS = [{
   name: '互联网'
 }].map(function (item) {
   return (0, _extends2["default"])({}, item, {
-    url: getIconImgUrlById(item.id)
+    url: _componentTopologyGraph.iconFactory.getIconImageUrl(item.id)
   });
 });
-exports.DEFAULT_NODE_ICONS = DEFAULT_NODE_ICONS;
-
-var _default = (0, _extends2["default"])({}, (0, _ciTypeIcons.getIconMap)());
-
-exports["default"] = _default;
+exports.DEFAULT_NODE_ICONS = DEFAULT_NODE_ICONS;

package/lib/core/common/icons/icon.js

@@ -8,8 +8,6 @@ exports.getCustomIconIdFromHtId = getCustomIconIdFromHtId;
 exports.getEditorIcons = getEditorIcons;
 exports.getGroupDefaultIcons = getGroupDefaultIcons;
 exports.getGroupIconGroups = getGroupIconGroups;
-exports.getIconById = getIconById;
-exports.getIconMap = getIconMap;
 exports.getNodeDefaultIcons = getNodeDefaultIcons;
 exports.getNodeIconGroups = getNodeIconGroups;
 exports.getUserCustomIcons = getUserCustomIcons;
@@ -18,14 +16,10 @@ exports.transformCustomIcons2HtIcons = transformCustomIcons2HtIcons;
 
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 
-var _defaultIcons = _interopRequireWildcard(require("./defaultIcons"));
+var _defaultIcons = require("./defaultIcons");
 
 var _networkTopoCiTypeIcons = _interopRequireDefault(require("./networkTopoCiTypeIcons"));
 
-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 groupDefaultIcons = [{
   id: 'editor.icon.cloud.medium',
   name: '区域',
@@ -101,14 +95,6 @@ function transformCustomIcons2HtIcons(icons) {
 function getUserCustomIcons(topo) {
   var uploadIcons = topo.store.getModelState('iconManage').icons;
   return [].concat(transformCustomIcons2HtIcons(uploadIcons.node));
-}
-
-function getIconMap(topo) {
-  var bizIconMap = {};
-  [].concat(groupDefaultIcons, getNodeDefaultIcons(topo), getUserCustomIcons(topo)).forEach(function (icon) {
-    bizIconMap[icon.id] = icon;
-  });
-  return (0, _extends2["default"])({}, _defaultIcons["default"], bizIconMap);
 } // 获得节点图标列表
 
 
@@ -130,19 +116,4 @@ function getGroupIconGroups(topo) {
     name: '自定义',
     icons: getUserCustomIcons(topo)
   }];
-}
-
-function getIconById(id, topo) {
-  var iconMap = getIconMap(topo);
-  var icon = iconMap[id];
-
-  if (typeof icon === 'string') {
-    return icon.replace('.json', '.png');
-  }
-
-  if (!icon) {
-    console.warn('图标不存在', id, iconMap);
-  }
-
-  return icon === null || icon === void 0 ? void 0 : icon.url;
 }

package/lib/core/components/AlarmListPanel/index.js

@@ -5,8 +5,6 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 exports.__esModule = true;
 exports["default"] = void 0;
 
-var _dialog = _interopRequireDefault(require("@alifd/next/lib/dialog"));
-
 var _list = _interopRequireDefault(require("@alifd/next/lib/list"));
 
 var _react = _interopRequireWildcard(require("react"));
@@ -21,6 +19,8 @@ var _indexModule = _interopRequireDefault(require("./index.module.scss"));
 
 var _mocks = require("./mocks");
 
+var _rlog = _interopRequireDefault(require("@riil-frontend/component-topology-utils/es/rlog"));
+
 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; }
@@ -29,18 +29,16 @@ function AlarmListPanel(props, ref) {
   // 传入参数
   var topo = props.topo,
       target = props.toolBarRef,
+      titleBarRef = props.titleBarRef,
       visible = props.visible;
-  var alarm = topo.alarm;
 
   var _useState = (0, _react.useState)([]),
       alarmList = _useState[0],
       setAlarmList = _useState[1];
 
-  var _topo$store$useModel = topo.store.useModel('topoAlarm'),
+  var _topo$store$useModel = topo.store.useModel("topoAlarm"),
       alarmState = _topo$store$useModel[0],
-      alarmDispatchers = _topo$store$useModel[1]; // const [topoState, topoDispatchers] = store.useModel('topoMod');
-  // const{  alarmPanelIsOpen }  = store.getState().topoMod;
-
+      alarmDispatchers = _topo$store$useModel[1];
 
   var alarmData = alarmState.alarmData,
       alarmPanelIsOpen = alarmState.alarmPanelIsOpen,
@@ -52,42 +50,20 @@ function AlarmListPanel(props, ref) {
   };
 
   (0, _react.useEffect)(function () {
-    // console.log(
-    //   "AlarmListPanel-useEffect",
-    //   topo,
-    //   alarmPanelIsOpen,
-    //   alarmIsOpened,
-    //   alarmData,
-    //   alarmList
-    // );
     if (alarmData) {
       var _alarmData$slice;
 
-      topo.alarm.switchAlarmPopPanel(alarmIsOpened && (alarmData === null || alarmData === void 0 ? void 0 : alarmData.length) > 0);
-      setAlarmList((_alarmData$slice = alarmData === null || alarmData === void 0 ? void 0 : alarmData.slice(0, 10)) !== null && _alarmData$slice !== void 0 ? _alarmData$slice : []); // setAlarmList(alarmListDemo);
+      _rlog["default"].debug("AlarmListPanel-useEffect", alarmIsOpened); // topo.alarm.switchAlarmPopPanel(alarmIsOpened && alarmData?.length > 0);
+
+
+      setAlarmList((_alarmData$slice = alarmData === null || alarmData === void 0 ? void 0 : alarmData.slice(0, 10)) !== null && _alarmData$slice !== void 0 ? _alarmData$slice : []);
     } else {
       setAlarmList([]);
     }
   }, [alarmData]);
-  return /*#__PURE__*/_react["default"].createElement(_dialog["default"], {
+  return /*#__PURE__*/_react["default"].createElement("div", {
     className: _indexModule["default"].AlarmListPanel,
-    id: "AlarmListPanel",
-    align: false,
-    top: 100,
-    overlayProps: {
-      style: {
-        right: 15,
-        top: 100
-      },
-      target: {
-        target: target
-      }
-    },
-    onClose: onClose,
-    hasMask: false,
-    closeMode: "close",
-    visible: alarmPanelIsOpen,
-    footer: false
+    id: "AlarmListPanel"
   }, /*#__PURE__*/_react["default"].createElement(_list["default"], {
     header: /*#__PURE__*/_react["default"].createElement("div", {
       style: {
@@ -98,7 +74,14 @@ function AlarmListPanel(props, ref) {
     }, "\u5173\u8054\u544A\u8B66\u4FE1\u606F"), /*#__PURE__*/_react["default"].createElement(_reactRouterDom.Link, {
       className: _indexModule["default"].listTitleLink,
       to: "/default/alarmCenter/alarmList"
-    }, "\u67E5\u770B\u6240\u6709\u544A\u8B66")),
+    }, "\u67E5\u770B\u6240\u6709\u544A\u8B66"), /*#__PURE__*/_react["default"].createElement("a", {
+      role: "button",
+      "aria-label": "\u5173\u95ED",
+      className: "next-dialog-close",
+      onClick: onClose
+    }, /*#__PURE__*/_react["default"].createElement("i", {
+      className: "next-icon next-icon-close next-medium next-dialog-close-icon"
+    }))),
     dataSource: alarmList,
     emptyContent: /*#__PURE__*/_react["default"].createElement(_componentNoDataPage["default"], {
       className: _indexModule["default"].emptyContent,

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

@@ -93,6 +93,7 @@ var TopoView = function TopoView(props) {
       tData = _useState[0],
       setTData = _useState[1];
 
+  var titleBarRef = (0, _react.useRef)();
   var topoEdit = (0, _useTopoEdit["default"])({
     topo: topo,
     topoId: topoId,
@@ -300,6 +301,7 @@ var TopoView = function TopoView(props) {
   }), isEditMode && /*#__PURE__*/_react["default"].createElement(_EditorPlugin["default"], {
     topo: topo,
     topoEdit: topoEdit,
+    titleBarRef: titleBarRef,
     topoContext: {
       urlParams: urlParams
     },