@pisell/materials 3.3.77 → 3.3.79

package/es/components/PisellCards/components/TextCard/types.d.ts

@@ -0,0 +1,270 @@
+import { CSSProperties, ReactNode } from 'react';
+import { PisellBasicCardProps } from '../../types';
+/**
+ * 样式变体类型
+ */
+export declare type TextCardVariant = 'text' | 'filled' | 'outlined' | 'light' | 'gradient' | 'dashed';
+/**
+ * 尺寸类型
+ */
+export declare type TextCardSize = 'small' | 'default' | 'large';
+/**
+ * 宽度模式
+ */
+export declare type TextCardWidthMode = 'auto' | 'fixed' | 'full';
+/**
+ * 图标配置
+ */
+export interface IconConfig {
+    /**
+     * 图标大小（单位：px）
+     */
+    size?: number;
+    /**
+     * 图标颜色
+     */
+    color?: string;
+}
+/**
+ * 标签配置
+ */
+export interface TagConfig {
+    /**
+     * 标签颜色
+     */
+    color?: string;
+    /**
+     * 标签自定义样式
+     */
+    style?: CSSProperties;
+}
+/**
+ * 角标类型
+ */
+export declare type BadgeType = 'dot' | 'number' | 'text';
+/**
+ * 角标位置
+ */
+export declare type BadgePosition = 'top-right' | 'top-left' | 'bottom-right' | 'bottom-left';
+/**
+ * 角标配置
+ */
+export interface BadgeConfig {
+    /**
+     * 角标类型
+     * @default 'dot'
+     */
+    type?: BadgeType;
+    /**
+     * 角标内容（数字或文本）
+     * 当 type 为 'number' 或 'text' 时有效
+     */
+    content?: ReactNode;
+    /**
+     * 角标位置
+     * @default 'top-right'
+     */
+    position?: BadgePosition;
+    /**
+     * 角标偏移量 [x, y]
+     * 正数向右/下偏移，负数向左/上偏移
+     */
+    offset?: [number, number];
+    /**
+     * 角标颜色
+     */
+    color?: string;
+    /**
+     * 角标自定义样式
+     */
+    style?: CSSProperties;
+}
+/**
+ * 文本配置
+ */
+export interface TextConfig {
+    /**
+     * 字体大小（单位：px）
+     */
+    fontSize?: number;
+    /**
+     * 字体粗细
+     */
+    fontWeight?: string | number;
+    /**
+     * 文本颜色
+     */
+    color?: string;
+    /**
+     * 最大显示行数
+     * @default 1
+     */
+    maxLines?: number;
+    /**
+     * 是否显示省略号
+     * @default true
+     */
+    ellipsis?: boolean;
+    /**
+     * 文本对齐方式
+     * @default 'left'
+     */
+    textAlign?: 'left' | 'center' | 'right';
+    flex?: string;
+}
+/**
+ * TextCard 组件 Props
+ * 基于 PisellBasicCardProps 扩展
+ * 注意：重写 onClick 为可选属性
+ */
+export interface TextCardProps extends Omit<PisellBasicCardProps, 'onClick'> {
+    /**
+     * 卡片显示的文本内容（必填）
+     */
+    text: ReactNode;
+    /**
+     * 卡片样式变体
+     * @default 'text'
+     */
+    variant?: TextCardVariant;
+    /**
+     * 卡片尺寸
+     * @default 'default'
+     */
+    size?: TextCardSize;
+    /**
+     * 是否可点击
+     * @default true
+     */
+    clickable?: boolean;
+    /**
+     * 前置图标
+     * 支持 ReactNode（如 antd Icon、svg 等）
+     */
+    prefixIcon?: ReactNode;
+    /**
+     * 后置图标
+     * 支持 ReactNode（如 antd Icon、svg 等）
+     */
+    suffixIcon?: ReactNode;
+    /**
+     * 图标配置
+     * 统一配置前置和后置图标的大小和颜色
+     */
+    iconConfig?: IconConfig;
+    /**
+     * 后置标签
+     * 支持 ReactNode（如 antd Tag、Badge 等）
+     */
+    tag?: ReactNode;
+    /**
+     * 标签配置
+     */
+    tagConfig?: TagConfig;
+    /**
+     * 角标配置
+     * 用于显示红点、数字或文本提示
+     */
+    badge?: BadgeConfig;
+    /**
+     * 前置插槽
+     * 用于替换前置图标，优先级高于 prefixIcon
+     */
+    prefixSlot?: ReactNode;
+    /**
+     * 后置插槽
+     * 用于替换后置图标和标签，优先级高于 suffixIcon 和 tag
+     */
+    suffixSlot?: ReactNode;
+    /**
+     * 文本配置
+     * 用于自定义文本样式和显示行为
+     */
+    textConfig?: TextConfig;
+    /**
+     * 宽度模式
+     * - auto: 内容撑满，最大宽度 maxWidth
+     * - fixed: 固定宽度 width
+     * - full: 撑满父容器，最小宽度 28px
+     * @default 'auto'
+     */
+    widthMode?: TextCardWidthMode;
+    /**
+     * 固定宽度值
+     * 当 widthMode='fixed' 时有效
+     */
+    width?: number | string;
+    /**
+     * 最大宽度
+     * 当 widthMode='auto' 时有效
+     * @default 400
+     */
+    maxWidth?: number | string;
+    /**
+     * 点击事件
+     * 当 clickable=true 且不在 disabled/loading 状态时触发
+     * 注意：PisellBasicCardProps 中的 onClick 是必填的，这里重新定义为可选
+     */
+    onClick?: (event: React.MouseEvent<HTMLDivElement>) => void;
+    /**
+     * 自定义渲染函数
+     * 完全自定义组件的渲染内容
+     * 当提供此函数时，组件内置的渲染逻辑将被忽略
+     */
+    render?: (props: TextCardProps) => ReactNode;
+}
+/**
+ * TextContent 组件 Props
+ * 文本内容子组件
+ */
+export interface TextContentProps {
+    /**
+     * 文本内容
+     */
+    text: ReactNode;
+    /**
+     * 文本配置
+     */
+    textConfig?: TextConfig;
+    /**
+     * 自定义类名
+     */
+    className?: string;
+    active?: PisellBasicCardProps['active'];
+}
+/**
+ * IconWrapper 组件 Props
+ * 图标包装子组件
+ */
+export interface IconWrapperProps {
+    /**
+     * 图标内容
+     */
+    icon: ReactNode;
+    /**
+     * 图标配置
+     */
+    config?: IconConfig;
+    /**
+     * 图标位置
+     */
+    position: 'prefix' | 'suffix';
+    /**
+     * 自定义类名
+     */
+    className?: string;
+}
+/**
+ * BadgeWrapper 组件 Props
+ * 角标包装子组件
+ */
+export interface BadgeWrapperProps {
+    /**
+     * 角标配置
+     */
+    badge?: BadgeConfig;
+    /**
+     * 子元素
+     */
+    children: ReactNode;
+}

