update pay ui
This commit is contained in:
@@ -38,14 +38,10 @@ import {
|
|||||||
import {
|
import {
|
||||||
FaArrowUp,
|
FaArrowUp,
|
||||||
FaArrowDown,
|
FaArrowDown,
|
||||||
FaFire,
|
|
||||||
FaChartLine,
|
FaChartLine,
|
||||||
FaNewspaper,
|
FaNewspaper,
|
||||||
FaRocket,
|
FaRocket,
|
||||||
FaBolt,
|
|
||||||
FaEye,
|
|
||||||
FaCrown,
|
FaCrown,
|
||||||
FaThermometerHalf,
|
|
||||||
} from 'react-icons/fa';
|
} from 'react-icons/fa';
|
||||||
import { BsLightningFill, BsGraphUp, BsGraphDown } from 'react-icons/bs';
|
import { BsLightningFill, BsGraphUp, BsGraphDown } from 'react-icons/bs';
|
||||||
|
|
||||||
@@ -153,13 +149,6 @@ const ConceptStatsPanel = ({ apiBaseUrl, onConceptClick }) => {
|
|||||||
{ name: '钢铁冶炼', change_pct: -4.21, stock_count: 28, news_count: 9 },
|
{ name: '钢铁冶炼', change_pct: -4.21, stock_count: 28, news_count: 9 },
|
||||||
{ name: '纺织服装', change_pct: -3.98, stock_count: 15, news_count: 4 },
|
{ name: '纺织服装', change_pct: -3.98, stock_count: 15, news_count: 4 },
|
||||||
],
|
],
|
||||||
active_concepts: [
|
|
||||||
{ name: '人工智能', news_count: 89, report_count: 15, total_mentions: 104 },
|
|
||||||
{ name: '芯片概念', news_count: 76, report_count: 12, total_mentions: 88 },
|
|
||||||
{ name: '新能源汽车', news_count: 65, report_count: 18, total_mentions: 83 },
|
|
||||||
{ name: '生物医药', news_count: 54, report_count: 9, total_mentions: 63 },
|
|
||||||
{ name: '量子科技', news_count: 41, report_count: 7, total_mentions: 48 },
|
|
||||||
],
|
|
||||||
volatile_concepts: [
|
volatile_concepts: [
|
||||||
{ name: '区块链', volatility: 23.45, avg_change: 3.21, max_change: 12.34 },
|
{ name: '区块链', volatility: 23.45, avg_change: 3.21, max_change: 12.34 },
|
||||||
{ name: '元宇宙', volatility: 21.87, avg_change: 2.98, max_change: 11.76 },
|
{ name: '元宇宙', volatility: 21.87, avg_change: 2.98, max_change: 11.76 },
|
||||||
@@ -453,89 +442,6 @@ const ConceptStatsPanel = ({ apiBaseUrl, onConceptClick }) => {
|
|||||||
</Flex>
|
</Flex>
|
||||||
),
|
),
|
||||||
},
|
},
|
||||||
{
|
|
||||||
label: '活跃榜',
|
|
||||||
icon: FaFire,
|
|
||||||
color: 'orange',
|
|
||||||
data: statsData.active_concepts,
|
|
||||||
renderItem: (item, index) => (
|
|
||||||
<Flex
|
|
||||||
justify="space-between"
|
|
||||||
align="center"
|
|
||||||
p={3}
|
|
||||||
borderRadius="xl"
|
|
||||||
bg={index < 3 ? 'rgba(251, 146, 60, 0.15)' : 'whiteAlpha.50'}
|
|
||||||
border="1px solid"
|
|
||||||
borderColor={index < 3 ? 'orange.500' : 'whiteAlpha.100'}
|
|
||||||
_hover={{
|
|
||||||
transform: 'translateY(-1px)',
|
|
||||||
shadow: 'md',
|
|
||||||
cursor: 'pointer',
|
|
||||||
bg: index < 3 ? 'rgba(251, 146, 60, 0.25)' : 'whiteAlpha.100'
|
|
||||||
}}
|
|
||||||
transition="all 0.2s"
|
|
||||||
onClick={() => onConceptClick?.(null, item.name)}
|
|
||||||
>
|
|
||||||
<HStack spacing={3} flex={1}>
|
|
||||||
<Box position="relative">
|
|
||||||
<Badge
|
|
||||||
bg={index === 0 ? 'orange.500' : index < 3 ? 'yellow.500' : 'whiteAlpha.200'}
|
|
||||||
color="white"
|
|
||||||
borderRadius="full"
|
|
||||||
minW="24px"
|
|
||||||
h="24px"
|
|
||||||
textAlign="center"
|
|
||||||
fontSize="xs"
|
|
||||||
fontWeight="bold"
|
|
||||||
display="flex"
|
|
||||||
alignItems="center"
|
|
||||||
justifyContent="center"
|
|
||||||
>
|
|
||||||
{index + 1}
|
|
||||||
</Badge>
|
|
||||||
{index === 0 && (
|
|
||||||
<Icon
|
|
||||||
as={FaFire}
|
|
||||||
position="absolute"
|
|
||||||
top="-8px"
|
|
||||||
right="-8px"
|
|
||||||
color="orange.400"
|
|
||||||
boxSize={3}
|
|
||||||
/>
|
|
||||||
)}
|
|
||||||
</Box>
|
|
||||||
<VStack align="start" spacing={0} flex={1}>
|
|
||||||
<Text fontSize="sm" fontWeight="bold" noOfLines={1} color="white">
|
|
||||||
{item.name}
|
|
||||||
</Text>
|
|
||||||
<HStack spacing={2} fontSize="xs" color="whiteAlpha.600">
|
|
||||||
<HStack spacing={1}>
|
|
||||||
<Icon as={FaNewspaper} boxSize={2.5} />
|
|
||||||
<Text>{item.news_count}</Text>
|
|
||||||
</HStack>
|
|
||||||
<Text>·</Text>
|
|
||||||
<HStack spacing={1}>
|
|
||||||
<Icon as={FaEye} boxSize={2.5} />
|
|
||||||
<Text>{item.report_count}</Text>
|
|
||||||
</HStack>
|
|
||||||
</HStack>
|
|
||||||
</VStack>
|
|
||||||
</HStack>
|
|
||||||
<Badge
|
|
||||||
bg="orange.500"
|
|
||||||
color="white"
|
|
||||||
borderRadius="lg"
|
|
||||||
fontSize="xs"
|
|
||||||
fontWeight="bold"
|
|
||||||
px={2}
|
|
||||||
py={1}
|
|
||||||
>
|
|
||||||
<Icon as={FaFire} boxSize={2} mr={1} />
|
|
||||||
{item.total_mentions}
|
|
||||||
</Badge>
|
|
||||||
</Flex>
|
|
||||||
),
|
|
||||||
},
|
|
||||||
{
|
{
|
||||||
label: '波动榜',
|
label: '波动榜',
|
||||||
icon: BsLightningFill,
|
icon: BsLightningFill,
|
||||||
@@ -879,7 +785,7 @@ const ConceptStatsPanel = ({ apiBaseUrl, onConceptClick }) => {
|
|||||||
<Tabs
|
<Tabs
|
||||||
index={activeTab}
|
index={activeTab}
|
||||||
onChange={(index) => {
|
onChange={(index) => {
|
||||||
const tabNames = ['涨幅榜', '跌幅榜', '活跃榜', '波动榜', '连涨榜'];
|
const tabNames = ['涨幅榜', '跌幅榜', '波动榜', '连涨榜'];
|
||||||
// 🎯 追踪Tab切换
|
// 🎯 追踪Tab切换
|
||||||
trackTabChanged(index, tabNames[index]);
|
trackTabChanged(index, tabNames[index]);
|
||||||
setActiveTab(index);
|
setActiveTab(index);
|
||||||
|
|||||||
@@ -802,65 +802,28 @@ const HierarchyView = ({
|
|||||||
right={isFullscreen ? 0 : 'auto'}
|
right={isFullscreen ? 0 : 'auto'}
|
||||||
bottom={isFullscreen ? 0 : 'auto'}
|
bottom={isFullscreen ? 0 : 'auto'}
|
||||||
zIndex={isFullscreen ? 1000 : 'auto'}
|
zIndex={isFullscreen ? 1000 : 'auto'}
|
||||||
bg="slate.950"
|
bg={isFullscreen ? 'slate.950' : 'transparent'}
|
||||||
bgGradient="linear(to-br, gray.900, slate.900, gray.900)"
|
bgGradient={isFullscreen ? 'linear(to-br, gray.900, slate.900, gray.900)' : undefined}
|
||||||
p={{ base: 3, md: 5 }}
|
p={{ base: 0, md: 0 }}
|
||||||
borderRadius={isFullscreen ? '0' : '3xl'}
|
borderRadius={isFullscreen ? '0' : '0'}
|
||||||
overflow={isFullscreen ? 'auto' : 'hidden'}
|
overflow={isFullscreen ? 'auto' : 'visible'}
|
||||||
minH="500px"
|
minH="auto"
|
||||||
>
|
>
|
||||||
{/* 极光背景 */}
|
{/* 极光背景 - 仅全屏时显示 */}
|
||||||
<AuroraBackground />
|
{isFullscreen && <AuroraBackground />}
|
||||||
|
|
||||||
{/* 内容层 */}
|
{/* 内容层 */}
|
||||||
<Box position="relative" zIndex={1}>
|
<Box position="relative" zIndex={1}>
|
||||||
{/* 工具栏 */}
|
{/* 简化的工具栏 - 仅显示功能按钮 */}
|
||||||
<Flex
|
<Flex
|
||||||
justify="space-between"
|
justify="flex-end"
|
||||||
align="center"
|
align="center"
|
||||||
mb={5}
|
mb={4}
|
||||||
flexWrap="wrap"
|
gap={2}
|
||||||
gap={3}
|
|
||||||
>
|
>
|
||||||
<HStack spacing={3}>
|
|
||||||
<Box
|
|
||||||
p={2}
|
|
||||||
bg="whiteAlpha.100"
|
|
||||||
borderRadius="xl"
|
|
||||||
backdropFilter="blur(10px)"
|
|
||||||
border="1px solid"
|
|
||||||
borderColor="whiteAlpha.200"
|
|
||||||
>
|
|
||||||
<Icon as={FaLayerGroup} color="purple.300" boxSize={5} />
|
|
||||||
</Box>
|
|
||||||
<VStack align="start" spacing={0}>
|
|
||||||
<Text fontSize="lg" fontWeight="bold" color="white">
|
|
||||||
{getCurrentTitle()}
|
|
||||||
</Text>
|
|
||||||
<HStack spacing={2}>
|
|
||||||
<Text fontSize="xs" color="whiteAlpha.600">
|
|
||||||
{getLevelDesc()} · {currentData.length} 项
|
|
||||||
</Text>
|
|
||||||
{tradeDate && (
|
|
||||||
<Badge
|
|
||||||
bg="blue.500"
|
|
||||||
color="white"
|
|
||||||
fontSize="xs"
|
|
||||||
px={2}
|
|
||||||
borderRadius="full"
|
|
||||||
boxShadow="0 0 10px rgba(59, 130, 246, 0.5)"
|
|
||||||
>
|
|
||||||
{tradeDate}
|
|
||||||
</Badge>
|
|
||||||
)}
|
|
||||||
</HStack>
|
|
||||||
</VStack>
|
|
||||||
{priceLoading && (
|
{priceLoading && (
|
||||||
<Spinner size="sm" color="purple.300" />
|
<Spinner size="sm" color="purple.300" mr={2} />
|
||||||
)}
|
)}
|
||||||
</HStack>
|
|
||||||
|
|
||||||
<HStack spacing={2}>
|
|
||||||
<Tooltip label="刷新涨跌幅" placement="top">
|
<Tooltip label="刷新涨跌幅" placement="top">
|
||||||
<IconButton
|
<IconButton
|
||||||
size="sm"
|
size="sm"
|
||||||
@@ -889,7 +852,6 @@ const HierarchyView = ({
|
|||||||
aria-label={isFullscreen ? '退出全屏' : '全屏'}
|
aria-label={isFullscreen ? '退出全屏' : '全屏'}
|
||||||
/>
|
/>
|
||||||
</Tooltip>
|
</Tooltip>
|
||||||
</HStack>
|
|
||||||
</Flex>
|
</Flex>
|
||||||
|
|
||||||
{/* 面包屑导航 */}
|
{/* 面包屑导航 */}
|
||||||
@@ -967,38 +929,6 @@ const HierarchyView = ({
|
|||||||
))}
|
))}
|
||||||
</SimpleGrid>
|
</SimpleGrid>
|
||||||
|
|
||||||
{/* 统计信息 */}
|
|
||||||
<Flex
|
|
||||||
justify="center"
|
|
||||||
mt={6}
|
|
||||||
gap={3}
|
|
||||||
flexWrap="wrap"
|
|
||||||
>
|
|
||||||
<Badge
|
|
||||||
bg="purple.500"
|
|
||||||
color="white"
|
|
||||||
px={4}
|
|
||||||
py={2}
|
|
||||||
borderRadius="full"
|
|
||||||
fontSize="sm"
|
|
||||||
boxShadow="0 0 20px rgba(139, 92, 246, 0.4)"
|
|
||||||
>
|
|
||||||
当前显示 {currentData.length} 个{getLevelDesc()}
|
|
||||||
</Badge>
|
|
||||||
{currentLevel === 'lv1' && (
|
|
||||||
<Badge
|
|
||||||
bg="cyan.500"
|
|
||||||
color="white"
|
|
||||||
px={4}
|
|
||||||
py={2}
|
|
||||||
borderRadius="full"
|
|
||||||
fontSize="sm"
|
|
||||||
boxShadow="0 0 20px rgba(6, 182, 212, 0.4)"
|
|
||||||
>
|
|
||||||
共 {hierarchy.reduce((acc, h) => acc + h.concept_count, 0)} 个概念
|
|
||||||
</Badge>
|
|
||||||
)}
|
|
||||||
</Flex>
|
|
||||||
</Box>
|
</Box>
|
||||||
</Box>
|
</Box>
|
||||||
);
|
);
|
||||||
|
|||||||
Reference in New Issue
Block a user