@pisell/materials 6.3.25 → 6.3.27

package/es/components/pisellLookup/utils/storage.js

@@ -0,0 +1,118 @@
+function _toConsumableArray(arr) { return _arrayWithoutHoles(arr) || _iterableToArray(arr) || _unsupportedIterableToArray(arr) || _nonIterableSpread(); }
+function _nonIterableSpread() { throw new TypeError("Invalid attempt to spread non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
+function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
+function _iterableToArray(iter) { if (typeof Symbol !== "undefined" && iter[Symbol.iterator] != null || iter["@@iterator"] != null) return Array.from(iter); }
+function _arrayWithoutHoles(arr) { if (Array.isArray(arr)) return _arrayLikeToArray(arr); }
+function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) arr2[i] = arr[i]; return arr2; }
+/**
+ * localStorage 工具函数
+ * 用于管理搜索历史的存储
+ */
+
+/**
+ * 从 localStorage 加载历史记录
+ * @param key 存储的 key
+ * @returns 历史记录数组
+ */
+export var loadHistory = function loadHistory(key) {
+  try {
+    var data = localStorage.getItem(key);
+    if (!data) return [];
+    return JSON.parse(data);
+  } catch (error) {
+    console.error('Failed to load history from localStorage:', error);
+    return [];
+  }
+};
+
+/**
+ * 保存历史记录到 localStorage
+ * @param key 存储的 key
+ * @param history 历史记录数组
+ * @param maxCount 最大数量限制
+ */
+export var saveHistory = function saveHistory(key, history, maxCount) {
+  try {
+    // 限制数量
+    var limitedHistory = history.slice(0, maxCount);
+    localStorage.setItem(key, JSON.stringify(limitedHistory));
+  } catch (error) {
+    console.error('Failed to save history to localStorage:', error);
+  }
+};
+
+/**
+ * 清除历史记录
+ * @param key 存储的 key
+ */
+export var clearHistory = function clearHistory(key) {
+  try {
+    localStorage.removeItem(key);
+  } catch (error) {
+    console.error('Failed to clear history from localStorage:', error);
+  }
+};
+
+/**
+ * 添加历史记录项
+ * @param key 存储的 key
+ * @param item 新的历史记录项
+ * @param maxCount 最大数量限制
+ * @returns 更新后的历史记录数组
+ */
+export var addHistoryItem = function addHistoryItem(key, item, maxCount) {
+  try {
+    // 加载现有历史
+    var history = loadHistory(key);
+
+    // 去重：如果已存在，先移除
+    var filteredHistory = history.filter(function (h) {
+      return h !== item;
+    });
+
+    // 添加到开头
+    var newHistory = [item].concat(_toConsumableArray(filteredHistory));
+
+    // 保存
+    saveHistory(key, newHistory, maxCount);
+    return newHistory.slice(0, maxCount);
+  } catch (error) {
+    console.error('Failed to add history item:', error);
+    return [];
+  }
+};
+
+/**
+ * 删除历史记录项
+ * @param key 存储的 key
+ * @param item 要删除的历史记录项
+ * @returns 更新后的历史记录数组
+ */
+export var removeHistoryItem = function removeHistoryItem(key, item) {
+  try {
+    var history = loadHistory(key);
+    var newHistory = history.filter(function (h) {
+      return h !== item;
+    });
+    localStorage.setItem(key, JSON.stringify(newHistory));
+    return newHistory;
+  } catch (error) {
+    console.error('Failed to remove history item:', error);
+    return [];
+  }
+};
+
+/**
+ * 检查 localStorage 是否可用
+ * @returns 是否可用
+ */
+export var isLocalStorageAvailable = function isLocalStorageAvailable() {
+  try {
+    var testKey = '__pisell_lookup_test__';
+    localStorage.setItem(testKey, 'test');
+    localStorage.removeItem(testKey);
+    return true;
+  } catch (_unused) {
+    return false;
+  }
+};

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/pisellLookup/utils/trigger.js

@@ -0,0 +1,76 @@
+/**
+ * 触发器相关工具函数
+ */
+
+/**
+ * 根据触发器类型获取默认的展示类型
+ * @param triggerType 触发器类型
+ * @param hasTrigger 是否有自定义触发器
+ * @returns 默认的展示类型
+ */
+export var getDefaultDisplayType = function getDefaultDisplayType(triggerType, hasTrigger) {
+  // 如果有自定义触发器，默认使用 modal
+  if (hasTrigger) {
+    return 'modal';
+  }
+
+  // 根据触发器类型判断
+  if (triggerType === 'input') {
+    return 'inline';
+  }
+
+  // button、icon、text 默认使用 modal
+  if (triggerType === 'button' || triggerType === 'icon' || triggerType === 'text') {
+    return 'modal';
+  }
+
+  // 默认使用 detached
+  return 'detached';
+};
+
+/**
+ * 判断是否为输入框触发器
+ * @param triggerType 触发器类型
+ * @returns 是否为输入框触发器
+ */
+export var isInputTrigger = function isInputTrigger(triggerType) {
+  return triggerType === 'input';
+};
+
+/**
+ * 判断是否为按钮类触发器（button、icon、text、自定义）
+ * @param triggerType 触发器类型
+ * @param hasTrigger 是否有自定义触发器
+ * @returns 是否为按钮类触发器
+ */
+export var isButtonLikeTrigger = function isButtonLikeTrigger(triggerType, hasTrigger) {
+  if (hasTrigger) return true;
+  return triggerType === 'button' || triggerType === 'icon' || triggerType === 'text';
+};
+
+/**
+ * 判断展示类型是否需要容器（modal、drawer）
+ * @param displayType 展示类型
+ * @returns 是否需要容器
+ */
+export var needsContainer = function needsContainer(displayType) {
+  return displayType === 'modal' || displayType === 'drawer';
+};
+
+/**
+ * 判断展示类型是否需要浮层（popup）
+ * @param displayType 展示类型
+ * @returns 是否需要浮层
+ */
+export var needsPopup = function needsPopup(displayType) {
+  return displayType === 'popup';
+};
+
+/**
+ * 判断展示类型是否为内联（inline）
+ * @param displayType 展示类型
+ * @returns 是否为内联
+ */
+export var isInline = function isInline(displayType) {
+  return displayType === 'inline';
+};

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;