@pisell/materials 6.3.22 → 6.3.24

package/lib/components/PisellProcedure/PisellProcedure.stories.js

@@ -0,0 +1,925 @@
+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.stories.tsx
+var PisellProcedure_stories_exports = {};
+__export(PisellProcedure_stories_exports, {
+  BackConfirmModal: () => BackConfirmModal,
+  BodyContentOrderReverse: () => BodyContentOrderReverse,
+  BodyFixedLayout: () => BodyFixedLayout,
+  BodyRatioLayout: () => BodyRatioLayout,
+  BodyVerticalLayout: () => BodyVerticalLayout,
+  CloseConfirmModal: () => CloseConfirmModal,
+  Default: () => Default,
+  DisableOverflow: () => DisableOverflow,
+  FooterFixedBottom: () => FooterFixedBottom,
+  FooterFixedContentBottom: () => FooterFixedContentBottom,
+  FooterFixedSidebarBottom: () => FooterFixedSidebarBottom,
+  FooterFloatAll: () => FooterFloatAll,
+  FooterFloatContent: () => FooterFloatContent,
+  FooterFloatSidebar: () => FooterFloatSidebar,
+  FormWizard: () => FormWizard,
+  HeaderSlotDefault: () => HeaderSlotDefault,
+  HeaderSlotReverse: () => HeaderSlotReverse,
+  HideSteps: () => HideSteps,
+  InteractionTest: () => InteractionTest,
+  MinimalConfig: () => MinimalConfig,
+  MobileSummaryButton: () => MobileSummaryButton,
+  ModalMode: () => ModalMode,
+  OverflowActions: () => OverflowActions,
+  PageMode: () => PageMode,
+  RegistrationFlow: () => RegistrationFlow,
+  ShoppingFlow: () => ShoppingFlow,
+  ShowBackOnFirstStep: () => ShowBackOnFirstStep,
+  StepControl: () => StepControl,
+  StepIntercept: () => StepIntercept,
+  WithoutFooter: () => WithoutFooter,
+  WithoutHeader: () => WithoutHeader,
+  WithoutSidebar: () => WithoutSidebar,
+  default: () => PisellProcedure_stories_default
+});
+module.exports = __toCommonJS(PisellProcedure_stories_exports);
+var import_test = require("@storybook/test");
+var import_antd = require("antd");
+var import_icons = require("@ant-design/icons");
+var import_PisellProcedure = __toESM(require("./PisellProcedure"));
+var meta = {
+  title: "Pro Components/PisellProcedure",
+  component: import_PisellProcedure.default,
+  parameters: {
+    layout: "fullscreen",
+    docs: {
+      description: {
+        component: "流程容器组件，用于管理多步骤流程的复合容器，支持步骤控制、区域配置和响应式布局。"
+      }
+    }
+  },
+  tags: ["autodocs"],
+  argTypes: {
+    mode: {
+      control: "select",
+      options: ["page", "modal"],
+      description: "组件使用模式"
+    },
+    showHeader: {
+      control: "boolean",
+      description: "是否显示头部区域"
+    },
+    showSidebar: {
+      control: "boolean",
+      description: "是否显示信息区（侧边栏）"
+    },
+    showFooter: {
+      control: "boolean",
+      description: "是否显示底部区域"
+    },
+    defaultCurrent: {
+      control: "number",
+      description: "默认当前步骤"
+    }
+  }
+};
+var PisellProcedure_stories_default = meta;
+var Default = {
+  args: {
+    headerProps: {
+      left: /* @__PURE__ */ React.createElement(import_antd.Button, { icon: /* @__PURE__ */ React.createElement(import_icons.ArrowLeftOutlined, null) }, "返回"),
+      right: /* @__PURE__ */ React.createElement(import_antd.Button, { icon: /* @__PURE__ */ React.createElement(import_icons.CloseOutlined, null) }, "关闭"),
+      stepsProps: {
+        items: [
+          { title: "第一步", description: "基础信息" },
+          { title: "第二步", description: "详细配置" },
+          { title: "第三步", description: "确认提交" }
+        ]
+      }
+    },
+    bodyProps: {
+      contentSlot: /* @__PURE__ */ React.createElement("div", { style: { padding: 24, minHeight: 400 } }, /* @__PURE__ */ React.createElement("h2", null, "主要内容区域"), /* @__PURE__ */ React.createElement("p", null, "这里是步骤的主要内容，可以放置表单、列表等任何内容。")),
+      sidebarSlot: /* @__PURE__ */ React.createElement("div", { style: { padding: 24 } }, /* @__PURE__ */ React.createElement("h3", null, "信息摘要"), /* @__PURE__ */ React.createElement("p", null, "这里是信息摘要区域，可以显示订单信息、配置预览等。"))
+    },
+    footerProps: {
+      actions: /* @__PURE__ */ React.createElement(import_antd.Button, { type: "primary" }, "下一步")
+    }
+  }
+};
+var PageMode = {
+  args: {
+    mode: "page",
+    headerProps: {
+      stepsProps: {
+        items: [
+          { title: "第一步" },
+          { title: "第二步" },
+          { title: "第三步" }
+        ]
+      }
+    },
+    bodyProps: {
+      contentSlot: /* @__PURE__ */ React.createElement("div", { style: { padding: 24, minHeight: 400 } }, /* @__PURE__ */ React.createElement("h2", null, "页面模式"), /* @__PURE__ */ React.createElement("p", null, "支持响应式布局，移动端会自动调整")),
+      sidebarSlot: /* @__PURE__ */ React.createElement("div", { style: { padding: 24 } }, /* @__PURE__ */ React.createElement("h3", null, "信息摘要"))
+    },
+    footerProps: {
+      actions: /* @__PURE__ */ React.createElement(import_antd.Button, { type: "primary" }, "下一步")
+    }
+  }
+};
+var ModalMode = {
+  args: {
+    mode: "modal",
+    headerProps: {
+      stepsProps: {
+        items: [
+          { title: "第一步" },
+          { title: "第二步" },
+          { title: "第三步" }
+        ]
+      }
+    },
+    bodyProps: {
+      contentSlot: /* @__PURE__ */ React.createElement("div", { style: { padding: 24, minHeight: 300 } }, /* @__PURE__ */ React.createElement("h2", null, "弹窗模式"), /* @__PURE__ */ React.createElement("p", null, "不应用移动端模式，保持固定布局")),
+      sidebarSlot: /* @__PURE__ */ React.createElement("div", { style: { padding: 24 } }, /* @__PURE__ */ React.createElement("h3", null, "信息摘要"))
+    },
+    footerProps: {
+      position: "float-sidebar",
+      actions: /* @__PURE__ */ React.createElement(import_antd.Button, { type: "primary" }, "下一步")
+    }
+  },
+  decorators: [
+    (Story) => /* @__PURE__ */ React.createElement(
+      "div",
+      {
+        style: {
+          width: 800,
+          height: 600,
+          border: "1px solid #d9d9d9",
+          borderRadius: 8,
+          overflow: "hidden",
+          margin: "20px auto"
+        }
+      },
+      /* @__PURE__ */ React.createElement(Story, null)
+    )
+  ]
+};
+var StepControl = {
+  args: {
+    defaultCurrent: 0,
+    headerProps: {
+      stepsProps: {
+        items: [
+          { title: "基础信息" },
+          { title: "详细配置" },
+          { title: "确认提交" }
+        ]
+      }
+    },
+    bodyProps: {
+      contentSlot: /* @__PURE__ */ React.createElement("div", { style: { padding: 24, minHeight: 400 } }, /* @__PURE__ */ React.createElement("h2", null, "步骤控制演示"), /* @__PURE__ */ React.createElement("p", null, "点击下方按钮可以切换步骤")),
+      sidebarSlot: /* @__PURE__ */ React.createElement("div", { style: { padding: 24 } }, /* @__PURE__ */ React.createElement("h3", null, "信息摘要"), /* @__PURE__ */ React.createElement("p", null, "步骤相关信息"))
+    },
+    footerProps: {
+      actions: /* @__PURE__ */ React.createElement(import_antd.Space, null, /* @__PURE__ */ React.createElement(import_antd.Button, null, "上一步"), /* @__PURE__ */ React.createElement(import_antd.Button, { type: "primary" }, "下一步"))
+    },
+    onStepsChange: (result) => {
+      console.log("步骤变化:", result);
+    }
+  }
+};
+var StepIntercept = {
+  args: {
+    defaultCurrent: 0,
+    headerProps: {
+      stepsProps: {
+        items: [
+          { title: "第一步" },
+          { title: "第二步" },
+          { title: "第三步" }
+        ]
+      }
+    },
+    bodyProps: {
+      contentSlot: /* @__PURE__ */ React.createElement("div", { style: { padding: 24, minHeight: 400 } }, /* @__PURE__ */ React.createElement("h2", null, "步骤拦截演示"), /* @__PURE__ */ React.createElement("p", null, "可以通过 onNext/onPrev 返回 false 来阻止步骤切换"), /* @__PURE__ */ React.createElement("p", { style: { color: "#ff4d4f" } }, "提示：在控制台中取消注释 return false 来测试拦截功能")),
+      sidebarSlot: /* @__PURE__ */ React.createElement("div", { style: { padding: 24 } }, /* @__PURE__ */ React.createElement("h3", null, "信息摘要"))
+    },
+    footerProps: {
+      actions: /* @__PURE__ */ React.createElement(import_antd.Space, null, /* @__PURE__ */ React.createElement(import_antd.Button, null, "上一步"), /* @__PURE__ */ React.createElement(import_antd.Button, { type: "primary" }, "下一步"))
+    },
+    onNext: (current) => {
+      console.log("下一步，当前步骤:", current);
+    },
+    onPrev: (current) => {
+      console.log("上一步，当前步骤:", current);
+    }
+  }
+};
+var WithoutSidebar = {
+  args: {
+    showSidebar: false,
+    headerProps: {
+      stepsProps: {
+        items: [
+          { title: "第一步" },
+          { title: "第二步" },
+          { title: "第三步" }
+        ]
+      }
+    },
+    bodyProps: {
+      contentSlot: /* @__PURE__ */ React.createElement("div", { style: { padding: 24, minHeight: 400 } }, /* @__PURE__ */ React.createElement("h2", null, "主要内容"), /* @__PURE__ */ React.createElement("p", null, "不显示侧边栏时的布局，内容区将占满整个主体区域"))
+    },
+    footerProps: {
+      position: "fixed-bottom",
+      actions: /* @__PURE__ */ React.createElement(import_antd.Button, { type: "primary" }, "下一步")
+    }
+  }
+};
+var WithoutHeader = {
+  args: {
+    showHeader: false,
+    bodyProps: {
+      contentSlot: /* @__PURE__ */ React.createElement("div", { style: { padding: 24, minHeight: 400 } }, /* @__PURE__ */ React.createElement("h2", null, "主要内容"), /* @__PURE__ */ React.createElement("p", null, "不显示头部时的布局")),
+      sidebarSlot: /* @__PURE__ */ React.createElement("div", { style: { padding: 24 } }, /* @__PURE__ */ React.createElement("h3", null, "信息摘要"))
+    },
+    footerProps: {
+      actions: /* @__PURE__ */ React.createElement(import_antd.Button, { type: "primary" }, "提交")
+    }
+  }
+};
+var WithoutFooter = {
+  args: {
+    showFooter: false,
+    headerProps: {
+      stepsProps: {
+        items: [
+          { title: "第一步" },
+          { title: "第二步" },
+          { title: "第三步" }
+        ]
+      }
+    },
+    bodyProps: {
+      contentSlot: /* @__PURE__ */ React.createElement("div", { style: { padding: 24, minHeight: 400 } }, /* @__PURE__ */ React.createElement("h2", null, "主要内容"), /* @__PURE__ */ React.createElement("p", null, "不显示底部操作区时的布局")),
+      sidebarSlot: /* @__PURE__ */ React.createElement("div", { style: { padding: 24 } }, /* @__PURE__ */ React.createElement("h3", null, "信息摘要"))
+    }
+  }
+};
+var MinimalConfig = {
+  args: {
+    showHeader: false,
+    showSidebar: false,
+    showFooter: false,
+    bodyProps: {
+      contentSlot: /* @__PURE__ */ React.createElement("div", { style: { padding: 24, minHeight: 400 } }, /* @__PURE__ */ React.createElement("h2", null, "最小配置"), /* @__PURE__ */ React.createElement("p", null, "仅显示主体内容区域"))
+    }
+  }
+};
+var HeaderSlotDefault = {
+  args: {
+    headerProps: {
+      slotOrder: "default",
+      left: /* @__PURE__ */ React.createElement(import_antd.Button, { icon: /* @__PURE__ */ React.createElement(import_icons.ArrowLeftOutlined, null), type: "text" }, "返回"),
+      right: /* @__PURE__ */ React.createElement(import_antd.Button, { icon: /* @__PURE__ */ React.createElement(import_icons.CloseOutlined, null), type: "text" }, "关闭"),
+      stepsProps: {
+        items: [
+          { title: "第一步" },
+          { title: "第二步" },
+          { title: "第三步" }
+        ]
+      }
+    },
+    bodyProps: {
+      contentSlot: /* @__PURE__ */ React.createElement("div", { style: { padding: 24, minHeight: 400 } }, /* @__PURE__ */ React.createElement("h2", null, "头部插槽默认顺序"), /* @__PURE__ */ React.createElement("p", null, "返回按钮在左，关闭按钮在右")),
+      sidebarSlot: /* @__PURE__ */ React.createElement("div", { style: { padding: 24 } }, /* @__PURE__ */ React.createElement("h3", null, "信息摘要"))
+    },
+    footerProps: {
+      actions: /* @__PURE__ */ React.createElement(import_antd.Button, { type: "primary" }, "下一步")
+    }
+  }
+};
+var HeaderSlotReverse = {
+  args: {
+    headerProps: {
+      slotOrder: "reverse",
+      left: /* @__PURE__ */ React.createElement(import_antd.Button, { icon: /* @__PURE__ */ React.createElement(import_icons.ArrowLeftOutlined, null), type: "text" }, "返回"),
+      right: /* @__PURE__ */ React.createElement(import_antd.Button, { icon: /* @__PURE__ */ React.createElement(import_icons.CloseOutlined, null), type: "text" }, "关闭"),
+      stepsProps: {
+        items: [
+          { title: "第一步" },
+          { title: "第二步" },
+          { title: "第三步" }
+        ]
+      }
+    },
+    bodyProps: {
+      contentSlot: /* @__PURE__ */ React.createElement("div", { style: { padding: 24, minHeight: 400 } }, /* @__PURE__ */ React.createElement("h2", null, "头部插槽反转顺序"), /* @__PURE__ */ React.createElement("p", null, "返回按钮在右，关闭按钮在左")),
+      sidebarSlot: /* @__PURE__ */ React.createElement("div", { style: { padding: 24 } }, /* @__PURE__ */ React.createElement("h3", null, "信息摘要"))
+    },
+    footerProps: {
+      actions: /* @__PURE__ */ React.createElement(import_antd.Button, { type: "primary" }, "下一步")
+    }
+  }
+};
+var HideSteps = {
+  args: {
+    headerProps: {
+      showSteps: false,
+      left: /* @__PURE__ */ React.createElement(import_antd.Button, { icon: /* @__PURE__ */ React.createElement(import_icons.ArrowLeftOutlined, null) }, "返回"),
+      right: /* @__PURE__ */ React.createElement(import_antd.Button, { icon: /* @__PURE__ */ React.createElement(import_icons.CloseOutlined, null) }, "关闭")
+    },
+    bodyProps: {
+      contentSlot: /* @__PURE__ */ React.createElement("div", { style: { padding: 24, minHeight: 400 } }, /* @__PURE__ */ React.createElement("h2", null, "隐藏步骤条"), /* @__PURE__ */ React.createElement("p", null, "头部只显示返回和关闭按钮")),
+      sidebarSlot: /* @__PURE__ */ React.createElement("div", { style: { padding: 24 } }, /* @__PURE__ */ React.createElement("h3", null, "信息摘要"))
+    },
+    footerProps: {
+      actions: /* @__PURE__ */ React.createElement(import_antd.Button, { type: "primary" }, "提交")
+    }
+  }
+};
+var ShowBackOnFirstStep = {
+  args: {
+    defaultCurrent: 0,
+    headerProps: {
+      showBackOnFirstStep: true,
+      left: /* @__PURE__ */ React.createElement(import_antd.Button, { icon: /* @__PURE__ */ React.createElement(import_icons.ArrowLeftOutlined, null) }, "返回"),
+      stepsProps: {
+        items: [
+          { title: "第一步" },
+          { title: "第二步" },
+          { title: "第三步" }
+        ]
+      }
+    },
+    bodyProps: {
+      contentSlot: /* @__PURE__ */ React.createElement("div", { style: { padding: 24, minHeight: 400 } }, /* @__PURE__ */ React.createElement("h2", null, "第一步显示返回按钮"), /* @__PURE__ */ React.createElement("p", null, "即使在第一步，也显示返回按钮")),
+      sidebarSlot: /* @__PURE__ */ React.createElement("div", { style: { padding: 24 } }, /* @__PURE__ */ React.createElement("h3", null, "信息摘要"))
+    },
+    footerProps: {
+      actions: /* @__PURE__ */ React.createElement(import_antd.Button, { type: "primary" }, "下一步")
+    },
+    onFirstStepBack: () => {
+      console.log("点击了第一步的返回按钮");
+    }
+  }
+};
+var BackConfirmModal = {
+  args: {
+    defaultCurrent: 1,
+    headerProps: {
+      left: /* @__PURE__ */ React.createElement(import_antd.Button, { icon: /* @__PURE__ */ React.createElement(import_icons.ArrowLeftOutlined, null) }, "返回"),
+      stepsProps: {
+        items: [
+          { title: "第一步" },
+          { title: "第二步" },
+          { title: "第三步" }
+        ]
+      },
+      backConfirmModal: {
+        enabled: true,
+        title: "确认返回",
+        describe: "确定要返回上一步吗？当前填写的内容将不会保存"
+      }
+    },
+    bodyProps: {
+      contentSlot: /* @__PURE__ */ React.createElement("div", { style: { padding: 24, minHeight: 400 } }, /* @__PURE__ */ React.createElement("h2", null, "返回确认弹窗"), /* @__PURE__ */ React.createElement("p", null, "点击返回按钮或上一步会弹出确认弹窗")),
+      sidebarSlot: /* @__PURE__ */ React.createElement("div", { style: { padding: 24 } }, /* @__PURE__ */ React.createElement("h3", null, "信息摘要"))
+    },
+    footerProps: {
+      actions: /* @__PURE__ */ React.createElement(import_antd.Space, null, /* @__PURE__ */ React.createElement(import_antd.Button, null, "上一步"), /* @__PURE__ */ React.createElement(import_antd.Button, { type: "primary" }, "下一步"))
+    },
+    onBackConfirm: (action) => {
+      console.log("返回确认:", action);
+    }
+  }
+};
+var CloseConfirmModal = {
+  args: {
+    headerProps: {
+      right: /* @__PURE__ */ React.createElement(import_antd.Button, { icon: /* @__PURE__ */ React.createElement(import_icons.CloseOutlined, null) }, "关闭"),
+      stepsProps: {
+        items: [
+          { title: "第一步" },
+          { title: "第二步" },
+          { title: "第三步" }
+        ]
+      },
+      closeConfirmModal: {
+        enabled: true,
+        title: "确认关闭",
+        describe: "确定要关闭吗？所有未保存的数据将丢失"
+      }
+    },
+    bodyProps: {
+      contentSlot: /* @__PURE__ */ React.createElement("div", { style: { padding: 24, minHeight: 400 } }, /* @__PURE__ */ React.createElement("h2", null, "关闭确认弹窗"), /* @__PURE__ */ React.createElement("p", null, "点击关闭按钮会弹出确认弹窗")),
+      sidebarSlot: /* @__PURE__ */ React.createElement("div", { style: { padding: 24 } }, /* @__PURE__ */ React.createElement("h3", null, "信息摘要"))
+    },
+    footerProps: {
+      actions: /* @__PURE__ */ React.createElement(import_antd.Button, { type: "primary" }, "下一步")
+    },
+    onCloseConfirm: (action) => {
+      console.log("关闭确认:", action);
+    },
+    onClose: () => {
+      console.log("关闭按钮被点击");
+    }
+  }
+};
+var BodyRatioLayout = {
+  args: {
+    headerProps: {
+      stepsProps: {
+        items: [
+          { title: "第一步" },
+          { title: "第二步" },
+          { title: "第三步" }
+        ]
+      }
+    },
+    bodyProps: {
+      layoutMode: "ratio",
+      layoutRatio: "6:4",
+      contentSlot: /* @__PURE__ */ React.createElement("div", { style: { padding: 24, minHeight: 400 } }, /* @__PURE__ */ React.createElement("h2", null, "主要内容（60%）"), /* @__PURE__ */ React.createElement("p", null, "使用比例布局，内容区占 60%")),
+      sidebarSlot: /* @__PURE__ */ React.createElement("div", { style: { padding: 24 } }, /* @__PURE__ */ React.createElement("h3", null, "信息摘要（40%）"), /* @__PURE__ */ React.createElement("p", null, "侧边栏占 40%"))
+    },
+    footerProps: {
+      actions: /* @__PURE__ */ React.createElement(import_antd.Button, { type: "primary" }, "下一步")
+    }
+  }
+};
+var BodyFixedLayout = {
+  args: {
+    headerProps: {
+      stepsProps: {
+        items: [
+          { title: "第一步" },
+          { title: "第二步" },
+          { title: "第三步" }
+        ]
+      }
+    },
+    bodyProps: {
+      layoutMode: "fixed",
+      contentSlot: /* @__PURE__ */ React.createElement("div", { style: { padding: 24, minHeight: 400 } }, /* @__PURE__ */ React.createElement("h2", null, "主要内容（自适应）"), /* @__PURE__ */ React.createElement("p", null, "使用固定布局，内容区自适应宽度")),
+      sidebarSlot: /* @__PURE__ */ React.createElement("div", { style: { padding: 24 } }, /* @__PURE__ */ React.createElement("h3", null, "信息摘要（固定宽度）"), /* @__PURE__ */ React.createElement("p", null, "侧边栏使用固定宽度"))
+    },
+    footerProps: {
+      actions: /* @__PURE__ */ React.createElement(import_antd.Button, { type: "primary" }, "下一步")
+    }
+  }
+};
+var BodyVerticalLayout = {
+  args: {
+    headerProps: {
+      stepsProps: {
+        items: [
+          { title: "第一步" },
+          { title: "第二步" },
+          { title: "第三步" }
+        ]
+      }
+    },
+    bodyProps: {
+      direction: "vertical",
+      contentSlot: /* @__PURE__ */ React.createElement("div", { style: { padding: 24, minHeight: 300 } }, /* @__PURE__ */ React.createElement("h2", null, "主要内容（上方）"), /* @__PURE__ */ React.createElement("p", null, "垂直布局，内容区在上方")),
+      sidebarSlot: /* @__PURE__ */ React.createElement("div", { style: { padding: 24 } }, /* @__PURE__ */ React.createElement("h3", null, "信息摘要（下方）"), /* @__PURE__ */ React.createElement("p", null, "侧边栏在下方"))
+    },
+    footerProps: {
+      position: "fixed-bottom",
+      actions: /* @__PURE__ */ React.createElement(import_antd.Button, { type: "primary" }, "下一步")
+    }
+  }
+};
+var BodyContentOrderReverse = {
+  args: {
+    headerProps: {
+      stepsProps: {
+        items: [
+          { title: "第一步" },
+          { title: "第二步" },
+          { title: "第三步" }
+        ]
+      }
+    },
+    bodyProps: {
+      contentOrder: "sidebar-first",
+      layoutMode: "ratio",
+      layoutRatio: "7:3",
+      contentSlot: /* @__PURE__ */ React.createElement("div", { style: { padding: 24, minHeight: 400 } }, /* @__PURE__ */ React.createElement("h2", null, "主要内容（右侧）"), /* @__PURE__ */ React.createElement("p", null, "侧边栏在前（左侧），内容区在后（右侧）")),
+      sidebarSlot: /* @__PURE__ */ React.createElement("div", { style: { padding: 24 } }, /* @__PURE__ */ React.createElement("h3", null, "信息摘要（左侧）"), /* @__PURE__ */ React.createElement("p", null, "侧边栏占 30%"))
+    },
+    footerProps: {
+      position: "float-content",
+      actions: /* @__PURE__ */ React.createElement(import_antd.Button, { type: "primary" }, "下一步")
+    }
+  }
+};
+var FooterFloatSidebar = {
+  args: {
+    headerProps: {
+      stepsProps: {
+        items: [
+          { title: "第一步" },
+          { title: "第二步" },
+          { title: "第三步" }
+        ]
+      }
+    },
+    bodyProps: {
+      contentSlot: /* @__PURE__ */ React.createElement("div", { style: { padding: 24, minHeight: 600 } }, /* @__PURE__ */ React.createElement("h2", null, "主要内容"), /* @__PURE__ */ React.createElement("p", null, "底部操作区悬浮在侧边栏区域")),
+      sidebarSlot: /* @__PURE__ */ React.createElement("div", { style: { padding: 24 } }, /* @__PURE__ */ React.createElement("h3", null, "信息摘要"), /* @__PURE__ */ React.createElement("p", null, "侧边栏内容"))
+    },
+    footerProps: {
+      position: "float-sidebar",
+      leftSlot: /* @__PURE__ */ React.createElement("div", null, "总价：¥999"),
+      actions: /* @__PURE__ */ React.createElement(import_antd.Space, null, /* @__PURE__ */ React.createElement(import_antd.Button, null, "上一步"), /* @__PURE__ */ React.createElement(import_antd.Button, { type: "primary" }, "下一步"))
+    }
+  }
+};
+var FooterFixedBottom = {
+  args: {
+    headerProps: {
+      stepsProps: {
+        items: [
+          { title: "第一步" },
+          { title: "第二步" },
+          { title: "第三步" }
+        ]
+      }
+    },
+    bodyProps: {
+      contentSlot: /* @__PURE__ */ React.createElement("div", { style: { padding: 24, minHeight: 600 } }, /* @__PURE__ */ React.createElement("h2", null, "主要内容"), /* @__PURE__ */ React.createElement("p", null, "底部操作区固定在整体底部")),
+      sidebarSlot: /* @__PURE__ */ React.createElement("div", { style: { padding: 24 } }, /* @__PURE__ */ React.createElement("h3", null, "信息摘要"))
+    },
+    footerProps: {
+      position: "fixed-bottom",
+      leftSlot: /* @__PURE__ */ React.createElement("div", null, "总价：¥999"),
+      actions: /* @__PURE__ */ React.createElement(import_antd.Space, null, /* @__PURE__ */ React.createElement(import_antd.Button, null, "上一步"), /* @__PURE__ */ React.createElement(import_antd.Button, { type: "primary" }, "下一步"))
+    }
+  }
+};
+var FooterFloatAll = {
+  args: {
+    headerProps: {
+      stepsProps: {
+        items: [
+          { title: "第一步" },
+          { title: "第二步" },
+          { title: "第三步" }
+        ]
+      }
+    },
+    bodyProps: {
+      contentSlot: /* @__PURE__ */ React.createElement("div", { style: { padding: 24, minHeight: 600 } }, /* @__PURE__ */ React.createElement("h2", null, "主要内容"), /* @__PURE__ */ React.createElement("p", null, "底部操作区悬浮在整体区域（移动端默认）")),
+      sidebarSlot: /* @__PURE__ */ React.createElement("div", { style: { padding: 24 } }, /* @__PURE__ */ React.createElement("h3", null, "信息摘要"))
+    },
+    footerProps: {
+      position: "float-all",
+      leftSlot: /* @__PURE__ */ React.createElement("div", null, "总价：¥999"),
+      actions: /* @__PURE__ */ React.createElement(import_antd.Space, null, /* @__PURE__ */ React.createElement(import_antd.Button, null, "上一步"), /* @__PURE__ */ React.createElement(import_antd.Button, { type: "primary" }, "下一步"))
+    }
+  }
+};
+var FooterFloatContent = {
+  args: {
+    headerProps: {
+      stepsProps: {
+        items: [
+          { title: "第一步" },
+          { title: "第二步" },
+          { title: "第三步" }
+        ]
+      }
+    },
+    bodyProps: {
+      contentSlot: /* @__PURE__ */ React.createElement("div", { style: { padding: 24, minHeight: 600 } }, /* @__PURE__ */ React.createElement("h2", null, "主要内容"), /* @__PURE__ */ React.createElement("p", null, "底部操作区悬浮在内容区域")),
+      sidebarSlot: /* @__PURE__ */ React.createElement("div", { style: { padding: 24 } }, /* @__PURE__ */ React.createElement("h3", null, "信息摘要"))
+    },
+    footerProps: {
+      position: "float-content",
+      leftSlot: /* @__PURE__ */ React.createElement("div", null, "总价：¥999"),
+      actions: /* @__PURE__ */ React.createElement(import_antd.Space, null, /* @__PURE__ */ React.createElement(import_antd.Button, null, "上一步"), /* @__PURE__ */ React.createElement(import_antd.Button, { type: "primary" }, "下一步"))
+    }
+  }
+};
+var FooterFixedContentBottom = {
+  args: {
+    headerProps: {
+      stepsProps: {
+        items: [
+          { title: "第一步" },
+          { title: "第二步" },
+          { title: "第三步" }
+        ]
+      }
+    },
+    bodyProps: {
+      contentSlot: /* @__PURE__ */ React.createElement("div", { style: { padding: 24, minHeight: 400 } }, /* @__PURE__ */ React.createElement("h2", null, "主要内容"), /* @__PURE__ */ React.createElement("p", null, "底部操作区内嵌在内容区底部")),
+      sidebarSlot: /* @__PURE__ */ React.createElement("div", { style: { padding: 24 } }, /* @__PURE__ */ React.createElement("h3", null, "信息摘要"))
+    },
+    footerProps: {
+      position: "fixed-content-bottom",
+      leftSlot: /* @__PURE__ */ React.createElement("div", null, "总价：¥999"),
+      actions: /* @__PURE__ */ React.createElement(import_antd.Space, null, /* @__PURE__ */ React.createElement(import_antd.Button, null, "上一步"), /* @__PURE__ */ React.createElement(import_antd.Button, { type: "primary" }, "下一步"))
+    }
+  }
+};
+var FooterFixedSidebarBottom = {
+  args: {
+    headerProps: {
+      stepsProps: {
+        items: [
+          { title: "第一步" },
+          { title: "第二步" },
+          { title: "第三步" }
+        ]
+      }
+    },
+    bodyProps: {
+      contentSlot: /* @__PURE__ */ React.createElement("div", { style: { padding: 24, minHeight: 400 } }, /* @__PURE__ */ React.createElement("h2", null, "主要内容"), /* @__PURE__ */ React.createElement("p", null, "底部操作区内嵌在侧边栏底部")),
+      sidebarSlot: /* @__PURE__ */ React.createElement("div", { style: { padding: 24 } }, /* @__PURE__ */ React.createElement("h3", null, "信息摘要"))
+    },
+    footerProps: {
+      position: "fixed-sidebar-bottom",
+      leftSlot: /* @__PURE__ */ React.createElement("div", null, "总价：¥999"),
+      actions: /* @__PURE__ */ React.createElement(import_antd.Space, null, /* @__PURE__ */ React.createElement(import_antd.Button, null, "上一步"), /* @__PURE__ */ React.createElement(import_antd.Button, { type: "primary" }, "下一步"))
+    }
+  }
+};
+var MobileSummaryButton = {
+  args: {
+    headerProps: {
+      stepsProps: {
+        items: [
+          { title: "第一步" },
+          { title: "第二步" },
+          { title: "第三步" }
+        ]
+      }
+    },
+    bodyProps: {
+      contentSlot: /* @__PURE__ */ React.createElement("div", { style: { padding: 24, minHeight: 400 } }, /* @__PURE__ */ React.createElement("h2", null, "主要内容"), /* @__PURE__ */ React.createElement("p", null, "移动端（宽度 < 744px）会显示总结按钮"), /* @__PURE__ */ React.createElement("p", null, "点击总结按钮可以在弹窗中查看侧边栏内容")),
+      sidebarSlot: /* @__PURE__ */ React.createElement("div", { style: { padding: 24 } }, /* @__PURE__ */ React.createElement("h3", null, "订单摘要"), /* @__PURE__ */ React.createElement(import_antd.Divider, null), /* @__PURE__ */ React.createElement("p", null, "商品：iPhone 15 Pro"), /* @__PURE__ */ React.createElement("p", null, "数量：1"), /* @__PURE__ */ React.createElement("p", null, "单价：¥7999"), /* @__PURE__ */ React.createElement(import_antd.Divider, null), /* @__PURE__ */ React.createElement("p", { style: { fontSize: 18, fontWeight: "bold" } }, "总计：¥7999"))
+    },
+    footerProps: {
+      position: "float-all",
+      summaryButton: /* @__PURE__ */ React.createElement(import_antd.Button, { icon: /* @__PURE__ */ React.createElement(import_icons.ShoppingCartOutlined, null) }, "查看详情"),
+      summaryModalTitle: "订单详情",
+      leftSlot: /* @__PURE__ */ React.createElement("div", null, "总价：", /* @__PURE__ */ React.createElement("strong", null, "¥7999")),
+      actions: /* @__PURE__ */ React.createElement(import_antd.Space, null, /* @__PURE__ */ React.createElement(import_antd.Button, null, "上一步"), /* @__PURE__ */ React.createElement(import_antd.Button, { type: "primary" }, "下一步"))
+    }
+  },
+  parameters: {
+    viewport: {
+      defaultViewport: "mobile1"
+    }
+  }
+};
+var OverflowActions = {
+  args: {
+    headerProps: {
+      stepsProps: {
+        items: [
+          { title: "第一步" },
+          { title: "第二步" },
+          { title: "第三步" }
+        ]
+      }
+    },
+    bodyProps: {
+      contentSlot: /* @__PURE__ */ React.createElement("div", { style: { padding: 24, minHeight: 400 } }, /* @__PURE__ */ React.createElement("h2", null, "主要内容"), /* @__PURE__ */ React.createElement("p", null, "当宽度不足时，次要按钮会被收纳到 More 菜单中"), /* @__PURE__ */ React.createElement("p", null, "缩小窗口宽度可以看到效果")),
+      sidebarSlot: /* @__PURE__ */ React.createElement("div", { style: { padding: 24 } }, /* @__PURE__ */ React.createElement("h3", null, "信息摘要"))
+    },
+    footerProps: {
+      enableOverflow: true,
+      moreText: "更多",
+      leftSlot: /* @__PURE__ */ React.createElement("div", null, "总价：¥999"),
+      actions: /* @__PURE__ */ React.createElement(import_antd.Space, null, /* @__PURE__ */ React.createElement(import_antd.Button, null, "保存草稿"), /* @__PURE__ */ React.createElement(import_antd.Button, null, "预览"), /* @__PURE__ */ React.createElement(import_antd.Button, null, "上一步"), /* @__PURE__ */ React.createElement(import_antd.Button, { type: "primary" }, "下一步"))
+    }
+  }
+};
+var DisableOverflow = {
+  args: {
+    headerProps: {
+      stepsProps: {
+        items: [
+          { title: "第一步" },
+          { title: "第二步" },
+          { title: "第三步" }
+        ]
+      }
+    },
+    bodyProps: {
+      contentSlot: /* @__PURE__ */ React.createElement("div", { style: { padding: 24, minHeight: 400 } }, /* @__PURE__ */ React.createElement("h2", null, "主要内容"), /* @__PURE__ */ React.createElement("p", null, "禁用溢出收纳，按钮不会被收纳")),
+      sidebarSlot: /* @__PURE__ */ React.createElement("div", { style: { padding: 24 } }, /* @__PURE__ */ React.createElement("h3", null, "信息摘要"))
+    },
+    footerProps: {
+      enableOverflow: false,
+      leftSlot: /* @__PURE__ */ React.createElement("div", null, "总价：¥999"),
+      actions: /* @__PURE__ */ React.createElement(import_antd.Space, null, /* @__PURE__ */ React.createElement(import_antd.Button, null, "保存草稿"), /* @__PURE__ */ React.createElement(import_antd.Button, null, "预览"), /* @__PURE__ */ React.createElement(import_antd.Button, null, "上一步"), /* @__PURE__ */ React.createElement(import_antd.Button, { type: "primary" }, "下一步"))
+    }
+  }
+};
+var ShoppingFlow = {
+  args: {
+    defaultCurrent: 1,
+    headerProps: {
+      left: /* @__PURE__ */ React.createElement(import_antd.Button, { icon: /* @__PURE__ */ React.createElement(import_icons.ArrowLeftOutlined, null), type: "text" }, "返回"),
+      right: /* @__PURE__ */ React.createElement(import_antd.Button, { icon: /* @__PURE__ */ React.createElement(import_icons.CloseOutlined, null), type: "text" }),
+      stepsProps: {
+        items: [
+          { title: "选择商品", description: "选择您要购买的商品" },
+          { title: "填写信息", description: "填写收货信息" },
+          { title: "确认订单", description: "确认订单信息" },
+          { title: "支付", description: "完成支付" }
+        ]
+      },
+      backConfirmModal: {
+        enabled: true,
+        title: "确认返回",
+        describe: "返回上一步将清除当前填写的信息，确定要返回吗？"
+      }
+    },
+    bodyProps: {
+      layoutMode: "ratio",
+      layoutRatio: "7:3",
+      contentSlot: /* @__PURE__ */ React.createElement(import_antd.Card, { style: { margin: 24 } }, /* @__PURE__ */ React.createElement("h2", null, "填写收货信息"), /* @__PURE__ */ React.createElement(import_antd.Divider, null), /* @__PURE__ */ React.createElement(import_antd.Form, { layout: "vertical" }, /* @__PURE__ */ React.createElement(import_antd.Form.Item, { label: "收货人", required: true }, /* @__PURE__ */ React.createElement(import_antd.Input, { placeholder: "请输入收货人姓名" })), /* @__PURE__ */ React.createElement(import_antd.Form.Item, { label: "联系电话", required: true }, /* @__PURE__ */ React.createElement(import_antd.Input, { placeholder: "请输入联系电话" })), /* @__PURE__ */ React.createElement(import_antd.Form.Item, { label: "收货地址", required: true }, /* @__PURE__ */ React.createElement(
+        import_antd.Input.TextArea,
+        {
+          placeholder: "请输入详细地址",
+          rows: 4
+        }
+      )))),
+      sidebarSlot: /* @__PURE__ */ React.createElement(import_antd.Card, { style: { margin: 24 } }, /* @__PURE__ */ React.createElement("h3", null, "订单摘要"), /* @__PURE__ */ React.createElement(import_antd.Divider, null), /* @__PURE__ */ React.createElement("div", null, /* @__PURE__ */ React.createElement("p", null, "商品：iPhone 15 Pro"), /* @__PURE__ */ React.createElement("p", null, "数量：1"), /* @__PURE__ */ React.createElement("p", null, "单价：¥7999"), /* @__PURE__ */ React.createElement(import_antd.Divider, null), /* @__PURE__ */ React.createElement("p", { style: { fontSize: 18, fontWeight: "bold" } }, "总计：¥7999")))
+    },
+    footerProps: {
+      position: "float-sidebar",
+      enableOverflow: true,
+      summaryButton: /* @__PURE__ */ React.createElement(import_antd.Button, { icon: /* @__PURE__ */ React.createElement(import_icons.ShoppingCartOutlined, null) }, "购物车"),
+      summaryModalTitle: "订单详情",
+      leftSlot: /* @__PURE__ */ React.createElement("div", null, "总价：", /* @__PURE__ */ React.createElement("strong", { style: { fontSize: 18, color: "#ff4d4f" } }, "¥7999")),
+      actions: /* @__PURE__ */ React.createElement(import_antd.Space, null, /* @__PURE__ */ React.createElement(import_antd.Button, null, "上一步"), /* @__PURE__ */ React.createElement(import_antd.Button, { type: "primary" }, "下一步"))
+    },
+    onStepsChange: (result) => {
+      console.log("步骤变化:", result);
+    },
+    onBackConfirm: (action) => {
+      console.log("返回确认:", action);
+    }
+  }
+};
+var RegistrationFlow = {
+  args: {
+    defaultCurrent: 0,
+    headerProps: {
+      left: /* @__PURE__ */ React.createElement(import_antd.Button, { icon: /* @__PURE__ */ React.createElement(import_icons.HomeOutlined, null), type: "text" }, "首页"),
+      stepsProps: {
+        items: [
+          { title: "基本信息", description: "填写账户信息" },
+          { title: "身份验证", description: "验证您的身份" },
+          { title: "完成注册", description: "设置完成" }
+        ],
+        labelPlacement: "vertical"
+      },
+      showBackOnFirstStep: true
+    },
+    bodyProps: {
+      layoutMode: "fixed",
+      contentSlot: /* @__PURE__ */ React.createElement(import_antd.Card, { style: { margin: 24, maxWidth: 600 } }, /* @__PURE__ */ React.createElement("h2", null, "创建您的账户"), /* @__PURE__ */ React.createElement(import_antd.Divider, null), /* @__PURE__ */ React.createElement(import_antd.Form, { layout: "vertical" }, /* @__PURE__ */ React.createElement(import_antd.Form.Item, { label: "用户名", required: true }, /* @__PURE__ */ React.createElement(import_antd.Input, { placeholder: "请输入用户名" })), /* @__PURE__ */ React.createElement(import_antd.Form.Item, { label: "邮箱", required: true }, /* @__PURE__ */ React.createElement(import_antd.Input, { placeholder: "请输入邮箱地址" })), /* @__PURE__ */ React.createElement(import_antd.Form.Item, { label: "密码", required: true }, /* @__PURE__ */ React.createElement(import_antd.Input.Password, { placeholder: "请输入密码" })), /* @__PURE__ */ React.createElement(import_antd.Form.Item, { label: "确认密码", required: true }, /* @__PURE__ */ React.createElement(import_antd.Input.Password, { placeholder: "请再次输入密码" })))),
+      sidebarSlot: /* @__PURE__ */ React.createElement(import_antd.Card, { style: { margin: 24 } }, /* @__PURE__ */ React.createElement("h3", null, /* @__PURE__ */ React.createElement(import_icons.InfoCircleOutlined, { style: { marginRight: 8 } }), "注册须知"), /* @__PURE__ */ React.createElement(import_antd.Divider, null), /* @__PURE__ */ React.createElement("ul", { style: { paddingLeft: 20 } }, /* @__PURE__ */ React.createElement("li", null, "用户名长度 4-20 个字符"), /* @__PURE__ */ React.createElement("li", null, "密码长度至少 8 个字符"), /* @__PURE__ */ React.createElement("li", null, "密码需包含数字和字母"), /* @__PURE__ */ React.createElement("li", null, "邮箱将用于账户验证")))
+    },
+    footerProps: {
+      position: "float-sidebar",
+      actions: /* @__PURE__ */ React.createElement(import_antd.Button, { type: "primary", size: "large", block: true }, "下一步")
+    },
+    onFirstStepBack: () => {
+      console.log("返回首页");
+    }
+  }
+};
+var FormWizard = {
+  args: {
+    defaultCurrent: 0,
+    showSidebar: false,
+    headerProps: {
+      stepsProps: {
+        items: [
+          { title: "个人信息" },
+          { title: "工作信息" },
+          { title: "教育背景" },
+          { title: "提交申请" }
+        ],
+        size: "small"
+      }
+    },
+    bodyProps: {
+      contentSlot: /* @__PURE__ */ React.createElement("div", { style: { padding: 24, maxWidth: 800, margin: "0 auto" } }, /* @__PURE__ */ React.createElement(import_antd.Card, null, /* @__PURE__ */ React.createElement("h2", null, "个人信息"), /* @__PURE__ */ React.createElement(import_antd.Divider, null), /* @__PURE__ */ React.createElement(import_antd.Form, { layout: "vertical" }, /* @__PURE__ */ React.createElement(import_antd.Space, { direction: "vertical", style: { width: "100%" }, size: "large" }, /* @__PURE__ */ React.createElement(import_antd.Space, { size: "large", wrap: true }, /* @__PURE__ */ React.createElement(import_antd.Form.Item, { label: "姓名", required: true, style: { marginBottom: 0 } }, /* @__PURE__ */ React.createElement(import_antd.Input, { placeholder: "请输入姓名", style: { width: 200 } })), /* @__PURE__ */ React.createElement(import_antd.Form.Item, { label: "性别", required: true, style: { marginBottom: 0 } }, /* @__PURE__ */ React.createElement(import_antd.Select, { placeholder: "请选择", style: { width: 120 } }, /* @__PURE__ */ React.createElement(import_antd.Select.Option, { value: "male" }, "男"), /* @__PURE__ */ React.createElement(import_antd.Select.Option, { value: "female" }, "女"))), /* @__PURE__ */ React.createElement(import_antd.Form.Item, { label: "出生日期", required: true, style: { marginBottom: 0 } }, /* @__PURE__ */ React.createElement(import_antd.Input, { type: "date", style: { width: 160 } }))), /* @__PURE__ */ React.createElement(import_antd.Form.Item, { label: "联系电话", required: true }, /* @__PURE__ */ React.createElement(import_antd.Input, { placeholder: "请输入联系电话", style: { width: 300 } })), /* @__PURE__ */ React.createElement(import_antd.Form.Item, { label: "电子邮箱", required: true }, /* @__PURE__ */ React.createElement(import_antd.Input, { placeholder: "请输入电子邮箱", style: { width: 300 } })), /* @__PURE__ */ React.createElement(import_antd.Form.Item, { label: "现居住地址" }, /* @__PURE__ */ React.createElement(
+        import_antd.Input.TextArea,
+        {
+          placeholder: "请输入详细地址",
+          rows: 3
+        }
+      ))))))
+    },
+    footerProps: {
+      position: "fixed-bottom",
+      leftSlot: /* @__PURE__ */ React.createElement("div", { style: { color: "#999" } }, "第 1 步，共 4 步"),
+      actions: /* @__PURE__ */ React.createElement(import_antd.Space, null, /* @__PURE__ */ React.createElement(import_antd.Button, { disabled: true }, "上一步"), /* @__PURE__ */ React.createElement(import_antd.Button, { type: "primary" }, "下一步"))
+    },
+    onStepsChange: (result) => {
+      console.log("步骤变化:", result);
+    }
+  }
+};
+var InteractionTest = {
+  args: {
+    defaultCurrent: 0,
+    headerProps: {
+      stepsProps: {
+        items: [
+          { title: "第一步" },
+          { title: "第二步" },
+          { title: "第三步" }
+        ]
+      }
+    },
+    bodyProps: {
+      contentSlot: /* @__PURE__ */ React.createElement("div", { style: { padding: 24, minHeight: 400 } }, /* @__PURE__ */ React.createElement("h2", null, "步骤内容")),
+      sidebarSlot: /* @__PURE__ */ React.createElement("div", { style: { padding: 24 } }, /* @__PURE__ */ React.createElement("h3", null, "信息摘要"))
+    },
+    footerProps: {
+      actions: /* @__PURE__ */ React.createElement(import_antd.Space, null, /* @__PURE__ */ React.createElement(import_antd.Button, null, "上一步"), /* @__PURE__ */ React.createElement(import_antd.Button, { type: "primary" }, "下一步"))
+    }
+  },
+  play: async ({ canvasElement }) => {
+    const canvas = (0, import_test.within)(canvasElement);
+    const procedure = canvasElement.querySelector(
+      '[data-component="pisell-procedure"]'
+    );
+    await (0, import_test.expect)(procedure).toBeInTheDocument();
+    const steps = canvasElement.querySelectorAll(".ant-steps-item");
+    await (0, import_test.expect)(steps.length).toBeGreaterThan(0);
+    await (0, import_test.expect)(canvas.getByText("步骤内容")).toBeInTheDocument();
+    await (0, import_test.expect)(canvas.getByText("信息摘要")).toBeInTheDocument();
+    await (0, import_test.expect)(canvas.getByText("上一步")).toBeInTheDocument();
+    await (0, import_test.expect)(canvas.getByText("下一步")).toBeInTheDocument();
+  }
+};
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  BackConfirmModal,
+  BodyContentOrderReverse,
+  BodyFixedLayout,
+  BodyRatioLayout,
+  BodyVerticalLayout,
+  CloseConfirmModal,
+  Default,
+  DisableOverflow,
+  FooterFixedBottom,
+  FooterFixedContentBottom,
+  FooterFixedSidebarBottom,
+  FooterFloatAll,
+  FooterFloatContent,
+  FooterFloatSidebar,
+  FormWizard,
+  HeaderSlotDefault,
+  HeaderSlotReverse,
+  HideSteps,
+  InteractionTest,
+  MinimalConfig,
+  MobileSummaryButton,
+  ModalMode,
+  OverflowActions,
+  PageMode,
+  RegistrationFlow,
+  ShoppingFlow,
+  ShowBackOnFirstStep,
+  StepControl,
+  StepIntercept,
+  WithoutFooter,
+  WithoutHeader,
+  WithoutSidebar
+});