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

update ui

Browse Source
This commit is contained in:
zzlgreat
2025-11-13 23:24:54 +08:00
parent d3b980b3ca
commit 3caa5f4c3a
7 changed files with 179 additions and 63 deletions
Download Patch File Download Diff File Expand all files Collapse all files

58
src/views/Community/components/EventCard/HorizontalDynamicNewsEventCard.js
View File

@@ -13,6 +13,7 @@ import {
useColorModeValue,
} from '@chakra-ui/react';
import { getImportanceConfig } from '../../../../constants/importanceLevels';
import { PROFESSIONAL_COLORS } from '../../../../constants/professionalTheme';
// 导入子组件
import ImportanceStamp from './ImportanceStamp';
@@ -53,45 +54,46 @@ const HorizontalDynamicNewsEventCard = ({
}) => {
const importance = getImportanceConfig(event.importance);
// 所有 useColorModeValue 必须在顶层调用
const cardBg = useColorModeValue('white', 'gray.800');
const cardBgAlt = useColorModeValue('gray.50', 'gray.750');
const selectedBg = useColorModeValue('blue.50', 'blue.900');
const selectedBorderColor = useColorModeValue('blue.500', 'blue.400');
const linkColor = useColorModeValue('blue.600', 'blue.400');
// 专业配色 - 黑色、灰色、金色主题
const cardBg = PROFESSIONAL_COLORS.background.card;
const cardBgHover = PROFESSIONAL_COLORS.background.cardHover;
const selectedBg = 'rgba(255, 195, 0, 0.1)'; // 金色半透明
const selectedBorderColor = PROFESSIONAL_COLORS.gold[500];
const linkColor = PROFESSIONAL_COLORS.text.primary;
const borderColor = PROFESSIONAL_COLORS.border.default;
/**
* 根据平均涨幅计算背景色（分级策略）- 使用毛玻璃效果
* 根据平均涨幅计算背景色（专业配色 - 深色主题）
* @param {number} avgChange - 平均涨跌幅
* @returns {string} Chakra UI 颜色值
* @returns {string} CSS 颜色值
*/
const getChangeBasedBgColor = (avgChange) => {
const numChange = Number(avgChange);
// 如果没有涨跌幅数据，使用半透明背景
// 如果没有涨跌幅数据，使用默认卡片背景
if (avgChange == null || isNaN(numChange)) {
return useColorModeValue('rgba(255, 255, 255, 0.8)', 'rgba(26, 32, 44, 0.8)');
return PROFESSIONAL_COLORS.background.card;
}
// 根据涨跌幅分级返回半透明背景色（毛玻璃效果）
// 根据涨跌幅分级返回深色主题背景色
const absChange = Math.abs(numChange);
if (numChange > 0) {
// 涨：红色系半透明
if (absChange >= 9) return useColorModeValue('rgba(254, 202, 202, 0.9)', 'rgba(127, 29, 29, 0.9)');
if (absChange >= 7) return useColorModeValue('rgba(254, 202, 202, 0.8)', 'rgba(153, 27, 27, 0.8)');
if (absChange >= 5) return useColorModeValue('rgba(254, 226, 226, 0.8)', 'rgba(185, 28, 28, 0.8)');
if (absChange >= 3) return useColorModeValue('rgba(254, 226, 226, 0.7)', 'rgba(220, 38, 38, 0.7)');
return useColorModeValue('rgba(254, 242, 242, 0.7)', 'rgba(239, 68, 68, 0.7)');
// 涨：深红色系
if (absChange >= 9) return 'rgba(239, 68, 68, 0.15)';
if (absChange >= 7) return 'rgba(239, 68, 68, 0.12)';
if (absChange >= 5) return 'rgba(239, 68, 68, 0.1)';
if (absChange >= 3) return 'rgba(239, 68, 68, 0.08)';
return 'rgba(239, 68, 68, 0.05)';
} else if (numChange < 0) {
// 跌：绿色系半透明
if (absChange >= 9) return useColorModeValue('rgba(187, 247, 208, 0.9)', 'rgba(20, 83, 45, 0.9)');
if (absChange >= 7) return useColorModeValue('rgba(187, 247, 208, 0.8)', 'rgba(22, 101, 52, 0.8)');
if (absChange >= 5) return useColorModeValue('rgba(209, 250, 229, 0.8)', 'rgba(21, 128, 61, 0.8)');
if (absChange >= 3) return useColorModeValue('rgba(209, 250, 229, 0.7)', 'rgba(22, 163, 74, 0.7)');
return useColorModeValue('rgba(240, 253, 244, 0.7)', 'rgba(34, 197, 94, 0.7)');
// 跌：深绿色系
if (absChange >= 9) return 'rgba(16, 185, 129, 0.15)';
if (absChange >= 7) return 'rgba(16, 185, 129, 0.12)';
if (absChange >= 5) return 'rgba(16, 185, 129, 0.1)';
if (absChange >= 3) return 'rgba(16, 185, 129, 0.08)';
return 'rgba(16, 185, 129, 0.05)';
}
return useColorModeValue('rgba(255, 255, 255, 0.8)', 'rgba(26, 32, 44, 0.8)');
return PROFESSIONAL_COLORS.background.card;
};
return (
@@ -134,11 +136,13 @@ const HorizontalDynamicNewsEventCard = ({
top: 0,
left: 0,
right: 0,
height: '4px',
bgGradient: `linear(to-r, ${importance.color}, ${importance.borderColor})`,
height: '3px',
background: isSelected
? PROFESSIONAL_COLORS.gradients.gold
: `linear-gradient(90deg, ${PROFESSIONAL_COLORS.importance[importance.level]?.border || PROFESSIONAL_COLORS.gold[500]} 0%, transparent 100%)`,
borderTopLeftRadius: 'xl',
borderTopRightRadius: 'xl',
opacity: isSelected ? 1 : 0.7,
opacity: 0.8,
}}
transition="all 0.3s cubic-bezier(0.4, 0, 0.2, 1)"
cursor="pointer"