@riil-frontend/component-topology 10.0.1 → 10.0.3

package/es/core/editor/components/BackgroundView/index.js

@@ -286,7 +286,7 @@ export default function BackgroundView(props) {
   return /*#__PURE__*/React.createElement("div", {
     className: styles['background-view']
   }, /*#__PURE__*/React.createElement("div", {
-    className: styles.option
+    className: styles.header
   }, /*#__PURE__*/React.createElement(_Button, {
     title: "\u6062\u590D\u9ED8\u8BA4",
     onClick: resetDefault
@@ -299,6 +299,8 @@ export default function BackgroundView(props) {
   }, /*#__PURE__*/React.createElement(_Icon, {
     type: "topo_button_icon_export"
   })))), /*#__PURE__*/React.createElement("div", {
+    className: styles.content
+  }, /*#__PURE__*/React.createElement("div", {
     className: styles.list
   }, /*#__PURE__*/React.createElement(List, {
     selected: (current === null || current === void 0 ? void 0 : current.id) || '',
@@ -328,7 +330,7 @@ export default function BackgroundView(props) {
       setUploadDialogVisible(false);
       getBackground();
     }
-  }), /*#__PURE__*/React.createElement(_Loading, {
+  })), /*#__PURE__*/React.createElement(_Loading, {
     visible: loadingBackground,
     fullScreen: true
   }));

package/es/core/editor/components/BackgroundView/index.module.scss

@@ -2,18 +2,27 @@
 
 .background-view {
   width: 260px;
-  padding: 16px;
   background: #fff;
   height: 100%;
   overflow: auto;
-  .option {
+  display: flex;
+  flex-direction: column;
+
+  .header {
+    padding: 16px 16px 12px 16px;
     text-align: right;
     button {
       margin-left: 8px;
     }
   }
+
+  .content {
+    flex: 1;
+    overflow: auto;
+    padding: 0 16px 16px 16px;
+  }
+
   .list {
-    margin-top: 8px;
     .tag {
       width: 100%;
       height: 129px;

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

@@ -28,7 +28,7 @@ var panes = [{
   icon: '/img/topo/editor/sidebar/icon/背景.svg',
   content: BackgroundPanel
 }, {
-  title: '画布',
+  title: '主题',
   key: 'canvas',
   titleTootip: '拓扑图画布底图',
   icon: '/img/topo/editor/sidebar/icon/画布.svg',

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

@@ -1,7 +1,6 @@
 import React, { useMemo } from 'react';
 import rlog from '@riil-frontend/component-topology-utils/es/rlog';
 import ImagePalette from "./HtImagePalette";
-import { getResourceIcons } from "../../../../../common/icons/icon";
 /**
  * 组件面板
  * @param {*} props 
@@ -9,10 +8,8 @@ import { getResourceIcons } from "../../../../../common/icons/icon";
  */
 
 export default function CiTypeImagePanel(props) {
-  var topo = props.topo;
-  var icons = useMemo(function () {
-    return getResourceIcons(topo);
-  }, []);
+  var topo = props.topo,
+      icons = props.icons;
   return /*#__PURE__*/React.createElement(ImagePalette, {
     icons: icons,
     topo: topo

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

@@ -46,6 +46,13 @@ export default function HtImagePalette(props) {
       }
     };
   }, []);
+  useEffect(function () {
+    var view = viewRef.current;
+
+    if (view && view.setIcons) {
+      view.setIcons(icons);
+    }
+  }, [icons]);
   return /*#__PURE__*/React.createElement("div", {
     ref: divRef,
     className: styles.container

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

@@ -1,54 +1,143 @@
+import _Box from "@alifd/next/es/box";
+import _Search from "@alifd/next/es/search";
 import _extends from "@babel/runtime/helpers/extends";
 import _Button from "@alifd/next/es/button";
 import _Icon from "@alifd/next/es/icon";
-import React, { useMemo } from 'react';
+import React, { useMemo, useState } from 'react';
 import Collapse from "../../../../../../components/collapse/Collapse";
 import CiTypeImagePanel from "./CiTypeImagePanel";
 import CustomImagePanel from "./CustomImagePanel";
-import { getBasicIcons } from "../../../../../common/icons/icon";
+import { getResourceIcons, getBasicIcons } from "../../../../../common/icons/icon";
 import ImagePalette from "./HtImagePalette";
 import { useCustomIcons } from "../../../../../common/icons/useIcons";
 var CollapsePanel = Collapse.Panel;
 export default function ImagePanel(props) {
   var topo = props.topo;
+
+  var _useState = useState(''),
+      searchValue = _useState[0],
+      setSearchValue = _useState[1];
+
+  var resourceIcons = useMemo(function () {
+    return getResourceIcons(topo).filter(function (icon) {
+      if (!searchValue) {
+        return true;
+      }
+
+      return icon.name.toLocaleLowerCase().includes(searchValue.toLocaleLowerCase());
+    });
+  }, [searchValue]);
   var basicIcons = useMemo(function () {
-    return getBasicIcons(topo, false);
-  }, []);
+    return getBasicIcons(topo, false).filter(function (icon) {
+      if (!searchValue) {
+        return true;
+      }
+
+      return icon.name.toLocaleLowerCase().includes(searchValue.toLocaleLowerCase());
+    });
+  }, [searchValue]);
   var customIcons = useCustomIcons(topo);
+  var searchCustomIcons = useMemo(function () {
+    return customIcons.filter(function (icon) {
+      if (!searchValue) {
+        return true;
+      }
+
+      return icon.name.toLocaleLowerCase().includes(searchValue.toLocaleLowerCase());
+    });
+  }, [customIcons, searchValue]);
 
   var handleDownloadCustomImages = function handleDownloadCustomImages() {
     window.open('/topo/v1/api/shape/download/all');
   };
 
-  return /*#__PURE__*/React.createElement(Collapse, {
-    accordion: true,
-    defaultExpandedKeys: ['资源图片'],
+  var handleSearch = function handleSearch(v) {
+    setSearchValue(v);
+  };
+
+  var handleSearchChange = function handleSearchChange(value) {
+    setSearchValue(value); // if (!value) {
+    // }
+  };
+
+  var renderImageContent = function renderImageContent() {
+    var panels = [{
+      key: '资源图片',
+      render: function render() {
+        return /*#__PURE__*/React.createElement(CollapsePanel, {
+          key: "\u8D44\u6E90\u56FE\u7247",
+          title: "\u8D44\u6E90\u56FE\u7247"
+        }, /*#__PURE__*/React.createElement(CiTypeImagePanel, {
+          topo: topo,
+          icons: resourceIcons
+        }));
+      }
+    }, {
+      key: '基础图片',
+      render: function render() {
+        return /*#__PURE__*/React.createElement(CollapsePanel, {
+          key: "\u57FA\u7840\u56FE\u7247",
+          title: "\u57FA\u7840\u56FE\u7247"
+        }, /*#__PURE__*/React.createElement(ImagePalette, {
+          icons: basicIcons,
+          topo: topo
+        }));
+      }
+    }, {
+      key: '自定义图片',
+      hidden: searchValue && !searchCustomIcons.length,
+      render: function render() {
+        return /*#__PURE__*/React.createElement(CollapsePanel, {
+          key: "\u81EA\u5B9A\u4E49\u56FE\u7247",
+          title: "\u81EA\u5B9A\u4E49\u56FE\u7247",
+          extra: /*#__PURE__*/React.createElement(_Button, {
+            title: "\u5BFC\u51FA",
+            onClick: handleDownloadCustomImages,
+            disabled: !customIcons.length
+          }, /*#__PURE__*/React.createElement(_Icon, {
+            type: "topo_button_icon_export"
+          }))
+        }, /*#__PURE__*/React.createElement(CustomImagePanel, _extends({}, props, {
+          icons: searchCustomIcons
+        })));
+      }
+    }].filter(function (panel) {
+      return !panel.hidden;
+    });
+    return /*#__PURE__*/React.createElement(Collapse, {
+      accordion: true,
+      defaultExpandedKeys: ['资源图片'],
+      style: {
+        border: 'none',
+        minWidth: '300px'
+      },
+      fullheight: true,
+      noContentPadding: true
+    }, panels.map(function (panel) {
+      return panel.render();
+    }));
+  };
+
+  return /*#__PURE__*/React.createElement(_Box, {
+    direction: "column",
+    style: {
+      height: '100%'
+    }
+  }, /*#__PURE__*/React.createElement("div", {
+    style: {
+      margin: '16px 16px 0px 16px'
+    }
+  }, /*#__PURE__*/React.createElement(_Search, {
+    value: searchValue,
+    onChange: handleSearchChange,
+    onSearch: handleSearch,
+    placeholder: "\u8BF7\u8F93\u5165\u5173\u952E\u8BCD",
+    shape: "simple",
+    hasClear: true,
     style: {
-      border: 'none',
-      minWidth: '300px'
-    },
-    fullheight: true,
-    noContentPadding: true
-  }, /*#__PURE__*/React.createElement(CollapsePanel, {
-    key: "\u8D44\u6E90\u56FE\u7247",
-    title: "\u8D44\u6E90\u56FE\u7247"
-  }, /*#__PURE__*/React.createElement(CiTypeImagePanel, props)), /*#__PURE__*/React.createElement(CollapsePanel, {
-    key: "\u57FA\u7840\u56FE\u7247",
-    title: "\u57FA\u7840\u56FE\u7247"
-  }, /*#__PURE__*/React.createElement(ImagePalette, {
-    icons: basicIcons,
-    topo: topo
-  })), /*#__PURE__*/React.createElement(CollapsePanel, {
-    key: "\u81EA\u5B9A\u4E49\u56FE\u7247",
-    title: "\u81EA\u5B9A\u4E49\u56FE\u7247",
-    extra: /*#__PURE__*/React.createElement(_Button, {
-      title: "\u5BFC\u51FA",
-      onClick: handleDownloadCustomImages,
-      disabled: !customIcons.length
-    }, /*#__PURE__*/React.createElement(_Icon, {
-      type: "topo_button_icon_export"
-    }))
-  }, /*#__PURE__*/React.createElement(CustomImagePanel, _extends({}, props, {
-    icons: customIcons
-  }))));
+      width: '100%'
+    }
+  })), /*#__PURE__*/React.createElement(_Box, {
+    flex: 1
+  }, renderImageContent()));
 }

package/es/core/editor/components/Toolbar/components/Tooltip.js

@@ -6,7 +6,6 @@ import styles from "./Tooltip.module.scss";
 function Tooltip(props) {
   var title = props.title;
   return /*#__PURE__*/React.createElement(_Balloon, _extends({
-    v2: true,
     triggerType: "hover",
     title: "\u79FB\u52A8",
     align: "br",

package/es/core/editor/components/Toolbar/widgets/FontSizeWidget.js

@@ -40,7 +40,7 @@ function FontSizeWidget(props) {
   useEffect(function () {}, [selection]);
   return /*#__PURE__*/React.createElement(WidgetBox, {
     label: "\u5B57\u53F7",
-    tooltip: "\u9009\u53D6\u6587\u5B57\u7684\u65B0\u5B57\u4F53",
+    tooltip: "\u66F4\u6539\u6587\u5B57\u5927\u5C0F",
     showLabel: showLabel,
     disabled: disabled
   }, /*#__PURE__*/React.createElement(FontSizeSelect, {

package/es/core/editor/components/Toolbar/widgets/NodeSizeButton/NodeSizeButton.js

@@ -74,7 +74,7 @@ function NodeSizeButton(props) {
   return /*#__PURE__*/React.createElement(WidgetBox, {
     label: "\u56FE\u7247\u5C3A\u5BF8",
     disabled: disabled,
-    tooltip: "\u56FE\u7247\u5C3A\u5BF8",
+    tooltip: "\u5C3A\u5BF8\u8BBE\u7F6E",
     showLabel: showLabel
   }, /*#__PURE__*/React.createElement("div", {
     className: styles.toolbarNodeSizeSetting

package/es/core/models/AttributeMetricDisplay.js

@@ -612,12 +612,11 @@ var AttributeMetricDisplay = /*#__PURE__*/function () {
   ;
 
   _proto.buildTagsTips = function buildTagsTips() {
-    var _this6 = this;
-
     var data = this.getData(); // 获取标注、悬浮框配置
 
     var ciConfigs = this.getResourceTagTipConfig(); // console.log("buildTagsTips---ciConfigs", ciConfigs);
 
+    var formatter = new AttributeFormatter(this.topo);
     var ciTagsAndTips = ciConfigs.map(function (ciConfig) {
       var ciDataItem = findItem(data, "id", ciConfig.id); // console.log("buildTagsTips-ciDataItem", ciDataItem);
 
@@ -630,13 +629,17 @@ var AttributeMetricDisplay = /*#__PURE__*/function () {
       } // 获取ci数据
 
 
-      var ciData = _extends({}, findItem(data, "id", ciConfig.id), {
+      var ciData = _extends({}, ciDataItem, {
         ciType: ciConfig.ciType
-      });
+      }); // console.log("AttributeFormatter-----", ciData, ciConfig);
 
-      var formatter = new AttributeFormatter(_this6.topo); // console.log("AttributeFormatter-----", ciData, ciConfig);
 
-      var tags = formatter.formatAttrs(ciConfig.tags, ciData); // 链路标注箭头
+      var tags = formatter.formatAttrs(ciConfig.tags, ciData) // 展示的所有标注不带对应的名字（包括属性和指标）
+      .map(function (item) {
+        return _extends({}, item, {
+          name: ''
+        });
+      }); // 链路标注箭头
 
       if (ciConfig.type === "edge") {
         tags = {
@@ -653,8 +656,7 @@ var AttributeMetricDisplay = /*#__PURE__*/function () {
       };
     }); // console.log("ciTagsAndTips", ciTagsAndTips);
 
-    var elementTagsAndTips = [].concat(ciTagsAndTips, this.extElementTagTipBuilder ? this.extElementTagTipBuilder.getExtElementTagsAndTips() : []);
-    console.log("ciTagsAndTips", elementTagsAndTips); // 刷新标注、浮层
+    var elementTagsAndTips = [].concat(ciTagsAndTips, this.extElementTagTipBuilder ? this.extElementTagTipBuilder.getExtElementTagsAndTips() : []); // 刷新标注、浮层
     // rlog.debug('AttributeMetricDisplay.buildTagsTips', {tagsAndTips: elementTagsAndTips, ciConfigs});
 
     return elementTagsAndTips;

package/es/core/models/TopoApp.js

@@ -24,7 +24,7 @@ import ElementTagTipConfig from "./tagstips/ElementTagTipConfig";
 import SelectionModel from "./SelectionModel";
 import CiCache from "./cache/CiCache"; // eslint-disable-next-line no-undef
 
-var version = typeof "10.0.1" === 'string' ? "10.0.1" : null;
+var version = typeof "10.0.3" === 'string' ? "10.0.3" : null;
 console.info("\u62D3\u6251\u7248\u672C: " + version);
 /**
  * 拓扑显示和编辑
@@ -570,8 +570,11 @@ var Topo = /*#__PURE__*/function () {
               return this.options.onSwitchToEditMode(this);
 
             case 13:
-              // 更新节点名称显示隐藏
-              this.attributeMetricDisplay.updateNodesNameVisible(); // 加载自定义上传的图标
+              if (this.getDataModel()) {
+                // 更新节点名称显示隐藏
+                this.attributeMetricDisplay.updateNodesNameVisible();
+              } // 加载自定义上传的图标
+
 
               iconManageDispatchers = this.store.getModelDispatchers('customIcon');
               iconManageDispatchers.loadEditorIcons();

package/lib/core/editor/components/BackgroundView/index.js

@@ -315,7 +315,7 @@ function BackgroundView(props) {
   return /*#__PURE__*/_react["default"].createElement("div", {
     className: _indexModule["default"]['background-view']
   }, /*#__PURE__*/_react["default"].createElement("div", {
-    className: _indexModule["default"].option
+    className: _indexModule["default"].header
   }, /*#__PURE__*/_react["default"].createElement(_button["default"], {
     title: "\u6062\u590D\u9ED8\u8BA4",
     onClick: resetDefault
@@ -328,6 +328,8 @@ function BackgroundView(props) {
   }, /*#__PURE__*/_react["default"].createElement(_icon["default"], {
     type: "topo_button_icon_export"
   })))), /*#__PURE__*/_react["default"].createElement("div", {
+    className: _indexModule["default"].content
+  }, /*#__PURE__*/_react["default"].createElement("div", {
     className: _indexModule["default"].list
   }, /*#__PURE__*/_react["default"].createElement(List, {
     selected: (current === null || current === void 0 ? void 0 : current.id) || '',
@@ -357,7 +359,7 @@ function BackgroundView(props) {
       setUploadDialogVisible(false);
       getBackground();
     }
-  }), /*#__PURE__*/_react["default"].createElement(_loading["default"], {
+  })), /*#__PURE__*/_react["default"].createElement(_loading["default"], {
     visible: loadingBackground,
     fullScreen: true
   }));

package/lib/core/editor/components/BackgroundView/index.module.scss

@@ -2,18 +2,27 @@
 
 .background-view {
   width: 260px;
-  padding: 16px;
   background: #fff;
   height: 100%;
   overflow: auto;
-  .option {
+  display: flex;
+  flex-direction: column;
+
+  .header {
+    padding: 16px 16px 12px 16px;
     text-align: right;
     button {
       margin-left: 8px;
     }
   }
+
+  .content {
+    flex: 1;
+    overflow: auto;
+    padding: 0 16px 16px 16px;
+  }
+
   .list {
-    margin-top: 8px;
     .tag {
       width: 100%;
       height: 129px;

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

@@ -40,7 +40,7 @@ var panes = [{
   icon: '/img/topo/editor/sidebar/icon/背景.svg',
   content: _BackgroundPanel["default"]
 }, {
-  title: '画布',
+  title: '主题',
   key: 'canvas',
   titleTootip: '拓扑图画布底图',
   icon: '/img/topo/editor/sidebar/icon/画布.svg',

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

@@ -11,8 +11,6 @@ var _rlog = _interopRequireDefault(require("@riil-frontend/component-topology-ut
 
 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; }
@@ -23,10 +21,8 @@ function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj &&
  * @returns 
  */
 function CiTypeImagePanel(props) {
-  var topo = props.topo;
-  var icons = (0, _react.useMemo)(function () {
-    return (0, _icon.getResourceIcons)(topo);
-  }, []);
+  var topo = props.topo,
+      icons = props.icons;
   return /*#__PURE__*/_react["default"].createElement(_HtImagePalette["default"], {
     icons: icons,
     topo: topo

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

@@ -60,6 +60,13 @@ function HtImagePalette(props) {
       }
     };
   }, []);
+  (0, _react.useEffect)(function () {
+    var view = viewRef.current;
+
+    if (view && view.setIcons) {
+      view.setIcons(icons);
+    }
+  }, [icons]);
   return /*#__PURE__*/_react["default"].createElement("div", {
     ref: divRef,
     className: _HtImagePaletteModule["default"].container

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

@@ -5,6 +5,10 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 exports.__esModule = true;
 exports["default"] = ImagePanel;
 
+var _box = _interopRequireDefault(require("@alifd/next/lib/box"));
+
+var _search = _interopRequireDefault(require("@alifd/next/lib/search"));
+
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 
 var _button = _interopRequireDefault(require("@alifd/next/lib/button"));
@@ -33,44 +37,131 @@ var CollapsePanel = _Collapse["default"].Panel;
 
 function ImagePanel(props) {
   var topo = props.topo;
+
+  var _useState = (0, _react.useState)(''),
+      searchValue = _useState[0],
+      setSearchValue = _useState[1];
+
+  var resourceIcons = (0, _react.useMemo)(function () {
+    return (0, _icon2.getResourceIcons)(topo).filter(function (icon) {
+      if (!searchValue) {
+        return true;
+      }
+
+      return icon.name.toLocaleLowerCase().includes(searchValue.toLocaleLowerCase());
+    });
+  }, [searchValue]);
   var basicIcons = (0, _react.useMemo)(function () {
-    return (0, _icon2.getBasicIcons)(topo, false);
-  }, []);
+    return (0, _icon2.getBasicIcons)(topo, false).filter(function (icon) {
+      if (!searchValue) {
+        return true;
+      }
+
+      return icon.name.toLocaleLowerCase().includes(searchValue.toLocaleLowerCase());
+    });
+  }, [searchValue]);
   var customIcons = (0, _useIcons.useCustomIcons)(topo);
+  var searchCustomIcons = (0, _react.useMemo)(function () {
+    return customIcons.filter(function (icon) {
+      if (!searchValue) {
+        return true;
+      }
+
+      return icon.name.toLocaleLowerCase().includes(searchValue.toLocaleLowerCase());
+    });
+  }, [customIcons, searchValue]);
 
   var handleDownloadCustomImages = function handleDownloadCustomImages() {
     window.open('/topo/v1/api/shape/download/all');
   };
 
-  return /*#__PURE__*/_react["default"].createElement(_Collapse["default"], {
-    accordion: true,
-    defaultExpandedKeys: ['资源图片'],
+  var handleSearch = function handleSearch(v) {
+    setSearchValue(v);
+  };
+
+  var handleSearchChange = function handleSearchChange(value) {
+    setSearchValue(value); // if (!value) {
+    // }
+  };
+
+  var renderImageContent = function renderImageContent() {
+    var panels = [{
+      key: '资源图片',
+      render: function render() {
+        return /*#__PURE__*/_react["default"].createElement(CollapsePanel, {
+          key: "\u8D44\u6E90\u56FE\u7247",
+          title: "\u8D44\u6E90\u56FE\u7247"
+        }, /*#__PURE__*/_react["default"].createElement(_CiTypeImagePanel["default"], {
+          topo: topo,
+          icons: resourceIcons
+        }));
+      }
+    }, {
+      key: '基础图片',
+      render: function render() {
+        return /*#__PURE__*/_react["default"].createElement(CollapsePanel, {
+          key: "\u57FA\u7840\u56FE\u7247",
+          title: "\u57FA\u7840\u56FE\u7247"
+        }, /*#__PURE__*/_react["default"].createElement(_HtImagePalette["default"], {
+          icons: basicIcons,
+          topo: topo
+        }));
+      }
+    }, {
+      key: '自定义图片',
+      hidden: searchValue && !searchCustomIcons.length,
+      render: function render() {
+        return /*#__PURE__*/_react["default"].createElement(CollapsePanel, {
+          key: "\u81EA\u5B9A\u4E49\u56FE\u7247",
+          title: "\u81EA\u5B9A\u4E49\u56FE\u7247",
+          extra: /*#__PURE__*/_react["default"].createElement(_button["default"], {
+            title: "\u5BFC\u51FA",
+            onClick: handleDownloadCustomImages,
+            disabled: !customIcons.length
+          }, /*#__PURE__*/_react["default"].createElement(_icon["default"], {
+            type: "topo_button_icon_export"
+          }))
+        }, /*#__PURE__*/_react["default"].createElement(_CustomImagePanel["default"], (0, _extends2["default"])({}, props, {
+          icons: searchCustomIcons
+        })));
+      }
+    }].filter(function (panel) {
+      return !panel.hidden;
+    });
+    return /*#__PURE__*/_react["default"].createElement(_Collapse["default"], {
+      accordion: true,
+      defaultExpandedKeys: ['资源图片'],
+      style: {
+        border: 'none',
+        minWidth: '300px'
+      },
+      fullheight: true,
+      noContentPadding: true
+    }, panels.map(function (panel) {
+      return panel.render();
+    }));
+  };
+
+  return /*#__PURE__*/_react["default"].createElement(_box["default"], {
+    direction: "column",
+    style: {
+      height: '100%'
+    }
+  }, /*#__PURE__*/_react["default"].createElement("div", {
+    style: {
+      margin: '16px 16px 0px 16px'
+    }
+  }, /*#__PURE__*/_react["default"].createElement(_search["default"], {
+    value: searchValue,
+    onChange: handleSearchChange,
+    onSearch: handleSearch,
+    placeholder: "\u8BF7\u8F93\u5165\u5173\u952E\u8BCD",
+    shape: "simple",
+    hasClear: true,
     style: {
-      border: 'none',
-      minWidth: '300px'
-    },
-    fullheight: true,
-    noContentPadding: true
-  }, /*#__PURE__*/_react["default"].createElement(CollapsePanel, {
-    key: "\u8D44\u6E90\u56FE\u7247",
-    title: "\u8D44\u6E90\u56FE\u7247"
-  }, /*#__PURE__*/_react["default"].createElement(_CiTypeImagePanel["default"], props)), /*#__PURE__*/_react["default"].createElement(CollapsePanel, {
-    key: "\u57FA\u7840\u56FE\u7247",
-    title: "\u57FA\u7840\u56FE\u7247"
-  }, /*#__PURE__*/_react["default"].createElement(_HtImagePalette["default"], {
-    icons: basicIcons,
-    topo: topo
-  })), /*#__PURE__*/_react["default"].createElement(CollapsePanel, {
-    key: "\u81EA\u5B9A\u4E49\u56FE\u7247",
-    title: "\u81EA\u5B9A\u4E49\u56FE\u7247",
-    extra: /*#__PURE__*/_react["default"].createElement(_button["default"], {
-      title: "\u5BFC\u51FA",
-      onClick: handleDownloadCustomImages,
-      disabled: !customIcons.length
-    }, /*#__PURE__*/_react["default"].createElement(_icon["default"], {
-      type: "topo_button_icon_export"
-    }))
-  }, /*#__PURE__*/_react["default"].createElement(_CustomImagePanel["default"], (0, _extends2["default"])({}, props, {
-    icons: customIcons
-  }))));
+      width: '100%'
+    }
+  })), /*#__PURE__*/_react["default"].createElement(_box["default"], {
+    flex: 1
+  }, renderImageContent()));
 }