@riil-frontend/component-topology 6.0.0-alpha.44 → 6.0.0-alpha.46

package/es/components/ColorPanel/index.js

@@ -71,14 +71,18 @@ function ColorPanel(props) {
     var rgba = "rgba(" + rgb.r + "," + rgb.g + "," + rgb.b + "," + rgb.a + ")";
 
     if (data !== prevValue) {
-      setData(rgba);
-      onChange({
+      setData({
         hex: prevValue,
         rgb: rgb
-      }, 'change');
+      });
     }
   };
 
+  var pickerBlur = function pickerBlur() {
+    onChange(data, 'change');
+    onPickerBlur();
+  };
+
   var getColor16 = function getColor16(color) {
     var that = color;
 
@@ -157,7 +161,7 @@ function ColorPanel(props) {
     style: {
       paddingBottom: 0
     },
-    onBlur: onPickerBlur,
+    onBlur: pickerBlur,
     onFocus: onPickerFocus
   }, /*#__PURE__*/React.createElement(SketchPicker, {
     color: data // width={230}

package/es/components/VerticalIconTab/VerticalIconTab.module.scss

@@ -41,6 +41,7 @@
       
       .tab-title {
         margin-top: 3px;
+        font-weight: normal;
       }
     }
   }

package/es/core/editor/components/Toolbar/widgets/FontColorButton.js

@@ -16,36 +16,44 @@ function FontColorDropdown(props) {
       disabled = _useState[0],
       setDisabled = _useState[1];
 
-  var onPickerFocus = function onPickerFocus() {
+  var backOpacityChange = function backOpacityChange(value) {
     topo.historyManager.beginTransaction();
-  };
-
-  var onPickerBlur = function onPickerBlur() {
-    topo.historyManager.endTransaction();
-  };
-
-  var backOpacityChange = function backOpacityChange(value, type) {
-    if (type === 'select') onPickerFocus();
     onChange({
       opacity: value / 100
     });
-    if (type === 'select') onPickerBlur();
+    topo.historyManager.endTransaction();
+  };
+
+  var colorBackgroundChanges = function colorBackgroundChanges(type, name, value) {
+    if (type === 'select') topo.historyManager.beginTransaction();
+
+    if (name === 'color') {
+      onChange({
+        color: value
+      });
+    } else {
+      onChange({
+        background: value
+      });
+    }
+
+    if (type === 'select') topo.historyManager.endTransaction();
   };
 
   var colorChang = function colorChang(value, type) {
-    if (type === 'select') onPickerFocus();
-    onChange({
-      color: value
-    });
-    if (type === 'select') onPickerBlur();
+    colorBackgroundChanges(type, 'color', value);
   };
 
-  var backgroundChang = function backgroundChang(value) {
-    onPickerFocus();
-    onChange({
-      background: value
-    });
-    onPickerBlur();
+  var backgroundChang = function backgroundChang(value, type) {
+    colorBackgroundChanges(type, 'background', value);
+  };
+
+  var onFocus = function onFocus() {
+    topo.historyManager.beginTransaction();
+  };
+
+  var onBlur = function onBlur() {
+    topo.historyManager.endTransaction();
   };
 
   var icon = disabled ? /*#__PURE__*/React.createElement("img", {
@@ -69,8 +77,8 @@ function FontColorDropdown(props) {
     }
   }, /*#__PURE__*/React.createElement(ColorPanel, {
     onChange: colorChang,
-    onPickerFocus: onPickerFocus,
-    onPickerBlur: onPickerBlur
+    onPickerFocus: onFocus,
+    onPickerBlur: onBlur
   }))), /*#__PURE__*/React.createElement("div", {
     className: styles.backgroundColor
   }, /*#__PURE__*/React.createElement("span", null, "\u80CC\u666F\u586B\u5145"), /*#__PURE__*/React.createElement("div", {
@@ -93,8 +101,8 @@ function FontColorDropdown(props) {
   }, /*#__PURE__*/React.createElement(ColorPanel, {
     showClear: true,
     onChange: backgroundChang,
-    onPickerFocus: onPickerFocus,
-    onPickerBlur: onPickerBlur
+    onPickerFocus: onFocus,
+    onPickerBlur: onBlur
   })))));
 }
 

package/es/core/editor/components/Toolbar/widgets/Layout/index.js

@@ -7,7 +7,7 @@ import React, { useState, useMemo } from 'react';
 import LayoutSettings from "./components/LayoutSettings";
 import WidgetBox from "../WidgetBox";
 import DropdownButton from "../components/DropdownButton";
-import { isGroup, isLayer } from "../../../../../../utils/htElementUtils";
+import { isGroup, isLayer } from "../../../../../../utils/htElementDataUtil";
 
 function Layout(props) {
   var topo = props.topo,
@@ -24,7 +24,7 @@ function Layout(props) {
       selection = _topo$store$useModelS.selection;
 
   var setDisabled = function setDisabled(data) {
-    if (topoShowType == 'layers' && selection.length == 1) {
+    if (topoShowType == 'layers' && selection.length == 1 && !isGroup(selection[0])) {
       return data != 'rectangle';
     } else {
       return data == 'rectangle';
@@ -87,15 +87,17 @@ function LayoutWidget(props) {
   // type为partition且selection.length>=0时可以点击布局， selection[0].className != 'ht.Node'
   // type为auto且selection.length==0时可以点击布局 
 
-  var selectionElements = topo.selectionModel.useHtSelection();
+  var _topo$store$useModelS2 = topo.store.useModelState('selection'),
+      selection = _topo$store$useModelS2.selection;
+
   var topoShowType = topoState.type; // 获取ID以及拓扑类型 // 拓扑类型：auto自由布局，layers分层，partition分区
 
   var disabled = useMemo(function () {
     return !isLayoutEnabled({
       topoShowType: topoShowType,
-      selectionElements: selectionElements
+      selection: selection
     });
-  }, [topoShowType, selectionElements]);
+  }, [topoShowType, selection]);
   var icon = disabled ? /*#__PURE__*/React.createElement("img", {
     src: "/img/topo/editor/toolbar/layout/Disable.svg",
     alt: ""
@@ -119,19 +121,19 @@ function LayoutWidget(props) {
 
 function isLayoutEnabled(props) {
   var topoShowType = props.topoShowType,
-      selectionElements = props.selectionElements; // 选中单个区域/集群后，该按钮亮起
+      selection = props.selection; // 选中单个区域/集群后，该按钮亮起
 
-  if (isGroup(selectionElements[0])) {
+  if (selection.length === 1 && isGroup(selection[0]) && selection[0].expanded) {
     return true;
   } // 分层拓扑选中任意分层时，布局按钮亮起
 
 
-  if (topoShowType === 'layers' && selectionElements.length === 1 && isLayer(selectionElements[0])) {
+  if (topoShowType === 'layers' && selection.length === 1 && isLayer(selection[0])) {
     return true;
   } // 空白拓扑未选中任何资源时，布局按钮亮起
 
 
-  if (topoShowType !== 'layers' && !selectionElements.length) {
+  if (topoShowType !== 'layers' && !selection.length) {
     return true;
   }
 

package/es/core/editor/components/Toolbar/widgets/NodeAlignWidget.js

@@ -72,8 +72,8 @@ function NodeAlignWidget(props) {
       if (nodes.length === 2) {
         var h = topo.view.topoClient.htTopoClient.getElementsSpace(nodes, 'h')[0];
         var v = topo.view.topoClient.htTopoClient.getElementsSpace(nodes, 'v')[0];
-        setLeftInputVal(h * 1 > 0 ? h : 0);
-        setRightInputVal(v * 1 > 0 ? v : 0);
+        setLeftInputVal(Math.round(h * 1 > 0 ? h : 0));
+        setRightInputVal(Math.round(v * 1 > 0 ? v : 0));
       }
     } // eslint-disable-next-line react-hooks/exhaustive-deps
 

package/es/core/editor/components/Toolbar/widgets/NodeAlignWidget.module.scss

@@ -1,6 +1,6 @@
 .leftInput{
-  width: 100px !important;
-  margin: 0px 10px 10px 9px;
+  width: 106px !important;
+  margin: 0px 9px 10px 9px;
   :global{
     input{
       background: url('/img/topo/editor/toolbar/对齐/水平间距_normal.svg')no-repeat 5px center !important;
@@ -16,7 +16,7 @@
   }
 }
 .rightInput{
-  width: 100px !important;
+  width: 106px !important;
   :global{
     input{
       background: url('/img/topo/editor/toolbar/对齐/垂直间距 _normal.svg')no-repeat 5px center !important;

package/es/core/editor/components/Toolbar/widgets/components/textStyleSetting/ElementTextStyleSetting/colorUtil.js

@@ -35,6 +35,10 @@ export function parseBackground(colorStr) {
 export function formatHexColor(color) {
   return color ? color.hex : null;
 }
+export function formatRgbaColor(color) {
+  var rgb = color.rgb;
+  return "rgba(" + rgb.r + ", " + rgb.g + ", " + rgb.b + ", " + rgb.a + ")";
+}
 /**
  * 格式化背景rgba颜色
  * @param {{background, opacity}} prevColor
@@ -43,7 +47,7 @@ export function formatHexColor(color) {
 
 export function formatBackgroundRgbaColor(prevColor, currentColor) {
   if (!('background' in currentColor) && !('opacity' in currentColor)) {
-    return null;
+    return formatRgbaColor(prevColor.background);
   }
 
   var colorObj = Object.assign(prevColor, currentColor);

package/es/core/editor/components/Toolbar/widgets/components/textStyleSetting/ElementTextStyleSetting/elements/text.js

@@ -19,7 +19,8 @@ export function setTextStyle(element, style) {
 
 
   var prevStyle = getTextStyle(element);
-  element.s('textBackground', formatBackgroundRgbaColor(prevStyle, style));
+  var background = formatBackgroundRgbaColor(prevStyle, style);
+  element.s('textBackground', background);
 
   var fontStyle = _extends({}, getTextStyle(element), style);
 

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

@@ -17,7 +17,7 @@
     border: none !important;
     color: #4D6277;
     padding-left: 2px;
-    margin-right: 3px;
+    margin-right: 4px;
 
     &:active {
       background: #F2F7FD !important;

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

@@ -0,0 +1,21 @@
+import _Input from "@alifd/next/es/input";
+import _extends from "@babel/runtime/helpers/extends";
+import React from 'react';
+var NameInput = /*#__PURE__*/React.forwardRef(function (props, ref) {
+  var multipleLine = props.multipleLine;
+
+  if (multipleLine) {
+    return /*#__PURE__*/React.createElement(_Input.TextArea, _extends({
+      ref: ref,
+      autoHeight: {
+        minRows: 4,
+        maxRows: 4
+      }
+    }, props));
+  }
+
+  return /*#__PURE__*/React.createElement(_Input, _extends({
+    ref: ref
+  }, props));
+});
+export default NameInput;

package/es/core/editor/components/settings/propertyViews/box/NameInput.js

@@ -1,7 +1,7 @@
-import _Input from "@alifd/next/es/input";
 import _extends from "@babel/runtime/helpers/extends";
 import React, { useEffect, useState } from 'react';
-var NameInput = /*#__PURE__*/React.forwardRef(function (props, ref) {
+import NameInput from "../../common/NameInput";
+var BoxNameInput = /*#__PURE__*/React.forwardRef(function (props, ref) {
   var onChange = props.onChange,
       topo = props.topo;
 
@@ -33,12 +33,13 @@ var NameInput = /*#__PURE__*/React.forwardRef(function (props, ref) {
     topo.historyManager.endTransaction();
   };
 
-  return /*#__PURE__*/React.createElement(_Input, _extends({}, props, {
+  return /*#__PURE__*/React.createElement(NameInput, _extends({}, props, {
     ref: ref,
     value: value,
+    multipleLine: true,
     onChange: handleChange,
     onFocus: handleFocus,
     onBlur: handleBlur
   }));
 });
-export default NameInput;
+export default BoxNameInput;

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

@@ -1,6 +1,5 @@
 import _Form from "@alifd/next/es/form";
 import _extends from "@babel/runtime/helpers/extends";
-import _Input from "@alifd/next/es/input";
 import _Field from "@alifd/next/es/field";
 import _Collapse from "@alifd/next/es/collapse";
 import React, { useEffect } from "react";
@@ -9,6 +8,7 @@ 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,
@@ -51,8 +51,9 @@ export default function GroupBasicSetting(props) {
     label: isCluster ? '集群名称' : '区域名称'
   }, SPECIAL_CHARACTER_FORM_ITEM_VALIDATE_PROPS, {
     patternTrigger: "onChange"
-  }), /*#__PURE__*/React.createElement(_Input, {
+  }), /*#__PURE__*/React.createElement(NameInput, {
     name: "attrObject.name",
+    multipleLine: true,
     maxLength: 30,
     placeholder: "\u8BF7\u8F93\u5165",
     onFocus: function onFocus() {

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

@@ -1,10 +1,10 @@
 import _Form from "@alifd/next/es/form";
 import _extends from "@babel/runtime/helpers/extends";
-import _Input from "@alifd/next/es/input";
 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,
@@ -43,8 +43,9 @@ export default function BasicSetting(props) {
       paddingLeft: 32,
       paddingRight: 16
     }
-  }), /*#__PURE__*/React.createElement(_Input, {
+  }), /*#__PURE__*/React.createElement(NameInput, {
     name: "styleMap.label",
+    multipleLine: true,
     maxLength: 30,
     placeholder: "\u8BF7\u8F93\u5165",
     onFocus: function onFocus() {

package/es/core/editor/components/settings/propertyViews/node/Setting/NameInput.js

@@ -1,7 +1,7 @@
-import _Input from "@alifd/next/es/input";
 import _extends from "@babel/runtime/helpers/extends";
 import React, { useEffect, useState } from 'react';
-var NameInput = /*#__PURE__*/React.forwardRef(function (props, ref) {
+import NameInput from "../../../common/NameInput";
+var NodeNameInput = /*#__PURE__*/React.forwardRef(function (props, ref) {
   var onChange = props.onChange,
       topo = props.topo;
 
@@ -33,12 +33,13 @@ var NameInput = /*#__PURE__*/React.forwardRef(function (props, ref) {
     topo.historyManager.endTransaction();
   };
 
-  return /*#__PURE__*/React.createElement(_Input, _extends({}, props, {
+  return /*#__PURE__*/React.createElement(NameInput, _extends({}, props, {
     ref: ref,
     value: value,
+    multipleLine: true,
     onChange: handleChange,
     onFocus: handleFocus,
     onBlur: handleBlur
   }));
 });
-export default NameInput;
+export default NodeNameInput;

package/es/core/hooks/useCanvasTheme.js

@@ -37,7 +37,7 @@ export default function useCanvasTheme(props) {
 
   useEffect(function () {
     // 设置
-    var themeConfig = themeMap[canvasTheme];
+    var themeConfig = themeMap[canvasTheme || 'white'];
 
     if (graphLoaded && themeConfig) {
       var _topo$historyManager2;

package/es/core/models/TopoApp.js

@@ -22,7 +22,7 @@ import topoFactory from "./topoFactory";
 import ElementTagTipConfig from "./tagstips/ElementTagTipConfig";
 import SelectionModel from "./SelectionModel"; // eslint-disable-next-line no-undef
 
-var version = typeof "6.0.0-alpha.44" === 'string' ? "6.0.0-alpha.44" : null;
+var version = typeof "6.0.0-alpha.46" === 'string' ? "6.0.0-alpha.46" : null;
 console.info("\u62D3\u6251\u7248\u672C: " + version);
 /**
  * 拓扑显示和编辑

package/lib/components/ColorPanel/index.js

@@ -87,14 +87,18 @@ function ColorPanel(props) {
     var rgba = "rgba(" + rgb.r + "," + rgb.g + "," + rgb.b + "," + rgb.a + ")";
 
     if (data !== prevValue) {
-      setData(rgba);
-      onChange({
+      setData({
         hex: prevValue,
         rgb: rgb
-      }, 'change');
+      });
     }
   };
 
+  var pickerBlur = function pickerBlur() {
+    onChange(data, 'change');
+    onPickerBlur();
+  };
+
   var getColor16 = function getColor16(color) {
     var that = color;
 
@@ -174,7 +178,7 @@ function ColorPanel(props) {
     style: {
       paddingBottom: 0
     },
-    onBlur: onPickerBlur,
+    onBlur: pickerBlur,
     onFocus: onPickerFocus
   }, /*#__PURE__*/_react["default"].createElement(_reactColor.SketchPicker, {
     color: data // width={230}

package/lib/components/VerticalIconTab/VerticalIconTab.module.scss

@@ -41,6 +41,7 @@
       
       .tab-title {
         margin-top: 3px;
+        font-weight: normal;
       }
     }
   }

package/lib/core/editor/components/Toolbar/widgets/FontColorButton.js

@@ -33,36 +33,44 @@ function FontColorDropdown(props) {
       disabled = _useState[0],
       setDisabled = _useState[1];
 
-  var onPickerFocus = function onPickerFocus() {
+  var backOpacityChange = function backOpacityChange(value) {
     topo.historyManager.beginTransaction();
-  };
-
-  var onPickerBlur = function onPickerBlur() {
-    topo.historyManager.endTransaction();
-  };
-
-  var backOpacityChange = function backOpacityChange(value, type) {
-    if (type === 'select') onPickerFocus();
     onChange({
       opacity: value / 100
     });
-    if (type === 'select') onPickerBlur();
+    topo.historyManager.endTransaction();
+  };
+
+  var colorBackgroundChanges = function colorBackgroundChanges(type, name, value) {
+    if (type === 'select') topo.historyManager.beginTransaction();
+
+    if (name === 'color') {
+      onChange({
+        color: value
+      });
+    } else {
+      onChange({
+        background: value
+      });
+    }
+
+    if (type === 'select') topo.historyManager.endTransaction();
   };
 
   var colorChang = function colorChang(value, type) {
-    if (type === 'select') onPickerFocus();
-    onChange({
-      color: value
-    });
-    if (type === 'select') onPickerBlur();
+    colorBackgroundChanges(type, 'color', value);
   };
 
-  var backgroundChang = function backgroundChang(value) {
-    onPickerFocus();
-    onChange({
-      background: value
-    });
-    onPickerBlur();
+  var backgroundChang = function backgroundChang(value, type) {
+    colorBackgroundChanges(type, 'background', value);
+  };
+
+  var onFocus = function onFocus() {
+    topo.historyManager.beginTransaction();
+  };
+
+  var onBlur = function onBlur() {
+    topo.historyManager.endTransaction();
   };
 
   var icon = disabled ? /*#__PURE__*/_react["default"].createElement("img", {
@@ -86,8 +94,8 @@ function FontColorDropdown(props) {
     }
   }, /*#__PURE__*/_react["default"].createElement(_ColorPanel["default"], {
     onChange: colorChang,
-    onPickerFocus: onPickerFocus,
-    onPickerBlur: onPickerBlur
+    onPickerFocus: onFocus,
+    onPickerBlur: onBlur
   }))), /*#__PURE__*/_react["default"].createElement("div", {
     className: _FontColorButtonModule["default"].backgroundColor
   }, /*#__PURE__*/_react["default"].createElement("span", null, "\u80CC\u666F\u586B\u5145"), /*#__PURE__*/_react["default"].createElement("div", {
@@ -110,8 +118,8 @@ function FontColorDropdown(props) {
   }, /*#__PURE__*/_react["default"].createElement(_ColorPanel["default"], {
     showClear: true,
     onChange: backgroundChang,
-    onPickerFocus: onPickerFocus,
-    onPickerBlur: onPickerBlur
+    onPickerFocus: onFocus,
+    onPickerBlur: onBlur
   })))));
 }
 

package/lib/core/editor/components/Toolbar/widgets/Layout/index.js

@@ -17,7 +17,7 @@ var _WidgetBox = _interopRequireDefault(require("../WidgetBox"));
 
 var _DropdownButton = _interopRequireDefault(require("../components/DropdownButton"));
 
-var _htElementUtils = require("../../../../../../utils/htElementUtils");
+var _htElementDataUtil = require("../../../../../../utils/htElementDataUtil");
 
 var _excluded = ["topo", "showLabel"];
 
@@ -40,7 +40,7 @@ function Layout(props) {
       selection = _topo$store$useModelS.selection;
 
   var setDisabled = function setDisabled(data) {
-    if (topoShowType == 'layers' && selection.length == 1) {
+    if (topoShowType == 'layers' && selection.length == 1 && !(0, _htElementDataUtil.isGroup)(selection[0])) {
       return data != 'rectangle';
     } else {
       return data == 'rectangle';
@@ -61,7 +61,7 @@ function Layout(props) {
     } // eslint-disable-next-line eqeqeq
 
 
-    if ((0, _htElementUtils.isLayer)(firstElement)) {
+    if ((0, _htElementDataUtil.isLayer)(firstElement)) {
       topo.getHtTopo().layoutLayer(firstElement);
     }
   };
@@ -102,15 +102,17 @@ function LayoutWidget(props) {
   // type为partition且selection.length>=0时可以点击布局， selection[0].className != 'ht.Node'
   // type为auto且selection.length==0时可以点击布局 
 
-  var selectionElements = topo.selectionModel.useHtSelection();
+  var _topo$store$useModelS2 = topo.store.useModelState('selection'),
+      selection = _topo$store$useModelS2.selection;
+
   var topoShowType = topoState.type; // 获取ID以及拓扑类型 // 拓扑类型：auto自由布局，layers分层，partition分区
 
   var disabled = (0, _react.useMemo)(function () {
     return !isLayoutEnabled({
       topoShowType: topoShowType,
-      selectionElements: selectionElements
+      selection: selection
     });
-  }, [topoShowType, selectionElements]);
+  }, [topoShowType, selection]);
   var icon = disabled ? /*#__PURE__*/_react["default"].createElement("img", {
     src: "/img/topo/editor/toolbar/layout/Disable.svg",
     alt: ""
@@ -134,19 +136,19 @@ function LayoutWidget(props) {
 
 function isLayoutEnabled(props) {
   var topoShowType = props.topoShowType,
-      selectionElements = props.selectionElements; // 选中单个区域/集群后，该按钮亮起
+      selection = props.selection; // 选中单个区域/集群后，该按钮亮起
 
-  if ((0, _htElementUtils.isGroup)(selectionElements[0])) {
+  if (selection.length === 1 && (0, _htElementDataUtil.isGroup)(selection[0]) && selection[0].expanded) {
     return true;
   } // 分层拓扑选中任意分层时，布局按钮亮起
 
 
-  if (topoShowType === 'layers' && selectionElements.length === 1 && (0, _htElementUtils.isLayer)(selectionElements[0])) {
+  if (topoShowType === 'layers' && selection.length === 1 && (0, _htElementDataUtil.isLayer)(selection[0])) {
     return true;
   } // 空白拓扑未选中任何资源时，布局按钮亮起
 
 
-  if (topoShowType !== 'layers' && !selectionElements.length) {
+  if (topoShowType !== 'layers' && !selection.length) {
     return true;
   }
 

package/lib/core/editor/components/Toolbar/widgets/NodeAlignWidget.js

@@ -91,8 +91,8 @@ function NodeAlignWidget(props) {
       if (nodes.length === 2) {
         var h = topo.view.topoClient.htTopoClient.getElementsSpace(nodes, 'h')[0];
         var v = topo.view.topoClient.htTopoClient.getElementsSpace(nodes, 'v')[0];
-        setLeftInputVal(h * 1 > 0 ? h : 0);
-        setRightInputVal(v * 1 > 0 ? v : 0);
+        setLeftInputVal(Math.round(h * 1 > 0 ? h : 0));
+        setRightInputVal(Math.round(v * 1 > 0 ? v : 0));
       }
     } // eslint-disable-next-line react-hooks/exhaustive-deps
 

package/lib/core/editor/components/Toolbar/widgets/NodeAlignWidget.module.scss

@@ -1,6 +1,6 @@
 .leftInput{
-  width: 100px !important;
-  margin: 0px 10px 10px 9px;
+  width: 106px !important;
+  margin: 0px 9px 10px 9px;
   :global{
     input{
       background: url('/img/topo/editor/toolbar/对齐/水平间距_normal.svg')no-repeat 5px center !important;
@@ -16,7 +16,7 @@
   }
 }
 .rightInput{
-  width: 100px !important;
+  width: 106px !important;
   :global{
     input{
       background: url('/img/topo/editor/toolbar/对齐/垂直间距 _normal.svg')no-repeat 5px center !important;