package/es/components/PisellCards/components/TextCard/types.js

@@ -0,0 +1 @@
+export {};

package/es/components/PisellCards/components/TextCard/utils/index.js

@@ -0,0 +1 @@
+// 自定义工具函数

package/es/components/PisellCards/components/index.d.ts

@@ -0,0 +1,10 @@
+export { default as GraphicTextCard } from './GraphicTextCard';
+export { default as TextCard } from './TextCard';
+export { default as TabCard } from './TabCard';
+export { default as MultilevelCard } from './MultilevelCard';
+export { default as PisellImageCard } from './PisellImageCard';
+export type { GraphicTextCardProps } from './GraphicTextCard/types';
+export type { TextCardProps } from './TextCard/types';
+export type { TabCardProps } from './TabCard/types';
+export type { MultilevelCardProps } from './MultilevelCard/types';
+export type { PisellImageCardProps } from './PisellImageCard/types';

package/es/components/PisellCards/components/index.js

@@ -0,0 +1,7 @@
+// 子组件
+export { default as GraphicTextCard } from "./GraphicTextCard";
+export { default as TextCard } from "./TextCard";
+export { default as TabCard } from "./TabCard";
+export { default as MultilevelCard } from "./MultilevelCard";
+export { default as PisellImageCard } from "./PisellImageCard";
+// 类型导出

package/es/components/PisellCards/hooks/index.js

@@ -0,0 +1 @@
+// 自定义 hooks

package/es/components/PisellCards/index.d.ts

