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; }