@riil-frontend/component-topology 6.0.0-alpha.6 → 6.0.0-alpha.60

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

@@ -1,20 +1,23 @@
 @import '~@alifd/next/variables.scss';
 
-.settingsPanel {
+.propertyPanel {
   width: 280px;
   height: 100%;
   position: absolute;
   top: 0;
   right: 0;
   border-radius: 2px;
-  //border: 1px solid #E6E7EB;
-  //border-left: none;
+  border-left: 1px solid #E6E7EB;
 
   display: flex;
   flex-direction: column;
   overflow: hidden;
+  transition: width .1s linear;
 
-  //margin-top: 47px;
+  &.hide {
+    width: 0;
+    border-left: none;
+  }
 
   :global {
     // 滚动条
@@ -71,10 +74,3 @@
     align-items: center;
   }
 }
-
-.settings {
-  flex: 1;
-  background: #FFFFFF;
-  overflow: auto;
-  // padding-bottom: 12px;
-}

package/lib/core/editor/components/settings/common/AlignSetting/AlignSetting.module.scss

@@ -6,7 +6,7 @@
       background: #EBECF0;
       margin-right: 3px;
       height: 16px;
-
+      width:1px;
     }
   }
 
@@ -16,8 +16,8 @@
     border-radius: 4px;
     border: none !important;
     color: #4D6277;
