99 lines
3.2 KiB
JavaScript
99 lines
3.2 KiB
JavaScript
// src/utils/colorUtils.js
|
|
// 颜色工具函数 - 根据涨跌幅动态计算颜色深浅
|
|
|
|
/**
|
|
* 根据涨跌幅获取颜色（深浅动态变化）
|
|
* @param {number} change - 涨跌幅百分比
|
|
* @returns {string} Chakra UI 颜色值
|
|
*/
|
|
export const getChangeColor = (change) => {
|
|
if (change === null || change === undefined || isNaN(change)) {
|
|
return 'gray.500';
|
|
}
|
|
|
|
const absChange = Math.abs(change);
|
|
|
|
if (change > 0) {
|
|
// 涨：红色系，根据涨幅深浅
|
|
if (absChange >= 9) return 'red.900'; // 涨停或接近涨停
|
|
if (absChange >= 7) return 'red.800';
|
|
if (absChange >= 5) return 'red.700';
|
|
if (absChange >= 3) return 'red.600';
|
|
if (absChange >= 2) return 'red.500';
|
|
if (absChange >= 1) return 'red.400';
|
|
return 'red.300'; // 微涨
|
|
} else if (change < 0) {
|
|
// 跌：绿色系，根据跌幅深浅
|
|
if (absChange >= 9) return 'green.900'; // 跌停或接近跌停
|
|
if (absChange >= 7) return 'green.800';
|
|
if (absChange >= 5) return 'green.700';
|
|
if (absChange >= 3) return 'green.600';
|
|
if (absChange >= 2) return 'green.500';
|
|
if (absChange >= 1) return 'green.400';
|
|
return 'green.300'; // 微跌
|
|
}
|
|
|
|
return 'gray.500'; // 平盘
|
|
};
|
|
|
|
/**
|
|
* 获取涨跌幅背景渐变色（用于精简模式卡片）
|
|
* @param {number} change - 涨跌幅百分比
|
|
* @param {boolean} useDark - 是否使用深色模式
|
|
* @returns {string} Chakra UI bgGradient 值
|
|
*/
|
|
export const getChangeBackgroundGradient = (change, useDark = false) => {
|
|
if (change === null || change === undefined || isNaN(change)) {
|
|
return 'linear(to-br, gray.50, gray.100)';
|
|
}
|
|
|
|
const absChange = Math.abs(change);
|
|
|
|
if (change > 0) {
|
|
// 涨：红色渐变背景
|
|
if (absChange >= 9) return 'linear(to-br, red.100, red.200)';
|
|
if (absChange >= 7) return 'linear(to-br, red.50, red.150)';
|
|
if (absChange >= 5) return 'linear(to-br, red.50, red.100)';
|
|
if (absChange >= 3) return 'linear(to-br, red.50, red.100)';
|
|
return 'linear(to-br, red.50, red.50)';
|
|
} else if (change < 0) {
|
|
// 跌：绿色渐变背景
|
|
if (absChange >= 9) return 'linear(to-br, green.100, green.200)';
|
|
if (absChange >= 7) return 'linear(to-br, green.50, green.150)';
|
|
if (absChange >= 5) return 'linear(to-br, green.50, green.100)';
|
|
if (absChange >= 3) return 'linear(to-br, green.50, green.100)';
|
|
return 'linear(to-br, green.50, green.50)';
|
|
}
|
|
|
|
return 'linear(to-br, gray.50, gray.100)';
|
|
};
|
|
|
|
/**
|
|
* 获取涨跌幅边框颜色
|
|
* @param {number} change - 涨跌幅百分比
|
|
* @returns {string} Chakra UI 颜色值
|
|
*/
|
|
export const getChangeBorderColor = (change) => {
|
|
if (change === null || change === undefined || isNaN(change)) {
|
|
return 'gray.300';
|
|
}
|
|
|
|
const absChange = Math.abs(change);
|
|
|
|
if (change > 0) {
|
|
if (absChange >= 9) return 'red.700';
|
|
if (absChange >= 7) return 'red.600';
|
|
if (absChange >= 5) return 'red.500';
|
|
if (absChange >= 3) return 'red.400';
|
|
return 'red.300';
|
|
} else if (change < 0) {
|
|
if (absChange >= 9) return 'green.700';
|
|
if (absChange >= 7) return 'green.600';
|
|
if (absChange >= 5) return 'green.500';
|
|
if (absChange >= 3) return 'green.400';
|
|
return 'green.300';
|
|
}
|
|
|
|
return 'gray.300';
|
|
};
|