@riil-frontend/component-topology 3.1.6 → 3.1.9

package/es/topoCenter/components/TopoView.js

@@ -43,10 +43,9 @@ function NetworkTopologyCore(props) {
       plugins: [],
       // 右侧工具栏按钮
       ViewerTitlebarRightTools: ViewerTools,
-      showLinkConfig: true,
-      // 是否显示链路相关配置
-      onDisplaySettingDrawerOk: function onDisplaySettingDrawerOk() {},
-      displaySettingDrawerProps: {
+      displaySettingProps: {
+        showLinkConfig: true,
+        // 是否显示链路相关配置
         linkTagConfig: function linkTagConfig(params) {
           return /*#__PURE__*/React.createElement(LinkTag, params);
         },

package/es/topoCenter/models/TopoCenter.js

@@ -23,12 +23,16 @@ var TopoCenter = /*#__PURE__*/function (_TopoApp) {
     }, options, {
       usePermission: true,
       storeModels: _extends({}, customStoreModels, options.storeModels),
-      // 默认链路标注/悬浮框显示配置
-      defaultLinkTagTipConfig: {
-        tag: DEFAULT_LINK_TAG_COMMON_CONFIG,
-        tip: DEFAULT_TIP_COMMON_CONFIG
+      tagTip: {
+        // 默认链路标注/悬浮框显示配置
+        getDefaultLinkTagConfig: function getDefaultLinkTagConfig() {
+          return DEFAULT_LINK_TAG_COMMON_CONFIG;
+        },
+        getDefaultLinkTipConfig: function getDefaultLinkTipConfig() {
+          return DEFAULT_TIP_COMMON_CONFIG;
+        },
+        ExtElementTagTipBuilder: LinkTagsTipsBuilder
       },
-      ExtElementTagTipBuilder: LinkTagsTipsBuilder,
       onSwitchToEditModeBegin: function () {
         var _onSwitchToEditModeBegin = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee(topo) {
           var topoDispatchers;

package/lib/core/components/DisplaySettingDrawer/DisplaySetting.js

@@ -37,16 +37,15 @@ function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj &&
  */
 function DisplaySetting(props, ref) {
   var topo = props.topo,
-      viewerProps = props.viewerProps;
+      displaySettingProps = props.displaySettingProps;
   var displayConfig = topo.store.getModelState('displayConfig');
 
-  var _ref = (viewerProps === null || viewerProps === void 0 ? void 0 : viewerProps.displaySettingDrawerProps) || {},
+  var _ref = displaySettingProps || {},
       linkTagConfig = _ref.linkTagConfig,
       linkTipConfig = _ref.linkTipConfig,
       showEdgeExpandConfig = _ref.showEdgeExpandConfig,
-      extraConfig = _ref.extraConfig;
-
-  var showLinkConfig = !!(viewerProps !== null && viewerProps !== void 0 && viewerProps.showLinkConfig);
+      extraConfig = _ref.extraConfig,
+      showLinkConfig = _ref.showLinkConfig;
 
   var field = _field["default"].useField({
     autoUnmount: false,

package/lib/core/components/DisplaySettingDrawer/DisplaySettingDrawer.js

@@ -28,7 +28,7 @@ function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj &&
 function DisplaySettingDrawer(props) {
   var visible = props.visible,
       topo = props.topo,
-      viewerProps = props.viewerProps,
+      displaySettingProps = props.displaySettingProps,
       onClose = props.onClose;
   var settingRef = (0, _react.useRef)();
 
@@ -95,7 +95,7 @@ function DisplaySettingDrawer(props) {
   }, visible && /*#__PURE__*/_react["default"].createElement(_DisplaySetting["default"], {
     ref: settingRef,
     topo: topo,
-    viewerProps: viewerProps
+    displaySettingProps: displaySettingProps
   }));
 }
 

package/lib/core/components/DisplaySettingDrawer/hooks/useDisplaySetting.js

@@ -15,7 +15,7 @@ var _topo = _interopRequireDefault(require("@riil-frontend/component-topology-co
 
 var _default = function _default(props) {
   var topo = props.topo,
-      viewerProps = props.viewerProps,
+      displaySettingProps = props.displaySettingProps,
       settingRef = props.settingRef;
 
   var executeByConfig = /*#__PURE__*/function () {
@@ -28,7 +28,7 @@ var _default = function _default(props) {
               // 更新节点名称显示隐藏
               topo.attributeMetricDisplay.updateNodesNameVisible(); // 更新连线展开折叠状态
 
-              if (viewerProps !== null && viewerProps !== void 0 && viewerProps.showLinkConfig) {
+              if (displaySettingProps !== null && displaySettingProps !== void 0 && displaySettingProps.showLinkConfig) {
                 if (config.expandAllEdges) {
                   topo.getHtTopo().expandAllEdgeGroups();
                 } else {
@@ -60,8 +60,6 @@ var _default = function _default(props) {
 
   var save = /*#__PURE__*/function () {
     var _ref2 = (0, _asyncToGenerator2["default"])( /*#__PURE__*/_regenerator["default"].mark(function _callee2() {
-      var _viewerProps$displayS;
-
       var values, prevDisplayConfig, displayConfig, displayConfigDispatchers, extraOnOk;
       return _regenerator["default"].wrap(function _callee2$(_context2) {
         while (1) {
@@ -84,7 +82,7 @@ var _default = function _default(props) {
               displayConfigDispatchers.update(displayConfig); // 按配置执行
 
               executeByConfig(displayConfig);
-              extraOnOk = (viewerProps === null || viewerProps === void 0 ? void 0 : (_viewerProps$displayS = viewerProps.displaySettingDrawerProps) === null || _viewerProps$displayS === void 0 ? void 0 : _viewerProps$displayS.onOk) || (viewerProps === null || viewerProps === void 0 ? void 0 : viewerProps.onDisplaySettingDrawerOk);
+              extraOnOk = (displaySettingProps === null || displaySettingProps === void 0 ? void 0 : displaySettingProps.onOk) || (displaySettingProps === null || displaySettingProps === void 0 ? void 0 : displaySettingProps.onDisplaySettingDrawerOk);
 
               if (extraOnOk) {
                 extraOnOk();

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

@@ -13,10 +13,10 @@ var _GroupNodeList = _interopRequireDefault(require("./GroupNodeList"));
 
 var _GroupAddResourceButton = _interopRequireDefault(require("./GroupAddResourceButton"));
 
-var _CollapseFullheightModule = _interopRequireDefault(require("../../../common/GroupNodeList/CollapseFullheight.module.scss"));
-
 var _Panel = _interopRequireDefault(require("../../../../../../../components/collapse/Panel"));
 
+var _CollapseFullheightModule = _interopRequireDefault(require("../../../common/GroupNodeList/CollapseFullheight.module.scss"));
+
 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; }
@@ -29,15 +29,28 @@ function GroupRelateData(props) {
       editorProps = props.editorProps;
 
   var createResourcePanel = function createResourcePanel() {
-    return /*#__PURE__*/_react["default"].createElement(_Panel["default"], {
-      key: "\u5173\u8054\u8D44\u6E90",
-      title: "\u5173\u8054\u8D44\u6E90",
-      extra: /*#__PURE__*/_react["default"].createElement(_GroupAddResourceButton["default"], {
+    var _groupDataViewProps$r;
+
+    var groupDataViewProps = editorProps.groupDataViewProps;
+    var headerExtra;
+
+    if ((groupDataViewProps === null || groupDataViewProps === void 0 ? void 0 : (_groupDataViewProps$r = groupDataViewProps.relateDataProps) === null || _groupDataViewProps$r === void 0 ? void 0 : _groupDataViewProps$r.headerExtra) !== undefined) {
+      var _groupDataViewProps$r2;
+
+      headerExtra = groupDataViewProps === null || groupDataViewProps === void 0 ? void 0 : (_groupDataViewProps$r2 = groupDataViewProps.relateDataProps) === null || _groupDataViewProps$r2 === void 0 ? void 0 : _groupDataViewProps$r2.headerExtra;
+    } else {
+      headerExtra = /*#__PURE__*/_react["default"].createElement(_GroupAddResourceButton["default"], {
         topo: topo,
         topoEdit: topoEditApi,
         group: group,
         groupData: values
-      }),
+      });
+    }
+
+    return /*#__PURE__*/_react["default"].createElement(_Panel["default"], {
+      key: "\u5173\u8054\u8D44\u6E90",
+      title: "\u5173\u8054\u8D44\u6E90",
+      extra: headerExtra,
       className: _CollapseFullheightModule["default"].panelFullHeight
     }, /*#__PURE__*/_react["default"].createElement(_GroupNodeList["default"], {
       topo: topo,

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

@@ -7,60 +7,19 @@ exports["default"] = NodePropertyView;
 
 var _tab = _interopRequireDefault(require("@alifd/next/lib/tab"));
 
-var _input = _interopRequireDefault(require("@alifd/next/lib/input"));
-
-var _form = _interopRequireDefault(require("@alifd/next/lib/form"));
-
-var _field = _interopRequireDefault(require("@alifd/next/lib/field"));
-
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 
-var _collapse = _interopRequireDefault(require("@alifd/next/lib/collapse"));
-
-var _select = _interopRequireDefault(require("@alifd/next/lib/select"));
-
-var _react = _interopRequireWildcard(require("react"));
-
-var _NodeSizeInput = _interopRequireDefault(require("../../common/NodeSizeInput/NodeSizeInput"));
-
-var _textModule = _interopRequireDefault(require("../../../../../common/text.module.scss"));
-
-var _NodeIconSelect = _interopRequireDefault(require("./NodeIconSelect"));
-
-var _NodeRelateResourceButton = _interopRequireDefault(require("./data/NodeRelateResourceButton"));
-
-var _NodePropertyViewModule = _interopRequireDefault(require("./NodePropertyView.module.scss"));
-
-var _TabView = _interopRequireDefault(require("../../common/tab/TabView"));
+var _react = _interopRequireDefault(require("react"));
 
 var _useHtElement = _interopRequireDefault(require("../../../../../common/hooks/useHtElement"));
 
-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; }
-
-var Option = _select["default"].Option;
-var CollapsePanel = _collapse["default"].Panel;
-
-function parseValues(values) {
-  return (0, _extends2["default"])({}, values, {
-    'attrObject.customName': values['attrObject.customName'] || values['attrObject.name'],
-    'attrObject.bindTopo': values['attrObject.bindTopo'] || '' // 解决切换节点时关联拓扑选项未重置
-
-  });
-}
+var _TabView = _interopRequireDefault(require("../../common/tab/TabView"));
 
-function getBindType(values) {
-  if (values.tag) {
-    return 'resource';
-  }
+var _Data = _interopRequireDefault(require("./data/Data"));
 
-  if (values.attrObject.bindType) {
-    return values.attrObject.bindType;
-  }
+var _NodePropertyViewModule = _interopRequireDefault(require("./NodePropertyView.module.scss"));
 
-  return 'none';
-}
+var _Setting = _interopRequireDefault(require("./Setting"));
 
 function NodePropertyView(props) {
   var _topo$options$editor;
@@ -68,145 +27,40 @@ function NodePropertyView(props) {
   var topo = props.topo,
       topoEditApi = props.topoEditApi,
       values = props.values,
-      _onChange = props.onChange,
+      onChange = props.onChange,
       editorProps = props.editorProps,
       settingRuntimeState = props.settingRuntimeState;
-  var bindType = getBindType(values);
   var node = (0, _useHtElement["default"])({
     topo: topo,
     id: values.id
   });
 
-  var field = _field["default"].useField({
-    autoUnmount: false,
-    values: parseValues(values),
-    onChange: function onChange(name, value) {
-      var newValues = field.getValues();
-
-      _onChange(name, value, newValues);
-    }
-  });
-
-  (0, _react.useEffect)(function () {
-    field.setValues(parseValues(values));
-  }, [values]);
-
-  var setBindType = function setBindType(newBindType) {
-    _onChange('attrObject.bindType', newBindType);
-
-    if (newBindType === 'topo') {//
-    }
-  };
-
-  var handleBindTopoChange = function handleBindTopoChange(value, data) {
-    // 设置名称为拓扑名称，清空自定义名称
-    node.a('name', data.label);
-    node.a('customName', null);
-  };
-
   var renderData = function renderData() {
-    var RelateTopoTree = editorProps === null || editorProps === void 0 ? void 0 : editorProps.relateTopoTree;
-    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"), RelateTopoTree && /*#__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' && RelateTopoTree && /*#__PURE__*/_react["default"].createElement(_form["default"].Item, {
-      label: "\u5173\u8054\u62D3\u6251"
-    }, /*#__PURE__*/_react["default"].createElement(RelateTopoTree, {
-      name: "attrObject.bindTopo",
-      topo: topo,
-      onChange: handleBindTopoChange
-    })))));
+    return /*#__PURE__*/_react["default"].createElement(_Data["default"], props);
   };
 
-  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.customName"
-    })), /*#__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"], {
-      node: values.id,
-      value: {
-        width: values.width,
-        height: values.height
-      },
-      onChange: function onChange(size) {
-        _onChange('width', size.width);
-
-        _onChange('height', size.height);
-      },
-      settingRuntimeState: settingRuntimeState
-    }))))));
+  var renderSetting = function renderSetting() {
+    var nodeSettingViewProps = editorProps.nodeSettingViewProps;
+    return /*#__PURE__*/_react["default"].createElement(_Setting["default"], (0, _extends2["default"])({}, props, nodeSettingViewProps));
   }; // 未绑定资源的节点，根据参数控制是否可关联资源
 
 
   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;
+  var content;
+
+  if (showRelateResource) {
+    content = /*#__PURE__*/_react["default"].createElement(_TabView["default"], null, /*#__PURE__*/_react["default"].createElement(_tab["default"].Item, {
+      title: "\u6570\u636E",
+      key: "1"
+    }, renderData()), /*#__PURE__*/_react["default"].createElement(_tab["default"].Item, {
+      title: "\u8BBE\u7F6E",
+      key: "2"
+    }, renderSetting()));
+  } else {
+    content = renderSetting();
+  }
+
   return /*#__PURE__*/_react["default"].createElement("div", {
     className: _NodePropertyViewModule["default"].NodePropertyView
-  }, showRelateResource ? /*#__PURE__*/_react["default"].createElement(_TabView["default"], null, /*#__PURE__*/_react["default"].createElement(_tab["default"].Item, {
-    title: "\u6570\u636E",
-    key: "1"
-  }, renderData()), /*#__PURE__*/_react["default"].createElement(_tab["default"].Item, {
-    title: "\u8BBE\u7F6E",
-    key: "2"
-  }, renderViewSetting())) : renderViewSetting());
+  }, content);
 }

package/lib/core/editor/components/settings/propertyViews/node/Setting/Setting.js

@@ -0,0 +1,95 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+exports.__esModule = true;
+exports["default"] = Setting;
+
+var _form = _interopRequireDefault(require("@alifd/next/lib/form"));
+
+var _input = _interopRequireDefault(require("@alifd/next/lib/input"));
+
+var _field = _interopRequireDefault(require("@alifd/next/lib/field"));
+
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+
+var _collapse = _interopRequireDefault(require("@alifd/next/lib/collapse"));
+
+var _react = _interopRequireWildcard(require("react"));
+
+var _NodeSizeInput = _interopRequireDefault(require("../../../common/NodeSizeInput/NodeSizeInput"));
+
+var _NodeIconSelect = _interopRequireDefault(require("../NodeIconSelect"));
+
+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; }
+
+var CollapsePanel = _collapse["default"].Panel;
+
+function parseValues(values) {
+  return (0, _extends2["default"])({}, values, {
+    'attrObject.customName': values['attrObject.customName'] || values['attrObject.name'],
+    'attrObject.bindTopo': values['attrObject.bindTopo'] || '' // 解决切换节点时关联拓扑选项未重置
+
+  });
+}
+
+function Setting(props) {
+  var topo = props.topo,
+      values = props.values,
+      _onChange = props.onChange,
+      editorProps = props.editorProps,
+      settingRuntimeState = props.settingRuntimeState,
+      _props$showImageSetti = props.showImageSetting,
+      showImageSetting = _props$showImageSetti === void 0 ? true : _props$showImageSetti;
+
+  var field = _field["default"].useField({
+    autoUnmount: false,
+    values: parseValues(values),
+    onChange: function onChange(name, value) {
+      var newValues = field.getValues();
+
+      _onChange(name, value, newValues);
+    }
+  });
+
+  (0, _react.useEffect)(function () {
+    field.setValues(parseValues(values));
+  }, [values]);
+  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\u79F01"
+  }, /*#__PURE__*/_react["default"].createElement(_input["default"], {
+    name: "attrObject.customName"
+  })), showImageSetting && /*#__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"], {
+    node: values.id,
+    value: {
+      width: values.width,
+      height: values.height
+    },
+    onChange: function onChange(size) {
+      _onChange('width', size.width);
+
+      _onChange('height', size.height);
+    },
+    settingRuntimeState: settingRuntimeState
+  }))))));
+}

package/lib/core/editor/components/settings/propertyViews/node/Setting/index.js

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

package/lib/core/editor/components/settings/propertyViews/node/data/Data.js

@@ -0,0 +1,145 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+exports.__esModule = true;
+exports["default"] = Data;
+
+var _form = _interopRequireDefault(require("@alifd/next/lib/form"));
+
+var _field = _interopRequireDefault(require("@alifd/next/lib/field"));
+
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+
+var _collapse = _interopRequireDefault(require("@alifd/next/lib/collapse"));
+
+var _select = _interopRequireDefault(require("@alifd/next/lib/select"));
+
+var _react = _interopRequireWildcard(require("react"));
+
+var _useHtElement = _interopRequireDefault(require("../../../../../../common/hooks/useHtElement"));
+
+var _textModule = _interopRequireDefault(require("../../../../../../common/text.module.scss"));
+
+var _NodeRelateResourceButton = _interopRequireDefault(require("./NodeRelateResourceButton"));
+
+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; }
+
+var Option = _select["default"].Option;
+var CollapsePanel = _collapse["default"].Panel;
+
+function parseValues(values) {
+  return (0, _extends2["default"])({}, values, {
+    'attrObject.customName': values['attrObject.customName'] || values['attrObject.name'],
+    'attrObject.bindTopo': values['attrObject.bindTopo'] || '' // 解决切换节点时关联拓扑选项未重置
+
+  });
+}
+
+function getBindType(values) {
+  if (values.tag) {
+    return 'resource';
+  }
+
+  if (values.attrObject.bindType) {
+    return values.attrObject.bindType;
+  }
+
+  return 'none';
+}
+
+function Data(props) {
+  var topo = props.topo,
+      topoEditApi = props.topoEditApi,
+      values = props.values,
+      _onChange = props.onChange,
+      editorProps = props.editorProps;
+  var bindType = getBindType(values);
+  var node = (0, _useHtElement["default"])({
+    topo: topo,
+    id: values.id
+  });
+
+  var field = _field["default"].useField({
+    autoUnmount: false,
+    values: parseValues(values),
+    onChange: function onChange(name, value) {
+      var newValues = field.getValues();
+
+      _onChange(name, value, newValues);
+    }
+  });
+
+  (0, _react.useEffect)(function () {
+    field.setValues(parseValues(values));
+  }, [values]);
+
+  var setBindType = function setBindType(newBindType) {
+    _onChange('attrObject.bindType', newBindType);
+
+    if (newBindType === 'topo') {//
+    }
+  };
+
+  var handleBindTopoChange = function handleBindTopoChange(value, data) {
+    // 设置名称为拓扑名称，清空自定义名称
+    node.a('name', data.label);
+    node.a('customName', null);
+  };
+
+  var RelateTopoTree = editorProps === null || editorProps === void 0 ? void 0 : editorProps.relateTopoTree;
+  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"), RelateTopoTree && /*#__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' && RelateTopoTree && /*#__PURE__*/_react["default"].createElement(_form["default"].Item, {
+    label: "\u5173\u8054\u62D3\u6251"
+  }, /*#__PURE__*/_react["default"].createElement(RelateTopoTree, {
+    name: "attrObject.bindTopo",
+    topo: topo,
+    onChange: handleBindTopoChange
+  })))));
+}