@riil-frontend/component-topology 2.12.2 → 2.12.5-alpha.2

package/es/utils/htElementUtils.js

@@ -39,6 +39,11 @@ export function getGroups(dataModel) {
     return getGroupData(element);
   });
 }
+export function getGroupElementByTag(dataModel, tag) {
+  return dataModel.getDataByTag(tag) || dataModel.getDatas().toArray().filter(function (item) {
+    return item.a('tag') === tag;
+  })[0];
+}
 export function getGroupData(element) {
   if (!element) {
     return null;
@@ -58,13 +63,14 @@ export function getGroupData(element) {
 export function getNodes(dataModel) {
   return getElements(dataModel).filter(function (element) {
     return element.getClassName() === 'ht.Node';
-  }).map(function (element) {
-    var parentGroup = getGroupData(element.getParent());
-    return _extends({}, element.getAttrObject(), {
-      tag: element.getId(),
-      image: element.getImage(),
-      groupTag: parentGroup ? parentGroup.id : undefined
-    });
+  }).map(getNodeData);
+}
+export function getNodeData(element) {
+  var parentGroup = getGroupData(element.getParent());
+  return _extends({}, element.getAttrObject(), {
+    tag: element.getId(),
+    image: element.getImage(),
+    groupTag: parentGroup ? parentGroup.id : undefined
   });
 }
 export function getEdges(dataModel) {
@@ -84,4 +90,27 @@ export function getGroupNodes(dataModel, groupIdOrTag) {
   return getNodes(dataModel).filter(function (element) {
     return element.groupId === groupIdOrTag || element.groupTag === groupIdOrTag;
   });
+}
+/**
+ * 获取容器里的节点列表
+ *
+ * @param group
+ * @return {*}
+ */
+
+export function getGroupChildren(group) {
+  // HT为了支持区域内无节点可展开增加了站位节点，因此 节点的layer等于container_blank的过滤掉就可以了
+  return group.getChildren().getArray().filter(function (node) {
+    return node._layer !== 'container_blank';
+  });
+}
+/**
+ * 获取容器里的节点数据列表
+ *
+ * @param group
+ * @return {*}
+ */
+
+export function getGroupChildrenData(group) {
+  return getGroupChildren(group).map(getNodeData);
 }

package/lib/components/Link/index.js

@@ -21,7 +21,7 @@ var _ahooks = require("ahooks");
 
 var _rlog = _interopRequireDefault(require("@riil-frontend/component-topology-utils/es/rlog"));
 
-var _componentTopologyGraph = require("@riil-frontend/component-topology-graph");
+var _event = _interopRequireDefault(require("@riil-frontend/component-topology-graph/es/event"));
 
 var _indexModule = _interopRequireDefault(require("./index.module.scss"));
 
@@ -79,15 +79,15 @@ var LinkDrawer = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
       var type = e.type,
           data = e.data;
 
-      if (type === _componentTopologyGraph.TopoEvent.DATA_TYPE_RESOURCE_LINK) {
+      if (type === _event["default"].DATA_TYPE_RESOURCE_LINK) {
         api.show(data);
       }
     };
 
-    notifier.on(_componentTopologyGraph.TopoEvent.EVENT_DATA_PICK, handleEvent);
+    notifier.on(_event["default"].EVENT_DATA_PICK, handleEvent);
     return function () {
       // 取消注册事件
-      notifier.off(_componentTopologyGraph.TopoEvent.EVENT_DATA_PICK, handleEvent);
+      notifier.off(_event["default"].EVENT_DATA_PICK, handleEvent);
     };
   }, []); // 从url打开
 
@@ -113,8 +113,8 @@ var LinkDrawer = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
 
             case 3:
               data = _context.sent;
-              topoApp.view.topoClient.emitEvent(_componentTopologyGraph.TopoEvent.EVENT_DATA_RESULT, {
-                type: _componentTopologyGraph.TopoEvent.DATA_TYPE_RESOURCE_COMBO,
+              topoApp.view.topoClient.emitEvent(_event["default"].EVENT_DATA_RESULT, {
+                type: _event["default"].DATA_TYPE_RESOURCE_COMBO,
                 data: data
               });
 

package/lib/components/Link/index.module.scss

@@ -1,5 +1,5 @@
-@import '@riil-frontend/css/lib/index.scss';
-@import "@alifd/next/variables";
+//@import '@riil-frontend/css/lib/index.scss';
+@import "~@alifd/next/variables";
 
 .layout {
   height: 100%;

package/lib/components/MultiResourceDrawer/index.js

@@ -46,9 +46,10 @@ var MultiResourceDrawer = function MultiResourceDrawer(props) {
                 };
               }
 
-              onSave(result);
+              _context.next = 4;
+              return onSave(result);
 
-            case 3:
+            case 4:
             case "end":
               return _context.stop();
           }

package/lib/components/ResourceSelectDrawer/ResourceSelectDrawer.js

@@ -86,6 +86,7 @@ function ResourceSelectDrawer(props) {
     buttons: ['确定', '取消']
   }, visible && /*#__PURE__*/_react["default"].createElement(_ResourceSelectList["default"], {
     ref: resourceSelectRef,
+    selectionMode: selectionMode,
     excludeIds: excludeIds
   }));
 }

package/lib/components/ResourceSelectDrawer/ResourceSelectList.js

@@ -22,7 +22,12 @@ function ResourceSelectList(props, ref) {
     ref: ref,
     limitTypes: _ResourceTypeLimit.RESOURCE_LIMIT_TYPES,
     defaultCondition: excludeIds.length ? "!id('" + excludeIds.join("','") + "')" : undefined,
-    request: (0, _componentTopologyCommon.getRequest)()
+    request: (0, _componentTopologyCommon.getRequest)(),
+    tableProps: selectionMode ? {
+      rowSelection: {
+        mode: selectionMode
+      }
+    } : undefined
   });
 }
 

