refactor: 优化 StockChangeIndicators 颜色层次和视觉对比度

优化：
- 背景色统一使用 50 最浅色 (red.50/orange.50/green.50/teal.50)
- 边框色根据涨跌幅大小动态调整 (100-200 级别)
- 确保背景 < 边框 < 文字的颜色深度层次
- 提升视觉对比度和可读性
- 更新注释说明颜色逻辑

修改文件：
- src/components/StockChangeIndicators.js

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

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

src/components/StockChangeIndicators.js

@@ -47,29 +47,29 @@ const StockChangeIndicators = ({
         }
     };
 
-    // 根据涨跌幅获取背景色（跟随数字颜色）
+    // 根据涨跌幅获取背景色（永远比文字色浅）
     const getBgColor = (value) => {
         if (value == null) {
-            return useColorModeValue('gray.100', 'gray.700');
+            return useColorModeValue('gray.50', 'gray.800');
         }
 
         // 0值使用中性灰色背景
         if (value === 0) {
-            return useColorModeValue('gray.100', 'gray.700');
+            return useColorModeValue('gray.50', 'gray.800');
         }
 
         const absValue = Math.abs(value);
         const isPositive = value > 0;
 
         if (isPositive) {
-            // 上涨背景：红色系 → 橙色系
+            // 上涨背景：红色系 → 橙色系（统一使用 50 最浅色）
             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 {
-            // 下跌背景：绿色系 → 青色系
+            // 下跌背景：绿色系 → 青色系（统一使用 50 最浅色）
             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');
@@ -78,34 +78,34 @@ const StockChangeIndicators = ({
         }
     };
 
-    // 根据涨跌幅获取边框色（跟随数字颜色）
+    // 根据涨跌幅获取边框色（比背景深，比文字浅）
     const getBorderColor = (value) => {
         if (value == null) {
-            return useColorModeValue('gray.300', 'gray.600');
+            return useColorModeValue('gray.200', 'gray.700');
         }
 
         // 0值使用中性灰色边框
         if (value === 0) {
-            return useColorModeValue('gray.300', 'gray.600');
+            return useColorModeValue('gray.200', 'gray.700');
         }
 
         const absValue = Math.abs(value);
         const isPositive = value > 0;
 
         if (isPositive) {
-            // 上涨边框：红色系 → 橙色系
+            // 上涨边框：红色系 → 橙色系（跟随文字深浅）
-            if (absValue >= 10) return useColorModeValue('red.200', 'red.700');
+            if (absValue >= 10) return useColorModeValue('red.200', 'red.800');      // 文字 red.900
-            if (absValue >= 5) return useColorModeValue('red.200', 'red.700');
+            if (absValue >= 5) return useColorModeValue('red.200', 'red.700');       // 文字 red.700
-            if (absValue >= 3) return useColorModeValue('red.200', 'red.700');
+            if (absValue >= 3) return useColorModeValue('red.100', 'red.600');       // 文字 red.500
-            if (absValue >= 1) return useColorModeValue('orange.200', 'orange.700');
+            if (absValue >= 1) return useColorModeValue('orange.200', 'orange.700'); // 文字 orange.600
-            return useColorModeValue('orange.200', 'orange.700');
+            return useColorModeValue('orange.100', 'orange.600');                    // 文字 orange.400
         } else {
-            // 下跌边框：绿色系 → 青色系
+            // 下跌边框：绿色系 → 青色系（跟随文字深浅）
-            if (absValue >= 10) return useColorModeValue('green.200', 'green.700');
+            if (absValue >= 10) return useColorModeValue('green.200', 'green.800');  // 文字 green.900
-            if (absValue >= 5) return useColorModeValue('green.200', 'green.700');
+            if (absValue >= 5) return useColorModeValue('green.200', 'green.700');   // 文字 green.700
-            if (absValue >= 3) return useColorModeValue('green.200', 'green.700');
+            if (absValue >= 3) return useColorModeValue('green.100', 'green.600');   // 文字 green.500
-            if (absValue >= 1) return useColorModeValue('teal.200', 'teal.700');
+            if (absValue >= 1) return useColorModeValue('teal.200', 'teal.700');     // 文字 teal.600
-            return useColorModeValue('teal.200', 'teal.700');
+            return useColorModeValue('teal.100', 'teal.600');                        // 文字 teal.400
         }
     };