@pisell/materials 6.3.25 → 6.3.27

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;

package/es/components/pisellMetricCard/components/TrendIcon.js

@@ -0,0 +1,30 @@
+import React from 'react';
+import { ArrowUpOutlined, ArrowDownOutlined } from '@ant-design/icons';
+/**
+ * TrendIcon 趋势箭头组件
+ * 
+ * 根据趋势类型显示上升或下降箭头
+ * - up: 显示上升箭头 ↑
+ * - down: 显示下降箭头 ↓
+ * - neutral: 不显示箭头
+ * 
+ * @param props 组件属性
+ */
+var TrendIcon = function TrendIcon(_ref) {
+  var trend = _ref.trend,
+    color = _ref.color;
+  // neutral 状态不显示图标
+  if (trend === 'neutral') {
+    return null;
+  }
+
+  // 根据趋势选择图标
+  var Icon = trend === 'up' ? ArrowUpOutlined : ArrowDownOutlined;
+  return /*#__PURE__*/React.createElement(Icon, {
+    className: "pisell-metric-card-trend-icon",
+    style: {
+      color: color
+    }
+  });
+};
+export default TrendIcon;

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

@@ -0,0 +1,8 @@
+/**
+ * 子组件导出
+ */
+
+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/es/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/es/components/pisellMetricCard/index.js

@@ -0,0 +1,7 @@
+/**
+ * PisellMetricCard 组件导出
+ */
+
+export { default as PisellMetricCard } from "./PisellMetricCard";
+// 默认导出
+export { default } from "./PisellMetricCard";

package/es/components/pisellMetricCard/types.js

@@ -0,0 +1 @@
+export {};

package/es/components/pisellMetricCard/utils/calculateTrend.js

@@ -0,0 +1,29 @@
+/**
+ * 计算趋势方向
+ * 
+ * @param comparison 环比数值
+ * @returns 'up' | 'down' | 'neutral'
+ * 
+ * @example
+ * calculateTrend(120) // 'up'
+ * calculateTrend(-230) // 'down'
+ * calculateTrend(0) // 'neutral'
+ * calculateTrend(null) // 'neutral'
+ */
+export function calculateTrend(comparison) {
+  // 处理空值
+  if (comparison === null || comparison === undefined) {
+    return 'neutral';
+  }
+
+  // 转换为数字
+  var numComparison = typeof comparison === 'string' ? parseFloat(comparison) : comparison;
+
+  // 处理非数字或零值
+  if (isNaN(numComparison) || numComparison === 0) {
+    return 'neutral';
+  }
+
+  // 判断正负
+  return numComparison > 0 ? 'up' : 'down';
+}

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

@@ -0,0 +1,63 @@
+import { formatAmountWithOptions } from '@pisell/utils';
+/**
+ * 格式化指标数值
+ * 
+ * 支持以下格式化选项：
+ * - 小数精度控制
+ * - 千分位分隔符
+ * - 货币符号显示
+ * - 自定义格式化函数
+ * - 整数时隐藏小数部分
+ * 
+ * @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 function formatMetricValue(value) {
+  var _options$precision, _options$useGrouping, _options$showCurrency, _options$hideDecimalF;
+  var options = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
+  // 处理空值
+  if (value === null || value === undefined) {
+    return null;
+  }
+
+  // 转换为数字
+  var numValue = typeof value === 'string' ? parseFloat(value) : value;
+
+  // 处理非数字
+  if (isNaN(numValue)) {
+    return null;
+  }
+
+  // 优先使用自定义格式化函数
+  if (options.formatter) {
+    return options.formatter(numValue);
+  }
+
+  // 使用 @pisell/utils 的格式化工具
+  var formatted = formatAmountWithOptions(numValue, options.currencySymbol || '', {
+    precision: (_options$precision = options.precision) !== null && _options$precision !== void 0 ? _options$precision : 0,
+    useThousandsSeparator: (_options$useGrouping = options.useGrouping) !== null && _options$useGrouping !== void 0 ? _options$useGrouping : false,
+    showCurrencySymbol: (_options$showCurrency = options.showCurrencySymbol) !== null && _options$showCurrency !== void 0 ? _options$showCurrency : false,
+    hideDecimalForWholeNumbers: (_options$hideDecimalF = options.hideDecimalForWholeNumbers) !== null && _options$hideDecimalF !== void 0 ? _options$hideDecimalF : true
+  });
+  return String(formatted);
+}

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

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

package/es/components/pisellMetricCard/utils/index.js

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

package/es/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;