@pisell/materials 1.0.967 → 1.0.969

package/lib/components/PisellProcedure/PisellProcedure.less

@@ -0,0 +1,376 @@
+// PisellProcedure 组件样式
+// 流程容器组件，用于管理多步骤流程
+
+// ========== CSS Variables ==========
+.pisell-procedure {
+  // 尺寸变量
+  --procedure-header-height: 80px;
+  --procedure-action-height: 80px;
+  --procedure-summary-width: 405px;
+  --procedure-gap: 16px;
+  --procedure-padding: 16px;
+  --procedure-border-radius: 8px;
+
+  // 颜色变量
+  --procedure-bg: #ffffff;
+  --procedure-summary-bg: #f9fafb;
+  --procedure-border-color: #e5e7eb;
+  --procedure-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
+
+  // 响应式断点
+  --breakpoint-xs: 430px;
+  --breakpoint-sm: 744px;
+  --breakpoint-md: 960px;
+  --breakpoint-lg: 1133px;
+  --breakpoint-xl: 1366px;
+}
+
+// ========== 组件主容器 ==========
+.pisell-procedure {
+  display: flex;
+  flex-direction: column;
+  height: 100%;
+  width: 100%;
+  background: var(--procedure-bg);
+  position: relative;
+
+  // 注意：layout 属性影响的是整体内容的排列方式，不是主容器的 flex-direction
+  // 主容器始终是 column（头部在上，主体在下，操作区在底部）
+  // layout-horizontal 指的是 body 内容和其他区域的排列
+
+  // 加载状态
+  &-loading {
+    pointer-events: none;
+    opacity: 0.6;
+  }
+
+  // 禁用状态
+  &-disabled {
+    pointer-events: none;
+    opacity: 0.5;
+  }
+}
+
+// ========== 头部区域 ==========
+.pisell-procedure-header {
+  display: flex;
+  align-items: center;
+  gap: var(--procedure-gap);
+  min-height: var(--procedure-header-height);
+  padding: 12px var(--procedure-padding);
+  background: var(--procedure-bg);
+  border-bottom: 1px solid var(--procedure-border-color);
+  flex-shrink: 0;
+  width: 100%;
+  box-sizing: border-box;
+
+  // 固定定位
+  &-fixed {
+    position: fixed;
+    top: 0;
+    left: 0;
+    right: 0;
+    z-index: 100;
+    box-shadow: var(--procedure-shadow);
+  }
+
+  // 滚动时固定
+  &-scroll-fixed {
+    position: sticky;
+    top: 0;
+    z-index: 100;
+    box-shadow: var(--procedure-shadow);
+  }
+
+  // 上一步按钮
+  &-prev {
+    flex-shrink: 0;
+    margin-right: 8px;
+  }
+
+  // 步骤条容器
+  &-steps {
+    flex: 1;
+    min-width: 0;
+    overflow: hidden;
+  }
+
+  // 额外内容
+  &-extra {
+    flex-shrink: 0;
+    margin: 0 8px;
+  }
+
+  // 关闭按钮
+  &-close {
+    flex-shrink: 0;
+    margin-left: 8px;
+  }
+}
+
+// ========== 主体区域 ==========
+.pisell-procedure-body {
+  flex: 1;
+  display: flex;
+  gap: var(--procedure-gap);
+  padding: var(--procedure-padding);
+  overflow: hidden;
+  min-height: 0;
+  width: 100%;
+  box-sizing: border-box;
+
+  // 默认水平布局（内容区 + 信息总结区左右排列）
+  flex-direction: row;
+
+  // 垂直布局（内容区和信息总结区上下排列）
+  &-vertical {
+    flex-direction: column;
+  }
+}
+
+// ========== 内容区 ==========
+.pisell-procedure-content {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  background: var(--procedure-bg);
+  border-radius: var(--procedure-border-radius);
+  padding: var(--procedure-padding);
+  overflow: hidden;
+  min-width: 0;
+
+  &-inner {
+    flex: 1;
+    overflow-y: auto;
+  }
+}
+
+// ========== 信息总结区 ==========
+.pisell-procedure-summary {
+  width: var(--procedure-summary-width);
+  display: flex;
+  flex-direction: column;
+  background: var(--procedure-summary-bg);
+  border-radius: var(--procedure-border-radius);
+  padding: var(--procedure-padding);
+  overflow: hidden;
+  flex-shrink: 0;
+
+  // 可折叠
+  &-collapsible {
+    .pisell-procedure-summary-header {
+      cursor: pointer;
+    }
+  }
+
+  // 折叠状态
+  &-collapsed {
+    width: auto;
+    min-width: 80px;
+
+    .pisell-procedure-summary-content,
+    .pisell-procedure-summary-extra {
+      display: none;
+    }
+  }
+
+  // 头部（折叠按钮）
+  &-header {
+    display: flex;
+    align-items: center;
+    justify-content: flex-end;
+    margin-bottom: 8px;
+  }
+
+  // 内容
+  &-content {
+    flex: 1;
+    overflow-y: auto;
+  }
+
+  // 额外内容
+  &-extra {
+    margin-top: var(--procedure-padding);
+  }
+}
+
+// ========== 操作区 ==========
+.pisell-procedure-action {
+  display: flex;
+  align-items: center;
+  justify-content: flex-end;
+  gap: 12px;
+  min-height: var(--procedure-action-height);
+  padding: 12px var(--procedure-padding);
+  background: var(--procedure-bg);
+  border-top: 1px solid var(--procedure-border-color);
+  flex-shrink: 0;
+  width: 100%;
+  box-sizing: border-box;
+
+  // 固定模式
+  &-fixed {
+    position: fixed;
+    bottom: 0;
+    left: 0;
+    right: 0;
+    z-index: 100;
+  }
+
+  // 悬浮模式
+  &-float {
+    position: fixed;
+    bottom: 0;
+    left: 0;
+    right: 0;
+    z-index: 100;
+    box-shadow: 0 -2px 8px rgba(0, 0, 0, 0.08);
+  }
+
+  // 内嵌模式
+  &-embedded {
+    position: relative;
+  }
+
+  // 按钮容器
+  &-buttons {
+    display: flex;
+    align-items: center;
+    gap: 12px;
+    flex-wrap: wrap;
+  }
+
+  // 额外内容
+  &-extra {
+    margin-right: auto;
+  }
+}
+
+// ========== 响应式样式 ==========
+
+// 1366px 以下
+@media (max-width: 1366px) {
+  .pisell-procedure {
+    --procedure-summary-width: auto;
+  }
+
+  .pisell-procedure-summary {
+    flex: 0 0 405px;
+  }
+}
+
+// 1133px - 960px
+@media (max-width: 1133px) {
+  .pisell-procedure-summary {
+    flex: 0 0 376px;
+  }
+}
+
+// 960px - 744px
+@media (max-width: 960px) {
+  .pisell-procedure-summary {
+    flex: 0 0 290px;
+  }
+
+  .pisell-procedure-header {
+    flex-wrap: wrap;
+    height: auto;
+    min-height: var(--procedure-header-height);
+  }
+}
+
+// 744px 以下（移动端）
+@media (max-width: 744px) {
+  .pisell-procedure {
+    --procedure-padding: 12px;
+    --procedure-gap: 12px;
+  }
+
+  .pisell-procedure-header {
+    flex-wrap: wrap;
+    padding: 12px;
+
+    &-steps {
+      width: 100%;
+      order: 2;
+    }
+
+    &-prev {
+      order: 1;
+    }
+
+    &-close {
+      order: 3;
+      margin-left: auto;
+    }
+
+    &-extra {
+      order: 4;
+      width: 100%;
+    }
+  }
+
+  .pisell-procedure-body {
+    flex-direction: column;
+  }
+
+  .pisell-procedure-summary {
+    display: none;
+  }
+
+  .pisell-procedure-action {
+    justify-content: space-between;
+    height: auto;
+    min-height: 60px;
+    padding: 12px;
+
+    &-buttons {
+      flex-wrap: wrap;
+    }
+  }
+}
+
+// 430px 以下（小屏幕移动端）
+@media (max-width: 430px) {
+  .pisell-procedure {
+    --procedure-padding: 8px;
+    --procedure-gap: 8px;
+  }
+
+  .pisell-procedure-header {
+    padding: 8px;
+
+    &-prev,
+    &-close {
+      .ant-btn-icon {
+        margin-right: 0;
+      }
+
+      span:not(.anticon) {
+        display: none;
+      }
+    }
+  }
+
+  .pisell-procedure-action {
+    padding: 8px;
+
+    &-buttons {
+      .ant-btn {
+        padding: 4px 8px;
+        font-size: 12px;
+      }
+    }
+  }
+}
+
+// ========== 主题适配 ==========
+
+// 暗色主题
+.pisell-procedure {
+  &.dark {
+    --procedure-bg: #1f1f1f;
+    --procedure-summary-bg: #2a2a2a;
+    --procedure-border-color: #3a3a3a;
+  }
+}

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

