feat(Concept): 新增统一图表容器组件
- ChartBreadcrumb.js: 通用面包屑导航组件 - ChartContainer.js: 统一图表容器 - 极光背景动画 - 面包屑导航（左上角） - 全屏按钮（右上角） - 底部图例（可选） - contentTopPadding 可配置内边距 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude <noreply@anthropic.com>
This commit is contained in:
zdl
96
src/views/Concept/components/ChartBreadcrumb.js
Normal file
96
src/views/Concept/components/ChartBreadcrumb.js
Normal file
@@ -0,0 +1,96 @@
|
||||
/**
|
||||
* ChartBreadcrumb - 图表通用面包屑导航组件
|
||||
*
|
||||
* 用于矩形树图和层级图共享的面包屑导航
|
||||
*/
|
||||
import React, { memo } from 'react';
|
||||
import {
|
||||
HStack,
|
||||
Text,
|
||||
Icon,
|
||||
Tooltip,
|
||||
IconButton,
|
||||
} from '@chakra-ui/react';
|
||||
import { ArrowLeft, ChevronRight } from 'lucide-react';
|
||||
import { GLASS_BLUR } from '@/constants/glassConfig';
|
||||
|
||||
/**
|
||||
* Props:
|
||||
* @param {Array<{label: string, path: object|null}>} items - 面包屑项目
|
||||
* @param {function} onNavigate - 导航回调 (path) => void
|
||||
* @param {function} onGoBack - 返回上一层回调
|
||||
* @param {boolean} showBackButton - 是否显示返回按钮
|
||||
*/
|
||||
const ChartBreadcrumb = memo(({
|
||||
items = [],
|
||||
onNavigate,
|
||||
onGoBack,
|
||||
showBackButton = false,
|
||||
}) => {
|
||||
return (
|
||||
<HStack spacing={2}>
|
||||
{/* 返回按钮 */}
|
||||
{showBackButton && (
|
||||
<Tooltip label="返回上一层">
|
||||
<IconButton
|
||||
icon={<ArrowLeft size={16} />}
|
||||
size="sm"
|
||||
variant="ghost"
|
||||
onClick={onGoBack}
|
||||
bg="rgba(255, 255, 255, 0.08)"
|
||||
backdropFilter={GLASS_BLUR.lg}
|
||||
border="1px solid"
|
||||
borderColor="whiteAlpha.100"
|
||||
color="whiteAlpha.800"
|
||||
borderRadius="full"
|
||||
_hover={{
|
||||
bg: 'rgba(255, 255, 255, 0.15)',
|
||||
transform: 'scale(1.05)',
|
||||
}}
|
||||
transition="all 0.2s"
|
||||
/>
|
||||
</Tooltip>
|
||||
)}
|
||||
|
||||
{/* 面包屑路径 */}
|
||||
<HStack
|
||||
bg="rgba(255, 255, 255, 0.08)"
|
||||
backdropFilter={GLASS_BLUR.lg}
|
||||
px={3}
|
||||
py={1.5}
|
||||
borderRadius="full"
|
||||
border="1px solid"
|
||||
borderColor="whiteAlpha.100"
|
||||
spacing={1}
|
||||
boxShadow="0 4px 16px rgba(0, 0, 0, 0.2)"
|
||||
>
|
||||
{items.map((item, index) => (
|
||||
<React.Fragment key={index}>
|
||||
{index > 0 && (
|
||||
<Icon as={ChevronRight} boxSize={3} color="whiteAlpha.400" />
|
||||
)}
|
||||
<Text
|
||||
fontSize="xs"
|
||||
color={index === items.length - 1 ? 'purple.300' : 'whiteAlpha.700'}
|
||||
fontWeight={index === items.length - 1 ? 'bold' : 'normal'}
|
||||
cursor={index < items.length - 1 ? 'pointer' : 'default'}
|
||||
_hover={index < items.length - 1 ? { color: 'purple.300' } : {}}
|
||||
onClick={() => {
|
||||
if (index < items.length - 1 && onNavigate) {
|
||||
onNavigate(item.path);
|
||||
}
|
||||
}}
|
||||
transition="color 0.2s"
|
||||
>
|
||||
{item.label}
|
||||
</Text>
|
||||
</React.Fragment>
|
||||
))}
|
||||
</HStack>
|
||||
</HStack>
|
||||
);
|
||||
});
|
||||
|
||||
ChartBreadcrumb.displayName = 'ChartBreadcrumb';
|
||||
|
||||
export default ChartBreadcrumb;
|
||||
246
src/views/Concept/components/ChartContainer.js
Normal file
246
src/views/Concept/components/ChartContainer.js
Normal file
@@ -0,0 +1,246 @@
|
||||
/**
|
||||
* ChartContainer - 图表统一容器组件
|
||||
*
|
||||
* 用于矩形树图和层级图的统一容器，包含：
|
||||
* - 极光背景动画
|
||||
* - 面包屑导航
|
||||
* - 全屏按钮
|
||||
* - 底部图例（可选）
|
||||
*/
|
||||
import React, { memo, useCallback, useState } from 'react';
|
||||
import {
|
||||
Box,
|
||||
HStack,
|
||||
Text,
|
||||
Tooltip,
|
||||
IconButton,
|
||||
useBreakpointValue,
|
||||
} from '@chakra-ui/react';
|
||||
import { keyframes } from '@emotion/react';
|
||||
import { Maximize2, Minimize2 } from 'lucide-react';
|
||||
import { GLASS_BLUR } from '@/constants/glassConfig';
|
||||
import ChartBreadcrumb from './ChartBreadcrumb';
|
||||
|
||||
// 极光动画
|
||||
const auroraAnimation = keyframes`
|
||||
0%, 100% {
|
||||
background-position: 0% 50%;
|
||||
filter: hue-rotate(0deg);
|
||||
}
|
||||
25% {
|
||||
background-position: 50% 100%;
|
||||
filter: hue-rotate(10deg);
|
||||
}
|
||||
50% {
|
||||
background-position: 100% 50%;
|
||||
filter: hue-rotate(0deg);
|
||||
}
|
||||
75% {
|
||||
background-position: 50% 0%;
|
||||
filter: hue-rotate(-10deg);
|
||||
}
|
||||
`;
|
||||
|
||||
// 光晕脉冲动画
|
||||
const glowPulse = keyframes`
|
||||
0%, 100% { opacity: 0.3; transform: scale(1); }
|
||||
50% { opacity: 0.6; transform: scale(1.05); }
|
||||
`;
|
||||
|
||||
/**
|
||||
* Props:
|
||||
* @param {Array} breadcrumbItems - 面包屑项目
|
||||
* @param {function} onNavigate - 导航回调
|
||||
* @param {function} onGoBack - 返回回调
|
||||
* @param {boolean} showBackButton - 是否显示返回按钮
|
||||
* @param {boolean} showLegend - 是否显示底部图例
|
||||
* @param {string} height - 容器高度
|
||||
* @param {number} contentTopPadding - 内容区顶部内边距（避开导航栏）
|
||||
* @param {ReactNode} children - 图表内容
|
||||
*/
|
||||
const ChartContainer = memo(({
|
||||
breadcrumbItems = [],
|
||||
onNavigate,
|
||||
onGoBack,
|
||||
showBackButton = false,
|
||||
showLegend = false,
|
||||
height,
|
||||
contentTopPadding = 14,
|
||||
children,
|
||||
}) => {
|
||||
const [isFullscreen, setIsFullscreen] = useState(false);
|
||||
const isMobile = useBreakpointValue({ base: true, md: false });
|
||||
|
||||
const toggleFullscreen = useCallback(() => {
|
||||
setIsFullscreen(prev => !prev);
|
||||
}, []);
|
||||
|
||||
// 计算容器高度
|
||||
const containerHeight = isFullscreen
|
||||
? 'calc(100vh - 60px)'
|
||||
: height || (isMobile ? '500px' : '700px');
|
||||
|
||||
return (
|
||||
<Box
|
||||
position={isFullscreen ? 'fixed' : 'relative'}
|
||||
top={isFullscreen ? '60px' : 'auto'}
|
||||
left={isFullscreen ? 0 : 'auto'}
|
||||
right={isFullscreen ? '72px' : 'auto'}
|
||||
bottom={isFullscreen ? 0 : 'auto'}
|
||||
zIndex={isFullscreen ? 1000 : 'auto'}
|
||||
borderRadius={isFullscreen ? '0' : '3xl'}
|
||||
overflow="hidden"
|
||||
border={isFullscreen ? 'none' : '1px solid'}
|
||||
borderColor="whiteAlpha.100"
|
||||
h={containerHeight}
|
||||
bg="transparent"
|
||||
>
|
||||
{/* 极光背景层 */}
|
||||
<Box
|
||||
position="absolute"
|
||||
top={0}
|
||||
left={0}
|
||||
right={0}
|
||||
bottom={0}
|
||||
bg="linear-gradient(135deg, #0F172A 0%, #1E1B4B 25%, #312E81 50%, #1E1B4B 75%, #0F172A 100%)"
|
||||
backgroundSize="400% 400%"
|
||||
animation={`${auroraAnimation} 15s ease infinite`}
|
||||
/>
|
||||
|
||||
{/* 弥散光晕层 */}
|
||||
<Box
|
||||
position="absolute"
|
||||
top="20%"
|
||||
left="10%"
|
||||
w="300px"
|
||||
h="300px"
|
||||
bg="radial-gradient(circle, rgba(139, 92, 246, 0.3) 0%, transparent 70%)"
|
||||
filter="blur(60px)"
|
||||
pointerEvents="none"
|
||||
animation={`${glowPulse} 4s ease-in-out infinite`}
|
||||
/>
|
||||
<Box
|
||||
position="absolute"
|
||||
bottom="20%"
|
||||
right="15%"
|
||||
w="250px"
|
||||
h="250px"
|
||||
bg="radial-gradient(circle, rgba(59, 130, 246, 0.25) 0%, transparent 70%)"
|
||||
filter="blur(50px)"
|
||||
pointerEvents="none"
|
||||
animation={`${glowPulse} 5s ease-in-out infinite 1s`}
|
||||
/>
|
||||
<Box
|
||||
position="absolute"
|
||||
top="50%"
|
||||
right="30%"
|
||||
w="200px"
|
||||
h="200px"
|
||||
bg="radial-gradient(circle, rgba(236, 72, 153, 0.2) 0%, transparent 70%)"
|
||||
filter="blur(40px)"
|
||||
pointerEvents="none"
|
||||
animation={`${glowPulse} 6s ease-in-out infinite 2s`}
|
||||
/>
|
||||
|
||||
{/* 左上角面包屑导航 */}
|
||||
<Box
|
||||
position="absolute"
|
||||
top={4}
|
||||
left={4}
|
||||
zIndex={10}
|
||||
>
|
||||
<ChartBreadcrumb
|
||||
items={breadcrumbItems}
|
||||
onNavigate={onNavigate}
|
||||
onGoBack={onGoBack}
|
||||
showBackButton={showBackButton}
|
||||
/>
|
||||
</Box>
|
||||
|
||||
{/* 右上角全屏按钮 */}
|
||||
<Tooltip label={isFullscreen ? '退出全屏' : '全屏查看'}>
|
||||
<IconButton
|
||||
position="absolute"
|
||||
top={4}
|
||||
right={4}
|
||||
zIndex={10}
|
||||
icon={isFullscreen ? <Minimize2 size={16} /> : <Maximize2 size={16} />}
|
||||
size="sm"
|
||||
variant="ghost"
|
||||
onClick={toggleFullscreen}
|
||||
bg="rgba(255, 255, 255, 0.08)"
|
||||
backdropFilter={GLASS_BLUR.lg}
|
||||
border="1px solid"
|
||||
borderColor="whiteAlpha.100"
|
||||
color="whiteAlpha.800"
|
||||
borderRadius="full"
|
||||
_hover={{
|
||||
bg: 'rgba(255, 255, 255, 0.15)',
|
||||
transform: 'scale(1.05)',
|
||||
}}
|
||||
transition="all 0.2s"
|
||||
/>
|
||||
</Tooltip>
|
||||
|
||||
{/* 底部图例 */}
|
||||
{showLegend && (
|
||||
<HStack
|
||||
position="absolute"
|
||||
bottom={4}
|
||||
left="50%"
|
||||
transform="translateX(-50%)"
|
||||
zIndex={10}
|
||||
bg="rgba(255, 255, 255, 0.08)"
|
||||
backdropFilter={GLASS_BLUR.lg}
|
||||
px={4}
|
||||
py={2}
|
||||
borderRadius="full"
|
||||
border="1px solid"
|
||||
borderColor="whiteAlpha.100"
|
||||
spacing={3}
|
||||
boxShadow="0 4px 16px rgba(0, 0, 0, 0.2)"
|
||||
>
|
||||
<HStack spacing={2}>
|
||||
<Box
|
||||
w={3}
|
||||
h={3}
|
||||
borderRadius="full"
|
||||
bg="linear-gradient(135deg, #EF4444, #DC2626)"
|
||||
boxShadow="0 0 8px rgba(239, 68, 68, 0.5)"
|
||||
/>
|
||||
<Text color="whiteAlpha.800" fontSize="xs">涨</Text>
|
||||
</HStack>
|
||||
<Box w="1px" h={4} bg="whiteAlpha.200" />
|
||||
<HStack spacing={2}>
|
||||
<Box
|
||||
w={3}
|
||||
h={3}
|
||||
borderRadius="full"
|
||||
bg="linear-gradient(135deg, #22C55E, #16A34A)"
|
||||
boxShadow="0 0 8px rgba(34, 197, 94, 0.5)"
|
||||
/>
|
||||
<Text color="whiteAlpha.800" fontSize="xs">跌</Text>
|
||||
</HStack>
|
||||
</HStack>
|
||||
)}
|
||||
|
||||
{/* 图表内容 - 添加顶部和底部内边距避开导航和图例 */}
|
||||
<Box
|
||||
position="absolute"
|
||||
top={0}
|
||||
left={0}
|
||||
right={0}
|
||||
bottom={0}
|
||||
pt={contentTopPadding}
|
||||
pb={showLegend ? 14 : 4}
|
||||
px={4}
|
||||
>
|
||||
{children}
|
||||
</Box>
|
||||
</Box>
|
||||
);
|
||||
});
|
||||
|
||||
ChartContainer.displayName = 'ChartContainer';
|
||||
|
||||
export default ChartContainer;
|
||||
Reference in New Issue
Block a user