diff --git a/src/views/Concept/components/ForceGraphView.js b/src/views/Concept/components/ForceGraphView.js index 6f56b9d2..fdf12547 100644 --- a/src/views/Concept/components/ForceGraphView.js +++ b/src/views/Concept/components/ForceGraphView.js @@ -1006,7 +1006,7 @@ const ForceGraphView = ({ // 获取容器高度 const containerHeight = useMemo(() => { - if (isFullscreen) return '100vh'; + if (isFullscreen) return 'calc(100vh - 60px)'; return isMobile ? '500px' : '700px'; }, [isFullscreen, isMobile]); @@ -1069,161 +1069,84 @@ const ForceGraphView = ({ } return ( - - {/* 极光背景层 */} - + + {/* 外部工具栏 - 在蓝紫色背景外面 */} + + + {/* 返回按钮 */} + {drillPath && ( + + } + onClick={handleGoBack} + bg="whiteAlpha.100" + color="white" + border="1px solid" + borderColor="whiteAlpha.200" + borderRadius="full" + _hover={{ + bg: 'purple.500', + borderColor: 'purple.400', + transform: 'scale(1.05)', + }} + transition="all 0.2s" + aria-label="返回" + /> + + )} - {/* 弥散光晕层 */} - - - - - {/* 顶部工具栏 - 毛玻璃风格 */} - - {/* 左侧标题和面包屑 */} - - - {/* 返回按钮 */} - {drillPath && ( - - } - onClick={handleGoBack} - bg="rgba(255, 255, 255, 0.1)" - backdropFilter="blur(20px)" - color="white" - border="1px solid" - borderColor="whiteAlpha.200" - borderRadius="full" - _hover={{ - bg: 'rgba(139, 92, 246, 0.4)', - borderColor: 'purple.400', - transform: 'scale(1.05)', - }} - transition="all 0.2s" - aria-label="返回" - /> - - )} - - - - - 概念矩形树图 - - - - {/* 面包屑导航 */} - - {breadcrumbItems.map((item, index) => ( - - {index > 0 && ( - - )} - { - if (index < breadcrumbItems.length - 1) { - setDrillPath(item.path); - } - }} - > - {item.label} - - - ))} - + + + + 概念矩形树图 + - + + {/* 面包屑导航 */} + + {breadcrumbItems.map((item, index) => ( + + {index > 0 && ( + + )} + { + if (index < breadcrumbItems.length - 1) { + setDrillPath(item.path); + } + }} + > + {item.label} + + + ))} + + {/* 右侧控制按钮 */} - + {priceLoading && } {drillPath && ( @@ -1232,14 +1155,13 @@ const ForceGraphView = ({ size="sm" icon={} onClick={handleGoHome} - bg="rgba(255, 255, 255, 0.1)" - backdropFilter="blur(20px)" + bg="whiteAlpha.100" color="white" border="1px solid" borderColor="whiteAlpha.200" borderRadius="full" _hover={{ - bg: 'rgba(139, 92, 246, 0.4)', + bg: 'purple.500', borderColor: 'purple.400', transform: 'scale(1.05)', }} @@ -1255,14 +1177,13 @@ const ForceGraphView = ({ icon={} onClick={handleRefresh} isLoading={priceLoading} - bg="rgba(255, 255, 255, 0.1)" - backdropFilter="blur(20px)" + bg="whiteAlpha.100" color="white" border="1px solid" borderColor="whiteAlpha.200" borderRadius="full" _hover={{ - bg: 'rgba(255, 255, 255, 0.2)', + bg: 'whiteAlpha.200', borderColor: 'whiteAlpha.300', transform: 'scale(1.05)', }} @@ -1276,14 +1197,13 @@ const ForceGraphView = ({ size="sm" icon={isFullscreen ? : } onClick={toggleFullscreen} - bg="rgba(255, 255, 255, 0.1)" - backdropFilter="blur(20px)" + bg="whiteAlpha.100" color="white" border="1px solid" borderColor="whiteAlpha.200" borderRadius="full" _hover={{ - bg: 'rgba(255, 255, 255, 0.2)', + bg: 'whiteAlpha.200', borderColor: 'whiteAlpha.300', transform: 'scale(1.05)', }} @@ -1292,9 +1212,72 @@ const ForceGraphView = ({ /> - + - {/* 底部图例 - 毛玻璃风格 */} + {/* 蓝紫色背景容器 */} + + {/* 极光背景层 */} + + + {/* 弥散光晕层 */} + + + + + {/* 底部图例 - 毛玻璃风格 */} - + + ); }; diff --git a/src/views/Concept/components/HierarchyView.js b/src/views/Concept/components/HierarchyView.js index c61c199e..79df2220 100644 --- a/src/views/Concept/components/HierarchyView.js +++ b/src/views/Concept/components/HierarchyView.js @@ -814,49 +814,10 @@ const HierarchyView = ({ {/* 内容层 */} - {/* 简化的工具栏 - 仅显示功能按钮 */} - - {priceLoading && ( - - )} - - } - onClick={handleRefreshPrice} - isLoading={priceLoading} - bg="whiteAlpha.100" - color="white" - border="1px solid" - borderColor="whiteAlpha.200" - _hover={{ bg: 'whiteAlpha.200' }} - aria-label="刷新涨跌幅" - /> - - - - : } - onClick={toggleFullscreen} - bg="whiteAlpha.100" - color="white" - border="1px solid" - borderColor="whiteAlpha.200" - _hover={{ bg: 'whiteAlpha.200' }} - aria-label={isFullscreen ? '退出全屏' : '全屏'} - /> - - - - {/* 面包屑导航 */} + {/* 面包屑导航 + 工具栏(同一行) */} - {breadcrumbs.map((crumb, index) => ( - - {index > 0 && ( - - )} - + + ))} + + + {/* 右侧:工具栏按钮 */} + + {priceLoading && ( + + )} + + : 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} - - - ))} + icon={} + onClick={handleRefreshPrice} + isLoading={priceLoading} + bg="whiteAlpha.100" + color="white" + border="1px solid" + borderColor="whiteAlpha.200" + _hover={{ bg: 'whiteAlpha.200' }} + aria-label="刷新涨跌幅" + /> + + + + : } + onClick={toggleFullscreen} + bg="whiteAlpha.100" + color="white" + border="1px solid" + borderColor="whiteAlpha.200" + _hover={{ bg: 'whiteAlpha.200' }} + aria-label={isFullscreen ? '退出全屏' : '全屏'} + /> + + {/* 图例说明 */} diff --git a/src/views/LimitAnalyse/components/DataVisualizationComponents.js b/src/views/LimitAnalyse/components/DataVisualizationComponents.js index 86a6bc04..362395a9 100644 --- a/src/views/LimitAnalyse/components/DataVisualizationComponents.js +++ b/src/views/LimitAnalyse/components/DataVisualizationComponents.js @@ -297,15 +297,17 @@ const SectorHeatMap = ({ data }) => { rx="8" style={{ cursor: 'pointer', - transition: 'all 0.3s' + transition: 'all 0.2s ease-in-out' }} onMouseEnter={(e) => { - e.target.style.opacity = '0.8'; - e.target.style.transform = 'scale(1.05)'; + e.target.style.stroke = '#FFD700'; + e.target.style.strokeWidth = '4'; + e.target.style.filter = 'brightness(1.2) drop-shadow(0 0 8px rgba(255, 215, 0, 0.6))'; }} onMouseLeave={(e) => { - e.target.style.opacity = '1'; - e.target.style.transform = 'scale(1)'; + e.target.style.stroke = '#fff'; + e.target.style.strokeWidth = '2'; + e.target.style.filter = 'none'; }} > {`${sector.name}: ${sector.count}只涨停`}