@pisell/materials 6.7.3 → 6.8.1

package/lib/components/PisellProcedure/PisellProcedure.less

@@ -0,0 +1,543 @@
+@procedure-prefix: pisell-procedure;
+@pisell-layout-prefix: pisell-layout;
+
+// 断点
+@breakpoint-xl: 1366px;
+@breakpoint-lg: 1133px;
+@breakpoint-md: 960px;
+@breakpoint-sm: 744px;
+
+// 信息区宽度（根据屏幕断点）
+@sidebar-width-xl: 405px;  // ≥1133px
+@sidebar-width-md: 376px;  // 960px-1133px
+@sidebar-width-sm: 290px;  // 744px-960px
+
+// 间距
+@gap-default: 16px;
+@padding-default: 16px;
+
+// footer 高度预估（包含 padding）
+@footer-height: 61px;
+
+// 颜色
+@color-bg-header: #fff;
+@color-bg-body: #f5f5f5;
+@color-bg-content: #fff;
+@color-bg-sidebar: #fff;
+@color-bg-footer: #ececec;
+@color-border: #e8e8e8;
+
+// ========== 主容器 ==========
+.@{procedure-prefix} {
+  width: 100%;
+  min-height: 100%;
+  display: flex;
+  flex-direction: column;
+
+  // 最外层 Layout
+  > .pisell-lowcode-layout,
+  > .ant-layout {
+    flex: 1;
+    display: flex;
+    flex-direction: column;
+  }
+
+  // ========== 头部区域 ==========
+  &-header {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    padding: 12px @padding-default;
+    background-color: @color-bg-header;
+    border-bottom: 1px solid @color-border;
+    flex-shrink: 0;
+    height: auto !important;
+    line-height: normal !important;
+    position: sticky;
+    top: 0;
+    z-index: 100;
+    gap: @gap-default;
+
+    // 左侧区域
+    &__left {
+      flex-shrink: 0;
+      z-index: 1;
+      cursor: pointer;
+    }
+
+    // 中间步骤条区域
+    &__center {
+      flex: 1;
+      display: flex;
+      justify-content: center;
+      overflow: hidden;
+    }
+
+    // 右侧区域
+    &__right {
+      flex-shrink: 0;
+      z-index: 1;
+      cursor: pointer;
+    }
+  }
+
+  // ========== 主体区域 ==========
+  &-body {
+    flex: 1;
+    display: flex;
+    flex-direction: column;
+    height: 100%;
+
+    // 主体区域内部的 Layout
+    > .pisell-lowcode-layout,
+    > .ant-layout {
+      flex: 1;
+      display: flex;
+      flex-direction: row;
+      align-items: stretch; // 让子元素拉伸填满高度
+      background-color: @color-bg-body;
+      gap: @gap-default;
+      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;
+          }
+        }
+      }
+    }
+  }
+
+  // 内容区 - 高度 flex:1 填满主体区域
+  &-content {
+    flex: 1;
+    min-width: 0;
+    padding: 12px @padding-default;
+    background-color: @color-bg-content;
+    border-radius: 4px;
+
+    // 纵向排列时的样式
+    .@{procedure-prefix}-body--vertical & {
+      width: 100%;
+      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;
+    top: calc(64px + @gap-default * 2); // header 高度 + body padding + 额外间距
+    overflow-y: auto;
+    align-self: flex-start; // 不拉伸高度
+    background: transparent !important;
+    height: fit-content;
+
+    .@{pisell-layout-prefix}-sider-content{
+      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;
+    }
+
+    // 响应式宽度调整 - 基于容器宽度的类名控制（适用于弹窗场景）
+    // 使用 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;
+    }
+
+    // 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;
+    }
+
+    // 保留媒体查询作为降级方案（当没有提供 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;
+      }
+    }
+
+    // viewportWidth < 744px: 隐藏（仅页面模式，弹窗模式有 responsive-xs 类名不会隐藏）
+    @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;
+      }
+    }
+
+    // ========== 比例模式样式（在基础样式内部，确保优先级） ==========
+    &--ratio {
+      // 比例模式下，使用 CSS 变量的宽度值覆盖固定宽度
+      width: var(--sidebar-ratio-width) !important;
+      max-width: var(--sidebar-ratio-max-width) !important;
+      min-width: 0 !important;
+      flex: var(--sidebar-ratio-flex) !important;
+    }
+  }
+
+  // ========== 底部区域基础样式 ==========
+  &-footer {
+    display: flex;
+    align-items: center;
+    justify-content: flex-end;
+    gap: @gap-default;
+    padding: 12px @padding-default;
+    background-color: @color-bg-footer;
+    border-top: 1px solid @color-border;
+    flex-shrink: 0;
+    height: auto !important;
+    z-index: 100;
+    overflow: hidden; // 防止内容溢出
+
+    // 总结按钮插槽 - 仅移动端显示（< 744px）
+    &__summary {
+      flex-shrink: 0;
+      margin-right: auto;
+      // 默认隐藏（PC 端）
+      display: none;
+      cursor: pointer;
+
+      // 移动端显示
+      @media (max-width: calc(@breakpoint-sm - 1px)) {
+        display: block;
+      }
+    }
+
+    // 主要内容容器（左侧插槽 + 右侧操作按钮）
+    &__content {
+      display: flex;
+      align-items: center;
+      gap: @gap-default;
+      flex: 1;
+      min-width: 0;
+      justify-content: space-between;
+    }
+
+    // 左侧插槽区域
+    &__left {
+      flex-shrink: 0;
+      display: flex;
+      align-items: center;
+      gap: @gap-default;
+    }
+
+    // 右侧操作按钮区域
+    &__actions {
+      display: flex;
+      align-items: center;
+      gap: @gap-default;
+      flex: 1;
+      min-width: 0; // 关键：允许 flex 子元素收缩
+      justify-content: flex-end;
+      overflow: hidden; // 防止内容溢出
+    }
+
+    // ========== Footer 位置模式样式 ==========
+    
+    // 固定在整体底部 - 跟随页面滚动，始终在底部
+    &--fixed-bottom {
+      position: sticky;
+      bottom: 0;
+    }
+
+    // 内嵌在 content 区域底部 - 紧贴内容底部
+    &--fixed-content-bottom {
+      position: relative;
+      margin-top: auto;
+      border-radius: 0 0 4px 4px;
+    }
+
+    // 内嵌在 sidebar 区域底部 - 紧贴 sidebar 底部
+    &--fixed-sidebar-bottom {
+      position: relative;
+      margin-top: auto;
+      border-radius: 0 0 4px 4px;
+    }
+
+    // 悬浮在整体区域 - 固定在视口底部，有阴影
+    &--float-all {
+      position: fixed;
+      bottom: 0;
+      left: 0;
+      right: 0;
+      border-radius: 0;
+      box-shadow: 0 -4px 12px rgba(0, 0, 0, 0.1);
+    }
+
+    // 悬浮在 content 区域 - 绝对定位在 content 底部
+    &--float-content {
+      border-radius: 8px;
+      box-shadow: 0 -4px 12px rgba(0, 0, 0, 0.1);
+      // 具体定位在容器调整中设置
+    }
+
+    // 悬浮在 sidebar 区域（设计默认）- sticky 在 sidebar 底部
+    &--float-sidebar {
+      border-radius: 8px;
+      box-shadow: 0 -4px 12px rgba(0, 0, 0, 0.1);
+      // 具体定位在容器调整中设置
+    }
+  }
+
+  // ========== Footer 位置模式的容器调整 ==========
+  
+  // 悬浮在整体区域 - 需要给内容区域预留 footer 高度
+  &--footer-float-all {
+    // 给内容区域预留空间，避免内容被遮挡
+    .@{procedure-prefix}-content {
+      padding-bottom: calc(@footer-height);
+    }
+  }
+
+  // 当 footer 内嵌在 content 区域底部时
+  &--footer-fixed-content-bottom {
+    .@{procedure-prefix}-content {
+      display: flex;
+      flex-direction: column;
+      
+      // 内容包装器
+      > *:not(.@{procedure-prefix}-footer) {
+        flex: 1;
+      }
+    }
+  }
+
+  // 当 footer 悬浮在 content 区域时
+  &--footer-float-content {
+    // 让整个页面滚动，不是 content 内部滚动
+    .@{procedure-prefix}-body {
+      overflow: visible;
+      
+      > .pisell-lowcode-layout,
+      > .ant-layout {
+        overflow: visible;
+        padding-bottom: 0;
+      }
+    }
+    
+    .@{procedure-prefix}-content {
+      // 不设置 overflow，让内容自然撑开
+      overflow: visible;
+      padding-bottom: 0;
+      
+      // footer 使用 sticky 定位，随页面滚动保持在底部
+      .@{procedure-prefix}-footer--float-content {
+        position: sticky;
+        bottom: 0;
+        margin: 0 -@padding-default;
+        margin-top: auto;
+      }
+    }
+  }
+
+  // 当 footer 内嵌在 sidebar 区域底部时
+  &--footer-fixed-sidebar-bottom {
+    .@{procedure-prefix}-sidebar {
+      display: flex;
+      flex-direction: column;
+      max-height: 100%; // 限制最大高度
+      overflow: hidden;
+      
+      .ant-layout-sider-children {
+        display: flex;
+        flex-direction: column;
+        flex: 1;
+        overflow: hidden;
+        
+        // sidebar 内容区（可滚动）
+        > *:not(.@{procedure-prefix}-footer) {
+          flex: 1;
+          overflow-y: auto;
+        }
+        
+        // footer 固定在底部
+        .@{procedure-prefix}-footer--fixed-sidebar-bottom {
+          flex-shrink: 0;
+        }
+      }
+    }
+  }
+
+  // 当 footer 悬浮在 sidebar 区域时
+  &--footer-float-sidebar {
+    .@{procedure-prefix}-sidebar {
+      display: flex;
+      flex-direction: column;
+      max-height: 100%; // 限制最大高度
+      overflow: hidden;
+      
+      .ant-layout-sider-children {
+        display: flex;
+        flex-direction: column;
+        flex: 1;
+        overflow: hidden;
+        
+        // sidebar 内容区（可滚动）
+        > *:not(.@{procedure-prefix}-footer) {
+          flex: 1;
+          overflow-y: auto;
+        }
+        
+        // footer 悬浮在底部
+        .@{procedure-prefix}-footer--float-sidebar {
+          flex-shrink: 0;
+          position: sticky;
+          bottom: 0;
+          margin:auto 0;
+        }
+      }
+    }
+  }
+
+  // ========== 小屏适配（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;
+      }
+
+      // 第一行：关闭按钮，推到右边
+      &__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;
+      }
+    }
+  }
+
+  // ========== 移动端适配（<744px）：头部一行显示 ==========
+  @media (max-width: calc(@breakpoint-sm - 1px)) {
+    &-header {
+      flex-wrap: nowrap;
+      min-height: auto;
+      padding: 12px @padding-default;
+
+      // 左侧：返回按钮
+      &__left {
+        flex: 0 0 auto;
+      }
+
+      // 中间：步骤条（简化显示当前步骤）
+      &__center {
+        flex: 1;
+        padding: 0 @gap-default;
+        overflow: hidden;
+      }
+
+      // 右侧：关闭按钮
+      &__right {
+        flex: 0 0 auto;
+      }
+    }
+
+    // 主体区域移动端
+    &-body {
+      > .pisell-lowcode-layout,
+      > .ant-layout {
+        padding: @gap-default;
+      }
+    }
+
+    // 内容区占满
+    &-content {
+      width: 100% !important;
+    }
+  }
+}

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

