@pisell/materials 6.8.1 → 6.8.2

package/es/components/PisellProcedure/PisellProcedure.js

@@ -50,8 +50,11 @@ var PisellProcedure = function PisellProcedure(props) {
     __id = props.__id,
     other = _objectWithoutProperties(props, _excluded);
 
-  // 检测是否是移动端（< 744px）- 弹窗模式下不应用移动端检测
-  var isMobile = mode === 'modal' ? false : useMobile(744);
+  // 检测是否是移动端（< 744px）
+  // 注意：Hook 必须无条件调用，不能放在条件语句中
+  var isMobileDetected = useMobile(744);
+  // 弹窗模式下不应用移动端检测
+  var isMobile = mode === 'modal' ? false : isMobileDetected;
 
   // 使用步骤管理 Hook
   var _useStepManager = useStepManager({

package/es/components/PisellProcedure/PisellProcedure.less

@@ -132,17 +132,13 @@
 
     // 纵向排列时的样式
     .@{procedure-prefix}-body--vertical & {
-      width: 100%;
+      width: 100% !important;
       flex: 1 1 auto;
     }
   }
 
   // 信息区 - 高度自适应内容，sticky 定位
   &-sidebar {
-    width: @sidebar-width-xl;
-    max-width: @sidebar-width-xl;
-    min-width: @sidebar-width-xl;
-    flex: 0 0 @sidebar-width-xl;
     background-color: @color-bg-sidebar;
     border-radius: 4px;
     position: sticky!important;
@@ -177,6 +173,10 @@
       flex: 0 0 auto !important;
       position: relative;
       top: auto;
+
+      .@{procedure-prefix}-sider-content-top{
+        height: 100%;
+      }
     }
 
     // 响应式宽度调整 - 基于容器宽度的类名控制（适用于弹窗场景）
@@ -212,6 +212,14 @@
       display: initial !important;
     }
 
+    // 大于1133px: 405px
+    @media (min-width: @breakpoint-lg) {
+      width: @sidebar-width-xl !important;
+      max-width: @sidebar-width-xl !important;
+      min-width: @sidebar-width-xl !important;
+      flex: 0 0 @sidebar-width-xl !important;
+    }
+
     // 保留媒体查询作为降级方案（当没有提供 containerSelector 时，即页面模式）
     // 弹窗模式下会添加 responsive-xs 类名，所以媒体查询不会生效
     // 960px < viewportWidth < 1133px: 376px ~ 405px 线性插值
@@ -464,7 +472,7 @@
           flex-shrink: 0;
           position: sticky;
           bottom: 0;
-          margin:auto 0;
+          margin: 0;
         }
       }
     }

package/es/components/PisellProcedure/components/ProcedureBody.js

@@ -132,7 +132,8 @@ var ProcedureBody = function ProcedureBody(_ref) {
     extra: sidebarFooter,
     isRatioMode: layoutMode === 'ratio',
     containerSelector: bodyProps === null || bodyProps === void 0 ? void 0 : bodyProps.sidebarContainerSelector,
-    mode: mode
+    mode: mode,
+    direction: direction
   }, bodyProps === null || bodyProps === void 0 ? void 0 : bodyProps.sidebarSlot) : null;
 
   /** 根据 contentOrder 决定渲染顺序 */

package/es/components/PisellProcedure/components/ProcedureSidebar.d.ts

@@ -1,6 +1,6 @@
 import React from 'react';
 import type { CSSProperties, ReactNode } from 'react';
-import type { ProcedureMode } from '../types';
+import type { ProcedureMode, BodyDirection } from '../types';
 /**
  * ProcedureSidebar 子组件 Props
  */
