@pisell/materials 1.0.1034 → 1.0.1035

package/es/components/pisellFilter/index.js

@@ -2,7 +2,7 @@ import { _objectSpread2 } from "../../_virtual/_@oxc-project_runtime@0.108.0/hel
 import { _objectWithoutProperties } from "../../_virtual/_@oxc-project_runtime@0.108.0/helpers/objectWithoutProperties.js";
 import FilterButton_default from "../filter/components/FilterButton/index.js";
 import { Form } from "antd";
-import React, { useEffect, useMemo, useState } from "react";
+import React, { useCallback, useEffect, useMemo, useRef, useState } from "react";
 
 //#region src/components/pisellFilter/index.tsx
 const _excluded = [
@@ -11,26 +11,77 @@ const _excluded = [
 	"formFiltersPrefix",
 	"hiddenQuickFilter",
 	"hiddenOtherFilter",
-	"hasForm"
+	"hasForm",
+	"onChange"
 ];
 const PisellFilter = (props) => {
-	const { value: originalValue, quickFilterMaxLength, formFiltersPrefix, hiddenQuickFilter = true, hiddenOtherFilter = false, hasForm = true } = props, otherProps = _objectWithoutProperties(props, _excluded);
-	const [value, setValue] = useState({});
+	const { value: originalValue, quickFilterMaxLength, formFiltersPrefix, hiddenQuickFilter = true, hiddenOtherFilter = false, hasForm = true, onChange } = props, otherProps = _objectWithoutProperties(props, _excluded);
+	const [form] = Form.useForm();
+	const [value, setValue] = useState(() => ({
+		quickFilter: (originalValue === null || originalValue === void 0 ? void 0 : originalValue.quickFilter) || [],
+		otherFilter: (originalValue === null || originalValue === void 0 ? void 0 : originalValue.otherFilter) || [],
+		values: (originalValue === null || originalValue === void 0 ? void 0 : originalValue.values) || {}
+	}));
+	const isInternalChange = useRef(false);
 	useEffect(() => {
-		setValue({
-			quickFilter: (originalValue === null || originalValue === void 0 ? void 0 : originalValue.quickFilter) || [],
-			otherFilter: (originalValue === null || originalValue === void 0 ? void 0 : originalValue.otherFilter) || []
+		setValue((prev) => {
+			var _originalValue$quickF, _originalValue$otherF, _ref, _originalValue$values;
+			return {
+				quickFilter: (_originalValue$quickF = originalValue === null || originalValue === void 0 ? void 0 : originalValue.quickFilter) !== null && _originalValue$quickF !== void 0 ? _originalValue$quickF : prev.quickFilter,
+				otherFilter: (_originalValue$otherF = originalValue === null || originalValue === void 0 ? void 0 : originalValue.otherFilter) !== null && _originalValue$otherF !== void 0 ? _originalValue$otherF : prev.otherFilter,
+				values: (_ref = (_originalValue$values = originalValue === null || originalValue === void 0 ? void 0 : originalValue.values) !== null && _originalValue$values !== void 0 ? _originalValue$values : prev.values) !== null && _ref !== void 0 ? _ref : {}
+			};
 		});
-	}, [originalValue]);
+	}, [
+		originalValue === null || originalValue === void 0 ? void 0 : originalValue.quickFilter,
+		originalValue === null || originalValue === void 0 ? void 0 : originalValue.otherFilter,
+		originalValue === null || originalValue === void 0 ? void 0 : originalValue.values
+	]);
+	useEffect(() => {
+		if (!hasForm || !(originalValue === null || originalValue === void 0 ? void 0 : originalValue.values) || typeof originalValue.values !== "object") return;
+		if (isInternalChange.current) {
+			isInternalChange.current = false;
+			return;
+		}
+		form.setFieldsValue(originalValue.values);
+	}, [
+		hasForm,
+		form,
+		originalValue === null || originalValue === void 0 ? void 0 : originalValue.values
+	]);
+	const handleChange = useCallback((newVal) => {
+		setValue((prev) => {
+			var _newVal$values;
+			return _objectSpread2(_objectSpread2(_objectSpread2({}, prev), newVal), {}, { values: (_newVal$values = newVal.values) !== null && _newVal$values !== void 0 ? _newVal$values : prev.values });
+		});
+		onChange === null || onChange === void 0 || onChange(newVal);
+	}, [onChange]);
+	const handleFormValuesChange = useCallback((_, allValues) => {
+		if (typeof allValues !== "object" || allValues === null) return;
+		isInternalChange.current = true;
+		const mergedValues = _objectSpread2(_objectSpread2({}, value.values), allValues);
+		const next = {
+			quickFilter: value.quickFilter,
+			otherFilter: value.otherFilter,
+			values: mergedValues
+		};
+		setValue(next);
+		onChange === null || onChange === void 0 || onChange(next);
+	}, [
+		value.quickFilter,
+		value.otherFilter,
+		value.values,
+		onChange
+	]);
 	const content = useMemo(() => {
 		return /* @__PURE__ */ React.createElement(FilterButton_default, _objectSpread2(_objectSpread2({}, otherProps), {}, {
+			onChange: handleChange,
 			value: {
 				quickFilter: value.quickFilter,
 				otherFilter: value.otherFilter
 			},
 			hiddenQuickFilter,
 			hiddenOtherFilter,
-			onChange: setValue,
 			quickFilterMaxLength: quickFilterMaxLength || 100,
 			formFiltersPrefix: formFiltersPrefix || ""
 		}));
@@ -39,11 +90,15 @@ const PisellFilter = (props) => {
 		hiddenQuickFilter,
 		hiddenOtherFilter,
 		quickFilterMaxLength,
-		formFiltersPrefix
+		formFiltersPrefix,
+		handleChange
 	]);
 	if (hasForm) return /* @__PURE__ */ React.createElement(Form, _objectSpread2({
+		form,
 		size: "large",
-		layout: "vertical"
+		layout: "vertical",
+		initialValues: value.values,
+		onValuesChange: handleFormValuesChange
 	}, otherProps), content);
 	return content;
 };

package/es/components/pisellLongText/PisellLongText.less

@@ -1,5 +1,6 @@
 /**
  * PisellLongText 组件样式
+ * 基于 Figma 设计规范，与 SingleLineText 设计体系一致
  */
 
 .pisell-long-text {
@@ -7,16 +8,78 @@
     position: relative;
     width: 100%;
 
-    // 基于 Figma 设计规范的 TextArea 样式
+    // TextArea 样式（Figma 设计规范，覆盖时使用 pisell-lowcode-xxx）
     .pisell-lowcode-input {
-      padding: 12px 14px; // Figma: 垂直12px，水平14px（比 Input 小2px）
+      // 基础样式
+      font-size: 16px !important;
+      line-height: 24px !important;
+
+      // 边框和圆角
+      border-radius: 8px !important;
+      border: 1px solid #d0d5dd !important; // Gray/300
+
+      // 内边距（Figma: 垂直 12px，水平 14px）
+      padding: 12px 14px !important;
+      min-height: 80px !important; // 多行最小高度，由 rows 进一步控制
+
+      // 颜色
+      color: #101828 !important; // Gray/900
+      background-color: #ffffff !important;
+
+      &::placeholder {
+        color: #667085 !important; // Gray/500
+      }
+
+      // 聚焦态
+      &:focus,
+      &:focus-within {
+        border-color: #d6bbfb !important; // Primary/300
+        box-shadow: 0 0 0 4px #f4ebff !important; // Primary/100
+        outline: none !important;
+      }
+
+      // Hover 态
+      &:hover:not(:focus):not(:focus-within):not([disabled]) {
+        border-color: #b692f6 !important; // Primary/400
+      }
+
+      // 禁用态
+      &[disabled],
+      &.pisell-lowcode-input-disabled {
+        background-color: #f9fafb !important; // Gray/50
+        color: #98a2b3 !important; // Gray/400
+        border-color: #d0d5dd !important;
+        cursor: not-allowed !important;
+      }
+    }
+
+    // 字数统计样式（TextArea showCount）
+    .pisell-lowcode-input-data-count,
+    .pisell-lowcode-input-show-count-suffix {
+      color: #667085 !important; // Gray/500
+      font-size: 14px !important;
+    }
+
+    // 错误状态
+    .pisell-lowcode-input-status-error {
+      border-color: #fda29b !important; // Error/300
+
+      &:focus,
+      &:focus-within {
+        border-color: #f97066 !important; // Error/400
+        box-shadow: 0 0 0 4px #fee4e2 !important; // Error/100
+      }
+
+      &:hover:not(:focus):not(:focus-within) {
+        border-color: #f97066 !important; // Error/400
+      }
     }
   }
 
   &-error {
     margin-top: 4px;
     font-size: 12px;
-    color: #ff4d4f;
+    color: #d92d20; // Error/600
     line-height: 1.5;
     animation: fadeIn 0.3s ease-in-out;
   }
@@ -32,12 +95,17 @@
     height: auto;
     font-size: 14px;
     margin-top: 8px;
+    color: #6d48c4;
+
+    &:hover {
+      color: #6d48c4 !important;
+    }
   }
 
   &-word-count {
     margin-top: 8px;
     font-size: 12px;
-    color: #667085;
+    color: #667085; // Gray/500
     text-align: right;
   }
 

package/es/components/pisellLookup/PisellLookup.js

@@ -241,10 +241,10 @@ const PisellLookupComponent = forwardRef((props, ref) => {
 		}, 200);
 	}, [displayType, close]);
 	/**
-	* 处理确认触发（点击 Lookup 按钮或按 Enter 键）
+	* 处理确认触发（点击 Lookup 按钮或按 Enter 键）。支持传入当前输入值，回车时由 Trigger 传入以避免受控下 keyword 未更新导致历史未保存。
 	*/
