@pisell/materials 3.3.77 → 3.3.79

package/lib/components/PisellProcedure/PisellProcedure.js

@@ -0,0 +1,189 @@
+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/PisellProcedure.tsx
+var PisellProcedure_exports = {};
+__export(PisellProcedure_exports, {
+  default: () => PisellProcedure_default
+});
+module.exports = __toCommonJS(PisellProcedure_exports);
+var import_react = __toESM(require("react"));
+var import_pisellLayout = __toESM(require("../pisellLayout"));
+var import_components = require("./components");
+var import_hooks = require("./hooks");
+var import_utils = require("./utils");
+var import_useMobile = require("../../hooks/useMobile");
+var import_PisellProcedure = require("./PisellProcedure.less");
+var PisellProcedure = (0, import_react.forwardRef)(
+  (props, ref) => {
+    const {
+      // 通用属性
+      className,
+      style,
+      mode = "page",
+      showHeader = true,
+      showSidebar = true,
+      showFooter = true,
+      // 步骤控制
+      defaultCurrent = 0,
+      onStepsChange,
+      // 区域配置
+      headerProps,
+      bodyProps,
+      footerProps,
+      // 事件回调
+      onClose,
+      onPrev,
+      onNext,
+      onFirstStepBack,
+      onBackConfirm,
+      onCloseConfirm,
+      // 低代码属性
+      __designMode,
+      __id,
+      ...other
+    } = props;
+    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,
+      onPrev,
+      onNext,
+      onStepsChange
+    });
+    const [summaryModalOpen, setSummaryModalOpen] = (0, import_react.useState)(false);
+    const openSummaryModal = (0, import_react.useCallback)(() => setSummaryModalOpen(true), []);
+    const closeSummaryModal = (0, import_react.useCallback)(() => setSummaryModalOpen(false), []);
+    (0, import_react.useImperativeHandle)(
+      ref,
+      () => ({
+        /**
+         * 跳转到上一步
+         */
+        goPrev: () => goPrev(),
+        /**
+         * 跳转到下一步
+         */
+        goNext: () => goNext(),
+        /**
+         * 跳转到指定步骤
+         */
+        goToStep: (step) => goToStep(step),
+        /**
+         * 获取当前步骤索引
+         */
+        getCurrentStep: () => currentStep,
+        /**
+         * 打开移动端总结弹窗
+         */
+        openSummaryModal,
+        /**
+         * 关闭移动端总结弹窗
+         */
+        closeSummaryModal
+      }),
+      [
+        goPrev,
+        goNext,
+        goToStep,
+        currentStep,
+        openSummaryModal,
+        closeSummaryModal
+      ]
+    );
+    const footerPosition = (0, import_react.useMemo)(() => {
+      if (isMobile && mode !== "modal") return "float-all";
+      return (footerProps == null ? void 0 : footerProps.position) || "float-sidebar";
+    }, [mode, isMobile, footerProps == null ? void 0 : footerProps.position]);
+    const containerCls = (0, import_react.useMemo)(() => {
+      return (0, import_utils.mergeClassNames)(
+        "pisell-procedure",
+        className,
+        // 弹窗模式添加 --modal 修饰类，用于禁用媒体查询
+        mode === "modal" && "pisell-procedure--modal",
+        (0, import_utils.modifierClassName)("pisell-procedure", `footer-${footerPosition}`)
+      );
+    }, [className, mode, footerPosition]);
+    const footerIsGlobal = (0, import_utils.isFooterGlobal)(footerPosition);
+    return /* @__PURE__ */ import_react.default.createElement(
+      "div",
+      {
+        className: containerCls,
+        style,
+        "data-component": "pisell-procedure",
+        "data-id": __id,
+        ...other
+      },
+      /* @__PURE__ */ import_react.default.createElement(import_pisellLayout.default, null, showHeader && /* @__PURE__ */ import_react.default.createElement(
+        import_components.ProcedureHeader,
+        {
+          headerProps,
+          currentStep,
+          goPrev,
+          onClose,
+          onFirstStepBack,
+          onBackConfirm,
+          onCloseConfirm,
+          goToStep
+        }
+      ), /* @__PURE__ */ import_react.default.createElement(
+        import_components.ProcedureBody,
+        {
+          bodyProps,
+          footerProps,
+          footerPosition,
+          showFooter: showFooter && !footerIsGlobal,
+          showSidebar,
+          summaryModalOpen,
+          onOpenSummaryModal: openSummaryModal,
+          onCloseSummaryModal: closeSummaryModal,
+          goPrev,
+          goNext,
+          mode
+        }
+      ), showFooter && footerIsGlobal && /* @__PURE__ */ import_react.default.createElement(
+        import_components.ProcedureFooter,
+        {
+          footerProps,
+          position: footerPosition,
+          isGlobal: true,
+          sidebarContent: bodyProps == null ? void 0 : bodyProps.sidebarSlot,
+          summaryModalOpen,
+          onOpenSummaryModal: openSummaryModal,
+          onCloseSummaryModal: closeSummaryModal,
+          goPrev,
+          goNext,
+          mode
+        }
+      ))
+    );
+  }
+);
+PisellProcedure.displayName = "PisellProcedure";
+var PisellProcedure_default = PisellProcedure;

