@pisell/materials 6.8.2 → 6.8.4

package/es/components/PisellProcedure/PisellProcedure.less

@@ -11,6 +11,7 @@
 @sidebar-width-xl: 405px;  // ≥1133px
 @sidebar-width-md: 376px;  // 960px-1133px
 @sidebar-width-sm: 290px;  // 744px-960px
+@sidebar-width-880: 344px;  // 880px-960px
 
 // 间距
 @gap-default: 16px;
@@ -87,6 +88,7 @@
     display: flex;
     flex-direction: column;
     height: 100%;
+    overflow-y: auto;
 
     // 主体区域内部的 Layout
     > .pisell-lowcode-layout,
@@ -100,22 +102,21 @@
       padding: @gap-default;
     }
 
-    // ========== 布局模式：固定宽度（默认） ==========
-    // &--fixed 使用默认的固定宽度布局，无需额外样式
-
     // ========== 布局模式：比例布局 ==========
     &--ratio {
-      // 移动端：比例模式下也隐藏信息区
-      @media (max-width: calc(@breakpoint-sm - 1px)) {
-        > .pisell-lowcode-layout,
-        > .ant-layout {
-          .@{procedure-prefix}-sidebar {
-            display: none !important;
-          }
-
-          .@{procedure-prefix}-content {
-            flex: 1 !important;
-            max-width: 100% !important;
+      // 移动端：比例模式下也隐藏信息区（弹窗模式下不执行）
+      .@{procedure-prefix}:not(.@{procedure-prefix}--modal) & {
+        @media (max-width: calc(@breakpoint-sm - 1px)) {
+          > .pisell-lowcode-layout,
+          > .ant-layout {
+            .@{procedure-prefix}-sidebar {
+              display: none !important;
+            }
+
+            .@{procedure-prefix}-content {
+              flex: 1 !important;
+              max-width: 100% !important;
+            }
           }
         }
       }
@@ -139,119 +140,47 @@
 
   // 信息区 - 高度自适应内容，sticky 定位
   &-sidebar {
+    width: auto !important;
+    max-width: initial !important;
+    min-width: initial !important;
+    flex: 0 0 auto !important;
     background-color: @color-bg-sidebar;
     border-radius: 4px;
     position: sticky!important;
-    top: calc(64px + @gap-default * 2); // header 高度 + body padding + 额外间距
     overflow-y: auto;
     align-self: flex-start; // 不拉伸高度
     background: transparent !important;
-    height: fit-content;
+    height: 100% !important;
 
     .@{pisell-layout-prefix}-sider-content{
-      overflow: hidden!important;
+      overflow: hidden !important;
       display: flex;
       flex-direction: column;
 
-      .@{procedure-prefix}-sider-content-top{
-        height: auto;
-        max-height: 100%;
-        overflow-y: auto;
-        background-color: #ffffff;
-      }
-
       .@{procedure-prefix}-footer{
         flex-shrink: 0;
       }
     }
 
-    // 纵向排列时的样式
-    .@{procedure-prefix}-body--vertical & {
-      width: 100% !important;
-      max-width: 100% !important;
-      min-width: 0 !important;
-      flex: 0 0 auto !important;
-      position: relative;
-      top: auto;
-
-      .@{procedure-prefix}-sider-content-top{
-        height: 100%;
-      }
+    // ≥1133px: 固定宽度 405px
+    @media (min-width: @breakpoint-xl) {
+      width: @sidebar-width-xl;
     }
-
-    // 响应式宽度调整 - 基于容器宽度的类名控制（适用于弹窗场景）
-    // 使用 CSS 变量 --pisell-procedure-container-width（由 JavaScript 动态设置）
-    // 960px <= containerWidth < 1133px: 376px ~ 405px 线性插值
-    // 公式: 376 + (containerWidth - 960) * (405 - 376) / (1133 - 960)
-    &--responsive-md {
-      @sidebar-width-dynamic: calc(@sidebar-width-md + (var(--pisell-procedure-container-width, 100vw) - @breakpoint-md) * (405 - 376) / (1133 - 960));
-      width: @sidebar-width-dynamic !important;
-      max-width: @sidebar-width-xl !important;
-      min-width: @sidebar-width-md !important;
-      flex: 0 0 @sidebar-width-dynamic !important;
-    }
-
-    // 744px <= containerWidth < 960px: 290px ~ 376px 线性插值
-    // 公式: 290 + (containerWidth - 744) * (376 - 290) / (960 - 744)
-    &--responsive-sm {
-      @sidebar-width-dynamic: calc(@sidebar-width-sm + (var(--pisell-procedure-container-width, 100vw) - @breakpoint-sm) * (376 - 290) / (960 - 744));
-      width: @sidebar-width-dynamic !important;
-      max-width: @sidebar-width-md !important;
-      min-width: @sidebar-width-sm !important;
-      flex: 0 0 @sidebar-width-dynamic !important;
+    // 960px <= viewportWidth < 1133px: 376px ~ 405px
+    @media (min-width: @breakpoint-md) and (max-width: calc(@breakpoint-lg - 1px)) {
+      max-width: @sidebar-width-xl;
+      min-width: @sidebar-width-md;
     }
 
-    // containerWidth < 744px: 弹窗模式下使用最小宽度保持显示
-    // 注意：只有弹窗模式下才会添加响应式类名，页面模式下通过媒体查询隐藏
-    &--responsive-xs {
-      // 弹窗模式下不隐藏 sidebar，使用最小宽度
-      width: @sidebar-width-sm !important;
-      max-width: @sidebar-width-sm !important;
-      min-width: @sidebar-width-sm !important;
-      flex: 0 0 @sidebar-width-sm !important;
-      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 线性插值
-    @media (max-width: calc(@breakpoint-lg - 1px)) and (min-width: @breakpoint-md) {
-      // 如果没有响应式类名，则应用媒体查询样式
-      &:not(.pisell-procedure-sidebar--responsive-md):not(.pisell-procedure-sidebar--responsive-sm):not(.pisell-procedure-sidebar--responsive-xs) {
-        @sidebar-width-dynamic: calc(@sidebar-width-md + (100vw - @breakpoint-md) * (405 - 376) / (1133 - 960));
-        width: @sidebar-width-dynamic !important;
-        max-width: @sidebar-width-xl !important;
-        min-width: @sidebar-width-md !important;
-        flex: 0 0 @sidebar-width-dynamic !important;
-      }
-    }
-
-    // 744px < viewportWidth < 960px: 290px ~ 376px 线性插值
-    @media (max-width: calc(@breakpoint-md)) and (min-width: @breakpoint-sm) {
-      // 如果没有响应式类名，则应用媒体查询样式
-      &:not(.pisell-procedure-sidebar--responsive-md):not(.pisell-procedure-sidebar--responsive-sm):not(.pisell-procedure-sidebar--responsive-xs) {
-        @sidebar-width-dynamic: calc(@sidebar-width-sm + (100vw - @breakpoint-sm) * (376 - 290) / (960 - 744));
-        width: @sidebar-width-dynamic !important;
-        max-width: @sidebar-width-md !important;
-        min-width: @sidebar-width-sm !important;
-        flex: 0 0 @sidebar-width-dynamic !important;
-      }
+    // 744px <= viewportWidth < 960px: 290px ~ 376px
+    @media (min-width: @breakpoint-sm) and (max-width: calc(@breakpoint-md - 1px)) {
+      max-width: @sidebar-width-md;
+      min-width: @sidebar-width-sm;
     }
 
-    // viewportWidth < 744px: 隐藏（仅页面模式，弹窗模式有 responsive-xs 类名不会隐藏）
+    // viewportWidth < 744px: slider区域隐藏  
     @media (max-width: calc(@breakpoint-sm - 1px)) {
-      // 如果没有响应式类名，则应用媒体查询样式
-      &:not(.pisell-procedure-sidebar--responsive-md):not(.pisell-procedure-sidebar--responsive-sm):not(.pisell-procedure-sidebar--responsive-xs) {
-        display: none !important;
-      }
+        display: none;
     }
 
     // ========== 比例模式样式（在基础样式内部，确保优先级） ==========
@@ -264,6 +193,49 @@
     }
   }
 
+  .@{procedure-prefix}-sider-content-top{
+    height: auto;
+    max-height: 100%;
+    overflow-y: auto;
+    background-color: #ffffff;
+  }
+
+  // 纵向排列时的样式
+  .@{procedure-prefix}-body--vertical & {
+    width: 100% !important;
+    max-width: 100% !important;
+    min-width: 0 !important;
+    flex: 0 0 auto !important;
+    position: relative;
+    top: auto;
+
+    .@{procedure-prefix}-sider-content-top{
+      height: 100%;
+    }
+  }
+
+  .@{procedure-prefix}--modal & {
+    background: red;
+    &-sidebar {
+      // >= 880px: 固定宽度 344px
+    @media (min-width: 880px) {
+      width: @sidebar-width-880 !important;
+    }
+
+    // 744px <= viewportWidth < 880px: 290px ~ 344px
+    @media (min-width: @breakpoint-sm) and (max-width: calc(880px - 1px)) {
+      max-width: @sidebar-width-880 !important;
+      min-width: @sidebar-width-sm !important;
+    }
+
+    // viewportWidth < 744px: 290px
+    @media (max-width: calc(@breakpoint-sm - 1px)) {
+      width: @sidebar-width-sm !important;
+      display: block !important;
+    }
+    }
+  }
+
   // ========== 底部区域基础样式 ==========
   &-footer {
     display: flex;
@@ -278,7 +250,7 @@
     z-index: 100;
     overflow: hidden; // 防止内容溢出
 
-    // 总结按钮插槽 - 仅移动端显示（< 744px）
+    // 总结按钮插槽 - 仅移动端显示（< 744px），弹窗模式下不执行媒体查询
     &__summary {
       flex-shrink: 0;
       margin-right: auto;
@@ -286,9 +258,11 @@
       display: none;
       cursor: pointer;
 
-      // 移动端显示
-      @media (max-width: calc(@breakpoint-sm - 1px)) {
-        display: block;
+      // 移动端显示（仅页面模式）
+      .@{procedure-prefix}:not(.@{procedure-prefix}--modal) & {
+        @media (max-width: calc(@breakpoint-sm - 1px)) {
+          display: block;
+        }
       }
     }
 
@@ -478,74 +452,76 @@
     }
   }
 
-  // ========== 小屏适配（744px-960px）：头部两行显示 ==========
-  @media (min-width: @breakpoint-sm) and (max-width: calc(@breakpoint-md - 1px)) {
-    &-header {
-      flex-wrap: wrap;
-      min-height: auto;
-      padding: 12px @padding-default;
-
-      // 第一行：返回按钮
-      &__left {
-        order: 1;
-        flex: 0 0 auto;
-      }
+  // ========== 小屏适配（744px-960px）：头部两行显示（仅页面模式） ==========
+  &:not(&--modal) {
+    @media (min-width: @breakpoint-sm) and (max-width: calc(@breakpoint-md - 1px)) {
+      .@{procedure-prefix}-header {
+        flex-wrap: wrap;
+        min-height: auto;
+        padding: 12px @padding-default;
+
+        // 第一行：返回按钮
+        .@{procedure-prefix}-header__left {
+          order: 1;
+          flex: 0 0 auto;
+        }
 
-      // 第一行：关闭按钮，推到右边
-      &__right {
-        order: 2;
-        flex: 0 0 auto;
-        margin-left: auto;
-      }
+        // 第一行：关闭按钮，推到右边
+        .@{procedure-prefix}-header__right {
+          order: 2;
+          flex: 0 0 auto;
+          margin-left: auto;
+        }
 
-      // 第二行：步骤条独占一行
-      &__center {
-        order: 3;
-        width: 100%;
-        flex: 0 0 100%;
-        padding: 0;
-        justify-content: flex-start;
-        overflow-x: auto;
+        // 第二行：步骤条独占一行
+        .@{procedure-prefix}-header__center {
+          order: 3;
+          width: 100%;
+          flex: 0 0 100%;
+          padding: 0;
+          justify-content: flex-start;
+          overflow-x: auto;
+        }
       }
     }
-  }
 
-  // ========== 移动端适配（<744px）：头部一行显示 ==========
-  @media (max-width: calc(@breakpoint-sm - 1px)) {
-    &-header {
-      flex-wrap: nowrap;
-      min-height: auto;
-      padding: 12px @padding-default;
+    // ========== 移动端适配（<744px）：头部一行显示 ==========
+    @media (max-width: calc(@breakpoint-sm - 1px)) {
+      .@{procedure-prefix}-header {
+        flex-wrap: nowrap;
+        min-height: auto;
+        padding: 12px @padding-default;
+
+        // 左侧：返回按钮
+        .@{procedure-prefix}-header__left {
+          flex: 0 0 auto;
+        }
 
-      // 左侧：返回按钮
-      &__left {
-        flex: 0 0 auto;
-      }
+        // 中间：步骤条（简化显示当前步骤）
+        .@{procedure-prefix}-header__center {
+          flex: 1;
+          padding: 0 @gap-default;
+          overflow: hidden;
+        }
 
-      // 中间：步骤条（简化显示当前步骤）
-      &__center {
-        flex: 1;
-        padding: 0 @gap-default;
-        overflow: hidden;
+        // 右侧：关闭按钮
+        .@{procedure-prefix}-header__right {
+          flex: 0 0 auto;
+        }
       }
 
-      // 右侧：关闭按钮
-      &__right {
-        flex: 0 0 auto;
+      // 主体区域移动端
+      .@{procedure-prefix}-body {
+        > .pisell-lowcode-layout,
+        > .ant-layout {
+          padding: @gap-default;
+        }
       }
-    }
 
-    // 主体区域移动端
-    &-body {
-      > .pisell-lowcode-layout,
-      > .ant-layout {
-        padding: @gap-default;
+      // 内容区占满
+      .@{procedure-prefix}-content {
+        width: 100% !important;
       }
     }
-
-    // 内容区占满
-    &-content {
-      width: 100% !important;
-    }
   }
 }

package/es/components/PisellProcedure/components/FooterActions.js

@@ -3,6 +3,7 @@ import { Dropdown, Button } from 'antd';
 import UpOutlined from '@ant-design/icons/UpOutlined';
 import { useOverflowActions } from "../hooks/useOverflowActions";
 import { mergeClassNames } from "../utils";
+import { getText } from "../../../locales";
 
 /**
  * FooterActions 底部操作区组件 Props
@@ -18,8 +19,7 @@ var FooterActions = function FooterActions(_ref) {
   var leftSlot = _ref.leftSlot,
     children = _ref.children,
     className = _ref.className,
-    _ref$moreText = _ref.moreText,
-    moreText = _ref$moreText === void 0 ? 'More' : _ref$moreText,
+    moreText = _ref.moreText,
     _ref$gap = _ref.gap,
     gap = _ref$gap === void 0 ? 16 : _ref$gap;
   var _useOverflowActions = useOverflowActions({
@@ -94,7 +94,7 @@ var FooterActions = function FooterActions(_ref) {
     }
   }, /*#__PURE__*/React.createElement(Button, {
     icon: /*#__PURE__*/React.createElement(UpOutlined, null)
-  }, moreText)), visibleActions)));
+  }, moreText || getText('pisell-procedure-footer-more'))), visibleActions)));
 };
 FooterActions.displayName = 'FooterActions';
 export default FooterActions;

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

@@ -28,6 +28,8 @@ export interface ProcedureBodyProps {
     goNext?: () => void;
     /** 组件使用模式 */
     mode?: ProcedureMode;
+    containerSize?: any;
+    responsiveClsComputed?: string;
 }
 /**
  * ProcedureBody 主体区域组件

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

@@ -36,7 +36,9 @@ var ProcedureBody = function ProcedureBody(_ref) {
     goPrev = _ref.goPrev,
     goNext = _ref.goNext,
     _ref$mode = _ref.mode,
-    mode = _ref$mode === void 0 ? 'page' : _ref$mode;
+    mode = _ref$mode === void 0 ? 'page' : _ref$mode,
+    containerSize = _ref.containerSize,
+    responsiveClsComputed = _ref.responsiveClsComputed;
   /** 排列方向，默认为横向 */
   var direction = (bodyProps === null || bodyProps === void 0 ? void 0 : bodyProps.direction) || 'horizontal';
   /** 内容顺序，默认为内容区在前 */
@@ -133,7 +135,9 @@ var ProcedureBody = function ProcedureBody(_ref) {
     isRatioMode: layoutMode === 'ratio',
     containerSelector: bodyProps === null || bodyProps === void 0 ? void 0 : bodyProps.sidebarContainerSelector,
     mode: mode,
-    direction: direction
+    direction: direction,
+    containerSize: containerSize,
+    responsiveClsComputed: responsiveClsComputed
   }, bodyProps === null || bodyProps === void 0 ? void 0 : bodyProps.sidebarSlot) : null;
 
   /** 根据 contentOrder 决定渲染顺序 */

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

@@ -25,6 +25,8 @@ export interface ProcedureSidebarProps {
     mode?: ProcedureMode;
     /** 排列方向 */
     direction?: BodyDirection;
+    containerSize?: any;
+    responsiveClsComputed?: string;
 }
 /**
  * ProcedureSidebar 信息区组件

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

@@ -1,13 +1,7 @@
-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); }
-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; }
-function _defineProperty(obj, key, value) { key = _toPropertyKey(key); if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
-function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == _typeof(i) ? i : String(i); }
-function _toPrimitive(t, r) { if ("object" != _typeof(t) || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != _typeof(i)) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
-import React, { useMemo, useLayoutEffect } from 'react';
+import React, { useMemo, useEffect } from 'react';
 import PisellSider from "../../pisellLayout/sider";
 import { mergeClassNames } from "../utils";
-import { useElementSize, useSidebarHeight, useResponsiveClass } from "../hooks";
+import { useElementSize, useSidebarHeight } from "../hooks";
 
 /**
  * ProcedureSidebar 子组件 Props
@@ -30,7 +24,9 @@ var ProcedureSidebar = function ProcedureSidebar(_ref) {
     _ref$mode = _ref.mode,
     mode = _ref$mode === void 0 ? 'page' : _ref$mode,
     _ref$direction = _ref.direction,
-    direction = _ref$direction === void 0 ? 'horizontal' : _ref$direction;
+    direction = _ref$direction === void 0 ? 'horizontal' : _ref$direction,
+    containerSize = _ref.containerSize,
+    responsiveClsComputed = _ref.responsiveClsComputed;
   // 垂直布局下不需要计算高度
   var isVertical = direction === 'vertical';
   // 获取 header 高度（垂直布局下不需要）
@@ -49,18 +45,10 @@ var ProcedureSidebar = function ProcedureSidebar(_ref) {
     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: !isVertical && !!containerSelector,
-    threshold: 5,
-    debounceMs: 200
-  });
   var containerWidth = (containerSize === null || containerSize === void 0 ? void 0 : containerSize.width) || 0;
 
   // 设置 CSS 变量 --pisell-procedure-container-width，供样式文件使用
-  useLayoutEffect(function () {
+  useEffect(function () {
     if (typeof document === 'undefined') return;
     var root = document.documentElement;
     if (containerWidth > 0) {
@@ -94,23 +82,30 @@ var ProcedureSidebar = function ProcedureSidebar(_ref) {
     footerHeight: footerHeight
   });
 
-  // 使用自定义 Hook 计算响应式类名（延迟应用，避免宽度抖动）
-  // 注意：Hook 必须无条件调用，不能放在条件语句中
-  var responsiveClsComputed = useResponsiveClass(containerWidth);
   // 仅在 modal 模式下应用响应式类名
   var responsiveCls = mode === 'modal' ? responsiveClsComputed : '';
 
   // 信息区类名
   var sidebarCls = useMemo(function () {
-    return mergeClassNames('pisell-procedure-sidebar', className, isRatioMode && 'pisell-procedure-sidebar--ratio', responsiveCls);
+    return mergeClassNames('pisell-procedure-sidebar', className, isRatioMode && 'pisell-procedure-sidebar--ratio'
+    // responsiveCls
+    );
   }, [className, isRatioMode, responsiveCls]);
+  var _height = useMemo(function () {
+    if (mode === 'modal') {
+      return '100%';
+    }
+    if (siderHeight && siderHeight > 0) {
+      return "".concat(siderHeight, "px");
+    }
+  }, [mode, siderHeight]);
   return /*#__PURE__*/React.createElement(PisellSider, {
-    className: sidebarCls,
-    style: _objectSpread(_objectSpread({}, style), {}, {
-      overflow: 'hidden'
-    }, siderHeight && siderHeight > 0 ? {
-      height: "".concat(siderHeight, "px")
-    } : {})
+    className: sidebarCls
+    // style={{
+    //   ...style,
+    //   overflow: 'hidden',
+    //   ...(_height && { height: _height }),
+    // }}
   }, /*#__PURE__*/React.createElement("div", {
     className: "pisell-procedure-sider-content-top"
   }, children), extra);

package/es/components/PisellProcedure/hooks/useElementSize.d.ts

@@ -35,4 +35,4 @@ export interface ElementSize {
  *   defaultHeight: 0
  * });
  */
-export declare const useElementSize: ({ selector, enabled, defaultWidth, defaultHeight, threshold, debounceMs, }: UseElementSizeOptions) => ElementSize;
+export declare const useElementSize: ({ selector, enabled, defaultWidth, defaultHeight, debounceMs, }: UseElementSizeOptions) => ElementSize;