diff --git a/src/constants/importanceLevels.js b/src/constants/importanceLevels.js index f53d1e40..e84b959f 100644 --- a/src/constants/importanceLevels.js +++ b/src/constants/importanceLevels.js @@ -24,6 +24,7 @@ export const IMPORTANCE_LEVELS = { icon: WarningIcon, label: '极高', stampText: '极', // 印章文字 + stampFont: "'STKaiti', 'KaiTi', 'SimKai', serif", // 楷体 dotBg: 'red.800', description: '重大事件,市场影响深远', antdColor: '#cf1322', @@ -39,6 +40,7 @@ export const IMPORTANCE_LEVELS = { icon: WarningTwoIcon, label: '高', stampText: '高', // 印章文字 + stampFont: "'STXingkai', 'FangSong', 'STFangsong', cursive", // 行楷/草书 dotBg: 'red.600', description: '重要事件,影响较大', antdColor: '#ff4d4f', @@ -54,6 +56,7 @@ export const IMPORTANCE_LEVELS = { icon: InfoIcon, label: '中', stampText: '中', // 印章文字 + stampFont: "'STKaiti', 'KaiTi', 'SimKai', serif", // 楷体 dotBg: 'red.500', description: '普通事件,有一定影响', antdColor: '#ff7875', @@ -64,11 +67,12 @@ export const IMPORTANCE_LEVELS = { bgColor: 'red.50', borderColor: 'red.100', colorScheme: 'red', - badgeBg: '#6b7280', // 圆形徽章背景色 - 灰色 + badgeBg: '#10b981', // 圆形徽章背景色 - 青绿色(替代灰色) badgeColor: 'white', // 圆形徽章文字颜色 - 白色 icon: CheckCircleIcon, label: '低', stampText: '低', // 印章文字 + stampFont: "'STKaiti', 'KaiTi', 'SimKai', serif", // 楷体 dotBg: 'red.400', description: '参考事件,影响有限', antdColor: '#ffa39e', diff --git a/src/views/Community/components/EventCard/HorizontalDynamicNewsEventCard.js b/src/views/Community/components/EventCard/HorizontalDynamicNewsEventCard.js index 6ef496f9..8a0ca736 100644 --- a/src/views/Community/components/EventCard/HorizontalDynamicNewsEventCard.js +++ b/src/views/Community/components/EventCard/HorizontalDynamicNewsEventCard.js @@ -15,7 +15,7 @@ import { import { getImportanceConfig } from '../../../../constants/importanceLevels'; // 导入子组件 -import ImportanceBadge from './ImportanceBadge'; +import ImportanceStamp from './ImportanceStamp'; import EventTimeline from './EventTimeline'; import EventFollowButton from './EventFollowButton'; import StockChangeIndicators from '../../../../components/StockChangeIndicators'; @@ -57,6 +57,40 @@ const HorizontalDynamicNewsEventCard = ({ const selectedBorderColor = useColorModeValue('blue.500', 'blue.400'); const linkColor = useColorModeValue('blue.600', 'blue.400'); + /** + * 根据平均涨幅计算背景色(分级策略)- 使用毛玻璃效果 + * @param {number} avgChange - 平均涨跌幅 + * @returns {string} Chakra UI 颜色值 + */ + 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)'); + } + + // 根据涨跌幅分级返回半透明背景色(毛玻璃效果) + 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)'); + } 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)'); + } + + return useColorModeValue('rgba(255, 255, 255, 0.8)', 'rgba(26, 32, 44, 0.8)'); + }; + return ( {/* 左侧时间轴 */} @@ -67,88 +101,93 @@ const HorizontalDynamicNewsEventCard = ({ minHeight="60px" /> - {/* 右侧事件卡片 */} - onEventClick?.(event)} - > - - {/* 左上角:重要性标签 */} - + {/* 右侧事件卡片容器(带印章) */} + + {/* 右上角:重要性印章(放在卡片外层) */} + + + - {/* 右上角:关注按钮 */} - - onToggleFollow?.(event.id)} - size="xs" - showCount={false} - /> - + {/* 事件卡片 */} + onEventClick?.(event)} + > + + {/* 右上角:关注按钮 */} + + onToggleFollow?.(event.id)} + size="xs" + showCount={false} + /> + - - {/* 标题 - 最多两行,hover 显示完整内容 */} - - onTitleClick?.(e, event)} - mt={1} - paddingRight="10px" + + {/* 标题 - 最多两行,hover 显示完整内容 */} + - onTitleClick?.(e, event)} + mt={1} + paddingRight="10px" > - {event.title} - - - + + {event.title} + + + - {/* 第二行:涨跌幅数据 */} - - - - + {/* 第二行:涨跌幅数据 */} + + + + + ); }; diff --git a/src/views/Community/components/EventCard/ImportanceStamp.js b/src/views/Community/components/EventCard/ImportanceStamp.js index 2a2f6e5a..f7df9caf 100644 --- a/src/views/Community/components/EventCard/ImportanceStamp.js +++ b/src/views/Community/components/EventCard/ImportanceStamp.js @@ -13,13 +13,23 @@ import { getImportanceConfig } from '../../../../constants/importanceLevels'; * 重要性印章组件(模拟盖章效果) * @param {Object} props * @param {string} props.importance - 重要性等级 (S/A/B/C) + * @param {string} props.size - 印章尺寸 ('sm' | 'md' | 'lg') */ -const ImportanceStamp = ({ importance }) => { +const ImportanceStamp = ({ importance, size = 'md' }) => { const config = getImportanceConfig(importance); // 印章颜色 const stampColor = useColorModeValue(config.badgeBg, config.badgeBg); + // 尺寸配置 + const sizeConfig = { + sm: { outer: '40px', inner: '34px', fontSize: 'md', borderOuter: '2px', borderInner: '1.5px' }, + md: { outer: '50px', inner: '42px', fontSize: 'xl', borderOuter: '3px', borderInner: '2px' }, + lg: { outer: '60px', inner: '52px', fontSize: '2xl', borderOuter: '4px', borderInner: '2.5px' }, + }; + + const currentSize = sizeConfig[size]; + return ( { {/* 外层圆形边框(双圈) */} {/* 内层圆形边框 */} {/* 印章文字 */} {config.stampText}