update ui

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 cardBg = PROFESSIONAL_COLORS.background.card;
-  const borderColor = useColorModeValue('gray.200', 'gray.700');
+  const borderColor = PROFESSIONAL_COLORS.border.default;
-  const textColor = useColorModeValue('gray.600', 'gray.400');
+  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);
+    if (canAccessStocks) {
-    setHasLoadedStocks(false);
+      setIsStocksOpen(true);
+      if (!hasLoadedStocks) {
+        loadStocksData();
+        setHasLoadedStocks(true);
+      }
+    } else {
+      setIsStocksOpen(false);
+      setHasLoadedStocks(false);
+    }
 
     setIsConceptsOpen(false);
     setIsHistoricalOpen(false);

src/views/Community/components/EventCard/KeywordsCarousel.js

@@ -1,100 +1,83 @@
 // src/views/Community/components/EventCard/KeywordsCarousel.js
-// Keywords标签梦幻淡入淡出轮播组件
+// Keywords标签组件（点击切换）
-import React, { useState, useEffect } from 'react';
+import React, { useState } from 'react';
-import { Box, Text, useColorModeValue } from '@chakra-ui/react';
+import { Box, Text, Tooltip } from '@chakra-ui/react';
-import { motion, AnimatePresence } from 'framer-motion';
+import { PROFESSIONAL_COLORS } from '../../../../constants/professionalTheme';
-
-const MotionBox = motion(Box);
 
 /**
- * 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 (
-        <Box
+        <Tooltip
-            position="absolute"
+            label={keywords.length > 1
-            right={4}
+                ? `点击切换下一个标签 (${currentIndex + 1}/${keywords.length})`
-            top="50%"
+                : '事件标签'}
-            transform="translateY(-50%)"
+            placement="top"
-            onMouseEnter={() => setIsPaused(true)}
+            hasArrow
-            onMouseLeave={() => setIsPaused(false)}
+            bg="rgba(20, 20, 20, 0.95)"
-            pointerEvents="auto"
+            color={PROFESSIONAL_COLORS.gold[500]}
-            zIndex={1}
+            fontSize="sm"
         >
-            <AnimatePresence mode="wait">
+            <Box
-                <MotionBox
+                position="absolute"
-                    key={`keyword-${currentKeyword}-${currentIndex}`}
+                right={4}
-                    initial={{ opacity: 0, scale: 0.8, filter: 'blur(4px)' }}
+                top="50%"
-                    animate={{ opacity: 1, scale: 1, filter: 'blur(0px)' }}
+                transform="translateY(-50%)"
-                    exit={{ opacity: 0, scale: 0.8, filter: 'blur(4px)' }}
+                pointerEvents="auto"
-                    transition={{
+                zIndex={1}
-                        duration: 0.8,
+                cursor={keywords.length > 1 ? "pointer" : "default"}
-                        ease: [0.4, 0, 0.2, 1]
+                onClick={keywords.length > 1 ? handleClick : undefined}
-                    }}
+                px={3}
-                    cursor="pointer"
+                py={1.5}
-                    onClick={(e) => {
+                borderRadius="full"
-                        e.stopPropagation();
+                bg="transparent"
-                        onKeywordClick?.(currentKeyword);
+                transition="all 0.3s ease"
-                    }}
+                _hover={keywords.length > 1 ? {
-                    px={3}
+                    bg: 'rgba(255, 195, 0, 0.15)',
-                    py={1.5}
+                    transform: 'translateY(-50%) scale(1.05)',
-                    borderRadius="full"
+                } : {}}
-                    bg="transparent"
+            >
-                    _hover={{
+                <Text
-                        bg: hoverBg,
+                    color={PROFESSIONAL_COLORS.gold[500]}
-                        transform: 'scale(1.05)',
+                    fontSize="md"
-                    }}
+                    fontWeight="bold"
-                    transition="background 0.3s, transform 0.2s"
+                    letterSpacing="wide"
+                    whiteSpace="nowrap"
+                    textShadow="0 0 20px rgba(255, 195, 0, 0.3)"
                 >
-                    <Text
+                    {currentKeyword}
-                        bgGradient={textColor}
+                </Text>
-                        bgClip="text"
+            </Box>
-                        fontSize="md"
+        </Tooltip>
-                        fontWeight="bold"
-                        letterSpacing="wide"
-                        whiteSpace="nowrap"
-                        textShadow="0 0 20px rgba(159, 122, 234, 0.3)"
-                    >
-                        {currentKeyword}
-                    </Text>
-                </MotionBox>
-            </AnimatePresence>
-        </Box>
     );
 };
 

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 }) => {
         <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}