87 lines
2.7 KiB
JavaScript
87 lines
2.7 KiB
JavaScript
// src/views/Community/components/EventCard/KeywordsCarousel.js
|
||
// Keywords标签组件（点击切换）
|
||
import React, { useState } from 'react';
|
||
import { Box, Text, Tooltip } from '@chakra-ui/react';
|
||
import { PROFESSIONAL_COLORS } from '../../../../constants/professionalTheme';
|
||
|
||
/**
|
||
* Keywords标签组件（点击切换下一个）
|
||
* @param {Array} keywords - 关键词数组
|
||
* @param {Function} onKeywordClick - 关键词点击回调
|
||
*/
|
||
const KeywordsCarousel = ({
|
||
keywords = [],
|
||
onKeywordClick
|
||
}) => {
|
||
const [currentIndex, setCurrentIndex] = useState(0);
|
||
|
||
// 如果没有keywords，不渲染
|
||
if (!keywords || keywords.length === 0) {
|
||
return null;
|
||
}
|
||
|
||
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%)"
|
||
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)"
|
||
>
|
||
{typeof currentKeyword === 'string'
|
||
? currentKeyword
|
||
: currentKeyword?.concept || '未知标签'}
|
||
</Text>
|
||
</Box>
|
||
</Tooltip>
|
||
);
|
||
};
|
||
|
||
export default KeywordsCarousel;
|