vf/vf_react
4
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

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

Browse Source 
优化：
- 背景色统一使用 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>
This commit is contained in:
zdl
2025-11-03 16:01:42 +08:00
parent 462933f4af
commit b95607e9b4
1 changed files with 20 additions and 20 deletions
Download Patch File Download Diff File Expand all files Collapse all files

40
src/components/StockChangeIndicators.js
View File

@@ -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
}
};