@@ -0,0 +1,8 @@
+import React from 'react';
+import type { ProcedureActionProps } from '../types';
+/**
+ * ProcedureAction 组件
+ * 操作区域，渲染操作按钮
+ */
+declare const ProcedureAction: React.FC<ProcedureActionProps>;
+export default ProcedureAction;

package/lib/components/PisellProcedure/components/ProcedureAction.js

@@ -0,0 +1,86 @@
+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/ProcedureAction.tsx
+var ProcedureAction_exports = {};
+__export(ProcedureAction_exports, {
+  default: () => ProcedureAction_default
+});
+module.exports = __toCommonJS(ProcedureAction_exports);
+var import_react = __toESM(require("react"));
+var import_antd = require("antd");
+var import_classnames = __toESM(require("classnames"));
+var ProcedureAction = ({
+  actions,
+  mode,
+  position,
+  actionExtra,
+  className,
+  style,
+  disabled,
+  loading
+}) => {
+  const sortedActions = (0, import_react.useMemo)(() => {
+    return [...actions].filter((action) => !action.hidden).sort((a, b) => (a.order || 0) - (b.order || 0));
+  }, [actions]);
+  const mergedClassName = (0, import_react.useMemo)(() => {
+    return (0, import_classnames.default)(
+      "pisell-procedure-action",
+      `pisell-procedure-action-${mode}`,
+      `pisell-procedure-action-${position}`,
+      className
+    );
+  }, [mode, position, className]);
+  const renderActionButton = (0, import_react.useCallback)(
+    (action) => {
+      const handleClick = async () => {
+        if (!disabled && !action.disabled && action.onClick) {
+          await action.onClick();
+        }
+      };
+      return /* @__PURE__ */ import_react.default.createElement(
+        import_antd.Button,
+        {
+          key: action.key,
+          type: action.type,
+          icon: action.icon,
+          disabled: disabled || action.disabled,
+          loading: loading || action.loading,
+          className: (0, import_classnames.default)("pisell-procedure-action-button", action.className),
+          style: action.style,
+          onClick: handleClick,
+          ...action
+        },
+        action.label
+      );
+    },
+    [disabled, loading]
+  );
+  return /* @__PURE__ */ import_react.default.createElement("div", { className: mergedClassName, style }, /* @__PURE__ */ import_react.default.createElement("div", { className: "pisell-procedure-action-buttons" }, sortedActions.map((action) => renderActionButton(action))), actionExtra && /* @__PURE__ */ import_react.default.createElement("div", { className: "pisell-procedure-action-extra" }, actionExtra));
+};
+var ProcedureAction_default = ProcedureAction;

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

