@pisell/materials 1.0.1023 → 1.8.1

package/lib/components/pisellLongText/components/DisabledView.d.ts

@@ -0,0 +1,16 @@
+import React from 'react';
+import type { PisellLongTextProps } from '../types';
+/**
+ * PisellLongText 禁用态视图组件
+ *
+ * 负责渲染禁用态视图，基于原始 mode 渲染对应的视图，并添加禁用样式
+ *
+ * 设计规则：
+ * - 基于编辑态或只读态的视觉
+ * - 透明度 40%
+ * - 禁止所有交互行为
+ *
+ * @param props 组件 Props
+ */
+declare const DisabledView: React.FC<PisellLongTextProps>;
+export default DisabledView;

package/lib/components/pisellLongText/components/EditView.d.ts

@@ -0,0 +1,19 @@
+import React from 'react';
+import type { PisellLongTextProps } from '../types';
+/**
+ * PisellLongText 编辑态视图组件
+ *
+ * 负责渲染编辑态的多行输入框，基于 Ant Design TextArea 组件
+ *
+ * 功能：
+ * - 多行文本输入
+ * - 自动高度调整（autoSize）
+ * - 实时或失焦校验
+ * - 错误提示展示
+ * - 字数统计
+ * - 清空按钮
+ *
+ * @param props 组件 Props
+ */
+declare const EditView: React.FC<PisellLongTextProps>;
+export default EditView;

package/lib/components/pisellLongText/components/ReadOnlyView.d.ts

@@ -0,0 +1,18 @@
+import React from 'react';
+import type { PisellLongTextProps } from '../types';
+/**
+ * PisellLongText 只读态视图组件
+ *
+ * 负责渲染只读态的多行文本展示，支持展开/折叠功能
+ *
+ * 功能：
+ * - 多行文本展示
+ * - 根据 maxLines 截断内容
+ * - 展开/收起按钮（超出行数时显示）
+ * - 字数统计（可选）
+ * - 保留换行和空格（whiteSpace: 'pre-wrap'）
+ *
+ * @param props 组件 Props
+ */
+declare const ReadOnlyView: React.FC<PisellLongTextProps>;
+export default ReadOnlyView;

package/lib/components/pisellLongText/index.d.ts

@@ -0,0 +1,6 @@
+/**
+ * PisellLongText 组件导出
+ */
+export { default as PisellLongText } from './PisellLongText';
+export type { PisellLongTextProps } from './types';
+export type { DisplayState, ValidationResult, TextInputState } from './types';

package/lib/components/pisellLongText/types.d.ts