@@ -23,6 +23,8 @@ export interface ProcedureSidebarProps {
     containerSelector?: string;
     /** 组件使用模式 */
     mode?: ProcedureMode;
+    /** 排列方向 */
+    direction?: BodyDirection;
 }
 /**
  * ProcedureSidebar 信息区组件

package/es/components/PisellProcedure/components/ProcedureSidebar.js

@@ -28,28 +28,32 @@ var ProcedureSidebar = function ProcedureSidebar(_ref) {
     isRatioMode = _ref$isRatioMode === void 0 ? false : _ref$isRatioMode,
     containerSelector = _ref.containerSelector,
     _ref$mode = _ref.mode,
-    mode = _ref$mode === void 0 ? 'page' : _ref$mode;
-  // 获取 header 高度
+    mode = _ref$mode === void 0 ? 'page' : _ref$mode,
+    _ref$direction = _ref.direction,
+    direction = _ref$direction === void 0 ? 'horizontal' : _ref$direction;
+  // 垂直布局下不需要计算高度
+  var isVertical = direction === 'vertical';
+  // 获取 header 高度（垂直布局下不需要）
   var headerSize = useElementSize({
     selector: '.pisell-procedure-header',
-    enabled: true
+    enabled: !isVertical
   });
 
-  // 计算全局 footer 的高度
+  // 计算全局 footer 的高度（垂直布局下不需要）
   var floatAllFooterSize = useElementSize({
     selector: '.pisell-procedure-footer--float-all',
-    enabled: true
+    enabled: !isVertical
   });
   var fixedBottomFooterSize = useElementSize({
     selector: '.pisell-procedure-footer--fixed-bottom',
-    enabled: true
+    enabled: !isVertical
   });
   var footerHeight = Math.max((floatAllFooterSize === null || floatAllFooterSize === void 0 ? void 0 : floatAllFooterSize.height) || 0, (fixedBottomFooterSize === null || fixedBottomFooterSize === void 0 ? void 0 : fixedBottomFooterSize.height) || 0);
 
-  // 获取容器宽度和高度
+  // 获取容器宽度和高度（垂直布局下不需要）
   var containerSize = useElementSize({
     selector: containerSelector || '',
-    enabled: !!containerSelector,
+    enabled: !isVertical && !!containerSelector,
     threshold: 5,
     debounceMs: 200
   });
@@ -67,8 +71,12 @@ var ProcedureSidebar = function ProcedureSidebar(_ref) {
     };
   }, [containerWidth]);
 
-  // 检查所有尺寸是否已稳定
+  // 检查所有尺寸是否已稳定（垂直布局下始终返回 false，不计算高度）
   var isSizeStable = useMemo(function () {
+    // 垂直布局下不需要计算高度
+    if (isVertical) {
+      return false;
+    }
     if (!(headerSize !== null && headerSize !== void 0 && headerSize.height) || headerSize.height === 0) {
       return false;
     }
@@ -76,9 +84,9 @@ var ProcedureSidebar = function ProcedureSidebar(_ref) {
       return (containerSize === null || containerSize === void 0 ? void 0 : containerSize.width) > 0 && (containerSize === null || containerSize === void 0 ? void 0 : containerSize.height) > 0;
     }
     return true;
-  }, [containerSelector, containerSize === null || containerSize === void 0 ? void 0 : containerSize.width, containerSize === null || containerSize === void 0 ? void 0 : containerSize.height, headerSize === null || headerSize === void 0 ? void 0 : headerSize.height]);
+  }, [isVertical, containerSelector, containerSize === null || containerSize === void 0 ? void 0 : containerSize.width, containerSize === null || containerSize === void 0 ? void 0 : containerSize.height, headerSize === null || headerSize === void 0 ? void 0 : headerSize.height]);
 
-  // 使用自定义 Hook 计算高度
+  // 使用自定义 Hook 计算高度（垂直布局下不需要）
   var siderHeight = useSidebarHeight(isSizeStable, {
     containerSelector: containerSelector,
     containerHeight: containerSize === null || containerSize === void 0 ? void 0 : containerSize.height,
@@ -87,7 +95,10 @@ var ProcedureSidebar = function ProcedureSidebar(_ref) {
   });
 
   // 使用自定义 Hook 计算响应式类名（延迟应用，避免宽度抖动）
-  var responsiveCls = mode === 'modal' ? useResponsiveClass(containerWidth) : '';
+  // 注意：Hook 必须无条件调用，不能放在条件语句中
+  var responsiveClsComputed = useResponsiveClass(containerWidth);
+  // 仅在 modal 模式下应用响应式类名
+  var responsiveCls = mode === 'modal' ? responsiveClsComputed : '';
 
   // 信息区类名
   var sidebarCls = useMemo(function () {

package/es/components/PisellSteps/PisellSteps.less

@@ -242,13 +242,13 @@
   // 水平布局时（labelPlacement='horizontal'），控制图标右侧的间距
   .ant-steps-item {
     .ant-steps-item-icon {
-      margin-right: var(--pisell-steps-item-gap);
+      margin-right: var(--pisell-steps-item-gap) !important;
     }
   }
 
   // 低代码平台中的样式支持 - 水平布局
   .pisell-lowcode-steps-item-icon {
-    margin-right: var(--pisell-steps-item-gap);
+    margin-right: var(--pisell-steps-item-gap) !important;
   }
 
   // 低代码平台垂直布局 - 设置内容区域的上边距

package/es/components/PisellTabbar2/PisellTabbar.js

@@ -76,8 +76,12 @@ var PisellTabbar = function PisellTabbar(props) {
    * 处理一级 Tab 切换
    */
   var handleLevel1Change = useCallback(function (key, item) {
-    var _item$children, _item$children$;
-    setActiveKey(0, key, item !== null && item !== void 0 && (_item$children = item.children) !== null && _item$children !== void 0 && _item$children.length ? item === null || item === void 0 || (_item$children$ = item.children[0]) === null || _item$children$ === void 0 ? void 0 : _item$children$.id : undefined);
+    if (item.childrenMaxLevel !== undefined && item.childrenMaxLevel < 2) {
+      setActiveKey(0, key, 0);
+    } else {
+      var _item$children, _item$children$;
+      setActiveKey(0, key, item !== null && item !== void 0 && (_item$children = item.children) !== null && _item$children !== void 0 && _item$children.length ? item === null || item === void 0 || (_item$children$ = item.children[0]) === null || _item$children$ === void 0 ? void 0 : _item$children$.id : undefined);
+    }
   }, [setActiveKey]);
 
   /**

package/lib/components/PisellProcedure/PisellProcedure.js

@@ -67,7 +67,8 @@ var PisellProcedure = (props) => {
     __id,
     ...other
   } = props;
-  const isMobile = mode === "modal" ? false : (0, import_useMobile.useMobile)(744);
+  const isMobileDetected = (0, import_useMobile.useMobile)(744);
+  const isMobile = mode === "modal" ? false : isMobileDetected;
   const { currentStep, goPrev, goNext, goToStep } = (0, import_hooks.useStepManager)({
     stepsProps: headerProps == null ? void 0 : headerProps.stepsProps,
     defaultCurrent,

package/lib/components/PisellProcedure/PisellProcedure.less

@@ -132,17 +132,13 @@
 
     // 纵向排列时的样式
     .@{procedure-prefix}-body--vertical & {
-      width: 100%;
+      width: 100% !important;
       flex: 1 1 auto;
     }
   }
 
   // 信息区 - 高度自适应内容，sticky 定位
   &-sidebar {
-    width: @sidebar-width-xl;
-    max-width: @sidebar-width-xl;
-    min-width: @sidebar-width-xl;
-    flex: 0 0 @sidebar-width-xl;
     background-color: @color-bg-sidebar;
     border-radius: 4px;
     position: sticky!important;
@@ -177,6 +173,10 @@
       flex: 0 0 auto !important;
       position: relative;
       top: auto;
+
+      .@{procedure-prefix}-sider-content-top{
+        height: 100%;
+      }
     }
 
     // 响应式宽度调整 - 基于容器宽度的类名控制（适用于弹窗场景）
@@ -212,6 +212,14 @@
       display: initial !important;
     }
 
+    // 大于1133px: 405px
+    @media (min-width: @breakpoint-lg) {
+      width: @sidebar-width-xl !important;
+      max-width: @sidebar-width-xl !important;
+      min-width: @sidebar-width-xl !important;
+      flex: 0 0 @sidebar-width-xl !important;
+    }
+
     // 保留媒体查询作为降级方案（当没有提供 containerSelector 时，即页面模式）
     // 弹窗模式下会添加 responsive-xs 类名，所以媒体查询不会生效
     // 960px < viewportWidth < 1133px: 376px ~ 405px 线性插值
@@ -464,7 +472,7 @@
           flex-shrink: 0;
           position: sticky;
           bottom: 0;
-          margin:auto 0;
+          margin: 0;
         }
       }
     }

package/lib/components/PisellProcedure/components/ProcedureBody.js

@@ -140,7 +140,8 @@ var ProcedureBody = ({
       extra: sidebarFooter,
       isRatioMode: layoutMode === "ratio",
       containerSelector: bodyProps == null ? void 0 : bodyProps.sidebarContainerSelector,
-      mode
+      mode,
+      direction
     },
     bodyProps == null ? void 0 : bodyProps.sidebarSlot
   ) : null;

package/lib/components/PisellProcedure/components/ProcedureSidebar.d.ts

@@ -1,6 +1,6 @@
 import React from 'react';
 import type { CSSProperties, ReactNode } from 'react';
-import type { ProcedureMode } from '../types';
+import type { ProcedureMode, BodyDirection } from '../types';
 /**
  * ProcedureSidebar 子组件 Props
  */