@@ -0,0 +1,14 @@
+declare const PisellCards: {
+    TabCard: (props: any) => JSX.Element;
+    TextCard: (props: any) => JSX.Element;
+    GraphicTextCard: (props: import("./components/GraphicTextCard").GraphicTextCardProps) => JSX.Element;
+    MultilevelCard: (props: any) => JSX.Element;
+    PisellImageCard: (props: import("./components/PisellImageCard").PisellImageCardProps) => JSX.Element;
+};
+export default PisellCards;
+export type { PisellBasicCardProps } from './types';
+export type { TabCardProps, BadgeConfig } from './components/TabCard/types';
+export type { TextCardProps } from './components/TextCard/types';
+export type { GraphicTextCardProps, GraphicTextCardVariant, GraphicTextCardSize, GraphicConfig, } from './components/GraphicTextCard/types';
+export type { MultilevelCardProps } from './components/MultilevelCard/types';
+export type { PisellImageCardProps, ImageDataSource, ImageFillMode, } from './components/PisellImageCard/types';

package/es/components/PisellCards/index.js

@@ -0,0 +1,21 @@
+/**
+ * PisellCards 组件主入口
+ * 导出所有卡片组件的命名空间
+ */
+import TabCard from "./components/TabCard";
+import TextCard from "./components/TextCard";
+import GraphicTextCard from "./components/GraphicTextCard";
+import MultilevelCard from "./components/MultilevelCard";
+import PisellImageCard from "./components/PisellImageCard";
+
+// 命名空间导出
+var PisellCards = {
+  TabCard: TabCard,
+  TextCard: TextCard,
+  GraphicTextCard: GraphicTextCard,
+  MultilevelCard: MultilevelCard,
+  PisellImageCard: PisellImageCard
+};
+export default PisellCards;
+
+// 类型导出

package/es/components/PisellCards/types.d.ts

@@ -0,0 +1,48 @@
+import { CSSProperties, ReactNode } from 'react';
+/**
+ * 基础卡片 Props 定义
+ * 所有业务卡片都应该基于此 Props 进行扩展
+ * 注意：这只是类型定义，不是实体组件
+ */
+export interface PisellBasicCardProps extends React.HTMLAttributes<HTMLDivElement> {
+    __designMode?: boolean;
+    dataSource?: any;
+    /**
+     * 激活状态配置
+     * 用于标识卡片是否处于激活/选中状态
+     */
+    active?: {
+        value: boolean;
+        style?: CSSProperties;
+        className?: string;
+        onChange?: (value: boolean) => void;
+        extra?: any;
+    };
+    /**
+     * 禁用状态配置
+     * 用于标识卡片是否处于禁用状态
+     */
+    disabled?: {
+        value: boolean;
+        style?: CSSProperties;
+        className?: string;
+        onChange?: (value: boolean) => void;
+        extra?: any;
+    };
+    /**
+     * 加载状态配置
+     * 用于标识卡片是否处于加载状态
+     */
+    loading?: {
+        value: boolean;
+        style?: CSSProperties;
+        className?: string;
+        onChange?: (value: boolean) => void;
+        extra?: any;
+    };
+    /**
+     * 卡片内容
+     */
+    children?: ReactNode;
+    onClick: (e: React.MouseEvent<HTMLDivElement, MouseEvent>) => void;
+}

package/es/components/PisellCards/types.js

@@ -0,0 +1 @@
+export {};

package/es/components/PisellCards/utils/index.js

@@ -0,0 +1 @@
+// 自定义工具函数

package/es/components/PisellProcedure/PisellProcedure.d.ts

@@ -0,0 +1,22 @@
+import React from 'react';
+import type { PisellProcedureProps, PisellProcedureRef } from './types';
+import './PisellProcedure.less';
+/**
+ * PisellProcedure 流程容器组件
+ *
+ * @description 用于管理多步骤流程的复合容器组件，基于 PisellLayout 实现三段式布局
+ * @author Pisell Team
+ * @version 1.0.0
+ *
+ * @example
+ * // 使用 ref 调用组件方法
+ * const procedureRef = useRef<PisellProcedureRef>(null);
+ *
+ * // 跳转到下一步
+ * procedureRef.current?.goNext();
+ *
+ * // 获取当前步骤
+ * const currentStep = procedureRef.current?.getCurrentStep();
+ */
+declare const PisellProcedure: React.ForwardRefExoticComponent<PisellProcedureProps & React.RefAttributes<PisellProcedureRef>>;
+export default PisellProcedure;

package/es/components/PisellProcedure/PisellProcedure.js