-    padding-left: 6px;
-    margin-right: 3px;
+    padding-left: 2px;
+    margin-right: 4px;
 
     &:active {
       background: #F2F7FD !important;

package/lib/core/editor/components/settings/common/AlignSetting/AlignTypeList.js

@@ -0,0 +1,97 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+exports.__esModule = true;
+exports["default"] = void 0;
+
+var _button = _interopRequireDefault(require("@alifd/next/lib/button"));
+
+var _icon = _interopRequireDefault(require("@alifd/next/lib/icon"));
+
+var _divider = _interopRequireDefault(require("@alifd/next/lib/divider"));
+
+var _react = _interopRequireWildcard(require("react"));
+
+var _AlignSettingModule = _interopRequireDefault(require("./AlignSetting.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; }
+
+var TREE_LAYOUT_OPTIONS = [{
+  value: 'left',
+  label: '左对齐',
+  icon: 'tuopu_zuoceduiqi'
+}, {
+  value: 'center',
+  label: '水平居中',
+  icon: 'tuopu_shuipingjuzhongduiqi'
+}, {
+  value: 'right',
+  label: '右对齐',
+  icon: 'tuopu_youceduiqi'
+}, {
+  value: 'top',
+  label: '靠上对齐',
+  icon: 'tuopu_dingbuduiqi'
+}, {
+  value: 'middle',
+  label: '垂直居中',
+  icon: 'tuopu_chuizhijuzhongduiqi'
+}, {
+  value: 'bottom',
+  label: '靠下对齐',
+  icon: 'tuopu_dibuduiqi'
+}, {
+  value: 'divide'
+}, {
+  value: 'distributeHorizontal',
+  label: '横向分布',
+  icon: 'tuopu_shuipingdengjianjuduiqi'
+}, {
+  value: 'distributeVertical',
+  label: '纵向分布',
+  icon: 'tuopu_chuizhidengjianjuduiqi'
+}];
+
+var AlignTypeList = function AlignTypeList(props) {
+  var _props$selected = props.selected,
+      selected = _props$selected === void 0 ? 'left' : _props$selected,
+      onChange = props.onChange,
+      distributionDisabled = props.distributionDisabled;
+
+  var _useState = (0, _react.useState)(selected),
+      value = _useState[0],
+      setValue = _useState[1];
+
+  var handleChange = function handleChange(data) {
+    // console.log("handleChange", data);
+    onChange && onChange(data.value);
+    setValue(data.value); // setValue(data)
+  };
+
+  return /*#__PURE__*/_react["default"].createElement("div", {
+    className: _AlignSettingModule["default"].AlignSetting
+  }, TREE_LAYOUT_OPTIONS.map(function (item, index, array) {
+    return item.value === 'divide' ? /*#__PURE__*/_react["default"].createElement(_divider["default"], {
+      key: index,
+      direction: "ver"
+    }) : /*#__PURE__*/_react["default"].createElement(_button["default"], {
+      key: index,
+      className: "" + _AlignSettingModule["default"].redioBtn,
+      text: true,
+      onClick: function onClick() {
+        handleChange(item);
+      },
+      title: item.label // eslint-disable-next-line no-unneeded-ternary
+      ,
+      disabled: (item.value === 'distributeHorizontal' || item.value === 'distributeVertical') && distributionDisabled
+    }, /*#__PURE__*/_react["default"].createElement(_icon["default"], {
+      type: item.icon
+    }));
+  }));
+};
+
+var _default = AlignTypeList;
+exports["default"] = _default;

package/lib/core/editor/components/settings/common/AlignSetting/index.js

@@ -3,91 +3,32 @@
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
 
 exports.__esModule = true;
-exports["default"] = void 0;
+exports["default"] = AlignSetting;
 
-var _button = _interopRequireDefault(require("@alifd/next/lib/button"));
+var _react = _interopRequireDefault(require("react"));
 
-var _icon = _interopRequireDefault(require("@alifd/next/lib/icon"));
+var _htElementUtils = require("../../../../../../utils/htElementUtils");
 
-var _divider = _interopRequireDefault(require("@alifd/next/lib/divider"));
+var _AlignTypeList = _interopRequireDefault(require("./AlignTypeList"));
 
-var _react = _interopRequireWildcard(require("react"));
+function AlignSetting(props) {
+  var topo = props.topo,
+      distributionDisabled = props.distributionDisabled;
 
-var _AlignSettingModule = _interopRequireDefault(require("./AlignSetting.module.scss"));
+  var alignOnChange = function alignOnChange(type) {
+    topo.historyManager.beginTransaction();
+    var selection = topo.getHtTopo().getGraphView().getSelectionModel().getSelection().toArray();
+    var nodes = selection.filter(function (ele) {
+      return !(0, _htElementUtils.isLayer)(ele) && !(0, _htElementUtils.isEdge)(ele);
+    }); // console.info("element--selectList", element, selectList);
 
-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 TREE_LAYOUT_OPTIONS = [{
-  value: "left",
-  label: "左对齐",
-  icon: "tuopu_zuoceduiqi"
-}, {
-  value: "center",
-  label: "水平居中",
-  icon: "tuopu_shuipingjuzhongduiqi"
-}, {
-  value: "right",
-  label: "右对齐",
-  icon: "tuopu_youceduiqi"
-}, {
-  value: "top",
-  label: "靠上对齐",
-  icon: "tuopu_dingbuduiqi"
-}, {
-  value: "middle",
-  label: "垂直居中",
-  icon: "tuopu_chuizhijuzhongduiqi"
-}, {
-  value: "bottom",
-  label: "靠下对齐",
-  icon: "tuopu_dibuduiqi"
-}, {
-  value: "divide"
-}, {
-  value: "distributeHorizontal",
-  label: "横向分布",
-  icon: "tuopu_shuipingdengjianjuduiqi"
-}, {
-  value: "distributeVertical",
-  label: "纵向分布",
-  icon: "tuopu_chuizhidengjianjuduiqi"
-}];
-
-var AlignSetting = function AlignSetting(props) {
-  var _props$selected = props.selected,
-      selected = _props$selected === void 0 ? "left" : _props$selected,
-      onChange = props.onChange;
-
-  var _useState = (0, _react.useState)(selected),
-      value = _useState[0],
-      setValue = _useState[1];
-
-  var handleChange = function handleChange(data) {
-    // console.log("handleChange", data);
-    onChange && onChange(data.value);
-    setValue(data.value); // setValue(data)
+    topo.view.topoClient.htTopoClient.setAlignmentBySelectionNodes(type, nodes);
+    topo.historyManager.endTransaction();
   };
 
-  return /*#__PURE__*/_react["default"].createElement("div", {
-    className: _AlignSettingModule["default"].AlignSetting
-  }, TREE_LAYOUT_OPTIONS.map(function (item, index, array) {
-    return item.value === "divide" ? /*#__PURE__*/_react["default"].createElement(_divider["default"], {
-      key: index,
-      direction: "ver"
-    }) : /*#__PURE__*/_react["default"].createElement(_button["default"], {
-      key: index,
-      className: "" + _AlignSettingModule["default"].redioBtn,
-      onClick: function onClick() {
-        handleChange(item);
-      },
-      title: item.label
-    }, /*#__PURE__*/_react["default"].createElement(_icon["default"], {
-      type: item.icon
-    }));
-  }));
-};
-
-var _default = AlignSetting;
-exports["default"] = _default;
+  return /*#__PURE__*/_react["default"].createElement(_AlignTypeList["default"], {
+    onChange: alignOnChange,
+    selected: "left",
+    distributionDisabled: distributionDisabled
+  });
+}

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

@@ -2,6 +2,7 @@
 
 .list {
   max-height: 100%;
+  margin-top: -8px;
 
   .item{
     display: flex;

package/lib/core/editor/components/settings/common/LineType/index.js

@@ -3,122 +3,24 @@
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
 
 exports.__esModule = true;
-exports["default"] = void 0;
+exports["default"] = LineTypeSetting;
 
-var _box = _interopRequireDefault(require("@alifd/next/lib/box"));
-
-var _button = _interopRequireDefault(require("@alifd/next/lib/button"));
-
-var _react = _interopRequireWildcard(require("react"));
-
-var _LineTypeModule = _interopRequireDefault(require("./LineType.module.scss"));
+var _react = _interopRequireDefault(require("react"));
 
 var _edgeTypeStyleUtil = require("../../../../utils/edgeTypeStyleUtil");
 
-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; }
-
-//  直线 2. 直线单向箭头 3. 直线双向箭头 4. 双折线 5. 双折线单向箭头 6. 弧线
-// 7. 弧线单向箭头 8. 内向双向箭头 9. 纵向折线 10. 纵向折线带箭头 11. 水平折线 12. 水平折线带箭头
-var LINE_TYPE_OPTIONS = [{
-  value: "boundary",
-  label: "直线",
-  icon: "topo_linear_icon_straightline"
-}, {
-  value: "boundary.arrow",
-  label: "直线单向箭头",
-  icon: "topo_linear_icon_oneway_straightline"
-}, {
-  value: "boundary.both.arrow",
-  label: "直线双向箭头",
-  icon: "topo_linear_icon_expanded_straightline"
-}, {
-  value: "ortho",
-  label: "双折线",
-  icon: "topo_linear_icon_bilinear"
-}, {
-  value: "ortho.arrow",
-  label: "双折线单向箭头",
-  icon: "topo_linear_icon_oneway_bilinear"
-}, {
-  value: "flex",
-  label: "弧线",
-  icon: "topo_linear_icon_arcline"
-}, {
-  value: "flex.arrow",
-  label: "弧线单向箭头",
-  icon: "topo_linear_icon_oneway_arcline"
-}, {
-  value: "oposite",
-  label: "内向双向箭头",
-  icon: "topo_linear_icon_narrow_straightline"
-}, {
-  value: "h.v",
-  label: "纵向折线",
-  icon: "topo_linear_icon_vertical_foldline"
-}, {
-  value: "h.v.arrow",
-  label: "纵向折线带箭头",
-  icon: "topo_linear_icon_oneway_vertical_foldline"
-}, {
-  value: "v.h",
-  label: "水平折线",
-  icon: "topo_linear_icon_horizontal_foldline"
-}, {
-  value: "v.h.arrow",
-  label: "水平折线带箭头",
-  icon: "topo_linear_icon_oneway_horizontal_foldline"
-}];
-
-var LineType = function LineType(props) {
-  var topo = props.topo,
-      getEdges = props.getEdges,
-      selected = props.selected,
-      onChange = props.onChange;
+var _LineType = _interopRequireDefault(require("../../../Toolbar/widgets/EdgeTypeButton/LineType"));
 
-  var _useState = (0, _react.useState)(selected),
-      value = _useState[0],
-      setValue = _useState[1];
+function LineTypeSetting(props) {
+  var topo = props.topo;
 
   var setLineType = function setLineType(type) {
-    var edges = getEdges();
+    var edges = (0, _edgeTypeStyleUtil.getEdgesBySelection)(topo);
     (0, _edgeTypeStyleUtil.setEdgesType)(edges, type, topo);
   };
 
-  var handleChange = function handleChange(data) {
-    // console.log("handleChange", data);
-    topo.historyManager.beginTransaction();
-
-    if (onChange) {
-      onChange(data.value);
-    }
-
-    setValue(data.value);
-    setLineType(data.value);
-    topo.historyManager.endTransaction();
-  };
-
-  return /*#__PURE__*/_react["default"].createElement(_box["default"], {
-    spacing: 16,
-    wrap: true,
-    direction: "row",
-    className: _LineTypeModule["default"].LineType
-  }, LINE_TYPE_OPTIONS.map(function (item, index, array) {
-    return /*#__PURE__*/_react["default"].createElement(_button["default"], {
-      key: index,
-      className: "" + _LineTypeModule["default"].redioBtn,
-      title: item.label,
-      onClick: function onClick() {
-        handleChange(item);
-      }
-    }, /*#__PURE__*/_react["default"].createElement("img", {
-      src: "/img/topo/editor/lineType/" + item.icon + ".svg",
-      alt: "",
-      className: _LineTypeModule["default"].iconImg
-    }));
-  }));
-};
-
-var _default = LineType;
-exports["default"] = _default;
+  return /*#__PURE__*/_react["default"].createElement(_LineType["default"], {
+    onChange: setLineType,
+    topo: topo
+  });
+}

package/lib/core/editor/components/settings/common/NameInput.js

@@ -0,0 +1,38 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+exports.__esModule = true;
+exports["default"] = void 0;
+
+var _input = _interopRequireDefault(require("@alifd/next/lib/input"));
+
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+
+var _objectWithoutPropertiesLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutPropertiesLoose"));
+
+var _react = _interopRequireDefault(require("react"));
+
+var _excluded = ["multipleLine"];
+
+var NameInput = /*#__PURE__*/_react["default"].forwardRef(function (props, ref) {
+  var multipleLine = props.multipleLine,
+      inputProps = (0, _objectWithoutPropertiesLoose2["default"])(props, _excluded);
+
+  if (multipleLine) {
+    return /*#__PURE__*/_react["default"].createElement(_input["default"].TextArea, (0, _extends2["default"])({
+      ref: ref,
+      autoHeight: {
+        minRows: 4,
+        maxRows: 4
+      }
+    }, inputProps));
+  }
+
+  return /*#__PURE__*/_react["default"].createElement(_input["default"], (0, _extends2["default"])({
+    ref: ref
+  }, inputProps));
+});
+
+var _default = NameInput;
+exports["default"] = _default;

package/lib/core/editor/components/settings/common/NodeSizeInput/NodeSizeInput.js

@@ -124,14 +124,14 @@ function NodeSizeInput(props) {
     return val ? Math.round(val) : val;
   }
 
-  return /*#__PURE__*/_react["default"].createElement(_SizeInput["default"], {
+  return /*#__PURE__*/_react["default"].createElement(_SizeInput["default"], (0, _extends3["default"])({}, props, {
     value: value,
     lock: lock,
     max: max,
     step: step,
     onChange: handleChange,
     onLockChange: switchLock
-  });
+  }));
 }
 
 NodeSizeInput.propTypes = {

package/lib/core/editor/components/settings/common/SizeInput/NodeSizeInput.js

@@ -9,27 +9,23 @@ var _box = _interopRequireDefault(require("@alifd/next/lib/box"));
 
 var _extends3 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 
-var _grid = _interopRequireDefault(require("@alifd/next/lib/grid"));
-
 var _form = _interopRequireDefault(require("@alifd/next/lib/form"));
 
 var _react = _interopRequireWildcard(require("react"));
 
 var _propTypes = _interopRequireDefault(require("prop-types"));
 
+var _rlog = _interopRequireDefault(require("@riil-frontend/component-topology-utils/es/rlog"));
+
 var _NodeSizeNumberPicker = _interopRequireDefault(require("./NodeSizeNumberPicker"));
 
 var _NodeSizeInputModule = _interopRequireDefault(require("./NodeSizeInput.module.scss"));
 
-var _rlog = _interopRequireDefault(require("@riil-frontend/component-topology-utils/es/rlog"));
-
 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 FormItem = _form["default"].Item;
-var Row = _grid["default"].Row,
-    Col = _grid["default"].Col;
 /**
  * 节点大小组件
  *
@@ -42,12 +38,13 @@ function SizeInput(props) {
       max = props.max,
       step = props.step,
       onChange = props.onChange,
-      lock = props.lock,
-      onLockChange = props.onLockChange,
       _props$showLabel = props.showLabel,
       showLabel = _props$showLabel === void 0 ? true : _props$showLabel,
-      hasTrigger = props.hasTrigger,
-      size = props.size;
+      numberPickerProps = props.numberPickerProps,
+      size = props.size,
+      lock = props.lock,
+      disabled = props.disabled,
+      onLockChange = props.onLockChange;
 
   var handleChange = function handleChange(name, attrValue) {
     var _extends2;
@@ -65,6 +62,18 @@ function SizeInput(props) {
     return val ? Math.round(val) : val;
   }
 
+  var renderLock = function renderLock() {
+    var imgSrc = "/img/topo/editor/toolbar/" + (lock ? 'lock' : 'unlock') + "/" + (disabled ? 'Disable' : 'Normal') + ".svg";
+    return /*#__PURE__*/_react["default"].createElement("div", {
+      className: _NodeSizeInputModule["default"].lockBtn,
+      onClick: switchLock
+    }, /*#__PURE__*/_react["default"].createElement("img", {
+      src: imgSrc,
+      alt: "",
+      width: 12
+    }));
+  };
+
   return /*#__PURE__*/_react["default"].createElement(_form["default"], {
     labelAlign: "top",
     component: "div",
@@ -85,28 +94,24 @@ function SizeInput(props) {
     style: {
       marginBottom: 0
     }
-  }, /*#__PURE__*/_react["default"].createElement(_NodeSizeNumberPicker["default"], {
+  }, /*#__PURE__*/_react["default"].createElement(_NodeSizeNumberPicker["default"], (0, _extends3["default"])({
     value: parseValue(value.width),
     label: showLabel ? '宽:' : '',
+    innerAfter: showLabel ? undefined : 'W',
     min: 1,
     max: max,
     step: step,
+    disabled: disabled,
     placeholder: "\u8BF7\u8F93\u5165",
-    size: size,
-    hasTrigger: hasTrigger,
+    size: size
+  }, numberPickerProps, {
     style: {
       width: '100%'
     },
     onChange: function onChange(val) {
       return handleChange('width', val);
     }
-  }))), /*#__PURE__*/_react["default"].createElement("div", {
-    className: _NodeSizeInputModule["default"].lockBtn,
-    onClick: switchLock
-  }, /*#__PURE__*/_react["default"].createElement("img", {
-    src: require(lock ? './img/icon_锁.svg' : './img/icon_解锁.svg'),
-    alt: ""
-  })), /*#__PURE__*/_react["default"].createElement("div", {
+  })))), renderLock(), /*#__PURE__*/_react["default"].createElement("div", {
     style: {
       flex: 1
     }
@@ -116,23 +121,24 @@ function SizeInput(props) {
     style: {
       marginBottom: 0
     }
-  }, /*#__PURE__*/_react["default"].createElement(_NodeSizeNumberPicker["default"], {
+  }, /*#__PURE__*/_react["default"].createElement(_NodeSizeNumberPicker["default"], (0, _extends3["default"])({
     value: parseValue(value.height),
-    label: showLabel ? '高:' : '' // addonTextAfter="H"
-    ,
+    label: showLabel ? '高:' : '',
+    innerAfter: showLabel ? undefined : 'H',
     min: 1,
     max: max,
     step: step,
+    disabled: disabled,
     placeholder: "\u8BF7\u8F93\u5165",
-    size: size,
-    hasTrigger: hasTrigger,
+    size: size
+  }, numberPickerProps, {
     style: {
       width: '100%'
     },
     onChange: function onChange(val) {
       return handleChange('height', val);
     }
-  }))))));
+  })))))));
 }
 
 SizeInput.propTypes = {

package/lib/core/editor/components/settings/common/SizeInput/NodeSizeNumberPicker.js

@@ -13,7 +13,7 @@ var _objectWithoutPropertiesLoose2 = _interopRequireDefault(require("@babel/runt
 
 var _react = _interopRequireWildcard(require("react"));
 
-var _excluded = ["value", "onChange", "min", "onBlur", "onKeyDown"];
+var _excluded = ["value", "onChange", "min", "onBlur", "onKeyDown", "disabled"];
 
 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); }
 
@@ -31,6 +31,7 @@ function NodeSizeNumberPicker(props) {
       min = props.min,
       onBlur = props.onBlur,
       onKeyDown = props.onKeyDown,
+      disabled = props.disabled,
       otherProps = (0, _objectWithoutPropertiesLoose2["default"])(props, _excluded);
 
   var _useState = (0, _react.useState)(value),
@@ -63,13 +64,13 @@ function NodeSizeNumberPicker(props) {
 
   var handleChange = function handleChange(value, e) {
     // 失去焦点最大最小值
-    if (e.type === 'blur') {
+    if (e.type === "blur") {
       onChange(!value ? min : value);
       return;
     } // 加减号立即变更
 
 
-    if (e.triggerType === 'up' || e.triggerType === 'down') {
+    if (e.triggerType === "up" || e.triggerType === "down") {
       onChange(value);
       return;
     }
@@ -80,10 +81,9 @@ function NodeSizeNumberPicker(props) {
   return /*#__PURE__*/_react["default"].createElement(_numberPicker["default"], (0, _extends2["default"])({}, otherProps, {
     value: inputValue,
     min: min,
+    disabled: disabled,
     onChange: handleChange,
     onBlur: handleBlur,
     onKeyDown: handleKeyDown
   }));
-}
-
-;
+}