@riil-frontend/component-topology 6.0.0-alpha.8 → 6.0.1

package/es/core/editor/components/settings/propertyViews/edge/edgeGroup/EdgeGroupSetting.js

@@ -13,13 +13,12 @@ function parseValues(values) {
 export default function EdgeGroupSetting(props) {
   var topo = props.topo,
       edge = props.edge,
-      values = props.values,
       _onChange = props.onChange,
       editorProps = props.editorProps;
 
   var field = _Field.useField({
     autoUnmount: false,
-    values: parseValues(values),
+    values: {},
     onChange: function onChange(name, value) {
       var newValues = field.getValues();
 
@@ -27,10 +26,6 @@ export default function EdgeGroupSetting(props) {
     }
   });
 
-  useEffect(function () {
-    field.setValues(parseValues(values));
-  }, [values]);
-
   var setLineColor = function setLineColor(color) {
     var style = edge.a('styles') || {};
     edge.s('edge.color', color);

package/es/core/editor/components/settings/propertyViews/group/GroupPropertyView.js

@@ -1,34 +1,26 @@
-import _Tab from "@alifd/next/es/tab";
 import _extends from "@babel/runtime/helpers/extends";
 import React from 'react';
-import TabView from "../../common/tab/TabView";
-import styles from "./GroupPropertyView.module.scss";
-import useGroup from "./hooks/useGroup";
-import GroupSetting from "./SettingTab/Setting";
-import GroupRelateData from "./DataTab/RelateData";
 import ClusterGroupRelateData from "./cluster/ClusterGroupRelateData";
+import GroupRelateData from "./DataTab/RelateData";
+import GroupBasicSetting from "./SettingTab/GroupBasicSetting";
+import styles from "./GroupPropertyView.module.scss";
 export default function GroupPropertyView(props) {
   var topo = props.topo,
       topoEdit = props.topoEdit,
       values = props.values,
-      onChange = props.onChange,
-      settingRuntimeState = props.settingRuntimeState,
-      editorProps = props.editorProps;
-  var group = useGroup({
-    topo: topo,
-    id: values.id
-  });
+      selectionElement = props.selectionElement;
+  var group = selectionElement;
   var isCluster = group.a('cluster');
   var DataTabContent = isCluster ? ClusterGroupRelateData : GroupRelateData;
-  return /*#__PURE__*/React.createElement(TabView, null, /*#__PURE__*/React.createElement(_Tab.Item, {
-    title: "\u6570\u636E",
-    key: "1"
-  }, /*#__PURE__*/React.createElement(DataTabContent, _extends({
+  return /*#__PURE__*/React.createElement("div", {
+    className: styles.GroupPropertyView
+  }, /*#__PURE__*/React.createElement(GroupBasicSetting, _extends({
     group: group
-  }, props))), /*#__PURE__*/React.createElement(_Tab.Item, {
-    title: "\u8BBE\u7F6E",
-    key: "2"
-  }, /*#__PURE__*/React.createElement(GroupSetting, _extends({
+  }, props, {
+    isCluster: isCluster
+  })), /*#__PURE__*/React.createElement("div", {
+    className: styles.data
+  }, /*#__PURE__*/React.createElement(DataTabContent, _extends({
     group: group
   }, props))));
 }

package/es/core/editor/components/settings/propertyViews/group/GroupPropertyView.module.scss

@@ -1,3 +1,10 @@
 .GroupPropertyView {
-  
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+
+  .data {
+    flex: 1;
+    overflow: auto;
+  }
 }

package/es/core/editor/components/settings/propertyViews/group/GroupPropertyViewV1.js

@@ -0,0 +1,28 @@
+import _Tab from "@alifd/next/es/tab";
+import _extends from "@babel/runtime/helpers/extends";
+import React from 'react';
+import TabView from "../../common/tab/TabView";
+import styles from "./GroupPropertyView.module.scss";
+import GroupSetting from "./SettingTab/Setting";
+import GroupRelateData from "./DataTab/RelateData";
+import ClusterGroupRelateData from "./cluster/ClusterGroupRelateData";
+export default function GroupPropertyView(props) {
+  var topo = props.topo,
+      topoEdit = props.topoEdit,
+      values = props.values,
+      selectionElement = props.selectionElement;
+  var group = selectionElement;
+  var isCluster = group.a('cluster');
+  var DataTabContent = isCluster ? ClusterGroupRelateData : GroupRelateData;
+  return /*#__PURE__*/React.createElement(TabView, null, /*#__PURE__*/React.createElement(_Tab.Item, {
+    title: "\u6570\u636E",
+    key: "1"
+  }, /*#__PURE__*/React.createElement(DataTabContent, _extends({
+    group: group
+  }, props))), /*#__PURE__*/React.createElement(_Tab.Item, {
+    title: "\u8BBE\u7F6E",
+    key: "2"
+  }, /*#__PURE__*/React.createElement(GroupSetting, _extends({
+    group: group
+  }, props))));
+}

package/es/core/editor/components/settings/propertyViews/group/SettingTab/GroupBasicSetting.js

@@ -0,0 +1,75 @@
+import _Form from "@alifd/next/es/form";
+import _extends from "@babel/runtime/helpers/extends";
+import _Field from "@alifd/next/es/field";
+import _Collapse from "@alifd/next/es/collapse";
+import React, { useEffect } from "react";
+import NodeSizeInput from "../../../common/NodeSizeInput/NodeSizeInput";
+import GroupIconSelect from "./GroupIconSelect";
+import GroupExpandStatus from "./GroupExpandStatus";
+import GroupExpandSetting from "./GroupExpandSetting";
+import { SPECIAL_CHARACTER_FORM_ITEM_VALIDATE_PROPS, validateSpecialCharacter } from "../../../../../../../utils/SpecialCharacterValidateUtil";
+import NameInput from "../../../common/NameInput";
+var CollapsePanel = _Collapse.Panel;
+export default function GroupBasicSetting(props) {
+  var topo = props.topo,
+      topoEdit = props.topoEdit,
+      values = props.values,
+      _onChange = props.onChange,
+      settingRuntimeState = props.settingRuntimeState,
+      editorProps = props.editorProps,
+      group = props.group,
+      isCluster = props.isCluster;
+  var expanded = values.expanded;
+  var id = values.id;
+
+  var field = _Field.useField({
+    autoUnmount: false,
+    values: values,
+    onChange: function onChange(name, value) {
+      if (name === 'attrObject.name' && !validateSpecialCharacter(value)) {
+        return;
+      }
+
+      var newValues = field.getValues();
+
+      _onChange(name, value, newValues);
+    }
+  });
+
+  useEffect(function () {
+    field.setValues(values);
+  }, [values]);
+  return /*#__PURE__*/React.createElement(_Form, {
+    field: field,
+    labelAlign: "top",
+    style: {
+      paddingLeft: 32,
+      paddingRight: 16,
+      marginTop: 12
+    }
+  }, /*#__PURE__*/React.createElement(_Form.Item, null, /*#__PURE__*/React.createElement(_Form.Item, _extends({
+    label: isCluster ? '集群名称' : '区域名称'
+  }, SPECIAL_CHARACTER_FORM_ITEM_VALIDATE_PROPS, {
+    patternTrigger: "onChange"
+  }), /*#__PURE__*/React.createElement(NameInput, {
+    name: "attrObject.name",
+    multipleLine: true,
+    maxLength: 30,
+    placeholder: "\u8BF7\u8F93\u5165",
+    onFocus: function onFocus() {
+      topo.historyManager.beginTransaction();
+    },
+    onBlur: function onBlur() {
+      topo.historyManager.endTransaction();
+    }
+  })), /*#__PURE__*/React.createElement(_Form.Item, {
+    label: "\u9ED8\u8BA4\u663E\u793A\u65B9\u5F0F"
+  }, /*#__PURE__*/React.createElement(GroupExpandStatus, {
+    topo: topo,
+    group: group,
+    expanded: expanded,
+    setExpanded: function setExpanded(val) {
+      return group.setExpanded(val);
+    }
+  }))));
+}

package/es/core/editor/components/settings/propertyViews/group/SettingTab/GroupExpandSetting.js

@@ -1,6 +1,6 @@
 import _Form from "@alifd/next/es/form";
 import _Collapse from "@alifd/next/es/collapse";
-import React, { useState, useEffect, useRef, useCallback } from "react";
+import React, { useState, useEffect, useRef, useCallback } from 'react';
 import GroupExpandStatus from "./GroupExpandStatus";
 import AlignSetting from "../../../common/AlignSetting";
 import LayoutSettings from "../../../common/LayoutSettings"; // import NodeIconSelect from '../../node/NodeIconSelect';
@@ -23,15 +23,17 @@ export default function GroupExpandSetting(props) {
     topo.historyManager.beginTransaction(); // console.log("setAlignmentBySelectionNodes", v);
     // topo.view.topoClient.htTopoClient.setAlignmentBySelectionNodes(v);
 
-    onChange("groupAlign", v); // topoEditApi.setAlignmentBySelectionNodes(v);
+    onChange('groupAlign', v); // topoEditApi.setAlignmentBySelectionNodes(v);
 
     topo.historyManager.endTransaction();
   };
 
-  var layoutOnChange = function layoutOnChange(v) {
+  var layoutOnChange = function layoutOnChange(value) {
     topo.historyManager.beginTransaction();
-    setLayout(v);
-    onChange("layout", v);
+    setLayout(value); // onChange("layout", v);
+
+    var layouType = value.id === 'toward' ? "" + value.id + value.options.subId : value.id;
+    topo.getHtTopo().layoutInContainer(layouType);
     topo.historyManager.endTransaction();
   };
 
@@ -40,9 +42,9 @@ export default function GroupExpandSetting(props) {
     setLayout({}); // onChange("layout", {});
   }, [id]);
   return /*#__PURE__*/React.createElement(_Collapse, {
-    defaultExpandedKeys: ["布局", "显示设置", "对齐方式"],
+    defaultExpandedKeys: ['布局', '显示设置', '对齐方式'],
     style: {
-      border: "none"
+      border: 'none'
     }
   }, /*#__PURE__*/React.createElement(CollapsePanel, {
     key: "\u5E03\u5C40",
@@ -71,13 +73,5 @@ export default function GroupExpandSetting(props) {
     setExpanded: function setExpanded(val) {
       return group.setExpanded(val);
     }
-  }))), /*#__PURE__*/React.createElement(CollapsePanel, {
-    key: "\u5BF9\u9F50\u65B9\u5F0F",
-    title: "\u5BF9\u9F50\u65B9\u5F0F"
-  }, /*#__PURE__*/React.createElement(_Form.Item, {
-    label: ""
-  }, /*#__PURE__*/React.createElement(AlignSetting, {
-    onChange: alignOnChange,
-    selected: "left"
   }))));
 }

package/es/core/editor/components/settings/propertyViews/group/cluster/ClusterGroupRelateData.js

@@ -1,10 +1,10 @@
 import _Collapse from "@alifd/next/es/collapse";
 import _Form from "@alifd/next/es/form";
 import React, { useEffect } from 'react';
+import NoDataPage from '@riil-frontend/component-no-data-page';
 import GroupNodeList from "../DataTab/GroupNodeList";
 import CollapsePanel from "../../../../../../../components/collapse/Panel";
 import NodeRelateResourceButton from "../../node/data/NodeRelateResourceButton";
-import NoDataPage from '@riil-frontend/component-no-data-page';
 import CollapseFullheightStyles from "../../../common/GroupNodeList/CollapseFullheight.module.scss";
 import textStyles from "../../../../../../common/text.module.scss";
 export default function ClusterGroupRelateData(props) {
@@ -44,12 +44,13 @@ export default function ClusterGroupRelateData(props) {
     key: "\u76F8\u5173\u8D44\u6E90",
     title: "\u76F8\u5173\u8D44\u6E90"
   }, /*#__PURE__*/React.createElement(_Form, {
-    labelAlign: "top"
-  }, /*#__PURE__*/React.createElement(_Form.Item, {
-    label: "\u5173\u8054\u8D44\u6E90",
+    labelAlign: "top",
     style: {
-      marginBottom: 4
+      marginTop: -4,
+      marginBottom: -12
     }
+  }, /*#__PURE__*/React.createElement(_Form.Item, {
+    label: "\u5173\u8054\u8D44\u6E90"
   }, /*#__PURE__*/React.createElement("div", {
     style: {
       display: 'flex'
@@ -59,7 +60,8 @@ export default function ClusterGroupRelateData(props) {
     style: {
       flex: 1,
       paddingRight: 16,
-      color: '#4D6277'
+      color: '#4D6277',
+      lineHeight: '20px'
     },
     title: values.tag ? values.name : null
   }, values.tag ? values.name : '—'), /*#__PURE__*/React.createElement(NodeRelateResourceButton, {

package/es/core/editor/components/settings/propertyViews/index.js

@@ -1,19 +1,17 @@
 import NodePropertyView from "./node/NodePropertyView";
 import LayerPropertyView from "./layer/LayerPropertyView";
 import TextPropertyView from "./text/TextPropertyView";
-import ViewPropertyView from "./view/ViewPropertyView";
 import GroupPropertyView from "./group/GroupPropertyView";
-import MultipleElementPropertyView from "./multipleElements/MultipleElementPropertyView";
-import EdgePropertyView from "./edge/EdgePropertyView";
 import BoxPropertyView from "./box/BoxPropertyView";
 var propertyPanelMap = {
-  view: ViewPropertyView,
+  // view: ViewPropertyView,
   group: GroupPropertyView,
   node: NodePropertyView,
-  edge: EdgePropertyView,
+  // edge: EdgePropertyView,
+  // edgeGroup: EdgeGroupPropertyView,
   layer: LayerPropertyView,
   text: TextPropertyView,
-  multiple: MultipleElementPropertyView,
+  // multiple: MultipleElementPropertyView,
   box: BoxPropertyView
 };
 

package/es/core/editor/components/settings/propertyViews/layer/BasicSetting.js

@@ -0,0 +1,57 @@
+import _Form from "@alifd/next/es/form";
+import _extends from "@babel/runtime/helpers/extends";
+import _Field from "@alifd/next/es/field";
+import rlog from '@riil-frontend/component-topology-utils/es/rlog';
+import React, { useEffect } from 'react';
+import { SPECIAL_CHARACTER_FORM_ITEM_VALIDATE_PROPS, validateSpecialCharacter } from "../../../../../../utils/SpecialCharacterValidateUtil";
+import NameInput from "../../common/NameInput";
+export default function BasicSetting(props) {
+  var topo = props.topo,
+      values = props.values,
+      _onChange = props.onChange,
+      layer = props.layer;
+
+  var field = _Field.useField({
+    autoUnmount: false,
+    values: values,
+    onChange: function onChange(name, value) {
+      if (name === 'styleMap.label' && !validateSpecialCharacter(value)) {
+        return;
+      }
+
+      var newValues = field.getValues();
+
+      _onChange(name, value, newValues);
+    }
+  });
+
+  useEffect(function () {
+    field.setValues(values);
+  }, [values]);
+  return /*#__PURE__*/React.createElement(_Form, {
+    field: field,
+    labelAlign: "top",
+    style: {
+      margin: '12px 0 0 0'
+    }
+  }, /*#__PURE__*/React.createElement(_Form.Item, _extends({
+    label: "\u5206\u5C42\u540D\u79F0"
+  }, SPECIAL_CHARACTER_FORM_ITEM_VALIDATE_PROPS, {
+    patternTrigger: "onChange",
+    style: {
+      paddingLeft: 32,
+      paddingRight: 16
+    }
+  }), /*#__PURE__*/React.createElement(NameInput, {
+    name: "styleMap.label",
+    multipleLine: true,
+    maxLength: 30,
+    placeholder: "\u8BF7\u8F93\u5165",
+    onFocus: function onFocus() {
+      topo.historyManager.beginTransaction();
+    },
+    onBlur: function onBlur() {
+      topo.historyManager.endTransaction();
+    }
+  })));
+}

package/es/core/editor/components/settings/propertyViews/layer/LayerPropertyView.js

@@ -1,30 +1,24 @@
-import _Tab from "@alifd/next/es/tab";
 import _extends from "@babel/runtime/helpers/extends";
 import React from 'react';
-import TabView from "../../common/tab/TabView";
-import Setting from "./SettingTab/Setting";
 import RelateData from "./DataTab/RelateData";
-import useHtElement from "../../../../../common/hooks/useHtElement";
+import Setting from "./BasicSetting";
+import styles from "./LayerPropertyView.module.scss";
 export default function LayerPropertyView(props) {
   var topo = props.topo,
       topoEditApi = props.topoEditApi,
       values = props.values,
       onChange = props.onChange,
       settingRuntimeState = props.settingRuntimeState,
-      editorProps = props.editorProps;
-  var layer = useHtElement({
-    topo: topo,
-    id: values.id
-  });
-  return /*#__PURE__*/React.createElement(TabView, null, /*#__PURE__*/React.createElement(_Tab.Item, {
-    title: "\u6570\u636E",
-    key: "1"
-  }, /*#__PURE__*/React.createElement(RelateData, _extends({
-    layer: layer
-  }, props))), /*#__PURE__*/React.createElement(_Tab.Item, {
-    title: "\u8BBE\u7F6E",
-    key: "2"
+      editorProps = props.editorProps,
+      selectionElement = props.selectionElement;
+  var layer = selectionElement;
+  return /*#__PURE__*/React.createElement("div", {
+    className: styles.container
   }, /*#__PURE__*/React.createElement(Setting, _extends({
     layer: layer
+  }, props)), /*#__PURE__*/React.createElement("div", {
+    className: styles.data
+  }, /*#__PURE__*/React.createElement(RelateData, _extends({
+    layer: layer
   }, props))));
 }

package/es/core/editor/components/settings/propertyViews/layer/LayerPropertyView.module.scss

@@ -0,0 +1,10 @@
+.container {
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+
+  .data {
+    flex: 1;
+    overflow: auto;
+  }
+}

package/es/core/editor/components/settings/propertyViews/layer/LayerPropertyViewV1.js

@@ -0,0 +1,27 @@
+import _Tab from "@alifd/next/es/tab";
+import _extends from "@babel/runtime/helpers/extends";
+import React from 'react';
+import TabView from "../../common/tab/TabView";
+import Setting from "./SettingTab/Setting";
+import RelateData from "./DataTab/RelateData";
+export default function LayerPropertyView(props) {
+  var topo = props.topo,
+      topoEditApi = props.topoEditApi,
+      values = props.values,
+      onChange = props.onChange,
+      settingRuntimeState = props.settingRuntimeState,
+      editorProps = props.editorProps,
+      selectionElement = props.selectionElement;
+  var layer = selectionElement;
+  return /*#__PURE__*/React.createElement(TabView, null, /*#__PURE__*/React.createElement(_Tab.Item, {
+    title: "\u6570\u636E",
+    key: "1"
+  }, /*#__PURE__*/React.createElement(RelateData, _extends({
+    layer: layer
+  }, props))), /*#__PURE__*/React.createElement(_Tab.Item, {
+    title: "\u8BBE\u7F6E",
+    key: "2"
+  }, /*#__PURE__*/React.createElement(Setting, _extends({
+    layer: layer
+  }, props))));
+}

package/es/core/editor/components/settings/propertyViews/multipleElements/BatchSetNodeSize/BatchSetNodeSize.js

@@ -1,6 +1,6 @@
 import _extends from "@babel/runtime/helpers/extends";
-import rlog from '@riil-frontend/component-topology-utils/es/rlog';
-import React, { useState, useEffect, useRef, useCallback, useMemo } from 'react';
+import rlog from "@riil-frontend/component-topology-utils/es/rlog";
+import React, { useState, useEffect, useRef, useCallback, useMemo } from "react";
 import SizeInput from "../../../common/SizeInput";
 
 var NodesSizeRatioMap = /*#__PURE__*/function () {
@@ -80,7 +80,7 @@ export default function BatchSetNodeSize(props) {
     if (lock) {
       var _setSize;
 
-      setSize((_setSize = {}, _setSize[name] = value, _setSize[name === 'width' ? 'height' : 'width'] = undefined, _setSize));
+      setSize((_setSize = {}, _setSize[name] = value, _setSize[name === "width" ? "height" : "width"] = undefined, _setSize));
     } else {
       var _extends2;
 
@@ -89,10 +89,10 @@ export default function BatchSetNodeSize(props) {
 
     topo.historyManager.beginTransaction();
     nodes.forEach(function (node) {
-      if (name === 'width') {
+      if (name === "width") {
         if (lock) {
           var height = nodesSizeRatioMap.getNodeHeight(node, value);
-          rlog.debug('多元素锁定设置宽', node, value, height);
+          rlog.debug("多元素锁定设置宽", node, value, height);
           node.setHeight(height);
         }
 
@@ -117,11 +117,10 @@ export default function BatchSetNodeSize(props) {
     nodesSizeRatioMap.reset();
   };
 
-  return /*#__PURE__*/React.createElement(SizeInput, {
+  return /*#__PURE__*/React.createElement(SizeInput, _extends({}, props, {
     value: size,
     lock: lock,
     onChange: handleChange,
     onLockChange: onLockChange
-  });
-}
-;
+  }));
+}

package/es/core/editor/components/settings/propertyViews/multipleElements/MultipleElementLineType.js

@@ -1,17 +1,15 @@
 import React from 'react';
-import { getEdgesBySelection } from "../../../../utils/edgeTypeStyleUtil";
-import LineType from "../../common/LineType";
+import { getEdgesBySelection, setEdgesType } from "../../../../utils/edgeTypeStyleUtil";
+import LineType from "../../../Toolbar/widgets/EdgeTypeButton/LineType";
 export default function MultipleElementLineType(props) {
   var topo = props.topo;
 
-  var setLineType = function setLineType(type) {};
-
-  var getSelectedEdges = function getSelectedEdges() {
-    return getEdgesBySelection(topo);
+  var setLineType = function setLineType(type) {
+    var edges = getEdgesBySelection(topo);
+    setEdgesType(edges, type, topo);
   };
 
   return /*#__PURE__*/React.createElement(LineType, {
-    getEdges: getSelectedEdges,
     onChange: setLineType,
     topo: topo
   });

package/es/core/editor/components/settings/propertyViews/multipleElements/MultipleElementPropertyView.js

@@ -34,19 +34,7 @@ export default function MultipleElementPropertyView(props) {
 
   useEffect(function () {
     field.setValues(values);
-  }, [values]);
-
-  var alignOnChange = function alignOnChange(v) {
-    // console.log('setAlignmentBySelectionNodes', v);
-    topo.historyManager.beginTransaction();
-    topo.getHtTopo().setAlignmentBySelectionNodes(v);
-
-    _onChange('groupAlign', v); // topoEditApi.setAlignmentBySelectionNodes(v);
-
-
-    topo.historyManager.endTransaction();
-  }; // TODO 临时方案，满足应用部署拓扑多选元素属性面板不显示对齐
-
+  }, [values]); // TODO 临时方案，满足应用部署拓扑多选元素属性面板不显示对齐
 
   if (!(editorProps !== null && editorProps !== void 0 && (_editorProps$multiple = editorProps.multipleElementPropertyViewProps) !== null && _editorProps$multiple !== void 0 && _editorProps$multiple.showElementAlign) && topoShowType === TPL_TREE) {
     return /*#__PURE__*/React.createElement(ViewPropertyView, props);
@@ -78,8 +66,7 @@ export default function MultipleElementPropertyView(props) {
     key: "\u5BF9\u9F50\u65B9\u5F0F",
     title: "\u5BF9\u9F50\u65B9\u5F0F"
   }, /*#__PURE__*/React.createElement(AlignSetting, {
-    onChange: alignOnChange,
-    selected: "left"
+    topo: topo
   })), /*#__PURE__*/React.createElement(CollapsePanel, {
     key: "\u7EBF\u5F62",
     title: "\u7EBF\u5F62"

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

@@ -1,11 +1,8 @@
-import _Tab from "@alifd/next/es/tab";
 import _extends from "@babel/runtime/helpers/extends";
 import React from 'react';
-import useHtElement from "../../../../../common/hooks/useHtElement";
-import TabView from "../../common/tab/TabView";
 import Data from "./data/Data";
 import styles from "./NodePropertyView.module.scss";
-import Setting from "./Setting";
+import BasicSetting from "./Setting/BasicSetting";
 export default function NodePropertyView(props) {
   var _topo$options$editor;
 
@@ -14,40 +11,19 @@ export default function NodePropertyView(props) {
       values = props.values,
       onChange = props.onChange,
       editorProps = props.editorProps,
-      settingRuntimeState = props.settingRuntimeState;
-  var node = useHtElement({
-    topo: topo,
-    id: values.id
-  });
-
-  var renderData = function renderData() {
-    return /*#__PURE__*/React.createElement(Data, _extends({}, props, {
-      node: node
-    }));
-  };
-
-  var renderSetting = function renderSetting() {
-    var nodeSettingViewProps = editorProps.nodeSettingViewProps;
-    return /*#__PURE__*/React.createElement(Setting, _extends({}, props, nodeSettingViewProps));
-  }; // 未绑定资源的节点，根据参数控制是否可关联资源
-
+      selectionElement = props.selectionElement;
+  var node = selectionElement; // 未绑定资源的节点，根据参数控制是否可关联资源
 
   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;
+  var dataContent = null;
 
   if (showRelateResource) {
-    content = /*#__PURE__*/React.createElement(TabView, null, /*#__PURE__*/React.createElement(_Tab.Item, {
-      title: "\u6570\u636E",
-      key: "1"
-    }, renderData()), /*#__PURE__*/React.createElement(_Tab.Item, {
-      title: "\u8BBE\u7F6E",
-      key: "2"
-    }, renderSetting()));
-  } else {
-    content = renderSetting();
+    dataContent = /*#__PURE__*/React.createElement(Data, _extends({}, props, {
+      node: node
+    }));
   }
 
   return /*#__PURE__*/React.createElement("div", {
     className: styles.NodePropertyView
-  }, content);
+  }, /*#__PURE__*/React.createElement(BasicSetting, props), dataContent);
 }