feat: 拆分 EventList.js/提取价格相关工具函数到 utils/priceFormatters.js

2025-10-30 11:13:09 +08:00
parent cb84b0238a
commit 57a7d3b9e7
4 changed files with 190 additions and 87 deletions
--- a/src/utils/priceFormatters.js
+++ b/src/utils/priceFormatters.js
@@ -0,0 +1,105 @@
+// src/utils/priceFormatters.js
+// 价格相关的工具函数 - 中国A股配色：红涨绿跌
+
+import React from 'react';
+import { TriangleUpIcon, TriangleDownIcon } from '@chakra-ui/icons';
+
+/**
+ * 获取价格变化的文字颜色
+ * @param {number|null|undefined} value - 涨跌幅百分比
+ * @returns {string} Chakra UI 颜色值
+ */
+export const getPriceChangeColor = (value) => {
+    if (value === null || value === undefined) return 'gray.500';
+
+    const absValue = Math.abs(value);
+
+    if (value > 0) {
+        // 上涨用红色，根据涨幅大小使用不同深浅
+        if (absValue >= 3) return 'red.600';      // 深红色：3%以上
+        if (absValue >= 1) return 'red.500';      // 中红色：1-3%
+        return 'red.400';                         // 浅红色：0-1%
+    } else if (value < 0) {
+        // 下跌用绿色，根据跌幅大小使用不同深浅
+        if (absValue >= 3) return 'green.600';    // 深绿色：3%以上
+        if (absValue >= 1) return 'green.500';    // 中绿色：1-3%
+        return 'green.400';                       // 浅绿色：0-1%
+    }
+    return 'gray.500';
+};
+
+/**
+ * 获取价格变化的背景颜色
+ * @param {number|null|undefined} value - 涨跌幅百分比
+ * @returns {string} Chakra UI 颜色值
+ */
+export const getPriceChangeBg = (value) => {
+    if (value === null || value === undefined) return 'gray.50';
+
+    const absValue = Math.abs(value);
+
+    if (value > 0) {
+        // 上涨背景色
+        if (absValue >= 3) return 'red.100';      // 深色背景：3%以上
+        if (absValue >= 1) return 'red.50';       // 中色背景：1-3%
+        return 'red.50';                          // 浅色背景：0-1%
+    } else if (value < 0) {
+        // 下跌背景色
+        if (absValue >= 3) return 'green.100';    // 深色背景：3%以上
+        if (absValue >= 1) return 'green.50';     // 中色背景：1-3%
+        return 'green.50';                        // 浅色背景：0-1%
+    }
+    return 'gray.50';
+};
+
+/**
+ * 获取价格变化的边框颜色
+ * @param {number|null|undefined} value - 涨跌幅百分比
+ * @returns {string} Chakra UI 颜色值
+ */
+export const getPriceChangeBorderColor = (value) => {
+    if (value === null || value === undefined) return 'gray.300';
+
+    const absValue = Math.abs(value);
+
+    if (value > 0) {
+        // 上涨边框色
+        if (absValue >= 3) return 'red.500';      // 深边框：3%以上
+        if (absValue >= 1) return 'red.400';      // 中边框：1-3%
+        return 'red.300';                         // 浅边框：0-1%
+    } else if (value < 0) {
+        // 下跌边框色
+        if (absValue >= 3) return 'green.500';    // 深边框：3%以上
+        if (absValue >= 1) return 'green.400';    // 中边框：1-3%
+        return 'green.300';                       // 浅边框：0-1%
+    }
+    return 'gray.300';
+};
+
+/**
+ * 格式化价格变化为字符串
+ * @param {number|null|undefined} value - 涨跌幅百分比
+ * @param {number} decimals - 小数位数，默认2位
+ * @returns {string} 格式化后的字符串，例如 "+5.23%" 或 "-2.10%"
+ */
+export const formatPriceChange = (value, decimals = 2) => {
+    if (value === null || value === undefined) return '--%';
+
+    const sign = value > 0 ? '+' : '';
+    return `${sign}${value.toFixed(decimals)}%`;
+};
+
+/**
+ * 价格涨跌箭头组件
+ * @param {Object} props
+ * @param {number|null|undefined} props.value - 涨跌幅百分比
+ * @returns {JSX.Element|null}
+ */
+export const PriceArrow = ({ value }) => {
+    if (value === null || value === undefined) return null;
+
+    const Icon = value > 0 ? TriangleUpIcon : TriangleDownIcon;
+    const color = value > 0 ? 'red.500' : 'green.500';
+
+    return <Icon color={color} boxSize="16px" />;
+};