@@ -0,0 +1,147 @@
+import type { CSSProperties, KeyboardEvent } from 'react';
+import type { BaseTextInputProps } from '@pisell/utils';
+/**
+ * PisellLongText 组件 Props 类型定义
+ *
+ * 继承 BaseTextInputProps，添加长文本特有的配置
+ */
+export interface PisellLongTextProps extends BaseTextInputProps {
+    /**
+     * 状态模式
+     * @default 'edit'
+     */
+    mode?: 'read' | 'edit';
+    /**
+     * 是否禁用
+     * @default false
+     */
+    disabled?: boolean;
+    /**
+     * 编辑态默认显示行数
+     * @default 3
+     */
+    rows?: number;
+    /**
+     * 编辑态最小行数
+     */
+    minRows?: number;
+    /**
+     * 编辑态最大行数
+     */
+    maxRows?: number;
+    /**
+     * 自动高度调整
+     * @default false
+     * @example
+     * autoSize={true} // 自动调整
+     * autoSize={{ minRows: 3, maxRows: 10 }} // 指定范围
+     */
+    autoSize?: boolean | {
+        minRows?: number;
+        maxRows?: number;
+    };
+    /**
+     * 只读态最大显示行数（超出显示展开按钮）
+     * @default 3
+     */
+    maxLines?: number;
+    /**
+     * 是否启用展开功能（只读态）
+     * @default true
+     */
+    enableExpand?: boolean;
+    /**
+     * 展开按钮文案
+     * @default '展开'
+     */
+    expandText?: string;
+    /**
+     * 收起按钮文案
+     * @default '收起'
+     */
+    collapseText?: string;
+    /**
+     * 展开按钮位置
+     * @default 'bottom'
+     */
+    expandButtonPosition?: 'bottom' | 'inline';
+    /**
+     * 只读态是否显示字数统计
+     * @default false
+     */
+    showWordCount?: boolean;
+    /**
+     * 字号
+     * @example '14px' 或 14
+     * @default 16
+     */
+    fontSize?: string | number;
+    /**
+     * 字重
+     * @example 'bold' 或 600
+     * @default 500
+     */
+    fontWeight?: string | number;
+    /**
+     * 文本颜色
+     * @example '#000000'
+     * @default '#101828'
+     */
+    color?: string;
+    /**
+     * 行高
+     * @example '1.5' 或 1.5
+     * @default 1.5
+     */
+    lineHeight?: string | number;
+    /**
+     * 占位文本
+     */
+    placeholder?: string;
+    /**
+     * 最大长度（字符数）
+     */
+    maxLength?: number;
+    /**
+     * 是否显示字数统计（编辑态）
+     * @default false
+     */
+    showCount?: boolean;
+    /**
+     * 是否显示清空按钮
+     * @default false
+     */
+    allowClear?: boolean;
+    /**
+     * 是否自动聚焦
+     * @default false
+     */
+    autoFocus?: boolean;
+    /**
+     * 回车键回调（传递事件对象，支持判断 Ctrl+Enter）
+     * @param e 键盘事件对象
+     */
+    onPressEnter?: (e: KeyboardEvent<HTMLTextAreaElement>) => void;
+    /**
+     * 展开/收起回调
+     * @param expanded 是否已展开
+     */
+    onExpand?: (expanded: boolean) => void;
+    /**
+     * 自定义类名
+     */
+    className?: string;
+    /**
+     * 自定义样式
+     */
+    style?: CSSProperties;
+    /**
+     * ARIA 标签
+     */
+    'aria-label'?: string;
+    /**
+     * ARIA 描述
+     */
+    'aria-describedby'?: string;
+}
+export type { DisplayState, ValidationResult, TextInputState } from '@pisell/utils';

package/lib/components/pisellMetricCard/PisellMetricCard.d.ts

@@ -0,0 +1,35 @@
+import React from 'react';
+import type { PisellMetricCardProps } from './types';
+import './PisellMetricCard.less';
+/**
+ * PisellMetricCard 指标卡片组件
+ *
+ * 用于展示单一核心指标的专业卡片组件
+ * 支持标题、数值、环比、趋势箭头、标签等信息展示
+ *
+ * @example 基础用法
+ * ```tsx
+ * <PisellMetricCard
+ *   title="Total Sales"
+ *   value={1580}
+ * />
+ * ```
+ *
+ * @example 使用对象配置
+ * ```tsx
+ * <PisellMetricCard
+ *   title="Revenue"
+ *   value={1580}
+ *   format={{
+ *     showCurrencySymbol: true,
+ *     currencySymbol: '$',
+ *     useGrouping: true
+ *   }}
+ *   comparison={{
+ *     value: 120
+ *   }}
+ * />
+ * ```
+ */
+declare const PisellMetricCard: React.FC<PisellMetricCardProps>;
+export default PisellMetricCard;

package/lib/components/pisellMetricCard/PisellMetricCard.stories.d.ts

@@ -0,0 +1,17 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import PisellMetricCard from './PisellMetricCard';
+declare const meta: Meta<typeof PisellMetricCard>;
+export default meta;
+declare type Story = StoryObj<typeof PisellMetricCard>;
+export declare const Basic: Story;
+export declare const WithCurrency: Story;
+export declare const PositiveTrend: Story;
+export declare const NegativeTrend: Story;
+export declare const WithGrouping: Story;
+export declare const WithPrecision: Story;
+export declare const Complete: Story;
+export declare const WithTag: Story;
+export declare const CustomStyle: Story;
+export declare const Loading: Story;
+export declare const EmptyValue: Story;
+export declare const MultipleCards: Story;

