feat(HotSectorsRanking): 支持板块/概念类型切换
- 新增 type 属性区分 sector/concept - 添加默认概念数据 - 根据类型切换图标 (TrendingUp/Flame) 和颜色 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude <noreply@anthropic.com>
This commit is contained in:
@@ -1,11 +1,11 @@
|
|||||||
// 热门板块排行组件 - 紧凑版(与 WatchlistPanel 风格保持一致)
|
// 热门板块/概念排行组件 - 紧凑版(与 WatchlistPanel 风格保持一致)
|
||||||
import React from 'react';
|
import React from 'react';
|
||||||
import { Box, Text, VStack, HStack, Icon } from '@chakra-ui/react';
|
import { Box, Text, VStack, HStack, Icon } from '@chakra-ui/react';
|
||||||
import { TrendingUp } from 'lucide-react';
|
import { TrendingUp, Flame } from 'lucide-react';
|
||||||
import MiniTrendLine from './MiniTrendLine';
|
import MiniTrendLine from './MiniTrendLine';
|
||||||
|
|
||||||
const HotSectorsRanking = ({ sectors = [], title = '热门板块', onSectorClick }) => {
|
const HotSectorsRanking = ({ sectors = [], title = '热门板块', type = 'sector', onSectorClick }) => {
|
||||||
// 默认数据
|
// 默认板块数据
|
||||||
const defaultSectors = [
|
const defaultSectors = [
|
||||||
{ rank: 1, name: '人工智能', change: 3.2, trend: [100, 102, 101, 104, 103, 106] },
|
{ rank: 1, name: '人工智能', change: 3.2, trend: [100, 102, 101, 104, 103, 106] },
|
||||||
{ rank: 2, name: '新能源车', change: 1.8, trend: [100, 99, 101, 102, 101, 103] },
|
{ rank: 2, name: '新能源车', change: 1.8, trend: [100, 99, 101, 102, 101, 103] },
|
||||||
@@ -14,14 +14,28 @@ const HotSectorsRanking = ({ sectors = [], title = '热门板块', onSectorClick
|
|||||||
{ rank: 5, name: '芯片半导体', change: 0.4, trend: [100, 100, 100, 101, 100, 101] },
|
{ rank: 5, name: '芯片半导体', change: 0.4, trend: [100, 100, 100, 101, 100, 101] },
|
||||||
];
|
];
|
||||||
|
|
||||||
const data = sectors.length > 0 ? sectors : defaultSectors;
|
// 默认概念数据
|
||||||
|
const defaultConcepts = [
|
||||||
|
{ rank: 1, name: '锂电池', change: 4.5, trend: [100, 103, 105, 104, 108, 110] },
|
||||||
|
{ rank: 2, name: '人工智能', change: 3.8, trend: [100, 102, 104, 103, 106, 108] },
|
||||||
|
{ rank: 3, name: '机器人', change: 2.9, trend: [100, 101, 103, 102, 104, 106] },
|
||||||
|
{ rank: 4, name: '国企改革', change: 2.1, trend: [100, 101, 102, 101, 103, 104] },
|
||||||
|
{ rank: 5, name: '新能源', change: 1.6, trend: [100, 100, 101, 102, 101, 103] },
|
||||||
|
];
|
||||||
|
|
||||||
|
const defaultData = type === 'concept' ? defaultConcepts : defaultSectors;
|
||||||
|
const data = sectors.length > 0 ? sectors : defaultData;
|
||||||
|
|
||||||
|
// 根据类型选择图标和颜色
|
||||||
|
const IconComponent = type === 'concept' ? Flame : TrendingUp;
|
||||||
|
const iconColor = type === 'concept' ? 'rgba(139, 92, 246, 0.9)' : 'rgba(34, 197, 94, 0.9)';
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<Box>
|
<Box>
|
||||||
{/* 标题 - 与 WatchlistPanel 风格一致 */}
|
{/* 标题 - 与 WatchlistPanel 风格一致 */}
|
||||||
<HStack justify="space-between" mb={2}>
|
<HStack justify="space-between" mb={2}>
|
||||||
<HStack spacing={1}>
|
<HStack spacing={1}>
|
||||||
<Icon as={TrendingUp} boxSize={3.5} color="rgba(34, 197, 94, 0.9)" />
|
<Icon as={IconComponent} boxSize={3.5} color={iconColor} />
|
||||||
<Text fontSize="xs" fontWeight="bold" color="rgba(255, 255, 255, 0.9)">
|
<Text fontSize="xs" fontWeight="bold" color="rgba(255, 255, 255, 0.9)">
|
||||||
{title}
|
{title}
|
||||||
</Text>
|
</Text>
|
||||||
|
|||||||
Reference in New Issue
Block a user