style: 优化事件详情和涨跌幅指标的视觉效果

EventHeaderInfo 组件优化：
- "重要性：高"背景色改为浅杏黄色（yellow.100 → orange.50）
- 文字颜色改为深杏色（yellow.700 → orange.800）
- 视觉效果更柔和优雅，不刺眼

StockChangeIndicators 组件优化：
- 改用多颜色梯度（5级分级）
- 上涨：红色系（red.900/700/500）→ 橙色系（orange.600/400）
- 下跌：绿色系（green.900/700/500）→ 青色系（teal.600/400）
- 背景色和边框色跟随数字颜色
- 移除调试 console.log

视觉改进：
- 颜色分级更细腻，从3级增加到5级
- 引入橙色和青色让小幅和大幅波动有明显色系区别
- 5.7% 显示为深红色，1.7% 显示为橙色，视觉区分明显

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude <noreply@anthropic.com>

src/components/StockChangeIndicators.js

@@ -16,25 +16,82 @@ const StockChangeIndicators = ({
     maxChange,
     weekChange,
 }) => {
-    // 根据涨跌幅获取数字颜色
+    // 根据涨跌幅获取数字颜色（多颜色梯度：5级分级）
     const getNumberColor = (value) => {
         if (value == null) {
-            return useColorModeValue('gray.600', 'gray.400');
+            return useColorModeValue('gray.700', 'gray.400');
         }
 
         const absValue = Math.abs(value);
         const isPositive = value > 0;
 
-        // 5%以上：深色
+        if (isPositive) {
-        if (absValue >= 5) {
+            // 上涨：红色系 → 橙色系
-            return isPositive ? 'red.600' : 'green.600';
+            if (absValue >= 10) return 'red.900';      // 10%以上：最深红
+            if (absValue >= 5) return 'red.700';       // 5-10%：深红
+            if (absValue >= 3) return 'red.500';       // 3-5%：中红
+            if (absValue >= 1) return 'orange.600';    // 1-3%：橙色
+            return 'orange.400';                       // 0-1%：浅橙
+        } else {
+            // 下跌：绿色系 → 青色系
+            if (absValue >= 10) return 'green.900';    // -10%以下：最深绿
+            if (absValue >= 5) return 'green.700';     // -10% ~ -5%：深绿
+            if (absValue >= 3) return 'green.500';     // -5% ~ -3%：中绿
+            if (absValue >= 1) return 'teal.600';      // -3% ~ -1%：青色
+            return 'teal.400';                         // -1% ~ 0%：浅青
         }
-        // 1-5%：正常色
+    };
-        if (absValue >= 1) {
+
-            return isPositive ? 'red.500' : 'green.500';
+    // 根据涨跌幅获取背景色（跟随数字颜色）
+    const getBgColor = (value) => {
+        if (value == null) {
+            return useColorModeValue('gray.100', 'gray.700');
+        }
+
+        const absValue = Math.abs(value);
+        const isPositive = value > 0;
+
+        if (isPositive) {
+            // 上涨背景：红色系 → 橙色系
+            if (absValue >= 10) return useColorModeValue('red.50', 'red.900');
+            if (absValue >= 5) return useColorModeValue('red.50', 'red.900');
+            if (absValue >= 3) return useColorModeValue('red.50', 'red.900');
+            if (absValue >= 1) return useColorModeValue('orange.50', 'orange.900');
+            return useColorModeValue('orange.50', 'orange.900');
+        } else {
+            // 下跌背景：绿色系 → 青色系
+            if (absValue >= 10) return useColorModeValue('green.50', 'green.900');
+            if (absValue >= 5) return useColorModeValue('green.50', 'green.900');
+            if (absValue >= 3) return useColorModeValue('green.50', 'green.900');
+            if (absValue >= 1) return useColorModeValue('teal.50', 'teal.900');
+            return useColorModeValue('teal.50', 'teal.900');
+        }
+    };
+
+    // 根据涨跌幅获取边框色（跟随数字颜色）
+    const getBorderColor = (value) => {
+        if (value == null) {
+            return useColorModeValue('gray.300', 'gray.600');
+        }
+
+        const absValue = Math.abs(value);
+        const isPositive = value > 0;
+
+        if (isPositive) {
+            // 上涨边框：红色系 → 橙色系
+            if (absValue >= 10) return useColorModeValue('red.200', 'red.700');
+            if (absValue >= 5) return useColorModeValue('red.200', 'red.700');
+            if (absValue >= 3) return useColorModeValue('red.200', 'red.700');
+            if (absValue >= 1) return useColorModeValue('orange.200', 'orange.700');
+            return useColorModeValue('orange.200', 'orange.700');
+        } else {
+            // 下跌边框：绿色系 → 青色系
+            if (absValue >= 10) return useColorModeValue('green.200', 'green.700');
+            if (absValue >= 5) return useColorModeValue('green.200', 'green.700');
+            if (absValue >= 3) return useColorModeValue('green.200', 'green.700');
+            if (absValue >= 1) return useColorModeValue('teal.200', 'teal.700');
+            return useColorModeValue('teal.200', 'teal.700');
         }
-        // 0-1%：淡色
-        return isPositive ? 'red.400' : 'green.400';
     };
 
     // 渲染单个指标
@@ -44,12 +101,15 @@ const StockChangeIndicators = ({
         const sign = value > 0 ? '+' : '';
         const numStr = Math.abs(value).toFixed(1);
         const numberColor = getNumberColor(value);
-        const labelColor = useColorModeValue('gray.600', 'gray.400');
+        const bgColor = getBgColor(value);
+        const borderColor = getBorderColor(value);
+        const labelColor = useColorModeValue('gray.700', 'gray.400');
 
         return (
             <Box
+                bg={bgColor}
                 borderWidth="2px"
-                borderColor={numberColor}
+                borderColor={borderColor}
                 borderRadius="md"
                 px={2}
                 py={1}
@@ -82,9 +142,9 @@ const StockChangeIndicators = ({
 
     return (
         <Flex width="100%" justify="space-between" align="center" gap={1}>
-            {renderIndicator('均 ', avgChange)}
+            {renderIndicator('平均 ', avgChange)}
-            {renderIndicator('最 ', maxChange)}
+            {renderIndicator('最大 ', maxChange)}
-            {renderIndicator('周 ', weekChange)}
+            {renderIndicator('周涨 ', weekChange)}
         </Flex>
     );
 };

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

@@ -99,12 +99,12 @@ const EventHeaderInfo = ({ event, importance }) => {
 
         {/* 重要性文本 */}
         <Box
-          bg="yellow.100"
+          bg="orange.50"
           px={2}
           py={1}
           borderRadius="md"
         >
-          <Text fontSize="sm" color="yellow.700" whiteSpace="nowrap" fontWeight="medium">
+          <Text fontSize="sm" color="orange.800" whiteSpace="nowrap" fontWeight="medium">
             重要性：{getImportanceText()}
           </Text>
         </Box>