@arco-design/mobile-react 2.21.3 → 2.22.2

package/esm/action-sheet/style/css/index.css

@@ -46,8 +46,8 @@
 .arco-action-sheet-title.android,
 .arco-action-sheet-title.system-android {
   font-weight: 400;
-  -webkit-text-stroke: 0.3PX #1d2129;
-  text-stroke: 0.3PX #1d2129;
+  -webkit-text-stroke: 0.3PX currentColor;
+  text-stroke: 0.3PX currentColor;
 }
 .arco-action-sheet-sub-title {
   color:  #86909c ;

package/esm/action-sheet/style/index.less

@@ -11,7 +11,7 @@
 
     &-title {
         .use-var(font-size, action-sheet-title-font-size);
-        .text-medium-var(font-color);
+        .text-medium();
     }
 
     &-sub-title {

package/esm/dialog/style/css/index.css

@@ -126,8 +126,8 @@
 .arco-dialog-header.ios.android,
 .arco-dialog-header.ios.system-android {
   font-weight: 400;
-  -webkit-text-stroke: 0.3PX #1d2129;
-  text-stroke: 0.3PX #1d2129;
+  -webkit-text-stroke: 0.3PX currentColor;
+  text-stroke: 0.3PX currentColor;
 }
 .arco-dialog-header.ios.only-title {
   padding-bottom:  0.4rem ;

package/esm/dialog/style/index.less

@@ -105,7 +105,7 @@
             .use-var(padding-right, dialog-ios-horizontal-padding);
             .use-var(font-size, dialog-header-ios-font-size);
             .use-var(line-height, dialog-header-ios-line-height);
-            .text-medium-var(dialog-header-ios-color);
+            .text-medium();
 
             &.only-title {
                 .use-var(padding-bottom, dialog-ios-vertical-padding);

package/esm/image-picker/index.js

@@ -166,7 +166,6 @@ var ImagePicker = /*#__PURE__*/forwardRef(function (props, ref) {
   var timeOutEvent;
 
   var handleTouchStart = function handleTouchStart(e, image, index) {
-    e.preventDefault();
     timeOutEvent = setTimeout(function () {
       timeOutEvent = 0;
       onLongPress == null ? void 0 : onLongPress(e, image, index);

package/esm/image-preview/index.d.ts

@@ -254,11 +254,7 @@ export declare function methodsGenerator<P extends ImagePreviewProps>(Comp: Reac
      */
     open: (config: Pick<P, Exclude<keyof P, "close">>) => {
         close: () => void;
-        update: (newConfig: Pick<P, Exclude<keyof P, "close">>) => void; /**
-         * 是否可循环滑动
-         * @en Whether it can be swiped circularly
-         * @default false
-         */
+        update: (newConfig: Pick<P, Exclude<keyof P, "close">>) => void;
     };
 };
 declare const _default: React.ForwardRefExoticComponent<ImagePreviewProps & React.RefAttributes<ImagePreviewRef>> & {
@@ -270,11 +266,7 @@ declare const _default: React.ForwardRefExoticComponent<ImagePreviewProps & Reac
      */
     open: (config: Pick<ImagePreviewProps & React.RefAttributes<ImagePreviewRef>, "style" | "ref" | "key" | "getContainer" | "className" | "onClose" | "onTouchMove" | "fit" | "loadingArea" | "errorArea" | "showLoading" | "showError" | "retryTime" | "staticLabel" | "onChange" | "onTouchEnd" | "onTouchStart" | "animateDurationSlide" | "loop" | "swipeable" | "renderIndicator" | "indicatorPos" | "showIndicator" | "hideSingleIndicator" | "spaceBetween" | "percentToChange" | "distanceToChange" | "speedToChange" | "lazyloadCount" | "onAfterChange" | "images" | "openIndex" | "displayDuration" | "replaceFallbackWhenLoaded" | "noselect" | "scrollBezier" | "swipeToClose" | "getMinScale" | "getMaxScale" | "getDoubleClickScale" | "getThumbBounds" | "onImageClick" | "onImageDoubleClick" | "onImageLongTap">) => {
         close: () => void;
-        update: (newConfig: Pick<ImagePreviewProps & React.RefAttributes<ImagePreviewRef>, "style" | "ref" | "key" | "getContainer" | "className" | "onClose" | "onTouchMove" | "fit" | "loadingArea" | "errorArea" | "showLoading" | "showError" | "retryTime" | "staticLabel" | "onChange" | "onTouchEnd" | "onTouchStart" | "animateDurationSlide" | "loop" | "swipeable" | "renderIndicator" | "indicatorPos" | "showIndicator" | "hideSingleIndicator" | "spaceBetween" | "percentToChange" | "distanceToChange" | "speedToChange" | "lazyloadCount" | "onAfterChange" | "images" | "openIndex" | "displayDuration" | "replaceFallbackWhenLoaded" | "noselect" | "scrollBezier" | "swipeToClose" | "getMinScale" | "getMaxScale" | "getDoubleClickScale" | "getThumbBounds" | "onImageClick" | "onImageDoubleClick" | "onImageLongTap">) => void; /**
-         * 是否可循环滑动
-         * @en Whether it can be swiped circularly
-         * @default false
-         */
+        update: (newConfig: Pick<ImagePreviewProps & React.RefAttributes<ImagePreviewRef>, "style" | "ref" | "key" | "getContainer" | "className" | "onClose" | "onTouchMove" | "fit" | "loadingArea" | "errorArea" | "showLoading" | "showError" | "retryTime" | "staticLabel" | "onChange" | "onTouchEnd" | "onTouchStart" | "animateDurationSlide" | "loop" | "swipeable" | "renderIndicator" | "indicatorPos" | "showIndicator" | "hideSingleIndicator" | "spaceBetween" | "percentToChange" | "distanceToChange" | "speedToChange" | "lazyloadCount" | "onAfterChange" | "images" | "openIndex" | "displayDuration" | "replaceFallbackWhenLoaded" | "noselect" | "scrollBezier" | "swipeToClose" | "getMinScale" | "getMaxScale" | "getDoubleClickScale" | "getThumbBounds" | "onImageClick" | "onImageDoubleClick" | "onImageLongTap">) => void;
     };
 };
 /**

package/esm/image-preview/methods.js

@@ -1,7 +1,6 @@
 import _extends from "@babel/runtime/helpers/extends";
-import React from 'react';
-import ReactDOM from 'react-dom';
 import { appendElementById, removeElement } from '@arco-design/mobile-utils';
+import { ReactDOMRender } from '../_helpers/render';
 export function open(Component) {
   return function (config) {
     var baseProps = _extends({
@@ -21,13 +20,8 @@ export function open(Component) {
 
     var leaving = false;
 
-    function render(props) {
-      ReactDOM.render( /*#__PURE__*/React.createElement(Component, _extends({}, props, {
-        getContainer: function getContainer() {
-          return div;
-        }
-      })), div);
-    }
+    var _ReactDOMRender = new ReactDOMRender(Component, div),
+        render = _ReactDOMRender.render;
 
     function update(newConfig) {
       dynamicProps = _extends({}, dynamicProps, newConfig || {});

package/esm/masking/index.d.ts

@@ -192,6 +192,11 @@ export declare function methodsGenerator<P extends OpenBaseProps>(Comp: React.Fu
     open: (config: Pick<P, Exclude<keyof P, "visible" | "close">> & {
         key?: string | undefined;
     }) => {
+        /**
+         * 点击蒙层是否关闭菜单
+         * @en Whether to click the mask to close the menu
+         * @default true
+         */
         close: () => void;
         update: (newConfig: Pick<P, Exclude<keyof P, "visible" | "close">> & {
             key?: string | undefined;
@@ -208,6 +213,11 @@ declare const _default: React.ForwardRefExoticComponent<MaskingProps & React.Ref
     open: (config: Pick<MaskingProps & React.RefAttributes<MaskingRef>, "ref" | "children" | "key" | "getContainer" | "mountOnEnter" | "unmountOnExit" | "className" | "onClose" | "contentAtCenter" | "maskClass" | "maskStyle" | "contentClass" | "contentStyle" | "maskTransitionType" | "contentTransitionType" | "maskTransitionTimeout" | "contentTransitionTimeout" | "maskClosable" | "animatingClosable" | "orientationDirection" | "preventBodyScroll" | "initialBodyOverflow" | "gestureOutOfControl" | "onOpen" | "onMaskClick" | "onTouchMove" | "onPreventTouchMove" | "getScrollContainer"> & {
         key?: string | undefined;
     }) => {
+        /**
+         * 点击蒙层是否关闭菜单
+         * @en Whether to click the mask to close the menu
+         * @default true
+         */
         close: () => void;
         update: (newConfig: Pick<MaskingProps & React.RefAttributes<MaskingRef>, "ref" | "children" | "key" | "getContainer" | "mountOnEnter" | "unmountOnExit" | "className" | "onClose" | "contentAtCenter" | "maskClass" | "maskStyle" | "contentClass" | "contentStyle" | "maskTransitionType" | "contentTransitionType" | "maskTransitionTimeout" | "contentTransitionTimeout" | "maskClosable" | "animatingClosable" | "orientationDirection" | "preventBodyScroll" | "initialBodyOverflow" | "gestureOutOfControl" | "onOpen" | "onMaskClick" | "onTouchMove" | "onPreventTouchMove" | "getScrollContainer"> & {
             key?: string | undefined;

package/esm/masking/methods.js

@@ -1,7 +1,6 @@
 import _extends from "@babel/runtime/helpers/extends";
-import React from 'react';
-import ReactDOM from 'react-dom';
 import { appendElementById, removeElement, nextTick } from '@arco-design/mobile-utils';
+import { ReactDOMRender } from '../_helpers/render';
 export function getOpenMethod(Component, containerId, normalize) {
   if (normalize === void 0) {
     normalize = function normalize(config) {
@@ -27,13 +26,8 @@ export function getOpenMethod(Component, containerId, normalize) {
 
     var leaving = false;
 
-    function render(props) {
-      ReactDOM.render( /*#__PURE__*/React.createElement(Component, _extends({}, props, {
-        getContainer: function getContainer() {
-          return div;
-        }
-      })), div);
-    }
+    var _ReactDOMRender = new ReactDOMRender(Component, div),
+        render = _ReactDOMRender.render;
 
     function update(newConfig) {
       dynamicProps = _extends({}, dynamicProps, normalize(newConfig));

package/esm/notify/methods.js

@@ -1,7 +1,6 @@
 import _extends from "@babel/runtime/helpers/extends";
 import { nextTick } from '@arco-design/mobile-utils';
-import React from 'react';
-import ReactDOM from 'react-dom';
+import { ReactDOMRender } from '../_helpers/render';
 export function notify(Component, type) {
   return function (originConfig) {
     var config = typeof originConfig === 'string' ? {
@@ -22,16 +21,16 @@ export function notify(Component, type) {
       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 destroy() {
       var onClose = config.onClose;
       onClose && onClose();
-      var unmountResult = ReactDOM.unmountComponentAtNode(div);
+      unmount();
 
-      if (unmountResult && div.parentNode) {
+      if (div.parentNode) {
         div.parentNode.removeChild(div);
       }
     }

package/esm/popover/hooks/useEvent.js

@@ -40,6 +40,7 @@ export var useEvent = function useEvent(props, wrapperRef, popoverInnerRef, visi
     onVisibleChange(false);
     window.clearTimeout(closeTimer.current);
     closeTimer.current = 0;
+    mayRemoveEventListenerOnBody();
   };
 
   var throttleHandleVerticalScroll = useMemo(function () {
@@ -59,7 +60,7 @@ export var useEvent = function useEvent(props, wrapperRef, popoverInnerRef, visi
     };
   }, [throttleHandleVerticalScroll, getVerticalScrollContainer, autoVerticalDirection, visibleRef]);
   var mayRemoveEventListenerOnBody = useCallback(function () {
-    document.body.removeEventListener('click', handleClickBody);
+    document.body.removeEventListener('click', handleClickBody, true);
     document.body.removeEventListener('touchstart', handleTouchBody);
     var el = getVerticalScrollContainer();
 
@@ -74,7 +75,6 @@ export var useEvent = function useEvent(props, wrapperRef, popoverInnerRef, visi
     // 仅处理子元素和气泡元素外的点击事件
     // @en Only handle click events outside of children elements and bubble elements
     if (!isContains(wrapperRef.current, e.target) && !isContains(((_popoverInnerRef$curr = popoverInnerRef.current) == null ? void 0 : _popoverInnerRef$curr.dom) || null, e.target)) {
-      // TODO: 这里仅阻止了react事件，react 18 将不再在document上挂事件，这里的stop会失效
       if (preventBodyClick) {
         e.stopPropagation();
         e.preventDefault();
@@ -100,13 +100,13 @@ export var useEvent = function useEvent(props, wrapperRef, popoverInnerRef, visi
     var handle = function handle(e) {
       e.stopPropagation();
       e.preventDefault();
-      document.body.removeEventListener('click', handle);
+      document.body.removeEventListener('click', handle, true);
       clearTimeout(preventRecentClickTimer);
     };
 
-    document.body.addEventListener('click', handle);
+    document.body.addEventListener('click', handle, true);
     preventRecentClickTimer = window.setTimeout(function () {
-      document.body.removeEventListener('click', handle);
+      document.body.removeEventListener('click', handle, true);
     }, 500);
   };
 
@@ -149,7 +149,7 @@ export var useEvent = function useEvent(props, wrapperRef, popoverInnerRef, visi
       var el = getVerticalScrollContainer();
       el && el.addEventListener('scroll', handleScrollBody);
     } else if (clickOtherToClose) {
-      document.body.addEventListener('click', handleClickBody);
+      document.body.addEventListener('click', handleClickBody, true);
     }
   };
   /**

package/esm/pull-refresh/android-pull-refresh.js

@@ -19,6 +19,7 @@ export var PullRefresh = /*#__PURE__*/forwardRef(function (props, ref) {
       locale = _useContext$locale === void 0 ? defaultLocale : _useContext$locale;
 
   var className = props.className,
+      style = props.style,
       children = props.children,
       _props$loosingText = props.loosingText,
       loosingText = _props$loosingText === void 0 ? /*#__PURE__*/React.createElement("div", {
@@ -255,6 +256,7 @@ export var PullRefresh = /*#__PURE__*/forwardRef(function (props, ref) {
     className: cls(prefixCls + "-pull-refresh all-border-box is-android", className, {
       'is-disabled': (disabled || !touching && useHideAsNestedScroll) && status !== PullRefreshStatus.Loading
     }),
+    style: style,
     ref: domRef
   }, /*#__PURE__*/React.createElement("div", {
     className: cls(prefixCls + "-pull-refresh-place"),

package/esm/pull-refresh/ios-pull-refresh.js

@@ -16,6 +16,7 @@ export var PullRefresh = /*#__PURE__*/forwardRef(function (props, ref) {
 
   var animationRef = useRef(0);
   var className = props.className,
+      style = props.style,
       children = props.children,
       _props$loadingText = props.loadingText,
       loadingText = _props$loadingText === void 0 ? /*#__PURE__*/React.createElement("div", {
@@ -195,9 +196,9 @@ export var PullRefresh = /*#__PURE__*/forwardRef(function (props, ref) {
       'is-disabled': disabled || !touching && useHideAsNestedScroll
     }),
     ref: domRef,
-    style: contentHeight > 0 ? {
+    style: contentHeight > 0 ? _extends({
       height: contentHeight
-    } : {}
+    }, style || {}) : style
   }, /*#__PURE__*/React.createElement("div", {
     className: cls(prefixCls + "-pull-refresh-content-wrapper")
   }, /*#__PURE__*/React.createElement("div", {

package/esm/pull-refresh/model.d.ts

@@ -1,4 +1,4 @@
-import type { ReactNode } from 'react';
+import type { CSSProperties, ReactNode } from 'react';
 export interface PullRefreshRef {
     /**
      * 最外层元素 DOM
@@ -32,9 +32,13 @@ export interface PullRefreshBasicProps {
     /**
      * 样式类名
      * @en Custom classname
-     * @default ""
      */
     className?: string;
+    /**
+     * 自定义样式
+     * @en Custom style
+     */
+    style?: CSSProperties;
     /**
      * 是否禁用
      * @en Whether to be disabled

package/esm/steps/demo/style/css/mobile.css

@@ -30,7 +30,10 @@
 #demo-steps #demo-order-7 .process-title-color-with-config {
   color: #FFB400;
 }
-#demo-steps #demo-order-7 .finish-tail-color-with-config:after {
+#demo-steps #demo-order-7 .finish-tail-color-with-config::before,
+#demo-steps #demo-order-7 .finish-tail-color-with-config::after,
+#demo-steps #demo-order-7 .process-tail-color-with-config::before,
+#demo-steps #demo-order-7 .error-tail-color-with-config::before {
   background: #FFB400;
 }
 #demo-steps #demo-order-8 .demo-svg .arco-steps-item-custom-icon {
@@ -57,7 +60,10 @@
 #demo-steps #demo-order-8 .demo-svg .process-title-color-with-config {
   color: #165DFF;
 }
-#demo-steps #demo-order-8 .demo-svg .finish-tail-color-with-config:after {
+#demo-steps #demo-order-8 .demo-svg .finish-tail-color-with-config::before,
+#demo-steps #demo-order-8 .demo-svg .finish-tail-color-with-config::after,
+#demo-steps #demo-order-8 .demo-svg .process-tail-color-with-config::before,
+#demo-steps #demo-order-8 .demo-svg .error-tail-color-with-config::before {
   background: #165DFF;
 }
 #demo-steps #demo-order-8 .demo-svg .arco-steps-item-custom-icon {

package/esm/steps/index.d.ts

@@ -1,7 +1,7 @@
 import React from 'react';
 import { StepsProps, StepsRef } from './type';
 export * from './type';
-export declare const StepsContext: React.Context<Pick<StepsProps, "direction" | "status" | "current" | "iconType"> & {
+export declare const StepsContext: React.Context<Pick<StepsProps, "direction" | "status" | "current" | "align" | "iconType"> & {
     index?: number | undefined;
     changeIndex: (newIndex: number) => void;
 }>;

package/esm/steps/index.js

@@ -15,6 +15,7 @@ var Steps = /*#__PURE__*/forwardRef(function (props, ref) {
       children = props.children,
       _props$direction = props.direction,
       direction = _props$direction === void 0 ? 'horizontal' : _props$direction,
+      userSetAlign = props.align,
       _props$iconType = props.iconType,
       iconType = _props$iconType === void 0 ? 'number' : _props$iconType,
       current = props.current,
@@ -25,6 +26,8 @@ var Steps = /*#__PURE__*/forwardRef(function (props, ref) {
       items = props.items,
       onClick = props.onClick,
       onChange = props.onChange;
+  var defaultAlign = direction === 'vertical' ? 'start' : 'center';
+  var align = userSetAlign !== void 0 ? userSetAlign : defaultAlign;
 
   var _useState = useState(Number(defaultIndex)),
       innerIndex = _useState[0],
@@ -60,11 +63,12 @@ var Steps = /*#__PURE__*/forwardRef(function (props, ref) {
         direction: direction,
         index: index,
         status: activeIndex === index ? status : void 0,
+        align: align,
         changeIndex: changeIndex
       },
       key: index
     }, child);
-  }, [iconType, activeIndex, direction]);
+  }, [iconType, activeIndex, direction, align]);
   return /*#__PURE__*/React.createElement(ContextLayout, null, function (_ref) {
     var prefixCls = _ref.prefixCls;
     return /*#__PURE__*/React.createElement("div", {

package/esm/steps/step.js

@@ -15,9 +15,11 @@ var Step = /*#__PURE__*/forwardRef(function (props, ref) {
       _useContext$index = _useContext.index,
       index = _useContext$index === void 0 ? 0 : _useContext$index,
       contextStatus = _useContext.status,
+      contextAlign = _useContext.align,
       changeIndex = _useContext.changeIndex;
 
   var status = props.status || contextStatus;
+  var align = props.align || contextAlign;
   var domRef = useRef(null);
   useImperativeHandle(ref, function () {
     return {
@@ -56,12 +58,12 @@ var Step = /*#__PURE__*/forwardRef(function (props, ref) {
     var prefixCls = _ref.prefixCls;
     return /*#__PURE__*/React.createElement("div", {
       ref: domRef,
-      className: cls(prefixCls + "-steps-item", currentStatus, direction, iconType),
+      className: cls(prefixCls + "-steps-item", prefixCls + "-steps-item-align-" + align, currentStatus, direction, iconType),
       onClick: function onClick() {
         return changeIndex(index);
       }
     }, /*#__PURE__*/React.createElement("div", {
-      className: cls(prefixCls + "-steps-item-tail", currentStatus + "-tail-color-with-config")
+      className: cls(prefixCls + "-steps-item-tail", prefixCls + "-steps-item-tail-status-" + currentStatus, prefixCls + "-steps-item-tail-align-" + align, currentStatus + "-tail-color-with-config")
     }), icon ? /*#__PURE__*/React.createElement("div", {
       className: cls(prefixCls + "-steps-item-custom-icon", currentStatus + "-custom-icon-bg-color-with-config")
     }, icon) : /*#__PURE__*/React.createElement("div", {
@@ -69,7 +71,7 @@ var Step = /*#__PURE__*/forwardRef(function (props, ref) {
     }, iconType === 'number' ? renderNumIcon(prefixCls) : /*#__PURE__*/React.createElement("span", {
       className: cls(prefixCls + "-steps-item-icon-dot")
     })), title || description ? /*#__PURE__*/React.createElement("div", {
-      className: cls(prefixCls + "-steps-item-content")
+      className: cls(prefixCls + "-steps-item-content", prefixCls + "-steps-item-content-align-" + align)
     }, title ? /*#__PURE__*/React.createElement("div", {
       className: cls(prefixCls + "-steps-item-title", currentStatus + "-title-color-with-config")
     }, title) : null, description ? /*#__PURE__*/React.createElement("div", {

package/esm/steps/style/css/index.css

@@ -18,17 +18,23 @@
   -webkit-box-direction: normal;
   -webkit-flex-direction: column;
           flex-direction: column;
+}
+.arco-steps-item-align-center {
   -webkit-box-align: center;
   -webkit-align-items: center;
           align-items: center;
 }
-.arco-steps-item.vertical {
+.arco-steps-item-align-start {
   -webkit-box-align: start;
   -webkit-align-items: flex-start;
           align-items: flex-start;
 }
-.arco-steps-item:last-child .arco-steps-item-tail:after {
-  display: none;
+.arco-steps-item-align-center.vertical {
+  padding-bottom:  0.5rem ;
+}
+.arco-steps-item:first-child .arco-steps-item-tail::before,
+.arco-steps-item:last-child .arco-steps-item-tail::after {
+  visibility: hidden;
 }
 .arco-steps-item-tail {
   position: absolute;
@@ -44,33 +50,81 @@
 }
 .horizontal .arco-steps-item-tail {
   width: 100%;
-  left: 50%;
   height:  18PX ;
-  padding:  0 0.36rem ;
 }
-.horizontal .arco-steps-item-tail:after {
+.horizontal .arco-steps-item-tail::before,
+.horizontal .arco-steps-item-tail::after {
+  height:  1PX ;
+}
+.horizontal .arco-steps-item-tail-align-start {
+  left:  9PX ;
+  padding:  0 18PX ;
+}
+.horizontal .arco-steps-item-tail-align-start::after {
   content: "";
-  display: inline-block;
   width: 100%;
-  height:  1PX ;
-  background:  #e5e6eb ;
-  border-radius: 0.04rem;
+  border-radius:  2PX ;
+}
+.horizontal .arco-steps-item-tail-align-center::before,
+.horizontal .arco-steps-item-tail-align-center::after {
+  content: "";
+  width: 50%;
+}
+.horizontal .arco-steps-item-tail-align-center::before {
+  margin-right:  18PX ;
+  border-top-right-radius:  2PX ;
+  border-bottom-right-radius:  2PX ;
+}
+.horizontal .arco-steps-item-tail-align-center::after {
+  margin-left:  18PX ;
+  border-top-left-radius:  2PX ;
+  border-bottom-left-radius:  2PX ;
 }
 .vertical .arco-steps-item-tail {
   height: 100%;
   width:  18PX ;
-  top:  0.18rem ;
-  padding:  0.28rem 0 ;
+  -webkit-box-orient: vertical;
+  -webkit-box-direction: normal;
+  -webkit-flex-direction: column;
+          flex-direction: column;
 }
-.vertical .arco-steps-item-tail:after {
+.vertical .arco-steps-item-tail::before,
+.vertical .arco-steps-item-tail::after {
+  width:  1PX ;
+}
+.vertical .arco-steps-item-tail-align-start {
+  top:  9PX ;
+  padding:  14PX 0 ;
+}
+.vertical .arco-steps-item-tail-align-start::after {
   content: "";
-  display: inline-block;
   height: 100%;
-  width:  1PX ;
+  border-radius:  2PX ;
+}
+.vertical .arco-steps-item-tail-align-center::before,
+.vertical .arco-steps-item-tail-align-center::after {
+  content: "";
+  height: 50%;
+}
+.vertical .arco-steps-item-tail-align-center::before {
+  margin-bottom:  14PX ;
+  border-bottom-left-radius:  2PX ;
+  border-bottom-right-radius:  2PX ;
+}
+.vertical .arco-steps-item-tail-align-center::after {
+  margin-top:  14PX ;
+  border-top-left-radius:  2PX ;
+  border-top-right-radius:  2PX ;
+}
+.arco-steps-item-tail::after,
+.arco-steps-item-tail::before {
+  display: inline-block;
   background:  #e5e6eb ;
-  border-radius: 0.04rem;
 }
-.finish .arco-steps-item-tail:after {
+.arco-steps-item-tail-status-finish::before,
+.arco-steps-item-tail-status-finish::after,
+.arco-steps-item-tail-align-center.arco-steps-item-tail-status-process::before,
+.arco-steps-item-tail-align-center.arco-steps-item-tail-status-error::before {
   background:  #165dff ;
 }
 .arco-steps-item-custom-icon,
@@ -122,8 +176,8 @@
 .arco-steps-item-icon-num.android,
 .arco-steps-item-icon-num.system-android {
   font-weight: 400;
-  -webkit-text-stroke: 0.3PX #86909c;
-  text-stroke: 0.3PX #86909c;
+  -webkit-text-stroke: 0.3PX currentColor;
+  text-stroke: 0.3PX currentColor;
 }
 .process .arco-steps-item-icon-num {
   color:  #FFFFFF ;
@@ -147,18 +201,19 @@
   border: none;
   background:  #165dff ;
 }
-.arco-steps-item-content {
-  text-align: center;
-}
 .horizontal .arco-steps-item-content {
   margin-top:  0.1rem ;
 }
+.horizontal .arco-steps-item-content-align-center {
+  text-align: center;
+}
 .vertical .arco-steps-item-content {
   margin-left:  0.26rem ;
-  text-align: left;
   -webkit-box-flex: 1;
   -webkit-flex: 1;
           flex: 1;
+}
+.vertical .arco-steps-item-content-align-start {
   padding-bottom:  0.5rem ;
 }
 .arco-steps-item-title {