@@ -0,0 +1,24 @@
+import React from 'react';
+/**
+ * FooterActions 底部操作区组件 Props
+ */
+export interface FooterActionsProps {
+    /** 左侧插槽（自定义内容） */
+    leftSlot?: React.ReactNode;
+    /** 操作按钮插槽（右侧按钮组） */
+    children?: React.ReactNode;
+    /** 自定义类名 */
+    className?: string;
+    /** More 按钮文案 */
+    moreText?: string;
+    /** 按钮间距 */
+    gap?: number;
+}
+/**
+ * FooterActions 底部操作区组件
+ * @description 实现底部操作区的左右布局：左侧自定义内容 + 右侧操作按钮（支持溢出收纳）
+ * 收纳规则：从左到右依次收纳（优先级低的先收纳），保留右侧的主要操作按钮
+ * @author Pisell Team
+ */
+declare const FooterActions: React.FC<FooterActionsProps>;
+export default FooterActions;

package/lib/components/PisellProcedure/components/FooterActions.js

@@ -0,0 +1,96 @@
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/components/PisellProcedure/components/FooterActions.tsx
+var FooterActions_exports = {};
+__export(FooterActions_exports, {
+  default: () => FooterActions_default
+});
+module.exports = __toCommonJS(FooterActions_exports);
+var import_react = __toESM(require("react"));
+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 FooterActions = ({
+  leftSlot,
+  children,
+  className,
+  moreText = "More",
+  gap = 16
+}) => {
+  const {
+    containerRef,
+    measureRef,
+    moreButtonRef,
+    leftSlotRef,
+    actionItems,
+    visibleActions,
+    hasOverflow,
+    moreMenuItems
+  } = (0, import_useOverflowActions.useOverflowActions)({ children, gap, moreText });
+  const containerCls = (0, import_utils.mergeClassNames)(
+    "pisell-procedure-footer__content",
+    className
+  );
+  const hasLeftSlot = leftSlot !== void 0 && leftSlot !== null;
+  return /* @__PURE__ */ import_react.default.createElement(import_react.default.Fragment, null, /* @__PURE__ */ import_react.default.createElement(
+    "div",
+    {
+      ref: measureRef,
+      style: {
+        position: "absolute",
+        visibility: "hidden",
+        pointerEvents: "none",
+        display: "flex",
+        gap,
+        whiteSpace: "nowrap",
+        left: -9999,
+        top: -9999
+      },
+      "aria-hidden": "true"
+    },
+    actionItems.map((item, index) => /* @__PURE__ */ import_react.default.createElement("div", { key: index, "data-measure-item": true, style: { flexShrink: 0 } }, item))
+  ), /* @__PURE__ */ import_react.default.createElement(
+    "div",
+    {
+      ref: moreButtonRef,
+      style: {
+        position: "absolute",
+        visibility: "hidden",
+        pointerEvents: "none",
+        left: -9999,
+        top: -9999
+      },
+      "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)));
+};
+FooterActions.displayName = "FooterActions";
+var FooterActions_default = FooterActions;

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

@@ -0,0 +1,39 @@
+import React from 'react';
+import type { ProcedureBodyProps as BodyProps, ProcedureFooterProps, FooterPositionMode, ProcedureMode } from '../types';
+/**
+ * ProcedureBody 子组件 Props
+ */
+export interface ProcedureBodyProps {
+    /** 主体配置 */
+    bodyProps?: BodyProps;
+    /** 底部配置 */
+    footerProps?: ProcedureFooterProps;
+    /** 底部位置模式 */
+    footerPosition: FooterPositionMode;
+    /** 是否显示底部 */
+    showFooter?: boolean;
+    /** 是否显示信息区 */
+    showSidebar?: boolean;
+    /** 自定义类名 */
+    className?: string;
+    /** 移动端弹窗是否打开 */
+    summaryModalOpen?: boolean;
+    /** 打开移动端弹窗 */
+    onOpenSummaryModal?: () => void;
+    /** 关闭移动端弹窗 */
+    onCloseSummaryModal?: () => void;
+    /** 上一步回调 */
+    goPrev?: () => void;
+    /** 下一步回调 */
+    goNext?: () => void;
+    /** 组件使用模式 */
+    mode?: ProcedureMode;
+}
+/**
+ * ProcedureBody 主体区域组件
+ *
+ * @description 包含内容区和信息区的布局容器，支持固定宽度和比例两种布局模式
+ * @author Pisell Team
+ */
+declare const ProcedureBody: React.FC<ProcedureBodyProps>;
+export default ProcedureBody;