@riil-frontend/component-topology 5.0.18 → 6.0.0-alpha.2

package/es/networkTopo/components/TopoView.js

@@ -1,9 +1,7 @@
 import _Loading from "@alifd/next/es/loading";
 import _extends from "@babel/runtime/helpers/extends";
-import _asyncToGenerator from "@babel/runtime/helpers/asyncToGenerator";
 import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/objectWithoutPropertiesLoose";
-var _excluded = ["topo", "titleBar", "onEnterEdit", "nodataPage", "notfoundPageProps", "noPermissionPageProps"];
-import _regeneratorRuntime from "@babel/runtime/regenerator";
+var _excluded = ["topo", "viewerProps", "titleBar", "nodataPage", "notfoundPageProps", "noPermissionPageProps"];
 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";
@@ -13,20 +11,16 @@ import TopoNoPermission from "./TopoNoPermission";
 import styles from "../../components/index.module.scss";
 import useLinkDynamicStyle from "../hooks/useLinkDynamicStyle";
 import useRelateTopo from "../hooks/viewer/useRelateTopo";
-import ViewerTools from "./viewer/titlebar/ViewerTools";
 import useEdgeFlow from "../hooks/viewer/useEdgeFlow";
-import LinkTip from "../../core/components/DisplaySettingDrawer/LinkTip";
-import LinkTagV2 from "./viewer/displaySetting/LinkTagV2";
 import useEdgeExpand from "../hooks/useEdgeExpand";
-import { showLinkByConfig } from "../../core/models/utils/linkUtils";
 /**
  * 拓扑组件。变化无权限、无数据显示
  */
 
 function NetworkTopologyCore(props) {
   var topo = props.topo,
+      viewerProps = props.viewerProps,
       titleBar = props.titleBar,
-      onEnterEdit = props.onEnterEdit,
       nodataPage = props.nodataPage,
       notfoundPageProps = props.notfoundPageProps,
       noPermissionPageProps = props.noPermissionPageProps,
@@ -51,95 +45,6 @@ function NetworkTopologyCore(props) {
   });
 
   var renderTopoView = function renderTopoView() {
-    var hancleDisplaySettingOk = /*#__PURE__*/function () {
-      var _ref = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee(config) {
-        return _regeneratorRuntime.wrap(function _callee$(_context) {
-          while (1) {
-            switch (_context.prev = _context.next) {
-              case 0:
-                // 单多链路切换
-                // console.log("单多链路切换-config", config.expandAllEdges);
-                if (config.expandAllEdges !== 1) {
-                  topo.getHtTopo().expandAllEdgeGroups();
-                  showLinkByConfig({
-                    topo: topo,
-                    showType: config.expandAllEdges
-                  });
-                } else {
-                  showLinkByConfig({
-                    topo: topo,
-                    showType: config.expandAllEdges
-                  });
-                  topo.getHtTopo().collapseAllEdgeGroups();
-                } // 更新链路动态样式
-
-
-                if (topo.linkDynamicStyleExecutor) {
-                  topo.linkDynamicStyleExecutor.execute();
-                }
-
-              case 2:
-              case "end":
-                return _context.stop();
-            }
-          }
-        }, _callee);
-      }));
-
-      return function hancleDisplaySettingOk(_x) {
-        return _ref.apply(this, arguments);
-      };
-    }();
-
-    var viewerProps = _extends({}, props.viewerProps, {
-      plugins: [],
-      // 右侧工具栏按钮
-      ViewerTitlebarRightTools: ViewerTools,
-      displaySettingProps: {
-        isNetworkTopo: true,
-        // 资源标注选项配置
-        nodeTagProps: {
-          commonOptions: [{
-            value: 'graph:name',
-            label: '图片名称'
-          }, {
-            value: 'attribute:display_name',
-            label: '显示名称'
-          }, {
-            value: 'attribute:ipv4_address',
-            label: 'IP地址'
-          }]
-        },
-        // 资源悬浮框选项配置
-        nodeTipProps: {
-          commonOptions: [{
-            value: 'attribute:ipv4_address',
-            label: 'IP地址'
-          }, {
-            value: 'attribute:display_name',
-            label: '显示名称'
-          }, {
-            value: 'ciType:display_name',
-            label: '资源类型'
-          }]
-        },
-        showLinkConfig: true,
-        // 是否显示链路流动效果配置
-        linkTagConfig: function linkTagConfig(params) {
-          return /*#__PURE__*/React.createElement(LinkTagV2, params);
-        },
-        linkTipConfig: function linkTipConfig(params) {
-          return /*#__PURE__*/React.createElement(LinkTip, params);
-        },
-        showEdgeExpandConfig: true,
-        // 是否显示连线展开折叠配置
-        // TODO 额外配置，单多链路切换、动态效果迁移到这里
-        // extraConfig: () => <div>1111</div>,
-        // 点击回调
-        onOk: hancleDisplaySettingOk
-      }
-    });
-
     var handleEvent = function handleEvent(event) {
       relateTopo.onEvent(event);
     };
