@riil-frontend/component-topology 2.4.0 → 2.4.4

package/es/topoCenter/store/topoTreeMod.js

@@ -128,102 +128,25 @@ export default function (topoApp) {
             }, _callee2);
           }))();
         },
-        addNewTopo: function addNewTopo(params, state) {
+        editTopoOnTree: function editTopoOnTree(conditions, state) {
           var _this3 = this;
 
           return _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee3() {
-            var resTreeData, node, treeDataClone, updateData, newNode;
+            var resTreeData, treeData;
             return _regeneratorRuntime.wrap(function _callee3$(_context3) {
               while (1) {
                 switch (_context3.prev = _context3.next) {
-                  case 0:
-                    if (params === void 0) {
-                      params = {};
-                    }
-
-                    _context3.next = 3;
-                    return topoServer.addNewTopo(params);
-
-                  case 3:
-                    resTreeData = _context3.sent;
-
-                    if (resTreeData) {
-                      _context3.next = 6;
-                      break;
-                    }
-
-                    return _context3.abrupt("return");
-
-                  case 6:
-                    node = {
-                      id: "" + resTreeData,
-                      label: params.name,
-                      parentId: params.parentId,
-                      icon: iconImg[params.type],
-                      showDefault: false,
-                      type: params.type,
-                      permission: 'write'
-                    };
-                    treeDataClone = clone(state.topoTreeMod.treeData);
-
-                    if (params.parentId === -1) {
-                      treeDataClone.push(node);
-                    } else {
-                      loopTree(treeDataClone, params.parentId, function (parent, index, arr) {
-                        parent.children = [].concat(parent.children || [], [_extends({}, node)]);
-                      });
-                    }
-
-                    updateData = _extends({
-                      treeData: treeNodeCount(treeDataClone),
-                      selectedNode: ["" + resTreeData]
-                    }, params.type === 1 ? {
-                      expandedKeys: [].concat(state.topoTreeMod.expandedKeys || [], ["" + params.parentId])
-                    } : {});
-                    rlog.debug('addNewTopo', {
-                      updateData: updateData,
-                      state: state
-                    });
-
-                    _this3.update(updateData);
-
-                    if (params.type === 1) {
-                      newNode = {
-                        id: "" + resTreeData,
-                        name: params.name
-                      };
-                      dispatch.topoCenter.openCreateTopoPage(newNode);
-
-                      _this3.refreshTree();
-                    }
-
-                  case 13:
-                  case "end":
-                    return _context3.stop();
-                }
-              }
-            }, _callee3);
-          }))();
-        },
-        editTopoOnTree: function editTopoOnTree(conditions, state) {
-          var _this4 = this;
-
-          return _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee4() {
-            var resTreeData, treeData;
-            return _regeneratorRuntime.wrap(function _callee4$(_context4) {
-              while (1) {
-                switch (_context4.prev = _context4.next) {
                   case 0:
                     if (conditions === void 0) {
                       conditions = {};
                     }
 
                     rlog.debug('editTopoOnTree', conditions);
-                    _context4.next = 4;
+                    _context3.next = 4;
                     return topoServer.editTopoonTree(parseInt(conditions.id, 10), conditions.name, conditions.type);
 
                   case 4:
-                    resTreeData = _context4.sent;
+                    resTreeData = _context3.sent;
                     treeData = clone(state.topoTreeMod.treeData);
 
                     if (resTreeData) {
@@ -231,7 +154,7 @@ export default function (topoApp) {
                         arr[index].label = conditions.name;
                       });
 
-                      _this4.update({
+                      _this3.update({
                         treeData: treeData
                       });
 
@@ -245,10 +168,10 @@ export default function (topoApp) {
 
                   case 7:
                   case "end":
-                    return _context4.stop();
+                    return _context3.stop();
                 }
               }
-            }, _callee4);
+            }, _callee3);
           }))();
         },
 
