事件中心UI优化

src/views/Community/components/DynamicNewsDetail/CompactStockItem.js

@@ -8,6 +8,7 @@ import {
   Tooltip,
   useColorModeValue,
 } from '@chakra-ui/react';
+import { getChangeColor, getChangeBackgroundGradient, getChangeBorderColor } from '../../../../utils/colorUtils';
 
 /**
  * 精简模式股票卡片组件
@@ -30,31 +31,6 @@ const CompactStockItem = ({ stock, quote = null }) => {
     return `${prefix}${parseFloat(value).toFixed(2)}%`;
   };
 
-  // 获取涨跌幅颜色（涨红跌绿）
-  const getChangeColor = (value) => {
-    const num = parseFloat(value);
-    if (isNaN(num) || num === 0) return 'gray.500';
-    return num > 0 ? 'red.500' : 'green.500';
-  };
-
-  // 获取背景渐变色（涨红跌绿）
-  const getBackgroundGradient = (value) => {
-    const num = parseFloat(value);
-    if (isNaN(num) || num === 0) {
-      return 'linear(to-br, gray.50, gray.100)';
-    }
-    return num > 0
-      ? 'linear(to-br, red.50, red.100)'
-      : 'linear(to-br, green.50, green.100)';
-  };
-
-  // 获取边框颜色
-  const getBorderColor = (value) => {
-    const num = parseFloat(value);
-    if (isNaN(num) || num === 0) return 'gray.300';
-    return num > 0 ? 'red.300' : 'green.300';
-  };
-
   // 获取涨跌幅数据（优先使用 quote，fallback 到 stock）
   const change = quote?.change ?? stock.daily_change ?? null;
 
@@ -68,9 +44,9 @@ const CompactStockItem = ({ stock, quote = null }) => {
       fontSize="xs"
     >
       <Box
-        bgGradient={getBackgroundGradient(change)}
+        bgGradient={getChangeBackgroundGradient(change)}
         borderWidth="3px"
-        borderColor={getBorderColor(change)}
+        borderColor={getChangeBorderColor(change)}
         borderRadius="2xl"
         p={4}
         onClick={handleViewDetail}
@@ -85,7 +61,7 @@ const CompactStockItem = ({ stock, quote = null }) => {
           left: 0,
           right: 0,
           height: '4px',
-          bg: getBorderColor(change),
+          bg: getChangeBorderColor(change),
         }}
         _hover={{
           boxShadow: '2xl',