package/lib/components/SingleResourceDrawer/SelectDrawer.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"] = void 0;
+
+var _regenerator = _interopRequireDefault(require("@babel/runtime/regenerator"));
+
+var _message = _interopRequireDefault(require("@alifd/next/lib/message"));
+
+var _asyncToGenerator2 = _interopRequireDefault(require("@babel/runtime/helpers/asyncToGenerator"));
+
+var _react = _interopRequireWildcard(require("react"));
+
+var _ResourceSelectDrawer = _interopRequireDefault(require("../ResourceSelectDrawer"));
+
+var SingleSelectDrawer = function SingleSelectDrawer(props) {
+  var visible = props.visible,
+      totalSelection = props.totalSelection,
+      onSave = props.onSave,
+      onClose = props.onClose;
+
+  var onDrawerSave = /*#__PURE__*/function () {
+    var _ref = (0, _asyncToGenerator2["default"])( /*#__PURE__*/_regenerator["default"].mark(function _callee(selected) {
+      return _regenerator["default"].wrap(function _callee$(_context) {
+        while (1) {
+          switch (_context.prev = _context.next) {
+            case 0:
+              if (selected.length) {
+                _context.next = 3;
+                break;
+              }
+
+              _message["default"].error('请选择一项资源。');
+
+              return _context.abrupt("return", false);
+
+            case 3:
+              _context.next = 5;
+              return onSave(selected[0]);
+
+            case 5:
+            case "end":
+              return _context.stop();
+          }
+        }
+      }, _callee);
+    }));
+
+    return function onDrawerSave(_x) {
+      return _ref.apply(this, arguments);
+    };
+  }();
+
+  return /*#__PURE__*/_react["default"].createElement(_ResourceSelectDrawer["default"], {
+    visible: visible,
+    excludeIds: totalSelection,
+    selectionMode: "single",
+    onOk: onDrawerSave,
+    onClose: onClose
+  });
+};
+
+var _default = SingleSelectDrawer;
+exports["default"] = _default;

package/lib/components/SingleResourceDrawer/index.js

