@pisell/materials 3.3.87 → 3.3.89

package/es/components/pisellLookup/utils/trigger.d.ts

@@ -0,0 +1,42 @@
+import type { DisplayType, TriggerType } from '../types';
+/**
+ * 触发器相关工具函数
+ */
+/**
+ * 根据触发器类型获取默认的展示类型
+ * @param triggerType 触发器类型
+ * @param hasTrigger 是否有自定义触发器
+ * @returns 默认的展示类型
+ */
+export declare const getDefaultDisplayType: (triggerType?: TriggerType, hasTrigger?: boolean) => DisplayType;
+/**
+ * 判断是否为输入框触发器
+ * @param triggerType 触发器类型
+ * @returns 是否为输入框触发器
+ */
+export declare const isInputTrigger: (triggerType?: TriggerType) => boolean;
+/**
+ * 判断是否为按钮类触发器（button、icon、text、自定义）
+ * @param triggerType 触发器类型
+ * @param hasTrigger 是否有自定义触发器
+ * @returns 是否为按钮类触发器
+ */
+export declare const isButtonLikeTrigger: (triggerType?: TriggerType, hasTrigger?: boolean) => boolean;
+/**
+ * 判断展示类型是否需要容器（modal、drawer）
+ * @param displayType 展示类型
+ * @returns 是否需要容器
+ */
+export declare const needsContainer: (displayType?: DisplayType) => boolean;
+/**
+ * 判断展示类型是否需要浮层（popup）
+ * @param displayType 展示类型
+ * @returns 是否需要浮层
+ */
+export declare const needsPopup: (displayType?: DisplayType) => boolean;
+/**
+ * 判断展示类型是否为内联（inline）
+ * @param displayType 展示类型
+ * @returns 是否为内联
+ */
+export declare const isInline: (displayType?: DisplayType) => boolean;

package/es/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/es/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/es/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/es/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/es/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/es/components/pisellPercent/utils/rangeConverter.d.ts

@@ -0,0 +1,36 @@
+/**
+ * 百分比范围转换工具函数
+ */
+/**
+ * 将值转换为百分比（0-100）
+ *
+ * @param value 原始值
+ * @param range 值的范围
+ * @returns 转换后的百分比值（0-100）
+ *
+ * @example
+ * // [0, 100] 范围 - 直接返回
+ * convertToPercent(85.5, [0, 100])  // 返回: 85.5
+ *
+ * @example
+ * // [0, 1] 范围 - 乘以 100
+ * convertToPercent(0.855, [0, 1])  // 返回: 85.5
+ *
+ * @example
+ * // 自定义范围 - 按比例计算
+ * convertToPercent(855, [0, 1000])  // 返回: 85.5
+ */
+export declare function convertToPercent(value: number | null | undefined, range: [number, number]): number | null;
+/**
+ * 将百分比值转换回原始范围
+ *
+ * @param percent 百分比值（0-100）
+ * @param range 目标范围
+ * @returns 转换后的值
+ *
+ * @example
+ * convertFromPercent(85.5, [0, 100])  // 返回: 85.5
+ * convertFromPercent(85.5, [0, 1])    // 返回: 0.855
+ * convertFromPercent(85.5, [0, 1000]) // 返回: 855
+ */
+export declare function convertFromPercent(percent: number | null | undefined, range: [number, number]): number | null;

package/es/components/pisellPhone/utils/phoneFormatter.d.ts

@@ -0,0 +1,39 @@
+/**
+ * 电话号码格式化工具
+ */
+/**
+ * 中国大陆手机号格式化：138 0000 0000
+ */
+export declare function formatChinaMobile(phone: string): string;
+/**
+ * 美国/加拿大号码格式化：(555) 123-4567
+ */
+export declare function formatUSPhone(phone: string): string;
+/**
+ * 英国号码格式化：1234 567 8900
+ */
+export declare function formatUKPhone(phone: string): string;
+/**
+ * 根据国家码格式化电话号码
+ * @param phone 电话号码（纯数字）
+ * @param countryCode 国家码
+ * @returns 格式化后的电话号码
+ */
+export declare function formatPhone(phone: string, countryCode: string): string;
+/**
+ * 电话号码脱敏
+ * @param phone 电话号码
+ * @param pattern 脱敏模式
+ * @returns 脱敏后的号码
+ *
+ * @example
+ * maskPhone('13800000000', 'middle') // '138****0000'
+ * maskPhone('13800000000', 'last')   // '1380000****'
+ */
+export declare function maskPhone(phone: string, pattern?: 'middle' | 'last'): string;
+/**
+ * 检测号码类型（中国）
+ * @param phone 电话号码
+ * @returns 号码类型
+ */
+export declare function detectPhoneType(phone: string): 'mobile' | 'landline' | 'unknown';

