@pisell/materials 6.8.2 → 6.8.4

package/lib/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/lib/components/PisellProcedure/components/FooterActions.js

@@ -37,11 +37,12 @@ var import_antd = require("antd");
 var import_UpOutlined = __toESM(require("@ant-design/icons/UpOutlined"));
 var import_useOverflowActions = require("../hooks/useOverflowActions");
 var import_utils = require("../utils");
+var import_locales = require("../../../locales");
 var FooterActions = ({
   leftSlot,
   children,
   className,
-  moreText = "More",
+  moreText,
   gap = 16
 }) => {
   const {
@@ -90,7 +91,7 @@ var FooterActions = ({
       "aria-hidden": "true"
     },
     /* @__PURE__ */ import_react.default.createElement(import_antd.Button, { icon: /* @__PURE__ */ import_react.default.createElement(import_UpOutlined.default, null) }, moreText)
-  ), /* @__PURE__ */ import_react.default.createElement("div", { ref: containerRef, className: containerCls, style: { gap } }, hasLeftSlot && /* @__PURE__ */ import_react.default.createElement("div", { ref: leftSlotRef, className: "pisell-procedure-footer__left" }, leftSlot), /* @__PURE__ */ import_react.default.createElement("div", { className: "pisell-procedure-footer__actions", style: { gap } }, hasOverflow && /* @__PURE__ */ import_react.default.createElement(import_antd.Dropdown, { menu: { items: moreMenuItems } }, /* @__PURE__ */ import_react.default.createElement(import_antd.Button, { icon: /* @__PURE__ */ import_react.default.createElement(import_UpOutlined.default, null) }, moreText)), visibleActions)));
+  ), /* @__PURE__ */ import_react.default.createElement("div", { ref: containerRef, className: containerCls, style: { gap } }, hasLeftSlot && /* @__PURE__ */ import_react.default.createElement("div", { ref: leftSlotRef, className: "pisell-procedure-footer__left" }, leftSlot), /* @__PURE__ */ import_react.default.createElement("div", { className: "pisell-procedure-footer__actions", style: { gap } }, hasOverflow && /* @__PURE__ */ import_react.default.createElement(import_antd.Dropdown, { menu: { items: moreMenuItems } }, /* @__PURE__ */ import_react.default.createElement(import_antd.Button, { icon: /* @__PURE__ */ import_react.default.createElement(import_UpOutlined.default, null) }, moreText || (0, import_locales.getText)("pisell-procedure-footer-more"))), visibleActions)));
 };
 FooterActions.displayName = "FooterActions";
 var FooterActions_default = FooterActions;

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

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

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

@@ -50,7 +50,9 @@ var ProcedureBody = ({
   onCloseSummaryModal,
   goPrev,
   goNext,
-  mode = "page"
+  mode = "page",
+  containerSize,
+  responsiveClsComputed
 }) => {
   const direction = (bodyProps == null ? void 0 : bodyProps.direction) || "horizontal";
   const contentOrder = (bodyProps == null ? void 0 : bodyProps.contentOrder) || "content-first";
@@ -141,7 +143,9 @@ var ProcedureBody = ({
       isRatioMode: layoutMode === "ratio",
       containerSelector: bodyProps == null ? void 0 : bodyProps.sidebarContainerSelector,
       mode,
-      direction
+      direction,
+      containerSize,
+      responsiveClsComputed
     },
     bodyProps == null ? void 0 : bodyProps.sidebarSlot
   ) : null;

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

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

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

@@ -44,7 +44,9 @@ var ProcedureSidebar = ({
   isRatioMode = false,
   containerSelector,
   mode = "page",
-  direction = "horizontal"
+  direction = "horizontal",
+  containerSize,
+  responsiveClsComputed
 }) => {
   const isVertical = direction === "vertical";
   const headerSize = (0, import_hooks.useElementSize)({
@@ -63,14 +65,8 @@ var ProcedureSidebar = ({
     (floatAllFooterSize == null ? void 0 : floatAllFooterSize.height) || 0,
     (fixedBottomFooterSize == null ? void 0 : fixedBottomFooterSize.height) || 0
   );
-  const containerSize = (0, import_hooks.useElementSize)({
-    selector: containerSelector || "",
-    enabled: !isVertical && !!containerSelector,
-    threshold: 5,
-    debounceMs: 200
-  });
   const containerWidth = (containerSize == null ? void 0 : containerSize.width) || 0;
-  (0, import_react.useLayoutEffect)(() => {
+  (0, import_react.useEffect)(() => {
     if (typeof document === "undefined") return;
     const root = document.documentElement;
     if (containerWidth > 0) {
@@ -94,34 +90,40 @@ var ProcedureSidebar = ({
       return (containerSize == null ? void 0 : containerSize.width) > 0 && (containerSize == null ? void 0 : containerSize.height) > 0;
     }
     return true;
-  }, [isVertical, 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 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",
       className,
-      isRatioMode && "pisell-procedure-sidebar--ratio",
-      responsiveCls
+      isRatioMode && "pisell-procedure-sidebar--ratio"
+      // responsiveCls
     );
   }, [className, isRatioMode, responsiveCls]);
+  const _height = (0, import_react.useMemo)(() => {
+    if (mode === "modal") {
+      return "100%";
+    }
+    if (siderHeight && siderHeight > 0) {
+      return `${siderHeight}px`;
+    }
+  }, [mode, siderHeight]);
   return /* @__PURE__ */ import_react.default.createElement(
     import_sider.default,
     {
-      className: sidebarCls,
-      style: {
-        ...style,
-        overflow: "hidden",
-        ...siderHeight && siderHeight > 0 ? {
-          height: `${siderHeight}px`
-        } : {}
-      }
+      className: sidebarCls
     },
     /* @__PURE__ */ import_react.default.createElement("div", { className: "pisell-procedure-sider-content-top" }, children),
     extra

package/lib/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;