update ui

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>
     );
 };