@riil-frontend/component-topology 9.0.0-a.1 → 9.0.0-a.3

package/lib/core/models/AttributeMetricDisplay.js

@@ -364,106 +364,50 @@ var AttributeMetricDisplay = /*#__PURE__*/function () {
     });
   }
   /**
-   * 查询拓扑图资源的属性指标
+   * 加载标注、悬浮框数据
    * 
-   * @returns {array}
+   * @param {array<{id, attributeMap: {}, metricMap: {}}>} data
    */
   ;
 
-  _proto.fetchData =
+  _proto.loadData =
   /*#__PURE__*/
   function () {
-    var _fetchData = (0, _asyncToGenerator2["default"])( /*#__PURE__*/_regenerator["default"].mark(function _callee() {
-      var topo, _topo$store$getModelS, resIdsList, nodeIdsList, codes, param, transformLinkData, result;
-
+    var _loadData = (0, _asyncToGenerator2["default"])( /*#__PURE__*/_regenerator["default"].mark(function _callee(data) {
+      var topo, ciDatas, bizDispatchers;
       return _regenerator["default"].wrap(function _callee$(_context) {
         while (1) {
           switch (_context.prev = _context.next) {
             case 0:
-              transformLinkData = function _transformLinkData(data) {
-                var _topo$dataModel$getDa = topo.dataModel.getData(),
-                    links = _topo$dataModel$getDa.links,
-                    linkGroups = _topo$dataModel$getDa.linkGroups;
-
-                var link = [].concat(links, linkGroups).find(function (item) {
-                  return item.id === data.id;
-                });
-
-                if (!link) {
-                  return data;
-                }
-
-                var attributeMap = data.attributeMap;
-                attributeMap = (0, _extends2["default"])({}, link.attributes || {});
-                return (0, _extends2["default"])({}, data, {
-                  attributeMap: attributeMap
-                });
-              };
+              // rlog.debug('AttributeMetricDisplay.loadAttributeAndMetric', data);
+              topo = this.topo; // 设置ciType
 
-              topo = this.topo;
-              _topo$store$getModelS = topo.store.getModelState('topoBizMod').resAndMetrics, resIdsList = _topo$store$getModelS.resIdsList, nodeIdsList = _topo$store$getModelS.nodeIdsList; // rlog.debug('根据ci的id获取属性的值-getCiArrByIds', resIdsList, metrics);
-              // 无资源，不查询
+              ciDatas = data.filter(function (item) {
+                // 过滤不存在的ci，解决编辑模式删除资源后切换到显示模式报错
+                return !!topo.dataModel.getDataById(item.id);
+              }).map(function (item) {
+                return (0, _extends2["default"])({
+                  ciType: topo.dataModel.getDataById(item.id).ciType
+                }, item);
+              }); // 翻译引用属性
 
-              if (resIdsList.length) {
-                _context.next = 5;
-                break;
-              }
+              _context.next = 4;
+              return this.translateRefAttribute(ciDatas);
 
-              return _context.abrupt("return", []);
+            case 4:
+              ciDatas = _context.sent;
+              bizDispatchers = topo.store.getModelDispatchers('topoBizMod');
+              _context.next = 8;
+              return bizDispatchers.setAttrsAndMetrics(ciDatas);
 
-            case 5:
-              _context.next = 7;
+            case 8:
+              _context.next = 10;
               return _DictCache["default"].init();
 
-            case 7:
-              // 需要查询的指标列表
-              codes = this.getResourceMetricCodes();
-              param = {
-                ciId: nodeIdsList,
-                codes: codes,
-                // 过滤掉不需要查询的
-                relationId: this.getEdges().map(function (edge) {
-                  return {
-                    ciId: edge.id,
-                    operation: edge.operation
-                  };
-                })
-              };
-              /**
-               * 链路属性适配
-               * @param {*} data 
-               * @returns 
-               */
-
-              _context.next = 11;
-              return _topo["default"].ciInfo.batchQueryCiInfo(param);
+            case 10:
+              this.updateTagsTips();
 
             case 11:
-              result = _context.sent;
-              return _context.abrupt("return", result.map(function (data) {
-                var list2map = function list2map(list) {
-                  var map = {};
-                  (list || []).forEach(function (item) {
-                    map[item.code] = item.value;
-                  });
-                  return map;
-                };
-
-                var resultData = (0, _extends2["default"])({}, data, {
-                  attributeMap: list2map(data.attributes),
-                  metricMap: list2map(data.metrics)
-                });
-                resultData = transformLinkData(resultData); // 特殊处理：ipv6 从ipv6_address_list取第一个
-
-                // 特殊处理：ipv6 从ipv6_address_list取第一个
-                if (resultData.attributeMap.ipv6_address_list && !resultData.attributeMap.ipv6_address) {
-                  resultData.attributeMap.ipv6_address = (resultData.attributeMap.ipv6_address_list || '').split(',')[0];
-                }
-
-                return resultData;
-              }));
-
-            case 13:
             case "end":
               return _context.stop();
           }
@@ -471,16 +415,17 @@ var AttributeMetricDisplay = /*#__PURE__*/function () {
       }, _callee, this);
     }));
 
-    function fetchData() {
-      return _fetchData.apply(this, arguments);
+    function loadData(_x) {
+      return _loadData.apply(this, arguments);
     }
 
-    return fetchData;
+    return loadData;
   }()
   /**
    * 加载标注、悬浮框数据
+   * 业务拓扑使用
    * 
-   * @param {array} data
+   * @param {array<{id, attributes: [], attributeMap: {}, metrics: [], metricMap: {}}>} data
    */
   ;
 
@@ -488,40 +433,14 @@ var AttributeMetricDisplay = /*#__PURE__*/function () {
   /*#__PURE__*/
   function () {
     var _loadAttributeAndMetric = (0, _asyncToGenerator2["default"])( /*#__PURE__*/_regenerator["default"].mark(function _callee2(data) {
-      var topo, ciDatas, bizDispatchers;
       return _regenerator["default"].wrap(function _callee2$(_context2) {
         while (1) {
           switch (_context2.prev = _context2.next) {
             case 0:
-              // rlog.debug('AttributeMetricDisplay.loadAttributeAndMetric', data);
-              topo = this.topo; // 设置ciType
+              _context2.next = 2;
+              return this.loadData(data);
 
-              ciDatas = data.filter(function (item) {
-                // 过滤不存在的ci，解决编辑模式删除资源后切换到显示模式报错
-                return !!topo.dataModel.getDataById(item.id);
-              }).map(function (item) {
-                return (0, _extends2["default"])({
-                  ciType: topo.dataModel.getDataById(item.id).ciType
-                }, item);
-              }); // 翻译引用属性
-
-              _context2.next = 4;
-              return this.translateRefAttribute(ciDatas);
-
-            case 4:
-              ciDatas = _context2.sent;
-              bizDispatchers = topo.store.getModelDispatchers('topoBizMod');
-              _context2.next = 8;
-              return bizDispatchers.setAttrsAndMetrics(ciDatas);
-
-            case 8:
-              _context2.next = 10;
-              return _DictCache["default"].init();
-
-            case 10:
-              this.updateTagsTips();
-
-            case 11:
+            case 2:
             case "end":
               return _context2.stop();
           }
@@ -529,7 +448,7 @@ var AttributeMetricDisplay = /*#__PURE__*/function () {
       }, _callee2, this);
     }));
 
-    function loadAttributeAndMetric(_x) {
+    function loadAttributeAndMetric(_x2) {
       return _loadAttributeAndMetric.apply(this, arguments);
     }
 
@@ -537,7 +456,7 @@ var AttributeMetricDisplay = /*#__PURE__*/function () {
   }()
   /**
    * 临时由前端翻译引用属性名称
-   * @param {array} ciDatas 
+   * @param {array<{id, ciType, attributeMap: {}, ...}>} ciDatas 
    * @returns 
    */
   ;
@@ -548,7 +467,7 @@ var AttributeMetricDisplay = /*#__PURE__*/function () {
     var _translateRefAttribute = (0, _asyncToGenerator2["default"])( /*#__PURE__*/_regenerator["default"].mark(function _callee3(ciDatas) {
       var _this5 = this;
 
-      var refIdMap, ciRefAttributeMap, refIds, refCis, refCiMap;
+      var refIdMap, ciRefAttributeMap, refIds, refCiMap;
       return _regenerator["default"].wrap(function _callee3$(_context3) {
         while (1) {
           switch (_context3.prev = _context3.next) {
@@ -594,11 +513,10 @@ var AttributeMetricDisplay = /*#__PURE__*/function () {
 
             case 6:
               _context3.next = 8;
-              return (0, _services.queryCisByIds)(refIds);
+              return this.topo.ciCache.load(refIds);
 
             case 8:
-              refCis = _context3.sent;
-              refCiMap = (0, _lodash.keyBy)(refCis, 'id');
+              refCiMap = _context3.sent;
 
               _rlog["default"].debug('translateRefAttribute', {
                 ciRefAttributeMap: ciRefAttributeMap,
@@ -624,15 +542,15 @@ var AttributeMetricDisplay = /*#__PURE__*/function () {
                 });
               }));
 
-            case 12:
+            case 11:
             case "end":
               return _context3.stop();
           }
         }
-      }, _callee3);
+      }, _callee3, this);
     }));
 
-    function translateRefAttribute(_x2) {
+    function translateRefAttribute(_x3) {
       return _translateRefAttribute.apply(this, arguments);
     }
 
@@ -653,8 +571,8 @@ var AttributeMetricDisplay = /*#__PURE__*/function () {
 
     var elementTagsAndTips = this.buildTagsTips() // 开锁状态下禁用悬停展示悬浮框
     .map(function (item) {
-      var _topo$store$getModelS2 = topo.store.getModelState('lock'),
-          lock = _topo$store$getModelS2.lock;
+      var _topo$store$getModelS = topo.store.getModelState('lock'),
+          lock = _topo$store$getModelS.lock;
 
       return lock ? item : (0, _extends2["default"])({}, item, {
         tips: []

package/lib/core/models/TopoApp.js

@@ -53,8 +53,10 @@ var _ElementTagTipConfig = _interopRequireDefault(require("./tagstips/ElementTag
 
 var _SelectionModel = _interopRequireDefault(require("./SelectionModel"));
 
+var _CiCache = _interopRequireDefault(require("./cache/CiCache"));
+
 // eslint-disable-next-line no-undef
-var version = typeof "9.0.0-a.1" === 'string' ? "9.0.0-a.1" : null;
+var version = typeof "9.0.0-a.3" === 'string' ? "9.0.0-a.3" : null;
 console.info("\u62D3\u6251\u7248\u672C: " + version);
 /**
  * 拓扑显示和编辑
@@ -74,6 +76,7 @@ var Topo = /*#__PURE__*/function () {
     this.CiTypeCache = _CiTypeCache["default"];
     this.ciTyeCache = _CiTypeCache["default"];
     this.dictCache = _DictCache["default"];
+    this.ciCache = _CiCache["default"];
     this.elementTagTipConfig = new _ElementTagTipConfig["default"](this);
     this.test = void 0;
     this.uid = void 0;

package/lib/core/models/attributeFormatter/index.js

@@ -10,8 +10,6 @@ var _rlog = _interopRequireDefault(require("@riil-frontend/component-topology-ut
 
 var _utils = require("@riil-frontend/utils");
 
-var _topoData = require("../../../utils/topoData");
-
 var _DictCache = _interopRequireDefault(require("../cache/DictCache"));
 
 /**
@@ -66,14 +64,14 @@ var AttributeFormatter = /*#__PURE__*/function () {
   };
 
   _proto.commonTransform = function commonTransform(item, ciData, attrType) {
-    var _findItem;
-
     var fieldCode = item.code;
     var fieldMeta = this.topo.ciTyeCache.getCiType(ciData.ciType)[attrType + "Map"][fieldCode];
-    var fieldValue = ciData[attrType + "Map"][fieldCode] || ((_findItem = (0, _topoData.findItem)(ciData[attrType + "s"], 'code', fieldCode)) === null || _findItem === void 0 ? void 0 : _findItem.value);
+    var fieldValue = (ciData[attrType + "Map"] || ciData[attrType + "s"])[fieldCode]; // 引用属性
 
-    if (ciData[attrType + "Map"][fieldCode + "_object"]) {
-      fieldValue = ciData[attrType + "Map"][fieldCode + "_object"].displayName;
+    if (attrType === 'attribute') {
+      if (ciData[attrType + "Map"][fieldCode + "_object"]) {
+        fieldValue = ciData[attrType + "Map"][fieldCode + "_object"].displayName;
+      }
     }
 
     return {

package/lib/core/models/cache/CiCache.d.ts

@@ -0,0 +1,18 @@
+/**
+ * Ci缓存
+ */
+declare class CiCache {
+    /**
+     * @param {object<string, object>}
+     */
+    ciMap: {};
+    /**
+     *
+     * @param ids {string[]}
+     * @returns {Promise<Object>}
+     */
+    load(ids: string[]): Promise<Object>;
+    getCi(id: string): Object;
+}
+declare const _default: CiCache;
+export default _default;

package/lib/core/models/cache/CiCache.js

@@ -0,0 +1,89 @@
+"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 _services = require("../../services");
+
+/**
+ * Ci缓存
+ */
+var CiCache = /*#__PURE__*/function () {
+  function CiCache() {
+    this.ciMap = {};
+  }
+
+  var _proto = CiCache.prototype;
+
+  /**
+   * 
+   * @param ids {string[]}
+   * @returns {Promise<Object>}
+   */
+  _proto.load =
+  /*#__PURE__*/
+  function () {
+    var _load = (0, _asyncToGenerator2["default"])( /*#__PURE__*/_regenerator["default"].mark(function _callee(ids) {
+      var _this = this;
+
+      var unloadCiIds, cis, map;
+      return _regenerator["default"].wrap(function _callee$(_context) {
+        while (1) {
+          switch (_context.prev = _context.next) {
+            case 0:
+              unloadCiIds = ids.filter(function (id) {
+                return !_this.ciMap[id];
+              });
+
+              if (!unloadCiIds.length) {
+                _context.next = 6;
+                break;
+              }
+
+              _context.next = 4;
+              return (0, _services.queryCisByIds)(unloadCiIds);
+
+            case 4:
+              cis = _context.sent;
+              cis.forEach(function (ci) {
+                _this.ciMap[ci.id] = ci;
+              });
+
+            case 6:
+              map = {};
+              ids.forEach(function (id) {
+                map[id] = _this.ciMap[id];
+              });
+              return _context.abrupt("return", this.ciMap);
+
+            case 9:
+            case "end":
+              return _context.stop();
+          }
+        }
+      }, _callee, this);
+    }));
+
+    function load(_x) {
+      return _load.apply(this, arguments);
+    }
+
+    return load;
+  }();
+
+  _proto.getCi = function getCi(id) {
+    return this.ciMap[id];
+  };
+
+  return CiCache;
+}();
+
+var _default = new CiCache();
+
+exports["default"] = _default;

package/lib/core/models/utils/linkUtils.js

@@ -27,6 +27,8 @@ var _htElementUtils = require("../../../utils/htElementUtils");
 
 var _CiTypeCache = _interopRequireDefault(require("../cache/CiTypeCache"));
 
+var _CiCache = _interopRequireDefault(require("../cache/CiCache"));
+
 // 查询所有连线
 // const interfaceTypeMap = {
 //   "network.interface": {
@@ -56,10 +58,10 @@ function isExitLink(link) {
   return (link === null || link === void 0 ? void 0 : link.attributes) && !(link !== null && link !== void 0 && link.attributes['destination_id']);
 }
 
-function mergeLinksData(links, linkCis, nodes, interfaceCis, interfaceDoc) {
+function mergeLinksData(links, linkCis, nodes, interfaceCiMap, interfaceDoc) {
   var linkCiMap = (0, _keyBy["default"])(links, 'id');
   return links.map(function (link) {
-    var _interfaceCis$find, _interfaceCis$find2;
+    var _interfaceCiMap$attri, _interfaceCiMap$attri2;
 
     var linkCi = linkCiMap[link.id];
     var attributes = (0, _extends2["default"])({}, linkCi === null || linkCi === void 0 ? void 0 : linkCi.attributes);
@@ -84,14 +86,10 @@ function mergeLinksData(links, linkCis, nodes, interfaceCis, interfaceDoc) {
         destination_type_object: interfaceDoc[attributes.destination_type],
         // 源/目的接口
         source_id_object: {
-          displayName: (_interfaceCis$find = interfaceCis.find(function (node) {
-            return node.id === attributes.source_id;
-          })) === null || _interfaceCis$find === void 0 ? void 0 : _interfaceCis$find.attributes['display_name']
+          displayName: (_interfaceCiMap$attri = interfaceCiMap[attributes.source_id]) === null || _interfaceCiMap$attri === void 0 ? void 0 : _interfaceCiMap$attri.attributes['display_name']
         },
         destination_id_object: {
-          displayName: (_interfaceCis$find2 = interfaceCis.find(function (node) {
-            return node.id === attributes.destination_id;
-          })) === null || _interfaceCis$find2 === void 0 ? void 0 : _interfaceCis$find2.attributes['display_name']
+          displayName: (_interfaceCiMap$attri2 = interfaceCiMap[attributes.destination_id]) === null || _interfaceCiMap$attri2 === void 0 ? void 0 : _interfaceCiMap$attri2.attributes['display_name']
         }
       })
     });
@@ -104,7 +102,7 @@ function getLinksDetail(_x, _x2) {
 
 function _getLinksDetail() {
   _getLinksDetail = (0, _asyncToGenerator2["default"])( /*#__PURE__*/_regenerator["default"].mark(function _callee(links, nodes) {
-    var linkCis, interfaceIds, interfaceTypes, interfaceCis, interfaceDoc;
+    var linkCis, interfaceIds, interfaceTypes, interfaceCiMap, interfaceDoc;
     return _regenerator["default"].wrap(function _callee$(_context) {
       while (1) {
         switch (_context.prev = _context.next) {
@@ -134,16 +132,16 @@ function _getLinksDetail() {
               return item !== 'ip';
             });
             _context.next = 7;
-            return (0, _services.queryCisByIds)(interfaceIds);
+            return _CiCache["default"].load(interfaceIds);
 
           case 7:
-            interfaceCis = _context.sent;
+            interfaceCiMap = _context.sent;
             _context.next = 10;
             return _CiTypeCache["default"].getCiTypeMap(interfaceTypes);
 
           case 10:
             interfaceDoc = _context.sent;
-            return _context.abrupt("return", mergeLinksData(links, linkCis, nodes, interfaceCis, interfaceDoc));
+            return _context.abrupt("return", mergeLinksData(links, linkCis, nodes, interfaceCiMap, interfaceDoc));
 
           case 12:
           case "end":

package/lib/core/store/models/topoBizMod.js

@@ -18,6 +18,10 @@ var _rlog = _interopRequireDefault(require("@riil-frontend/component-topology-ut
 function _default(engine) {
   return {
     state: {
+      /**
+       * 格式：{id1: {attributes: {}}}
+       */
+      ciMap: {},
       // 指标默认设置
       resAndMetrics: {},
       metricDoc: {},

package/lib/core/store/models/viewer/resourceDetail.js

@@ -29,6 +29,13 @@ var _default = {
         visible: false,
         id: null // 资源id
 
+      };
+    },
+    close: function close() {
+      return {
+        visible: false,
+        id: null // 资源id
+
       };
     }
   },

package/lib/core/viewer/components/plugins/ResourceDetail/ResourceDetailDrawer.js

@@ -98,9 +98,7 @@ function ResourceDetailDrawer(props) {
   }, []); // 解决切换拓扑图隐藏概览
 
   (0, _react.useEffect)(function () {
-    resourceDetailDispatchers.update({
-      visible: false
-    }); // TODO 其他数据重置
+    close(); // TODO 其他数据重置
   }, [topoId]);
 
   function getUser() {
@@ -176,6 +174,12 @@ function ResourceDetailDrawer(props) {
     }
   }
 
+  function close() {
+    resourceDetailDispatchers.update({
+      visible: false
+    });
+  }
+
   function init(data, targetType) {
     // console.log('初始化基本信息', data, targetType);
     var id = data.id,
@@ -236,7 +240,8 @@ function ResourceDetailDrawer(props) {
       topo: topo,
       userId: userId,
       activeData: activeData,
-      resourceData: resourceData
+      resourceData: resourceData,
+      onClose: close
     }));
   };
 
@@ -250,11 +255,7 @@ function ResourceDetailDrawer(props) {
     })),
     width: 580,
     hasMask: false,
-    onClose: function onClose() {
-      return resourceDetailDispatchers.update({
-        visible: false
-      });
-    }
+    onClose: close
   }, visible && resourceData && renderContent()));
 }
 

package/lib/core/viewer/components/plugins/ResourceDetail/components/ResourceOverview/ResourceOverview.js

@@ -523,32 +523,39 @@ function ResourceOverview(props) {
                     switch (_context5.prev = _context5.next) {
                       case 0:
                         _context5.t0 = item.dataIndex;
-                        _context5.next = _context5.t0 === 'display_name' ? 3 : _context5.t0 === 'ciName' ? 7 : _context5.t0 === 'res_address' ? 10 : _context5.t0 === 'imageName' ? 17 : 21;
+                        _context5.next = _context5.t0 === 'display_name' ? 3 : _context5.t0 === 'ciName' ? 6 : _context5.t0 === 'res_address' ? 9 : _context5.t0 === 'imageName' ? 16 : 20;
                         break;
 
                       case 3:
-                        link = "/default/pagecenter/resDetail/view/" + id + "?resId=" + id + "&domainCode=" + ciTypeMeta.domain + "&title=" + attributeMap.display_name + "&ciCode=" + ciType; // 资源跳转链接
-
-                        value = /*#__PURE__*/_react["default"].createElement("span", {
-                          onClick: onClose
-                        }, /*#__PURE__*/_react["default"].createElement(_Link["default"], {
-                          className: _indexModule["default"].link,
-                          title: attributeMap.display_name || '',
-                          to: formatUrl(link)
-                        }, attributeMap.display_name || '-'));
+                        // 无监控模板不能跳转详情。跳转前需判定资源实例数据属性中是否包含support_templates属性。若不包含，则不能跳转
+                        if (attributeMap.support_templates) {
+                          link = "/default/pagecenter/resDetail/view/" + id + "?resId=" + id + "&domainCode=" + ciTypeMeta.domain + "&title=" + attributeMap.display_name + "&ciCode=" + ciType; // 资源跳转链接
+
+                          value = /*#__PURE__*/_react["default"].createElement("span", {
+                            onClick: onClose
+                          }, /*#__PURE__*/_react["default"].createElement(_Link["default"], {
+                            className: _indexModule["default"].link,
+                            disabled: true,
+                            title: attributeMap.display_name || '',
+                            to: formatUrl(link)
+                          }, attributeMap.display_name || '-'));
+                        } else {
+                          value = attributeMap.display_name || '-';
+                        }
+
                         contentTitle = attributeMap.display_name || '-';
-                        return _context5.abrupt("break", 22);
+                        return _context5.abrupt("break", 21);
 
-                      case 7:
+                      case 6:
                         value = ciTypeMeta.displayName;
                         contentTitle = value;
-                        return _context5.abrupt("break", 22);
+                        return _context5.abrupt("break", 21);
 
-                      case 10:
-                        _context5.next = 12;
+                      case 9:
+                        _context5.next = 11;
                         return getAddressFormat(attributeMap);
 
-                      case 12:
+                      case 11:
                         address = _context5.sent;
                         owned_computer_room = attributeMap.owned_computer_room, owned_cabinet = attributeMap.owned_cabinet; // 跳转3D机房定位设备
 
@@ -568,18 +575,18 @@ function ResourceOverview(props) {
                         }
 
                         contentTitle = address;
-                        return _context5.abrupt("break", 22);
+                        return _context5.abrupt("break", 21);
 
-                      case 17:
+                      case 16:
                         node = topo.getDataModel().getDataByTag(id);
                         value = (node === null || node === void 0 ? void 0 : node.a('customName')) || (node === null || node === void 0 ? void 0 : node.a('name')) || '-';
                         contentTitle = value;
-                        return _context5.abrupt("break", 22);
+                        return _context5.abrupt("break", 21);
 
-                      case 21:
-                        return _context5.abrupt("break", 22);
+                      case 20:
+                        return _context5.abrupt("break", 21);
 
-                      case 22:
+                      case 21:
                       case "end":
                         return _context5.stop();
                     }

package/lib/style.js

@@ -3,10 +3,10 @@ require('@alifd/next/lib/box/style');
 require('@alifd/next/lib/message/style');
 require('@riil-frontend/component-topology-utils/lib/style');
 require('@riil-frontend/component-riil-event-emitter/lib/style');
+require('@riil-frontend/utils/lib/style');
 require('@alifd/next/lib/drawer/style');
 require('@alifd/next/lib/menu-button/style');
 require('@alifd/next/lib/search/style');
-require('@riil-frontend/utils/lib/style');
 require('@alifd/next/lib/tab/style');
 require('@alifd/next/lib/table/style');
 require('@riil-frontend/component-table-layout/lib/style');