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
*
* ```
*
* @example 带格式化和环比
* ```tsx
*
* ```
*/
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;
}