事件中心UI优化

src/utils/colorUtils.js

@@ -0,0 +1,98 @@
+// 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';
+};