update ui
This commit is contained in:
@@ -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();
|
||||
|
||||
// 相关股票默认收起
|
||||
// 相关股票默认展开（有权限时）
|
||||
if (canAccessStocks) {
|
||||
setIsStocksOpen(true);
|
||||
if (!hasLoadedStocks) {
|
||||
loadStocksData();
|
||||
setHasLoadedStocks(true);
|
||||
}
|
||||
} else {
|
||||
setIsStocksOpen(false);
|
||||
setHasLoadedStocks(false);
|
||||
}
|
||||
|
||||
setIsConceptsOpen(false);
|
||||
setIsHistoricalOpen(false);
|
||||
|
||||
@@ -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 (
|
||||
<Tooltip
|
||||
label={keywords.length > 1
|
||||
? `点击切换下一个标签 (${currentIndex + 1}/${keywords.length})`
|
||||
: '事件标签'}
|
||||
placement="top"
|
||||
hasArrow
|
||||
bg="rgba(20, 20, 20, 0.95)"
|
||||
color={PROFESSIONAL_COLORS.gold[500]}
|
||||
fontSize="sm"
|
||||
>
|
||||
<Box
|
||||
position="absolute"
|
||||
right={4}
|
||||
top="50%"
|
||||
transform="translateY(-50%)"
|
||||
onMouseEnter={() => setIsPaused(true)}
|
||||
onMouseLeave={() => setIsPaused(false)}
|
||||
pointerEvents="auto"
|
||||
zIndex={1}
|
||||
>
|
||||
<AnimatePresence mode="wait">
|
||||
<MotionBox
|
||||
key={`keyword-${currentKeyword}-${currentIndex}`}
|
||||
initial={{ opacity: 0, scale: 0.8, filter: 'blur(4px)' }}
|
||||
animate={{ opacity: 1, scale: 1, filter: 'blur(0px)' }}
|
||||
exit={{ opacity: 0, scale: 0.8, filter: 'blur(4px)' }}
|
||||
transition={{
|
||||
duration: 0.8,
|
||||
ease: [0.4, 0, 0.2, 1]
|
||||
}}
|
||||
cursor="pointer"
|
||||
onClick={(e) => {
|
||||
e.stopPropagation();
|
||||
onKeywordClick?.(currentKeyword);
|
||||
}}
|
||||
cursor={keywords.length > 1 ? "pointer" : "default"}
|
||||
onClick={keywords.length > 1 ? handleClick : undefined}
|
||||
px={3}
|
||||
py={1.5}
|
||||
borderRadius="full"
|
||||
bg="transparent"
|
||||
_hover={{
|
||||
bg: hoverBg,
|
||||
transform: 'scale(1.05)',
|
||||
}}
|
||||
transition="background 0.3s, transform 0.2s"
|
||||
transition="all 0.3s ease"
|
||||
_hover={keywords.length > 1 ? {
|
||||
bg: 'rgba(255, 195, 0, 0.15)',
|
||||
transform: 'translateY(-50%) scale(1.05)',
|
||||
} : {}}
|
||||
>
|
||||
<Text
|
||||
bgGradient={textColor}
|
||||
bgClip="text"
|
||||
color={PROFESSIONAL_COLORS.gold[500]}
|
||||
fontSize="md"
|
||||
fontWeight="bold"
|
||||
letterSpacing="wide"
|
||||
whiteSpace="nowrap"
|
||||
textShadow="0 0 20px rgba(159, 122, 234, 0.3)"
|
||||
textShadow="0 0 20px rgba(255, 195, 0, 0.3)"
|
||||
>
|
||||
{currentKeyword}
|
||||
</Text>
|
||||
</MotionBox>
|
||||
</AnimatePresence>
|
||||
</Box>
|
||||
</Tooltip>
|
||||
);
|
||||
};
|
||||
|
||||
|
||||
@@ -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 }) => {
|
||||
<Box>
|
||||
<Heading
|
||||
size="lg"
|
||||
bgGradient="linear(to-r, #FF4500, #FFD700)"
|
||||
bgGradient={PROFESSIONAL_COLORS.gradients.gold}
|
||||
bgClip="text"
|
||||
fontWeight="extrabold"
|
||||
>
|
||||
🔥 热点事件
|
||||
</Heading>
|
||||
<p className="section-subtitle" style={{paddingTop: '8px', color: useColorModeValue('#666', '#aaa')}}>
|
||||
<p className="section-subtitle" style={{paddingTop: '8px', color: PROFESSIONAL_COLORS.text.secondary}}>
|
||||
展示最近5天内涨幅最高的事件，助您把握市场热点
|
||||
</p>
|
||||
</Box>
|
||||
{/* 页码指示器 */}
|
||||
{totalPages > 1 && (
|
||||
<Badge
|
||||
colorScheme="orange"
|
||||
bg={PROFESSIONAL_COLORS.gold[500]}
|
||||
color="black"
|
||||
fontSize="sm"
|
||||
px={3}
|
||||
py={1}
|
||||
|
||||
Reference in New Issue
Block a user