@riil-frontend/component-topology 2.14.2-alpha.2 → 2.14.2-alpha.6

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

@@ -0,0 +1,146 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+exports.__esModule = true;
+exports["default"] = void 0;
+
+var _drawer = _interopRequireDefault(require("@alifd/next/lib/drawer"));
+
+var _tab = _interopRequireDefault(require("@alifd/next/lib/tab"));
+
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+
+var _menuButton = _interopRequireDefault(require("@alifd/next/lib/menu-button"));
+
+var _react = _interopRequireWildcard(require("react"));
+
+var _componentTopologyGraph = require("@riil-frontend/component-topology-graph");
+
+var _indexModule = _interopRequireDefault(require("./index.module.scss"));
+
+var _ResourceOverview = _interopRequireDefault(require("./components/ResourceOverview"));
+
+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; }
+
+// import ResourceDiplayInfoSetting from './Setting';
+// bimport '@riil-frontend/css/lib/index.scss';
+function Title(_ref) {
+  var id = _ref.id,
+      name = _ref.name,
+      type = _ref.type,
+      onChange = _ref.onChange;
+
+  if (type === 'node') {
+    // 查询资源列表
+    var nodes = topo.store.getModelState('topoMod').data.nodes;
+    console.log('查询资源列表', nodes);
+    return /*#__PURE__*/_react["default"].createElement(_menuButton["default"], {
+      text: true,
+      label: name,
+      onItemClick: function onItemClick(key) {
+        return onChange(nodes.find(function (item) {
+          return item.id === key;
+        }) || '');
+      }
+    }, nodes.filter(function (item) {
+      return item.id !== id;
+    }).map(function (item) {
+      return /*#__PURE__*/_react["default"].createElement(_menuButton["default"].Item, {
+        key: item.id
+      }, item.name);
+    }));
+  } else {
+    return name;
+  }
+} // 基本信息
+
+
+function BaseInfo(props) {
+  var topo = props.topo;
+
+  var _topo$store$useModel = topo.store.useModel('topoBaseInfoOverview'),
+      topoState = _topo$store$useModel[0],
+      topoDispatchers = _topo$store$useModel[1];
+
+  var _useState = (0, _react.useState)(false),
+      visible = _useState[0],
+      setVisible = _useState[1];
+
+  var _useState2 = (0, _react.useState)({
+    id: '',
+    name: '',
+    type: '',
+    // 类型： node、link
+    ciType: ''
+  }),
+      activeData = _useState2[0],
+      setActiveData = _useState2[1];
+
+  (0, _react.useEffect)(function () {
+    var notifier = topo.view.topoClient.notifier;
+    notifier.on(_componentTopologyGraph.TopoEvent.EVENT_DOUBLE_CLICK, openOverview);
+    return function () {
+      notifier.off(_componentTopologyGraph.TopoEvent.EVENT_DOUBLE_CLICK, openOverview);
+    };
+  }, []);
+
+  function openOverview(data) {
+    console.log('openOverview data', data);
+    var id = data.id,
+        name = data.name,
+        type = data.type,
+        ciType = data.ciType;
+    setActiveData({
+      id: id,
+      name: name,
+      type: type,
+      ciType: ciType
+    });
+
+    var _topo$ciTyeCache$getC = topo.ciTyeCache.getCiType(ciType),
+        metrics = _topo$ciTyeCache$getC.metrics;
+
+    console.log('openOverview metrics', metrics);
+    topoDispatchers.update({
+      id: id,
+      metricCodes: metrics.slice(0, 6).map(function (item) {
+        return item.code;
+      }) // 需要展示的关键指标 code
+
+    });
+    setVisible(true);
+  }
+
+  function onChangeActive(activeNode) {
+    console.log('activeNode', activeNode);
+    activeNode && openOverview((0, _extends2["default"])({}, activeNode, {
+      type: 'node'
+    }));
+  }
+
+  return /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, /*#__PURE__*/_react["default"].createElement(_drawer["default"], {
+    className: _indexModule["default"].baseInfo,
+    closeMode: ['close', 'esc'],
+    visible: visible,
+    title: /*#__PURE__*/_react["default"].createElement(Title, (0, _extends2["default"])({}, activeData, {
+      onChange: onChangeActive
+    })),
+    width: 580,
+    hasMask: false,
+    onClose: function onClose() {
+      return setVisible(false);
+    }
+  }, visible && /*#__PURE__*/_react["default"].createElement(_tab["default"], {
+    className: _indexModule["default"].tab
+  }, /*#__PURE__*/_react["default"].createElement(_tab["default"].Item, {
+    title: "\u8D44\u6E90\u6982\u89C8",
+    key: "1"
+  }, /*#__PURE__*/_react["default"].createElement(_ResourceOverview["default"], (0, _extends2["default"])({}, props, activeData))))));
+}
+
+;
+var _default = BaseInfo;
+exports["default"] = _default;

