diff --git a/src/views/Community/components/DynamicNewsDetail/DynamicNewsDetailPanel.js b/src/views/Community/components/DynamicNewsDetail/DynamicNewsDetailPanel.js index 84956653..8f7d531a 100644 --- a/src/views/Community/components/DynamicNewsDetail/DynamicNewsDetailPanel.js +++ b/src/views/Community/components/DynamicNewsDetail/DynamicNewsDetailPanel.js @@ -31,6 +31,7 @@ import HistoricalEvents from '../../../EventDetail/components/HistoricalEvents'; import TransmissionChainAnalysis from '../../../EventDetail/components/TransmissionChainAnalysis'; import SubscriptionBadge from '../../../../components/SubscriptionBadge'; import SubscriptionUpgradeModal from '../../../../components/SubscriptionUpgradeModal'; +import { PROFESSIONAL_COLORS } from '../../../../constants/professionalTheme'; /** * 动态新闻详情面板主组件 @@ -41,9 +42,9 @@ import SubscriptionUpgradeModal from '../../../../components/SubscriptionUpgrade const DynamicNewsDetailPanel = ({ event, showHeader = true }) => { const dispatch = useDispatch(); const { user } = useAuth(); - const cardBg = useColorModeValue('white', 'gray.800'); - const borderColor = useColorModeValue('gray.200', 'gray.700'); - const textColor = useColorModeValue('gray.600', 'gray.400'); + const cardBg = PROFESSIONAL_COLORS.background.card; + const borderColor = PROFESSIONAL_COLORS.border.default; + const textColor = PROFESSIONAL_COLORS.text.secondary; const toast = useToast(); // 获取用户会员等级(修复:字段名从 subscription_tier 改为 subscription_type) @@ -204,9 +205,17 @@ const DynamicNewsDetailPanel = ({ event, showHeader = true }) => { // 🎯 加载事件详情(增加浏览量) loadEventDetail(); - // 相关股票默认收起 - setIsStocksOpen(false); - setHasLoadedStocks(false); + // 相关股票默认展开(有权限时) + if (canAccessStocks) { + setIsStocksOpen(true); + if (!hasLoadedStocks) { + loadStocksData(); + setHasLoadedStocks(true); + } + } else { + setIsStocksOpen(false); + setHasLoadedStocks(false); + } setIsConceptsOpen(false); setIsHistoricalOpen(false); diff --git a/src/views/Community/components/EventCard/KeywordsCarousel.js b/src/views/Community/components/EventCard/KeywordsCarousel.js index 5bb46429..a41e7c6f 100644 --- a/src/views/Community/components/EventCard/KeywordsCarousel.js +++ b/src/views/Community/components/EventCard/KeywordsCarousel.js @@ -1,100 +1,83 @@ // src/views/Community/components/EventCard/KeywordsCarousel.js -// Keywords标签梦幻淡入淡出轮播组件 -import React, { useState, useEffect } from 'react'; -import { Box, Text, useColorModeValue } from '@chakra-ui/react'; -import { motion, AnimatePresence } from 'framer-motion'; - -const MotionBox = motion(Box); +// Keywords标签组件(点击切换) +import React, { useState } from 'react'; +import { Box, Text, Tooltip } from '@chakra-ui/react'; +import { PROFESSIONAL_COLORS } from '../../../../constants/professionalTheme'; /** - * Keywords标签梦幻轮播组件(单个显示,淡入淡出) + * Keywords标签组件(点击切换下一个) * @param {Array} keywords - 关键词数组 - * @param {number} interval - 轮播间隔(毫秒,默认4000ms) * @param {Function} onKeywordClick - 关键词点击回调 */ const KeywordsCarousel = ({ keywords = [], - interval = 4000, onKeywordClick }) => { const [currentIndex, setCurrentIndex] = useState(0); - const [isPaused, setIsPaused] = useState(false); - - // 颜色配置 - 梦幻渐变效果 - const textColor = useColorModeValue( - 'linear(to-r, purple.400, pink.400, blue.400)', - 'linear(to-r, purple.300, pink.300, blue.300)' - ); - const hoverBg = useColorModeValue('rgba(159, 122, 234, 0.1)', 'rgba(159, 122, 234, 0.15)'); // 如果没有keywords,不渲染 if (!keywords || keywords.length === 0) { return null; } - // 自动轮播 - useEffect(() => { - if (isPaused || keywords.length <= 1) return; - - const timer = setInterval(() => { - setCurrentIndex((prev) => (prev + 1) % keywords.length); - }, interval); - - return () => clearInterval(timer); - }, [isPaused, keywords.length, interval]); - const currentKeyword = keywords[currentIndex]; + // 点击切换到下一个关键词 + const handleClick = (e) => { + e.stopPropagation(); + + // 切换到下一个 + const nextIndex = (currentIndex + 1) % keywords.length; + setCurrentIndex(nextIndex); + + // 触发回调 + if (onKeywordClick) { + onKeywordClick(keywords[nextIndex]); + } + }; + return ( - setIsPaused(true)} - onMouseLeave={() => setIsPaused(false)} - pointerEvents="auto" - zIndex={1} + 1 + ? `点击切换下一个标签 (${currentIndex + 1}/${keywords.length})` + : '事件标签'} + placement="top" + hasArrow + bg="rgba(20, 20, 20, 0.95)" + color={PROFESSIONAL_COLORS.gold[500]} + fontSize="sm" > - - { - e.stopPropagation(); - onKeywordClick?.(currentKeyword); - }} - px={3} - py={1.5} - borderRadius="full" - bg="transparent" - _hover={{ - bg: hoverBg, - transform: 'scale(1.05)', - }} - transition="background 0.3s, transform 0.2s" + 1 ? "pointer" : "default"} + onClick={keywords.length > 1 ? handleClick : undefined} + px={3} + py={1.5} + borderRadius="full" + bg="transparent" + transition="all 0.3s ease" + _hover={keywords.length > 1 ? { + bg: 'rgba(255, 195, 0, 0.15)', + transform: 'translateY(-50%) scale(1.05)', + } : {}} + > + - - {currentKeyword} - - - - + {currentKeyword} + + + ); }; diff --git a/src/views/Community/components/HotEventsSection.js b/src/views/Community/components/HotEventsSection.js index 3ba199b6..38f498d4 100644 --- a/src/views/Community/components/HotEventsSection.js +++ b/src/views/Community/components/HotEventsSection.js @@ -12,6 +12,7 @@ import { useColorModeValue } from '@chakra-ui/react'; import HotEvents from './HotEvents'; +import { PROFESSIONAL_COLORS } from '../../../constants/professionalTheme'; /** * 热点事件区域组件 @@ -19,7 +20,8 @@ import HotEvents from './HotEvents'; * @param {Function} onEventClick - 事件点击追踪回调 */ const HotEventsSection = ({ events, onEventClick }) => { - const cardBg = useColorModeValue('white', 'gray.800'); + const cardBg = PROFESSIONAL_COLORS.background.card; + const borderColor = PROFESSIONAL_COLORS.border.default; const [currentPage, setCurrentPage] = useState(1); const [totalPages, setTotalPages] = useState(1); @@ -39,9 +41,9 @@ const HotEventsSection = ({ events, onEventClick }) => { mt={6} mb={8} bg={cardBg} - boxShadow="lg" + boxShadow="0 4px 12px rgba(0, 0, 0, 0.3), 0 0 20px rgba(255, 195, 0, 0.1)" borderWidth="1px" - borderColor={useColorModeValue('gray.200', 'gray.700')} + borderColor={borderColor} position="relative" zIndex={1} animation="fadeInUp 0.8s ease-out 0.4s both" @@ -56,20 +58,21 @@ const HotEventsSection = ({ events, onEventClick }) => { 🔥 热点事件 -

+

展示最近5天内涨幅最高的事件,助您把握市场热点

{/* 页码指示器 */} {totalPages > 1 && (