@@ -151,7 +56,6 @@ function NetworkTopologyCore(props) {
       }),
       viewerProps: viewerProps,
       titleBar: titleBar,
-      onEnterEdit: onEnterEdit,
       onEvent: handleEvent
     }));
   };

package/es/networkTopo/components/Topology.js

@@ -1,45 +1,15 @@
 import _extends from "@babel/runtime/helpers/extends";
-import React, { useState, useEffect, useRef, useCallback } from "react";
+import React from "react";
 import TopoView from "./TopoView";
-import LayerRelatedResourceList from "./editor/propertyViews/LayerRelatedResourceList";
-import LayerConfigPlugin from "./editor/plugins/LayerConfigPlugin";
-import EdgeGroupPropertyView from "./editor/propertyViews/edge/EdgeGroupPropertyView";
-import LinkPropertyView from "./editor/propertyViews/edge/LinkPropertyView";
-import AddLinkDrawer from "./editor/propertyViews/edge/addLinkDrawer/AddLinkDrawer";
 import useTopoEdit from "../hooks/useTopoEdit";
-import EdgePropertyView from "./editor/propertyViews/edge/EdgePropertyView";
-import _useGroupSortResources from "../hooks/editor/useGroupSortResources";
+import useEditorProps from "./editor/useEditorProps";
 export default function NetworkTopologyFull(props) {
   var topo = props.topo,
-      customEditorProps = props.editorProps,
       showTools = props.showTools;
   var topoEdit = useTopoEdit({
     topo: topo
   });
-
-  var editorProps = _extends({
-    useGroupSortResources: function useGroupSortResources(nodes) {
-      return _useGroupSortResources(topo.store, nodes);
-    },
-    layerRelatedResourceList: LayerRelatedResourceList,
-    multipleElementPropertyViewProps: {
-      showElementAlign: true
-    },
-    // 连线属性面板
-    edgePropertyViews: {
-      edge: EdgePropertyView,
-      link: LinkPropertyView,
-      edgeGroup: EdgeGroupPropertyView
-    },
-    getEdgePropertyViewType: function getEdgePropertyViewType(_ref) {
-      var edge = _ref.edge;
-      return edge.getTag() ? "link" : null;
-    },
-    showLinkConfig: true
-  }, customEditorProps, {
-    plugins: [LayerConfigPlugin, AddLinkDrawer]
-  });
-
+  var editorProps = useEditorProps(props);
   return /*#__PURE__*/React.createElement(TopoView, _extends({}, props, {
     editorProps: editorProps,
     graphViewProps: _extends({}, props.graphViewProps, {

package/es/networkTopo/components/editor/useEditorProps.js

@@ -0,0 +1,34 @@
+import _extends from "@babel/runtime/helpers/extends";
+import _useGroupSortResources from "../../hooks/editor/useGroupSortResources";
+import LayerConfigPlugin from "./plugins/LayerConfigPlugin";
+import AddLinkDrawer from "./propertyViews/edge/addLinkDrawer/AddLinkDrawer";
+import EdgeGroupPropertyView from "./propertyViews/edge/EdgeGroupPropertyView";
+import EdgePropertyView from "./propertyViews/edge/EdgePropertyView";
+import LinkPropertyView from "./propertyViews/edge/LinkPropertyView";
+import LayerRelatedResourceList from "./propertyViews/LayerRelatedResourceList";
+export default function useEditorProps(props) {
+  var topo = props.topo,
+      customEditorProps = props.editorProps;
+  return _extends({
+    useGroupSortResources: function useGroupSortResources(nodes) {
+      return _useGroupSortResources(topo.store, nodes);
+    },
+    layerRelatedResourceList: LayerRelatedResourceList,
+    multipleElementPropertyViewProps: {
+      showElementAlign: true
+    },
+    // 连线属性面板
+    edgePropertyViews: {
+      edge: EdgePropertyView,
+      link: LinkPropertyView,
+      edgeGroup: EdgeGroupPropertyView
+    },
+    getEdgePropertyViewType: function getEdgePropertyViewType(_ref) {
+      var edge = _ref.edge;
+      return edge.getTag() ? 'link' : null;
+    },
+    showLinkConfig: true,
+    // 是否显示链路相关配置
+    plugins: [LayerConfigPlugin, AddLinkDrawer]
+  }, customEditorProps);
+}

package/es/networkTopo/hooks/useLinkDynamicStyle.js

@@ -7,7 +7,7 @@ import LinkDynamicStyleExecutor from "../models/LinkDynamicStyleExecutor";
  * @returns 
  */
 
-export default function (props) {
+export default function useLinkDynamicStyle(props) {
   var topo = props.topo;
   var linkDynamicStyleExecutor = useMemo(function () {
     return new LinkDynamicStyleExecutor(topo);

package/es/style.js

@@ -1,4 +1,5 @@
 import '@riil-frontend/component-topology-graph/es/style';
+import '@alifd/next/es/box/style';
 import '@alifd/next/es/message/style';
 import '@alifd/next/es/dialog/style';
 import '@riil-frontend/component-topology-utils/es/style';
@@ -25,7 +26,6 @@ import '@alifd/next/es/divider/style';
 import '@alifd/next/es/overlay/style';
 import '@alifd/next/es/checkbox/style';
 import '@riil-frontend/component-crucial-link-topo/es/style';
-import '@alifd/next/es/box/style';
 import '@alifd/next/es/list/style';
 import '@alifd/next/es/card/style';
 import '@alifd/next/es/radio/style';

package/lib/components/VerticalIconTab/VerticalIconTab.js

@@ -0,0 +1,74 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+exports.__esModule = true;
+exports["default"] = void 0;
+
+var _tab = _interopRequireDefault(require("@alifd/next/lib/tab"));
+
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+
+var _react = _interopRequireWildcard(require("react"));
+
+var _classnames = _interopRequireDefault(require("classnames"));
+
+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; }
+
+/**
+ * 自定义标题
+ * @param {*} param0 
+ * @returns 
+ */
+function CustomTabItem(_ref) {
+  var title = _ref.title,
+      icon = _ref.icon;
+  return /*#__PURE__*/_react["default"].createElement("div", {
+    className: "v-icon-tab-item"
+  }, /*#__PURE__*/_react["default"].createElement("img", {
+    src: icon,
+    alt: ""
+  }), /*#__PURE__*/_react["default"].createElement("div", {
+    className: "tab-title"
+  }, title));
+}
+/**
+ * 竖向
+ * @param {*} props 
+ * @returns 
+ */
+
+
+function VerticalIconTab(props) {
+  var _classNames;
+
+  var activeKey = props.activeKey,
+      onChange = props.onChange;
+
+  var handleClick = function handleClick() {
+    onChange(null);
+  };
+
+  return /*#__PURE__*/_react["default"].createElement(_tab["default"], (0, _extends2["default"])({
+    shape: "wrapped",
+    tabPosition: "left",
+    tabRender: function tabRender(key, props) {
+      return /*#__PURE__*/_react["default"].createElement(CustomTabItem, (0, _extends2["default"])({
+        key: key
+      }, props));
+    }
+  }, props, {
+    className: _VerticalIconTabModule["default"].tabs,
+    navClassName: _VerticalIconTabModule["default"].nav,
+    contentClassName: (0, _classnames["default"])(_VerticalIconTabModule["default"].content, (_classNames = {}, _classNames[_VerticalIconTabModule["default"].hide] = !activeKey, _classNames)),
+    onClick: handleClick
+  }));
+}
+
+VerticalIconTab.Item = _tab["default"].Item;
+var _default = VerticalIconTab;
+exports["default"] = _default;

package/lib/components/VerticalIconTab/VerticalIconTab.module.scss

@@ -0,0 +1,63 @@
+@import '~@alifd/next/variables.scss';
+
+
+.tabs {
+  height: 100%;
+
+}
+
+// 导航
+.nav {
+  width: 60px;
+  height: 100%;
+  padding-top: 4px;
+  // border-right: 1px solid #E6E7EB;
+  background: none !important;
+
+  :global {
+
+    .#{$css-prefix}tabs-tab {
+      background-color: transparent !important;
+
+      &.active .v-icon-tab-item {
+        background-color: rgba(76, 137, 255, 0.1);
+      }
+    }
+
+    // 图标区
+    .v-icon-tab-item {
+      height: 76px;
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+      justify-content: center;
+      margin: 0 4px;
+      border-radius: 4px;
+
+      &:hover {
+        background-color: rgba(76, 137, 255, 0.1);
+      }
+    }
+  }
+}
+
+// 标签页内容区
+.content {
+  width: 260px;
+  height: 100%;
+  transition: all .1s linear;
+  border-right: 1px solid var(--tab-wrapped-border-line-color);
+
+  :global {
+    .#{$css-prefix}tabs-tabpane {
+      width: 100%;
+      height: 100%;
+      overflow: auto;
+    }
+  }
+
+  &.hide {
+    width: 0;
+    border-right: none;
+  }
+}

package/lib/components/VerticalIconTab/index.js

@@ -0,0 +1,11 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+exports.__esModule = true;
+exports["default"] = void 0;
+
+var _VerticalIconTab = _interopRequireDefault(require("./VerticalIconTab"));
+
+var _default = _VerticalIconTab["default"];
+exports["default"] = _default;

package/lib/components/collapse/Collapse.js

@@ -0,0 +1,15 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+exports.__esModule = true;
+exports["default"] = void 0;
+
+var _react = _interopRequireDefault(require("react"));
+
+function Collapse(props) {
+  return /*#__PURE__*/_react["default"].createElement("div", null, "Collapse");
+}
+
+var _default = Collapse;
+exports["default"] = _default;

package/lib/components/collapse/Collapse.module.scss

@@ -0,0 +1,33 @@
+@import "@alifd/next/variables";
+
+.collapse {
+  :global {
+
+    // 折叠模板标题
+    .#{$css-prefix}collapse-panel:not(:first-child) {
+      border-top: none;
+    }
+
+    .#{$css-prefix}collapse-panel-title:hover {
+      background: none;
+    }
+
+    .#{$css-prefix}collapse-panel-title {
+      background: none;
+      font-size: 12px;
+      padding-left: 32px;
+
+      &>.#{$css-prefix}collapse-panel-icon {
+        left: 12px;
+        margin-top: 0;
+        margin-left: 0;
+      }
+    }
+
+    .#{$css-prefix}collapse-panel-content,
+    .#{$css-prefix}collapse-panel-expanded>.#{$css-prefix}collapse-panel-content {
+      padding-left: 32px;
+      padding-top: 8px;
+    }
+  }
+}

package/lib/components/collapse/CollapseFullheight.module.scss

@@ -0,0 +1,20 @@
+@import "@alifd/next/variables";
+
+.fullheight {
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+
+  .panelFullHeight {
+    height: 100%;
+    display: flex;
+    flex-direction: column;
+
+    :global {
+      .#{$css-prefix}collapse-panel-content {
+        flex: 1;
+        overflow: auto;
+      }
+    }
+  }
+}

package/lib/components/collapse/Panel.js

@@ -72,6 +72,9 @@ function CollapsePanel(props) {
     },
     onBlur: function onBlur() {
       setHoverExtra(false);
+    },
+    style: {
+      height: 20
     }
   }, extra));
 

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

