From 7e32dda2df953db5eea191df13e1a934f3caa502 Mon Sep 17 00:00:00 2001 From: zdl <3489966805@qq.com> Date: Mon, 3 Nov 2025 15:38:30 +0800 Subject: [PATCH] =?UTF-8?q?feat=E6=9C=AC=E6=AC=A1=E6=8F=90=E4=BA=A4?= =?UTF-8?q?=E5=8C=85=E5=90=AB=E7=9A=84=E4=BC=98=E5=8C=96?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit ✅ StockChangeIndicators 组件优化 - 调整 padding 使布局更紧凑 - 修复窄卡片中的折行问题 - 自动根据内容调整宽度 ✅ 重要性等级视觉优化 - 统一使用红色系（S→A→B→C：从深红到浅红） - 添加 badgeBg 字段支持新的角标样式 ✅ DynamicNewsEventCard 卡片改版 - 左上角矩形角标显示重要性（镂空边框样式） - 悬浮显示所有等级说明 - 标题限制两行显示 ✅ Mock 数据完整性 - 添加缺失的 related_week_chg 字段 - 确保三个涨跌幅指标数据完整 --- src/components/StockChangeIndicators.js | 4 +- src/constants/importanceLevels.js | 42 +++++---- src/mocks/data/events.js | 2 + .../EventCard/DynamicNewsEventCard.js | 94 ++++++++++++++++--- 4 files changed, 110 insertions(+), 32 deletions(-) diff --git a/src/components/StockChangeIndicators.js b/src/components/StockChangeIndicators.js index be084b33..daff42d9 100644 --- a/src/components/StockChangeIndicators.js +++ b/src/components/StockChangeIndicators.js @@ -127,8 +127,8 @@ const StockChangeIndicators = ({ borderWidth="2px" borderColor={borderColor} borderRadius="md" - px={2} - py={1} + px={1.5} + py={0.5} display="flex" alignItems="center" justifyContent="center" diff --git a/src/constants/importanceLevels.js b/src/constants/importanceLevels.js index 2b2bc465..3e3ffd6f 100644 --- a/src/constants/importanceLevels.js +++ b/src/constants/importanceLevels.js @@ -15,47 +15,55 @@ import { export const IMPORTANCE_LEVELS = { 'S': { level: 'S', - color: 'purple.600', - bgColor: 'purple.50', - borderColor: 'purple.200', + color: 'red.800', + bgColor: 'red.50', + borderColor: 'red.200', + colorScheme: 'red', + badgeBg: 'red.800', // 角标边框和文字颜色 - 极深红色 icon: WarningIcon, label: '极高', - dotBg: 'purple.500', + dotBg: 'red.800', description: '重大事件，市场影响深远', - antdColor: '#722ed1', // 对应 Ant Design 的紫色 + antdColor: '#cf1322', }, 'A': { level: 'A', color: 'red.600', bgColor: 'red.50', borderColor: 'red.200', + colorScheme: 'red', + badgeBg: 'red.600', // 角标边框和文字颜色 - 深红色 icon: WarningTwoIcon, label: '高', - dotBg: 'red.500', + dotBg: 'red.600', description: '重要事件，影响较大', - antdColor: '#ff4d4f', // 对应 Ant Design 的红色 + antdColor: '#ff4d4f', }, 'B': { level: 'B', - color: 'orange.600', - bgColor: 'orange.50', - borderColor: 'orange.200', + color: 'red.500', + bgColor: 'red.50', + borderColor: 'red.100', + colorScheme: 'red', + badgeBg: 'red.500', // 角标边框和文字颜色 - 中红色 icon: InfoIcon, label: '中', - dotBg: 'orange.500', + dotBg: 'red.500', description: '普通事件，有一定影响', - antdColor: '#faad14', // 对应 Ant Design 的橙色 + antdColor: '#ff7875', }, 'C': { level: 'C', - color: 'green.600', - bgColor: 'green.50', - borderColor: 'green.200', + color: 'red.400', + bgColor: 'red.50', + borderColor: 'red.100', + colorScheme: 'red', + badgeBg: 'red.400', // 角标边框和文字颜色 - 浅红色 icon: CheckCircleIcon, label: '低', - dotBg: 'green.500', + dotBg: 'red.400', description: '参考事件，影响有限', - antdColor: '#52c41a', // 对应 Ant Design 的绿色 + antdColor: '#ffa39e', } }; diff --git a/src/mocks/data/events.js b/src/mocks/data/events.js index fd439ae2..90020e84 100644 --- a/src/mocks/data/events.js +++ b/src/mocks/data/events.js @@ -753,6 +753,7 @@ export function generateMockEvents(params = {}) { const hotScore = Math.max(50, 100 - i); const relatedAvgChg = (Math.random() * 20 - 5).toFixed(2); // -5% 到 15% const relatedMaxChg = (Math.random() * 30).toFixed(2); // 0% 到 30% + const relatedWeekChg = (Math.random() * 30 - 10).toFixed(2); // -10% 到 20% // 生成价格走势数据（前一天、当天、后一天） const generatePriceTrend = (seed) => { @@ -848,6 +849,7 @@ export function generateMockEvents(params = {}) { view_count: Math.floor(Math.random() * 10000), related_avg_chg: parseFloat(relatedAvgChg), related_max_chg: parseFloat(relatedMaxChg), + related_week_chg: parseFloat(relatedWeekChg), keywords: generateKeywords(industry, i), is_ai_generated: i % 4 === 0, // 25% 的事件是AI生成 industry: industry, diff --git a/src/views/Community/components/EventCard/DynamicNewsEventCard.js b/src/views/Community/components/EventCard/DynamicNewsEventCard.js index 0668ae47..58ee4f35 100644 --- a/src/views/Community/components/EventCard/DynamicNewsEventCard.js +++ b/src/views/Community/components/EventCard/DynamicNewsEventCard.js @@ -8,10 +8,17 @@ import { CardBody, Box, Text, + HStack, + Popover, + PopoverTrigger, + PopoverContent, + PopoverBody, + PopoverArrow, + Portal, useColorModeValue, } from '@chakra-ui/react'; import moment from 'moment'; -import { getImportanceConfig } from '../../../../constants/importanceLevels'; +import { getImportanceConfig, getAllImportanceLevels } from '../../../../constants/importanceLevels'; // 导入子组件 import EventFollowButton from './EventFollowButton'; @@ -85,6 +92,7 @@ const DynamicNewsEventCard = ({ } borderRadius="md" boxShadow={isSelected ? "lg" : "sm"} + overflow="hidden" _hover={{ boxShadow: 'xl', transform: 'translateY(-2px)', @@ -95,7 +103,74 @@ const DynamicNewsEventCard = ({ onClick={() => onEventClick?.(event)} > - {/* 关注按钮 - 绝对定位在右上角 */} + {/* 左上角：重要性矩形角标（镂空边框样式） */} + + + + {importance.label} + + + + + + + + + 重要性等级说明 + + {getAllImportanceLevels().map(item => ( + + + {item.level} + + + + {item.label}： + + {item.description} + + + ))} + + + + + + + {/* 右上角：关注按钮 */} - - {/* 第一行：标题 + 重要性（行内文字） */} + + {/* 标题 - 最多两行，添加上边距避免与角标重叠 */} onTitleClick?.(e, event)} + mt={1} paddingRight="10px" > {event.title} - - [{importance.level}] -