@riil-frontend/component-topology 6.0.0-alpha.9 → 6.0.1

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

@@ -19,41 +19,37 @@ var _componentTopologyGraph = _interopRequireWildcard(require("@riil-frontend/co
 
 var _rlog = _interopRequireDefault(require("@riil-frontend/component-topology-utils/es/rlog"));
 
-var _useTopoEdit = _interopRequireDefault(require("../../hooks/useTopoEdit"));
-
 var _showMessage = _interopRequireDefault(require("../../utils/showMessage"));
 
-var _EditorPlugin = _interopRequireDefault(require("../../editor/components/EditorPlugin"));
-
-var _ViewerPlugin = _interopRequireDefault(require("../../viewer/components/plugins/ViewerPlugin"));
-
 var _TitleBar = _interopRequireDefault(require("../titlebar/TitleBar"));
 
 var _template = require("../../../utils/template");
 
-var _PropertyView = _interopRequireDefault(require("../../editor/components/settings/PropertyView"));
-
-var _BackgroundView = _interopRequireDefault(require("../../editor/components/BackgroundView"));
-
 var _edgeUtil = require("../../utils/edgeUtil");
 
-var _useManageStatus = _interopRequireDefault(require("../../hooks/useManageStatus"));
-
-var _useAlarm = _interopRequireDefault(require("../../hooks/useAlarm"));
-
 var _useRouterAdapter = _interopRequireDefault(require("../../hooks/useRouterAdapter"));
 
 var _graphLinkUtil = require("../../utils/graphLinkUtil");
 
 var _clusterUtil = require("../../../utils/clusterUtil");
 
+var _GraphViewPanel = _interopRequireDefault(require("./GraphViewPanel"));
+
+var _TopoViewModule = _interopRequireDefault(require("./TopoView.module.scss"));
+
+var _ViewerPlugin = _interopRequireDefault(require("../../viewer/components/plugins/ViewerPlugin"));
+
+var _useTopoEdit = _interopRequireDefault(require("../../hooks/useTopoEdit"));
+
+var _EditorPlugin = _interopRequireDefault(require("../../editor/components/EditorPlugin"));
+
 var _EditorToolbar = _interopRequireDefault(require("../../editor/components/Toolbar/EditorToolbar"));
 
 var _Sidebar = _interopRequireDefault(require("../../editor/components/Sidebar/Sidebar"));
 
-var _HistoryManager = _interopRequireDefault(require("../../models/HistoryManager"));
+var _PropertyView = _interopRequireDefault(require("../../editor/components/settings/PropertyView"));
 
-var _TopoViewModule = _interopRequireDefault(require("./TopoView.module.scss"));
+var _HistoryManager = _interopRequireDefault(require("../../models/HistoryManager"));
 
 var _editorModule = _interopRequireDefault(require("./editor.module.scss"));
 
@@ -61,6 +57,9 @@ 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 Topology = function Topology(props) {
   var _classnames;
 
@@ -92,9 +91,9 @@ var Topology = function Topology(props) {
       topoState = _store$useModel[0],
       topoDispatchers = _store$useModel[1];
 
-  var bizDispatchers = store.useModelDispatchers('topoBizMod');
   var topoId = topoState.topoId,
       viewState = topoState.viewState,
+      graphLoaded = topoState.graphLoaded,
       topoData = topoState.topoData,
       urlParams = topoState.urlParams;
   var isEditMode = viewState === 'edit';
@@ -103,11 +102,10 @@ var Topology = function Topology(props) {
 
   var _useState = (0, _react.useState)(buildLoadOptions ? buildLoadOptions(topoData) : topoData),
       tData = _useState[0],
-      setTData = _useState[1]; // TODO 临时放这里，当前监听内容较多
+      setTData = _useState[1];
 
+  (0, _useRouterAdapter["default"])(props); // 编辑模式----
 
-  var selectionManager = topo.selectionManager;
-  (0, _useRouterAdapter["default"])(props);
   var topoEdit = (0, _useTopoEdit["default"])({
     topo: topo,
     topoId: topoId,
@@ -120,25 +118,11 @@ var Topology = function Topology(props) {
     isLayerTopo: isLayerTopo
   });
   topo.topoEdit = topoEdit;
-  var onExitEdit = topoEdit.onExitEdit,
-      onBindData = topoEdit.onBindData,
-      onDeleteElement = topoEdit.onDeleteElement,
-      onSaveTopo = topoEdit.onSaveTopo;
-  var titleBarRef = (0, _react.useRef)();
-  (0, _useAlarm["default"])({
-    topo: topo
-  });
-  (0, _useManageStatus["default"])({
-    topo: topo
-  });
   (0, _react.useEffect)(function () {
     if (viewState === 'view' && topoId) {
       // TODO 移到模型中
       // rlog.debug('useEffect-viewState', topoId, viewState);
       setTData(null);
-      bizDispatchers.update({
-        setConfig: null
-      });
     }
   }, [topoId, viewState]);
   (0, _react.useEffect)(function () {
@@ -148,7 +132,9 @@ var Topology = function Topology(props) {
   (0, _react.useEffect)(function () {
     // 拓扑退出注销
     return function () {
-      selectionManager.destroy();
+      _rlog["default"].info('TopoView 退出');
+
+      topo.selectionModel.destroy();
       topoDispatchers.reset();
     };
   }, []);
@@ -178,7 +164,7 @@ var Topology = function Topology(props) {
       topo.historyManager = new _HistoryManager["default"](topo, htHistoryManager);
     }
 
-    selectionManager.init();
+    topo.selectionModel.init();
     topoDispatchers.update({
       graphLoaded2: true
     });
@@ -198,7 +184,7 @@ var Topology = function Topology(props) {
     (0, _graphLinkUtil.fixLink)(topo);
     (0, _clusterUtil.handleClusterNoPermission)(topo);
     (0, _edgeUtil.updateEdgeExpanded)(topo);
-    selectionManager.init();
+    topo.selectionModel.init();
     topoDispatchers.update({
       graphLoaded: true
     });
@@ -210,7 +196,7 @@ var Topology = function Topology(props) {
     if (onLoad) {
       onLoad();
     }
-  }, [topoData]); // TODO 之后把事件方法都转移出去
+  }, [topoData]);
 
   var rightEventHandle = function rightEventHandle(event) {
     _rlog["default"].debug('右键事件', event);
@@ -249,16 +235,16 @@ var Topology = function Topology(props) {
         break;
 
       case _componentTopologyGraph.TopoEvent.EVENT_DATA_PICK:
-        onBindData(event.data);
+        topoEdit.onBindData(event.data);
         break;
 
       case _componentTopologyGraph.TopoEvent.EVENT_DATA_DELETE:
-        onDeleteElement(event.data);
+        topoEdit.onDeleteElement(event.data);
         break;
       // FIXME 保存逻辑优化
 
       case _componentTopologyGraph.TopoEvent.EVENT_SAVE_TOPO:
-        onSaveTopo(event.data);
+        topoEdit.onSaveTopo(event.data);
         break;
 
       case _componentTopologyGraph.TopoEvent.EVENT_REFRESH:
@@ -266,7 +252,7 @@ var Topology = function Topology(props) {
         break;
 
       case _componentTopologyGraph.TopoEvent.EVENT_EDIT_EXIT:
-        onExitEdit(event.data);
+        topoEdit.onExitEdit(event.data);
         break;
 
       case _componentTopologyGraph.TopoEvent.EVENT_CONTEXT_TOOL:
@@ -279,36 +265,17 @@ var Topology = function Topology(props) {
     }
   };
 
-  var renderPropertyView = function renderPropertyView() {
-    return isEditMode && /*#__PURE__*/_react["default"].createElement(_PropertyView["default"], {
-      topo: topo,
-      editorProps: editorProps
-    });
-  };
-
-  var renderBackgroundView = function renderBackgroundView() {
-    return isEditMode && /*#__PURE__*/_react["default"].createElement(_BackgroundView["default"], {
-      topo: topo,
-      editorProps: editorProps
-    });
-  };
-
   var renderCanvas = function renderCanvas() {
     var _graphViewProps$creat;
 
-    return /*#__PURE__*/_react["default"].createElement("div", {
-      className: _TopoViewModule["default"].viewPanel,
-      onKeyDown: function onKeyDown(e) {
-        topo.historyManager && topo.historyManager.handleKeyDown(e);
-      }
-    }, /*#__PURE__*/_react["default"].createElement(_componentTopologyGraph["default"], (0, _extends2["default"])({}, graphViewProps, {
+    return /*#__PURE__*/_react["default"].createElement(_GraphViewPanel["default"], (0, _extends2["default"])({
+      topo: topo
+    }, props), /*#__PURE__*/_react["default"].createElement(_componentTopologyGraph["default"], (0, _extends2["default"])({}, graphViewProps, {
       createHtTopoProps: (0, _extends2["default"])({}, graphViewProps.createHtTopoProps, {
         editor: (0, _extends2["default"])({}, ((_graphViewProps$creat = graphViewProps.createHtTopoProps) === null || _graphViewProps$creat === void 0 ? void 0 : _graphViewProps$creat.editor) || {})
       }),
       data: tData,
       defaultEnterEditMode: defaultEnterEditMode,
-      renderPropertyView: renderPropertyView,
-      renderBackgroundView: renderBackgroundView,
       onCreate: onGraphCreated,
       onLoaded: handleGraphLoaded,
       onDataLoaded: handleGraphDataLoaded,
@@ -343,21 +310,23 @@ var Topology = function Topology(props) {
     direction: "row",
     flex: 1,
     className: (0, _classnames2["default"])((_classnames = {}, _classnames[_editorModule["default"].borderLine] = isEditMode, _classnames))
-  }, isEditMode && /*#__PURE__*/_react["default"].createElement(_Sidebar["default"], {
+  }, isEditMode && /*#__PURE__*/_react["default"].createElement(_Sidebar["default"], (0, _extends2["default"])({
     topo: topo,
     topoEdit: topoEdit,
     topoContext: {
       urlParams: urlParams
     },
     editorProps: editorProps
-  }), renderCanvas()), !isEditMode && /*#__PURE__*/_react["default"].createElement(_ViewerPlugin["default"], {
+  }, editorProps === null || editorProps === void 0 ? void 0 : editorProps.sidebarProps)), renderCanvas(), isEditMode && graphLoaded && /*#__PURE__*/_react["default"].createElement(_PropertyView["default"], {
+    topo: topo,
+    editorProps: editorProps
+  })), !isEditMode && /*#__PURE__*/_react["default"].createElement(_ViewerPlugin["default"], {
     topo: topo,
     viewerProps: viewerProps,
     topoContext: topoContext
   }), isEditMode && /*#__PURE__*/_react["default"].createElement(_EditorPlugin["default"], {
     topo: topo,
     topoEdit: topoEdit,
-    titleBarRef: titleBarRef,
     topoContext: {
       urlParams: urlParams
     },

package/lib/core/components/titlebar/TitleBar.module.scss

@@ -12,7 +12,7 @@
   }
 
   &.titlebarViewMode {
-    padding: 16px 16px 0 16px;
+    padding: 16px;
   }
 
   &.titlebarEditMode {

package/lib/core/editor/components/EditorPlugin.js

@@ -7,7 +7,7 @@ exports["default"] = TopoEditorPlugin;
 
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 
-var _react = _interopRequireDefault(require("react"));
+var _react = _interopRequireWildcard(require("react"));
 
 var _CustomIconPlugin = _interopRequireDefault(require("./CustomIconPlugin"));
 
@@ -17,13 +17,37 @@ var _MultipleResourceSelectPlugin = _interopRequireDefault(require("./plugins/Mu
 
 var _GroupAddResourceDrawerPlugin = _interopRequireDefault(require("./GroupAddResourceDrawerPlugin"));
 
+var _MetricPollingPlugin = _interopRequireDefault(require("../../viewer/components/plugins/MetricPollingPlugin"));
+
+var _AddElementThemePlugin = _interopRequireDefault(require("./plugins/AddElementThemePlugin"));
+
+var _useKeyboardShortcut = _interopRequireDefault(require("../hooks/useKeyboardShortcut"));
+
+var _useUpdateHtTopoDefaultTagStyle = _interopRequireDefault(require("./Sidebar/views/CanvasPanel/hooks/useUpdateHtTopoDefaultTagStyle"));
+
+function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { "default": obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj["default"] = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+
 function TopoEditorPlugin(props) {
   var topo = props.topo,
       topoContext = props.topoContext,
       topoEdit = props.topoEdit,
       editorProps = props.editorProps;
   var store = topo.store;
-  var plugins = [_SaveLoading["default"], _GroupAddResourceDrawerPlugin["default"], _MultipleResourceSelectPlugin["default"], _CustomIconPlugin["default"]].concat((editorProps === null || editorProps === void 0 ? void 0 : editorProps.plugins) || []);
+  (0, _react.useEffect)(function () {
+    return function () {
+      topoEdit.reset();
+    };
+  }, []);
+  (0, _useKeyboardShortcut["default"])({
+    topo: topo,
+    topoEdit: topoEdit
+  });
+  (0, _useUpdateHtTopoDefaultTagStyle["default"])({
+    topo: topo
+  });
+  var plugins = [_SaveLoading["default"], _GroupAddResourceDrawerPlugin["default"], _MultipleResourceSelectPlugin["default"], _AddElementThemePlugin["default"], _CustomIconPlugin["default"], _MetricPollingPlugin["default"]].concat((editorProps === null || editorProps === void 0 ? void 0 : editorProps.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/editor/components/Sidebar/Sidebar.js

@@ -24,21 +24,43 @@ function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj &&
 function Sidebar(props) {
   var _classNames;
 
-  var topo = props.topo;
+  var topo = props.topo,
+      getPanels = props.getPanels;
 
   var _topo$store$useModel = topo.store.useModel('topoEdit'),
       topoEditState = _topo$store$useModel[0],
       topoEditDispatchers = _topo$store$useModel[1];
 
-  var activeKey = topoEditState.resourceTabactiveKey;
+  var activeKey = topoEditState.resourceTabActiveKey; // 拓扑图是否加载
+
+  var _topo$store$useModelS = topo.store.useModelState('topoMod'),
+      graphLoaded = _topo$store$useModelS.graphLoaded;
+
+  var visiblePanels = (0, _react.useMemo)(function () {
+    return getPanels ? getPanels(_panes["default"]) : _panes["default"];
+  }, [getPanels]);
   (0, _react.useEffect)(function () {
     return function () {
       // 退出编辑模式，关闭资源面板状态
       topoEditDispatchers.update({
-        resourceTabactiveKey: null
+        resourceTabActiveKey: null
       });
     };
-  }, []);
+  }, []); // 通过url参数打开对应面板
+
+  (0, _react.useEffect)(function () {
+    var _topo$viewProps$urlPa;
+
+    if (graphLoaded && (_topo$viewProps$urlPa = topo.viewProps.urlParams) !== null && _topo$viewProps$urlPa !== void 0 && _topo$viewProps$urlPa.resourceTabActiveKey) {
+      setTimeout(function () {
+        var _topo$viewProps$urlPa2;
+
+        topoEditDispatchers.update({
+          resourceTabActiveKey: ((_topo$viewProps$urlPa2 = topo.viewProps.urlParams) === null || _topo$viewProps$urlPa2 === void 0 ? void 0 : _topo$viewProps$urlPa2.resourceTabActiveKey) || null
+        });
+      }, 2000);
+    }
+  }, [graphLoaded]);
 
   var renderTabItem = function renderTabItem(pane) {
     var View = pane.content;
@@ -58,10 +80,10 @@ function Sidebar(props) {
     activeKey: activeKey,
     onChange: function onChange(key) {
       return topoEditDispatchers.update({
-        resourceTabactiveKey: key
+        resourceTabActiveKey: key
       });
     }
-  }, _panes["default"].map(renderTabItem))));
+  }, visiblePanels.map(renderTabItem))));
 }
 
 var _default = Sidebar;

package/lib/core/editor/components/Sidebar/panes.js

@@ -16,28 +16,33 @@ var _ImagePanel = _interopRequireDefault(require("./views/ImagePanel"));
 var _LinkPanel = _interopRequireDefault(require("./views/LinkPanel"));
 
 var panes = [{
+  key: 'link',
   title: '链路',
-  key: '1',
+  titleTootip: '在两个节点之间添加链路&线',
   icon: '/img/topo/editor/sidebar/icon/链路.svg',
   content: _LinkPanel["default"]
 }, {
   title: '组件',
-  key: '2',
+  key: 'basicComponent',
+  titleTootip: '基础组件',
   icon: '/img/topo/editor/sidebar/icon/组件.svg',
   content: _ComponentPanel["default"]
 }, {
   title: '图片',
-  key: '3',
+  key: 'image',
+  titleTootip: '图片素材',
   icon: '/img/topo/editor/sidebar/icon/图片.svg',
   content: _ImagePanel["default"]
 }, {
   title: '背景',
-  key: '4',
+  key: 'background',
+  titleTootip: '背景素材',
   icon: '/img/topo/editor/sidebar/icon/背景.svg',
   content: _BackgroundPanel["default"]
 }, {
   title: '画布',
-  key: '5',
+  key: 'canvas',
+  titleTootip: '拓扑图画布底图',
   icon: '/img/topo/editor/sidebar/icon/画布.svg',
   content: _CanvasPanel["default"]
 }];

package/lib/core/editor/components/Sidebar/views/CanvasPanel/CanvasPanel.js

@@ -11,43 +11,25 @@ var _react = _interopRequireWildcard(require("react"));
 
 var _CanvasPanelModule = _interopRequireDefault(require("./CanvasPanel.module.scss"));
 
+var _useCanvasThemeConfig2 = _interopRequireDefault(require("./hooks/useCanvasThemeConfig"));
+
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
 
 function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { "default": obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj["default"] = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
 
-var CANVAS_TOGGLE = [{
-  value: 'white',
-  label: '白色',
-  color: '#FFFFFF'
-}, {
-  value: 'blue',
-  label: '蓝色',
-  color: '#F9FBFF'
-}, {
-  value: 'yellow',
-  label: '黄色',
-  color: '#FFFDE6'
-}, {
-  value: 'green',
-  label: '绿色',
-  color: '#EAFFE8'
-}, {
-  value: 'dark',
-  label: '深色',
-  color: '#031425'
-}];
-
 function CanvasPanel(props) {
-  var selected = props.selected,
-      onSelect = props.onSelect;
+  var topo = props.topo;
 
-  var _useState = (0, _react.useState)('white'),
-      selectVal = _useState[0],
-      setSelectVal = _useState[1];
+  var _useCanvasThemeConfig = (0, _useCanvasThemeConfig2["default"])({
+    topo: topo
+  }),
+      themes = _useCanvasThemeConfig.themes,
+      canvasThemeName = _useCanvasThemeConfig.canvasThemeName,
+      setCanvasTheme = _useCanvasThemeConfig.setCanvasTheme;
 
   return /*#__PURE__*/_react["default"].createElement("div", {
     className: _CanvasPanelModule["default"].canvasToggle
-  }, CANVAS_TOGGLE.map(function (item, index) {
+  }, themes.map(function (item, index) {
     return /*#__PURE__*/_react["default"].createElement("div", {
       className: _CanvasPanelModule["default"].canvas,
       key: index
@@ -56,10 +38,9 @@ function CanvasPanel(props) {
       style: {
         background: item.color
       },
-      checked: selected ? selected === item.value : selectVal === item.value,
+      checked: item.name === canvasThemeName,
       onChange: function onChange(checked) {
-        setSelectVal(item.value);
-        onSelect && onSelect(item);
+        setCanvasTheme(item.name);
       }
     }, /*#__PURE__*/_react["default"].createElement("div", {
       className: _CanvasPanelModule["default"].box

package/lib/core/editor/components/Sidebar/views/CanvasPanel/hooks/useCanvasThemeConfig.js

@@ -0,0 +1,123 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+exports.__esModule = true;
+exports["default"] = void 0;
+
+var _regenerator = _interopRequireDefault(require("@babel/runtime/regenerator"));
+
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+
+var _asyncToGenerator2 = _interopRequireDefault(require("@babel/runtime/helpers/asyncToGenerator"));
+
+var _clusterUtil = require("../../../../../../../utils/clusterUtil");
+
+var _htElementUtils = require("../../../../../../../utils/htElementUtils");
+
+var _themes = _interopRequireDefault(require("../../../../../config/themes"));
+
+var _themeUtil = _interopRequireDefault(require("../../../../../utils/themeUtil"));
+
+function useCanvasThemeConfig(props) {
+  var topo = props.topo;
+
+  var _topo$store$useModel = topo.store.useModel('displayConfig'),
+      displayConfig = _topo$store$useModel[0],
+      displayConfigDispatchers = _topo$store$useModel[1];
+
+  var canvasThemeName = displayConfig.canvasTheme || 'white';
+
+  var setCanvasTheme = /*#__PURE__*/function () {
+    var _ref = (0, _asyncToGenerator2["default"])( /*#__PURE__*/_regenerator["default"].mark(function _callee(themeName) {
+      var themeConfig;
+      return _regenerator["default"].wrap(function _callee$(_context) {
+        while (1) {
+          switch (_context.prev = _context.next) {
+            case 0:
+              themeConfig = _themes["default"].find(function (item) {
+                return item.name === themeName;
+              });
+              topo.historyManager.beginTransaction();
+              _context.next = 4;
+              return displayConfigDispatchers.update({
+                canvasTheme: themeName
+              });
+
+            case 4:
+              _context.next = 6;
+              return setGlobalTagTheme(themeConfig);
+
+            case 6:
+              setElementsTheme(themeConfig);
+              topo.historyManager.endTransaction();
+
+            case 8:
+            case "end":
+              return _context.stop();
+          }
+        }
+      }, _callee);
+    }));
+
+    return function setCanvasTheme(_x) {
+      return _ref.apply(this, arguments);
+    };
+  }(); // 设置资源/链路标注样式
+
+
+  function setGlobalTagTheme(_x2) {
+    return _setGlobalTagTheme.apply(this, arguments);
+  }
+
+  function _setGlobalTagTheme() {
+    _setGlobalTagTheme = (0, _asyncToGenerator2["default"])( /*#__PURE__*/_regenerator["default"].mark(function _callee2(themeConfig) {
+      var _topo$store$getModelS, nodeLabelStyle, defaultEdgeLabelStyle;
+
+      return _regenerator["default"].wrap(function _callee2$(_context2) {
+        while (1) {
+          switch (_context2.prev = _context2.next) {
+            case 0:
+              topo.getHtTopo().setGlobalNodeLabelStyle(themeConfig.globalNodeLabelStyle);
+              topo.getHtTopo().setGlobalEdgeTagStyle(themeConfig.globalEdgeTagStyle); // 更新默认配置
+
+              _topo$store$getModelS = topo.store.getModelState('displayConfig'), nodeLabelStyle = _topo$store$getModelS.nodeLabelStyle, defaultEdgeLabelStyle = _topo$store$getModelS.defaultEdgeLabelStyle;
+              _context2.next = 5;
+              return displayConfigDispatchers.update({
+                nodeLabelStyle: (0, _extends2["default"])({}, nodeLabelStyle, themeConfig.globalNodeLabelStyle),
+                defaultEdgeLabelStyle: (0, _extends2["default"])({}, defaultEdgeLabelStyle, themeConfig.globalEdgeTagStyle)
+              });
+
+            case 5:
+            case "end":
+              return _context2.stop();
+          }
+        }
+      }, _callee2);
+    }));
+    return _setGlobalTagTheme.apply(this, arguments);
+  }
+
+  function setElementsTheme(themeConfig) {
+    var dm = topo.getHtTopo().getGraphView().dm();
+    var elements = (0, _htElementUtils.getElements)(dm);
+
+    var _ThemeUtil = (0, _themeUtil["default"])({
+      topo: topo
+    }),
+        setElementTheme = _ThemeUtil.setElementTheme;
+
+    elements.forEach(function (element) {
+      setElementTheme(element, themeConfig);
+    });
+  }
+
+  return {
+    themes: _themes["default"],
+    canvasThemeName: canvasThemeName,
+    setCanvasTheme: setCanvasTheme
+  };
+}
+
+var _default = useCanvasThemeConfig;
+exports["default"] = _default;

package/lib/core/editor/components/Sidebar/views/CanvasPanel/hooks/useUpdateHtTopoDefaultTagStyle.js

@@ -0,0 +1,37 @@
+"use strict";
+
+exports.__esModule = true;
+exports["default"] = void 0;
+
+var _react = _interopRequireWildcard(require("react"));
+
+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; }
+
+/**
+ * 用于标注样式配置变化后通知ht更新。新增元素按改标注样式显示
+ * 场景1：设置标注样式，新增元素按改标注样式显示
+ * 场景1：设置标注样式（工具栏、主题切换），回退，新增元素按改标注样式显示
+ * 
+ * @param {*} props 
+ */
+function useUpdateHtTopoDefaultTagStyle(props) {
+  var topo = props.topo;
+  var displayConfig = topo.store.useModelState('displayConfig');
+  var nodeLabelStyle = displayConfig.nodeLabelStyle,
+      defaultEdgeLabelStyle = displayConfig.defaultEdgeLabelStyle;
+  (0, _react.useEffect)(function () {
+    if (nodeLabelStyle) {
+      topo.getHtTopo().setDefaultNodeLabelStyle(nodeLabelStyle);
+    }
+  }, [nodeLabelStyle]);
+  (0, _react.useEffect)(function () {
+    if (defaultEdgeLabelStyle) {
+      topo.getHtTopo().setDefaultEdgeTagStyle(defaultEdgeLabelStyle);
+    }
+  }, [defaultEdgeLabelStyle]);
+}
+
+var _default = useUpdateHtTopoDefaultTagStyle;
+exports["default"] = _default;

package/lib/core/editor/components/Sidebar/views/CanvasPanel/utils/elementThemeUtil.js

@@ -0,0 +1 @@
+"use strict";

package/lib/core/editor/components/Sidebar/views/ImagePanel/CiTypeImagePanel.js

@@ -25,7 +25,7 @@ function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj &&
 function CiTypeImagePanel(props) {
   var topo = props.topo;
   var icons = (0, _react.useMemo)(function () {
-    return (0, _icon.getNodeDefaultIcons)(topo);
+    return (0, _icon.getResourceIcons)(topo);
   }, []);
   return /*#__PURE__*/_react["default"].createElement(_HtImagePalette["default"], {
     icons: icons,