update ui

2025-11-13 23:44:37 +08:00
parent 6452869968
commit 1773c571ab
3 changed files with 82 additions and 87 deletions
--- 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);
--- 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 (
-        <Box
-            position="absolute"
-            right={4}
-            top="50%"
-            transform="translateY(-50%)"
-            onMouseEnter={() => setIsPaused(true)}
-            onMouseLeave={() => setIsPaused(false)}
-            pointerEvents="auto"
-            zIndex={1}
+        <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"
        >
-            <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);
-                    }}
-                    px={3}
-                    py={1.5}
-                    borderRadius="full"
-                    bg="transparent"
-                    _hover={{
-                        bg: hoverBg,
-                        transform: 'scale(1.05)',
-                    }}
-                    transition="background 0.3s, transform 0.2s"
+            <Box
+                position="absolute"
+                right={4}
+                top="50%"
+                transform="translateY(-50%)"
+                pointerEvents="auto"
+                zIndex={1}
+                cursor={keywords.length > 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)',
+                } : {}}
+            >
+                <Text
+                    color={PROFESSIONAL_COLORS.gold[500]}
+                    fontSize="md"
+                    fontWeight="bold"
+                    letterSpacing="wide"
+                    whiteSpace="nowrap"
+                    textShadow="0 0 20px rgba(255, 195, 0, 0.3)"
                >
-                    <Text
-                        bgGradient={textColor}
-                        bgClip="text"
-                        fontSize="md"
-                        fontWeight="bold"
-                        letterSpacing="wide"
-                        whiteSpace="nowrap"
-                        textShadow="0 0 20px rgba(159, 122, 234, 0.3)"
-                    >
-                        {currentKeyword}
-                    </Text>
-                </MotionBox>
-            </AnimatePresence>
-        </Box>
+                    {currentKeyword}
+                </Text>
+            </Box>
+        </Tooltip>
    );
 };

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