vf/vf_react
4
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

refactor(Concept): 优化 3D 力导向图和层级图组件

Browse Source 
ForceGraphView：
- 优化 API 请求路径兼容性
- 改进数据处理逻辑

HierarchyView：
- 优化层级数据获取
- 改进 API 兼容性

DataVisualizationComponents：
- 代码优化

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude <noreply@anthropic.com>
This commit is contained in:
zdl
2025-12-16 13:10:18 +08:00
parent 573fa409e3
commit 72aef087ea
3 changed files with 217 additions and 233 deletions
Download Patch File Download Diff File Expand all files Collapse all files

126
src/views/Concept/components/HierarchyView.js
View File

@@ -814,49 +814,10 @@ const HierarchyView = ({
{/* 内容层 */}
<Box position="relative" zIndex={1}>
{/* 简化的工具栏 - 仅显示功能按钮 */}
<Flex
justify="flex-end"
align="center"
mb={4}
gap={2}
>
{priceLoading && (
<Spinner size="sm" color="purple.300" mr={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>
</Flex>
{/* 面包屑导航 */}
{/* 面包屑导航 + 工具栏（同一行） */}
<Flex
align="center"
justify="space-between"
mb={5}
p={3}
bg="whiteAlpha.50"
@@ -864,31 +825,68 @@ const HierarchyView = ({
borderRadius="2xl"
border="1px solid"
borderColor="whiteAlpha.100"
flexWrap="wrap"
gap={1}
gap={2}
>
{breadcrumbs.map((crumb, index) => (
<React.Fragment key={index}>
{index > 0 && (
<Icon as={FaChevronRight} color="whiteAlpha.400" boxSize={3} mx={1} />
)}
<Button
{/* 左侧：面包屑导航 */}
<Flex align="center" flexWrap="wrap" gap={1} flex={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>
{/* 右侧：工具栏按钮 */}
<HStack spacing={2} flexShrink={0}>
{priceLoading && (
<Spinner size="sm" color="purple.300" />
)}
<Tooltip label="刷新涨跌幅" placement="top">
<IconButton
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>
))}
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>
{/* 图例说明 */}