@@ -23,6 +23,8 @@ export interface ProcedureSidebarProps {
     containerSelector?: string;
     /** 组件使用模式 */
     mode?: ProcedureMode;
+    /** 排列方向 */
+    direction?: BodyDirection;
 }
 /**
  * ProcedureSidebar 信息区组件

package/lib/components/PisellProcedure/components/ProcedureSidebar.js

@@ -43,19 +43,21 @@ var ProcedureSidebar = ({
   extra,
   isRatioMode = false,
   containerSelector,
-  mode = "page"
+  mode = "page",
+  direction = "horizontal"
 }) => {
+  const isVertical = direction === "vertical";
   const headerSize = (0, import_hooks.useElementSize)({
     selector: ".pisell-procedure-header",
-    enabled: true
+    enabled: !isVertical
   });
   const floatAllFooterSize = (0, import_hooks.useElementSize)({
     selector: ".pisell-procedure-footer--float-all",
-    enabled: true
+    enabled: !isVertical
   });
   const fixedBottomFooterSize = (0, import_hooks.useElementSize)({
     selector: ".pisell-procedure-footer--fixed-bottom",
-    enabled: true
+    enabled: !isVertical
   });
   const footerHeight = Math.max(
     (floatAllFooterSize == null ? void 0 : floatAllFooterSize.height) || 0,
@@ -63,7 +65,7 @@ var ProcedureSidebar = ({
   );
   const containerSize = (0, import_hooks.useElementSize)({
     selector: containerSelector || "",
-    enabled: !!containerSelector,
+    enabled: !isVertical && !!containerSelector,
     threshold: 5,
     debounceMs: 200
   });
@@ -82,6 +84,9 @@ var ProcedureSidebar = ({
     };
   }, [containerWidth]);
   const isSizeStable = (0, import_react.useMemo)(() => {
+    if (isVertical) {
+      return false;
+    }
     if (!(headerSize == null ? void 0 : headerSize.height) || headerSize.height === 0) {
       return false;
     }
@@ -89,14 +94,15 @@ var ProcedureSidebar = ({
       return (containerSize == null ? void 0 : containerSize.width) > 0 && (containerSize == null ? void 0 : containerSize.height) > 0;
     }
     return true;
-  }, [containerSelector, containerSize == null ? void 0 : containerSize.width, containerSize == null ? void 0 : containerSize.height, headerSize == null ? void 0 : headerSize.height]);
+  }, [isVertical, containerSelector, containerSize == null ? void 0 : containerSize.width, containerSize == null ? void 0 : containerSize.height, headerSize == null ? void 0 : headerSize.height]);
   const siderHeight = (0, import_hooks.useSidebarHeight)(isSizeStable, {
     containerSelector,
     containerHeight: containerSize == null ? void 0 : containerSize.height,
     headerHeight: headerSize == null ? void 0 : headerSize.height,
     footerHeight
   });
-  const responsiveCls = mode === "modal" ? (0, import_hooks.useResponsiveClass)(containerWidth) : "";
+  const responsiveClsComputed = (0, import_hooks.useResponsiveClass)(containerWidth);
+  const responsiveCls = mode === "modal" ? responsiveClsComputed : "";
   const sidebarCls = (0, import_react.useMemo)(() => {
     return (0, import_utils.mergeClassNames)(
       "pisell-procedure-sidebar",

package/lib/components/PisellSteps/PisellSteps.less

@@ -242,13 +242,13 @@
   // 水平布局时（labelPlacement='horizontal'），控制图标右侧的间距
   .ant-steps-item {
     .ant-steps-item-icon {
-      margin-right: var(--pisell-steps-item-gap);
+      margin-right: var(--pisell-steps-item-gap) !important;
     }
   }
 
   // 低代码平台中的样式支持 - 水平布局
   .pisell-lowcode-steps-item-icon {
-    margin-right: var(--pisell-steps-item-gap);
+    margin-right: var(--pisell-steps-item-gap) !important;
   }
 
   // 低代码平台垂直布局 - 设置内容区域的上边距

package/lib/components/PisellTabbar2/PisellTabbar.js

@@ -74,11 +74,15 @@ var PisellTabbar = (props) => {
   const handleLevel1Change = (0, import_react.useCallback)(
     (key, item) => {
       var _a, _b;
-      setActiveKey(
-        0,
-        key,
-        ((_a = item == null ? void 0 : item.children) == null ? void 0 : _a.length) ? (_b = item == null ? void 0 : item.children[0]) == null ? void 0 : _b.id : void 0
-      );
+      if (item.childrenMaxLevel !== void 0 && item.childrenMaxLevel < 2) {
+        setActiveKey(0, key, 0);
+      } else {
+        setActiveKey(
+          0,
+          key,
+          ((_a = item == null ? void 0 : item.children) == null ? void 0 : _a.length) ? (_b = item == null ? void 0 : item.children[0]) == null ? void 0 : _b.id : void 0
+        );
+      }
     },
     [setActiveKey]
   );

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@pisell/materials",
-  "version": "6.8.1",
+  "version": "6.8.2",
   "main": "./lib/index.js",
   "module": "./es/index.js",
   "types": "./lib/index.d.ts",
@@ -78,9 +78,9 @@
     "swiper": "^8.4.7",
     "antd-mobile": "^5.38.1",
     "vod-js-sdk-v6": "^1.4.11",
+    "@pisell/date-picker": "3.0.7",
     "@pisell/icon": "0.0.11",
-    "@pisell/utils": "3.0.2",
-    "@pisell/date-picker": "3.0.7"
+    "@pisell/utils": "3.0.2"
   },
   "peerDependencies": {
     "react": "^18.0.0",