From 14db37482060452444dfc22f98660f69e175530d Mon Sep 17 00:00:00 2001 From: zdl <3489966805@qq.com> Date: Fri, 31 Oct 2025 16:00:37 +0800 Subject: [PATCH] =?UTF-8?q?style:=20=E4=BC=98=E5=8C=96=E4=BA=8B=E4=BB=B6?= =?UTF-8?q?=E8=AF=A6=E6=83=85=E5=92=8C=E6=B6=A8=E8=B7=8C=E5=B9=85=E6=8C=87?= =?UTF-8?q?=E6=A0=87=E7=9A=84=E8=A7=86=E8=A7=89=E6=95=88=E6=9E=9C?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit 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 --- src/components/StockChangeIndicators.js | 90 +++++++++++++++---- .../DynamicNewsDetail/EventHeaderInfo.js | 4 +- 2 files changed, 77 insertions(+), 17 deletions(-) diff --git a/src/components/StockChangeIndicators.js b/src/components/StockChangeIndicators.js index 7dce7b20..009f3284 100644 --- a/src/components/StockChangeIndicators.js +++ b/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 (absValue >= 5) { - return isPositive ? 'red.600' : 'green.600'; + if (isPositive) { + // 上涨：红色系 → 橙色系 + 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 ( - {renderIndicator('均 ', avgChange)} - {renderIndicator('最 ', maxChange)} - {renderIndicator('周 ', weekChange)} + {renderIndicator('平均 ', avgChange)} + {renderIndicator('最大 ', maxChange)} + {renderIndicator('周涨 ', weekChange)} ); }; diff --git a/src/views/Community/components/DynamicNewsDetail/EventHeaderInfo.js b/src/views/Community/components/DynamicNewsDetail/EventHeaderInfo.js index d0911fbf..a7b28356 100644 --- a/src/views/Community/components/DynamicNewsDetail/EventHeaderInfo.js +++ b/src/views/Community/components/DynamicNewsDetail/EventHeaderInfo.js @@ -99,12 +99,12 @@ const EventHeaderInfo = ({ event, importance }) => { {/* 重要性文本 */} - + 重要性：{getImportanceText()}