@@ -21,7 +21,7 @@ var SingleResourceDrawer = function SingleResourceDrawer(props) {
   var store = props.store,
       visible = props.visible,
       loading = props.loading,
-      selectedKeys = props.selectedKeys,
+      selectedKey = props.selectedKey,
       totalSelection = props.totalSelection,
       onSave = props.onSave,
       onClose = props.onClose;
@@ -36,7 +36,7 @@ var SingleResourceDrawer = function SingleResourceDrawer(props) {
       return;
     }
 
-    var intercept = onSave(data);
+    var intercept = onSave(data[0]);
 
     if (!intercept) {
       onClose();
@@ -44,7 +44,7 @@ var SingleResourceDrawer = function SingleResourceDrawer(props) {
   };
 
   var initialData = {
-    selected: selectedKeys,
+    selected: [selectedKey],
     total: totalSelection
   };
   return /*#__PURE__*/_react["default"].createElement(_Drawer["default"], {

package/lib/core/common/icons/defaultIcons.js

@@ -7,6 +7,13 @@ exports["default"] = exports.DEFAULT_NODE_ICONS = void 0;
 
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 
+var _ciTypeIcons = require("@riil-frontend/component-topology-graph/es/icons/ciTypeIcons");
+
+/**
+ * 默认节点图标
+ *
+ * @type {(*|{url: *})[]}
+ */
 var DEFAULT_NODE_ICONS = [{
   id: 'ciType/network.switch',
   name: '交换机',
@@ -69,7 +76,8 @@ exports.DEFAULT_NODE_ICONS = DEFAULT_NODE_ICONS;
 DEFAULT_NODE_ICONS.forEach(function (icon) {
   ht.Default.setImage(icon.id, icon.jsonUrl || icon.url);
 });
-var _default = {
+
+var _default = (0, _extends2["default"])({}, (0, _ciTypeIcons.getIconMap)(), {
   'editor.icon.cloud.small': {
     url: '/ht/image/topo/s/云_64.png',
     json: '/ht/image/topo/s/云_64.json'
@@ -136,5 +144,6 @@ var _default = {
   'editor.icon.library.small': '/ht/image/topo/s/库_48.json',
   'editor.icon.balanc.small': '/ht/image/topo/s/负载均衡_48.json',
   'editor.icon.calendar.small': '/ht/image/topo/s/日历_48.json'
-};
+});
+
 exports["default"] = _default;

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

@@ -13,7 +13,9 @@ var _propTypes = _interopRequireDefault(require("prop-types"));
 
 var _classnames2 = _interopRequireDefault(require("classnames"));
 
-var _componentTopologyGraph = _interopRequireWildcard(require("@riil-frontend/component-topology-graph"));
+var _TopoGraph = _interopRequireDefault(require("@riil-frontend/component-topology-graph/es/components/TopoGraph"));
+
+var _event = _interopRequireDefault(require("@riil-frontend/component-topology-graph/es/event"));
 
 var _rlog = _interopRequireDefault(require("@riil-frontend/component-topology-utils/es/rlog"));
 
@@ -199,44 +201,44 @@ var TopoView = function TopoView(props) {
     containerLinkTopo.onEvent(event);
 
     switch (event.name) {
-      case _componentTopologyGraph.TopoEvent.EVENT_SHOW_MESSAGE:
+      case _event["default"].EVENT_SHOW_MESSAGE:
         if (event.data && event.data.type) (0, _showMessage["default"])(event.data.type, event.data.message);
         break;
 
-      case _componentTopologyGraph.TopoEvent.EVENT_RIGHT_CLICK:
+      case _event["default"].EVENT_RIGHT_CLICK:
         rightEventHandle(event);
         break;
 
-      case _componentTopologyGraph.TopoEvent.EVENT_DATA_PICK:
+      case _event["default"].EVENT_DATA_PICK:
         onBindData(event.data);
         break;
 
-      case _componentTopologyGraph.TopoEvent.EVENT_DATA_DELETE:
+      case _event["default"].EVENT_DATA_DELETE:
         onDeleteElement(event.data);
         break;
 
-      case _componentTopologyGraph.TopoEvent.EVENT_SAVE_TOPO:
+      case _event["default"].EVENT_SAVE_TOPO:
         onSaveTopo(event.data);
         break;
 
-      case _componentTopologyGraph.TopoEvent.EVENT_REFRESH:
+      case _event["default"].EVENT_REFRESH:
         onRefresh(event.data);
         break;
 
-      case _componentTopologyGraph.TopoEvent.EVENT_EDIT_ENTER:
+      case _event["default"].EVENT_EDIT_ENTER:
         initSelection();
         break;
 
-      case _componentTopologyGraph.TopoEvent.EVENT_EDIT_EXIT:
+      case _event["default"].EVENT_EDIT_EXIT:
         onExitEdit(event.data);
         break;
 
-      case _componentTopologyGraph.TopoEvent.EVENT_CONTEXT_TOOL:
+      case _event["default"].EVENT_CONTEXT_TOOL:
         _rlog["default"].debug('自定义工具栏事件', event);
 
         break;
 
-      case _componentTopologyGraph.TopoEvent.EVENT_TOPO_ON_RELATED_TOPO_IMAGE:
+      case _event["default"].EVENT_TOPO_ON_RELATED_TOPO_IMAGE:
         _rlog["default"].debug('预关联拓扑图事件', event);
 
         onTopoRelatedImage(event);
@@ -255,7 +257,7 @@ var TopoView = function TopoView(props) {
     onEnterEdit: onEnterEdit
   })), /*#__PURE__*/_react["default"].createElement("div", {
     className: (0, _classnames2["default"])(_TopoViewModule["default"].viewPanel, (_classnames = {}, _classnames[_TopoViewModule["default"].viewPanelEditMode] = isEditMode, _classnames))
-  }, /*#__PURE__*/_react["default"].createElement(_componentTopologyGraph["default"], {
+  }, /*#__PURE__*/_react["default"].createElement(_TopoGraph["default"], {
     debugId: topoApp.debugId,
     data: tData,
     defaultEnterEditMode: defaultEnterEditMode,
@@ -279,7 +281,7 @@ var TopoView = function TopoView(props) {
     visible: showSingleResDrawer,
     loading: topoLoading,
     store: store,
-    selectedKeys: initialSingleRes,
+    selectedKey: initialSingleRes,
     totalSelection: resSelections,
     onSave: onSaveSingleRes,
     onClose: onCloseSigleResDrawer

package/lib/core/editor/components/LinkDynamicStyleSettingDrawer/rule/ColorPicker.module.scss

@@ -1,4 +1,4 @@
-@import "@alifd/theme-19926/variables";
+@import "~@alifd/theme-19926/variables.scss";
 
 .swatch {
   background: #fff;

package/lib/core/editor/components/ResourceViewAttributeSetting/ResourceViewAttributeSettingPlugin.js

@@ -11,7 +11,7 @@ var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends")
 
 var _react = _interopRequireWildcard(require("react"));
 
-var _componentTopologyGraph = require("@riil-frontend/component-topology-graph");
+var _event = _interopRequireDefault(require("@riil-frontend/component-topology-graph/es/event"));
 
 var _Setting = _interopRequireDefault(require("./Setting"));
 
@@ -59,9 +59,9 @@ function ResourceViewAttributeSettingPlugin(props) {
     };
     topology.view.contextMenu.registerCommands(contextMenuCommands);
     var notifier = topology.view.topoClient.notifier;
-    notifier.on(_componentTopologyGraph.TopoEvent.OPEN_MARK_SETTING, openMarkSettingByType);
+    notifier.on(_event["default"].OPEN_MARK_SETTING, openMarkSettingByType);
     return function () {
-      notifier.off(_componentTopologyGraph.TopoEvent.OPEN_MARK_SETTING, openMarkSettingByType);
+      notifier.off(_event["default"].OPEN_MARK_SETTING, openMarkSettingByType);
     };
   }, []);
   return /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, /*#__PURE__*/_react["default"].createElement(_Setting["default"], (0, _extends2["default"])({

package/lib/core/editor/components/ResourceViewAttributeSetting/Setting.js

@@ -11,7 +11,7 @@ var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends")
 
 var _react = _interopRequireWildcard(require("react"));
 
-var _componentTopologyGraph = require("@riil-frontend/component-topology-graph");
+var _event = _interopRequireDefault(require("@riil-frontend/component-topology-graph/es/event"));
 
 var _rlog = _interopRequireDefault(require("@riil-frontend/component-topology-utils/es/rlog"));
 
@@ -99,7 +99,7 @@ var Setting = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
 
     _rlog["default"].debug('saveMarkSetting', parm, allCiSet, ciDoc, allCiset);
 
-    topology.view.topoClient.emitEvent(_componentTopologyGraph.TopoEvent.SAVE_MARK_SETTING, {
+    topology.view.topoClient.emitEvent(_event["default"].SAVE_MARK_SETTING, {
       tagAndTipSet: ciDoc
     });
     bizDispatchers.update({

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

@@ -11,21 +11,11 @@ var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends")
 
 var _react = _interopRequireWildcard(require("react"));
 
-var _SettingsForm = _interopRequireDefault(require("./SettingsForm"));
-
-var _LayerSettingsForm = _interopRequireDefault(require("./layer/LayerSettingsForm"));
-
 var _SettingsModule = _interopRequireDefault(require("./Settings.module.scss"));
 
 var _htElementDataUtil = require("../../../../utils/htElementDataUtil");
 
-var _TextPropertyView = _interopRequireDefault(require("./text/TextPropertyView"));
-
-var _NodePropertyView = _interopRequireDefault(require("./node/NodePropertyView"));
-
-var _ViewPropertyView = _interopRequireDefault(require("./view/ViewPropertyView"));
-
-var _LinkPropertyView = _interopRequireDefault(require("./link/LinkPropertyView"));
+var _propertyViews = _interopRequireDefault(require("./propertyViews"));
 
 var _useSettingRuntimeState = _interopRequireDefault(require("./useSettingRuntimeState"));
 
@@ -64,26 +54,7 @@ function Settings(props) {
   }).join(',');
   (0, _react.useEffect)(function () {// const selectionModel = topo.getSelectionModel();
     // console.info('selection change', selection)
-  }, [selection]);
-  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 待优化
-
+  }, [selection]); // TODO 待优化
 
   var updateElementProperty = function updateElementProperty(name, value) {
     // const element = topo.getDataModel().getDataById(selection[0].id);
@@ -107,9 +78,9 @@ function Settings(props) {
   };
 
   var elementType = getElementType(selection);
-  var Component = propertyPanelMap[elementType];
+  var PropertyView = _propertyViews["default"][elementType];
 
-  if (!Component) {
+  if (!PropertyView) {
     return null;
   }
 
@@ -124,7 +95,7 @@ function Settings(props) {
     className: _SettingsModule["default"].settingsPanel
   }, /*#__PURE__*/_react["default"].createElement("div", {
     className: _SettingsModule["default"].settings
-  }, /*#__PURE__*/_react["default"].createElement(Component, {
+  }, /*#__PURE__*/_react["default"].createElement(PropertyView, {
     type: elementType,
     topo: topo,
     topoEditApi: topoEditApi,

package/lib/core/editor/components/settings/{group → common}/GroupNodeList/ResourceSelectButton.js

@@ -13,19 +13,17 @@ var _react = _interopRequireWildcard(require("react"));
 
 var _ResourceSelectDrawer = _interopRequireDefault(require("../../../../../../components/ResourceSelect/ResourceSelectDrawer"));
 
+var _componentTopologyGraph = require("@riil-frontend/component-topology-graph");
+
 function ResourceSelectButton(props) {
   var topo = props.topo,
-      layer = props.layer,
-      resourceSelectComponent = props.resourceSelectComponent,
-      onAdd = props.onAdd;
+      group = props.group,
+      topoEditApi = props.topoEditApi;
 
   var _useState = (0, _react.useState)(false),
       isSelectResource = _useState[0],
       setIsSelectResource = _useState[1];
 
-  var ResourceSelectComponent = resourceSelectComponent || _ResourceSelectDrawer["default"]; // const ResourceSelectComponent = ResourceSelectDrawer;
-  // TODO
-
   return /*#__PURE__*/_react["default"].createElement("div", {
     onClick: function onClick(e) {
       return e.stopPropagation();
@@ -35,15 +33,16 @@ function ResourceSelectButton(props) {
     type: "primary",
     onClick: function onClick(e) {
       e.stopPropagation();
-      setIsSelectResource(true);
+      topoEditApi.onBindData({
+        type: _componentTopologyGraph.TopoEvent.DATA_TYPE_RESOURCE_COMBO,
+        data: {
+          dtype: 'container',
+          id: group.tag,
+          tag: group.attr.tag
+        }
+      });
     }
-  }, "\u9009\u62E9"), /*#__PURE__*/_react["default"].createElement(ResourceSelectComponent, {
-    layer: layer,
-    visible: isSelectResource,
-    setVisible: setIsSelectResource,
-    topo: topo,
-    existedIds: []
-  }));
+  }, "\u6DFB\u52A0\u8D44\u6E90"));
 }
 
 ;

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

@@ -1,4 +1,4 @@
-@import "@alifd/theme-19926/variables";
+@import "~@alifd/theme-19926/variables.scss";
 
 .buttonGroup {
   display: flex;

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

@@ -0,0 +1,33 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard");
+
+exports.__esModule = true;
+exports["default"] = GroupNodeList;
+
+var _react = _interopRequireWildcard(require("react"));
+
+var _ResourceList = _interopRequireDefault(require("../../common/GroupNodeList/ResourceList"));
+
+var _htElementUtils = require("../../../../../../utils/htElementUtils");
+
+var _icon = require("../../common/GroupNodeList/icon");
+
+function GroupNodeList(props) {
+  var topo = props.topo,
+      group = props.group;
+  var nodes = (0, _htElementUtils.getGroupChildrenData)(topo.getDataModel().getDataById(group.id));
+  var data = nodes.map(function (node) {
+    return {
+      title: node.name,
+      img: (0, _icon.getIconById)(node.image, topo)
+    };
+  });
+  return /*#__PURE__*/_react["default"].createElement("div", null, /*#__PURE__*/_react["default"].createElement(_ResourceList["default"], {
+    data: data
+  }));
+}
+
+;

package/lib/core/editor/components/settings/group/DataTab/RelateData.js

@@ -0,0 +1,57 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+exports.__esModule = true;
+exports["default"] = GroupRelateData;
+
+var _collapse = _interopRequireDefault(require("@alifd/next/lib/collapse"));
+
+var _react = _interopRequireDefault(require("react"));
+
+var _ResourceSelectButton = _interopRequireDefault(require("../../common/GroupNodeList/ResourceSelectButton"));
+
+var _GroupNodeList = _interopRequireDefault(require("./GroupNodeList"));
+
+var CollapsePanel = _collapse["default"].Panel;
+
+function GroupRelateData(props) {
+  var topo = props.topo,
+      topoEditApi = props.topoEditApi,
+      values = props.values,
+      editorProps = props.editorProps;
+
+  var createResourcePanel = function createResourcePanel() {
+    return /*#__PURE__*/_react["default"].createElement(CollapsePanel, {
+      key: "\u5173\u8054\u8D44\u6E90",
+      title: /*#__PURE__*/_react["default"].createElement("div", {
+        style: {
+          display: 'flex',
+          paddingRight: 12
+        }
+      }, /*#__PURE__*/_react["default"].createElement("div", {
+        style: {
+          flex: 1
+        }
+      }, "\u5173\u8054\u8D44\u6E90"), /*#__PURE__*/_react["default"].createElement(_ResourceSelectButton["default"], {
+        topo: topo,
+        topoEditApi: topoEditApi,
+        group: values,
+        onAdd: function onAdd() {
+          /*TODO 刷新列表 refreshList*/
+        },
+        resourceSelectComponent: editorProps === null || editorProps === void 0 ? void 0 : editorProps.groupResourceSelectComponent
+      }))
+    }, /*#__PURE__*/_react["default"].createElement(_GroupNodeList["default"], {
+      topo: topo,
+      group: values
+    }));
+  };
+
+  return /*#__PURE__*/_react["default"].createElement(_collapse["default"], {
+    defaultExpandedKeys: ['关联资源'],
+    style: {
+      border: 'none'
+    }
+  }, createResourcePanel());
+}