@@ -0,0 +1,8 @@
+import React from 'react';
+import type { ProcedureContentProps } from '../types';
+/**
+ * ProcedureContent 组件
+ * 内容区域，渲染当前步骤的内容
+ */
+declare const ProcedureContent: React.FC<ProcedureContentProps>;
+export default ProcedureContent;

package/lib/components/PisellProcedure/components/ProcedureContent.js

@@ -0,0 +1,60 @@
+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/ProcedureContent.tsx
+var ProcedureContent_exports = {};
+__export(ProcedureContent_exports, {
+  default: () => ProcedureContent_default
+});
+module.exports = __toCommonJS(ProcedureContent_exports);
+var import_react = __toESM(require("react"));
+var import_antd = require("antd");
+var import_classnames = __toESM(require("classnames"));
+var ProcedureContent = ({
+  current,
+  contentRender,
+  width,
+  className,
+  style,
+  loading
+}) => {
+  const mergedClassName = (0, import_react.useMemo)(() => {
+    return (0, import_classnames.default)("pisell-procedure-content", className);
+  }, [className]);
+  const mergedStyle = (0, import_react.useMemo)(() => {
+    const baseStyle = {
+      ...style
+    };
+    if (width) {
+      baseStyle.width = typeof width === "number" ? `${width}px` : width;
+    }
+    return baseStyle;
+  }, [style, width]);
+  return /* @__PURE__ */ import_react.default.createElement("div", { className: mergedClassName, style: mergedStyle }, /* @__PURE__ */ import_react.default.createElement(import_antd.Spin, { spinning: loading }, /* @__PURE__ */ import_react.default.createElement("div", { className: "pisell-procedure-content-inner" }, contentRender(current))));
+};
+var ProcedureContent_default = ProcedureContent;

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

