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

src/views/Community/components/EventList.js

@@ -1,6 +1,5 @@
 // src/views/Community/components/EventList.js
 import React, { useState, useEffect } from 'react';
-import { keyframes } from '@emotion/react';
 import {
     Box,
     VStack,
@@ -45,14 +44,14 @@ import {
     WarningIcon,
     WarningTwoIcon,
     CheckCircleIcon,
-    TriangleUpIcon,
-    TriangleDownIcon,
     ArrowForwardIcon,
     ExternalLinkIcon,
     ViewOffIcon,
 } from '@chakra-ui/icons';
 import { useNavigate } from 'react-router-dom';
 import moment from 'moment';
+
+// 导入工具函数和常量
 import { logger } from '../../../utils/logger';
 import { getApiBase } from '../../../utils/apiConfig';
 import { useEventNotifications } from '../../../hooks/useEventNotifications';
@@ -60,90 +59,16 @@ import { getImportanceConfig, getAllImportanceLevels } from '../../../constants/
 import { browserNotificationService } from '../../../services/browserNotificationService';
 import { useNotification } from '../../../contexts/NotificationContext';
 
-// ========== 动画定义 ==========
-// 脉冲动画 - 用于S/A级重要性标签
-const pulseAnimation = keyframes`
-  0% {
-    box-shadow: 0 0 0 0 rgba(255, 77, 79, 0.7);
-  }
-  70% {
-    box-shadow: 0 0 0 10px rgba(255, 77, 79, 0);
-  }
-  100% {
-    box-shadow: 0 0 0 0 rgba(255, 77, 79, 0);
-  }
-`;
+// 导入价格相关工具函数
+import {
+    getPriceChangeColor,
+    getPriceChangeBg,
+    getPriceChangeBorderColor,
+    PriceArrow,
+} from '../../../utils/priceFormatters';
 
-// ========== 工具函数定义在组件外部 ==========
-// 涨跌颜色配置（中国A股配色：红涨绿跌）- 分档次显示
-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';
-};
-
-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';
-};
-
-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';
-};
-
-// 重要性等级配置已移至 src/constants/importanceLevels.js
-
-// 自定义的涨跌箭头组件（修复颜色问题）
-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" />;
-};
+// 导入动画定义
+import { pulseAnimation } from '../../../constants/animations';
 
 // ========== 主组件 ==========
 const EventList = ({ events, pagination, onPageChange, onEventClick, onViewDetail }) => {