style(HotSectorsRanking): 统一与关注股票面板 UI 风格
- 移除外层装饰盒子（背景、边框、毛玻璃效果） - 标题行添加 TrendingUp 图标 + 数量显示 - 列表项添加 hover 效果和 cursor: pointer - 滚动条样式与 WatchlistPanel 一致 - 涨跌幅统一为 2 位小数 - 新增 onSectorClick 回调支持板块点击 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude <noreply@anthropic.com>
This commit is contained in:
zdl
@@ -1,76 +1,113 @@
|
||||
// 热门板块排行组件
|
||||
// 热门板块排行组件 - 紧凑版（与 WatchlistPanel 风格保持一致）
|
||||
import React from 'react';
|
||||
import { Box, Text, VStack, HStack } from '@chakra-ui/react';
|
||||
import { Box, Text, VStack, HStack, Icon } from '@chakra-ui/react';
|
||||
import { TrendingUp } from 'lucide-react';
|
||||
import MiniTrendLine from './MiniTrendLine';
|
||||
|
||||
const HotSectorsRanking = ({ sectors = [], title = '热门板块排行' }) => {
|
||||
const HotSectorsRanking = ({ sectors = [], title = '热门板块', onSectorClick }) => {
|
||||
// 默认数据
|
||||
const defaultSectors = [
|
||||
{ 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: 3, name: '生物医药', change: 1.3, trend: [100, 101, 100, 102, 101, 102] },
|
||||
{ rank: 4, name: '消费科技', change: 1.2, trend: [100, 100, 101, 100, 102, 102] },
|
||||
{ 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;
|
||||
|
||||
return (
|
||||
<Box
|
||||
bg="rgba(26, 26, 46, 0.7)"
|
||||
borderRadius="lg"
|
||||
p={3}
|
||||
minW="180px"
|
||||
border="1px solid"
|
||||
borderColor="rgba(212, 175, 55, 0.15)"
|
||||
backdropFilter="blur(8px)"
|
||||
>
|
||||
<VStack align="stretch" spacing={2}>
|
||||
<Text fontSize="xs" color="rgba(255, 255, 255, 0.6)" fontWeight="medium">
|
||||
{title}
|
||||
</Text>
|
||||
<Box>
|
||||
{/* 标题 - 与 WatchlistPanel 风格一致 */}
|
||||
<HStack justify="space-between" mb={2}>
|
||||
<HStack spacing={1}>
|
||||
<Icon as={TrendingUp} boxSize={3.5} color="rgba(34, 197, 94, 0.9)" />
|
||||
<Text fontSize="xs" fontWeight="bold" color="rgba(255, 255, 255, 0.9)">
|
||||
{title}
|
||||
</Text>
|
||||
<Text fontSize="xs" color="rgba(255, 255, 255, 0.5)">
|
||||
({data.length})
|
||||
</Text>
|
||||
</HStack>
|
||||
</HStack>
|
||||
|
||||
{/* 排行列表 */}
|
||||
<VStack spacing={1.5} align="stretch">
|
||||
{data.map((sector, index) => (
|
||||
<HStack key={index} justify="space-between" fontSize="xs">
|
||||
{/* 排名 */}
|
||||
<HStack spacing={2} flex={1}>
|
||||
<Text
|
||||
color={index < 3 ? 'rgba(212, 175, 55, 0.9)' : 'rgba(255, 255, 255, 0.5)'}
|
||||
fontWeight={index < 3 ? 'bold' : 'normal'}
|
||||
w="16px"
|
||||
>
|
||||
{sector.rank}
|
||||
</Text>
|
||||
<Text color="rgba(255, 255, 255, 0.85)" noOfLines={1}>
|
||||
{sector.name}
|
||||
</Text>
|
||||
</HStack>
|
||||
{/* 板块列表 - 固定高度可滚动 */}
|
||||
<Box
|
||||
maxH="200px"
|
||||
overflowY="auto"
|
||||
css={{
|
||||
'&::-webkit-scrollbar': { width: '0px' },
|
||||
'&:hover::-webkit-scrollbar': { width: '4px' },
|
||||
'&::-webkit-scrollbar-track': { background: 'transparent' },
|
||||
'&::-webkit-scrollbar-thumb': {
|
||||
background: 'rgba(255, 255, 255, 0.2)',
|
||||
borderRadius: '2px',
|
||||
},
|
||||
}}
|
||||
>
|
||||
<VStack spacing={1} align="stretch">
|
||||
{data.map((sector, index) => {
|
||||
const isUp = sector.change >= 0;
|
||||
const changeColor = isUp ? '#EF4444' : '#22C55E';
|
||||
|
||||
{/* 趋势线 */}
|
||||
<Box w="40px">
|
||||
<MiniTrendLine
|
||||
data={sector.trend}
|
||||
color={sector.change >= 0 ? 'red' : 'green'}
|
||||
width={40}
|
||||
height={14}
|
||||
/>
|
||||
</Box>
|
||||
|
||||
{/* 涨跌幅 */}
|
||||
<Text
|
||||
color={sector.change >= 0 ? '#EF4444' : '#22C55E'}
|
||||
fontWeight="medium"
|
||||
w="50px"
|
||||
textAlign="right"
|
||||
return (
|
||||
<HStack
|
||||
key={index}
|
||||
py={1.5}
|
||||
px={2}
|
||||
justify="space-between"
|
||||
cursor="pointer"
|
||||
borderRadius="md"
|
||||
_hover={{ bg: 'rgba(255, 255, 255, 0.05)' }}
|
||||
onClick={() => onSectorClick?.(sector)}
|
||||
>
|
||||
{sector.change >= 0 ? '+' : ''}{sector.change.toFixed(1)}%
|
||||
</Text>
|
||||
</HStack>
|
||||
))}
|
||||
{/* 排名 + 名称 */}
|
||||
<HStack spacing={2} flex={1} minW={0}>
|
||||
<Text
|
||||
fontSize="xs"
|
||||
color={index < 3 ? 'rgba(212, 175, 55, 0.9)' : 'rgba(255, 255, 255, 0.4)'}
|
||||
fontWeight={index < 3 ? 'bold' : 'normal'}
|
||||
w="14px"
|
||||
flexShrink={0}
|
||||
>
|
||||
{sector.rank || index + 1}
|
||||
</Text>
|
||||
<Text
|
||||
fontSize="xs"
|
||||
fontWeight="medium"
|
||||
color="rgba(255, 255, 255, 0.9)"
|
||||
noOfLines={1}
|
||||
>
|
||||
{sector.name}
|
||||
</Text>
|
||||
</HStack>
|
||||
|
||||
{/* 趋势线 + 涨跌幅 */}
|
||||
<HStack spacing={2}>
|
||||
<Box w="36px" flexShrink={0}>
|
||||
<MiniTrendLine
|
||||
data={sector.trend}
|
||||
color={isUp ? 'red' : 'green'}
|
||||
width={36}
|
||||
height={12}
|
||||
/>
|
||||
</Box>
|
||||
<Text
|
||||
fontSize="xs"
|
||||
fontWeight="bold"
|
||||
color={changeColor}
|
||||
w="48px"
|
||||
textAlign="right"
|
||||
flexShrink={0}
|
||||
>
|
||||
{isUp ? '+' : ''}{sector.change.toFixed(2)}%
|
||||
</Text>
|
||||
</HStack>
|
||||
</HStack>
|
||||
);
|
||||
})}
|
||||
</VStack>
|
||||
</VStack>
|
||||
</Box>
|
||||
</Box>
|
||||
);
|
||||
};
|
||||
|
||||
Reference in New Issue
Block a user