diff --git a/src/constants/importanceLevels.js b/src/constants/importanceLevels.js
index e84b959f..83a26495 100644
--- a/src/constants/importanceLevels.js
+++ b/src/constants/importanceLevels.js
@@ -22,8 +22,8 @@ export const IMPORTANCE_LEVELS = {
badgeBg: '#dc2626', // 圆形徽章背景色 - 红色
badgeColor: 'white', // 圆形徽章文字颜色 - 白色
icon: WarningIcon,
- label: '极高',
- stampText: '极', // 印章文字
+ label: 'S级',
+ stampText: 'S', // 印章文字
stampFont: "'STKaiti', 'KaiTi', 'SimKai', serif", // 楷体
dotBg: 'red.800',
description: '重大事件,市场影响深远',
@@ -38,8 +38,8 @@ export const IMPORTANCE_LEVELS = {
badgeBg: '#ea580c', // 圆形徽章背景色 - 橙色
badgeColor: 'white', // 圆形徽章文字颜色 - 白色
icon: WarningTwoIcon,
- label: '高',
- stampText: '高', // 印章文字
+ label: 'A级',
+ stampText: 'A', // 印章文字
stampFont: "'STXingkai', 'FangSong', 'STFangsong', cursive", // 行楷/草书
dotBg: 'red.600',
description: '重要事件,影响较大',
@@ -54,8 +54,8 @@ export const IMPORTANCE_LEVELS = {
badgeBg: '#2563eb', // 圆形徽章背景色 - 蓝色
badgeColor: 'white', // 圆形徽章文字颜色 - 白色
icon: InfoIcon,
- label: '中',
- stampText: '中', // 印章文字
+ label: 'B级',
+ stampText: 'B', // 印章文字
stampFont: "'STKaiti', 'KaiTi', 'SimKai', serif", // 楷体
dotBg: 'red.500',
description: '普通事件,有一定影响',
@@ -70,8 +70,8 @@ export const IMPORTANCE_LEVELS = {
badgeBg: '#10b981', // 圆形徽章背景色 - 青绿色(替代灰色)
badgeColor: 'white', // 圆形徽章文字颜色 - 白色
icon: CheckCircleIcon,
- label: '低',
- stampText: '低', // 印章文字
+ label: 'C级',
+ stampText: 'C', // 印章文字
stampFont: "'STKaiti', 'KaiTi', 'SimKai', serif", // 楷体
dotBg: 'red.400',
description: '参考事件,影响有限',
diff --git a/src/views/Community/components/CompactSearchBox.js b/src/views/Community/components/CompactSearchBox.js
index d9d68654..5292cb5a 100644
--- a/src/views/Community/components/CompactSearchBox.js
+++ b/src/views/Community/components/CompactSearchBox.js
@@ -497,7 +497,7 @@ const CompactSearchBox = ({
{/* 重要性筛选 */}
-
+
`已选 ${omittedValues.length} 项`}
>
-
-
-
-
+
+
+
+
diff --git a/src/views/Community/components/EventCard/EventTimeline.js b/src/views/Community/components/EventCard/EventTimeline.js
index 28cac251..b5211d21 100644
--- a/src/views/Community/components/EventCard/EventTimeline.js
+++ b/src/views/Community/components/EventCard/EventTimeline.js
@@ -1,6 +1,6 @@
// src/views/Community/components/EventCard/EventTimeline.js
import React from 'react';
-import { Box, VStack, Text, useColorModeValue } from '@chakra-ui/react';
+import { Box, VStack, Text, useColorModeValue, Badge } from '@chakra-ui/react';
import moment from 'moment';
/**
@@ -10,10 +10,11 @@ import moment from 'moment';
* @param {Object} props.timelineStyle - 时间轴样式配置
* @param {string} props.borderColor - 竖线边框颜色
* @param {string} props.minHeight - 竖线最小高度(例如:'40px' 或 '80px')
+ * @param {Object} props.importance - 重要性配置对象(包含 level, badgeBg, badgeColor 等)
*/
-const EventTimeline = ({ createdAt, timelineStyle, borderColor, minHeight = '40px' }) => {
+const EventTimeline = ({ createdAt, timelineStyle, borderColor, minHeight = '40px', importance }) => {
return (
-
+
{/* 时间长方形卡片 - 更紧凑 */}
- {/* 右侧事件卡片容器(带印章) */}
-
- {/* 右上角:重要性印章(放在卡片外层) */}
-
-
-
-
- {/* 事件卡片 */}
+ {/* 右侧事件卡片容器 */}
+
+ {/* 事件卡片 - 增强美化效果 */}
onEventClick?.(event)}
>
@@ -179,13 +188,37 @@ const HorizontalDynamicNewsEventCard = ({
- {/* 第二行:涨跌幅数据 */}
-
+ {/* 第二行:涨跌幅数据 + Keywords轮播 */}
+
+ {/* 左侧:涨跌幅数据 */}
+
+
+ {/* 右侧:Keywords轮播(半透明效果) */}
+ {event.keywords && event.keywords.length > 0 && (
+
+ {
+ console.log('Keyword clicked:', keyword);
+ // TODO: 实现关键词筛选功能
+ }}
+ />
+
+ )}
+
diff --git a/src/views/Community/components/EventCard/KeywordsCarousel.js b/src/views/Community/components/EventCard/KeywordsCarousel.js
new file mode 100644
index 00000000..1a94b508
--- /dev/null
+++ b/src/views/Community/components/EventCard/KeywordsCarousel.js
@@ -0,0 +1,133 @@
+// src/views/Community/components/EventCard/KeywordsCarousel.js
+// Keywords标签轮播组件
+import React, { useState, useEffect } from 'react';
+import { Box, Tag, HStack, useColorModeValue, Tooltip } from '@chakra-ui/react';
+import { motion, AnimatePresence } from 'framer-motion';
+
+const MotionBox = motion(Box);
+
+/**
+ * Keywords标签轮播组件
+ * @param {Array} keywords - 关键词数组
+ * @param {number} displayCount - 显示的标签数量(默认3个)
+ * @param {number} interval - 轮播间隔(毫秒,默认3000ms)
+ * @param {Function} onKeywordClick - 关键词点击回调
+ */
+const KeywordsCarousel = ({
+ keywords = [],
+ displayCount = 3,
+ interval = 3000,
+ onKeywordClick
+}) => {
+ const [currentIndex, setCurrentIndex] = useState(0);
+ const [isPaused, setIsPaused] = useState(false);
+
+ // 颜色配置
+ const tagBg = useColorModeValue('rgba(66, 153, 225, 0.1)', 'rgba(66, 153, 225, 0.2)');
+ const tagColor = useColorModeValue('blue.600', 'blue.300');
+ const tagBorder = useColorModeValue('blue.200', 'blue.600');
+
+ // 如果没有keywords,不渲染
+ if (!keywords || keywords.length === 0) {
+ return null;
+ }
+
+ // 自动轮播
+ useEffect(() => {
+ if (isPaused || keywords.length <= displayCount) return;
+
+ const timer = setInterval(() => {
+ setCurrentIndex((prev) => (prev + 1) % keywords.length);
+ }, interval);
+
+ return () => clearInterval(timer);
+ }, [isPaused, keywords.length, displayCount, interval]);
+
+ // 获取当前显示的关键词
+ const getVisibleKeywords = () => {
+ if (keywords.length <= displayCount) {
+ return keywords;
+ }
+
+ const visible = [];
+ for (let i = 0; i < displayCount; i++) {
+ const index = (currentIndex + i) % keywords.length;
+ visible.push(keywords[index]);
+ }
+ return visible;
+ };
+
+ const visibleKeywords = getVisibleKeywords();
+
+ return (
+ setIsPaused(true)}
+ onMouseLeave={() => setIsPaused(false)}
+ position="relative"
+ >
+
+
+ {visibleKeywords.map((keyword, index) => (
+
+
+ {
+ e.stopPropagation();
+ onKeywordClick?.(keyword);
+ }}
+ >
+ #{keyword}
+
+
+
+ ))}
+
+
+
+ {/* 如果有更多关键词,显示指示器 */}
+ {keywords.length > displayCount && (
+
+ +{keywords.length - displayCount}
+
+ )}
+
+ );
+};
+
+export default KeywordsCarousel;