@riil-frontend/component-topology 6.0.0-alpha.1 → 6.0.0-alpha.3

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

@@ -9,17 +9,29 @@ var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends")
 
 var _react = _interopRequireWildcard(require("react"));
 
-var _SidebarModule = _interopRequireDefault(require("./Sidebar.module.scss"));
+var _VerticalIconTab = _interopRequireDefault(require("../../../../components/VerticalIconTab"));
+
+var _LinkPanel = _interopRequireDefault(require("./views/LinkPanel"));
+
+var _ComponentPanel = _interopRequireDefault(require("./views/ComponentPanel"));
+
+var _ImagePanel = _interopRequireDefault(require("./views/ImagePanel"));
 
-var _LinkView = _interopRequireDefault(require("./views/LinkView"));
+var _BackgroundPanel = _interopRequireDefault(require("./views/BackgroundPanel"));
 
-var _VerticalIconTab = _interopRequireDefault(require("../../../../components/VerticalIconTab/VerticalIconTab"));
+var _CanvasPanel = _interopRequireDefault(require("./views/CanvasPanel"));
+
+var _SidebarModule = _interopRequireDefault(require("./Sidebar.module.scss"));
+
+var _classnames = _interopRequireDefault(require("classnames"));
 
 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 Sidebar(props) {
+  var _classNames;
+
   var topo = props.topo;
 
   var _useState = (0, _react.useState)(null),
@@ -30,43 +42,35 @@ function Sidebar(props) {
     title: '链路',
     key: '1',
     icon: '/img/topo/editor/sidebar/icon/链路.svg',
-    content: _LinkView["default"]
+    content: _LinkPanel["default"]
   }, {
     title: '组件',
     key: '2',
     icon: '/img/topo/editor/sidebar/icon/组件.svg',
-    content: function content() {
-      return /*#__PURE__*/_react["default"].createElement("div", null, "222");
-    }
+    content: _ComponentPanel["default"]
   }, {
     title: '图片',
     key: '3',
     icon: '/img/topo/editor/sidebar/icon/图片.svg',
-    content: function content() {
-      return /*#__PURE__*/_react["default"].createElement("div", null, "333");
-    }
+    content: _ImagePanel["default"]
   }, {
     title: '背景',
     key: '4',
     icon: '/img/topo/editor/sidebar/icon/背景.svg',
-    content: function content() {
-      return /*#__PURE__*/_react["default"].createElement("div", null, "333");
-    }
+    content: _BackgroundPanel["default"]
   }, {
     title: '画布',
     key: '5',
     icon: '/img/topo/editor/sidebar/icon/画布.svg',
-    content: function content() {
-      return /*#__PURE__*/_react["default"].createElement("div", null, "333");
-    }
+    content: _CanvasPanel["default"]
   }].map(function (item) {
     var View = item.content;
     return (0, _extends2["default"])({}, item, {
       content: function content() {
-        return /*#__PURE__*/_react["default"].createElement(View, {
+        return /*#__PURE__*/_react["default"].createElement(View, (0, _extends2["default"])({}, props, {
           topo: topo,
           active: activeKey === item.key
-        });
+        }));
       }
     });
   });
@@ -83,10 +87,12 @@ function Sidebar(props) {
 
   return /*#__PURE__*/_react["default"].createElement("div", {
     className: _SidebarModule["default"].sidebar
+  }, /*#__PURE__*/_react["default"].createElement("div", {
+    className: (0, _classnames["default"])(_SidebarModule["default"].tabsContainer, (_classNames = {}, _classNames[_SidebarModule["default"].expanded] = !!activeKey, _classNames))
   }, /*#__PURE__*/_react["default"].createElement(_VerticalIconTab["default"], {
     activeKey: activeKey,
     onChange: setActivekey
-  }, panes.map(renderTabItem)));
+  }, panes.map(renderTabItem))));
 }
 
 var _default = Sidebar;

package/lib/core/editor/components/Sidebar/Sidebar.module.scss