package/lib/components/PisellProcedure/PisellProcedure.less

@@ -0,0 +1,529 @@
+@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
+@sidebar-width-880: 344px;  // 880px-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%;
+    overflow-y: auto;
+
+    // 主体区域内部的 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;
+    }
+
+    // ========== 布局模式：比例布局 ==========
+    &--ratio {
+      // 移动端：比例模式下也隐藏信息区（弹窗模式下不执行）
+      .@{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;
+            }
+          }
+        }
+      }
+    }
+  }
+
+  // 内容区 - 高度 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% !important;
+      flex: 1 1 auto;
+    }
+  }
+
+  // 信息区 - 高度自适应内容，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;
+    overflow-y: auto;
+    align-self: flex-start; // 不拉伸高度
+    background: transparent !important;
+    height: 100% !important;
+
+    .@{pisell-layout-prefix}-sider-content{
+      overflow: hidden !important;
+      display: flex;
+      flex-direction: column;
+
+      .@{procedure-prefix}-footer{
+        flex-shrink: 0;
+      }
+    }
+
+    // ≥1133px: 固定宽度 405px
+    @media (min-width: @breakpoint-xl) {
+      width: @sidebar-width-xl;
+    }
+    // 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;
+    }
+
+    // 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: slider区域隐藏  
+    @media (max-width: calc(@breakpoint-sm - 1px)) {
+        display: none;
+    }
+
+    // ========== 比例模式样式（在基础样式内部，确保优先级） ==========
+    &--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;
+    }
+  }
+
+  .@{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;
+    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;
+
+      // 移动端显示（仅页面模式）
+      .@{procedure-prefix}:not(.@{procedure-prefix}--modal) & {
+        @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: relative;
+      bottom: auto;
+      flex-shrink: 0;
+      margin-top: auto;
+    }
+
+    // 内嵌在 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: 0;
+        }
+      }
+    }
+  }
+
+  // ========== 小屏适配（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;
+        }
+
+        // 第一行：关闭按钮，推到右边
+        .@{procedure-prefix}-header__right {
+          order: 2;
+          flex: 0 0 auto;
+          margin-left: 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)) {
+      .@{procedure-prefix}-header {
+        flex-wrap: nowrap;
+        min-height: auto;
+        padding: 12px @padding-default;
+
+        // 左侧：返回按钮
+        .@{procedure-prefix}-header__left {
+          flex: 0 0 auto;
+        }
+
+        // 中间：步骤条（简化显示当前步骤）
+        .@{procedure-prefix}-header__center {
+          flex: 1;
+          padding: 0 @gap-default;
+          overflow: hidden;
+        }
+
+        // 右侧：关闭按钮
+        .@{procedure-prefix}-header__right {
+          flex: 0 0 auto;
+        }
+      }
+
+      // 主体区域移动端
+      .@{procedure-prefix}-body {
+        > .pisell-lowcode-layout,
+        > .ant-layout {
+          padding: @gap-default;
+        }
+      }
+
+      // 内容区占满
+      .@{procedure-prefix}-content {
+        width: 100% !important;
+      }
+    }
+  }
+}