@@ -11,6 +11,7 @@ exports.getGroupIconGroups = getGroupIconGroups;
 exports.getNodeDefaultIcons = getNodeDefaultIcons;
 exports.getNodeIconGroups = getNodeIconGroups;
 exports.getUserCustomIcons = getUserCustomIcons;
+exports.getUserCustomIconsForHt = getUserCustomIconsForHt;
 exports.transformCustomIcon2HtIcon = transformCustomIcon2HtIcon;
 exports.transformCustomIcons2HtIcons = transformCustomIcons2HtIcons;
 
@@ -30,6 +31,20 @@ function getNodeDefaultIcons(topo) {
 function getGroupDefaultIcons(topo) {
   return [].concat(_manager["default"].iconLibManager.getIcons());
 }
+
+function getUserCustomIconsForHt(topo) {
+  return getUserCustomIcons(topo).map(function (_ref) {
+    var id = _ref.id,
+        name = _ref.name,
+        url = _ref.url,
+        jsonUrl = _ref.jsonUrl;
+    return {
+      id: id,
+      name: name,
+      url: jsonUrl || url
+    };
+  });
+}
 /**
  * 获取编辑模式左侧图片列表
  * @param {*} topo 
@@ -41,11 +56,11 @@ function getEditorIcons(topo) {
     // 默认图标
     system: getNodeDefaultIcons(topo),
     // 自定义上传图标
-    custom: getUserCustomIcons(topo).map(function (_ref) {
-      var id = _ref.id,
-          name = _ref.name,
-          url = _ref.url,
-          jsonUrl = _ref.jsonUrl;
+    custom: getUserCustomIcons(topo).map(function (_ref2) {
+      var id = _ref2.id,
+          name = _ref2.name,
+          url = _ref2.url,
+          jsonUrl = _ref2.jsonUrl;
       return {
         id: id,
         name: name,

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

@@ -22,10 +22,29 @@ 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; }
 
 var alarmLink = function alarmLink(alarmInfo) {
-  // console.log("alarmLink", alarmInfo);
+  // console.log('alarmLink', alarmInfo);
   return "/default/pagecenter/" + _uicbb.PAGE_TYPE.ALERT_DETAIL + "/view/" + alarmInfo.alertId + "?alertId=" + alarmInfo.alertId + "&resId=" + alarmInfo.ciId + "&title=" + alarmInfo.alertObject + "&ruleId=" + alarmInfo.ruleId + "&ciCode=" + alarmInfo.ciTypeCode + "&ciType=" + alarmInfo.ciType;
 };
 
+var getNode = function getNode(topo, alarmInfo) {
+  var id = alarmInfo.resourceId || alarmInfo.ciId;
+  var node = topo.getHtTopo().getGraphView().dm().getDataByTag(id);
+
+  if (node.getParent()) {
+    var data = node.getParent();
+    topo.getHtTopo().getGraphView().fitData(data, true, 20, true); // eslint-disable-next-line no-underscore-dangle, eqeqeq
+
+    if (data._animation.start[0] != 'hide') {
+      topo.getHtTopo().getGraphView().dm().getSelectionModel().setSelection(node);
+    } else {
+      topo.getHtTopo().getGraphView().dm().getSelectionModel().setSelection(data);
+    }
+  } else {
+    topo.getHtTopo().getGraphView().fitData(node, true, 20, true);
+    topo.getHtTopo().getGraphView().dm().getSelectionModel().setSelection(node);
+  }
+};
+
 function AlarmListItem(props) {
   // 传入参数
   var topo = props.topo,
@@ -36,13 +55,19 @@ function AlarmListItem(props) {
     media: /*#__PURE__*/_react["default"].createElement(_icon["default"], {
       type: "gaojing-3",
       size: "xs",
-      className: _indexModule["default"]["alarm-color-icon"] + " alarm-color-icon-lv" + alarmInfo.alertLevel
+      className: _indexModule["default"]['alarm-color-icon'] + " alarm-color-icon-lv" + alarmInfo.alertLevel
     })
-  }, /*#__PURE__*/_react["default"].createElement("span", {
-    onClick: onClick
+  }, /*#__PURE__*/_react["default"].createElement("span", null, /*#__PURE__*/_react["default"].createElement("div", {
+    className: _indexModule["default"].list,
+    onClick: function onClick() {
+      getNode(topo, alarmInfo);
+    }
+  }, "" + alarmInfo.alertObject + alarmInfo.alertTitle), /*#__PURE__*/_react["default"].createElement("div", {
+    className: _indexModule["default"].listLink
   }, /*#__PURE__*/_react["default"].createElement(_Link["default"], {
+    onClick: onClick,
     to: alarmLink(alarmInfo)
-  }, "" + alarmInfo.alertObject + alarmInfo.alertTitle)));
+  }, "\u67E5\u770B\u8BE6\u60C5"))));
 }
 
 function RiskListItem(props) {
@@ -60,13 +85,19 @@ function RiskListItem(props) {
     media: /*#__PURE__*/_react["default"].createElement(_icon["default"], {
       type: "Overall_risk_full",
       size: "xs",
-      className: _indexModule["default"]["alarm-color-icon"] + " alarm-color-icon-lv2"
+      className: _indexModule["default"]['alarm-color-icon'] + " alarm-color-icon-lv2"
     })
-  }, /*#__PURE__*/_react["default"].createElement("span", {
-    onClick: onClick
+  }, /*#__PURE__*/_react["default"].createElement("span", null, /*#__PURE__*/_react["default"].createElement("div", {
+    className: _indexModule["default"].list,
+    onClick: function onClick() {
+      getNode(topo, alarmInfo);
+    }
+  }, " ", "" + alarmInfo.ciName + alarmInfo.itemName), /*#__PURE__*/_react["default"].createElement("div", {
+    className: _indexModule["default"].listLink
   }, /*#__PURE__*/_react["default"].createElement(_Link["default"], {
+    onClick: onClick,
     to: riskLink(alarmInfo)
-  }, "" + alarmInfo.ciName + alarmInfo.itemName)));
+  }, "\u67E5\u770B\u8BE6\u60C5"))));
 }
 
 function ListItem(props) {

package/lib/core/components/AlarmListPanel/components/index.module.scss

@@ -4,4 +4,30 @@
         height: 12px;
         font-size: 12px;
     }