package/lib/core/viewer/components/plugins/BaseInfo/index.module.scss

@@ -0,0 +1,24 @@
+@import '~@alifd/next/variables.scss';
+
+.baseInfo {
+  z-index: 1009;
+  :global {
+    .#{$css-prefix}drawer-body {
+      height: calc(100% - 46px);
+      padding: 16px 24px;
+      .#{$css-prefix}tabs-content{
+        height: calc(100% - 31px);
+        overflow: auto;
+      }
+    }
+  }
+  .tab{
+    height: 100%;
+    :global {
+      .#{$css-prefix}tabs-content{
+        height: calc(100% - 31px);
+        overflow: auto;
+      }
+    }
+  }
+}

package/lib/core/viewer/components/plugins/ViewerPlugin.js

@@ -15,11 +15,13 @@ var _ResourceDetailDrawerPlugin = _interopRequireDefault(require("./ResourceDeta
 
 var _MetricPollingPlugin = _interopRequireDefault(require("./MetricPollingPlugin"));
 
+var _BaseInfo = _interopRequireDefault(require("./BaseInfo"));
+
 function ViewerPlugin(props) {
   var topo = props.topo,
       viewerProps = props.viewerProps;
   var store = topo.store;
-  var plugins = [_MetricPollingPlugin["default"], _ResourceDetailDrawerPlugin["default"], _ResourceWebControllUrlSettingDialog["default"]].concat((viewerProps === null || viewerProps === void 0 ? void 0 : viewerProps.plugins) || []);
+  var plugins = [_MetricPollingPlugin["default"], _ResourceDetailDrawerPlugin["default"], _ResourceWebControllUrlSettingDialog["default"], _BaseInfo["default"]].concat((viewerProps === null || viewerProps === void 0 ? void 0 : viewerProps.plugins) || []);
   return /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, plugins.map(function (Plugin, index) {
     return /*#__PURE__*/_react["default"].createElement(Plugin, (0, _extends2["default"])({
       key: index,

package/lib/core/viewer/components/titlebar/widgets/MoreButtonMenu.js

@@ -17,6 +17,8 @@ var _react = _interopRequireWildcard(require("react"));
 
 var _useSetDefaultTopo = _interopRequireDefault(require("../useSetDefaultTopo"));
 
+var _exportData = _interopRequireDefault(require("../../../../utils/exportData"));
+
 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; }
@@ -35,6 +37,10 @@ function MoreButtonMenu(props) {
     })),
     triggerType: "click"
   }, /*#__PURE__*/_react["default"].createElement(_menu["default"], null, setDefaultTopo.renderMenuItem(), /*#__PURE__*/_react["default"].createElement(_menu["default"].Item, {
+    onClick: function onClick() {
+      (0, _exportData["default"])(topo);
+    }
+  }, "\u5BFC\u51FA\u6570\u636E"), /*#__PURE__*/_react["default"].createElement(_menu["default"].Item, {
     onClick: function onClick() {
       topo.exportImage();
     }

package/lib/getStoreModels.js

@@ -39,6 +39,8 @@ var _linkManager = _interopRequireDefault(require("./models/linkManager"));
 
 var _displayConfig = _interopRequireDefault(require("./models/displayConfig"));
 
+var _topoBaseInfoOverview = _interopRequireDefault(require("./models/topoBaseInfoOverview"));
+
 var _default = {
   topoMod: _topoMod["default"],
   iconManage: _iconManage["default"],
@@ -56,6 +58,7 @@ var _default = {
   topoView: _topoView["default"],
   topoGraphView: _topoGraphView["default"],
   topoAlarm: _topoAlarm["default"],
-  displayConfig: _displayConfig["default"]
+  displayConfig: _displayConfig["default"],
+  topoBaseInfoOverview: _topoBaseInfoOverview["default"]
 };
 exports["default"] = _default;

package/lib/hooks/useAlarm.js

@@ -91,7 +91,7 @@ function useAlarm(options) {
               _store$getModelState = store.getModelState("topoMod"), viewState = _store$getModelState.viewState; // 添加事件
 
               type = data.type, alertData = data.data;
-              console.log("getAlarmByEE", type, alertData);
+              console.log("getAlarmByEE-type, alertData", type, alertData);
 
               if (!(viewState === "view" && type === "alarm" && (0, _utils.isAvailableArray)(alertData))) {
                 _context.next = 12;

package/lib/hooks/usePolling.js

@@ -34,6 +34,7 @@ var usePolling = function usePolling(props) {
   var resAndMetrics = bizState.resAndMetrics,
       pollingSwitch = bizState.pollingSwitch;
   var displayConfig = topo.store.useModelState('displayConfig');
+  var resourceOverviewState = topo.store.useModelState('topoBaseInfoOverview');
   var linkDynamicStyleDispatcher = store.useModelDispatchers('linkDynamicStyle');
   var resIdsList = resAndMetrics === null || resAndMetrics === void 0 ? void 0 : resAndMetrics.resIdsList; // 轮询hooks
 
@@ -86,7 +87,7 @@ var usePolling = function usePolling(props) {
 
       stopPoll();
     };
-  }, [pollingSwitch, resIdsList, displayConfig]);
+  }, [pollingSwitch, resIdsList, displayConfig, resourceOverviewState.id, resourceOverviewState.metricCodes]);
   /**
    * 
    * @returns {{id, attributes: object[], metrics: object[]}[]} 属性和指标

package/lib/models/topoAlarm.js

@@ -33,6 +33,7 @@ var _default = {
     alarmOpening: false,
     alarmIsOpened: true,
     alarmRecord: [],
+    alarmDoc: {},
     alarmDatas: [],
     alarmPanelIsOpen: false
   },
@@ -45,16 +46,39 @@ var _default = {
   // 定义处理该模型副作用的函数
   effects: function effects(dispatch) {
     return {
-      // 初始化，统一获取指标和属性
-      combAlarmData: function combAlarmData(conditions, state) {
+      resetAlarmDoc: function resetAlarmDoc(conditions, state) {
         var _this = this;
 
         return (0, _asyncToGenerator2["default"])( /*#__PURE__*/_regenerator["default"].mark(function _callee() {
-          var alarmdata, _state$topoAlarm, alarmDoc, alarmRecord, _state$topoMod, resAndMetrics, topoData, resIdsList, alarmCiDoc, doc, record, i, item, rid, obj, sliceTag, alarmList;
-
           return _regenerator["default"].wrap(function _callee$(_context) {
             while (1) {
               switch (_context.prev = _context.next) {
+                case 0:
+                  _this.update({
+                    alarmDoc: {},
+                    alarmRecord: []
+                  });
+
+                  return _context.abrupt("return", 'resetAlarmDoc Over');
+
+                case 2:
+                case "end":
+                  return _context.stop();
+              }
+            }
+          }, _callee);
+        }))();
+      },
+      // 归档处理告警信息
+      combAlarmData: function combAlarmData(conditions, state) {
+        var _this2 = this;
+
+        return (0, _asyncToGenerator2["default"])( /*#__PURE__*/_regenerator["default"].mark(function _callee2() {
+          var alarmdata, _state$topoAlarm, alarmDoc, alarmRecord, _state$topoMod, resAndMetrics, topoData, resIdsList, alarmCiDoc, doc, record, i, item, rid, obj, sliceTag, alarmList;
+
+          return _regenerator["default"].wrap(function _callee2$(_context2) {
+            while (1) {
+              switch (_context2.prev = _context2.next) {
                 case 0:
                   alarmdata = conditions.alarmdata;
                   _state$topoAlarm = state.topoAlarm, alarmDoc = _state$topoAlarm.alarmDoc, alarmRecord = _state$topoAlarm.alarmRecord;
@@ -62,19 +86,18 @@ var _default = {
                   resIdsList = resAndMetrics.resIdsList, alarmCiDoc = resAndMetrics.alarmCiDoc;
                   doc = (0, _extends2["default"])({}, alarmDoc);
 
-                  _rlog["default"].debug("topoAlarmMod.combAlarmData--state", state, _this);
+                  _rlog["default"].debug("topoAlarmMod.combAlarmData--alarmdata-resIdsList", alarmdata, resIdsList); // rlog.debug("topoAlarmMod.combAlarmData-alarmDoc, alarmRecord ", alarmDoc, alarmRecord );
 
-                  _rlog["default"].debug("topoAlarmMod.combAlarmData--alarmdata-resIdsList", conditions.alarmdata, resAndMetrics, resIdsList);
 
-                  _rlog["default"].debug("topoAlarmMod.combAlarmData-alarmDoc, alarmRecord ", alarmDoc, alarmRecord);
+                  record = _lodash["default"].uniq(alarmRecord);
 
-                  record = _lodash["default"].uniq(alarmRecord); // rlog.debug('告警归档', doc, record, alarmRecord);
+                  _rlog["default"].debug('告警归档-doc, record, alarmRecord', doc, record, alarmRecord);
 
                   for (i = 0; i < alarmdata.length; i++) {
                     item = (0, _extends2["default"])({}, alarmdata[i]);
                     rid = alarmCiDoc[item.id];
 
-                    _rlog["default"].debug('接到一条告警', item, rid, item.id, item.alertId, item.status);
+                    _rlog["default"].debug('处理一条告警', item, rid, item.id, item.alertId, item.status);
 
                     if ((resIdsList || []).indexOf(rid) >= 0) {
                       obj = item.obj;
@@ -99,8 +122,9 @@ var _default = {
 
                           if (sliceTag >= 0) {
                             doc[rid].splice(sliceTag, 1);
-                          } // rlog.debug('该告警移除状态', sliceTag, doc[item.id]);
+                          }
 
+                          _rlog["default"].debug('该告警移除状态', sliceTag, doc[rid], doc);
 
                           if (doc[rid].length === 0) {
                             delete doc[rid];
@@ -108,9 +132,9 @@ var _default = {
                         }
 
                         record.splice(record.indexOf(obj.alertId), 1);
-                      } else {// rlog.debug('重复告警', item);
+                      } else {
+                        _rlog["default"].debug('重复告警', item);
                       }
-                    } else {// rlog.debug('这条告警不属于当前拓扑', resIdsList, item.id);
                     }
                   }
 
@@ -127,21 +151,23 @@ var _default = {
                     } else {
                       return null;
                     }
-                  }); // rlog.debug('告警归档结束', alarmList, doc, record);
+                  });
 
-                  _this.update({
+                  _rlog["default"].debug('告警归档结束', alarmList, doc, record);
+
+                  _this2.update({
                     alarmDoc: doc,
                     alarmRecord: record
                   });
 
-                  return _context.abrupt("return", _lodash["default"].compact(alarmList));
+                  return _context2.abrupt("return", _lodash["default"].compact(alarmList));
 
                 case 14:
                 case "end":
-                  return _context.stop();
+                  return _context2.stop();
               }
             }
-          }, _callee);
+          }, _callee2);
         }))();
       }
     };

package/lib/models/topoBaseInfoOverview.js

@@ -0,0 +1,55 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+exports.__esModule = true;
+exports["default"] = void 0;
+
+var _regenerator = _interopRequireDefault(require("@babel/runtime/regenerator"));
+
+var _asyncToGenerator2 = _interopRequireDefault(require("@babel/runtime/helpers/asyncToGenerator"));
+
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+
+var _rlog = _interopRequireDefault(require("@riil-frontend/component-topology-utils/es/rlog"));
+
+var _topo = _interopRequireDefault(require("@riil-frontend/component-topology-common/es/services/topo"));
+
+/**
+ * 拓扑图 基本信息-概览
+ */
+var _default = {
+  // 定义 model 的初始 state
+  state: {
+    id: '',
+    // 当前 id
+    metricCodes: [] // 当前资源/链路需要的关键指标（模型前6个）
+
+  },
+  // 定义改变该模型状态的纯函数
+  reducers: {
+    update: function update(prevState, payload) {
+      console.log('payload', payload);
+      return (0, _extends2["default"])({}, prevState, payload);
+    }
+  },
+  // 定义处理该模型副作用的函数
+  effects: function effects(dispatch) {
+    return {
+      init: function init(payload, rootState) {
+        return (0, _asyncToGenerator2["default"])( /*#__PURE__*/_regenerator["default"].mark(function _callee() {
+          return _regenerator["default"].wrap(function _callee$(_context) {
+            while (1) {
+              switch (_context.prev = _context.next) {
+                case 0:
+                case "end":
+                  return _context.stop();
+              }
+            }
+          }, _callee);
+        }))();
+      }
+    };
+  }
+};
+exports["default"] = _default;

package/lib/models/topoBizMod.js

@@ -190,76 +190,6 @@ function _default(engine) {
         },
 
         /**
-         * 以下内容转移至topoAlarm
-         ** /
-        // async combAlarmData(conditions, state) {
-        //   const { alarmdata } = conditions;
-        //   const { alarmDoc, alarmRecord } = state.topoBizMod;
-        //   const { resIdsList } = state.topoBizMod.resAndMetrics;
-        //   const doc = { ...alarmDoc };
-        //   rlog.debug('topoBizMod.combAlarmData', conditions.alarmdata, resIdsList);
-        //   const record = _.uniq(alarmRecord);
-        //   // rlog.debug('告警归档', doc, record, alarmRecord);
-        //   for (let i = 0; i < alarmdata.length; i++) {
-        //     const item = { ...alarmdata[i] };
-        //     // rlog.debug('接到一条告警', item.id, item.alertId, item.status);
-        //     if ((resIdsList || []).indexOf(item.id) >= 0) {
-        //       const { obj } = item;
-        //       if (record.indexOf(item.alertId) < 0 && item.status === 'toDeal') {
-        //       // rlog.debug('这是一条新告警');
-        //         record.push(item.alertId);
-        //         if (doc.hasOwnProperty(item.id)) {
-        //           if (
-        //             findItem(doc[item.id], 'alertId', item.alertId) === undefined
-        //           ) {
-        //             doc[item.id].push(item);
-        //           }
-        //           doc[item.id] = doc[item.id].sort(sortList);
-        //         } else {
-        //           doc[item.id] = [item];
-        //         }
-        //       } else if (item.status !== 'toDeal') {
-        //       // rlog.debug('该告警移除', item.status, doc[item.id]);
-        //         if (doc.hasOwnProperty(item.id)) {
-        //           const sliceTag = findItemIndex(
-        //             doc[item.id],
-        //             'alertId',
-        //             item.alertId
-        //           );
-        //           if (sliceTag >= 0) {
-        //             doc[item.id].splice(sliceTag, 1);
-        //           }
-        //           // rlog.debug('该告警移除状态', sliceTag, doc[item.id]);
-          //           if (doc[item.id].length === 0) {
-        //             delete doc[item.id];
-        //           }
-        //         }
-          //         record.splice(record.indexOf(obj.alertId), 1);
-        //       } else {
-        //       // rlog.debug('重复告警', item);
-        //       }
-        //     } else {
-        //     // rlog.debug('这条告警不属于当前拓扑', resIdsList, item.id);
-        //     }
-        //   }
-        //   // rlog.debug('准备发送的告警', doc, record);
-        //   const alarmList = Object.keys(doc).map((id) => {
-        //     if (doc[id].length > 0) {
-        //       const alarmObj = doc[id][0];
-        //       // rlog.debug('xxxxxxxxxxxxxxxxxxxx', doc[id][0], alarmObj.status);
-        //       return alarmObj.status === 'toDeal' ? alarmObj : null;
-        //     } else {
-        //       return null;
-        //     }
-        //   });
-        //   // rlog.debug('告警归档结束', alarmList, doc, record);
-        //   this.update({
-        //     alarmDoc: doc,
-        //     alarmRecord: record,
-        //   });
-        //   return _.compact(alarmList);
-        // },
-          /**
         * 设置属性和指标
         * @param attrsAndMetrics
         */

package/lib/style.js

@@ -14,29 +14,30 @@ require('@alifd/next/lib/select/style');
 require('@riil-frontend/component-riil-rule-tree/lib/style');
 require('@alifd/next/lib/balloon/style');
 require('@alifd/next/lib/drawer/style');
-require('@alifd/next/lib/table/style');
-require('@alifd/next/lib/grid/style');
-require('@riil-frontend/component-action-tree/lib/style');
-require('@riil-frontend/component-table-layout/lib/style');
-require('@riil-frontend/hooks/lib/style');
 require('@alifd/next/lib/loading/style');
 require('@riil-frontend/component-extra-title/lib/style');
 require('@riil-frontend/next-collapse/lib/style');
 require('@riil-frontend/component-more-buttons-menu/lib/style');
 require('@riil-frontend/component-row-delete-ballon/lib/style');
+require('@alifd/next/lib/grid/style');
 require('@riil-frontend/component-topology-common/lib/style');
 require('@riil-frontend/component-common-res-list/lib/style');
 require('@riil-frontend/component-no-data-page/lib/style');
 require('@alifd/next/lib/box/style');
+require('@alifd/next/lib/tab/style');
+require('@alifd/next/lib/menu-button/style');
+require('@alifd/next/lib/table/style');
+require('@alifd/next/lib/divider/style');
 require('@alifd/next/lib/dropdown/style');
 require('@alifd/next/lib/menu/style');
 require('@alifd/next/lib/radio/style');
 require('@alifd/next/lib/checkbox/style');
+require('@riil-frontend/component-action-tree/lib/style');
+require('@riil-frontend/component-table-layout/lib/style');
+require('@riil-frontend/hooks/lib/style');
 require('@alifd/next/lib/search/style');
-require('@alifd/next/lib/tab/style');
 require('@alifd/next/lib/collapse/style');
 
-require('@alifd/next/lib/divider/style');
 require('@alifd/next/lib/list/style');
 require('@alifd/next/lib/tag/style');
 require('@riil-frontend/component-topology-utils/lib/style');