From b95607e9b406dc75a39eb8a73cb940eff89e9c41 Mon Sep 17 00:00:00 2001 From: zdl <3489966805@qq.com> Date: Mon, 3 Nov 2025 16:01:42 +0800 Subject: [PATCH] =?UTF-8?q?refactor:=20=E4=BC=98=E5=8C=96=20StockChangeInd?= =?UTF-8?q?icators=20=E9=A2=9C=E8=89=B2=E5=B1=82=E6=AC=A1=E5=92=8C?= =?UTF-8?q?=E8=A7=86=E8=A7=89=E5=AF=B9=E6=AF=94=E5=BA=A6?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit 优化： - 背景色统一使用 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 --- src/components/StockChangeIndicators.js | 40 ++++++++++++------------- 1 file changed, 20 insertions(+), 20 deletions(-) diff --git a/src/components/StockChangeIndicators.js b/src/components/StockChangeIndicators.js index daff42d9..58220228 100644 --- a/src/components/StockChangeIndicators.js +++ b/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 >= 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'); + // 上涨边框：红色系 → 橙色系（跟随文字深浅） + if (absValue >= 10) return useColorModeValue('red.200', 'red.800'); // 文字 red.900 + if (absValue >= 5) return useColorModeValue('red.200', 'red.700'); // 文字 red.700 + if (absValue >= 3) return useColorModeValue('red.100', 'red.600'); // 文字 red.500 + if (absValue >= 1) return useColorModeValue('orange.200', 'orange.700'); // 文字 orange.600 + return useColorModeValue('orange.100', 'orange.600'); // 文字 orange.400 } 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'); + // 下跌边框：绿色系 → 青色系（跟随文字深浅） + if (absValue >= 10) return useColorModeValue('green.200', 'green.800'); // 文字 green.900 + if (absValue >= 5) return useColorModeValue('green.200', 'green.700'); // 文字 green.700 + if (absValue >= 3) return useColorModeValue('green.100', 'green.600'); // 文字 green.500 + if (absValue >= 1) return useColorModeValue('teal.200', 'teal.700'); // 文字 teal.600 + return useColorModeValue('teal.100', 'teal.600'); // 文字 teal.400 } };