@@ -1,3 +1,19 @@
 .sidebar {
-  border-right: 1px solid #E6E7EB;
-}
+  // border-right: 1px solid #E6E7EB;
+  position: relative;
+  width: 60px;
+
+  .tabsContainer {
+    position: absolute;
+    width: 60px;
+    height: 100%;
+    left: 0;
+    top: 0;
+    z-index: 1;
+    background: #FFF;
+
+    &.expanded {
+      width: 320px;
+    }
+  }
+}

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

@@ -0,0 +1,18 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+exports.__esModule = true;
+exports["default"] = BackgroundPanel;
+
+var _react = _interopRequireDefault(require("react"));
+
+var _BackgroundView = _interopRequireDefault(require("../../../BackgroundView"));
+
+function BackgroundPanel(props) {
+  var topo = props.topo,
+      editorProps = props.editorProps;
+  return /*#__PURE__*/_react["default"].createElement(_BackgroundView["default"], {
+    topo: topo
+  });
+}

package/lib/core/editor/components/Sidebar/views/BackgroundPanel/index.js

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

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

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

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

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

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

@@ -0,0 +1,53 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+exports.__esModule = true;
+exports["default"] = ComponentPanel;
+
+var _react = _interopRequireWildcard(require("react"));
+
+var _rlog = _interopRequireDefault(require("@riil-frontend/component-topology-utils/es/rlog"));
+
+function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { "default": obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj["default"] = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+
+/**
+ * 组件面板
+ * @param {*} props 
+ * @returns 
+ */
+function ComponentPanel(props) {
+  var topo = props.topo; // 组件
+
+  var viewRef = (0, _react.useRef)(null); // div容器
+
+  var divRef = (0, _react.useRef)();
+  (0, _react.useEffect)(function () {
+    // 初始化
+    var htTopo = topo.getHtTopo();
+    var container = divRef.current;
+
+    try {
+      viewRef.current = htTopo.createBasicPalette(container);
+    } catch (error) {
+      _rlog["default"].error('初始化资源面板失败', error);
+    } // 注销组件
+
+
+    return function () {
+      if (viewRef.current) {
+        viewRef.current.destroy();
+        viewRef.current = null;
+      }
+    };
+  }, []);
+  return /*#__PURE__*/_react["default"].createElement("div", {
+    ref: divRef,
+    style: {
+      width: '100%',
+      height: '100%'
+    }
+  });
+}

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

@@ -0,0 +1,34 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+exports.__esModule = true;
+exports["default"] = CiTypeImagePanel;
+
+var _react = _interopRequireWildcard(require("react"));
+
+var _rlog = _interopRequireDefault(require("@riil-frontend/component-topology-utils/es/rlog"));
+
+var _HtImagePalette = _interopRequireDefault(require("./HtImagePalette"));
+
+var _icon = require("../../../../../common/icons/icon");
+
+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 {*} props 
+ * @returns 
+ */
+function CiTypeImagePanel(props) {
+  var topo = props.topo;
+  var icons = (0, _react.useMemo)(function () {
+    return (0, _icon.getNodeDefaultIcons)(topo);
+  }, []);
+  return /*#__PURE__*/_react["default"].createElement(_HtImagePalette["default"], {
+    icons: icons,
+    topo: topo
+  });
+}

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

@@ -0,0 +1,34 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+exports.__esModule = true;
+exports["default"] = CustomImagePanel;
+
+var _react = _interopRequireWildcard(require("react"));
+
+var _rlog = _interopRequireDefault(require("@riil-frontend/component-topology-utils/es/rlog"));
+
+var _icon = require("../../../../../common/icons/icon");
+
+var _HtCustomImagePanel = _interopRequireDefault(require("./HtCustomImagePanel"));
+
+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 {*} props 
+ * @returns 
+ */
+function CustomImagePanel(props) {
+  var topo = props.topo;
+  var icons = (0, _react.useMemo)(function () {
+    return (0, _icon.getUserCustomIconsForHt)(topo);
+  }, []);
+  return /*#__PURE__*/_react["default"].createElement(_HtCustomImagePanel["default"], {
+    icons: icons,
+    topo: topo
+  });
+}

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

@@ -0,0 +1,58 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+exports.__esModule = true;
+exports["default"] = HtCustomImagePanel;
+
+var _react = _interopRequireWildcard(require("react"));
+
+var _rlog = _interopRequireDefault(require("@riil-frontend/component-topology-utils/es/rlog"));
+
+var _icon = require("../../../../../common/icons/icon");
+
+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 {*} props 
+ * @returns 
+ */
+function HtCustomImagePanel(props) {
+  var topo = props.topo,
+      icons = props.icons; // 组件
+
+  var viewRef = (0, _react.useRef)(null); // div容器
+
+  var divRef = (0, _react.useRef)();
+  (0, _react.useEffect)(function () {
+    // 初始化
+    var htTopo = topo.getHtTopo();
+    var container = divRef.current;
+
+    try {
+      viewRef.current = htTopo.createUploadImagePalette(container, {
+        icons: icons
+      });
+    } catch (error) {
+      _rlog["default"].error('初始化资源面板失败', error);
+    } // 注销组件
+
+
+    return function () {
+      if (viewRef.current) {
+        viewRef.current.destroy();
+        viewRef.current = null;
+      }
+    };
+  }, []);
+  return /*#__PURE__*/_react["default"].createElement("div", {
+    ref: divRef,
+    style: {
+      width: '100%' // height: '100%',
+
+    }
+  });
+}

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

@@ -0,0 +1,56 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+exports.__esModule = true;
+exports["default"] = HtImagePalette;
+
+var _react = _interopRequireWildcard(require("react"));
+
+var _rlog = _interopRequireDefault(require("@riil-frontend/component-topology-utils/es/rlog"));
+
+function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { "default": obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj["default"] = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+
+/**
+ * 组件面板
+ * @param {*} props 
+ * @returns 
+ */
+function HtImagePalette(props) {
+  var topo = props.topo,
+      icons = props.icons; // 组件
+
+  var viewRef = (0, _react.useRef)(null); // div容器
+
+  var divRef = (0, _react.useRef)();
+  (0, _react.useEffect)(function () {
+    // 初始化
+    var htTopo = topo.getHtTopo();
+    var container = divRef.current;
+
+    try {
+      viewRef.current = htTopo.createImagePalette(container, {
+        icons: icons
+      });
+    } catch (error) {
+      _rlog["default"].error('初始化资源面板失败', error);
+    } // 注销组件
+
+
+    return function () {
+      if (viewRef.current) {
+        viewRef.current.destroy();
+        viewRef.current = null;
+      }
+    };
+  }, []);
+  return /*#__PURE__*/_react["default"].createElement("div", {
+    ref: divRef,
+    style: {
+      width: '100%' // height: '100%',
+
+    }
+  });
+}

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

@@ -0,0 +1,56 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+exports.__esModule = true;
+exports["default"] = ImagePalette;
+
+var _react = _interopRequireWildcard(require("react"));
+
+var _rlog = _interopRequireDefault(require("@riil-frontend/component-topology-utils/es/rlog"));
+
+function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { "default": obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj["default"] = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+
+/**
+ * 组件面板
+ * @param {*} props 
+ * @returns 
+ */
+function ImagePalette(props) {
+  var topo = props.topo,
+      icons = props.icons; // 组件
+
+  var viewRef = (0, _react.useRef)(null); // div容器
+
+  var divRef = (0, _react.useRef)();
+  (0, _react.useEffect)(function () {
+    // 初始化
+    var htTopo = topo.getHtTopo();
+    var container = divRef.current;
+
+    try {
+      viewRef.current = htTopo.createImagePalette(container, {
+        icons: icons
+      });
+    } catch (error) {
+      _rlog["default"].error('初始化资源面板失败', error);
+    } // 注销组件
+
+
+    return function () {
+      if (viewRef.current) {
+        viewRef.current.destroy();
+        viewRef.current = null;
+      }
+    };
+  }, []);
+  return /*#__PURE__*/_react["default"].createElement("div", {
+    ref: divRef,
+    style: {
+      width: '100%',
+      height: '100%'
+    }
+  });
+}

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

@@ -0,0 +1,45 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+exports.__esModule = true;
+exports["default"] = ImagePanel;
+
+var _collapse = _interopRequireDefault(require("@alifd/next/lib/collapse"));
+
+var _button = _interopRequireDefault(require("@alifd/next/lib/button"));
+
+var _icon = _interopRequireDefault(require("@alifd/next/lib/icon"));
+
+var _react = _interopRequireDefault(require("react"));
+
+var _classnames = _interopRequireDefault(require("classnames"));
+
+var _Panel = _interopRequireDefault(require("../../../../../../components/collapse/Panel"));
+
+var _CollapseModule = _interopRequireDefault(require("../../../../../../components/collapse/Collapse.module.scss"));
+
+var _CiTypeImagePanel = _interopRequireDefault(require("./CiTypeImagePanel"));
+
+var _CustomImagePanel = _interopRequireDefault(require("./CustomImagePanel"));
+
+function ImagePanel(props) {
+  return /*#__PURE__*/_react["default"].createElement(_collapse["default"], {
+    defaultExpandedKeys: ['资源图片', '自定义图片'],
+    style: {
+      border: 'none'
+    },
+    className: (0, _classnames["default"])(_CollapseModule["default"].collapse, _CollapseModule["default"].contentNoPadding)
+  }, /*#__PURE__*/_react["default"].createElement(_Panel["default"], {
+    key: "\u8D44\u6E90\u56FE\u7247",
+    title: "\u8D44\u6E90\u56FE\u7247"
+  }, /*#__PURE__*/_react["default"].createElement(_CiTypeImagePanel["default"], props)), /*#__PURE__*/_react["default"].createElement(_Panel["default"], {
+    key: "\u81EA\u5B9A\u4E49\u56FE\u7247",
+    title: "\u81EA\u5B9A\u4E49\u56FE\u7247",
+    extra: /*#__PURE__*/_react["default"].createElement(_button["default"], {
+      title: "\u5BFC\u51FA"
+    }, /*#__PURE__*/_react["default"].createElement(_icon["default"], {
+      type: "topo_button_icon_export"
+    }))
+  }, /*#__PURE__*/_react["default"].createElement(_CustomImagePanel["default"], props)));
+}

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

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

package/lib/core/editor/components/Sidebar/views/{LinkView.js → LinkPanel.js}

@@ -1,39 +1,50 @@
 "use strict";
 
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
 exports.__esModule = true;
 exports["default"] = void 0;
 
 var _react = _interopRequireWildcard(require("react"));
 
+var _rlog = _interopRequireDefault(require("@riil-frontend/component-topology-utils/es/rlog"));
+
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
 
 function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { "default": obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj["default"] = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
 
-function LinkView(props) {
-  var topo = props.topo,
-      active = props.active; // 组件
+/**
+ * 链路面板
+ * @param {*} props 
+ * @returns 
+ */
+function LinkPanel(props) {
+  var topo = props.topo; // 组件
 
   var viewRef = (0, _react.useRef)(null); // div容器
 
-  var containerRef = (0, _react.useRef)(); // 显示后初始化
-
+  var divRef = (0, _react.useRef)();
   (0, _react.useEffect)(function () {
-    if (active && !viewRef.current) {
-      var htTopo = topo.getHtTopo();
-      var container = containerRef.current; // TODO 初始化
+    // 初始化
+    var htTopo = topo.getHtTopo();
+    var container = divRef.current;
 
+    try {
       viewRef.current = htTopo.createLinkPalette(container);
-    }
-  }, [active]); // 注销组件
+    } catch (error) {
+      _rlog["default"].error('初始化资源面板失败', error);
+    } // 注销组件
 
-  (0, _react.useEffect)(function () {
-    if (viewRef.current) {
-      viewRef.current.destroy();
-      viewRef.current = null;
-    }
+
+    return function () {
+      if (viewRef.current) {
+        viewRef.current.destroy();
+        viewRef.current = null;
+      }
+    };
   }, []);
   return /*#__PURE__*/_react["default"].createElement("div", {
-    ref: containerRef,
+    ref: divRef,
     style: {
       width: '100%',
       height: '100%'
@@ -41,5 +52,5 @@ function LinkView(props) {
   });
 }
 
-var _default = LinkView;
+var _default = LinkPanel;
 exports["default"] = _default;