package/lib/components/pisellMetricCard/components/MetricComparison.d.ts

@@ -0,0 +1,14 @@
+import React from 'react';
+import type { MetricComparisonProps } from '../types';
+/**
+ * MetricComparison 环比信息组件
+ *
+ * 负责渲染环比数值和趋势箭头
+ * - 自动根据正负值显示不同颜色
+ * - 支持格式化环比数值
+ * - 集成趋势箭头组件
+ *
+ * @param props 组件属性
+ */
+declare const MetricComparison: React.FC<MetricComparisonProps>;
+export default MetricComparison;

package/lib/components/pisellMetricCard/components/MetricTitle.d.ts

@@ -0,0 +1,12 @@
+import React from 'react';
+import type { MetricTitleProps } from '../types';
+/**
+ * MetricTitle 标题组件
+ *
+ * 负责渲染标题、副标题和提示信息
+ * 支持自定义字号、字重、颜色等样式
+ *
+ * @param props 组件属性
+ */
+declare const MetricTitle: React.FC<MetricTitleProps>;
+export default MetricTitle;

package/lib/components/pisellMetricCard/components/MetricValue.d.ts

@@ -0,0 +1,12 @@
+import React from 'react';
+import type { MetricValueProps } from '../types';
+/**
+ * MetricValue 数值展示组件
+ *
+ * 负责渲染格式化后的主数值
+ * 支持自定义字号、字重、颜色等样式
+ *
+ * @param props 组件属性
+ */
+declare const MetricValue: React.FC<MetricValueProps>;
+export default MetricValue;

package/lib/components/pisellMetricCard/components/TrendIcon.d.ts

@@ -0,0 +1,14 @@
+import React from 'react';
+import type { TrendIconProps } from '../types';
+/**
+ * TrendIcon 趋势箭头组件
+ *
+ * 根据趋势类型显示上升或下降箭头
+ * - up: 显示上升箭头 ↑
+ * - down: 显示下降箭头 ↓
+ * - neutral: 不显示箭头
+ *
+ * @param props 组件属性
+ */
+declare const TrendIcon: React.FC<TrendIconProps>;
+export default TrendIcon;

package/lib/components/pisellMetricCard/components/index.d.ts

@@ -0,0 +1,7 @@
+/**
+ * 子组件导出
+ */
+export { default as TrendIcon } from './TrendIcon';
+export { default as MetricValue } from './MetricValue';
+export { default as MetricTitle } from './MetricTitle';
+export { default as MetricComparison } from './MetricComparison';

package/lib/components/pisellMetricCard/index.d.ts

@@ -0,0 +1,6 @@
+/**
+ * PisellMetricCard 组件导出
+ */
+export { default as PisellMetricCard } from './PisellMetricCard';
+export type { PisellMetricCardProps, TrendType, FormatOptions, MetricTitleProps, MetricValueProps, MetricComparisonProps, TrendIconProps, } from './types';
+export { default } from './PisellMetricCard';

package/lib/components/pisellMetricCard/types.d.ts

