@arco-design/mobile-react 2.21.3 → 2.22.2

package/esm/steps/style/index.less

@@ -11,15 +11,23 @@
 
         &.horizontal {
             flex-direction: column;
+        }
+
+        &-align-center {
             align-items: center;
         }
 
-        &.vertical {
+        &-align-start {
             align-items: flex-start;
         }
 
-        &:last-child &-tail:after {
-            display: none;
+        &-align-center.vertical {
+            .use-var(padding-bottom, steps-vertical-content-padding-bottom);
+        }
+
+        &:first-child &-tail::before,
+        &:last-child &-tail::after {
+            visibility: hidden;
         }
 
         &-tail {
@@ -30,37 +38,93 @@
 
             .horizontal & {
                 width: 100%;
-                left: 50%;
                 .use-var(height, steps-icon-height);
-                .use-var(padding, steps-tail-horizontal-padding);
 
-                &:after {
-                    content: "";
-                    display: inline-block;
-                    width: 100%;
+                &::before,
+                &::after {
                     .use-var(height, steps-tail-standard-size);
-                    .use-var(background, steps-tail-standard-background);
-                    .rem(border-radius, 2);
+                }
+
+                &-align-start {
+                    .use-var(left, steps-tail-horizontal-left);
+                    .use-var(padding, steps-tail-horizontal-padding);
+
+                    &::after {
+                        content: "";
+                        width: 100%;
+                        .use-var(border-radius, steps-tail-border-radius);
+                    }
+                }
+
+                &-align-center {
+                    &::before,
+                    &::after {
+                        content: "";
+                        width: 50%;
+                    }
+                    &::before {
+                        .use-var(margin-right, steps-tail-horizontal-gutter);
+                        .use-var(border-top-right-radius, steps-tail-border-radius);
+                        .use-var(border-bottom-right-radius, steps-tail-border-radius);
+                    }
+                    &::after {
+                        .use-var(margin-left, steps-tail-horizontal-gutter);
+                        .use-var(border-top-left-radius, steps-tail-border-radius);
+                        .use-var(border-bottom-left-radius, steps-tail-border-radius);
+                    }
                 }
             }
 
             .vertical & {
                 height: 100%;
                 .use-var(width, steps-icon-width);
-                .use-var(top, steps-tail-vertical-top);
-                .use-var(padding, steps-tail-vertical-padding);
+                flex-direction: column;
 
-                &:after {
-                    content: "";
-                    display: inline-block;
-                    height: 100%;
+                &::before,
+                &::after {
                     .use-var(width, steps-tail-standard-size);
-                    .use-var(background, steps-tail-standard-background);
-                    .rem(border-radius, 2);
                 }
+
+                &-align-start {
+                    .use-var(top, steps-tail-vertical-top);
+                    .use-var(padding, steps-tail-vertical-padding);
+
+                    &::after {
+                        content: "";
+                        height: 100%;
+                        .use-var(border-radius, steps-tail-border-radius);
+                    }
+                }
+
+                &-align-center {
+                    &::before,
+                    &::after {
+                        content: "";
+                        height: 50%;
+                    }
+                    &::before {
+                        .use-var(margin-bottom, steps-tail-vertical-gutter);
+                        .use-var(border-bottom-left-radius, steps-tail-border-radius);
+                        .use-var(border-bottom-right-radius, steps-tail-border-radius);
+                    }
+                    &::after {
+                        .use-var(margin-top, steps-tail-vertical-gutter);
+                        .use-var(border-top-left-radius, steps-tail-border-radius);
+                        .use-var(border-top-right-radius, steps-tail-border-radius);
+                    }
+                }
+            }
+
+            &::after,
+            &::before {
+                display: inline-block;
+                .use-var(background, steps-tail-standard-background);
             }
 
-            .finish &:after {
+            &-status-finish::before,
+            &-status-finish::after,
+            &-align-center&-status-process::before,
+            &-align-center&-status-error::before {
                 .use-var(background, steps-tail-finish-background);
             }
         }
@@ -110,7 +174,7 @@
                 .use-var(font-size, steps-icon-num-font-size);
                 .use-var(line-height, steps-icon-num-line-height);
                 .use-var(color, steps-icon-num-color);
-                .text-medium-var(steps-icon-num-color);
+                .text-medium();
 
                 .process & {
                     .use-var(color, steps-process-icon-num-color);
@@ -142,17 +206,21 @@
         }
 
         &-content {
-            text-align: center;
 
             .horizontal & {
                 .use-var(margin-top, steps-horizontal-content-margin-top);
+                &-align-center {
+                    text-align: center;
+                }
             }
 
             .vertical & {
                 .use-var(margin-left, steps-vertical-content-margin-left);
-                text-align: left;
                 flex: 1;
-                .use-var(padding-bottom, steps-vertical-content-padding-bottom);
+
+                &-align-start {
+                    .use-var(padding-bottom, steps-vertical-content-padding-bottom);
+                }
             }
         }
 

package/esm/steps/type.d.ts

@@ -20,6 +20,11 @@ export interface StepProps {
      * @en Specify the step status. When this item is not input, the status will be automatically specified according to the current property of steps
      */
     status?: 'finish' | 'error' | 'wait' | 'process';
+    /**
+     * 指定对齐方式，不配置该项时，会跟随 Steps 的 align 属性值
+     * @en Specify the step alignment. When this item is not input, it will be automatically specified according to the align property of steps
+     */
+    align?: 'center' | 'start';
 }
 export interface StepsProps {
     /**
@@ -38,6 +43,13 @@ export interface StepsProps {
      * @default horizontal
      */
     direction?: 'vertical' | 'horizontal';
+    /**
+     * 步骤条对齐方式
+     * @en Step alignment
+     * @default direction="horizontal" 时默认为 "center"，direction="vertical" 时默认为 "start"
+     * @default_en "center" when direction="horizontal" and "start" when direction="vertical"
+     */
+    align?: 'center' | 'start';
     /**
      * 指定当前步骤，从 0 开始记数。在子 Step 元素中，可以通过 status 属性覆盖状态，传入则受控
      * @en Specify the current step, counting from 0. In the step children elements, the status can be overwritten through the status, and it is controlled if it is input

package/esm/swipe-action/index.js

@@ -51,6 +51,7 @@ var SwipeAction = /*#__PURE__*/forwardRef(function (props, ref) {
 
   var dampRateRef = useLatestRef(dampRate);
   var forbidClick = useRef(false);
+  var scrollingRef = useRef(null);
 
   var _useRefState = useRefState(false),
       moving = _useRefState[0],
@@ -67,6 +68,7 @@ var SwipeAction = /*#__PURE__*/forwardRef(function (props, ref) {
 
   var startRef = useRef(0);
   var startX = useRef(0);
+  var startY = useRef(0);
   var slideX = useRef(0);
   var isLayer = openStyleType === 'layer';
   var transitionStyle = useMemo(function () {
@@ -77,6 +79,7 @@ var SwipeAction = /*#__PURE__*/forwardRef(function (props, ref) {
 
   function resetMoveData() {
     startX.current = 0;
+    startY.current = 0;
     slideX.current = 0;
   }
 
@@ -88,19 +91,34 @@ var SwipeAction = /*#__PURE__*/forwardRef(function (props, ref) {
   function touchstart(e) {
     startRef.current = offsetRef.current;
     resetMoveData();
+    scrollingRef.current = null;
     startX.current = e.touches[0].pageX;
+    startY.current = e.touches[0].pageY;
   }
 
   function touchmove(e) {
-    e.preventDefault();
-    slideX.current = e.touches[0].pageX - startX.current;
+    var x = e.changedTouches[0].pageX - startX.current;
+    var y = e.changedTouches[0].pageY - startY.current;
+
+    if (scrollingRef.current === null) {
+      scrollingRef.current = Math.abs(x) < Math.abs(y);
+    }
+
+    if (scrollingRef.current) {
+      setMoving(false);
+      setOffset(0);
+      return;
+    }
+
+    e.cancelable && e.preventDefault();
+    slideX.current = x;
     forbidClick.current = true;
     setMoving(true);
     setOffset(getMenuCurrentWidth(slideX.current + startRef.current, -rightMenuWidthRef.current, leftMenuWidthRef.current));
   }
 
   function touchend() {
-    if (movingRef.current) {
+    if (movingRef.current && !scrollingRef.current) {
       var currentMenu = offsetRef.current > 0 ? 'left' : 'right';
       changeMenu(currentMenu);
       setMoving(false);

package/esm/tabs/index.js

@@ -4,7 +4,7 @@ import { cls, nextTick } from '@arco-design/mobile-utils';
 import { ContextLayout } from '../context-provider';
 import TabCell from './tab-cell';
 import TabPane from './tab-pane';
-import { useRefState, useListenResize, useUpdateEffect, useSwiperInnerScroll } from '../_helpers';
+import { useRefState, useListenResize, useUpdateEffect, useSwiperInnerScroll, useSystem } from '../_helpers';
 export * from './type';
 /**
  * 用于让用户在不同的视图中进行切换。为优化移动端渲染性能，如有替换DOM、发请求更新数据等操作，请在`onAfterChange`而非`onChange`回调中进行。
@@ -117,7 +117,9 @@ var Tabs = /*#__PURE__*/forwardRef(function (props, ref) {
       _props$translateZ = props.translateZ,
       translateZ = _props$translateZ === void 0 ? true : _props$translateZ,
       fullScreen = props.fullScreen,
-      autoHeight = props.autoHeight;
+      autoHeight = props.autoHeight,
+      _props$tabBarStopProp = props.tabBarStopPropagation,
+      tabBarStopPropagation = _props$tabBarStopProp === void 0 ? true : _props$tabBarStopProp;
   var domRef = useRef(null);
   var cellRef = useRef(null);
   var paneRef = useRef(null);
@@ -165,6 +167,7 @@ var Tabs = /*#__PURE__*/forwardRef(function (props, ref) {
   var touchStoppedRef = useRef(false);
   var changeFromRef = useRef('');
   var touchMoveBarScrollRef = useRef(false);
+  var system = useSystem();
   var allPanes = getAllPanes();
   var tabDirection = ['top', 'bottom'].indexOf(tabBarPosition) !== -1 ? 'vertical' : 'horizontal';
   var canSwipe = mode === 'swipe' && !disabled && swipeable && tabDirection === 'vertical' && tabs.length > 1;
@@ -279,10 +282,10 @@ var Tabs = /*#__PURE__*/forwardRef(function (props, ref) {
 
     var evt = e.changedTouches[0];
     var touchMoveX = evt.clientX || 0;
-    var touchMoveY = evt.clientY || 0; // bugfix: 兼容safari在右滑返回上一页时clientX为负值的情况
+    var touchMoveY = evt.clientY || 0; // bugfix: 兼容safari在右滑返回上一页时clientX为负值的情况，安卓有折叠屏，触点会有超出屏幕(clientX < 0)的情况，因此这里限定ios系统
     // @en bugfix: bugfix: Compatible with the case in safari where clientX is negative when swiping right back to the previous page
 
-    var posDisX = touchMoveX < 0 ? 0 : touchMoveX - touchStartXRef.current;
+    var posDisX = system === 'ios' && touchMoveX < 0 ? 0 : touchMoveX - touchStartXRef.current;
     var posDisY = touchMoveY - touchStartYRef.current;
     var absDisX = Math.abs(posDisX);
     var absDisY = Math.abs(posDisY);
@@ -472,7 +475,8 @@ var Tabs = /*#__PURE__*/forwardRef(function (props, ref) {
       renderTabBarItem: renderTabBarItem,
       renderTabBarInner: renderTabBarInner,
       tabBarStyle: tabBarStyle,
-      tabBarClass: tabBarClass
+      tabBarClass: tabBarClass,
+      tabBarStopPropagation: tabBarStopPropagation
     }, commonProps);
 
     var CellComp = /*#__PURE__*/React.createElement(TabCell, cellProps);

package/esm/tabs/style/css/index.css

@@ -386,8 +386,8 @@
 .arco-tab-cell.vertical:not(.custom).line.active.system-android,
 .arco-tab-cell.vertical:not(.custom).line-divide.active.system-android {
   font-weight: 400;
-  -webkit-text-stroke: 0.3PX #165dff;
-  text-stroke: 0.3PX #165dff;
+  -webkit-text-stroke: 0.3PX currentColor;
+  text-stroke: 0.3PX currentColor;
 }
 .arco-tab-cell.vertical:not(.custom).card {
   color:  #165dff ;
@@ -401,8 +401,8 @@
 .arco-tab-cell.vertical:not(.custom).card.active.android,
 .arco-tab-cell.vertical:not(.custom).card.active.system-android {
   font-weight: 400;
-  -webkit-text-stroke: 0.3PX #ffffff;
-  text-stroke: 0.3PX #ffffff;
+  -webkit-text-stroke: 0.3PX currentColor;
+  text-stroke: 0.3PX currentColor;
 }
 .arco-tab-cell.vertical:not(.custom).card:not(:last-child) {
   border-right: 1PX solid #165dff ;
@@ -444,8 +444,8 @@
 .arco-tab-cell.vertical:not(.custom).tag.active.system-android,
 .arco-tab-cell.vertical:not(.custom).tag-divide.active.system-android {
   font-weight: 400;
-  -webkit-text-stroke: 0.3PX #ffffff;
-  text-stroke: 0.3PX #ffffff;
+  -webkit-text-stroke: 0.3PX currentColor;
+  text-stroke: 0.3PX currentColor;
 }
 .arco-tab-cell.horizontal {
   height:  1.08rem ;
@@ -458,8 +458,8 @@
 .arco-tab-cell.horizontal.active.android,
 .arco-tab-cell.horizontal.active.system-android {
   font-weight: 400;
-  -webkit-text-stroke: 0.3PX #165dff;
-  text-stroke: 0.3PX #165dff;
+  -webkit-text-stroke: 0.3PX currentColor;
+  text-stroke: 0.3PX currentColor;
 }
 .arco-tab-pane-container.mode-swipe {
   display: -webkit-box;

package/esm/tabs/style/index.less

@@ -322,7 +322,7 @@
             &.line-divide {
 
                 &.active {
-                    .text-medium-var(tabs-tab-bar-line-active-color);
+                    .text-medium();
                     .use-var(color, tabs-tab-bar-line-active-color);
                 }
             }
@@ -333,7 +333,7 @@
                 &.active {
                     .use-var(background, tabs-tab-bar-card-color);
                     .use-var(color, tabs-tab-bar-card-text-color);
-                    .text-medium-var(tabs-tab-bar-card-text-color);
+                    .text-medium();
                 }
 
                 &:not(:last-child) {
@@ -374,7 +374,7 @@
                 &.active {
                     .use-var(background, tabs-tab-bar-tag-active-background);
                     .use-var(color, tabs-tab-bar-tag-active-text-color);
-                    .text-medium-var(tabs-tab-bar-tag-active-text-color);
+                    .text-medium();
                 }
             }
         }
@@ -384,7 +384,7 @@
         .use-var(height, tabs-tab-bar-horizontal-height);
 
         &.active {
-            .text-medium-var(tabs-tab-bar-line-active-color);
+            .text-medium();
             .use-var(color, tabs-tab-bar-line-active-color);
         }
     }

package/esm/tabs/tab-cell.js

@@ -48,7 +48,8 @@ var TabCell = /*#__PURE__*/forwardRef(function (props, ref) {
       renderTabBarInner = props.renderTabBarInner,
       tabBarStyle = props.tabBarStyle,
       tabBarClass = props.tabBarClass,
-      translateZ = props.translateZ;
+      translateZ = props.translateZ,
+      tabBarStopPropagation = props.tabBarStopPropagation;
   var prefix = prefixCls + "-tab-cell";
   var domRef = useRef(null);
   var underlineRef = useRef(null);
@@ -140,13 +141,13 @@ var TabCell = /*#__PURE__*/forwardRef(function (props, ref) {
       return e.stopPropagation();
     };
 
-    if (isVertical && hasOverflow && domRef.current) {
+    if (isVertical && hasOverflow && domRef.current && tabBarStopPropagation) {
       domRef.current.addEventListener('touchstart', stopFunc);
       domRef.current.addEventListener('touchmove', stopFunc);
     }
 
     return function () {
-      if (isVertical && hasOverflow && domRef.current) {
+      if (isVertical && hasOverflow && domRef.current && tabBarStopPropagation) {
         domRef.current.removeEventListener('touchstart', stopFunc);
         domRef.current.removeEventListener('touchmove', stopFunc);
       }

package/esm/tabs/type.d.ts

@@ -421,6 +421,12 @@ export interface TabsProps {
      * @en Tabbar underline inner style, applied to tab-cell-underline-inner
      */
     underlineInnerStyle?: React.CSSProperties;
+    /**
+     * 当前 TabBar 的触摸事件是否需要 stopPropagation
+     * @en Does the touch event of the current TabBar require stopPropagation
+     * @default true
+     */
+    tabBarStopPropagation?: boolean;
 }
 export interface TabsRef {
     /**
@@ -510,6 +516,11 @@ export interface TabCellProps extends Pick<TabsProps, 'tabs' | 'type' | 'onTabCl
      * @en The distance the underline has been swiped
      */
     jumpingDis: number;
+    /**
+     * 当前 TabBar 的触摸事件是否需要 stopPropagation
+     * @en Does the touch event of the current TabBar require stopPropagation
+     */
+    tabBarStopPropagation: boolean;
 }
 export interface TabCellRef {
     /**

package/esm/toast/methods.js

@@ -1,7 +1,6 @@
 import _extends from "@babel/runtime/helpers/extends";
-import React from 'react';
-import ReactDOM from 'react-dom';
 import { nextTick } from '@arco-design/mobile-utils';
+import { ReactDOMRender } from '../_helpers/render';
 export function toast(Component, type) {
   return function (originConfig) {
     var config = typeof originConfig === 'string' ? {
@@ -17,16 +16,16 @@ export function toast(Component, type) {
     var div = document.createElement('div');
     document.body.appendChild(div);
 
-    function render(props) {
-      ReactDOM.render( /*#__PURE__*/React.createElement(Component, props), div);
-    }
+    var _ReactDOMRender = new ReactDOMRender(Component, div),
+        render = _ReactDOMRender.render,
+        unmount = _ReactDOMRender.unmount;
 
-    function destory() {
+    function destroy() {
       var onClose = config.onClose;
       onClose && onClose();
-      var unmountResult = ReactDOM.unmountComponentAtNode(div);
+      unmount();
 
-      if (unmountResult && div.parentNode) {
+      if (div.parentNode) {
         div.parentNode.removeChild(div);
       }
     }
@@ -36,7 +35,7 @@ export function toast(Component, type) {
       getContainer: function getContainer() {
         return div;
       },
-      onClose: destory,
+      onClose: destroy,
       visible: false
     });
 

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@arco-design/mobile-react",
-    "version": "2.21.3",
+    "version": "2.22.2",
     "description": "",
     "main": "cjs/index.js",
     "module": "esm/index.js",
@@ -15,7 +15,7 @@
     "author": "taoyiyue@bytedance.com",
     "license": "ISC",
     "dependencies": {
-        "@arco-design/mobile-utils": "^2.12.3",
+        "@arco-design/mobile-utils": "^2.12.6",
         "@arco-design/transformable": "^1.0.0",
         "es6-promise": "^4.2.8",
         "lodash.throttle": "^4.1.1",
@@ -36,5 +36,5 @@
     "publishConfig": {
         "access": "public"
     },
-    "gitHead": "12927a2cee1ac841f4e96754c72e6cd95633e68a"
+    "gitHead": "52a29775d16e5e7d2b7645086644cf03aac6d71f"
 }

package/tokens/app/arcodesign/default/css-variables.less

@@ -517,9 +517,13 @@
     --notify-font-size: ~`pxtorem(14)`;
     --notify-min-height: ~`pxtorem(36)`;
     --steps-padding: ~`pxtorem(16)` 0;
-    --steps-tail-horizontal-padding: 0 ~`pxtorem(18)`;
-    --steps-tail-vertical-padding: ~`pxtorem(14)` 0;
-    --steps-tail-vertical-top: ~`pxtorem(9)`;
+    --steps-tail-border-radius: 2PX;
+    --steps-tail-horizontal-gutter: 18PX;
+    --steps-tail-vertical-gutter: 14PX;
+    --steps-tail-horizontal-padding: 0 var(--steps-tail-horizontal-gutter);
+    --steps-tail-vertical-padding: var(--steps-tail-vertical-gutter) 0;
+    --steps-tail-horizontal-left: 9PX;
+    --steps-tail-vertical-top: 9PX;
     --steps-tail-standard-size: 1PX;
     --steps-tail-standard-background: var(--line-color);
     --steps-tail-finish-background: var(--primary-color);

package/tokens/app/arcodesign/default/index.d.ts

@@ -516,8 +516,12 @@ export interface ArcodesignToken extends Record<string, string> {
     'notify-font-size': string;
     'notify-min-height': string;
     'steps-padding': string;
+    'steps-tail-border-radius': string;
+    'steps-tail-horizontal-gutter': string;
+    'steps-tail-vertical-gutter': string;
     'steps-tail-horizontal-padding': string;
     'steps-tail-vertical-padding': string;
+    'steps-tail-horizontal-left': string;
     'steps-tail-vertical-top': string;
     'steps-tail-standard-size': string;
     'steps-tail-standard-background': string;

package/tokens/app/arcodesign/default/index.js

@@ -528,9 +528,13 @@ var tokens = {
   "notify-font-size": "0.28rem",
   "notify-min-height": "0.72rem",
   "steps-padding": "0.32rem 0",
-  "steps-tail-horizontal-padding": "0 0.36rem",
-  "steps-tail-vertical-padding": "0.28rem 0",
-  "steps-tail-vertical-top": "0.18rem",
+  "steps-tail-border-radius": "2PX",
+  "steps-tail-horizontal-gutter": "18PX",
+  "steps-tail-vertical-gutter": "14PX",
+  "steps-tail-horizontal-padding": "0 18PX",
+  "steps-tail-vertical-padding": "14PX 0",
+  "steps-tail-horizontal-left": "9PX",
+  "steps-tail-vertical-top": "9PX",
   "steps-tail-standard-size": "1PX",
   "steps-tail-standard-background": "#e5e6eb",
   "steps-tail-finish-background": "#165dff",

package/tokens/app/arcodesign/default/index.json

@@ -6527,6 +6527,18 @@
             "en": "Custom icon color of Steps in processing state"
         }
     },
+    "stepsTailBorderRadius": {
+        "cssKey": "steps-tail-border-radius",
+        "desc": "steps 分割线圆角值",
+        "override": "",
+        "value": "2PX",
+        "jsValue": "2PX",
+        "staticValue": "2PX",
+        "localeDesc": {
+            "ch": "steps 分割线圆角值",
+            "en": "Border radius of steps dividing"
+        }
+    },
     "stepsTailFinishBackground": {
         "cssKey": "steps-tail-finish-background",
         "desc": "steps 步骤分割线完成态颜色",
@@ -6539,13 +6551,37 @@
             "en": "Steps dividing line color in finish state"
         }
     },
+    "stepsTailHorizontalGutter": {
+        "cssKey": "steps-tail-horizontal-gutter",
+        "desc": "steps 水平分割线与图标中心点的距离",
+        "override": "",
+        "value": "18PX",
+        "jsValue": "18PX",
+        "staticValue": "18PX",
+        "localeDesc": {
+            "ch": "steps 水平分割线与图标中心点的距离",
+            "en": "The distance between the horizontal dividing line and the center point of the icon"
+        }
+    },
+    "stepsTailHorizontalLeft": {
+        "cssKey": "steps-tail-horizontal-left",
+        "desc": "steps 水平分割线的向右偏移距离，一般是 stepsIconHeight 值的一半",
+        "override": "",
+        "value": "9PX",
+        "jsValue": "9PX",
+        "staticValue": "9PX",
+        "localeDesc": {
+            "ch": "steps 水平分割线的向右偏移距离，一般是 stepsIconHeight 值的一半",
+            "en": "The offset distance to the right of the horizontal dividing line of steps, generally half the value of stepsIconHeight"
+        }
+    },
     "stepsTailHorizontalPadding": {
         "cssKey": "steps-tail-horizontal-padding",
         "desc": "steps 水平分割线左右间距",
         "override": "",
-        "value": "0 ~`pxtorem(18)`",
-        "jsValue": "0 @getRem@18",
-        "staticValue": "0 0.36rem",
+        "value": "0 @steps-tail-horizontal-gutter",
+        "jsValue": "0 @global@stepsTailHorizontalGutter",
+        "staticValue": "0 18PX",
         "localeDesc": {
             "ch": "steps 水平分割线左右间距",
             "en": "Left and right spacing of the horizontal dividing line of Steps"
@@ -6575,13 +6611,25 @@
             "en": "Steps dividing line thickness"
         }
     },
+    "stepsTailVerticalGutter": {
+        "cssKey": "steps-tail-vertical-gutter",
+        "desc": "steps 垂直分割线与图标中心点的距离",
+        "override": "",
+        "value": "14PX",
+        "jsValue": "14PX",
+        "staticValue": "14PX",
+        "localeDesc": {
+            "ch": "steps 垂直分割线与图标中心点的距离",
+            "en": "The distance between the vertical dividing line and the center point of the icon"
+        }
+    },
     "stepsTailVerticalPadding": {
         "cssKey": "steps-tail-vertical-padding",
         "desc": "steps 垂直分割线上下间距",
         "override": "",
-        "value": "~`pxtorem(14)` 0",
-        "jsValue": "@getRem@14 0",
-        "staticValue": "0.28rem 0",
+        "value": "@steps-tail-vertical-gutter 0",
+        "jsValue": "@global@stepsTailVerticalGutter 0",
+        "staticValue": "14PX 0",
         "localeDesc": {
             "ch": "steps 垂直分割线上下间距",
             "en": "Left and right spacing of the vertical dividing line of Steps"
@@ -6591,12 +6639,12 @@
         "cssKey": "steps-tail-vertical-top",
         "desc": "steps 垂直分割线的向下偏移距离，一般是 stepsIconHeight 值的一半",
         "override": "",
-        "value": "~`pxtorem(9)`",
-        "jsValue": "@getRem@9",
-        "staticValue": "0.18rem",
+        "value": "9PX",
+        "jsValue": "9PX",
+        "staticValue": "9PX",
         "localeDesc": {
             "ch": "steps 垂直分割线的向下偏移距离，一般是 stepsIconHeight 值的一半",
-            "en": "Left and right spacing of the vertical dividing line of Steps"
+            "en": "The offset distance to the bottom of the vertical dividing line of steps, generally half the value of stepsIconHeight"
         }
     },
     "stepsTitleFontSize": {