From 89f581aeed330be2b0da74a02a4da74dd6f3cddc Mon Sep 17 00:00:00 2001
From: zzlgreat <zzlgreat@gmail.com>
Date: Fri, 5 Dec 2025 19:18:14 +0800
Subject: [PATCH] update pay ui

---
 .../Concept/components/ForceGraphView.js      | 94 +++++++++----------
 src/views/Concept/index.js                    | 47 +++-------
 2 files changed, 61 insertions(+), 80 deletions(-)

diff --git a/src/views/Concept/components/ForceGraphView.js b/src/views/Concept/components/ForceGraphView.js
index 933089be..9986e75c 100644
--- a/src/views/Concept/components/ForceGraphView.js
+++ b/src/views/Concept/components/ForceGraphView.js
@@ -45,7 +45,7 @@ import {
 } from 'react-icons/fa';
 import { logger } from '../../../utils/logger';
 
-// 极光动画
+// 极光动画 - 黑金色主题
 const auroraAnimation = keyframes`
     0%, 100% {
         background-position: 0% 50%;
@@ -53,7 +53,7 @@ const auroraAnimation = keyframes`
     }
     25% {
         background-position: 50% 100%;
-        filter: hue-rotate(15deg);
+        filter: hue-rotate(10deg);
     }
     50% {
         background-position: 100% 50%;
@@ -61,7 +61,7 @@ const auroraAnimation = keyframes`
     }
     75% {
         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); }
 `;
 
-// 一级分类颜色映射（基础色 - 半透明玻璃态）
+// 一级分类颜色映射（基础色 - 半透明玻璃态 - 黑金主题）
 const LV1_COLORS = {
-    '人工智能': '#8B5CF6',
-    '半导体': '#3B82F6',
-    '机器人': '#10B981',
-    '消费电子': '#F59E0B',
-    '智能驾驶与汽车': '#EF4444',
-    '新能源与电力': '#06B6D4',
-    '空天经济': '#6366F1',
-    '国防军工': '#EC4899',
-    '政策与主题': '#14B8A6',
-    '周期与材料': '#F97316',
-    '大消费': '#A855F7',
-    '数字经济与金融科技': '#22D3EE',
-    '全球宏观与贸易': '#84CC16',
-    '医药健康': '#E879F9',
-    '前沿科技': '#38BDF8',
+    '人工智能': '#EAB308',      // 金色
+    '半导体': '#F59E0B',        // 琥珀色
+    '机器人': '#CA8A04',        // 深金色
+    '消费电子': '#FACC15',      // 亮金色
+    '智能驾驶与汽车': '#D97706', // 橙金色
+    '新能源与电力': '#FDE047',   // 浅金色
+    '空天经济': '#A16207',       // 古铜金
+    '国防军工': '#B45309',       // 铜色
+    '政策与主题': '#EAB308',     // 金色
+    '周期与材料': '#F59E0B',     // 琥珀色
+    '大消费': '#FACC15',         // 亮金色
+    '数字经济与金融科技': '#CA8A04', // 深金色
+    '全球宏观与贸易': '#D97706', // 橙金色
+    '医药健康': '#FDE047',       // 浅金色
+    '前沿科技': '#EAB308',       // 金色
 };
 
 // 根据涨跌幅获取颜色（涨红跌绿 - 玻璃态半透明）
-const getChangeColor = (value, baseColor = '#64748B') => {
+const getChangeColor = (value, baseColor = '#A16207') => {
     if (value === null || value === undefined) return baseColor;
 
     // 涨 - 红色系（调整透明度使其更柔和）
@@ -681,7 +681,7 @@ const ForceGraphView = ({
                     gapWidth: 4,
                     borderRadius: 16,
                     shadowBlur: 20,
-                    shadowColor: 'rgba(139, 92, 246, 0.3)',
+                    shadowColor: 'rgba(234, 179, 8, 0.3)',
                 },
                 upperLabel: {
                     show: true,
@@ -717,7 +717,7 @@ const ForceGraphView = ({
                     gapWidth: 3,
                     borderRadius: 12,
                     shadowBlur: 10,
-                    shadowColor: 'rgba(139, 92, 246, 0.2)',
+                    shadowColor: 'rgba(234, 179, 8, 0.2)',
                 },
                 upperLabel: {
                     show: true,
@@ -810,12 +810,12 @@ const ForceGraphView = ({
             backgroundColor: 'transparent',
             tooltip: {
                 trigger: 'item',
-                backgroundColor: 'rgba(15, 23, 42, 0.9)',
-                borderColor: 'rgba(139, 92, 246, 0.4)',
+                backgroundColor: 'rgba(12, 10, 9, 0.95)',
+                borderColor: 'rgba(234, 179, 8, 0.4)',
                 borderWidth: 1,
                 borderRadius: 16,
                 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: {
                     color: '#E2E8F0',
                     fontSize: 13,
@@ -871,11 +871,11 @@ const ForceGraphView = ({
                                 ${data.conceptCount ? `<span>📁 ${data.conceptCount} 个概念</span>` : ''}
                             </div>
                             ${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>
                             ` : 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>
                             ` : ''}
@@ -911,7 +911,7 @@ const ForceGraphView = ({
                     emphasis: {
                         itemStyle: {
                             shadowBlur: 30,
-                            shadowColor: 'rgba(139, 92, 246, 0.5)',
+                            shadowColor: 'rgba(234, 179, 8, 0.5)',
                             borderColor: 'rgba(255, 255, 255, 0.3)',
                         },
                     },
@@ -1014,7 +1014,7 @@ const ForceGraphView = ({
         return (
             <Center
                 h="500px"
-                bg="rgba(15, 23, 42, 0.6)"
+                bg="rgba(12, 10, 9, 0.6)"
                 borderRadius="3xl"
                 backdropFilter="blur(20px)"
                 border="1px solid"
@@ -1027,13 +1027,13 @@ const ForceGraphView = ({
                         <Box
                             position="absolute"
                             inset={-4}
-                            bg="purple.500"
+                            bg="yellow.500"
                             borderRadius="full"
                             filter="blur(20px)"
                             opacity={0.4}
                             animation={`${glowPulse} 2s ease-in-out infinite`}
                         />
-                        <Spinner size="xl" color="purple.400" thickness="4px" />
+                        <Spinner size="xl" color="yellow.400" thickness="4px" />
                     </Box>
                     <Text color="gray.400" fontSize="sm">正在构建矩形树图...</Text>
                 </VStack>
@@ -1045,7 +1045,7 @@ const ForceGraphView = ({
         return (
             <Center
                 h="500px"
-                bg="rgba(15, 23, 42, 0.6)"
+                bg="rgba(12, 10, 9, 0.6)"
                 borderRadius="3xl"
                 backdropFilter="blur(20px)"
                 border="1px solid"
@@ -1055,7 +1055,7 @@ const ForceGraphView = ({
                     <Icon as={FaLayerGroup} boxSize={16} color="gray.600" />
                     <Text color="gray.400">加载失败：{error}</Text>
                     <Button
-                        colorScheme="purple"
+                        colorScheme="yellow"
                         size="sm"
                         onClick={fetchHierarchy}
                         borderRadius="full"
@@ -1084,26 +1084,26 @@ const ForceGraphView = ({
             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%)"
+                bg="linear-gradient(135deg, #0C0A09 0%, #1C1917 25%, #292524 50%, #1C1917 75%, #0C0A09 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%)"
+                bg="radial-gradient(circle, rgba(234, 179, 8, 0.25) 0%, transparent 70%)"
                 filter="blur(60px)"
                 pointerEvents="none"
                 animation={`${glowPulse} 4s ease-in-out infinite`}
@@ -1114,7 +1114,7 @@ const ForceGraphView = ({
                 right="15%"
                 w="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)"
                 pointerEvents="none"
                 animation={`${glowPulse} 5s ease-in-out infinite 1s`}
@@ -1125,7 +1125,7 @@ const ForceGraphView = ({
                 right="30%"
                 w="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)"
                 pointerEvents="none"
                 animation={`${glowPulse} 6s ease-in-out infinite 2s`}
@@ -1134,7 +1134,7 @@ const ForceGraphView = ({
             {/* 顶部工具栏 - 毛玻璃风格 */}
             <Flex
                 position="absolute"
-                top={4}
+                top={isFullscreen ? '70px' : 4}
                 left={4}
                 right={4}
                 justify="space-between"
@@ -1159,8 +1159,8 @@ const ForceGraphView = ({
                                     borderColor="whiteAlpha.200"
                                     borderRadius="full"
                                     _hover={{
-                                        bg: 'rgba(139, 92, 246, 0.4)',
-                                        borderColor: 'purple.400',
+                                        bg: 'rgba(234, 179, 8, 0.4)',
+                                        borderColor: 'yellow.400',
                                         transform: 'scale(1.05)',
                                     }}
                                     transition="all 0.2s"
@@ -1179,7 +1179,7 @@ const ForceGraphView = ({
                             borderColor="whiteAlpha.150"
                             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>
@@ -1202,7 +1202,7 @@ const ForceGraphView = ({
                                         <Icon as={FaChevronRight} color="whiteAlpha.400" boxSize={3} />
                                     )}
                                     <Text
-                                        color={index === breadcrumbItems.length - 1 ? 'purple.300' : 'whiteAlpha.700'}
+                                        color={index === breadcrumbItems.length - 1 ? 'yellow.400' : 'whiteAlpha.700'}
                                         fontSize="sm"
                                         fontWeight={index === breadcrumbItems.length - 1 ? 'bold' : 'normal'}
                                         cursor={index < breadcrumbItems.length - 1 ? 'pointer' : 'default'}
@@ -1224,7 +1224,7 @@ const ForceGraphView = ({
 
                 {/* 右侧控制按钮 */}
                 <HStack spacing={2} pointerEvents="auto">
-                    {priceLoading && <Spinner size="sm" color="purple.300" />}
+                    {priceLoading && <Spinner size="sm" color="yellow.400" />}
 
                     {drillPath && (
                         <Tooltip label="返回全部" placement="left">
@@ -1239,8 +1239,8 @@ const ForceGraphView = ({
                                 borderColor="whiteAlpha.200"
                                 borderRadius="full"
                                 _hover={{
-                                    bg: 'rgba(139, 92, 246, 0.4)',
-                                    borderColor: 'purple.400',
+                                    bg: 'rgba(234, 179, 8, 0.4)',
+                                    borderColor: 'yellow.400',
                                     transform: 'scale(1.05)',
                                 }}
                                 transition="all 0.2s"
diff --git a/src/views/Concept/index.js b/src/views/Concept/index.js
index 89bdd0b5..ba0398b7 100644
--- a/src/views/Concept/index.js
+++ b/src/views/Concept/index.js
@@ -1760,7 +1760,7 @@ const ConceptCenter = () => {
                                     </HStack>
 
                                     <ButtonGroup size="sm" isAttached variant="outline">
-                                        <Tooltip label="3D星图" placement="top">
+                                        <Tooltip label="概念矩形树图" placement="top">
                                             <IconButton
                                                 icon={<FaCube />}
                                                 onClick={() => {
@@ -1769,14 +1769,14 @@ const ConceptCenter = () => {
                                                         setViewMode('force3d');
                                                     }
                                                 }}
-                                                bg={viewMode === 'force3d' ? 'purple.500' : 'transparent'}
-                                                color={viewMode === 'force3d' ? 'white' : 'whiteAlpha.700'}
+                                                bg={viewMode === 'force3d' ? 'yellow.500' : 'transparent'}
+                                                color={viewMode === 'force3d' ? 'gray.900' : 'whiteAlpha.700'}
                                                 borderColor="whiteAlpha.300"
                                                 _hover={{
-                                                    bg: viewMode === 'force3d' ? 'purple.400' : 'whiteAlpha.100',
-                                                    boxShadow: viewMode === 'force3d' ? '0 0 10px rgba(139, 92, 246, 0.4)' : 'none',
+                                                    bg: viewMode === 'force3d' ? 'yellow.400' : 'whiteAlpha.100',
+                                                    boxShadow: viewMode === 'force3d' ? '0 0 10px rgba(234, 179, 8, 0.4)' : 'none',
                                                 }}
-                                                aria-label="3D星图"
+                                                aria-label="概念矩形树图"
                                             />
                                         </Tooltip>
                                         <Tooltip label="层级图" placement="top">
@@ -1788,35 +1788,16 @@ const ConceptCenter = () => {
                                                         setViewMode('hierarchy');
                                                     }
                                                 }}
-                                                bg={viewMode === 'hierarchy' ? 'purple.500' : 'transparent'}
-                                                color={viewMode === 'hierarchy' ? 'white' : 'whiteAlpha.700'}
+                                                bg={viewMode === 'hierarchy' ? 'yellow.500' : 'transparent'}
+                                                color={viewMode === 'hierarchy' ? 'gray.900' : 'whiteAlpha.700'}
                                                 borderColor="whiteAlpha.300"
                                                 _hover={{
-                                                    bg: viewMode === 'hierarchy' ? 'purple.400' : 'whiteAlpha.100',
-                                                    boxShadow: viewMode === 'hierarchy' ? '0 0 10px rgba(139, 92, 246, 0.4)' : 'none',
+                                                    bg: viewMode === 'hierarchy' ? 'yellow.400' : 'whiteAlpha.100',
+                                                    boxShadow: viewMode === 'hierarchy' ? '0 0 10px rgba(234, 179, 8, 0.4)' : 'none',
                                                 }}
                                                 aria-label="层级图"
                                             />
                                         </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">
                                             <IconButton
                                                 icon={<FaList />}
@@ -1826,12 +1807,12 @@ const ConceptCenter = () => {
                                                         setViewMode('list');
                                                     }
                                                 }}
-                                                bg={viewMode === 'list' ? 'purple.500' : 'transparent'}
-                                                color={viewMode === 'list' ? 'white' : 'whiteAlpha.700'}
+                                                bg={viewMode === 'list' ? 'yellow.500' : 'transparent'}
+                                                color={viewMode === 'list' ? 'gray.900' : 'whiteAlpha.700'}
                                                 borderColor="whiteAlpha.300"
                                                 _hover={{
-                                                    bg: viewMode === 'list' ? 'purple.400' : 'whiteAlpha.100',
-                                                    boxShadow: viewMode === 'list' ? '0 0 10px rgba(139, 92, 246, 0.4)' : 'none',
+                                                    bg: viewMode === 'list' ? 'yellow.400' : 'whiteAlpha.100',
+                                                    boxShadow: viewMode === 'list' ? '0 0 10px rgba(234, 179, 8, 0.4)' : 'none',
                                                 }}
                                                 aria-label="列表视图"
                                             />