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

update pay ui

Browse Source
This commit is contained in:
zzlgreat
2025-12-05 19:18:14 +08:00
parent 75d3cf135a
commit 89f581aeed
2 changed files with 61 additions and 80 deletions
Download Patch File Download Diff File Expand all files Collapse all files

94
src/views/Concept/components/ForceGraphView.js
View File

@@ -45,7 +45,7 @@ import {
} from 'react-icons/fa'; } from 'react-icons/fa';
import { logger } from '../../../utils/logger'; import { logger } from '../../../utils/logger';
// 极光动画 // 极光动画 - 黑金色主题
const auroraAnimation = keyframes` const auroraAnimation = keyframes`
0%, 100% { 0%, 100% {
background-position: 0% 50%; background-position: 0% 50%;
@@ -53,7 +53,7 @@ const auroraAnimation = keyframes`
} }
25% { 25% {
background-position: 50% 100%; background-position: 50% 100%;
filter: hue-rotate(15deg); filter: hue-rotate(10deg);
} }
50% { 50% {
background-position: 100% 50%; background-position: 100% 50%;
@@ -61,7 +61,7 @@ const auroraAnimation = keyframes`
} }
75% { 75% {
background-position: 50% 0%; background-position: 50% 0%;
filter: hue-rotate(-15deg); filter: hue-rotate(-10deg);
} }
`; `;
@@ -71,27 +71,27 @@ const glowPulse = keyframes`
50% { opacity: 0.6; transform: scale(1.05); } 50% { opacity: 0.6; transform: scale(1.05); }
`; `;
// 一级分类颜色映射（基础色 - 半透明玻璃态） // 一级分类颜色映射（基础色 - 半透明玻璃态 - 黑金主题）
const LV1_COLORS = { const LV1_COLORS = {
'人工智能': '#8B5CF6', '人工智能': '#EAB308', // 金色
'半导体': '#3B82F6', '半导体': '#F59E0B', // 琥珀色
'机器人': '#10B981', '机器人': '#CA8A04', // 深金色
'消费电子': '#F59E0B', '消费电子': '#FACC15', // 亮金色
'智能驾驶与汽车': '#EF4444', '智能驾驶与汽车': '#D97706', // 橙金色
'新能源与电力': '#06B6D4', '新能源与电力': '#FDE047', // 浅金色
'空天经济': '#6366F1', '空天经济': '#A16207', // 古铜金
'国防军工': '#EC4899', '国防军工': '#B45309', // 铜色
'政策与主题': '#14B8A6', '政策与主题': '#EAB308', // 金色
'周期与材料': '#F97316', '周期与材料': '#F59E0B', // 琥珀色
'大消费': '#A855F7', '大消费': '#FACC15', // 亮金色
'数字经济与金融科技': '#22D3EE', '数字经济与金融科技': '#CA8A04', // 深金色
'全球宏观与贸易': '#84CC16', '全球宏观与贸易': '#D97706', // 橙金色
'医药健康': '#E879F9', '医药健康': '#FDE047', // 浅金色
'前沿科技': '#38BDF8', '前沿科技': '#EAB308', // 金色
}; };
// 根据涨跌幅获取颜色（涨红跌绿 - 玻璃态半透明） // 根据涨跌幅获取颜色（涨红跌绿 - 玻璃态半透明）
const getChangeColor = (value, baseColor = '#64748B') => { const getChangeColor = (value, baseColor = '#A16207') => {
if (value === null || value === undefined) return baseColor; if (value === null || value === undefined) return baseColor;
// 涨 - 红色系（调整透明度使其更柔和） // 涨 - 红色系（调整透明度使其更柔和）
@@ -681,7 +681,7 @@ const ForceGraphView = ({
gapWidth: 4, gapWidth: 4,
borderRadius: 16, borderRadius: 16,
shadowBlur: 20, shadowBlur: 20,
shadowColor: 'rgba(139, 92, 246, 0.3)', shadowColor: 'rgba(234, 179, 8, 0.3)',
}, },
upperLabel: { upperLabel: {
show: true, show: true,
@@ -717,7 +717,7 @@ const ForceGraphView = ({
gapWidth: 3, gapWidth: 3,
borderRadius: 12, borderRadius: 12,
shadowBlur: 10, shadowBlur: 10,
shadowColor: 'rgba(139, 92, 246, 0.2)', shadowColor: 'rgba(234, 179, 8, 0.2)',
}, },
upperLabel: { upperLabel: {
show: true, show: true,
@@ -810,12 +810,12 @@ const ForceGraphView = ({
backgroundColor: 'transparent', backgroundColor: 'transparent',
tooltip: { tooltip: {
trigger: 'item', trigger: 'item',
backgroundColor: 'rgba(15, 23, 42, 0.9)', backgroundColor: 'rgba(12, 10, 9, 0.95)',
borderColor: 'rgba(139, 92, 246, 0.4)', borderColor: 'rgba(234, 179, 8, 0.4)',
borderWidth: 1, borderWidth: 1,
borderRadius: 16, borderRadius: 16,
padding: [14, 18], padding: [14, 18],
extraCssText: 'backdrop-filter: blur(20px); box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4);', extraCssText: 'backdrop-filter: blur(20px); box-shadow: 0 8px 32px rgba(0, 0, 0, 0.5);',
textStyle: { textStyle: {
color: '#E2E8F0', color: '#E2E8F0',
fontSize: 13, fontSize: 13,
@@ -871,11 +871,11 @@ const ForceGraphView = ({
${data.conceptCount ? `<span>📁 ${data.conceptCount} 个概念</span>` : ''} ${data.conceptCount ? `<span>📁 ${data.conceptCount} 个概念</span>` : ''}
</div> </div>
${data.level === 'concept' ? ` ${data.level === 'concept' ? `
<div style="color: #A78BFA; font-size: 11px; margin-top: 10px; padding-top: 10px; border-top: 1px solid rgba(255,255,255,0.1);"> <div style="color: #FACC15; font-size: 11px; margin-top: 10px; padding-top: 10px; border-top: 1px solid rgba(255,255,255,0.1);">
🔗 点击查看概念详情 🔗 点击查看概念详情
</div> </div>
` : data.level !== 'concept' ? ` ` : data.level !== 'concept' ? `
<div style="color: #64748B; font-size: 11px; margin-top: 10px; padding-top: 10px; border-top: 1px solid rgba(255,255,255,0.1);"> <div style="color: #A1A1AA; font-size: 11px; margin-top: 10px; padding-top: 10px; border-top: 1px solid rgba(255,255,255,0.1);">
📂 点击进入查看子分类 📂 点击进入查看子分类
</div> </div>
` : ''} ` : ''}
@@ -911,7 +911,7 @@ const ForceGraphView = ({
emphasis: { emphasis: {
itemStyle: { itemStyle: {
shadowBlur: 30, shadowBlur: 30,
shadowColor: 'rgba(139, 92, 246, 0.5)', shadowColor: 'rgba(234, 179, 8, 0.5)',
borderColor: 'rgba(255, 255, 255, 0.3)', borderColor: 'rgba(255, 255, 255, 0.3)',
}, },
}, },
@@ -1014,7 +1014,7 @@ const ForceGraphView = ({
return ( return (
<Center <Center
h="500px" h="500px"
bg="rgba(15, 23, 42, 0.6)" bg="rgba(12, 10, 9, 0.6)"
borderRadius="3xl" borderRadius="3xl"
backdropFilter="blur(20px)" backdropFilter="blur(20px)"
border="1px solid" border="1px solid"
@@ -1027,13 +1027,13 @@ const ForceGraphView = ({
<Box <Box
position="absolute" position="absolute"
inset={-4} inset={-4}
bg="purple.500" bg="yellow.500"
borderRadius="full" borderRadius="full"
filter="blur(20px)" filter="blur(20px)"
opacity={0.4} opacity={0.4}
animation={`${glowPulse} 2s ease-in-out infinite`} animation={`${glowPulse} 2s ease-in-out infinite`}
/> />
<Spinner size="xl" color="purple.400" thickness="4px" /> <Spinner size="xl" color="yellow.400" thickness="4px" />
</Box> </Box>
<Text color="gray.400" fontSize="sm">正在构建矩形树图...</Text> <Text color="gray.400" fontSize="sm">正在构建矩形树图...</Text>
</VStack> </VStack>
@@ -1045,7 +1045,7 @@ const ForceGraphView = ({
return ( return (
<Center <Center
h="500px" h="500px"
bg="rgba(15, 23, 42, 0.6)" bg="rgba(12, 10, 9, 0.6)"
borderRadius="3xl" borderRadius="3xl"
backdropFilter="blur(20px)" backdropFilter="blur(20px)"
border="1px solid" border="1px solid"
@@ -1055,7 +1055,7 @@ const ForceGraphView = ({
<Icon as={FaLayerGroup} boxSize={16} color="gray.600" /> <Icon as={FaLayerGroup} boxSize={16} color="gray.600" />
<Text color="gray.400">加载失败：{error}</Text> <Text color="gray.400">加载失败：{error}</Text>
<Button <Button
colorScheme="purple" colorScheme="yellow"
size="sm" size="sm"
onClick={fetchHierarchy} onClick={fetchHierarchy}
borderRadius="full" borderRadius="full"
@@ -1084,26 +1084,26 @@ const ForceGraphView = ({
h={containerHeight} h={containerHeight}
bg="transparent" bg="transparent"
> >
{/* 极光背景层 */} {/* 极光背景层 - 黑金主题 */}
<Box <Box
position="absolute" position="absolute"
top={0} top={0}
left={0} left={0}
right={0} right={0}
bottom={0} bottom={0}
bg="linear-gradient(135deg, #0F172A 0%, #1E1B4B 25%, #312E81 50%, #1E1B4B 75%, #0F172A 100%)" bg="linear-gradient(135deg, #0C0A09 0%, #1C1917 25%, #292524 50%, #1C1917 75%, #0C0A09 100%)"
backgroundSize="400% 400%" backgroundSize="400% 400%"
animation={`${auroraAnimation} 15s ease infinite`} animation={`${auroraAnimation} 15s ease infinite`}
/> />
{/* 弥散光晕层 */} {/* 弥散光晕层 - 黑金主题 */}
<Box <Box
position="absolute" position="absolute"
top="20%" top="20%"
left="10%" left="10%"
w="300px" w="300px"
h="300px" h="300px"
bg="radial-gradient(circle, rgba(139, 92, 246, 0.3) 0%, transparent 70%)" bg="radial-gradient(circle, rgba(234, 179, 8, 0.25) 0%, transparent 70%)"
filter="blur(60px)" filter="blur(60px)"
pointerEvents="none" pointerEvents="none"
animation={`${glowPulse} 4s ease-in-out infinite`} animation={`${glowPulse} 4s ease-in-out infinite`}
@@ -1114,7 +1114,7 @@ const ForceGraphView = ({
right="15%" right="15%"
w="250px" w="250px"
h="250px" h="250px"
bg="radial-gradient(circle, rgba(59, 130, 246, 0.25) 0%, transparent 70%)" bg="radial-gradient(circle, rgba(245, 158, 11, 0.2) 0%, transparent 70%)"
filter="blur(50px)" filter="blur(50px)"
pointerEvents="none" pointerEvents="none"
animation={`${glowPulse} 5s ease-in-out infinite 1s`} animation={`${glowPulse} 5s ease-in-out infinite 1s`}
@@ -1125,7 +1125,7 @@ const ForceGraphView = ({
right="30%" right="30%"
w="200px" w="200px"
h="200px" h="200px"
bg="radial-gradient(circle, rgba(236, 72, 153, 0.2) 0%, transparent 70%)" bg="radial-gradient(circle, rgba(217, 119, 6, 0.15) 0%, transparent 70%)"
filter="blur(40px)" filter="blur(40px)"
pointerEvents="none" pointerEvents="none"
animation={`${glowPulse} 6s ease-in-out infinite 2s`} animation={`${glowPulse} 6s ease-in-out infinite 2s`}
@@ -1134,7 +1134,7 @@ const ForceGraphView = ({
{/* 顶部工具栏 - 毛玻璃风格 */} {/* 顶部工具栏 - 毛玻璃风格 */}
<Flex <Flex
position="absolute" position="absolute"
top={4} top={isFullscreen ? '70px' : 4}
left={4} left={4}
right={4} right={4}
justify="space-between" justify="space-between"
@@ -1159,8 +1159,8 @@ const ForceGraphView = ({
borderColor="whiteAlpha.200" borderColor="whiteAlpha.200"
borderRadius="full" borderRadius="full"
_hover={{ _hover={{
bg: 'rgba(139, 92, 246, 0.4)', bg: 'rgba(234, 179, 8, 0.4)',
borderColor: 'purple.400', borderColor: 'yellow.400',
transform: 'scale(1.05)', transform: 'scale(1.05)',
}} }}
transition="all 0.2s" transition="all 0.2s"
@@ -1179,7 +1179,7 @@ const ForceGraphView = ({
borderColor="whiteAlpha.150" borderColor="whiteAlpha.150"
boxShadow="0 8px 32px rgba(0, 0, 0, 0.3), inset 0 1px 0 rgba(255, 255, 255, 0.1)" boxShadow="0 8px 32px rgba(0, 0, 0, 0.3), inset 0 1px 0 rgba(255, 255, 255, 0.1)"
> >
<Icon as={FaTh} color="purple.300" /> <Icon as={FaTh} color="yellow.400" />
<Text color="white" fontWeight="bold" fontSize="sm"> <Text color="white" fontWeight="bold" fontSize="sm">
概念矩形树图 概念矩形树图
</Text> </Text>
@@ -1202,7 +1202,7 @@ const ForceGraphView = ({
<Icon as={FaChevronRight} color="whiteAlpha.400" boxSize={3} /> <Icon as={FaChevronRight} color="whiteAlpha.400" boxSize={3} />
)} )}
<Text <Text
color={index === breadcrumbItems.length - 1 ? 'purple.300' : 'whiteAlpha.700'} color={index === breadcrumbItems.length - 1 ? 'yellow.400' : 'whiteAlpha.700'}
fontSize="sm" fontSize="sm"
fontWeight={index === breadcrumbItems.length - 1 ? 'bold' : 'normal'} fontWeight={index === breadcrumbItems.length - 1 ? 'bold' : 'normal'}
cursor={index < breadcrumbItems.length - 1 ? 'pointer' : 'default'} cursor={index < breadcrumbItems.length - 1 ? 'pointer' : 'default'}
@@ -1224,7 +1224,7 @@ const ForceGraphView = ({
{/* 右侧控制按钮 */} {/* 右侧控制按钮 */}
<HStack spacing={2} pointerEvents="auto"> <HStack spacing={2} pointerEvents="auto">
{priceLoading && <Spinner size="sm" color="purple.300" />} {priceLoading && <Spinner size="sm" color="yellow.400" />}
{drillPath && ( {drillPath && (
<Tooltip label="返回全部" placement="left"> <Tooltip label="返回全部" placement="left">
@@ -1239,8 +1239,8 @@ const ForceGraphView = ({
borderColor="whiteAlpha.200" borderColor="whiteAlpha.200"
borderRadius="full" borderRadius="full"
_hover={{ _hover={{
bg: 'rgba(139, 92, 246, 0.4)', bg: 'rgba(234, 179, 8, 0.4)',
borderColor: 'purple.400', borderColor: 'yellow.400',
transform: 'scale(1.05)', transform: 'scale(1.05)',
}} }}
transition="all 0.2s" transition="all 0.2s"

47
src/views/Concept/index.js
View File

@@ -1760,7 +1760,7 @@ const ConceptCenter = () => {
</HStack> </HStack>
<ButtonGroup size="sm" isAttached variant="outline"> <ButtonGroup size="sm" isAttached variant="outline">
<Tooltip label="3D星图" placement="top"> <Tooltip label="概念矩形树图" placement="top">
<IconButton <IconButton
icon={<FaCube />} icon={<FaCube />}
onClick={() => { onClick={() => {
@@ -1769,14 +1769,14 @@ const ConceptCenter = () => {
setViewMode('force3d'); setViewMode('force3d');
} }
}} }}
bg={viewMode === 'force3d' ? 'purple.500' : 'transparent'} bg={viewMode === 'force3d' ? 'yellow.500' : 'transparent'}
color={viewMode === 'force3d' ? 'white' : 'whiteAlpha.700'} color={viewMode === 'force3d' ? 'gray.900' : 'whiteAlpha.700'}
borderColor="whiteAlpha.300" borderColor="whiteAlpha.300"
_hover={{ _hover={{
bg: viewMode === 'force3d' ? 'purple.400' : 'whiteAlpha.100', bg: viewMode === 'force3d' ? 'yellow.400' : 'whiteAlpha.100',
boxShadow: viewMode === 'force3d' ? '0 0 10px rgba(139, 92, 246, 0.4)' : 'none', boxShadow: viewMode === 'force3d' ? '0 0 10px rgba(234, 179, 8, 0.4)' : 'none',
}} }}
aria-label="3D星图" aria-label="概念矩形树图"
/> />
</Tooltip> </Tooltip>
<Tooltip label="层级图" placement="top"> <Tooltip label="层级图" placement="top">
@@ -1788,35 +1788,16 @@ const ConceptCenter = () => {
setViewMode('hierarchy'); setViewMode('hierarchy');
} }
}} }}
bg={viewMode === 'hierarchy' ? 'purple.500' : 'transparent'} bg={viewMode === 'hierarchy' ? 'yellow.500' : 'transparent'}
color={viewMode === 'hierarchy' ? 'white' : 'whiteAlpha.700'} color={viewMode === 'hierarchy' ? 'gray.900' : 'whiteAlpha.700'}
borderColor="whiteAlpha.300" borderColor="whiteAlpha.300"
_hover={{ _hover={{
bg: viewMode === 'hierarchy' ? 'purple.400' : 'whiteAlpha.100', bg: viewMode === 'hierarchy' ? 'yellow.400' : 'whiteAlpha.100',
boxShadow: viewMode === 'hierarchy' ? '0 0 10px rgba(139, 92, 246, 0.4)' : 'none', boxShadow: viewMode === 'hierarchy' ? '0 0 10px rgba(234, 179, 8, 0.4)' : 'none',
}} }}
aria-label="层级图" aria-label="层级图"
/> />
</Tooltip> </Tooltip>
<Tooltip label="网格视图" placement="top">
<IconButton
icon={<FaThLarge />}
onClick={() => {
if (viewMode !== 'grid') {
trackViewModeChanged('grid', viewMode);
setViewMode('grid');
}
}}
bg={viewMode === 'grid' ? 'purple.500' : 'transparent'}
color={viewMode === 'grid' ? 'white' : 'whiteAlpha.700'}
borderColor="whiteAlpha.300"
_hover={{
bg: viewMode === 'grid' ? 'purple.400' : 'whiteAlpha.100',
boxShadow: viewMode === 'grid' ? '0 0 10px rgba(139, 92, 246, 0.4)' : 'none',
}}
aria-label="网格视图"
/>
</Tooltip>
<Tooltip label="列表视图" placement="top"> <Tooltip label="列表视图" placement="top">
<IconButton <IconButton
icon={<FaList />} icon={<FaList />}
@@ -1826,12 +1807,12 @@ const ConceptCenter = () => {
setViewMode('list'); setViewMode('list');
} }
}} }}
bg={viewMode === 'list' ? 'purple.500' : 'transparent'} bg={viewMode === 'list' ? 'yellow.500' : 'transparent'}
color={viewMode === 'list' ? 'white' : 'whiteAlpha.700'} color={viewMode === 'list' ? 'gray.900' : 'whiteAlpha.700'}
borderColor="whiteAlpha.300" borderColor="whiteAlpha.300"
_hover={{ _hover={{
bg: viewMode === 'list' ? 'purple.400' : 'whiteAlpha.100', bg: viewMode === 'list' ? 'yellow.400' : 'whiteAlpha.100',
boxShadow: viewMode === 'list' ? '0 0 10px rgba(139, 92, 246, 0.4)' : 'none', boxShadow: viewMode === 'list' ? '0 0 10px rgba(234, 179, 8, 0.4)' : 'none',
}} }}
aria-label="列表视图" aria-label="列表视图"
/> />