@@ -0,0 +1,201 @@
+import type { CSSProperties, ReactNode } from 'react';
+/**
+ * 趋势类型
+ */
+export declare type TrendType = 'up' | 'down' | 'neutral';
+/**
+ * 数值格式化配置
+ */
+export interface ValueFormatConfig {
+    /** 小数精度（小数位数），默认 0 */
+    precision?: number;
+    /** 是否使用千分位分隔符，默认 false */
+    useGrouping?: boolean;
+    /** 是否显示货币符号，默认 false */
+    showCurrencySymbol?: boolean;
+    /** 货币符号（如 $, ¥），默认 '' */
+    currencySymbol?: string;
+    /** 自定义格式化函数 */
+    formatter?: (value: number | null) => string;
+    /** 整数时隐藏小数部分，默认 true */
+    hideDecimalForWholeNumbers?: boolean;
+}
+/**
+ * 环比配置
+ */
+export interface ComparisonConfig {
+    /** 环比数值（支持正负值） */
+    value: number | string | null;
+    /** 环比前缀文本，默认 'v.s. pre' */
+    text?: string;
+    /** 是否显示趋势箭头，默认 true */
+    showTrendIcon?: boolean;
+    /** 正向趋势颜色，默认 '#52c41a' */
+    positiveColor?: string;
+    /** 负向趋势颜色，默认 '#ff4d4f' */
+    negativeColor?: string;
+    /** 环比字号，默认 14 */
+    size?: number | string;
+}
+/**
+ * 样式配置
+ */
+export interface MetricCardStyleConfig {
+    /** 卡片容器样式 */
+    card?: {
+        /** 是否显示边框，默认 true */
+        bordered?: boolean;
+        /** 圆角大小（px），默认 12 */
+        borderRadius?: number;
+        /** 内边距（px），默认 16 */
+        padding?: number;
+        /** 阴影效果，默认 true */
+        shadow?: boolean | string;
+        /** 背景色，默认 '#ffffff' */
+        background?: string;
+        /** 卡片宽度，默认 'auto' */
+        width?: string | number;
+    };
+    /** 标题样式 */
+    title?: {
+        /** 字号，默认 14 */
+        size?: number | string;
+        /** 字重，默认 400 */
+        weight?: number | string;
+        /** 颜色，默认 'rgba(0, 0, 0, 0.45)' */
+        color?: string;
+    };
+    /** 数值样式 */
+    value?: {
+        /** 字号，默认 30 */
+        size?: number | string;
+        /** 字重，默认 600 */
+        weight?: number | string;
+        /** 颜色，默认 'rgba(0, 0, 0, 0.85)' */
+        color?: string;
+    };
+}
+/**
+ * PisellMetricCard 组件 Props
+ *
+ * 采用扁平 + 对象组合的设计，降低复杂度和耦合
+ *
+ * @example 基础用法
+ * ```tsx
+ * <PisellMetricCard
+ *   title="Total Sales"
+ *   value={1580}
+ * />
+ * ```
+ *
+ * @example 带格式化和环比
+ * ```tsx
+ * <PisellMetricCard
+ *   title="Revenue"
+ *   value={1580}
+ *   format={{
+ *     showCurrencySymbol: true,
+ *     currencySymbol: '$',
+ *     useGrouping: true
+ *   }}
+ *   comparison={{
+ *     value: 120,
+ *     text: 'v.s. last month'
+ *   }}
+ * />
+ * ```
+ */
+export interface PisellMetricCardProps {
+    /** 标题文本 */
+    title: string | ReactNode;
+    /** 主数值 */
+    value: number | string | null;
+    /** 副标题文本（可选） */
+    subtitle?: string | ReactNode;
+    /** 标签内容（可选） */
+    tag?: ReactNode;
+    /** 提示信息内容（可选） */
+    tooltip?: string | ReactNode;
+    /**
+     * 数值格式化配置
+     * @example format={{ precision: 2, useGrouping: true, currencySymbol: '$' }}
+     */
+    format?: ValueFormatConfig;
+    /**
+     * 环比配置
+     * @example comparison={{ value: 120, text: 'v.s. pre' }}
+     */
+    comparison?: ComparisonConfig;
+    /**
+     * 样式配置
+     * @example
+     * styleConfig={{
+     *   card: { borderRadius: 8, padding: 24 },
+     *   title: { size: 16, weight: 600 },
+     *   value: { size: 36, color: '#1890ff' }
+     * }}
+     */
+    styleConfig?: MetricCardStyleConfig;
+    /** 是否显示副标题，默认 false */
+    showSubtitle?: boolean;
+    /** 是否显示标签，默认 false */
+    showTag?: boolean;
+    /** 是否显示提示信息，默认 false */
+    showTooltip?: boolean;
+    /** 是否显示加载状态，默认 false */
+    loading?: boolean;
+    /** 鼠标悬停是否有交互效果，默认 true */
+    hoverable?: boolean;
+    /** 自定义类名 */
+    className?: string;
+    /** 自定义样式 */
+    style?: CSSProperties;
+    /** 点击卡片回调 */
+    onClick?: () => void;
+}
+/**
+ * FormatOptions (别名，用于导出)
+ */
+export interface FormatOptions extends ValueFormatConfig {
+}
+/**
+ * MetricTitle 组件 Props
+ */
+export interface MetricTitleProps {
+    title: string | ReactNode;
+    subtitle?: string | ReactNode;
+    tooltip?: string | ReactNode;
+    titleSize?: number | string;
+    titleWeight?: number | string;
+    titleColor?: string;
+}
+/**
+ * MetricValue 组件 Props
+ */
+export interface MetricValueProps {
+    value: string | null;
+    valueSize?: number | string;
+    valueWeight?: number | string;
+    valueColor?: string;
+}
+/**
+ * MetricComparison 组件 Props
+ */
+export interface MetricComparisonProps {
+    comparison: number | string | null;
+    comparisonText?: string;
+    showTrendIcon?: boolean;
+    positiveColor?: string;
+    negativeColor?: string;
+    comparisonSize?: number | string;
+    precision?: number;
+    showCurrencySymbol?: boolean;
+    currencySymbol?: string;
+}
+/**
+ * TrendIcon 组件 Props
+ */
+export interface TrendIconProps {
+    trend: TrendType;
+    color?: string;
+}