package/es/components/pisellRecordBoard/context/RecordBoardContext.d.ts

@@ -0,0 +1,3 @@
+/// <reference types="react" />
+import type { RecordBoardContextValue } from '../types';
+export declare const RecordBoardContext: import("react").Context<RecordBoardContextValue | null>;

package/es/components/pisellRecordBoard/context/RecordBoardProvider.d.ts

@@ -0,0 +1,11 @@
+import React, { ReactNode } from 'react';
+import type { RecordBoardContextValue } from '../types';
+export interface RecordBoardProviderProps {
+    value: RecordBoardContextValue;
+    children: ReactNode;
+}
+/**
+ * 仅负责注入 RecordBoard 上下文。
+ * 实际的数据源、onSearch/onPageChange 由上层（如接 DataSourceContainer 或独立 fetch）提供。
+ */
+export declare const RecordBoardProvider: React.FC<RecordBoardProviderProps>;

package/es/components/pisellRecordBoard/hooks/useRecordBoardContext.d.ts

@@ -0,0 +1,16 @@
+import type { RecordBoardContextValue, RecordBoardChildComponentProps, RecordBoardGridProps } from '../types';
+export interface UseRecordBoardContextOptions {
+    /** 子组件 displayName，用于从 childComponentProps 中取对应 props */
+    displayName?: keyof RecordBoardChildComponentProps;
+    /** 上层传入的 childComponentProps（若 Context 未提供则从参数传入） */
+    childComponentProps?: RecordBoardChildComponentProps;
+}
+/**
+ * 消费 RecordBoard 上下文，供各 layout 内子组件（Search / ToolBar / Grid / CardList / Pagination）使用。
+ * 若传入 displayName，返回会合并 childComponentProps[displayName] 便于透传。
+ * 当 displayName 为 'grid' 时，返回类型包含 RecordBoardGridProps（columns、scroll、size）。
+ */
+export declare function useRecordBoardContext(options: UseRecordBoardContextOptions & {
+    displayName: 'grid';
+}): RecordBoardContextValue & RecordBoardGridProps;
+export declare function useRecordBoardContext(options?: UseRecordBoardContextOptions): RecordBoardContextValue;

package/es/components/pisellRecordBoard/layouts/CardLayout/CardList.d.ts

@@ -0,0 +1,12 @@
+import React from 'react';
+import type { RecordBoardContextValue } from '../../types';
+export interface RecordBoardCardListProps extends Partial<Pick<RecordBoardContextValue, 'data' | 'loading'>> {
+    className?: string;
+    style?: React.CSSProperties;
+    render?: (ctx: RecordBoardContextValue) => React.ReactNode;
+}
+/**
+ * Card 布局下的数据视图：从 context 取 data / loading。
+ */
+declare const RecordBoardCardList: React.FC<RecordBoardCardListProps>;
+export default RecordBoardCardList;

package/es/components/pisellRecordBoard/layouts/CardLayout/index.d.ts

@@ -0,0 +1,13 @@
+import React from 'react';
+import RecordBoardCardList from './CardList';
+/**
+ * Card 布局：仅内容区 = 卡片列表（不含分页）。
+ * 工具栏、多选操作栏、分页由 Shell Frame 提供，使用时用 ShellFrame 包裹：
+ * <PisellRecordBoard.ShellFrame><PisellRecordBoard.CardLayout /></PisellRecordBoard.ShellFrame>
+ */
+declare const CardLayout: React.FC<{
+    className?: string;
+    style?: React.CSSProperties;
+}>;
+export default CardLayout;
+export { RecordBoardCardList as CardLayoutCardList };