@pisell/materials 3.3.81 → 3.3.83

package/es/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/es/components/pisellMetricCard/PisellMetricCard.js

@@ -0,0 +1,169 @@
+function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); }
+function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+function _defineProperty(obj, key, value) { key = _toPropertyKey(key); if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
+function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == _typeof(i) ? i : String(i); }
+function _toPrimitive(t, r) { if ("object" != _typeof(t) || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != _typeof(i)) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
+import React, { useMemo } from 'react';
+import PisellCard from "../pisellCard";
+import { MetricTitle, MetricValue, MetricComparison } from "./components";
+import { formatMetricValue } from "./utils";
+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 
+ *   }}
+ * />
+ * ```
+ */
+var PisellMetricCard = function PisellMetricCard(props) {
+  var title = props.title,
+    subtitle = props.subtitle,
+    value = props.value,
+    tag = props.tag,
+    tooltip = props.tooltip,
+    format = props.format,
+    comparison = props.comparison,
+    styleConfig = props.styleConfig,
+    _props$showSubtitle = props.showSubtitle,
+    showSubtitle = _props$showSubtitle === void 0 ? false : _props$showSubtitle,
+    _props$showTag = props.showTag,
+    showTag = _props$showTag === void 0 ? false : _props$showTag,
+    _props$showTooltip = props.showTooltip,
+    showTooltip = _props$showTooltip === void 0 ? false : _props$showTooltip,
+    _props$loading = props.loading,
+    loading = _props$loading === void 0 ? false : _props$loading,
+    _props$hoverable = props.hoverable,
+    hoverable = _props$hoverable === void 0 ? true : _props$hoverable,
+    className = props.className,
+    style = props.style,
+    onClick = props.onClick;
+
+  // 提取格式化配置（带默认值）
+  var formatConfig = useMemo(function () {
+    var _format$precision, _format$useGrouping, _format$showCurrencyS, _format$currencySymbo, _format$hideDecimalFo;
+    return {
+      precision: (_format$precision = format === null || format === void 0 ? void 0 : format.precision) !== null && _format$precision !== void 0 ? _format$precision : 0,
+      useGrouping: (_format$useGrouping = format === null || format === void 0 ? void 0 : format.useGrouping) !== null && _format$useGrouping !== void 0 ? _format$useGrouping : false,
+      showCurrencySymbol: (_format$showCurrencyS = format === null || format === void 0 ? void 0 : format.showCurrencySymbol) !== null && _format$showCurrencyS !== void 0 ? _format$showCurrencyS : false,
+      currencySymbol: (_format$currencySymbo = format === null || format === void 0 ? void 0 : format.currencySymbol) !== null && _format$currencySymbo !== void 0 ? _format$currencySymbo : '',
+      formatter: format === null || format === void 0 ? void 0 : format.formatter,
+      hideDecimalForWholeNumbers: (_format$hideDecimalFo = format === null || format === void 0 ? void 0 : format.hideDecimalForWholeNumbers) !== null && _format$hideDecimalFo !== void 0 ? _format$hideDecimalFo : true
+    };
+  }, [format]);
+
+  // 提取卡片样式配置（带默认值）
+  var cardStyle = useMemo(function () {
+    var _styleConfig$card$bor, _styleConfig$card, _styleConfig$card$bor2, _styleConfig$card2, _styleConfig$card$pad, _styleConfig$card3, _styleConfig$card$sha, _styleConfig$card4, _styleConfig$card$bac, _styleConfig$card5, _styleConfig$card$wid, _styleConfig$card6;
+    return {
+      bordered: (_styleConfig$card$bor = styleConfig === null || styleConfig === void 0 || (_styleConfig$card = styleConfig.card) === null || _styleConfig$card === void 0 ? void 0 : _styleConfig$card.bordered) !== null && _styleConfig$card$bor !== void 0 ? _styleConfig$card$bor : true,
+      borderRadius: (_styleConfig$card$bor2 = styleConfig === null || styleConfig === void 0 || (_styleConfig$card2 = styleConfig.card) === null || _styleConfig$card2 === void 0 ? void 0 : _styleConfig$card2.borderRadius) !== null && _styleConfig$card$bor2 !== void 0 ? _styleConfig$card$bor2 : 12,
+      padding: (_styleConfig$card$pad = styleConfig === null || styleConfig === void 0 || (_styleConfig$card3 = styleConfig.card) === null || _styleConfig$card3 === void 0 ? void 0 : _styleConfig$card3.padding) !== null && _styleConfig$card$pad !== void 0 ? _styleConfig$card$pad : 16,
+      shadow: (_styleConfig$card$sha = styleConfig === null || styleConfig === void 0 || (_styleConfig$card4 = styleConfig.card) === null || _styleConfig$card4 === void 0 ? void 0 : _styleConfig$card4.shadow) !== null && _styleConfig$card$sha !== void 0 ? _styleConfig$card$sha : true,
+      background: (_styleConfig$card$bac = styleConfig === null || styleConfig === void 0 || (_styleConfig$card5 = styleConfig.card) === null || _styleConfig$card5 === void 0 ? void 0 : _styleConfig$card5.background) !== null && _styleConfig$card$bac !== void 0 ? _styleConfig$card$bac : '#ffffff',
+      width: (_styleConfig$card$wid = styleConfig === null || styleConfig === void 0 || (_styleConfig$card6 = styleConfig.card) === null || _styleConfig$card6 === void 0 ? void 0 : _styleConfig$card6.width) !== null && _styleConfig$card$wid !== void 0 ? _styleConfig$card$wid : 'auto'
+    };
+  }, [styleConfig]);
+
+  // 提取标题样式配置（带默认值）
+  var titleStyle = useMemo(function () {
+    var _styleConfig$title$si, _styleConfig$title, _styleConfig$title$we, _styleConfig$title2, _styleConfig$title$co, _styleConfig$title3;
+    return {
+      size: (_styleConfig$title$si = styleConfig === null || styleConfig === void 0 || (_styleConfig$title = styleConfig.title) === null || _styleConfig$title === void 0 ? void 0 : _styleConfig$title.size) !== null && _styleConfig$title$si !== void 0 ? _styleConfig$title$si : 14,
+      weight: (_styleConfig$title$we = styleConfig === null || styleConfig === void 0 || (_styleConfig$title2 = styleConfig.title) === null || _styleConfig$title2 === void 0 ? void 0 : _styleConfig$title2.weight) !== null && _styleConfig$title$we !== void 0 ? _styleConfig$title$we : 400,
+      color: (_styleConfig$title$co = styleConfig === null || styleConfig === void 0 || (_styleConfig$title3 = styleConfig.title) === null || _styleConfig$title3 === void 0 ? void 0 : _styleConfig$title3.color) !== null && _styleConfig$title$co !== void 0 ? _styleConfig$title$co : 'rgba(0, 0, 0, 0.45)'
+    };
+  }, [styleConfig]);
+
+  // 提取数值样式配置（带默认值）
+  var valueStyle = useMemo(function () {
+    var _styleConfig$value$si, _styleConfig$value, _styleConfig$value$we, _styleConfig$value2, _styleConfig$value$co, _styleConfig$value3;
+    return {
+      size: (_styleConfig$value$si = styleConfig === null || styleConfig === void 0 || (_styleConfig$value = styleConfig.value) === null || _styleConfig$value === void 0 ? void 0 : _styleConfig$value.size) !== null && _styleConfig$value$si !== void 0 ? _styleConfig$value$si : 30,
+      weight: (_styleConfig$value$we = styleConfig === null || styleConfig === void 0 || (_styleConfig$value2 = styleConfig.value) === null || _styleConfig$value2 === void 0 ? void 0 : _styleConfig$value2.weight) !== null && _styleConfig$value$we !== void 0 ? _styleConfig$value$we : 600,
+      color: (_styleConfig$value$co = styleConfig === null || styleConfig === void 0 || (_styleConfig$value3 = styleConfig.value) === null || _styleConfig$value3 === void 0 ? void 0 : _styleConfig$value3.color) !== null && _styleConfig$value$co !== void 0 ? _styleConfig$value$co : 'rgba(0, 0, 0, 0.85)'
+    };
+  }, [styleConfig]);
+
+  // 格式化主数值
+  var formattedValue = useMemo(function () {
+    return formatMetricValue(value, formatConfig);
+  }, [value, formatConfig]);
+
+  // 提取环比配置（带默认值）
+  var comparisonConfig = useMemo(function () {
+    var _comparison$text, _comparison$showTrend, _comparison$positiveC, _comparison$negativeC, _comparison$size;
+    if (!(comparison !== null && comparison !== void 0 && comparison.value)) return null;
+    return {
+      value: comparison.value,
+      text: (_comparison$text = comparison.text) !== null && _comparison$text !== void 0 ? _comparison$text : 'v.s. pre',
+      showTrendIcon: (_comparison$showTrend = comparison.showTrendIcon) !== null && _comparison$showTrend !== void 0 ? _comparison$showTrend : true,
+      positiveColor: (_comparison$positiveC = comparison.positiveColor) !== null && _comparison$positiveC !== void 0 ? _comparison$positiveC : '#52c41a',
+      negativeColor: (_comparison$negativeC = comparison.negativeColor) !== null && _comparison$negativeC !== void 0 ? _comparison$negativeC : '#ff4d4f',
+      size: (_comparison$size = comparison.size) !== null && _comparison$size !== void 0 ? _comparison$size : 14
+    };
+  }, [comparison]);
+  return /*#__PURE__*/React.createElement(PisellCard, {
+    bordered: cardStyle.bordered,
+    borderRadius: cardStyle.borderRadius,
+    padding: cardStyle.padding,
+    loading: loading,
+    isClickable: !!onClick,
+    onClick: onClick,
+    style: _objectSpread({
+      width: typeof cardStyle.width === 'number' ? "".concat(cardStyle.width, "px") : cardStyle.width,
+      background: cardStyle.background,
+      boxShadow: typeof cardStyle.shadow === 'string' ? cardStyle.shadow : cardStyle.shadow ? '0px 1px 2px 0px rgba(16, 24, 40, 0.05)' : 'none'
+    }, style),
+    className: "pisell-metric-card ".concat(className || '')
+  }, /*#__PURE__*/React.createElement(MetricTitle, {
+    title: title,
+    subtitle: showSubtitle ? subtitle : undefined,
+    tooltip: showTooltip ? tooltip : undefined,
+    titleSize: titleStyle.size,
+    titleWeight: titleStyle.weight,
+    titleColor: titleStyle.color
+  }), /*#__PURE__*/React.createElement(MetricValue, {
+    value: formattedValue,
+    valueSize: valueStyle.size,
+    valueWeight: valueStyle.weight,
+    valueColor: valueStyle.color
+  }), comparisonConfig && /*#__PURE__*/React.createElement(MetricComparison, {
+    comparison: comparisonConfig.value,
+    comparisonText: comparisonConfig.text,
+    showTrendIcon: comparisonConfig.showTrendIcon,
+    positiveColor: comparisonConfig.positiveColor,
+    negativeColor: comparisonConfig.negativeColor,
+    comparisonSize: comparisonConfig.size,
+    precision: formatConfig.precision,
+    showCurrencySymbol: formatConfig.showCurrencySymbol,
+    currencySymbol: formatConfig.currencySymbol
+  }), showTag && tag && /*#__PURE__*/React.createElement("div", {
+    className: "pisell-metric-card-tag"
+  }, tag));
+};
+export default PisellMetricCard;

package/es/components/pisellMetricCard/PisellMetricCard.less

@@ -0,0 +1,74 @@
+.pisell-metric-card {
+  // 标题区域
+  &-title-wrapper {
+    // 不设置固定的 margin-bottom，由子元素控制
+  }
+  
+  &-title {
+    font-size: 14px;
+    font-weight: 400;
+    color: rgba(0, 0, 0, 0.45);
+    line-height: 22px;
+    margin-bottom: 0;
+    
+    // 如果后面有副标题，间距为 4px
+    & + .pisell-metric-card-subtitle {
+      margin-top: 4px;
+    }
+  }
+  
+  &-subtitle {
+    font-size: 12px;
+    font-weight: 400;
+    color: rgba(0, 0, 0, 0.45);
+    line-height: 20px;
+    margin-bottom: 0;
+  }
+  
+  // 标题区域与数值区域的间距：8px
+  &-title-wrapper + &-value {
+    margin-top: 8px;
+  }
+  
+  // 数值区域
+  &-value {
+    font-size: 30px;
+    font-weight: 600;
+    color: rgba(0, 0, 0, 0.85);
+    line-height: 38px;
+    margin-bottom: 0;
+  }
+  
+  // 数值与环比信息的间距：4px
+  &-value + &-comparison {
+    margin-top: 4px;
+  }
+  
+  // 环比信息区域
+  &-comparison {
+    display: flex;
+    align-items: center;
+    gap: 4px;
+    font-size: 14px;
+    line-height: 22px;
+  }
+  
+  &-trend-icon {
+    font-size: 12px;
+  }
+  
+  // 环比信息与标签的间距：8px
+  &-comparison + &-tag {
+    margin-top: 8px;
+  }
+  
+  // 如果没有环比，数值与标签的间距
+  &-value + &-tag {
+    margin-top: 8px;
+  }
+  
+  // 标签区域
+  &-tag {
+    // margin-top 由上面的相邻选择器控制
+  }
+}

package/es/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/es/components/pisellMetricCard/PisellMetricCard.stories.js

@@ -0,0 +1,208 @@
+import { Tag } from 'antd';
+import PisellMetricCard from "./PisellMetricCard";
+var meta = {
+  title: 'Data Display/PisellMetricCard',
+  component: PisellMetricCard,
+  tags: ['autodocs'],
+  argTypes: {
+    title: {
+      description: '标题文本',
+      control: 'text'
+    },
+    value: {
+      description: '主数值',
+      control: 'number'
+    }
+  }
+};
+export default meta;
+// 基础示例
+export var Basic = {
+  args: {
+    title: 'Total Sales',
+    value: 1580
+  }
+};
+
+// 带货币符号（新写法）
+export var WithCurrency = {
+  args: {
+    title: 'Revenue',
+    value: 1580,
+    format: {
+      showCurrencySymbol: true,
+      currencySymbol: '$'
+    }
+  }
+};
+
+// 正向趋势（新写法）
+export var PositiveTrend = {
+  args: {
+    title: 'Total Orders',
+    value: 50,
+    comparison: {
+      value: 12
+    }
+  }
+};
+
+// 负向趋势（新写法）
+export var NegativeTrend = {
+  args: {
+    title: 'Total Items',
+    value: 3249,
+    comparison: {
+      value: -230
+    }
+  }
+};
+
+// 千分位格式（新写法）
+export var WithGrouping = {
+  args: {
+    title: 'Total Revenue',
+    value: 1234567,
+    format: {
+      useGrouping: true,
+      showCurrencySymbol: true,
+      currencySymbol: '$'
+    }
+  }
+};
+
+// 小数精度
+export var WithPrecision = {
+  args: {
+    title: 'Conversion Rate',
+    value: 18.567,
+    format: {
+      precision: 2
+    }
+  }
+};
+
+// 完整配置（新写法，更清晰）
+export var Complete = {
+  args: {
+    title: 'Monthly Revenue',
+    subtitle: 'Last 30 days',
+    value: 125000,
+    tooltip: 'Total revenue from all sales channels',
+    showSubtitle: true,
+    showTooltip: true,
+    format: {
+      showCurrencySymbol: true,
+      currencySymbol: '$',
+      useGrouping: true,
+      precision: 2
+    },
+    comparison: {
+      value: 15000,
+      text: 'v.s. pre'
+    }
+  }
+};
+
+// 带标签
+export var WithTag = {
+  args: {
+    title: 'Active Users',
+    value: 1128,
+    tag: /*#__PURE__*/React.createElement(Tag, {
+      color: "green"
+    }, "+15%"),
+    showTag: true
+  }
+};
+
+// 自定义样式（新写法）
+export var CustomStyle = {
+  args: {
+    title: 'Custom Style Card',
+    value: 1580,
+    comparison: {
+      value: 120
+    },
+    styleConfig: {
+      card: {
+        borderRadius: 8,
+        padding: 24,
+        background: '#f5f5f5',
+        width: 300
+      },
+      title: {
+        size: 16,
+        weight: 600,
+        color: '#1890ff'
+      },
+      value: {
+        size: 36,
+        weight: 700,
+        color: '#52c41a'
+      }
+    }
+  }
+};
+
+// 加载状态
+export var Loading = {
+  args: {
+    title: 'Loading Data',
+    value: 1580,
+    loading: true
+  }
+};
+
+// 空值
+export var EmptyValue = {
+  args: {
+    title: 'No Data',
+    value: null
+  }
+};
+
+// 多卡片布局
+export var MultipleCards = {
+  render: function render() {
+    return /*#__PURE__*/React.createElement("div", {
+      style: {
+        display: 'grid',
+        gridTemplateColumns: 'repeat(auto-fit, minmax(200px, 1fr))',
+        gap: 16
+      }
+    }, /*#__PURE__*/React.createElement(PisellMetricCard, {
+      title: "Total Orders",
+      value: 50,
+      comparison: {
+        value: 12
+      }
+    }), /*#__PURE__*/React.createElement(PisellMetricCard, {
+      title: "Total Sales",
+      value: 1580,
+      format: {
+        showCurrencySymbol: true,
+        currencySymbol: '$'
+      },
+      comparison: {
+        value: 120
+      }
+    }), /*#__PURE__*/React.createElement(PisellMetricCard, {
+      title: "Total Discount",
+      value: 230,
+      format: {
+        showCurrencySymbol: true,
+        currencySymbol: '$'
+      },
+      comparison: {
+        value: 80
+      }
+    }), /*#__PURE__*/React.createElement(PisellMetricCard, {
+      title: "Total Items",
+      value: 3249,
+      comparison: {
+        value: -230
+      }
+    }));
+  }
+};

package/es/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/es/components/pisellMetricCard/components/MetricComparison.js

@@ -0,0 +1,72 @@
+import React, { useMemo } from 'react';
+import TrendIcon from "./TrendIcon";
+import { formatMetricValue, calculateTrend } from "../utils";
+/**
+ * MetricComparison 环比信息组件
+ * 
+ * 负责渲染环比数值和趋势箭头
+ * - 自动根据正负值显示不同颜色
+ * - 支持格式化环比数值
+ * - 集成趋势箭头组件
+ * 
+ * @param props 组件属性
+ */
+var MetricComparison = function MetricComparison(_ref) {
+  var comparison = _ref.comparison,
+    _ref$comparisonText = _ref.comparisonText,
+    comparisonText = _ref$comparisonText === void 0 ? 'v.s. pre' : _ref$comparisonText,
+    _ref$showTrendIcon = _ref.showTrendIcon,
+    showTrendIcon = _ref$showTrendIcon === void 0 ? true : _ref$showTrendIcon,
+    _ref$positiveColor = _ref.positiveColor,
+    positiveColor = _ref$positiveColor === void 0 ? '#52c41a' : _ref$positiveColor,
+    _ref$negativeColor = _ref.negativeColor,
+    negativeColor = _ref$negativeColor === void 0 ? '#ff4d4f' : _ref$negativeColor,
+    _ref$comparisonSize = _ref.comparisonSize,
+    comparisonSize = _ref$comparisonSize === void 0 ? 14 : _ref$comparisonSize,
+    precision = _ref.precision,
+    showCurrencySymbol = _ref.showCurrencySymbol,
+    currencySymbol = _ref.currencySymbol;
+  // 计算趋势
+  var trend = useMemo(function () {
+    return calculateTrend(comparison);
+  }, [comparison]);
+
+  // 格式化环比数值（取绝对值）
+  var formattedComparison = useMemo(function () {
+    if (comparison === null || comparison === undefined) {
+      return null;
+    }
+    var numComparison = typeof comparison === 'string' ? parseFloat(comparison) : comparison;
+    if (isNaN(numComparison)) {
+      return null;
+    }
+    return formatMetricValue(Math.abs(numComparison), {
+      precision: precision,
+      showCurrencySymbol: showCurrencySymbol,
+      currencySymbol: currencySymbol,
+      useGrouping: false
+    });
+  }, [comparison, precision, showCurrencySymbol, currencySymbol]);
+
+  // 如果环比值为空或无法格式化，不渲染
+  if (formattedComparison === null || trend === 'neutral') {
+    return null;
+  }
+
+  // 确定颜色
+  var color = trend === 'up' ? positiveColor : negativeColor;
+
+  // 确定符号
+  var sign = trend === 'up' ? '+' : '-';
+  return /*#__PURE__*/React.createElement("div", {
+    className: "pisell-metric-card-comparison",
+    style: {
+      fontSize: typeof comparisonSize === 'number' ? "".concat(comparisonSize, "px") : comparisonSize,
+      color: color
+    }
+  }, /*#__PURE__*/React.createElement("span", null, comparisonText), /*#__PURE__*/React.createElement("span", null, sign, formattedComparison), showTrendIcon && /*#__PURE__*/React.createElement(TrendIcon, {
+    trend: trend,
+    color: color
+  }));
+};
+export default MetricComparison;

package/es/components/pisellMetricCard/components/MetricTitle.js

@@ -0,0 +1,52 @@
+import React from 'react';
+import { Tooltip } from 'antd';
+import { QuestionCircleOutlined } from '@ant-design/icons';
+/**
+ * MetricTitle 标题组件
+ * 
+ * 负责渲染标题、副标题和提示信息
+ * 支持自定义字号、字重、颜色等样式
+ * 
+ * @param props 组件属性
+ */
+var MetricTitle = function MetricTitle(_ref) {
+  var title = _ref.title,
+    subtitle = _ref.subtitle,
+    tooltip = _ref.tooltip,
+    _ref$titleSize = _ref.titleSize,
+    titleSize = _ref$titleSize === void 0 ? 14 : _ref$titleSize,
+    _ref$titleWeight = _ref.titleWeight,
+    titleWeight = _ref$titleWeight === void 0 ? 400 : _ref$titleWeight,
+    _ref$titleColor = _ref.titleColor,
+    titleColor = _ref$titleColor === void 0 ? 'rgba(0, 0, 0, 0.45)' : _ref$titleColor;
+  var titleElement = /*#__PURE__*/React.createElement("div", {
+    className: "pisell-metric-card-title-wrapper"
+  }, /*#__PURE__*/React.createElement("div", {
+    className: "pisell-metric-card-title",
+    style: {
+      fontSize: typeof titleSize === 'number' ? "".concat(titleSize, "px") : titleSize,
+      fontWeight: titleWeight,
+      color: titleColor,
+      display: 'flex',
+      alignItems: 'center',
+      gap: '4px'
+    }
+  }, title, tooltip && /*#__PURE__*/React.createElement(Tooltip, {
+    title: tooltip
+  }, /*#__PURE__*/React.createElement(QuestionCircleOutlined, {
+    style: {
+      fontSize: 12,
+      color: titleColor,
+      cursor: 'help'
+    }
+  }))), subtitle && /*#__PURE__*/React.createElement("div", {
+    className: "pisell-metric-card-subtitle",
+    style: {
+      fontSize: 12,
+      fontWeight: 400,
+      color: titleColor
+    }
+  }, subtitle));
+  return titleElement;
+};
+export default MetricTitle;

package/es/components/pisellMetricCard/components/MetricValue.js

@@ -0,0 +1,29 @@
+import React from 'react';
+/**
+ * MetricValue 数值展示组件
+ * 
+ * 负责渲染格式化后的主数值
+ * 支持自定义字号、字重、颜色等样式
+ * 
+ * @param props 组件属性
+ */
+var MetricValue = function MetricValue(_ref) {
+  var value = _ref.value,
+    _ref$valueSize = _ref.valueSize,
+    valueSize = _ref$valueSize === void 0 ? 30 : _ref$valueSize,
+    _ref$valueWeight = _ref.valueWeight,
+    valueWeight = _ref$valueWeight === void 0 ? 600 : _ref$valueWeight,
+    _ref$valueColor = _ref.valueColor,
+    valueColor = _ref$valueColor === void 0 ? 'rgba(0, 0, 0, 0.85)' : _ref$valueColor;
+  // 处理空值显示
+  var displayValue = value !== null && value !== void 0 ? value : '-';
+  return /*#__PURE__*/React.createElement("div", {
+    className: "pisell-metric-card-value",
+    style: {
+      fontSize: typeof valueSize === 'number' ? "".concat(valueSize, "px") : valueSize,
+      fontWeight: valueWeight,
+      color: valueColor
+    }
+  }, displayValue);
+};
+export default MetricValue;