@@ -0,0 +1,204 @@
+var _excluded = ["className", "style", "mode", "showHeader", "showSidebar", "showFooter", "defaultCurrent", "onStepsChange", "headerProps", "bodyProps", "footerProps", "onClose", "onPrev", "onNext", "onFirstStepBack", "onBackConfirm", "onCloseConfirm", "__designMode", "__id"];
+function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
+function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
+function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
+function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
+function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) arr2[i] = arr[i]; return arr2; }
+function _iterableToArrayLimit(r, l) { var t = null == r ? null : "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"]; if (null != t) { var e, n, i, u, a = [], f = !0, o = !1; try { if (i = (t = t.call(r)).next, 0 === l) { if (Object(t) !== t) return; f = !1; } else for (; !(f = (e = i.call(t)).done) && (a.push(e.value), a.length !== l); f = !0); } catch (r) { o = !0, n = r; } finally { try { if (!f && null != t.return && (u = t.return(), Object(u) !== u)) return; } finally { if (o) throw n; } } return a; } }
+function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
+function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
+function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
+import React, { useMemo, useCallback, useState, forwardRef, useImperativeHandle } from 'react';
+import PisellLayout from "../pisellLayout";
+import { ProcedureHeader, ProcedureBody, ProcedureFooter } from "./components";
+import { useStepManager } from "./hooks";
+import { mergeClassNames, modifierClassName, isFooterGlobal } from "./utils";
+import { useMobile } from "../../hooks/useMobile";
+import "./PisellProcedure.less";
+
+/**
+ * PisellProcedure 流程容器组件
+ *
+ * @description 用于管理多步骤流程的复合容器组件，基于 PisellLayout 实现三段式布局
+ * @author Pisell Team
+ * @version 1.0.0
+ *
+ * @example
+ * // 使用 ref 调用组件方法
+ * const procedureRef = useRef<PisellProcedureRef>(null);
+ *
+ * // 跳转到下一步
+ * procedureRef.current?.goNext();
+ *
+ * // 获取当前步骤
+ * const currentStep = procedureRef.current?.getCurrentStep();
+ */
+var PisellProcedure = /*#__PURE__*/forwardRef(function (props, ref) {
+  var className = props.className,
+    style = props.style,
+    _props$mode = props.mode,
+    mode = _props$mode === void 0 ? 'page' : _props$mode,
+    _props$showHeader = props.showHeader,
+    showHeader = _props$showHeader === void 0 ? true : _props$showHeader,
+    _props$showSidebar = props.showSidebar,
+    showSidebar = _props$showSidebar === void 0 ? true : _props$showSidebar,
+    _props$showFooter = props.showFooter,
+    showFooter = _props$showFooter === void 0 ? true : _props$showFooter,
+    _props$defaultCurrent = props.defaultCurrent,
+    defaultCurrent = _props$defaultCurrent === void 0 ? 0 : _props$defaultCurrent,
+    onStepsChange = props.onStepsChange,
+    headerProps = props.headerProps,
+    bodyProps = props.bodyProps,
+    footerProps = props.footerProps,
+    onClose = props.onClose,
+    onPrev = props.onPrev,
+    onNext = props.onNext,
+    onFirstStepBack = props.onFirstStepBack,
+    onBackConfirm = props.onBackConfirm,
+    onCloseConfirm = props.onCloseConfirm,
+    __designMode = props.__designMode,
+    __id = props.__id,
+    other = _objectWithoutProperties(props, _excluded);
+
+  // 检测是否是移动端（< 744px）
+  // 注意：Hook 必须无条件调用，不能放在条件语句中
+  var isMobileDetected = useMobile(744);
+  // 弹窗模式下不应用移动端检测
+  var isMobile = mode === 'modal' ? false : isMobileDetected;
+
+  // 使用步骤管理 Hook
+  var _useStepManager = useStepManager({
+      stepsProps: headerProps === null || headerProps === void 0 ? void 0 : headerProps.stepsProps,
+      defaultCurrent: defaultCurrent,
+      onPrev: onPrev,
+      onNext: onNext,
+      onStepsChange: onStepsChange
+    }),
+    currentStep = _useStepManager.currentStep,
+    _goPrev = _useStepManager.goPrev,
+    _goNext = _useStepManager.goNext,
+    _goToStep = _useStepManager.goToStep;
+
+  // 移动端弹窗状态
+  var _useState = useState(false),
+    _useState2 = _slicedToArray(_useState, 2),
+    summaryModalOpen = _useState2[0],
+    setSummaryModalOpen = _useState2[1];
+  var openSummaryModal = useCallback(function () {
+    return setSummaryModalOpen(true);
+  }, []);
+  var closeSummaryModal = useCallback(function () {
+    return setSummaryModalOpen(false);
+  }, []);
+
+  // 暴露组件方法给父组件
+  useImperativeHandle(ref, function () {
+    return {
+      /**
+       * 跳转到上一步
+       */
+      goPrev: function goPrev() {
+        return _goPrev();
+      },
+      /**
+       * 跳转到下一步
+       */
+      goNext: function goNext() {
+        return _goNext();
+      },
+      /**
+       * 跳转到指定步骤
+       */
+      goToStep: function goToStep(step) {
+        return _goToStep(step);
+      },
+      /**
+       * 获取当前步骤索引
+       */
+      getCurrentStep: function getCurrentStep() {
+        return currentStep;
+      },
+      /**
+       * 打开移动端总结弹窗
+       */
+      openSummaryModal: openSummaryModal,
+      /**
+       * 关闭移动端总结弹窗
+       */
+      closeSummaryModal: closeSummaryModal
+    };
+  }, [_goPrev, _goNext, _goToStep, currentStep, openSummaryModal, closeSummaryModal]);
+
+  // 底部操作区位置模式（移动端强制使用 float-all 吸底悬浮，弹窗模式下不强制）
+  var footerPosition = useMemo(function () {
+    if (isMobile && mode !== 'modal') return 'float-all';
+    return (footerProps === null || footerProps === void 0 ? void 0 : footerProps.position) || 'float-sidebar';
+  }, [mode, isMobile, footerProps === null || footerProps === void 0 ? void 0 : footerProps.position]);
+
+  // 容器类名
+  var containerCls = useMemo(function () {
+    return mergeClassNames('pisell-procedure', className,
+    // 弹窗模式添加 --modal 修饰类，用于禁用媒体查询
+    mode === 'modal' && 'pisell-procedure--modal', modifierClassName('pisell-procedure', "footer-".concat(footerPosition)));
+  }, [className, mode, footerPosition]);
+
+  // 判断底部是否全局显示
+  var footerIsGlobal = isFooterGlobal(footerPosition);
+
+  // 获取容器宽度和高度（垂直布局下不需要）
+  // const containerSize = useElementSize({
+  //   selector: bodyProps?.sidebarContainerSelector || '',
+  //   enabled:
+  //     bodyProps?.direction !== 'vertical' &&
+  //     !!bodyProps?.sidebarContainerSelector,
+  // });
+
+  // // 使用自定义 Hook 计算响应式类名
+  // const responsiveClsComputed =
+  //   mode === 'modal' ? useResponsiveClass(containerSize?.width || 0) : '';
+
+  // if (!responsiveClsComputed && mode === 'modal') return null;
+
+  return /*#__PURE__*/React.createElement("div", _extends({
+    className: containerCls,
+    style: style,
+    "data-component": "pisell-procedure",
+    "data-id": __id
+  }, other), /*#__PURE__*/React.createElement(PisellLayout, null, showHeader && /*#__PURE__*/React.createElement(ProcedureHeader, {
+    headerProps: headerProps,
+    currentStep: currentStep,
+    goPrev: _goPrev,
+    onClose: onClose,
+    onFirstStepBack: onFirstStepBack,
+    onBackConfirm: onBackConfirm,
+    onCloseConfirm: onCloseConfirm,
+    goToStep: _goToStep
+  }), /*#__PURE__*/React.createElement(ProcedureBody, {
+    bodyProps: bodyProps,
+    footerProps: footerProps,
+    footerPosition: footerPosition,
+    showFooter: showFooter && !footerIsGlobal,
+    showSidebar: showSidebar,
+    summaryModalOpen: summaryModalOpen,
+    onOpenSummaryModal: openSummaryModal,
+    onCloseSummaryModal: closeSummaryModal,
+    goPrev: _goPrev,
+    goNext: _goNext,
+    mode: mode
+    // containerSize={containerSize}
+    // responsiveClsComputed={responsiveClsComputed}
+  }), showFooter && footerIsGlobal && /*#__PURE__*/React.createElement(ProcedureFooter, {
+    footerProps: footerProps,
+    position: footerPosition,
+    isGlobal: true,
+    sidebarContent: bodyProps === null || bodyProps === void 0 ? void 0 : bodyProps.sidebarSlot,
+    summaryModalOpen: summaryModalOpen,
+    onOpenSummaryModal: openSummaryModal,
+    onCloseSummaryModal: closeSummaryModal,
+    goPrev: _goPrev,
+    goNext: _goNext,
+    mode: mode
+  })));
+});
+PisellProcedure.displayName = 'PisellProcedure';
+export default PisellProcedure;