123 lines
3.7 KiB
JavaScript
123 lines
3.7 KiB
JavaScript
// src/views/Community/components/DynamicNewsDetail/RelatedConceptsSection/index.js
|
||
// 相关概念区组件（主组件）
|
||
|
||
import React, { useState } from 'react';
|
||
import {
|
||
Box,
|
||
SimpleGrid,
|
||
Flex,
|
||
Button,
|
||
Collapse,
|
||
Heading,
|
||
useColorModeValue,
|
||
} from '@chakra-ui/react';
|
||
import { ChevronDownIcon, ChevronUpIcon } from '@chakra-ui/icons';
|
||
import { useNavigate } from 'react-router-dom';
|
||
import SimpleConceptCard from './SimpleConceptCard';
|
||
import DetailedConceptCard from './DetailedConceptCard';
|
||
import TradingDateInfo from './TradingDateInfo';
|
||
|
||
/**
|
||
* 相关概念区组件
|
||
* @param {Object} props
|
||
* @param {Array<Object>} props.keywords - 相关概念数组
|
||
* - name: 概念名称
|
||
* - stock_count: 相关股票数量
|
||
* - relevance: 相关度（0-100）
|
||
* @param {string} props.effectiveTradingDate - 有效交易日期（涨跌幅数据日期）
|
||
* @param {string|Object} props.eventTime - 事件发生时间
|
||
*/
|
||
const RelatedConceptsSection = ({ keywords, effectiveTradingDate, eventTime }) => {
|
||
const [isExpanded, setIsExpanded] = useState(false);
|
||
const navigate = useNavigate();
|
||
|
||
// 颜色配置
|
||
const sectionBg = useColorModeValue('gray.50', 'gray.750');
|
||
const headingColor = useColorModeValue('gray.700', 'gray.200');
|
||
|
||
// 如果没有关键词，不渲染
|
||
if (!keywords || keywords.length === 0) {
|
||
return null;
|
||
}
|
||
|
||
/**
|
||
* 根据相关度获取颜色（浅色背景 + 深色文字）
|
||
* @param {number} relevance - 相关度（0-100）
|
||
* @returns {Object} 包含背景色和文字色
|
||
*/
|
||
const getRelevanceColor = (relevance) => {
|
||
if (relevance >= 90) {
|
||
return { bg: 'purple.50', color: 'purple.800' }; // 极高相关
|
||
} else if (relevance >= 80) {
|
||
return { bg: 'pink.50', color: 'pink.800' }; // 高相关
|
||
} else if (relevance >= 70) {
|
||
return { bg: 'orange.50', color: 'orange.800' }; // 中等相关
|
||
} else {
|
||
return { bg: 'gray.100', color: 'gray.700' }; // 低相关
|
||
}
|
||
};
|
||
|
||
/**
|
||
* 处理概念点击
|
||
* @param {Object} concept - 概念对象
|
||
*/
|
||
const handleConceptClick = (concept) => {
|
||
// 跳转到概念详情页
|
||
navigate(`/concept/${concept.name}`);
|
||
};
|
||
|
||
return (
|
||
<Box bg={sectionBg} p={3} borderRadius="md">
|
||
{/* 标题栏 */}
|
||
<Flex justify="space-between" align="center" mb={3}>
|
||
<Heading size="sm" color={headingColor}>
|
||
相关概念
|
||
</Heading>
|
||
<Button
|
||
size="sm"
|
||
variant="ghost"
|
||
colorScheme="blue"
|
||
rightIcon={isExpanded ? <ChevronUpIcon /> : <ChevronDownIcon />}
|
||
onClick={() => setIsExpanded(!isExpanded)}
|
||
>
|
||
{isExpanded ? '收起' : '查看详细描述'}
|
||
</Button>
|
||
</Flex>
|
||
|
||
{/* 简单模式：横向卡片列表（总是显示） */}
|
||
<Flex gap={2} flexWrap="wrap" mb={isExpanded ? 3 : 0}>
|
||
{keywords.map((concept, index) => (
|
||
<SimpleConceptCard
|
||
key={index}
|
||
concept={concept}
|
||
onClick={handleConceptClick}
|
||
getRelevanceColor={getRelevanceColor}
|
||
/>
|
||
))}
|
||
</Flex>
|
||
|
||
{/* 详细模式：卡片网格（可折叠） */}
|
||
<Collapse in={isExpanded} animateOpacity>
|
||
{/* 交易日期信息 */}
|
||
<TradingDateInfo
|
||
effectiveTradingDate={effectiveTradingDate}
|
||
eventTime={eventTime}
|
||
/>
|
||
|
||
{/* 详细概念卡片网格 */}
|
||
<SimpleGrid columns={{ base: 1, md: 2 }} spacing={4}>
|
||
{keywords.map((concept, index) => (
|
||
<DetailedConceptCard
|
||
key={index}
|
||
concept={concept}
|
||
onClick={handleConceptClick}
|
||
/>
|
||
))}
|
||
</SimpleGrid>
|
||
</Collapse>
|
||
</Box>
|
||
);
|
||
};
|
||
|
||
export default RelatedConceptsSection;
|