@@ -280,34 +203,34 @@ export default function (topoApp) {
          * @param {*} state
          */
         deleteTopoOnTree: function deleteTopoOnTree(conditions, state) {
-          return _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee5() {
+          return _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee4() {
             var currentTopoId, isDeleteCurrentP;
-            return _regeneratorRuntime.wrap(function _callee5$(_context5) {
+            return _regeneratorRuntime.wrap(function _callee4$(_context4) {
               while (1) {
-                switch (_context5.prev = _context5.next) {
+                switch (_context4.prev = _context4.next) {
                   case 0:
                     rlog.debug('deleteTopoOnTree', conditions, state, dispatch.topoMod);
                     currentTopoId = state.topoMod.topoId;
 
                     if (!("" + conditions === "" + currentTopoId)) {
-                      _context5.next = 13;
+                      _context4.next = 13;
                       break;
                     }
 
                     rlog.debug('deleteTopo-currentTopo', conditions);
-                    _context5.next = 6;
+                    _context4.next = 6;
                     return dispatch.topoMod.updateDelId("" + conditions);
 
                   case 6:
-                    _context5.next = 8;
+                    _context4.next = 8;
                     return topoApp.alarm.close();
 
                   case 8:
-                    _context5.next = 10;
+                    _context4.next = 10;
                     return topoServer.deleteTopoonTree(parseInt(conditions, 10));
 
                   case 10:
-                    return _context5.abrupt("return", _context5.sent);
+                    return _context4.abrupt("return", _context4.sent);
 
                   case 13:
                     // 判断删除的拓扑或文件，是否包含当前拓扑，如果包含就先关闭告警
@@ -319,49 +242,49 @@ export default function (topoApp) {
                     });
 
                     if (!isDeleteCurrentP) {
-                      _context5.next = 18;
+                      _context4.next = 18;
                       break;
                     }
 
-                    _context5.next = 18;
+                    _context4.next = 18;
                     return topoApp.alarm.close();
 
                   case 18:
-                    _context5.next = 20;
+                    _context4.next = 20;
                     return topoServer.deleteTopoonTree(parseInt(conditions, 10));
 
                   case 20:
-                    return _context5.abrupt("return", _context5.sent);
+                    return _context4.abrupt("return", _context4.sent);
 
                   case 21:
                   case "end":
-                    return _context5.stop();
+                    return _context4.stop();
                 }
               }
-            }, _callee5);
+            }, _callee4);
           }))();
         },
         setDefTopoOnTree: function setDefTopoOnTree(conditions, state) {
-          var _this5 = this;
+          var _this4 = this;
 
-          return _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee6() {
+          return _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee5() {
             var resTreeData;
-            return _regeneratorRuntime.wrap(function _callee6$(_context6) {
+            return _regeneratorRuntime.wrap(function _callee5$(_context5) {
               while (1) {
-                switch (_context6.prev = _context6.next) {
+                switch (_context5.prev = _context5.next) {
                   case 0:
                     if (conditions === void 0) {
                       conditions = {};
                     }
 
                     rlog.debug('setDefTopoOnTree', conditions);
-                    _context6.next = 4;
+                    _context5.next = 4;
                     return topoServer.setDefTopo(parseInt(conditions, 10));
 
                   case 4:
-                    resTreeData = _context6.sent;
+                    resTreeData = _context5.sent;
 
-                    _this5.refreshTree(); // let treeData = clone(state.topoTreeMod.treeData);
+                    _this4.refreshTree(); // let treeData = clone(state.topoTreeMod.treeData);
                     // loopTree(
                     //   treeData,
                     //   conditions,
@@ -380,10 +303,10 @@ export default function (topoApp) {
 
                   case 6:
                   case "end":
-                    return _context6.stop();
+                    return _context5.stop();
                 }
               }
-            }, _callee6);
+            }, _callee5);
           }))();
         },
         setDefaultTopoId: function setDefaultTopoId(defaultTopoId) {

package/lib/components/ResourceList/ResourceSelect.js

@@ -21,7 +21,7 @@ var _useFilterPlugin = _interopRequireDefault(require("@ahooksjs/use-filter-plug
 
 var _useSortablePlugin = _interopRequireDefault(require("@ahooksjs/use-sortable-plugin"));
 
-var _useSelectionPlugin = _interopRequireDefault(require("../../plugins/useSelectionPlugin"));
+var _useSelectionPlugin = _interopRequireDefault(require("../../common/plugins/useSelectionPlugin"));
 
 var _cmdb = require("@riil-frontend/component-topology-utils/es/services/cmdb");
 

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

@@ -1,6 +1,6 @@
 .titlebar {
   display: flex;
-  padding: 12px 0;
+  padding: 12px 16px;
 
   .left {
     flex: 1;
@@ -11,6 +11,12 @@
 
   }
 
+  &.titlebarEditMode {
+    padding: 10px 16px;
+    box-shadow: 0px -1px 0px 0px #EBE8E8;
+    border-bottom: 1px solid #E6E7EB;
+  }
+
 }
 
 .title {

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

@@ -5,7 +5,8 @@
   top: 0;
   right: 0;
   border-radius: 2px;
-  border: 1px solid #E6E7EB;
+  //border: 1px solid #E6E7EB;
+  //border-left: none;
 
   display: flex;
   flex-direction: column;
@@ -36,6 +37,7 @@
       background: none;
       font-size: 12px;
       padding-bottom: 0;
+      padding-left: 32px;
     }
     .next-collapse-panel-content {
       padding-left: 32px;

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

@@ -70,10 +70,18 @@ export function getIconMap(topo: any): {
  *
  * @param topo
  * @param type {'node' | 'container'}
- * @return {{label: string, icons: *[]}[]}
+ * @return {{name: string, icons: *[]}[]}
  */
 export function getIconGroups(topo: any, type: 'node' | 'container'): {
-    label: string;
+    name: string;
+    icons: any[];
+}[];
+export function getNodeIconGroups(topo: any, type: any): {
+    name: string;
+    icons: any[];
+}[];
+export function getGroupIconGroups(topo: any, type: any): {
+    name: string;
     icons: any[];
 }[];
 export function getIconById(id: any, topo: any): any;

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

@@ -5,9 +5,11 @@ var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWild
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
 
 exports.__esModule = true;
+exports.getGroupIconGroups = getGroupIconGroups;
 exports.getIconById = getIconById;
 exports.getIconGroups = getIconGroups;
 exports.getIconMap = getIconMap;
+exports.getNodeIconGroups = getNodeIconGroups;
 
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 
@@ -30,13 +32,27 @@ function getIconMap(topo) {
  *
  * @param topo
  * @param type {'node' | 'container'}
- * @return {{label: string, icons: *[]}[]}
+ * @return {{name: string, icons: *[]}[]}
  */
 
 
 function getIconGroups(topo, type) {
   return [{
-    label: '默认',
+    name: '默认',
+    icons: [].concat(_defaultIcons.DEFAULT_NODE_ICONS, topo.options.icons || [])
+  }];
+}
+
+function getNodeIconGroups(topo, type) {
+  return [{
+    name: '默认',
+    icons: [].concat(_defaultIcons.DEFAULT_NODE_ICONS, topo.options.icons || [])
+  }];
+}
+
+function getGroupIconGroups(topo, type) {
+  return [{
+    name: '默认',
     icons: [].concat(_defaultIcons.DEFAULT_NODE_ICONS, topo.options.icons || [])
   }];
 }

package/lib/core/editor/components/settings/node/NodeIconSelect.js

@@ -1,21 +1,15 @@
 "use strict";
 
-var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard");
-
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
 
 exports.__esModule = true;
 exports["default"] = NodeIconSelect;
 
-var _avatar = _interopRequireDefault(require("@alifd/next/lib/avatar"));
-
-var _select = _interopRequireDefault(require("@alifd/next/lib/select"));
-
-var _react = _interopRequireWildcard(require("react"));
+var _react = _interopRequireDefault(require("react"));
 
 var _icon = require("../group/GroupNodeList/icon");
 
-var Option = _select["default"].Option;
+var _componentTopoIconSelect = _interopRequireDefault(require("@riil-frontend/component-topo-icon-select"));
 
 function NodeIconSelect(props) {
   var value = props.value,
@@ -31,27 +25,14 @@ function NodeIconSelect(props) {
     newId = a[0].id;
   }
 
-  return /*#__PURE__*/_react["default"].createElement(_select["default"], {
+  return /*#__PURE__*/_react["default"].createElement(_componentTopoIconSelect["default"], {
     value: newId,
+    iconList: iconGroups,
     onChange: onChange,
     style: {
       width: '100%'
     }
-  }, iconGroups.map(function (group) {
-    return /*#__PURE__*/_react["default"].createElement(_select["default"].OptionGroup, {
-      label: group.label,
-      key: group.label
-    }, group.icons.map(function (icon) {
-      return /*#__PURE__*/_react["default"].createElement(Option, {
-        key: icon.id,
-        value: icon.id
-      }, /*#__PURE__*/_react["default"].createElement(_avatar["default"], {
-        src: icon.url,
-        shape: "square",
-        size: "small"
-      }), "\xA0", icon.name);
-    }));
-  }));
+  });
 }
 
 ;

package/lib/core/editor/components/settings/node/NodeIconSelectTest.d.ts

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

package/lib/core/editor/components/settings/node/NodeIconSelectTest.js

@@ -0,0 +1,43 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+exports.__esModule = true;
+exports["default"] = NodeIconSelect;
+
+var _avatar = _interopRequireDefault(require("@alifd/next/lib/avatar"));
+
+var _select = _interopRequireDefault(require("@alifd/next/lib/select"));
+
+var _react = _interopRequireDefault(require("react"));
+
+var Option = _select["default"].Option;
+
+function NodeIconSelect(props) {
+  var value = props.value,
+      onChange = props.onChange,
+      iconList = props.iconList;
+  return /*#__PURE__*/_react["default"].createElement(_select["default"], {
+    value: value,
+    onChange: onChange,
+    style: {
+      width: '100%'
+    }
+  }, iconList.map(function (group) {
+    return /*#__PURE__*/_react["default"].createElement(_select["default"].OptionGroup, {
+      label: group.name,
+      key: group.name
+    }, group.icons.map(function (icon) {
+      return /*#__PURE__*/_react["default"].createElement(Option, {
+        key: icon.id,
+        value: icon.id
+      }, /*#__PURE__*/_react["default"].createElement(_avatar["default"], {
+        src: icon.url,
+        shape: "square",
+        size: "small"
+      }), "\xA0", icon.name);
+    }));
+  }));
+}
+
+;

package/lib/core/editor/components/settings/node/NodePropertyView.js

@@ -7,10 +7,10 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 exports.__esModule = true;
 exports["default"] = NodePropertyView;
 
-var _input = _interopRequireDefault(require("@alifd/next/lib/input"));
-
 var _tab = _interopRequireDefault(require("@alifd/next/lib/tab"));
 
+var _input = _interopRequireDefault(require("@alifd/next/lib/input"));
+
 var _field = _interopRequireDefault(require("@alifd/next/lib/field"));
 
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
@@ -67,6 +67,8 @@ function getBindType(values) {
 }
 
 function NodePropertyView(props) {
+  var _topo$options$editor;
+
   var topo = props.topo,
       topoEditApi = props.topoEditApi,
       values = props.values,
@@ -93,90 +95,101 @@ function NodePropertyView(props) {
   (0, _react.useEffect)(function () {
     field.setValues(parseValues(values));
   }, [values]);
-  return /*#__PURE__*/_react["default"].createElement("div", null, /*#__PURE__*/_react["default"].createElement(_tab["default"], null, /*#__PURE__*/_react["default"].createElement(_tab["default"].Item, {
+
+  var renderData = function renderData() {
+    return /*#__PURE__*/_react["default"].createElement(_collapse["default"], {
+      defaultExpandedKeys: ['相关资源'],
+      style: {
+        border: 'none'
+      }
+    }, /*#__PURE__*/_react["default"].createElement(CollapsePanel, {
+      key: "\u76F8\u5173\u8D44\u6E90",
+      title: "\u76F8\u5173\u8D44\u6E90"
+    }, /*#__PURE__*/_react["default"].createElement(_form["default"], {
+      field: field,
+      labelAlign: "top"
+    }, !values.tag && /*#__PURE__*/_react["default"].createElement(_form["default"].Item, {
+      label: "\u5173\u8054\u7C7B\u578B"
+    }, /*#__PURE__*/_react["default"].createElement(_select["default"], {
+      name: "bindType",
+      value: bindType,
+      style: {
+        width: '100%',
+        marginRight: 8
+      },
+      onChange: setBindType
+    }, /*#__PURE__*/_react["default"].createElement(Option, {
+      value: "none"
+    }, "\u672A\u5173\u8054"), /*#__PURE__*/_react["default"].createElement(Option, {
+      value: "resource"
+    }, "\u5173\u8054\u8D44\u6E90"), /*#__PURE__*/_react["default"].createElement(Option, {
+      value: "topo"
+    }, "\u5173\u8054\u62D3\u6251"))), bindType === 'resource' && /*#__PURE__*/_react["default"].createElement(_form["default"].Item, {
+      label: "\u5173\u8054\u8D44\u6E90"
+    }, /*#__PURE__*/_react["default"].createElement("div", {
+      style: {
+        display: 'flex'
+      }
+    }, /*#__PURE__*/_react["default"].createElement("div", {
+      className: _textModule["default"].textEllipsis,
+      style: {
+        flex: 1,
+        paddingRight: 16,
+        color: '#4D6277'
+      },
+      title: values.tag ? values.name : null
+    }, values.tag ? values.name : '—'), /*#__PURE__*/_react["default"].createElement(_NodeRelateResourceButton["default"], {
+      node: values,
+      topo: topo,
+      topoEditApi: topoEditApi
+    }))), bindType === 'topo' && /*#__PURE__*/_react["default"].createElement(_form["default"].Item, {
+      label: "\u5173\u8054\u62D3\u6251"
+    }, /*#__PURE__*/_react["default"].createElement(_TopoTreeSelect["default"], null)))));
+  };
+
+  var renderViewSetting = function renderViewSetting() {
+    return /*#__PURE__*/_react["default"].createElement(_form["default"], {
+      field: field,
+      labelAlign: "top"
+    }, /*#__PURE__*/_react["default"].createElement(_form["default"].Item, null, /*#__PURE__*/_react["default"].createElement(_collapse["default"], {
+      defaultExpandedKeys: ['显示设置'],
+      style: {
+        border: 'none'
+      }
+    }, /*#__PURE__*/_react["default"].createElement(CollapsePanel, {
+      key: "\u663E\u793A\u8BBE\u7F6E",
+      title: "\u663E\u793A\u8BBE\u7F6E"
+    }, /*#__PURE__*/_react["default"].createElement(_form["default"].Item, {
+      label: "\u56FE\u7247\u540D\u79F0"
+    }, /*#__PURE__*/_react["default"].createElement(_input["default"], {
+      name: "attrObject.name"
+    })), /*#__PURE__*/_react["default"].createElement(_form["default"].Item, {
+      label: "\u663E\u793A\u56FE\u7247"
+    }, /*#__PURE__*/_react["default"].createElement(_NodeIconSelect["default"], {
+      name: "image",
+      topo: topo
+    })), /*#__PURE__*/_react["default"].createElement(_form["default"].Item, {
+      label: "\u56FE\u7247\u5C3A\u5BF8"
+    }, /*#__PURE__*/_react["default"].createElement(_NodeSizeInput["default"], {
+      value: {
+        width: values.width,
+        height: values.height
+      },
+      onChange: function onChange(size) {
+        _onChange('width', size.width);
+
+        _onChange('height', size.height);
+      }
+    }))))));
+  }; // 未绑定资源的节点，根据参数控制是否可关联资源
+
+
+  var showRelateResource = !!values.tag || !values.tag && ((_topo$options$editor = topo.options.editor) === null || _topo$options$editor === void 0 ? void 0 : _topo$options$editor.enableRelateResource) !== false;
+  return /*#__PURE__*/_react["default"].createElement("div", null, showRelateResource ? /*#__PURE__*/_react["default"].createElement(_tab["default"], null, /*#__PURE__*/_react["default"].createElement(_tab["default"].Item, {
     title: "\u6570\u636E",
     key: "1"
-  }, /*#__PURE__*/_react["default"].createElement(_collapse["default"], {
-    defaultExpandedKeys: ['相关资源'],
-    style: {
-      border: 'none'
-    }
-  }, /*#__PURE__*/_react["default"].createElement(CollapsePanel, {
-    key: "\u76F8\u5173\u8D44\u6E90",
-    title: "\u76F8\u5173\u8D44\u6E90"
-  }, /*#__PURE__*/_react["default"].createElement(_form["default"], {
-    field: field,
-    labelAlign: "top"
-  }, !values.tag && /*#__PURE__*/_react["default"].createElement(_form["default"].Item, {
-    label: "\u5173\u8054\u7C7B\u578B"
-  }, /*#__PURE__*/_react["default"].createElement(_select["default"], {
-    name: "bindType",
-    value: bindType,
-    style: {
-      width: '100%',
-      marginRight: 8
-    },
-    onChange: setBindType
-  }, /*#__PURE__*/_react["default"].createElement(Option, {
-    value: "none"
-  }, "\u672A\u5173\u8054"), /*#__PURE__*/_react["default"].createElement(Option, {
-    value: "resource"
-  }, "\u5173\u8054\u8D44\u6E90"), /*#__PURE__*/_react["default"].createElement(Option, {
-    value: "topo"
-  }, "\u5173\u8054\u62D3\u6251"))), bindType === 'resource' && /*#__PURE__*/_react["default"].createElement(_form["default"].Item, {
-    label: "\u5173\u8054\u8D44\u6E90"
-  }, /*#__PURE__*/_react["default"].createElement("div", {
-    style: {
-      display: 'flex'
-    }
-  }, /*#__PURE__*/_react["default"].createElement("div", {
-    className: _textModule["default"].textEllipsis,
-    style: {
-      flex: 1,
-      paddingRight: 16,
-      color: '#4D6277'
-    },
-    title: values.tag ? values.name : null
-  }, values.tag ? values.name : '—'), /*#__PURE__*/_react["default"].createElement(_NodeRelateResourceButton["default"], {
-    node: values,
-    topo: topo,
-    topoEditApi: topoEditApi
-  }))), bindType === 'topo' && /*#__PURE__*/_react["default"].createElement(_form["default"].Item, {
-    label: "\u5173\u8054\u62D3\u6251"
-  }, /*#__PURE__*/_react["default"].createElement(_TopoTreeSelect["default"], null)))))), /*#__PURE__*/_react["default"].createElement(_tab["default"].Item, {
+  }, renderData()), /*#__PURE__*/_react["default"].createElement(_tab["default"].Item, {
     title: "\u8BBE\u7F6E",
     key: "2"
-  }, /*#__PURE__*/_react["default"].createElement(_form["default"], {
-    field: field,
-    labelAlign: "top"
-  }, /*#__PURE__*/_react["default"].createElement(_form["default"].Item, null, /*#__PURE__*/_react["default"].createElement(_collapse["default"], {
-    defaultExpandedKeys: ['显示设置'],
-    style: {
-      border: 'none'
-    }
-  }, /*#__PURE__*/_react["default"].createElement(CollapsePanel, {
-    key: "\u663E\u793A\u8BBE\u7F6E",
-    title: "\u663E\u793A\u8BBE\u7F6E"
-  }, /*#__PURE__*/_react["default"].createElement(_form["default"].Item, {
-    label: "\u56FE\u7247\u540D\u79F0"
-  }, /*#__PURE__*/_react["default"].createElement(_input["default"], {
-    name: "attrObject.name"
-  })), /*#__PURE__*/_react["default"].createElement(_form["default"].Item, {
-    label: "\u663E\u793A\u56FE\u7247"
-  }, /*#__PURE__*/_react["default"].createElement(_NodeIconSelect["default"], {
-    name: "image",
-    topo: topo
-  })), /*#__PURE__*/_react["default"].createElement(_form["default"].Item, {
-    label: "\u56FE\u7247\u5C3A\u5BF8"
-  }, /*#__PURE__*/_react["default"].createElement(_NodeSizeInput["default"], {
-    value: {
-      width: values.width,
-      height: values.height
-    },
-    onChange: function onChange(size) {
-      _onChange('width', size.width);
-
-      _onChange('height', size.height);
-    }
-  })))))))));
+  }, renderViewSetting())) : renderViewSetting());
 }