@riil-frontend/component-topology 2.3.21 → 2.4.0

package/lib/core/editor/components/settings/Settings.js

@@ -27,9 +27,30 @@ var _ViewPropertyView = _interopRequireDefault(require("./view/ViewPropertyView"
 
 var _LinkPropertyView = _interopRequireDefault(require("./link/LinkPropertyView"));
 
-function Settings(props) {
-  var _selection$;
+function getElementType(selection) {
+  var selectionElement = selection[0];
+  var selectionSize = selection.length;
+  var elementType;
 
+  if (!selectionSize) {
+    elementType = 'view';
+  } else if ((0, _htElementDataUtil.isGroup)(selectionElement)) {
+    elementType = 'group';
+  } else if ((0, _htElementDataUtil.isNode)(selectionElement)) {
+    elementType = 'node';
+  } else if ((0, _htElementDataUtil.isEdge)(selectionElement)) {
+    elementType = 'line';
+  } else if ((0, _htElementDataUtil.isLayer)(selectionElement)) {
+    // 分层
+    elementType = 'layer';
+  } else if ((0, _htElementDataUtil.isText)(selectionElement)) {
+    elementType = 'text';
+  }
+
+  return elementType;
+}
+
+function Settings(props) {
   var topo = props.topo,
       topoEditApi = props.topoEditApi,
       selection = props.selection,
@@ -41,9 +62,27 @@ function Settings(props) {
   (0, _react.useEffect)(function () {// const selectionModel = topo.getSelectionModel();
     // console.info('selection change', selection)
   }, [selection]);
-  var attrTypes = ['attrObject', 'position', 'styleMap']; // TODO 待优化
+  var propertyPanelMap = {
+    view: _SettingsForm["default"],
+    node: _NodePropertyView["default"],
+    layer: _LayerSettingsForm["default"],
+    text: _TextPropertyView["default"]
+  };
+
+  if (localStorage.getItem('topo.debug') === 'true') {
+    Object.assign(propertyPanelMap, {
+      line: _LinkPropertyView["default"],
+      view: _ViewPropertyView["default"]
+    });
+  } else {
+    if (!selectionSize) {
+      // 未选择元素
+      return null;
+    }
+  } // TODO 待优化
+
 
-  var updateElementProperty = (0, _react.useCallback)(function (name, value) {
+  var updateElementProperty = function updateElementProperty(name, value) {
     // const element = topo.getDataModel().getDataById(selection[0].id);
     var element = topo.getSelectionModel().getFirstData(); // console.info('updateElementProperty', {selection, element, name, value});
 
@@ -62,52 +101,16 @@ function Settings(props) {
     } else if (name === 'image') {
       element.setImage(value);
     }
-  }, [(_selection$ = selection[0]) === null || _selection$ === void 0 ? void 0 : _selection$.id]);
-  var propertyPanelMap = {
-    view: _SettingsForm["default"],
-    layer: _LayerSettingsForm["default"] // text: TextPropertyView,
-    // node: NodePropertyView,
-
   };
 
-  if (localStorage.getItem('topo.debug') === 'true') {
-    Object.assign(propertyPanelMap, {
-      text: _TextPropertyView["default"],
-      node: _NodePropertyView["default"],
-      line: _LinkPropertyView["default"],
-      view: _ViewPropertyView["default"]
-    });
-  } else {
-    if (!selectionSize) {
-      // 未选择元素
-      return null;
-    }
-  }
-
-  var elementType;
-  var selectionElement = selection[0];
-
-  if (!selectionSize) {
-    elementType = 'view';
-  } else if ((0, _htElementDataUtil.isGroup)(selectionElement)) {
-    elementType = 'group';
-  } else if ((0, _htElementDataUtil.isNode)(selectionElement)) {
-    elementType = 'node';
-  } else if ((0, _htElementDataUtil.isEdge)(selectionElement)) {
-    elementType = 'line';
-  } else if ((0, _htElementDataUtil.isLayer)(selectionElement)) {
-    // 分层
-    elementType = 'layer';
-  } else if ((0, _htElementDataUtil.isText)(selectionElement)) {
-    elementType = 'text';
-  }
-
+  var elementType = getElementType(selection);
   var Component = propertyPanelMap[elementType];
 
   if (!Component) {
     return null;
   }
 
+  var attrTypes = ['attrObject', 'position', 'styleMap'];
   var values = (0, _extends2["default"])({}, selection[0]);
   attrTypes.forEach(function (type) {
     Object.keys(values[type] || {}).forEach(function (key) {

package/lib/core/editor/components/settings/Settings.module.scss

@@ -1,5 +1,5 @@
 .settingsPanel {
-  width: 260px;
+  width: 280px;
   height: 100%;
   position: absolute;
   top: 0;
@@ -34,6 +34,11 @@
     }
     .next-collapse-panel-title {
       background: none;
+      font-size: 12px;
+      padding-bottom: 0;
+    }
+    .next-collapse-panel-content {
+      padding-left: 32px;
     }
   }
 

package/lib/core/editor/components/settings/common/{NodeSizeInput.js → NodeSizeInput/NodeSizeInput.js}

@@ -48,6 +48,7 @@ function NodeSizeInput(props) {
   }, /*#__PURE__*/_react["default"].createElement(_numberPicker["default"], {
     name: "width",
     min: 1,
+    max: 2000,
     placeholder: "\u8BF7\u8F93\u5165",
     style: {
       width: '100%'
@@ -58,6 +59,7 @@ function NodeSizeInput(props) {
   }, /*#__PURE__*/_react["default"].createElement(_numberPicker["default"], {
     name: "height",
     min: 1,
+    max: 2000,
     placeholder: "\u8BF7\u8F93\u5165",
     style: {
       width: '100%'

package/lib/core/editor/components/settings/common/NodeSizeInput/img/icon_/350/247/243/351/224/201.svg

@@ -0,0 +1,16 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="16px" height="16px" viewBox="0 0 16 16" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <!-- Generator: Sketch 63.1 (92452) - https://sketch.com -->
+    <title>topo/source/Icon/解锁</title>
+    <desc>Created with Sketch.</desc>
+    <g id="topo/source/Icon/解锁" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="Icon-HTSCIT_lianjieduankai" fill-rule="nonzero">
+            <g id="编组">
+                <rect id="矩形" fill="#000000" opacity="0" x="0" y="0" width="16" height="16"></rect>
+                <path d="M12.16836,11.80814 L4.69432,4.33403 L5.41203,3.61632 L12.88607,11.09043 L12.16836,11.80814 Z M6.20072,10.5109 L5.48301,9.79326 L6.9976,8.27867 L7.71531,8.99638 L6.20072,10.5109 Z" id="形状" fill="#4D6277"></path>
+                <polygon id="路径" fill="#4D6277" points="9.79536 5.48126 10.51307 6.19897 8.99848 7.71363 8.28077 6.99592"></polygon>
+                <path d="M9.729,3.303 L12.704,6.271 L10.128,8.847 L10.842,9.554 L13.775,6.621 L14.132,6.264 L13.775,5.907 L10.086,2.225 L9.729,1.868 L9.379,2.225 L6.439,5.158 L7.16,5.872 L9.729,3.303 Z M6.264,12.711 L3.296,9.743 L5.879,7.16 L5.158,6.439 L2.225,9.372 L1.868,9.729 L2.225,10.086 L5.914,13.775 L6.271,14.132 L6.621,13.775 L9.561,10.842 L8.847,10.128 L6.264,12.711 Z" id="形状" fill="#4D6277"></path>
+            </g>
+        </g>
+    </g>
+</svg>

package/lib/core/editor/components/settings/common/NodeSizeInput/img/icon_/351/224/201.svg

@@ -0,0 +1,15 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="16px" height="16px" viewBox="0 0 16 16" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <!-- Generator: Sketch 63.1 (92452) - https://sketch.com -->
+    <title>topo/source/Icon/锁</title>
+    <desc>Created with Sketch.</desc>
+    <g id="topo/source/Icon/锁" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="Icon-HTSCIT_lianjie" fill-rule="nonzero">
+            <g id="编组">
+                <rect id="矩形" fill="#000000" opacity="0" x="0" y="0" width="16" height="16"></rect>
+                <path d="M6.264,12.711 L3.296,9.743 L5.879,7.16 L5.158,6.439 L2.225,9.372 L1.868,9.729 L2.225,10.086 L5.914,13.775 L6.271,14.132 L6.621,13.775 L9.561,10.842 L8.847,10.128 L6.264,12.711 Z M9.729,3.303 L12.704,6.271 L10.128,8.847 L10.842,9.554 L13.775,6.621 L14.132,6.264 L13.775,5.907 L10.086,2.225 L9.729,1.868 L9.379,2.225 L6.439,5.158 L7.16,5.872 L9.729,3.303 Z" id="形状" fill="#4D6277"></path>
+                <polygon id="路径" fill="#4D6277" points="10.51846 6.20114 6.20226 10.51727 5.48462 9.79956 9.80075 5.48336"></polygon>
+            </g>
+        </g>
+    </g>
+</svg>

package/lib/core/editor/components/settings/common/text/FontStyleCheckbox.d.ts

@@ -0,0 +1 @@
+export default function FontStyleCheckbox(props: any): JSX.Element;

package/lib/core/editor/components/settings/common/text/FontStyleCheckbox.js

@@ -0,0 +1,68 @@
+"use strict";
+
+var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard");
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+exports.__esModule = true;
+exports["default"] = FontStyleCheckbox;
+
+var _button = _interopRequireDefault(require("@alifd/next/lib/button"));
+
+var _extends3 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+
+var _react = _interopRequireWildcard(require("react"));
+
+var _classnames2 = _interopRequireDefault(require("classnames"));
+
+var _FontStyleCheckboxModule = _interopRequireDefault(require("./FontStyleCheckbox.module.scss"));
+
+var _bold = _interopRequireDefault(require("./img/bold.svg"));
+
+var _italics = _interopRequireDefault(require("./img/italics.svg"));
+
+var _underline = _interopRequireDefault(require("./img/underline.svg"));
+
+function FontStyleCheckbox(props) {
+  var value = props.value,
+      onChange = props.onChange;
+  var options = [{
+    name: 'bold',
+    img: _bold["default"],
+    title: '粗体'
+  }, {
+    name: 'italic',
+    img: _italics["default"],
+    title: '斜体'
+  }, {
+    name: 'underline',
+    img: _underline["default"],
+    title: '下划线'
+  }];
+
+  var handleClick = function handleClick(name) {
+    var _extends2;
+
+    onChange((0, _extends3["default"])({}, value, (_extends2 = {}, _extends2[name] = !value[name], _extends2)));
+  };
+
+  return /*#__PURE__*/_react["default"].createElement(_button["default"].Group, {
+    className: _FontStyleCheckboxModule["default"].buttonGroup
+  }, options.map(function (item) {
+    var _classnames;
+
+    return /*#__PURE__*/_react["default"].createElement(_button["default"], {
+      key: item.name,
+      className: (0, _classnames2["default"])(_FontStyleCheckboxModule["default"].button, (_classnames = {}, _classnames[_FontStyleCheckboxModule["default"].checked] = value[item.name], _classnames)),
+      onClick: function onClick() {
+        handleClick(item.name);
+      },
+      title: item.title
+    }, /*#__PURE__*/_react["default"].createElement("img", {
+      src: item.img,
+      alt: ""
+    }));
+  }));
+}
+
+;

package/lib/core/editor/components/settings/common/text/FontStyleCheckbox.module.scss

@@ -0,0 +1,31 @@
+@import "@alifd/theme-19926/variables";
+
+.buttonGroup {
+  display: flex;
+}
+
+.button {
+  flex: 1;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+
+  &:global {
+    &.next-btn.next-btn-normal:hover {
+      background: #F2F7FD;
+      border: 1px solid $input-border-color;
+    }
+  }
+
+}
+
+.checked {
+
+  &:global {
+    &.next-btn.next-btn-normal {
+      background: #F2F7FD;
+    }
+  }
+
+}
+

package/lib/core/editor/components/settings/common/text/TextStyle.d.ts

@@ -0,0 +1 @@
+export default function TextStyle(props: any): JSX.Element;

package/lib/core/editor/components/settings/common/text/TextStyle.js

@@ -0,0 +1,150 @@
+"use strict";
+
+var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard");
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+exports.__esModule = true;
+exports["default"] = TextStyle;
+
+var _numberPicker = _interopRequireDefault(require("@alifd/next/lib/number-picker"));
+
+var _form = _interopRequireDefault(require("@alifd/next/lib/form"));
+
+var _field = _interopRequireDefault(require("@alifd/next/lib/field"));
+
+var _select = _interopRequireDefault(require("@alifd/next/lib/select"));
+
+var _react = _interopRequireWildcard(require("react"));
+
+var _ColorPicker = _interopRequireDefault(require("../../../LinkDynamicStyleSettingDrawer/rule/ColorPicker"));
+
+var _FontStyleCheckbox = _interopRequireDefault(require("./FontStyleCheckbox"));
+
+var Option = _select["default"].Option;
+
+function parseValue(value) {
+  return {
+    fontFamily: value.font.fontFamily || '黑体',
+    fontSize: value.font.fontSize || 12,
+    color: value.color || '#000000',
+    fontStyleChecked: {
+      underline: value.underline,
+      bold: value.font.bold,
+      italic: value.font.italic
+    }
+  };
+}
+
+function TextStyle(props) {
+  var value = props.value,
+      _onChange = props.onChange;
+
+  var field = _field["default"].useField({
+    autoUnmount: false,
+    values: parseValue(value),
+    onChange: function onChange(name, value) {
+      var values = field.getValues();
+      var aValues = {
+        color: values.color,
+        underline: values.fontStyleChecked.underline,
+        font: {
+          fontFamily: values.fontFamily,
+          fontSize: values.fontSize,
+          bold: values.fontStyleChecked.bold,
+          italic: values.fontStyleChecked.italic
+        }
+      };
+      _onChange && _onChange(aValues);
+    }
+  });
+
+  (0, _react.useEffect)(function () {
+    field.setValues(parseValue(value));
+  }, [value]);
+  return /*#__PURE__*/_react["default"].createElement(_form["default"], {
+    field: field,
+    labelAlign: "top",
+    component: "div"
+  }, /*#__PURE__*/_react["default"].createElement(_form["default"].Item, null, /*#__PURE__*/_react["default"].createElement("div", {
+    style: {
+      display: 'flex'
+    }
+  }, /*#__PURE__*/_react["default"].createElement("div", {
+    style: {
+      flex: 1,
+      paddingRight: 12
+    }
+  }, /*#__PURE__*/_react["default"].createElement(_form["default"].Item, {
+    label: "\u5B57\u4F53"
+  }, /*#__PURE__*/_react["default"].createElement(_select["default"], {
+    defaultValue: "\u9ED1\u4F53",
+    name: "fontFamily",
+    style: {
+      width: '100%',
+      marginRight: 8
+    }
+  }, /*#__PURE__*/_react["default"].createElement(Option, {
+    value: "\u5B8B\u4F53"
+  }, /*#__PURE__*/_react["default"].createElement("div", {
+    style: {
+      fontFamily: '宋体'
+    }
+  }, "\u5B8B\u4F53")), /*#__PURE__*/_react["default"].createElement(Option, {
+    value: "\u9ED1\u4F53"
+  }, /*#__PURE__*/_react["default"].createElement("div", {
+    style: {
+      fontFamily: '黑体'
+    }
+  }, "\u9ED1\u4F53")), /*#__PURE__*/_react["default"].createElement(Option, {
+    value: "Arial"
+  }, /*#__PURE__*/_react["default"].createElement("div", {
+    style: {
+      fontFamily: 'Arial'
+    }
+  }, "Arial"))))), /*#__PURE__*/_react["default"].createElement("div", {
+    style: {
+      width: 70
+    }
+  }, /*#__PURE__*/_react["default"].createElement(_form["default"].Item, {
+    label: "\u5B57\u53F7",
+    hasFeedback: true,
+    required: true,
+    requiredMessage: "\u4E0D\u80FD\u4E3A\u7A7A",
+    requiredTrigger: "onBlur",
+    asterisk: false
+  }, /*#__PURE__*/_react["default"].createElement(_numberPicker["default"], {
+    name: "fontSize",
+    min: 8,
+    max: 36,
+    style: {
+      width: '100%',
+      marginRight: 8
+    },
+    placeholder: "\u8BF7\u8F93\u5165"
+  })))), /*#__PURE__*/_react["default"].createElement("div", {
+    style: {
+      display: 'flex'
+    }
+  }, /*#__PURE__*/_react["default"].createElement("div", {
+    style: {
+      flex: 1,
+      paddingRight: 12
+    }
+  }, /*#__PURE__*/_react["default"].createElement(_form["default"].Item, {
+    label: "\u6837\u5F0F"
+  }, /*#__PURE__*/_react["default"].createElement(_FontStyleCheckbox["default"], {
+    name: "fontStyleChecked"
+  }))), /*#__PURE__*/_react["default"].createElement("div", {
+    style: {
+      width: 70
+    }
+  }, /*#__PURE__*/_react["default"].createElement(_form["default"].Item, {
+    label: "\u989C\u8272"
+  }, /*#__PURE__*/_react["default"].createElement(_ColorPicker["default"], {
+    name: "color",
+    align: "br"
+  }))))));
+}
+
+;

package/lib/core/editor/components/settings/common/text/fontStyleUtil.d.ts

@@ -0,0 +1,19 @@
+export default fontStyleUtil;
+declare namespace fontStyleUtil {
+    export function toMap(font?: string): {
+        fontFamily: string;
+        fontSize: number;
+        bold: boolean;
+        italic: boolean;
+    };
+    export function toMap(font?: string): {
+        fontFamily: string;
+        fontSize: number;
+        bold: boolean;
+        italic: boolean;
+    };
+    export function build(style: any): string;
+    export function build(style: any): string;
+    export function getFontStyleMap(obj: any, prefix: any): {};
+    export function getFontStyleMap(obj: any, prefix: any): {};
+}

package/lib/core/editor/components/settings/common/text/fontStyleUtil.js

@@ -0,0 +1,58 @@
+"use strict";
+
+exports.__esModule = true;
+exports["default"] = void 0;
+var fontStyleUtil = {
+  // 字体样式格式: bold italic 12px 黑体 或 12px 黑体
+  toMap: function toMap(font) {
+    if (font === void 0) {
+      font = '';
+    }
+
+    var arr = font.trim().split(' ');
+    var bold = font.indexOf('bold') > -1;
+    var italic = font.indexOf('italic') > -1;
+    var fontFamily, fontSize;
+
+    if (arr.length) {
+      fontFamily = arr[arr.length - 1];
+    }
+
+    if (arr.length >= 2) {
+      fontSize = parseInt(arr[arr.length - 2].replace('px', ''), 10);
+    }
+
+    return {
+      fontFamily: fontFamily,
+      fontSize: fontSize,
+      bold: bold,
+      italic: italic
+    };
+  },
+  // 字体样式格式: bold italic 12px 黑体 或 12px 黑体
+  build: function build(style) {
+    var font = '';
+
+    if (style.font.bold) {
+      font += 'bold ';
+    }
+
+    if (style.font.italic) {
+      font += 'italic ';
+    }
+
+    return "" + font + style.font.fontSize + "px " + style.font.fontFamily;
+  },
+  getFontStyleMap: function getFontStyleMap(obj, prefix) {
+    var map = {};
+    Object.keys(obj).forEach(function (key) {
+      if (key.startsWith(prefix)) {
+        map[key.replace(prefix, '')] = obj[key];
+      }
+    });
+    console.error(obj, prefix, map);
+    return map;
+  }
+};
+var _default = fontStyleUtil;
+exports["default"] = _default;

package/lib/core/editor/components/settings/common/text/img/bold.svg

@@ -0,0 +1,12 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="16px" height="16px" viewBox="0 0 16 16" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <!-- Generator: Sketch 63.1 (92452) - https://sketch.com -->
+    <title>topo/source/Icon/bold</title>
+    <desc>Created with Sketch.</desc>
+    <g id="topo/source/Icon/bold" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <rect id="矩形" fill="#000000" fill-rule="nonzero" opacity="0" x="0" y="0" width="16" height="16"></rect>
+        <g id="Icon-zitijiacu" transform="translate(4.000000, 3.000000)" fill="#4D6277" fill-rule="nonzero">
+            <path d="M7.01125,5.739125 C6.75175,5.339375 6.368875,5.0735 5.863,4.941875 L5.863,4.916375 C6.131125,4.788875 6.3565,4.646375 6.539125,4.488875 C6.722125,4.34 6.862375,4.1825 6.96025,4.01675 C7.1515,3.668 7.243,3.302375 7.234375,2.9195 C7.234375,2.171 7.002625,1.569125 6.539125,1.113875 C6.07975,0.663125 5.39275,0.433625 4.4785,0.425 L0.52225,0.425 L0.52225,9.7265 L4.79125,9.7265 C5.522875,9.7265 6.133,9.482 6.622375,8.992625 C7.115875,8.524625 7.36675,7.889 7.375,7.085375 C7.375,6.6005 7.253875,6.151625 7.01125,5.739125 Z M2.035,1.681625 L4.319125,1.681625 C4.833625,1.69025 5.212375,1.8155 5.454625,2.058125 C5.701375,2.317625 5.82475,2.6345 5.82475,3.00875 C5.82475,3.383 5.701375,3.6935 5.454625,3.94025 C5.212375,4.208 4.833625,4.34225 4.319125,4.34225 L2.035,4.34225 L2.035,1.681625 Z M5.601625,7.965875 C5.359375,8.24225 4.9765,8.38475 4.453375,8.393375 L2.035,8.393375 L2.035,5.59925 L4.453,5.59925 C4.976125,5.6075 5.359,5.745875 5.60125,6.014 C5.8435,6.28625 5.965,6.613625 5.965,6.9965 C5.965,7.370375 5.843875,7.693625 5.601625,7.965875 L5.601625,7.965875 Z" id="形状"></path>
+        </g>
+    </g>
+</svg>

package/lib/core/editor/components/settings/common/text/img/italics.svg

@@ -0,0 +1,10 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="16px" height="16px" viewBox="0 0 16 16" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <!-- Generator: Sketch 63.1 (92452) - https://sketch.com -->
+    <title>topo/source/Icon/italics</title>
+    <desc>Created with Sketch.</desc>
+    <g id="topo/source/Icon/italics" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <rect id="矩形" fill="#000000" fill-rule="nonzero" opacity="0" x="2" y="2" width="12" height="12"></rect>
+        <polygon id="路径" fill="#4D6277" fill-rule="nonzero" points="8.77666667 4.29166666 7.19333333 12.2083333 8.77666667 12.2083333 8.77666667 13 4.02666667 13 4.02666667 12.2083333 5.60999999 12.2083333 7.19333333 4.29166666 5.60999999 4.29166666 5.60999999 3.5 10.36 3.5 10.36 4.29166666"></polygon>
+    </g>
+</svg>

package/lib/core/editor/components/settings/common/text/img/underline.svg

@@ -0,0 +1,12 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="16px" height="16px" viewBox="0 0 16 16" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <!-- Generator: Sketch 63.1 (92452) - https://sketch.com -->
+    <title>topo/source/Icon/underline</title>
+    <desc>Created with Sketch.</desc>
+    <g id="topo/source/Icon/underline" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <rect id="矩形" fill="#000000" fill-rule="nonzero" opacity="0" x="0" y="0" width="16" height="16"></rect>
+        <g id="Icon-zitixiahuaxian" transform="translate(3.000000, 3.000000)" fill="#4D6277" fill-rule="nonzero">
+            <path d="M5,8.507375 C7.01929112,8.507375 8.65625,6.87041612 8.65625,4.851125 L8.65625,0.05 L7.34375,0.05 L7.34375,4.851125 C7.34375,6.14554238 6.29441738,7.194875 5,7.194875 C3.70558262,7.194875 2.65625,6.14554238 2.65625,4.851125 L2.65625,0.05 L1.34375,0.05 L1.34375,4.851125 C1.34375,6.87041612 2.98070888,8.507375 5,8.507375 Z M9.125,9.380375 L0.875,9.380375 C0.667893219,9.380375 0.5,9.54826822 0.5,9.755375 C0.5,9.96248178 0.667893219,10.130375 0.875,10.130375 L9.125,10.130375 C9.33210678,10.130375 9.5,9.96248178 9.5,9.755375 C9.5,9.54826822 9.33210678,9.380375 9.125,9.380375 Z" id="形状"></path>
+        </g>
+    </g>
+</svg>

package/lib/core/editor/components/settings/group/GroupNodeList/ResourceList.js

@@ -9,14 +9,33 @@ exports["default"] = void 0;
 
 var _list = _interopRequireDefault(require("@alifd/next/lib/list"));
 
-var _avatar = _interopRequireDefault(require("@alifd/next/lib/avatar"));
-
 var _react = _interopRequireWildcard(require("react"));
 
 var _ResourceListModule = _interopRequireDefault(require("./ResourceList.module.scss"));
 
 function ResourceList(props) {
   var data = props.data;
+
+  var renderIcon = function renderIcon(src) {
+    return /*#__PURE__*/_react["default"].createElement("div", {
+      style: {
+        width: 28,
+        height: 28,
+        background: "url(" + src + ") no-repeat center center"
+      }
+    });
+  };
+
+  var renderIcon2 = function renderIcon2(src) {
+    return /*#__PURE__*/_react["default"].createElement("div", {
+      className: _ResourceListModule["default"].iconWarp
+    }, /*#__PURE__*/_react["default"].createElement("img", {
+      src: src,
+      className: _ResourceListModule["default"].iconImg,
+      alt: ""
+    }));
+  };
+
   return /*#__PURE__*/_react["default"].createElement("div", {
     className: _ResourceListModule["default"].list
   }, /*#__PURE__*/_react["default"].createElement(_list["default"], {
@@ -26,11 +45,7 @@ function ResourceList(props) {
       return /*#__PURE__*/_react["default"].createElement(_list["default"].Item, {
         key: i,
         extra: item.money,
-        media: /*#__PURE__*/_react["default"].createElement(_avatar["default"], {
-          src: item.img,
-          shape: "square",
-          size: "small"
-        })
+        media: renderIcon2(item.img)
       }, item.title);
     }
   }));

package/lib/core/editor/components/settings/group/GroupNodeList/ResourceList.module.scss

@@ -13,3 +13,19 @@
     }
   }
 }
+
+.iconWarp {
+  width: 28px;
+  height: 28px;
+  line-height: 28px;
+  text-align: center;
+
+  .iconImg {
+    display: inline-block;
+    width: auto;
+    height: auto;
+    max-width: 28px;
+    max-height: 100%;
+    vertical-align: middle;
+  }
+}

package/lib/core/editor/components/settings/group/GroupNodeList/icon.d.ts

@@ -66,4 +66,14 @@ export function getIconMap(topo: any): {
     'editor.icon.balanc.small': string;
     'editor.icon.calendar.small': string;
 };
+/**
+ *
+ * @param topo
+ * @param type {'node' | 'container'}
+ * @return {{label: string, icons: *[]}[]}
+ */
+export function getIconGroups(topo: any, type: 'node' | 'container'): {
+    label: string;
+    icons: any[];
+}[];
 export function getIconById(id: any, topo: any): any;