@@ -0,0 +1,8 @@
+import React from 'react';
+import type { ProcedureHeaderProps } from '../types';
+/**
+ * ProcedureHeader 组件
+ * 头部区域，集成步骤导航和操作按钮
+ */
+declare const ProcedureHeader: React.FC<ProcedureHeaderProps>;
+export default ProcedureHeader;

package/lib/components/PisellProcedure/components/ProcedureHeader.js

@@ -0,0 +1,115 @@
+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/ProcedureHeader.tsx
+var ProcedureHeader_exports = {};
+__export(ProcedureHeader_exports, {
+  default: () => ProcedureHeader_default
+});
+module.exports = __toCommonJS(ProcedureHeader_exports);
+var import_react = __toESM(require("react"));
+var import_antd = require("antd");
+var import_icons = require("@ant-design/icons");
+var import_classnames = __toESM(require("classnames"));
+var import_PisellSteps = require("../../PisellSteps");
+var ProcedureHeader = ({
+  current,
+  steps,
+  stepsProps,
+  showPrevButton,
+  showCloseButton,
+  onPrev,
+  onClose,
+  onStepClick,
+  headerExtra,
+  prevButtonProps,
+  closeButtonProps,
+  fixed,
+  className,
+  style,
+  disabled
+}) => {
+  const mergedClassName = (0, import_react.useMemo)(() => {
+    return (0, import_classnames.default)(
+      "pisell-procedure-header",
+      {
+        "pisell-procedure-header-fixed": fixed === true,
+        "pisell-procedure-header-scroll-fixed": fixed === "scroll"
+      },
+      className
+    );
+  }, [fixed, className]);
+  const handlePrevClick = (0, import_react.useCallback)(() => {
+    if (!disabled) {
+      onPrev == null ? void 0 : onPrev();
+    }
+  }, [disabled, onPrev]);
+  const handleCloseClick = (0, import_react.useCallback)(() => {
+    if (!disabled) {
+      onClose == null ? void 0 : onClose();
+    }
+  }, [disabled, onClose]);
+  const handleStepChange = (0, import_react.useCallback)(
+    (index) => {
+      if (!disabled) {
+        onStepClick == null ? void 0 : onStepClick(index);
+      }
+    },
+    [disabled, onStepClick]
+  );
+  return /* @__PURE__ */ import_react.default.createElement("div", { className: mergedClassName, style }, showPrevButton && /* @__PURE__ */ import_react.default.createElement(
+    import_antd.Button,
+    {
+      icon: /* @__PURE__ */ import_react.default.createElement(import_icons.LeftOutlined, null),
+      onClick: handlePrevClick,
+      disabled: disabled || current === 0,
+      className: "pisell-procedure-header-prev",
+      ...prevButtonProps
+    },
+    "上一步"
+  ), /* @__PURE__ */ import_react.default.createElement("div", { className: "pisell-procedure-header-steps" }, /* @__PURE__ */ import_react.default.createElement(
+    import_PisellSteps.PisellSteps,
+    {
+      current,
+      items: steps,
+      onChange: handleStepChange,
+      ...stepsProps
+    }
+  )), headerExtra && /* @__PURE__ */ import_react.default.createElement("div", { className: "pisell-procedure-header-extra" }, headerExtra), showCloseButton && /* @__PURE__ */ import_react.default.createElement(
+    import_antd.Button,
+    {
+      icon: /* @__PURE__ */ import_react.default.createElement(import_icons.CloseOutlined, null),
+      onClick: handleCloseClick,
+      disabled,
+      className: "pisell-procedure-header-close",
+      ...closeButtonProps
+    },
+    "关闭"
+  ));
+};
+var ProcedureHeader_default = ProcedureHeader;

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

@@ -0,0 +1,8 @@
+import React from 'react';
+import type { ProcedureSummaryProps } from '../types';
+/**
+ * ProcedureSummary 组件
+ * 信息总结区域，展示实时反馈信息
+ */
+declare const ProcedureSummary: React.FC<ProcedureSummaryProps>;
+export default ProcedureSummary;