package/lib/components/pisellMetricCard/utils/calculateTrend.d.ts

@@ -0,0 +1,14 @@
+import type { TrendType } from '../types';
+/**
+ * 计算趋势方向
+ *
+ * @param comparison 环比数值
+ * @returns 'up' | 'down' | 'neutral'
+ *
+ * @example
+ * calculateTrend(120) // 'up'
+ * calculateTrend(-230) // 'down'
+ * calculateTrend(0) // 'neutral'
+ * calculateTrend(null) // 'neutral'
+ */
+export declare function calculateTrend(comparison: number | string | null | undefined): TrendType;

package/lib/components/pisellMetricCard/utils/formatMetricValue.d.ts

@@ -0,0 +1,34 @@
+import type { FormatOptions } from '../types';
+/**
+ * 格式化指标数值
+ *
+ * 支持以下格式化选项：
+ * - 小数精度控制
+ * - 千分位分隔符
+ * - 货币符号显示
+ * - 自定义格式化函数
+ * - 整数时隐藏小数部分
+ *
+ * @param value 数值
+ * @param options 格式化选项
+ * @returns 格式化后的字符串，null 时返回 null
+ *
+ * @example
+ * formatMetricValue(1234.56, { precision: 2, useGrouping: true })
+ * // 返回: "1,234.56"
+ *
+ * @example
+ * formatMetricValue(1580, {
+ *   showCurrencySymbol: true,
+ *   currencySymbol: '$'
+ * })
+ * // 返回: "$1580"
+ *
+ * @example
+ * formatMetricValue(100.00, {
+ *   precision: 2,
+ *   hideDecimalForWholeNumbers: true
+ * })
+ * // 返回: "100"
+ */
+export declare function formatMetricValue(value: number | string | null | undefined, options?: FormatOptions): string | null;

package/lib/components/pisellMetricCard/utils/index.d.ts

@@ -0,0 +1,5 @@
+/**
+ * 工具函数导出
+ */
+export { formatMetricValue } from './formatMetricValue';
+export { calculateTrend } from './calculateTrend';

package/lib/components/pisellModal/components/Information/index.d.ts

@@ -17,5 +17,5 @@ export interface InformationProps extends PisellModalProps {
     /** 右上角关闭按钮是否展示 */
     closable?: boolean;
 }
-declare const Information: (props: InformationProps) => JSX.Element;
+declare const Information: (props: InformationProps) => React.JSX.Element;
 export default Information;