+    :global{
+        .next-list-item-content>span{
+            width: 100%;
+            cursor: pointer;
+        }
+    }
+    
+}
+.list{
+    width: 81%;
+    float: left;
 }
+.listLink{
+    float: right;
+    width: 17%;
+    font-size: 12px;
+    color: #4C89FF;
+    height: 100%;
+    display:flex;
+    :global{
+        a{
+            color: #4C89FF !important;
+            align-self: center;
+          }
+    }
+  
+}

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

@@ -13,16 +13,16 @@ var _card = _interopRequireDefault(require("@alifd/next/lib/card"));
 
 var _react = _interopRequireWildcard(require("react"));
 
-var _AlarmListItem = _interopRequireDefault(require("./components/AlarmListItem"));
-
 var _componentNoDataPage = _interopRequireDefault(require("@riil-frontend/component-no-data-page"));
 
+var _rlog = _interopRequireDefault(require("@riil-frontend/component-topology-utils/es/rlog"));
+
+var _AlarmListItem = _interopRequireDefault(require("./components/AlarmListItem"));
+
 var _indexModule = _interopRequireDefault(require("./index.module.scss"));
 
 var _mocks = require("./mocks");
 
-var _rlog = _interopRequireDefault(require("@riil-frontend/component-topology-utils/es/rlog"));
-
 var _Link = _interopRequireDefault(require("../../../components/Link"));
 
 var _useAlarmList = _interopRequireDefault(require("./hooks/useAlarmList"));
@@ -58,7 +58,10 @@ function AlarmListPanel(props, ref) {
       className: _indexModule["default"].listTitleLink,
       to: "/default/alarmCenter/alarmList"
     }, "\u67E5\u770B\u6240\u6709\u544A\u8B66"))),
-    extra: /*#__PURE__*/_react["default"].createElement("a", {
+    extra:
+    /*#__PURE__*/
+    // eslint-disable-next-line jsx-a11y/interactive-supports-focus
+    _react["default"].createElement("a", {
       role: "button",
       "aria-label": "\u5173\u95ED",
       className: "next-dialog-close",
@@ -87,7 +90,8 @@ function AlarmListPanel(props, ref) {
         alarmInfo: item,
         key: index,
         Link: _Link["default"],
-        onClick: onClose
+        onClick: onClose,
+        topo: topo
       });
     }
   }))));