@pisell/materials 1.0.987 → 1.0.988

package/es/components/PisellScrollView/hooks/useScrollState.js

@@ -10,76 +10,104 @@ function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o =
 function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) arr2[i] = arr[i]; return arr2; }
 function _iterableToArrayLimit(r, l) { var t = null == r ? null : "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"]; if (null != t) { var e, n, i, u, a = [], f = !0, o = !1; try { if (i = (t = t.call(r)).next, 0 === l) { if (Object(t) !== t) return; f = !1; } else for (; !(f = (e = i.call(t)).done) && (a.push(e.value), a.length !== l); f = !0); } catch (r) { o = !0, n = r; } finally { try { if (!f && null != t.return && (u = t.return(), Object(u) !== u)) return; } finally { if (o) throw n; } } return a; } }
 function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
-import { useState, useEffect, useCallback } from 'react';
+import { useState, useEffect, useCallback, useRef } from 'react';
+/**
+ * 防抖函数
+ */
+var debounce = function debounce(fn, delay) {
+  var timeoutId = null;
+  return function () {
+    for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
+      args[_key] = arguments[_key];
+    }
+    if (timeoutId) {
+      clearTimeout(timeoutId);
+    }
+    timeoutId = setTimeout(function () {
+      fn.apply(void 0, args);
+      timeoutId = null;
+    }, delay);
+  };
+};
+
+/**
+ * 滚动状态管理 Hook
+ * @description 管理滚动容器的状态，包括滚动位置、溢出检测等
+ */
 export var useScrollState = function useScrollState(_ref) {
-  var _containerRef$current, _containerRef$current2, _containerRef$current3, _containerRef$current4, _containerRef$current6, _containerRef$current7, _containerRef$current8, _containerRef$current9;
   var containerRef = _ref.containerRef,
     overflow = _ref.overflow;
-  var _useState = useState({
-      scrollTop: 0,
-      scrollLeft: 0,
-      percentY: 0,
-      percentX: 0,
-      scrollHeight: ((_containerRef$current = containerRef.current) === null || _containerRef$current === void 0 ? void 0 : _containerRef$current.scrollHeight) || 0,
-      scrollWidth: ((_containerRef$current2 = containerRef.current) === null || _containerRef$current2 === void 0 ? void 0 : _containerRef$current2.scrollWidth) || 0,
-      clientHeight: ((_containerRef$current3 = containerRef.current) === null || _containerRef$current3 === void 0 ? void 0 : _containerRef$current3.clientHeight) || 0,
-      clientWidth: ((_containerRef$current4 = containerRef.current) === null || _containerRef$current4 === void 0 ? void 0 : _containerRef$current4.clientWidth) || 0,
-      direction: null,
-      isScrollToTop: overflow === 'y' ? true : false,
-      isScrollToBottom: false,
-      isScrollToLeft: overflow === 'x' ? true : false,
-      isScrollToRight: false,
-      isOverflows: false
+  // 初始化滚动状态
+  var _useState = useState(function () {
+      return {
+        scrollTop: 0,
+        scrollLeft: 0,
+        percentY: 0,
+        percentX: 0,
+        scrollHeight: 0,
+        scrollWidth: 0,
+        clientHeight: 0,
+        clientWidth: 0,
+        direction: null,
+        isScrollToTop: overflow === 'y' || overflow === 'both',
+        isScrollToBottom: false,
+        isScrollToLeft: overflow === 'x' || overflow === 'both',
+        isScrollToRight: false,
+        isOverflows: false
+      };
     }),
     _useState2 = _slicedToArray(_useState, 2),
     scrollState = _useState2[0],
     setScrollState = _useState2[1];
-  useEffect(function () {
-    if (!containerRef.current) {
-      return;
-    }
-    var _containerRef$current5 = containerRef.current,
-      scrollHeight = _containerRef$current5.scrollHeight,
-      clientHeight = _containerRef$current5.clientHeight,
-      scrollWidth = _containerRef$current5.scrollWidth,
-      clientWidth = _containerRef$current5.clientWidth;
-    var isOverflows = scrollHeight > clientHeight || scrollWidth > clientWidth;
-    setScrollState(function (prev) {
-      return _objectSpread(_objectSpread({}, prev), {}, {
-        isOverflows: isOverflows
-      });
-    });
-  }, [(_containerRef$current6 = containerRef.current) === null || _containerRef$current6 === void 0 ? void 0 : _containerRef$current6.scrollWidth, (_containerRef$current7 = containerRef.current) === null || _containerRef$current7 === void 0 ? void 0 : _containerRef$current7.scrollHeight, (_containerRef$current8 = containerRef.current) === null || _containerRef$current8 === void 0 ? void 0 : _containerRef$current8.clientHeight, (_containerRef$current9 = containerRef.current) === null || _containerRef$current9 === void 0 ? void 0 : _containerRef$current9.clientWidth]);
-  var updateScrollState = useCallback(function () {
+
+  // 使用 ref 存储是否已挂载，避免在组件卸载后更新状态
+  var isMountedRef = useRef(true);
+  // 存储 ResizeObserver 实例
+  var resizeObserverRef = useRef(null);
+
+  /**
+   * 计算并更新滚动状态
+   */
+  var calculateScrollState = useCallback(function () {
+    var prevState = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : null;
     var container = containerRef.current;
-    if (!container) return;
-    var scrollTop = container.scrollTop,
-      scrollLeft = container.scrollLeft,
-      scrollHeight = container.scrollHeight,
-      scrollWidth = container.scrollWidth,
-      clientHeight = container.clientHeight,
-      clientWidth = container.clientWidth;
-    var isScrollToTop = scrollTop <= 0;
-    var isScrollToBottom = scrollTop + clientHeight >= scrollHeight;
-    var isScrollToLeft = scrollLeft <= 0;
-    var isScrollToRight = scrollLeft + clientWidth >= scrollWidth;
-    setScrollState(function (prev) {
-      // 计算方向
+    if (!container) return null;
+    try {
+      var scrollTop = container.scrollTop,
+        scrollLeft = container.scrollLeft,
+        scrollHeight = container.scrollHeight,
+        scrollWidth = container.scrollWidth,
+        clientHeight = container.clientHeight,
+        clientWidth = container.clientWidth;
+
+      // 计算是否溢出
+      var isOverflows = scrollHeight > clientHeight || scrollWidth > clientWidth;
+
+      // 计算边界状态
+      var isScrollToTop = scrollTop <= 0;
+      var isScrollToBottom = scrollTop + clientHeight >= scrollHeight - 1; // -1 处理浮点误差
+      var isScrollToLeft = scrollLeft <= 0;
+      var isScrollToRight = scrollLeft + clientWidth >= scrollWidth - 1;
+
+      // 计算滚动方向
       var direction = null;
-      if (Math.abs(scrollTop - prev.scrollTop) > Math.abs(scrollLeft - prev.scrollLeft)) {
-        direction = scrollTop > prev.scrollTop ? 'down' : 'up';
-      } else if (scrollLeft !== prev.scrollLeft) {
-        direction = scrollLeft > prev.scrollLeft ? 'right' : 'left';
-      } else {
-        direction = prev.direction;
+      if (prevState) {
+        var deltaY = Math.abs(scrollTop - prevState.scrollTop);
+        var deltaX = Math.abs(scrollLeft - prevState.scrollLeft);
+        if (deltaY > deltaX && deltaY > 0) {
+          direction = scrollTop > prevState.scrollTop ? 'down' : 'up';
+        } else if (deltaX > 0) {
+          direction = scrollLeft > prevState.scrollLeft ? 'right' : 'left';
+        } else {
+          direction = prevState.direction;
+        }
       }
 
-      // 计算百分比
-      var maxScrollTop = scrollHeight - clientHeight;
-      var maxScrollLeft = scrollWidth - clientWidth;
+      // 计算滚动百分比
+      var maxScrollTop = Math.max(0, scrollHeight - clientHeight);
+      var maxScrollLeft = Math.max(0, scrollWidth - clientWidth);
       var percentY = maxScrollTop > 0 ? scrollTop / maxScrollTop * 100 : 0;
       var percentX = maxScrollLeft > 0 ? scrollLeft / maxScrollLeft * 100 : 0;
-      var isOverflows = scrollHeight > clientHeight || scrollWidth > clientWidth;
       return {
         scrollTop: scrollTop,
         scrollLeft: scrollLeft,
@@ -96,8 +124,135 @@ export var useScrollState = function useScrollState(_ref) {
         isScrollToRight: isScrollToRight,
         isOverflows: isOverflows
       };
-    });
+    } catch (error) {
+      console.warn('[useScrollState] 计算滚动状态时出错:', error);
+      return null;
+    }
   }, [containerRef]);
+
+  /**
+   * 更新滚动状态（用于滚动事件）
+   */
+  var updateScrollState = useCallback(function () {
+    if (!isMountedRef.current) return;
+    setScrollState(function (prev) {
+      var newState = calculateScrollState(prev);
+      return newState || prev;
+    });
+  }, [calculateScrollState]);
+
+  /**
+   * 更新溢出状态（用于尺寸变化）
+   */
+  var updateOverflowState = useCallback(function () {
+    if (!isMountedRef.current) return;
+    var newState = calculateScrollState(null);
+    if (newState) {
+      setScrollState(function (prev) {
+        return _objectSpread(_objectSpread({}, prev), {}, {
+          scrollHeight: newState.scrollHeight,
+          scrollWidth: newState.scrollWidth,
+          clientHeight: newState.clientHeight,
+          clientWidth: newState.clientWidth,
+          isOverflows: newState.isOverflows,
+          isScrollToTop: newState.isScrollToTop,
+          isScrollToBottom: newState.isScrollToBottom,
+          isScrollToLeft: newState.isScrollToLeft,
+          isScrollToRight: newState.isScrollToRight
+        });
+      });
+    }
+  }, [calculateScrollState]);
+
+  // 监听容器尺寸变化
+  useEffect(function () {
+    isMountedRef.current = true;
+    var container = containerRef.current;
+    if (!container) return;
+
+    // 防抖处理尺寸变化回调
+    var debouncedUpdateOverflow = debounce(updateOverflowState, 50);
+
+    // 初始化状态
+    updateOverflowState();
+
+    // 检查 ResizeObserver 是否可用
+    if (typeof ResizeObserver === 'undefined') {
+      // 降级方案：使用 window resize 事件
+      var handleResize = function handleResize() {
+        return debouncedUpdateOverflow();
+      };
+      window.addEventListener('resize', handleResize);
+      return function () {
+        isMountedRef.current = false;
+        window.removeEventListener('resize', handleResize);
+      };
+    }
+    try {
+      // 创建 ResizeObserver
+      resizeObserverRef.current = new ResizeObserver(function (entries) {
+        // 确保只在有效的尺寸变化时更新
+        if (entries.length > 0 && isMountedRef.current) {
+          debouncedUpdateOverflow();
+        }
+      });
+
+      // 监听容器本身
+      resizeObserverRef.current.observe(container);
+
+      // 监听直接子元素
+      var children = container.children;
+      for (var i = 0; i < children.length; i++) {
+        resizeObserverRef.current.observe(children[i]);
+      }
+
+      // 使用 MutationObserver 监听子元素变化
+      var mutationObserver = new MutationObserver(function (mutations) {
+        if (!isMountedRef.current || !resizeObserverRef.current) return;
+        mutations.forEach(function (mutation) {
+          // 新增的子元素添加监听
+          mutation.addedNodes.forEach(function (node) {
+            if (node instanceof Element) {
+              var _resizeObserverRef$cu;
+              (_resizeObserverRef$cu = resizeObserverRef.current) === null || _resizeObserverRef$cu === void 0 || _resizeObserverRef$cu.observe(node);
+            }
+          });
+        });
+
+        // 子元素变化后更新溢出状态
+        debouncedUpdateOverflow();
+      });
+      mutationObserver.observe(container, {
+        childList: true,
+        subtree: false
+      });
+
+      // 监听 window resize 作为补充
+      var handleWindowResize = function handleWindowResize() {
+        return debouncedUpdateOverflow();
+      };
+      window.addEventListener('resize', handleWindowResize);
+      return function () {
+        var _resizeObserverRef$cu2;
+        isMountedRef.current = false;
+        (_resizeObserverRef$cu2 = resizeObserverRef.current) === null || _resizeObserverRef$cu2 === void 0 || _resizeObserverRef$cu2.disconnect();
+        resizeObserverRef.current = null;
+        mutationObserver.disconnect();
+        window.removeEventListener('resize', handleWindowResize);
+      };
+    } catch (error) {
+      console.warn('[useScrollState] 初始化 ResizeObserver 失败:', error);
+      // 降级方案
+      var _handleResize = function _handleResize() {
+        return debouncedUpdateOverflow();
+      };
+      window.addEventListener('resize', _handleResize);
+      return function () {
+        isMountedRef.current = false;
+        window.removeEventListener('resize', _handleResize);
+      };
+    }
+  }, [containerRef, updateOverflowState]);
   return {
     scrollState: scrollState,
     updateScrollState: updateScrollState

package/es/components/PisellSteps/PisellSteps.js

@@ -1,5 +1,5 @@
 function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); }
-var _excluded = ["type", "current", "defaultCurrent", "direction", "size", "status", "initial", "items", "percent", "labelPlacement", "responsive", "onChange", "className", "style", "progressDot", "clickable", "allowClickFinished", "showProgressPercent", "iconSize", "iconColor", "connectorStyle", "connectorPosition", "animated", "gridLayout", "gridColumns", "itemLayout", "itemGap", "enableAnchor", "anchorContainer", "mobileMode", "mobileBreakpoint", "__designMode", "__id", "other"];
+var _excluded = ["type", "current", "defaultCurrent", "direction", "size", "status", "initial", "items", "labelPlacement", "responsive", "onChange", "className", "style", "progressDot", "clickable", "allowClickFinished", "gridLayout", "gridColumns", "itemGap", "enableAnchor", "anchorContainer", "mobileMode", "mobileBreakpoint", "enableScrollMode", "scrollActionsConfig", "__designMode", "__id", "other"];
 function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
 function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
 function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
@@ -19,6 +19,7 @@ import React, { useMemo } from 'react';
 import "./PisellSteps.less";
 import { useStepsState, useStepClick, useAnchor, useResponsive } from "./hooks";
 import { getStepStatus, mergeStepClassName } from "./utils";
+import { PisellScrollView } from "../PisellScrollView";
 
 /**
  * PisellSteps 步骤条组件
@@ -45,7 +46,6 @@ var PisellSteps = function PisellSteps(_ref) {
     initial = _ref$initial === void 0 ? 0 : _ref$initial,
     _ref$items = _ref.items,
     items = _ref$items === void 0 ? [] : _ref$items,
-    percent = _ref.percent,
     _ref$labelPlacement = _ref.labelPlacement,
     labelPlacement = _ref$labelPlacement === void 0 ? 'horizontal' : _ref$labelPlacement,
     _ref$responsive = _ref.responsive,
@@ -58,20 +58,9 @@ var PisellSteps = function PisellSteps(_ref) {
     clickable = _ref$clickable === void 0 ? false : _ref$clickable,
     _ref$allowClickFinish = _ref.allowClickFinished,
     allowClickFinished = _ref$allowClickFinish === void 0 ? true : _ref$allowClickFinish,
-    _ref$showProgressPerc = _ref.showProgressPercent,
-    showProgressPercent = _ref$showProgressPerc === void 0 ? false : _ref$showProgressPerc,
-    iconSize = _ref.iconSize,
-    iconColor = _ref.iconColor,
-    connectorStyle = _ref.connectorStyle,
-    _ref$connectorPositio = _ref.connectorPosition,
-    connectorPosition = _ref$connectorPositio === void 0 ? 'center' : _ref$connectorPositio,
-    _ref$animated = _ref.animated,
-    animated = _ref$animated === void 0 ? true : _ref$animated,
     _ref$gridLayout = _ref.gridLayout,
     gridLayout = _ref$gridLayout === void 0 ? false : _ref$gridLayout,
     gridColumns = _ref.gridColumns,
-    _ref$itemLayout = _ref.itemLayout,
-    itemLayout = _ref$itemLayout === void 0 ? 'horizontal' : _ref$itemLayout,
     itemGap = _ref.itemGap,
     _ref$enableAnchor = _ref.enableAnchor,
     enableAnchor = _ref$enableAnchor === void 0 ? false : _ref$enableAnchor,
@@ -80,6 +69,9 @@ var PisellSteps = function PisellSteps(_ref) {
     mobileMode = _ref$mobileMode === void 0 ? 'full' : _ref$mobileMode,
     _ref$mobileBreakpoint = _ref.mobileBreakpoint,
     mobileBreakpoint = _ref$mobileBreakpoint === void 0 ? 744 : _ref$mobileBreakpoint,
+    _ref$enableScrollMode = _ref.enableScrollMode,
+    enableScrollMode = _ref$enableScrollMode === void 0 ? false : _ref$enableScrollMode,
+    scrollActionsConfig = _ref.scrollActionsConfig,
     __designMode = _ref.__designMode,
     __id = _ref.__id,
     other = _ref.other,
@@ -106,18 +98,30 @@ var PisellSteps = function PisellSteps(_ref) {
     return false;
   }, [mobileMode, isMobile]);
 
+  // 确保 items 始终是数组
+  var safeItems = useMemo(function () {
+    if (!items) return [];
+    if (!Array.isArray(items)) return [];
+    return items;
+  }, [items]);
+
   // 获取当前步骤信息（用于移动端显示）
   var currentStepItem = useMemo(function () {
-    var visibleItems = items.filter(function (item) {
+    var visibleItems = safeItems.filter(function (item) {
       return !item.hidden;
     });
-    return visibleItems[currentStep - initial] || null;
-  }, [items, currentStep, initial]);
+    var adjustedIndex = currentStep - initial;
+    // 确保索引在有效范围内
+    if (adjustedIndex < 0 || adjustedIndex >= visibleItems.length) {
+      return null;
+    }
+    return visibleItems[adjustedIndex] || null;
+  }, [safeItems, currentStep, initial]);
 
   // 处理步骤数据
   var processedItems = useMemo(function () {
     // 过滤隐藏的步骤
-    var visibleItems = items.filter(function (item) {
+    var visibleItems = safeItems.filter(function (item) {
       return !item.hidden;
     });
 
@@ -139,7 +143,10 @@ var PisellSteps = function PisellSteps(_ref) {
     }
 
     // 处理每个步骤项
-    return visibleItems.map(function (item, index) {
+    return visibleItems.filter(function (item) {
+      return item != null;
+    }) // 过滤掉 null 或 undefined 的项
+    .map(function (item, index) {
       var adjustedIndex = index + initial;
 
       // 计算步骤状态
@@ -173,47 +180,93 @@ var PisellSteps = function PisellSteps(_ref) {
         onClick: clickable || item.onClick ? handleClick : undefined
       });
     });
-  }, [items, currentStep, initial, status, clickable, handleStepClick, __designMode]);
+  }, [safeItems, currentStep, initial, status, clickable, handleStepClick, __designMode]);
 
   // 合并样式类名
   var wrapperClassName = useMemo(function () {
     var classes = ['pisell-steps'];
     if (className) classes.push(className);
-    if (type !== 'default') classes.push("pisell-steps-".concat(type));
+    // type 只支持 'default' 和 'navigation'，dot 模式通过 progressDot 控制
+    if (type === 'navigation') classes.push('pisell-steps-navigation');
+    // 如果设置了 progressDot，添加 dot 样式类
+    if (progressDot) classes.push('pisell-steps-dot');
     if (size !== 'default') classes.push("pisell-steps-".concat(size));
     if (direction === 'vertical') classes.push('pisell-steps-vertical');
     if (responsive) classes.push('pisell-steps-responsive');
-    if (animated) classes.push('pisell-steps-animated');
     if (clickable) classes.push('pisell-steps-clickable');
     if (gridLayout) classes.push('pisell-steps-grid-layout');
-    if (connectorPosition !== 'center') classes.push("pisell-steps-connector-".concat(connectorPosition));
-    if (itemLayout === 'vertical') classes.push('pisell-steps-item-vertical');
+    // 如果设置了 itemGap，添加标记类名
+    if (itemGap !== undefined && itemGap !== null) {
+      classes.push('pisell-steps-has-item-gap');
+    }
+    // labelPlacement 通过 antd Steps 的 labelPlacement 属性控制，不需要额外的类名
+
     return classes.join(' ');
-  }, [className, type, size, direction, responsive, animated, clickable, gridLayout, connectorPosition, itemLayout]);
+  }, [className, type, progressDot, size, direction, responsive, clickable, gridLayout, itemGap]);
 
   // 合并自定义样式
   var wrapperStyle = useMemo(function () {
     var customStyle = _objectSpread({}, style);
-    if (iconSize) {
-      customStyle['--pisell-steps-icon-size'] = "".concat(iconSize, "px");
-    }
-    if (iconColor) {
-      customStyle['--pisell-steps-icon-color'] = iconColor;
-    }
-    if (itemGap) {
+
+    // itemGap 用于控制图标和文本之间的间距
+    // 只有当 itemGap 有值时才设置 CSS 变量，否则保持 antd 原样式
+    if (itemGap !== undefined && itemGap !== null) {
       customStyle['--pisell-steps-item-gap'] = "".concat(itemGap, "px");
+      // 添加标记类名，用于样式选择器
+      customStyle['--pisell-steps-has-item-gap'] = '1';
     }
     if (gridColumns && gridLayout) {
       customStyle['--pisell-steps-grid-columns'] = gridColumns;
     }
     return customStyle;
-  }, [style, iconSize, iconColor, itemGap, gridColumns, gridLayout]);
+  }, [style, itemGap, gridColumns, gridLayout]);
+
+  // 默认滚动箭头配置
+  var defaultScrollActionsConfig = useMemo(function () {
+    return _objectSpread({
+      show: true,
+      type: 'lrArrows',
+      scrollDistance: 200
+    }, scrollActionsConfig);
+  }, [scrollActionsConfig]);
 
-  // 处理进度百分比显示
-  var effectivePercent = showProgressPercent ? percent : undefined;
+  // 渲染步骤条内容
+  var renderStepsContent = function renderStepsContent() {
+    var forceHorizontal = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : false;
+    return /*#__PURE__*/React.createElement(AntdSteps, _extends({
+      current: Math.max(0, currentStep - initial)
+      // 滚动模式下强制水平方向
+      ,
+      direction: forceHorizontal ? 'horizontal' : direction,
+      size: size === 'large' ? 'default' : size,
+      status: status,
+      items: processedItems,
+      labelPlacement: labelPlacement,
+      type: type,
+      progressDot: progressDot
+      // 滚动模式下禁用 Ant Design 的响应式行为
+      ,
+      responsive: forceHorizontal ? false : responsive
+    }, restProps, other || {}));
+  };
 
-  // 根据 type 设置 Ant Design 的展示类型
-  var antdType = type === 'dot' ? 'inline' : type === 'navigation' ? 'navigation' : 'default';
+  // 渲染桌面端步骤条（可能带滚动）
+  var renderDesktopSteps = function renderDesktopSteps() {
+    if (enableScrollMode) {
+      return /*#__PURE__*/React.createElement(PisellScrollView, {
+        className: "pisell-steps-scroll-view",
+        overflow: "x",
+        scrollbarStyle: "none",
+        scrollActionsConfig: defaultScrollActionsConfig,
+        snapScroll: {
+          enabled: false
+        }
+      }, /*#__PURE__*/React.createElement("div", {
+        className: "pisell-steps-scroll-content"
+      }, renderStepsContent(true)));
+    }
+    return renderStepsContent(false);
+  };
   return /*#__PURE__*/React.createElement("div", {
     className: showMobileCurrentView ? "pisell-steps pisell-steps-mobile-current ".concat(className || '') : wrapperClassName,
     style: showMobileCurrentView ? style : wrapperStyle,
@@ -225,21 +278,7 @@ var PisellSteps = function PisellSteps(_ref) {
     className: "pisell-steps-mobile-current__number"
   }, currentStepItem.title), (currentStepItem === null || currentStepItem === void 0 ? void 0 : currentStepItem.description) && /*#__PURE__*/React.createElement("span", {
     className: "pisell-steps-mobile-current__title"
-  }, currentStepItem.description)) : /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(AntdSteps, _extends({
-    current: currentStep - initial,
-    direction: direction,
-    size: size === 'large' ? 'default' : size,
-    status: status,
-    items: processedItems,
-    percent: effectivePercent,
-    labelPlacement: labelPlacement,
-    type: antdType,
-    progressDot: type === 'dot' ? progressDot : false
-  }, restProps, other)), showProgressPercent && percent !== undefined && /*#__PURE__*/React.createElement("div", {
-    className: "pisell-steps-progress-info"
-  }, /*#__PURE__*/React.createElement("span", {
-    className: "pisell-steps-progress-percent"
-  }, percent, "%"))));
+  }, currentStepItem.description)) : /*#__PURE__*/React.createElement(React.Fragment, null, renderDesktopSteps()));
 };
 
 // 添加 displayName 用于调试