package/lib/components/pisellModal/components/IpadModal/index.d.ts

@@ -1,6 +1,6 @@
-/// <reference types="react" />
+import React from 'react';
 import { PcModalProps } from '../PcModal';
 export interface IpadModalProps extends PcModalProps {
 }
-declare const IpadModal: (props: IpadModalProps) => JSX.Element;
+declare const IpadModal: (props: IpadModalProps) => React.JSX.Element;
 export default IpadModal;

package/lib/components/pisellModal/components/MobileModal/index.d.ts

@@ -1,9 +1,9 @@
-/// <reference types="react" />
+import React from 'react';
 import { PcModalProps } from '../PcModal';
 import './index.less';
 export interface MobileModalProps extends PcModalProps {
     /** 移动端展示时弹窗高度 默认null 在移动端全屏 */
     mobileModalHeight?: string | number;
 }
-declare const MobileModal: (props: MobileModalProps) => JSX.Element;
+declare const MobileModal: (props: MobileModalProps) => React.JSX.Element;
 export default MobileModal;

package/lib/components/pisellModal/components/PcModal/index.d.ts

@@ -26,5 +26,5 @@ export interface PcModalProps extends ModalProps {
     /** header是否展示 */
     header?: boolean | null;
 }
-declare const PcModal: (props: PcModalProps) => JSX.Element;
+declare const PcModal: (props: PcModalProps) => React.JSX.Element;
 export default PcModal;

package/lib/components/pisellModal/components/index.d.ts

@@ -3,8 +3,8 @@ import IpadModal from './IpadModal';
 import MobileModal from './MobileModal';
 import PcModal from './PcModal';
 declare const platformCpt: {
-    h5: (props: import("./MobileModal").MobileModalProps) => JSX.Element;
-    pc: (props: import("./PcModal").PcModalProps) => JSX.Element;
-    ipad: (props: import("./IpadModal").IpadModalProps) => JSX.Element;
+    h5: (props: import("./MobileModal").MobileModalProps) => import("react").JSX.Element;
+    pc: (props: import("./PcModal").PcModalProps) => import("react").JSX.Element;
+    ipad: (props: import("./IpadModal").IpadModalProps) => import("react").JSX.Element;
 };
 export { IpadModal, MobileModal, PcModal, platformCpt };

package/lib/components/pisellModal/index.d.ts

@@ -31,7 +31,7 @@ export interface PisellModalProps extends ModalProps {
     header?: boolean | null;
 }
 declare const PisellModal: {
-    (props: PisellModalProps): JSX.Element;
+    (props: PisellModalProps): React.JSX.Element;
     confirm: (props: import("./components/functions").PisellModalFuncProps) => {
         destroy: () => void;
         update: (configUpdate: import("antd").ModalFuncProps | ((prevConfig: import("antd").ModalFuncProps) => import("antd").ModalFuncProps)) => void;
@@ -53,6 +53,6 @@ declare const PisellModal: {
         destroy: () => void;
         update: (configUpdate: import("antd").ModalFuncProps | ((prevConfig: import("antd").ModalFuncProps) => import("antd").ModalFuncProps)) => void;
     };
-    Information: (props: import("./components/Information").InformationProps) => JSX.Element;
+    Information: (props: import("./components/Information").InformationProps) => React.JSX.Element;
 };
 export default PisellModal;

package/lib/components/pisellMultipleSelect/PisellMultipleSelect.d.ts

@@ -0,0 +1,9 @@
+/**
+ * PisellMultipleSelect - 多选下拉组件
+ * 基于 Ant Design Select 封装，提供符合 Pisell 设计规范的多选功能
+ */
+import React from 'react';
+import type { PisellMultipleSelectProps, MultipleSelectRef } from './types';
+import './PisellMultipleSelect.less';
+declare const PisellMultipleSelect: React.ForwardRefExoticComponent<PisellMultipleSelectProps<string | number> & React.RefAttributes<MultipleSelectRef<string | number>>>;
+export default PisellMultipleSelect;