-	const handleConfirm = useCallback(() => {
-		handleConfirmSearch(keyword);
+	const handleConfirm = useCallback((valueFromTrigger) => {
+		handleConfirmSearch(valueFromTrigger !== null && valueFromTrigger !== void 0 ? valueFromTrigger : keyword);
 	}, [keyword, handleConfirmSearch]);
 	/**
 	* 处理清除

package/es/components/pisellLookup/PisellLookup.less

@@ -132,8 +132,9 @@
 
   // ============ Input 样式覆盖 ============
 
-  // 覆盖 Ant Design Input 默认样式（适用于所有尺寸）
+  // 覆盖 Ant Design Input 默认样式（适用于所有尺寸）；默认高度 50px
   &-trigger-input.pisell-lowcode-input-affix-wrapper {
+    min-height: 50px;
     border: 1px solid #d0d5dd;
     border-radius: 8px;
     box-shadow: 0px 1px 2px 0px rgba(16, 24, 40, 0.05);
@@ -192,8 +193,9 @@
     }
   }
 
-  // 大号输入框
+  // 大号输入框，高度 58px
   &-trigger-input.pisell-lowcode-input-affix-wrapper-lg {
+    min-height: 58px;
     padding: 6px 6px 6px 16px;
 
     .pisell-lookup-input-clear {
@@ -210,6 +212,11 @@
 
     .pisell-lookup-input-confirm {
       padding: 10px;
+      line-height: 24px;
+
+      span {
+        line-height: 24px;
+      }
     }
   }
 
@@ -270,8 +277,8 @@
     }
 
     &-confirm {
+      border: none;
       background-color: #7f56d9;
-      border-color: #7f56d9;
       border-radius: 8px;
       box-shadow: 0px 1px 2px 0px rgba(16, 24, 40, 0.05);
       padding: 10px;
@@ -279,39 +286,37 @@
       min-width: auto;
       font-size: 16px;
       font-weight: 600;
-      line-height: 22px;
+      line-height: 20px;
       color: #ffffff;
 
       &:hover {
         background-color: #6941c6 !important;
-        border-color: #6941c6 !important;
         color: #ffffff !important;
       }
 
       &:active {
         background-color: #53389e !important;
-        border-color: #53389e !important;
         color: #ffffff !important;
       }
 
       span {
         font-size: 16px;
         font-weight: 600;
-        line-height: 22px;
+        line-height: 20px;
       }
 
       &.pisell-lowcode-btn-sm {
         padding: 10px;
         height: auto;
         font-size: 16px;
-        line-height: 22px;
+        line-height: 20px;
       }
 
       &.pisell-lowcode-btn-middle {
         padding: 10px;
         height: auto;
         font-size: 16px;
-        line-height: 22px;
+        line-height: 20px;
       }
     }
   }

package/es/components/pisellLookup/components/LookupTrigger.js

@@ -119,10 +119,14 @@ const LookupTriggerComponent = forwardRef((props, ref) => {
 		onConfirm === null || onConfirm === void 0 || onConfirm();
 	};
 	/**
-	* 处理按 Enter 键
+	* 处理按 Enter 键：传入当前输入值，避免受控模式下 state 未更新导致历史未保存
 	*/
 	const handleKeyPress = (e) => {
-		if (e.key === "Enter") onConfirm === null || onConfirm === void 0 || onConfirm();
+		if (e.key === "Enter") {
+			var _ref, _e$currentTarget$valu, _e$currentTarget;
+			const currentValue = (_ref = (_e$currentTarget$valu = (_e$currentTarget = e.currentTarget) === null || _e$currentTarget === void 0 ? void 0 : _e$currentTarget.value) !== null && _e$currentTarget$valu !== void 0 ? _e$currentTarget$valu : value) !== null && _ref !== void 0 ? _ref : "";
+			onConfirm === null || onConfirm === void 0 || onConfirm(currentValue);
+		}
 	};
 	/**
 	* 渲染输入框触发器

package/es/components/pisellMetricCard/PisellMetricCard.d.ts

@@ -0,0 +1,38 @@
+import { PisellMetricCardProps } from "./types.js";
+import React from "react";
+import "./PisellMetricCard.less";
+
+//#region src/components/pisellMetricCard/PisellMetricCard.d.ts
+/**
+ * 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>;
+//#endregion
+export { PisellMetricCard };

package/es/components/pisellMetricCard/PisellMetricCard.js

@@ -0,0 +1,136 @@
+import { _objectSpread2 } from "../../_virtual/_@oxc-project_runtime@0.108.0/helpers/objectSpread2.js";
+import pisellCard_default from "../pisellCard/index.js";
+import MetricValue_default from "./components/MetricValue.js";
+import MetricTitle_default from "./components/MetricTitle.js";
+import { formatMetricValue } from "./utils/formatMetricValue.js";
+import MetricComparison_default from "./components/MetricComparison.js";
+import React, { useMemo } from "react";
+import "./PisellMetricCard.less";
+
+//#region src/components/pisellMetricCard/PisellMetricCard.tsx
+/**
+* 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 
+*   }}
+* />
+* ```
+*/
+const PisellMetricCard = (props) => {
+	const { title, subtitle, value, tag, tooltip, format, comparison, styleConfig, showSubtitle = false, showTag = false, showTooltip = false, loading = false, hoverable = true, className, style, onClick } = props;
+	const formatConfig = useMemo(() => {
+		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]);
+	const cardStyle = useMemo(() => {
+		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]);
+	const titleStyle = useMemo(() => {
+		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]);
+	const valueStyle = useMemo(() => {
+		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]);
+	const formattedValue = useMemo(() => {
+		return formatMetricValue(value, formatConfig);
+	}, [value, formatConfig]);
+	const comparisonConfig = useMemo(() => {
+		var _comparison$text, _comparison$showTrend, _comparison$positiveC, _comparison$negativeC, _comparison$size;
+		if (!(comparison === null || comparison === void 0 ? 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_default, {
+		bordered: cardStyle.bordered,
+		borderRadius: cardStyle.borderRadius,
+		padding: cardStyle.padding,
+		loading,
+		isClickable: !!onClick,
+		onClick,
+		style: _objectSpread2({
+			width: typeof cardStyle.width === "number" ? `${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 ${className || ""}`
+	}, /* @__PURE__ */ React.createElement(MetricTitle_default, {
+		title,
+		subtitle: showSubtitle ? subtitle : void 0,
+		tooltip: showTooltip ? tooltip : void 0,
+		titleSize: titleStyle.size,
+		titleWeight: titleStyle.weight,
+		titleColor: titleStyle.color
+	}), /* @__PURE__ */ React.createElement(MetricValue_default, {
+		value: formattedValue,
+		valueSize: valueStyle.size,
+		valueWeight: valueStyle.weight,
+		valueColor: valueStyle.color
+	}), comparisonConfig && /* @__PURE__ */ React.createElement(MetricComparison_default, {
+		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));
+};
+var PisellMetricCard_default = PisellMetricCard;
+
+//#endregion
+export { PisellMetricCard_default as default };

package/es/components/pisellMetricCard/components/MetricComparison.js

@@ -0,0 +1,54 @@
+import TrendIcon_default from "./TrendIcon.js";
+import { formatMetricValue } from "../utils/formatMetricValue.js";
+import { calculateTrend } from "../utils/calculateTrend.js";
+import React, { useMemo } from "react";
+
+//#region src/components/pisellMetricCard/components/MetricComparison.tsx
+/**
+* MetricComparison 环比信息组件
+* 
+* 负责渲染环比数值和趋势箭头
+* - 自动根据正负值显示不同颜色
+* - 支持格式化环比数值
+* - 集成趋势箭头组件
+* 
+* @param props 组件属性
+*/
+const MetricComparison = ({ comparison, comparisonText = "v.s. pre", showTrendIcon = true, positiveColor = "#52c41a", negativeColor = "#ff4d4f", comparisonSize = 14, precision, showCurrencySymbol, currencySymbol }) => {
+	const trend = useMemo(() => {
+		return calculateTrend(comparison);
+	}, [comparison]);
+	const formattedComparison = useMemo(() => {
+		if (comparison === null || comparison === void 0) return null;
+		const numComparison = typeof comparison === "string" ? parseFloat(comparison) : comparison;
+		if (isNaN(numComparison)) return null;
+		return formatMetricValue(Math.abs(numComparison), {
+			precision,
+			showCurrencySymbol,
+			currencySymbol,
+			useGrouping: false
+		});
+	}, [
+		comparison,
+		precision,
+		showCurrencySymbol,
+		currencySymbol
+	]);
+	if (formattedComparison === null || trend === "neutral") return null;
+	const color = trend === "up" ? positiveColor : negativeColor;
+	const sign = trend === "up" ? "+" : "-";
+	return /* @__PURE__ */ React.createElement("div", {
+		className: "pisell-metric-card-comparison",
+		style: {
+			fontSize: typeof comparisonSize === "number" ? `${comparisonSize}px` : comparisonSize,
+			color
+		}
+	}, /* @__PURE__ */ React.createElement("span", null, comparisonText), /* @__PURE__ */ React.createElement("span", null, sign, formattedComparison), showTrendIcon && /* @__PURE__ */ React.createElement(TrendIcon_default, {
+		trend,
+		color
+	}));
+};
+var MetricComparison_default = MetricComparison;
+
+//#endregion
+export { MetricComparison_default as default };

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

@@ -0,0 +1,41 @@
+import { Tooltip } from "antd";
+import React from "react";
+import { QuestionCircleOutlined } from "@ant-design/icons";
+
+//#region src/components/pisellMetricCard/components/MetricTitle.tsx
+/**
+* MetricTitle 标题组件
+* 
+* 负责渲染标题、副标题和提示信息
+* 支持自定义字号、字重、颜色等样式
+* 
+* @param props 组件属性
+*/
+const MetricTitle = ({ title, subtitle, tooltip, titleSize = 14, titleWeight = 400, titleColor = "rgba(0, 0, 0, 0.45)" }) => {
+	return /* @__PURE__ */ React.createElement("div", { className: "pisell-metric-card-title-wrapper" }, /* @__PURE__ */ React.createElement("div", {
+		className: "pisell-metric-card-title",
+		style: {
+			fontSize: typeof titleSize === "number" ? `${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));
+};
+var MetricTitle_default = MetricTitle;
+
+//#endregion
+export { MetricTitle_default as default };

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

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

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

@@ -0,0 +1,26 @@
+import React from "react";
+import { ArrowDownOutlined, ArrowUpOutlined } from "@ant-design/icons";
+
+//#region src/components/pisellMetricCard/components/TrendIcon.tsx
+/**
+* TrendIcon 趋势箭头组件
+* 
+* 根据趋势类型显示上升或下降箭头
+* - up: 显示上升箭头 ↑
+* - down: 显示下降箭头 ↓
+* - neutral: 不显示箭头
+* 
+* @param props 组件属性
+*/
+const TrendIcon = ({ trend, color }) => {
+	if (trend === "neutral") return null;
+	const Icon = trend === "up" ? ArrowUpOutlined : ArrowDownOutlined;
+	return /* @__PURE__ */ React.createElement(Icon, {
+		className: "pisell-metric-card-trend-icon",
+		style: { color }
+	});
+};
+var TrendIcon_default = TrendIcon;
+
+//#endregion
+export { TrendIcon_default as default };