update pay ui
This commit is contained in:
@@ -1,13 +1,12 @@
|
||||
/**
|
||||
* HierarchyView - 概念层级热力图视图
|
||||
*
|
||||
* 使用 CSS Grid + Chakra UI 实现热力图效果
|
||||
* Modern Spatial & Glassmorphism 设计风格
|
||||
* 特性：
|
||||
* 1. 炫酷的矩形热力图展示，涨红跌绿背景色
|
||||
* 2. 点击 lv1 进入 lv2，点击 lv2 进入 lv3，点击 lv3 进入具体概念
|
||||
* 3. 集成 /hierarchy/price 接口获取实时涨跌幅
|
||||
* 4. 每个分类有独特图标
|
||||
* 5. 支持面包屑导航返回上级
|
||||
* 1. 毛玻璃卡片 + 极光背景
|
||||
* 2. 涨红跌绿渐变色
|
||||
* 3. 支持 lv1 → lv2 → lv3 → leaf 四层钻取
|
||||
* 4. 集成 /hierarchy/price 接口（含 leaf_concepts）
|
||||
*/
|
||||
import React, { useState, useEffect, useCallback, useMemo } from 'react';
|
||||
import {
|
||||
@@ -48,7 +47,6 @@ import {
|
||||
FaCoins,
|
||||
FaHeartbeat,
|
||||
FaAtom,
|
||||
FaLightbulb,
|
||||
FaArrowUp,
|
||||
FaArrowDown,
|
||||
FaCubes,
|
||||
@@ -61,6 +59,7 @@ import {
|
||||
FaBatteryFull,
|
||||
FaSolarPanel,
|
||||
FaTags,
|
||||
FaExternalLinkAlt,
|
||||
} from 'react-icons/fa';
|
||||
import { logger } from '../../../utils/logger';
|
||||
|
||||
@@ -111,27 +110,36 @@ const LV2_ICONS = {
|
||||
'军贸出海': FaGlobe,
|
||||
};
|
||||
|
||||
// 根据涨跌幅获取背景色（统一涨红跌绿）
|
||||
const getChangeBgColor = (value) => {
|
||||
// 根据涨跌幅获取背景渐变色（涨红跌绿）
|
||||
const getChangeGradient = (value) => {
|
||||
if (value === null || value === undefined) {
|
||||
// 无数据时使用灰色
|
||||
return 'linear-gradient(135deg, #4B5563 0%, #6B7280 100%)';
|
||||
return 'linear-gradient(135deg, rgba(71, 85, 105, 0.6) 0%, rgba(100, 116, 139, 0.4) 100%)';
|
||||
}
|
||||
|
||||
// 涨跌幅越大，颜色越深 - 统一涨红跌绿
|
||||
if (value > 7) return 'linear-gradient(135deg, #7F1D1D 0%, #991B1B 100%)';
|
||||
if (value > 5) return 'linear-gradient(135deg, #991B1B 0%, #B91C1C 100%)';
|
||||
if (value > 3) return 'linear-gradient(135deg, #B91C1C 0%, #DC2626 100%)';
|
||||
if (value > 1) return 'linear-gradient(135deg, #DC2626 0%, #EF4444 100%)';
|
||||
if (value > 0) return 'linear-gradient(135deg, #EF4444 0%, #F87171 100%)';
|
||||
if (value < -7) return 'linear-gradient(135deg, #14532D 0%, #166534 100%)';
|
||||
if (value < -5) return 'linear-gradient(135deg, #166534 0%, #15803D 100%)';
|
||||
if (value < -3) return 'linear-gradient(135deg, #15803D 0%, #16A34A 100%)';
|
||||
if (value < -1) return 'linear-gradient(135deg, #16A34A 0%, #22C55E 100%)';
|
||||
if (value < 0) return 'linear-gradient(135deg, #22C55E 0%, #4ADE80 100%)';
|
||||
// 涨 - 红色系
|
||||
if (value > 7) return 'linear-gradient(135deg, rgba(153, 27, 27, 0.8) 0%, rgba(220, 38, 38, 0.6) 100%)';
|
||||
if (value > 5) return 'linear-gradient(135deg, rgba(185, 28, 28, 0.75) 0%, rgba(239, 68, 68, 0.55) 100%)';
|
||||
if (value > 3) return 'linear-gradient(135deg, rgba(220, 38, 38, 0.7) 0%, rgba(248, 113, 113, 0.5) 100%)';
|
||||
if (value > 1) return 'linear-gradient(135deg, rgba(239, 68, 68, 0.65) 0%, rgba(252, 165, 165, 0.45) 100%)';
|
||||
if (value > 0) return 'linear-gradient(135deg, rgba(248, 113, 113, 0.6) 0%, rgba(254, 202, 202, 0.4) 100%)';
|
||||
|
||||
// 跌 - 绿色系
|
||||
if (value < -7) return 'linear-gradient(135deg, rgba(20, 83, 45, 0.8) 0%, rgba(22, 101, 52, 0.6) 100%)';
|
||||
if (value < -5) return 'linear-gradient(135deg, rgba(22, 101, 52, 0.75) 0%, rgba(21, 128, 61, 0.55) 100%)';
|
||||
if (value < -3) return 'linear-gradient(135deg, rgba(21, 128, 61, 0.7) 0%, rgba(22, 163, 74, 0.5) 100%)';
|
||||
if (value < -1) return 'linear-gradient(135deg, rgba(22, 163, 74, 0.65) 0%, rgba(74, 222, 128, 0.45) 100%)';
|
||||
if (value < 0) return 'linear-gradient(135deg, rgba(34, 197, 94, 0.6) 0%, rgba(134, 239, 172, 0.4) 100%)';
|
||||
|
||||
// 平盘
|
||||
return 'linear-gradient(135deg, #4B5563 0%, #6B7280 100%)';
|
||||
return 'linear-gradient(135deg, rgba(71, 85, 105, 0.6) 0%, rgba(100, 116, 139, 0.4) 100%)';
|
||||
};
|
||||
|
||||
// 获取涨跌幅文字颜色
|
||||
const getChangeTextColor = (value) => {
|
||||
if (value === null || value === undefined) return 'gray.300';
|
||||
if (value > 0) return '#FCA5A5';
|
||||
if (value < 0) return '#86EFAC';
|
||||
return 'gray.300';
|
||||
};
|
||||
|
||||
// 格式化涨跌幅
|
||||
@@ -143,34 +151,90 @@ const formatChangePercent = (value) => {
|
||||
|
||||
// 获取图标
|
||||
const getIcon = (name, level) => {
|
||||
if (level === 'lv1') {
|
||||
return LV1_ICONS[name] || FaLayerGroup;
|
||||
}
|
||||
if (level === 'lv2') {
|
||||
return LV2_ICONS[name] || FaCubes;
|
||||
}
|
||||
if (level === 'lv3') {
|
||||
return FaCubes;
|
||||
}
|
||||
return FaTags; // 具体概念用标签图标
|
||||
if (level === 'lv1') return LV1_ICONS[name] || FaLayerGroup;
|
||||
if (level === 'lv2') return LV2_ICONS[name] || FaCubes;
|
||||
if (level === 'lv3') return FaCubes;
|
||||
return FaTags;
|
||||
};
|
||||
|
||||
// 从 API 返回的名称中提取纯名称（去掉 [一级] [二级] [三级] 前缀）
|
||||
// 从 API 返回的名称中提取纯名称
|
||||
const extractPureName = (apiName) => {
|
||||
if (!apiName) return '';
|
||||
return apiName.replace(/^\[(一级|二级|三级)\]\s*/, '');
|
||||
};
|
||||
|
||||
// 脉冲动画
|
||||
const pulseKeyframes = keyframes`
|
||||
0%, 100% { transform: scale(1); }
|
||||
50% { transform: scale(1.02); }
|
||||
// 呼吸动画
|
||||
const breatheKeyframes = keyframes`
|
||||
0%, 100% { opacity: 0.3; transform: scale(1); }
|
||||
50% { opacity: 0.5; transform: scale(1.05); }
|
||||
`;
|
||||
|
||||
// 浮动动画
|
||||
const floatKeyframes = keyframes`
|
||||
0%, 100% { transform: translateY(0); }
|
||||
50% { transform: translateY(-5px); }
|
||||
`;
|
||||
|
||||
/**
|
||||
* 单个热力图块组件
|
||||
* 极光背景组件
|
||||
*/
|
||||
const HeatmapBlock = ({ item, onClick, size = 'normal' }) => {
|
||||
const AuroraBackground = () => (
|
||||
<Box
|
||||
position="absolute"
|
||||
top={0}
|
||||
left={0}
|
||||
right={0}
|
||||
bottom={0}
|
||||
overflow="hidden"
|
||||
pointerEvents="none"
|
||||
zIndex={0}
|
||||
>
|
||||
{/* 紫色光斑 - 左上 */}
|
||||
<Box
|
||||
position="absolute"
|
||||
top="-20%"
|
||||
left="-10%"
|
||||
width="500px"
|
||||
height="500px"
|
||||
bg="purple.600"
|
||||
opacity={0.15}
|
||||
borderRadius="full"
|
||||
filter="blur(120px)"
|
||||
css={{ animation: `${breatheKeyframes} 8s ease-in-out infinite` }}
|
||||
/>
|
||||
{/* 蓝色光斑 - 右下 */}
|
||||
<Box
|
||||
position="absolute"
|
||||
bottom="-20%"
|
||||
right="-10%"
|
||||
width="450px"
|
||||
height="450px"
|
||||
bg="blue.500"
|
||||
opacity={0.12}
|
||||
borderRadius="full"
|
||||
filter="blur(100px)"
|
||||
css={{ animation: `${breatheKeyframes} 10s ease-in-out infinite 2s` }}
|
||||
/>
|
||||
{/* 青色光斑 - 中间 */}
|
||||
<Box
|
||||
position="absolute"
|
||||
top="40%"
|
||||
left="30%"
|
||||
width="300px"
|
||||
height="300px"
|
||||
bg="cyan.400"
|
||||
opacity={0.08}
|
||||
borderRadius="full"
|
||||
filter="blur(80px)"
|
||||
css={{ animation: `${breatheKeyframes} 12s ease-in-out infinite 4s` }}
|
||||
/>
|
||||
</Box>
|
||||
);
|
||||
|
||||
/**
|
||||
* 毛玻璃卡片组件
|
||||
*/
|
||||
const GlassCard = ({ item, onClick, size = 'normal' }) => {
|
||||
const hasChange = item.avg_change_pct !== null && item.avg_change_pct !== undefined;
|
||||
const isPositive = hasChange && item.avg_change_pct > 0;
|
||||
const isNegative = hasChange && item.avg_change_pct < 0;
|
||||
@@ -180,41 +244,64 @@ const HeatmapBlock = ({ item, onClick, size = 'normal' }) => {
|
||||
|
||||
// 根据 size 调整高度
|
||||
const heightMap = {
|
||||
large: { base: '140px', md: '160px' },
|
||||
normal: { base: '110px', md: '130px' },
|
||||
small: { base: '90px', md: '100px' },
|
||||
large: { base: '150px', md: '170px' },
|
||||
normal: { base: '120px', md: '140px' },
|
||||
small: { base: '100px', md: '110px' },
|
||||
};
|
||||
|
||||
// 是否可点击进入下一层
|
||||
const canDrillDown = item.level !== 'concept' && (item.children?.length > 0 || item.concepts?.length > 0);
|
||||
const isLeafConcept = item.level === 'concept';
|
||||
|
||||
return (
|
||||
<Box
|
||||
bg={getChangeBgColor(item.avg_change_pct)}
|
||||
borderRadius="xl"
|
||||
p={{ base: 3, md: 4 }}
|
||||
position="relative"
|
||||
minH={heightMap[size]}
|
||||
cursor="pointer"
|
||||
onClick={() => onClick(item)}
|
||||
position="relative"
|
||||
overflow="hidden"
|
||||
minH={heightMap[size]}
|
||||
transition="all 0.3s cubic-bezier(0.4, 0, 0.2, 1)"
|
||||
boxShadow="0 4px 15px rgba(0, 0, 0, 0.2)"
|
||||
transition="all 0.4s cubic-bezier(0.4, 0, 0.2, 1)"
|
||||
transform="translateZ(0)"
|
||||
_hover={{
|
||||
transform: 'translateY(-4px) scale(1.02)',
|
||||
boxShadow: '0 12px 30px rgba(0, 0, 0, 0.3)',
|
||||
transform: 'translateY(-6px) scale(1.02)',
|
||||
}}
|
||||
css={isLargeChange ? { animation: `${pulseKeyframes} 2s infinite` } : {}}
|
||||
css={isLargeChange ? { animation: `${floatKeyframes} 3s ease-in-out infinite` } : {}}
|
||||
>
|
||||
{/* 背景装饰 */}
|
||||
{/* 毛玻璃主体 */}
|
||||
<Box
|
||||
position="absolute"
|
||||
top={-20}
|
||||
right={-20}
|
||||
width="80px"
|
||||
height="80px"
|
||||
borderRadius="full"
|
||||
bg="whiteAlpha.100"
|
||||
top={0}
|
||||
left={0}
|
||||
right={0}
|
||||
bottom={0}
|
||||
bg={getChangeGradient(item.avg_change_pct)}
|
||||
backdropFilter="blur(20px)"
|
||||
border="1px solid"
|
||||
borderColor="whiteAlpha.200"
|
||||
borderRadius="2xl"
|
||||
overflow="hidden"
|
||||
boxShadow={isLargeChange
|
||||
? `0 8px 32px rgba(${isPositive ? '239, 68, 68' : '34, 197, 94'}, 0.3)`
|
||||
: '0 8px 32px rgba(0, 0, 0, 0.2)'
|
||||
}
|
||||
_hover={{
|
||||
borderColor: 'whiteAlpha.300',
|
||||
boxShadow: isLargeChange
|
||||
? `0 16px 48px rgba(${isPositive ? '239, 68, 68' : '34, 197, 94'}, 0.4)`
|
||||
: '0 16px 48px rgba(0, 0, 0, 0.3)',
|
||||
}}
|
||||
transition="all 0.4s"
|
||||
/>
|
||||
|
||||
{/* 高光效果 */}
|
||||
<Box
|
||||
position="absolute"
|
||||
top={0}
|
||||
left={0}
|
||||
right={0}
|
||||
height="50%"
|
||||
bg="linear-gradient(180deg, rgba(255,255,255,0.1) 0%, transparent 100%)"
|
||||
borderRadius="2xl 2xl 0 0"
|
||||
pointerEvents="none"
|
||||
/>
|
||||
|
||||
{/* 内容 */}
|
||||
@@ -222,47 +309,61 @@ const HeatmapBlock = ({ item, onClick, size = 'normal' }) => {
|
||||
direction="column"
|
||||
justify="space-between"
|
||||
h="100%"
|
||||
p={{ base: 3, md: 4 }}
|
||||
position="relative"
|
||||
zIndex={1}
|
||||
>
|
||||
{/* 顶部：图标和名称 */}
|
||||
<HStack spacing={2} align="flex-start">
|
||||
<Box
|
||||
p={1.5}
|
||||
bg="whiteAlpha.200"
|
||||
borderRadius="lg"
|
||||
p={2}
|
||||
bg="whiteAlpha.150"
|
||||
borderRadius="xl"
|
||||
backdropFilter="blur(10px)"
|
||||
border="1px solid"
|
||||
borderColor="whiteAlpha.100"
|
||||
flexShrink={0}
|
||||
>
|
||||
<Icon
|
||||
as={IconComponent}
|
||||
boxSize={{ base: 3.5, md: 4 }}
|
||||
boxSize={{ base: 4, md: 5 }}
|
||||
color="white"
|
||||
opacity={0.9}
|
||||
/>
|
||||
</Box>
|
||||
<VStack align="start" spacing={0} flex={1}>
|
||||
<Text
|
||||
color="white"
|
||||
fontWeight="bold"
|
||||
fontSize={{ base: 'xs', md: 'sm' }}
|
||||
fontWeight="semibold"
|
||||
fontSize={{ base: 'sm', md: 'md' }}
|
||||
noOfLines={2}
|
||||
textShadow="0 2px 4px rgba(0,0,0,0.3)"
|
||||
lineHeight="1.3"
|
||||
letterSpacing="0.02em"
|
||||
>
|
||||
{item.name}
|
||||
</Text>
|
||||
{item.concept_count > 0 && (
|
||||
<Text color="whiteAlpha.800" fontSize="xs">
|
||||
<Text color="whiteAlpha.600" fontSize="xs" mt={0.5}>
|
||||
{item.concept_count} 个概念
|
||||
</Text>
|
||||
)}
|
||||
</VStack>
|
||||
|
||||
{/* 外链图标 */}
|
||||
{isLeafConcept && (
|
||||
<Icon
|
||||
as={FaExternalLinkAlt}
|
||||
boxSize={3}
|
||||
color="whiteAlpha.500"
|
||||
/>
|
||||
)}
|
||||
</HStack>
|
||||
|
||||
{/* 底部：涨跌幅 */}
|
||||
<Flex justify="space-between" align="flex-end">
|
||||
<VStack align="start" spacing={0}>
|
||||
{item.stock_count > 0 && (
|
||||
<Text color="whiteAlpha.700" fontSize="xs">
|
||||
<Text color="whiteAlpha.500" fontSize="xs">
|
||||
{item.stock_count} 只股票
|
||||
</Text>
|
||||
)}
|
||||
@@ -273,14 +374,15 @@ const HeatmapBlock = ({ item, onClick, size = 'normal' }) => {
|
||||
<Icon
|
||||
as={isPositive ? FaArrowUp : FaArrowDown}
|
||||
boxSize={3}
|
||||
color="white"
|
||||
color={getChangeTextColor(item.avg_change_pct)}
|
||||
/>
|
||||
)}
|
||||
<Text
|
||||
color="white"
|
||||
color={getChangeTextColor(item.avg_change_pct)}
|
||||
fontWeight="bold"
|
||||
fontSize={{ base: 'md', md: 'xl' }}
|
||||
textShadow="0 2px 8px rgba(0,0,0,0.4)"
|
||||
fontSize={{ base: 'lg', md: '2xl' }}
|
||||
fontFamily="mono"
|
||||
letterSpacing="-0.02em"
|
||||
>
|
||||
{formatChangePercent(item.avg_change_pct)}
|
||||
</Text>
|
||||
@@ -288,19 +390,23 @@ const HeatmapBlock = ({ item, onClick, size = 'normal' }) => {
|
||||
</Flex>
|
||||
</Flex>
|
||||
|
||||
{/* 可点击提示 */}
|
||||
{/* 展开标识 */}
|
||||
{canDrillDown && (
|
||||
<Badge
|
||||
position="absolute"
|
||||
top={2}
|
||||
right={2}
|
||||
bg="whiteAlpha.300"
|
||||
color="white"
|
||||
bg="whiteAlpha.200"
|
||||
color="whiteAlpha.800"
|
||||
fontSize="xs"
|
||||
borderRadius="full"
|
||||
px={2}
|
||||
py={0.5}
|
||||
backdropFilter="blur(10px)"
|
||||
border="1px solid"
|
||||
borderColor="whiteAlpha.100"
|
||||
>
|
||||
点击展开
|
||||
展开
|
||||
</Badge>
|
||||
)}
|
||||
</Box>
|
||||
@@ -318,12 +424,12 @@ const HierarchyView = ({
|
||||
const [hierarchy, setHierarchy] = useState([]);
|
||||
const [loading, setLoading] = useState(true);
|
||||
const [error, setError] = useState(null);
|
||||
const [priceData, setPriceData] = useState({ lv1Map: {}, lv2Map: {}, lv3Map: {} });
|
||||
const [priceData, setPriceData] = useState({ lv1Map: {}, lv2Map: {}, lv3Map: {}, leafMap: {} });
|
||||
const [priceLoading, setPriceLoading] = useState(false);
|
||||
const [tradeDate, setTradeDate] = useState(null);
|
||||
const [isFullscreen, setIsFullscreen] = useState(false);
|
||||
|
||||
// 钻取状态 - 支持4层：lv1 -> lv2 -> lv3 -> concept
|
||||
// 钻取状态
|
||||
const [currentLevel, setCurrentLevel] = useState('lv1');
|
||||
const [currentLv1, setCurrentLv1] = useState(null);
|
||||
const [currentLv2, setCurrentLv2] = useState(null);
|
||||
@@ -375,10 +481,11 @@ const HierarchyView = ({
|
||||
|
||||
const data = await response.json();
|
||||
|
||||
// 构建映射表 - 使用纯名称作为 key（去掉 [一级] 等前缀）
|
||||
// 构建映射表
|
||||
const lv1Map = {};
|
||||
const lv2Map = {};
|
||||
const lv3Map = {};
|
||||
const leafMap = {};
|
||||
|
||||
(data.lv1_concepts || []).forEach(item => {
|
||||
const pureName = extractPureName(item.concept_name);
|
||||
@@ -392,16 +499,20 @@ const HierarchyView = ({
|
||||
const pureName = extractPureName(item.concept_name);
|
||||
lv3Map[pureName] = item;
|
||||
});
|
||||
// 叶子概念 - 直接用名称
|
||||
(data.leaf_concepts || []).forEach(item => {
|
||||
leafMap[item.concept_name] = item;
|
||||
});
|
||||
|
||||
setPriceData({ lv1Map, lv2Map, lv3Map });
|
||||
setPriceData({ lv1Map, lv2Map, lv3Map, leafMap });
|
||||
setTradeDate(data.trade_date);
|
||||
|
||||
logger.info('HierarchyView', '层级涨跌幅加载完成', {
|
||||
lv1Count: Object.keys(lv1Map).length,
|
||||
lv2Count: Object.keys(lv2Map).length,
|
||||
lv3Count: Object.keys(lv3Map).length,
|
||||
leafCount: Object.keys(leafMap).length,
|
||||
tradeDate: data.trade_date,
|
||||
sampleLv1Keys: Object.keys(lv1Map).slice(0, 3),
|
||||
});
|
||||
} catch (err) {
|
||||
logger.warn('HierarchyView', '获取层级涨跌幅失败', { error: err.message });
|
||||
@@ -422,7 +533,7 @@ const HierarchyView = ({
|
||||
|
||||
// 根据当前层级获取显示数据
|
||||
const currentData = useMemo(() => {
|
||||
const { lv1Map, lv2Map, lv3Map } = priceData;
|
||||
const { lv1Map, lv2Map, lv3Map, leafMap } = priceData;
|
||||
|
||||
// 第一层：显示所有 lv1
|
||||
if (currentLevel === 'lv1') {
|
||||
@@ -489,12 +600,17 @@ const HierarchyView = ({
|
||||
|
||||
// 如果 lv2 直接包含概念（没有 lv3）
|
||||
if (lv2Data.concepts && lv2Data.concepts.length > 0) {
|
||||
return lv2Data.concepts.map((concept) => ({
|
||||
name: concept,
|
||||
level: 'concept',
|
||||
parentLv1: currentLv1.name,
|
||||
parentLv2: currentLv2.name,
|
||||
}));
|
||||
return lv2Data.concepts.map((conceptName) => {
|
||||
const price = leafMap[conceptName] || {};
|
||||
return {
|
||||
name: conceptName,
|
||||
level: 'concept',
|
||||
parentLv1: currentLv1.name,
|
||||
parentLv2: currentLv2.name,
|
||||
stock_count: price.stock_count,
|
||||
avg_change_pct: price.avg_change_pct,
|
||||
};
|
||||
});
|
||||
}
|
||||
|
||||
return [];
|
||||
@@ -511,13 +627,18 @@ const HierarchyView = ({
|
||||
const lv3Data = lv2Data.children.find(h => h.name === currentLv3.name);
|
||||
if (!lv3Data || !lv3Data.concepts) return [];
|
||||
|
||||
return lv3Data.concepts.map((concept) => ({
|
||||
name: concept,
|
||||
level: 'concept',
|
||||
parentLv1: currentLv1.name,
|
||||
parentLv2: currentLv2.name,
|
||||
parentLv3: currentLv3.name,
|
||||
}));
|
||||
return lv3Data.concepts.map((conceptName) => {
|
||||
const price = leafMap[conceptName] || {};
|
||||
return {
|
||||
name: conceptName,
|
||||
level: 'concept',
|
||||
parentLv1: currentLv1.name,
|
||||
parentLv2: currentLv2.name,
|
||||
parentLv3: currentLv3.name,
|
||||
stock_count: price.stock_count,
|
||||
avg_change_pct: price.avg_change_pct,
|
||||
};
|
||||
});
|
||||
}
|
||||
|
||||
return [];
|
||||
@@ -528,7 +649,6 @@ const HierarchyView = ({
|
||||
logger.info('HierarchyView', '热力图点击', { level: item.level, name: item.name });
|
||||
|
||||
if (item.level === 'lv1' && item.children && item.children.length > 0) {
|
||||
// 进入 lv2
|
||||
setCurrentLevel('lv2');
|
||||
setCurrentLv1(item);
|
||||
setBreadcrumbs([
|
||||
@@ -536,9 +656,7 @@ const HierarchyView = ({
|
||||
{ label: item.name, level: 'lv1', data: item },
|
||||
]);
|
||||
} else if (item.level === 'lv2') {
|
||||
// 检查是否有 lv3 或直接是概念
|
||||
if (item.children && item.children.length > 0) {
|
||||
// 进入 lv3
|
||||
setCurrentLevel('lv3');
|
||||
setCurrentLv2(item);
|
||||
setBreadcrumbs([
|
||||
@@ -547,8 +665,7 @@ const HierarchyView = ({
|
||||
{ label: item.name, level: 'lv2', data: item },
|
||||
]);
|
||||
} else if (item.concepts && item.concepts.length > 0) {
|
||||
// lv2 直接包含概念，进入概念层
|
||||
setCurrentLevel('lv3'); // 实际显示概念
|
||||
setCurrentLevel('lv3');
|
||||
setCurrentLv2(item);
|
||||
setBreadcrumbs([
|
||||
{ label: '全部分类', level: 'root' },
|
||||
@@ -557,7 +674,6 @@ const HierarchyView = ({
|
||||
]);
|
||||
}
|
||||
} else if (item.level === 'lv3' && item.concepts && item.concepts.length > 0) {
|
||||
// 进入具体概念层
|
||||
setCurrentLevel('concept');
|
||||
setCurrentLv3(item);
|
||||
setBreadcrumbs([
|
||||
@@ -567,7 +683,7 @@ const HierarchyView = ({
|
||||
{ label: item.name, level: 'lv3', data: item },
|
||||
]);
|
||||
} else if (item.level === 'concept') {
|
||||
// 点击具体概念，跳转到概念详情页
|
||||
// 跳转到概念详情页
|
||||
const htmlPath = `https://valuefrontier.cn/htmls/${encodeURIComponent(item.name)}.html`;
|
||||
window.open(htmlPath, '_blank');
|
||||
}
|
||||
@@ -595,12 +711,12 @@ const HierarchyView = ({
|
||||
}
|
||||
}, [breadcrumbs]);
|
||||
|
||||
// 刷新涨跌幅数据
|
||||
// 刷新
|
||||
const handleRefreshPrice = useCallback(() => {
|
||||
fetchHierarchyPrice();
|
||||
}, [fetchHierarchyPrice]);
|
||||
|
||||
// 切换全屏
|
||||
// 全屏切换
|
||||
const toggleFullscreen = useCallback(() => {
|
||||
setIsFullscreen(prev => !prev);
|
||||
}, []);
|
||||
@@ -628,17 +744,18 @@ const HierarchyView = ({
|
||||
// 计算列数
|
||||
const getGridColumns = () => {
|
||||
if (currentLevel === 'concept') {
|
||||
return { base: 2, md: 4, lg: 5 }; // 概念层更多列
|
||||
return { base: 2, md: 3, lg: 4 };
|
||||
}
|
||||
return { base: 2, md: 3, lg: 4 };
|
||||
};
|
||||
|
||||
if (loading) {
|
||||
return (
|
||||
<Center h="400px">
|
||||
<VStack spacing={4}>
|
||||
<Spinner size="xl" color="purple.500" thickness="4px" />
|
||||
<Text color="gray.600">正在加载概念层级...</Text>
|
||||
<Center h="400px" position="relative">
|
||||
<AuroraBackground />
|
||||
<VStack spacing={4} position="relative" zIndex={1}>
|
||||
<Spinner size="xl" color="purple.400" thickness="4px" />
|
||||
<Text color="gray.400">正在加载概念层级...</Text>
|
||||
</VStack>
|
||||
</Center>
|
||||
);
|
||||
@@ -646,11 +763,18 @@ const HierarchyView = ({
|
||||
|
||||
if (error) {
|
||||
return (
|
||||
<Center h="400px">
|
||||
<VStack spacing={4}>
|
||||
<Icon as={FaLayerGroup} boxSize={16} color="gray.300" />
|
||||
<Text color="gray.600">加载失败：{error}</Text>
|
||||
<Button colorScheme="purple" size="sm" onClick={fetchHierarchy}>
|
||||
<Center h="400px" position="relative">
|
||||
<AuroraBackground />
|
||||
<VStack spacing={4} position="relative" zIndex={1}>
|
||||
<Icon as={FaLayerGroup} boxSize={16} color="gray.600" />
|
||||
<Text color="gray.400">加载失败：{error}</Text>
|
||||
<Button
|
||||
colorScheme="purple"
|
||||
size="sm"
|
||||
onClick={fetchHierarchy}
|
||||
bg="purple.500"
|
||||
_hover={{ bg: 'purple.400' }}
|
||||
>
|
||||
重试
|
||||
</Button>
|
||||
</VStack>
|
||||
@@ -660,10 +784,11 @@ const HierarchyView = ({
|
||||
|
||||
if (currentData.length === 0) {
|
||||
return (
|
||||
<Center h="400px">
|
||||
<VStack spacing={4}>
|
||||
<Icon as={FaLayerGroup} boxSize={16} color="gray.300" />
|
||||
<Text color="gray.600">暂无层级数据</Text>
|
||||
<Center h="400px" position="relative">
|
||||
<AuroraBackground />
|
||||
<VStack spacing={4} position="relative" zIndex={1}>
|
||||
<Icon as={FaLayerGroup} boxSize={16} color="gray.600" />
|
||||
<Text color="gray.400">暂无层级数据</Text>
|
||||
</VStack>
|
||||
</Center>
|
||||
);
|
||||
@@ -677,170 +802,204 @@ const HierarchyView = ({
|
||||
right={isFullscreen ? 0 : 'auto'}
|
||||
bottom={isFullscreen ? 0 : 'auto'}
|
||||
zIndex={isFullscreen ? 1000 : 'auto'}
|
||||
bg={isFullscreen ? 'gray.50' : 'transparent'}
|
||||
p={isFullscreen ? 4 : 0}
|
||||
overflow={isFullscreen ? 'auto' : 'visible'}
|
||||
bg="slate.950"
|
||||
bgGradient="linear(to-br, gray.900, slate.900, gray.900)"
|
||||
p={{ base: 3, md: 5 }}
|
||||
borderRadius={isFullscreen ? '0' : '3xl'}
|
||||
overflow={isFullscreen ? 'auto' : 'hidden'}
|
||||
minH="500px"
|
||||
>
|
||||
{/* 工具栏 */}
|
||||
<Flex
|
||||
justify="space-between"
|
||||
align="center"
|
||||
mb={4}
|
||||
flexWrap="wrap"
|
||||
gap={2}
|
||||
>
|
||||
<HStack spacing={3}>
|
||||
<Icon as={FaLayerGroup} color="purple.500" boxSize={6} />
|
||||
<VStack align="start" spacing={0}>
|
||||
<Text fontSize="lg" fontWeight="bold" color="gray.800">
|
||||
{getCurrentTitle()}
|
||||
</Text>
|
||||
<Text fontSize="xs" color="gray.500">
|
||||
{getLevelDesc()} · {currentData.length} 项
|
||||
</Text>
|
||||
</VStack>
|
||||
{tradeDate && (
|
||||
<Badge colorScheme="blue" fontSize="xs" px={2} py={1} borderRadius="full">
|
||||
{tradeDate}
|
||||
</Badge>
|
||||
)}
|
||||
{priceLoading && (
|
||||
<Spinner size="sm" color="purple.500" />
|
||||
)}
|
||||
</HStack>
|
||||
{/* 极光背景 */}
|
||||
<AuroraBackground />
|
||||
|
||||
<HStack spacing={2}>
|
||||
<Tooltip label="刷新涨跌幅" placement="top">
|
||||
<IconButton
|
||||
size="sm"
|
||||
icon={<FaSync />}
|
||||
onClick={handleRefreshPrice}
|
||||
isLoading={priceLoading}
|
||||
variant="outline"
|
||||
colorScheme="blue"
|
||||
aria-label="刷新涨跌幅"
|
||||
/>
|
||||
</Tooltip>
|
||||
|
||||
<Tooltip label={isFullscreen ? '退出全屏' : '全屏'} placement="top">
|
||||
<IconButton
|
||||
size="sm"
|
||||
icon={isFullscreen ? <FaCompress /> : <FaExpand />}
|
||||
onClick={toggleFullscreen}
|
||||
variant="outline"
|
||||
colorScheme="gray"
|
||||
aria-label={isFullscreen ? '退出全屏' : '全屏'}
|
||||
/>
|
||||
</Tooltip>
|
||||
</HStack>
|
||||
</Flex>
|
||||
|
||||
{/* 面包屑导航 */}
|
||||
<Flex
|
||||
align="center"
|
||||
mb={4}
|
||||
p={3}
|
||||
bg="white"
|
||||
borderRadius="xl"
|
||||
boxShadow="sm"
|
||||
flexWrap="wrap"
|
||||
gap={1}
|
||||
>
|
||||
{breadcrumbs.map((crumb, index) => (
|
||||
<React.Fragment key={index}>
|
||||
{index > 0 && (
|
||||
<Icon as={FaChevronRight} color="gray.400" boxSize={3} mx={1} />
|
||||
)}
|
||||
<Button
|
||||
size="sm"
|
||||
variant={index === breadcrumbs.length - 1 ? 'solid' : 'ghost'}
|
||||
colorScheme={index === breadcrumbs.length - 1 ? 'purple' : 'gray'}
|
||||
leftIcon={index === 0 ? <FaHome /> : undefined}
|
||||
onClick={() => handleBreadcrumbClick(crumb, index)}
|
||||
isDisabled={index === breadcrumbs.length - 1}
|
||||
fontWeight={index === breadcrumbs.length - 1 ? 'bold' : 'medium'}
|
||||
borderRadius="lg"
|
||||
>
|
||||
{crumb.label}
|
||||
</Button>
|
||||
</React.Fragment>
|
||||
))}
|
||||
</Flex>
|
||||
|
||||
{/* 图例说明 */}
|
||||
<Flex
|
||||
justify="center"
|
||||
mb={4}
|
||||
gap={4}
|
||||
flexWrap="wrap"
|
||||
fontSize="sm"
|
||||
>
|
||||
<HStack spacing={2}>
|
||||
<Box w={4} h={4} borderRadius="sm" bg="linear-gradient(135deg, #DC2626 0%, #EF4444 100%)" />
|
||||
<Text color="gray.600">涨</Text>
|
||||
</HStack>
|
||||
<HStack spacing={2}>
|
||||
<Box w={4} h={4} borderRadius="sm" bg="linear-gradient(135deg, #16A34A 0%, #22C55E 100%)" />
|
||||
<Text color="gray.600">跌</Text>
|
||||
</HStack>
|
||||
<HStack spacing={2}>
|
||||
<Box w={4} h={4} borderRadius="sm" bg="linear-gradient(135deg, #4B5563 0%, #6B7280 100%)" />
|
||||
<Text color="gray.600">平/无数据</Text>
|
||||
</HStack>
|
||||
{currentLevel !== 'concept' && (
|
||||
<>
|
||||
<Text color="gray.400">|</Text>
|
||||
<Text color="gray.500">点击色块查看下级</Text>
|
||||
</>
|
||||
)}
|
||||
{currentLevel === 'concept' && (
|
||||
<>
|
||||
<Text color="gray.400">|</Text>
|
||||
<Text color="gray.500">点击查看概念详情</Text>
|
||||
</>
|
||||
)}
|
||||
</Flex>
|
||||
|
||||
{/* 热力图网格 */}
|
||||
<SimpleGrid columns={getGridColumns()} spacing={{ base: 3, md: 4 }}>
|
||||
{currentData.map((item) => (
|
||||
<HeatmapBlock
|
||||
key={item.id || item.name}
|
||||
item={item}
|
||||
onClick={handleBlockClick}
|
||||
size={currentLevel === 'lv1' ? 'large' : currentLevel === 'concept' ? 'small' : 'normal'}
|
||||
/>
|
||||
))}
|
||||
</SimpleGrid>
|
||||
|
||||
{/* 统计信息 */}
|
||||
<Flex
|
||||
justify="center"
|
||||
mt={6}
|
||||
gap={3}
|
||||
flexWrap="wrap"
|
||||
>
|
||||
<Badge
|
||||
colorScheme="purple"
|
||||
px={4}
|
||||
py={2}
|
||||
borderRadius="full"
|
||||
fontSize="sm"
|
||||
{/* 内容层 */}
|
||||
<Box position="relative" zIndex={1}>
|
||||
{/* 工具栏 */}
|
||||
<Flex
|
||||
justify="space-between"
|
||||
align="center"
|
||||
mb={5}
|
||||
flexWrap="wrap"
|
||||
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 && (
|
||||
<Spinner size="sm" color="purple.300" />
|
||||
)}
|
||||
</HStack>
|
||||
|
||||
<HStack spacing={2}>
|
||||
<Tooltip label="刷新涨跌幅" placement="top">
|
||||
<IconButton
|
||||
size="sm"
|
||||
icon={<FaSync />}
|
||||
onClick={handleRefreshPrice}
|
||||
isLoading={priceLoading}
|
||||
bg="whiteAlpha.100"
|
||||
color="white"
|
||||
border="1px solid"
|
||||
borderColor="whiteAlpha.200"
|
||||
_hover={{ bg: 'whiteAlpha.200' }}
|
||||
aria-label="刷新涨跌幅"
|
||||
/>
|
||||
</Tooltip>
|
||||
|
||||
<Tooltip label={isFullscreen ? '退出全屏' : '全屏'} placement="top">
|
||||
<IconButton
|
||||
size="sm"
|
||||
icon={isFullscreen ? <FaCompress /> : <FaExpand />}
|
||||
onClick={toggleFullscreen}
|
||||
bg="whiteAlpha.100"
|
||||
color="white"
|
||||
border="1px solid"
|
||||
borderColor="whiteAlpha.200"
|
||||
_hover={{ bg: 'whiteAlpha.200' }}
|
||||
aria-label={isFullscreen ? '退出全屏' : '全屏'}
|
||||
/>
|
||||
</Tooltip>
|
||||
</HStack>
|
||||
</Flex>
|
||||
|
||||
{/* 面包屑导航 */}
|
||||
<Flex
|
||||
align="center"
|
||||
mb={5}
|
||||
p={3}
|
||||
bg="whiteAlpha.50"
|
||||
backdropFilter="blur(20px)"
|
||||
borderRadius="2xl"
|
||||
border="1px solid"
|
||||
borderColor="whiteAlpha.100"
|
||||
flexWrap="wrap"
|
||||
gap={1}
|
||||
>
|
||||
{breadcrumbs.map((crumb, index) => (
|
||||
<React.Fragment key={index}>
|
||||
{index > 0 && (
|
||||
<Icon as={FaChevronRight} color="whiteAlpha.400" boxSize={3} mx={1} />
|
||||
)}
|
||||
<Button
|
||||
size="sm"
|
||||
variant="ghost"
|
||||
bg={index === breadcrumbs.length - 1 ? 'purple.500' : 'transparent'}
|
||||
color={index === breadcrumbs.length - 1 ? 'white' : 'whiteAlpha.700'}
|
||||
leftIcon={index === 0 ? <FaHome /> : undefined}
|
||||
onClick={() => handleBreadcrumbClick(crumb, index)}
|
||||
isDisabled={index === breadcrumbs.length - 1}
|
||||
fontWeight={index === breadcrumbs.length - 1 ? 'bold' : 'medium'}
|
||||
borderRadius="xl"
|
||||
_hover={index !== breadcrumbs.length - 1 ? { bg: 'whiteAlpha.100' } : {}}
|
||||
boxShadow={index === breadcrumbs.length - 1 ? '0 0 20px rgba(139, 92, 246, 0.5)' : 'none'}
|
||||
>
|
||||
{crumb.label}
|
||||
</Button>
|
||||
</React.Fragment>
|
||||
))}
|
||||
</Flex>
|
||||
|
||||
{/* 图例说明 */}
|
||||
<Flex
|
||||
justify="center"
|
||||
mb={5}
|
||||
gap={4}
|
||||
flexWrap="wrap"
|
||||
fontSize="xs"
|
||||
>
|
||||
<HStack spacing={2}>
|
||||
<Box w={3} h={3} borderRadius="sm" bg="linear-gradient(135deg, rgba(239, 68, 68, 0.7) 0%, rgba(248, 113, 113, 0.5) 100%)" />
|
||||
<Text color="whiteAlpha.600">涨</Text>
|
||||
</HStack>
|
||||
<HStack spacing={2}>
|
||||
<Box w={3} h={3} borderRadius="sm" bg="linear-gradient(135deg, rgba(22, 163, 74, 0.7) 0%, rgba(74, 222, 128, 0.5) 100%)" />
|
||||
<Text color="whiteAlpha.600">跌</Text>
|
||||
</HStack>
|
||||
<HStack spacing={2}>
|
||||
<Box w={3} h={3} borderRadius="sm" bg="linear-gradient(135deg, rgba(71, 85, 105, 0.6) 0%, rgba(100, 116, 139, 0.4) 100%)" />
|
||||
<Text color="whiteAlpha.600">平/无数据</Text>
|
||||
</HStack>
|
||||
<Text color="whiteAlpha.300">|</Text>
|
||||
<Text color="whiteAlpha.500">
|
||||
{currentLevel !== 'concept' ? '点击色块查看下级' : '点击查看概念详情'}
|
||||
</Text>
|
||||
</Flex>
|
||||
|
||||
{/* 热力图网格 */}
|
||||
<SimpleGrid columns={getGridColumns()} spacing={{ base: 3, md: 4 }}>
|
||||
{currentData.map((item) => (
|
||||
<GlassCard
|
||||
key={item.id || item.name}
|
||||
item={item}
|
||||
onClick={handleBlockClick}
|
||||
size={currentLevel === 'lv1' ? 'large' : currentLevel === 'concept' ? 'small' : 'normal'}
|
||||
/>
|
||||
))}
|
||||
</SimpleGrid>
|
||||
|
||||
{/* 统计信息 */}
|
||||
<Flex
|
||||
justify="center"
|
||||
mt={6}
|
||||
gap={3}
|
||||
flexWrap="wrap"
|
||||
>
|
||||
当前显示 {currentData.length} 个{getLevelDesc()}
|
||||
</Badge>
|
||||
{currentLevel === 'lv1' && (
|
||||
<Badge
|
||||
colorScheme="cyan"
|
||||
bg="purple.500"
|
||||
color="white"
|
||||
px={4}
|
||||
py={2}
|
||||
borderRadius="full"
|
||||
fontSize="sm"
|
||||
boxShadow="0 0 20px rgba(139, 92, 246, 0.4)"
|
||||
>
|
||||
共 {hierarchy.reduce((acc, h) => acc + h.concept_count, 0)} 个概念
|
||||
当前显示 {currentData.length} 个{getLevelDesc()}
|
||||
</Badge>
|
||||
)}
|
||||
</Flex>
|
||||
{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>
|
||||
);
|
||||
};
|
||||
|
||||
Reference in New Issue
Block a user