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 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';
|
import MiniTrendLine from './MiniTrendLine';
|
||||||
|
|
||||||
const HotSectorsRanking = ({ sectors = [], title = '热门板块排行' }) => {
|
const HotSectorsRanking = ({ sectors = [], title = '热门板块', 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] },
|
||||||
{ rank: 3, name: '生物医药', change: 1.3, trend: [100, 101, 100, 102, 101, 102] },
|
{ 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: 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;
|
const data = sectors.length > 0 ? sectors : defaultSectors;
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<Box
|
<Box>
|
||||||
bg="rgba(26, 26, 46, 0.7)"
|
{/* 标题 - 与 WatchlistPanel 风格一致 */}
|
||||||
borderRadius="lg"
|
<HStack justify="space-between" mb={2}>
|
||||||
p={3}
|
<HStack spacing={1}>
|
||||||
minW="180px"
|
<Icon as={TrendingUp} boxSize={3.5} color="rgba(34, 197, 94, 0.9)" />
|
||||||
border="1px solid"
|
<Text fontSize="xs" fontWeight="bold" color="rgba(255, 255, 255, 0.9)">
|
||||||
borderColor="rgba(212, 175, 55, 0.15)"
|
{title}
|
||||||
backdropFilter="blur(8px)"
|
</Text>
|
||||||
>
|
<Text fontSize="xs" color="rgba(255, 255, 255, 0.5)">
|
||||||
<VStack align="stretch" spacing={2}>
|
({data.length})
|
||||||
<Text fontSize="xs" color="rgba(255, 255, 255, 0.6)" fontWeight="medium">
|
</Text>
|
||||||
{title}
|
</HStack>
|
||||||
</Text>
|
</HStack>
|
||||||
|
|
||||||
{/* 排行列表 */}
|
{/* 板块列表 - 固定高度可滚动 */}
|
||||||
<VStack spacing={1.5} align="stretch">
|
<Box
|
||||||
{data.map((sector, index) => (
|
maxH="200px"
|
||||||
<HStack key={index} justify="space-between" fontSize="xs">
|
overflowY="auto"
|
||||||
{/* 排名 */}
|
css={{
|
||||||
<HStack spacing={2} flex={1}>
|
'&::-webkit-scrollbar': { width: '0px' },
|
||||||
<Text
|
'&:hover::-webkit-scrollbar': { width: '4px' },
|
||||||
color={index < 3 ? 'rgba(212, 175, 55, 0.9)' : 'rgba(255, 255, 255, 0.5)'}
|
'&::-webkit-scrollbar-track': { background: 'transparent' },
|
||||||
fontWeight={index < 3 ? 'bold' : 'normal'}
|
'&::-webkit-scrollbar-thumb': {
|
||||||
w="16px"
|
background: 'rgba(255, 255, 255, 0.2)',
|
||||||
>
|
borderRadius: '2px',
|
||||||
{sector.rank}
|
},
|
||||||
</Text>
|
}}
|
||||||
<Text color="rgba(255, 255, 255, 0.85)" noOfLines={1}>
|
>
|
||||||
{sector.name}
|
<VStack spacing={1} align="stretch">
|
||||||
</Text>
|
{data.map((sector, index) => {
|
||||||
</HStack>
|
const isUp = sector.change >= 0;
|
||||||
|
const changeColor = isUp ? '#EF4444' : '#22C55E';
|
||||||
|
|
||||||
{/* 趋势线 */}
|
return (
|
||||||
<Box w="40px">
|
<HStack
|
||||||
<MiniTrendLine
|
key={index}
|
||||||
data={sector.trend}
|
py={1.5}
|
||||||
color={sector.change >= 0 ? 'red' : 'green'}
|
px={2}
|
||||||
width={40}
|
justify="space-between"
|
||||||
height={14}
|
cursor="pointer"
|
||||||
/>
|
borderRadius="md"
|
||||||
</Box>
|
_hover={{ bg: 'rgba(255, 255, 255, 0.05)' }}
|
||||||
|
onClick={() => onSectorClick?.(sector)}
|
||||||
{/* 涨跌幅 */}
|
|
||||||
<Text
|
|
||||||
color={sector.change >= 0 ? '#EF4444' : '#22C55E'}
|
|
||||||
fontWeight="medium"
|
|
||||||
w="50px"
|
|
||||||
textAlign="right"
|
|
||||||
>
|
>
|
||||||
{sector.change >= 0 ? '+' : ''}{sector.change.toFixed(1)}%
|
{/* 排名 + 名称 */}
|
||||||
</Text>
|
<HStack spacing={2} flex={1} minW={0}>
|
||||||
</HStack>
|
<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>
|
||||||
</VStack>
|
</Box>
|
||||||
</Box>
|
</Box>
|
||||||
);
|
);
|
||||||
};
|
};
|
||||||
|
|||||||
Reference in New Issue
Block a user