From b60c196f9e911449122633e691f822b1b6d44c50 Mon Sep 17 00:00:00 2001
From: zzlgreat <zzlgreat@gmail.com>
Date: Fri, 5 Dec 2025 15:26:45 +0800
Subject: [PATCH] update pay ui

---
 src/components/TradeDatePicker/index.tsx |  51 +++++-
 src/views/Concept/index.js               | 218 +++++++++++++++++++++--
 2 files changed, 244 insertions(+), 25 deletions(-)

diff --git a/src/components/TradeDatePicker/index.tsx b/src/components/TradeDatePicker/index.tsx
index 362093b5..a3df510e 100644
--- a/src/components/TradeDatePicker/index.tsx
+++ b/src/components/TradeDatePicker/index.tsx
@@ -29,6 +29,8 @@ export interface TradeDatePickerProps {
   inputWidth?: string | object;
   /** 是否显示标签图标 */
   showIcon?: boolean;
+  /** 是否使用深色模式（强制覆盖 Chakra 颜色模式） */
+  isDarkMode?: boolean;
 }
 
 /**
@@ -47,15 +49,38 @@ const TradeDatePicker: React.FC<TradeDatePickerProps> = ({
   label = '交易日期',
   inputWidth = { base: '100%', lg: '200px' },
   showIcon = true,
+  isDarkMode = false,
 }) => {
-  // 颜色主题
-  const labelColor = useColorModeValue('purple.700', 'purple.300');
-  const iconColor = useColorModeValue('purple.500', 'purple.400');
-  const inputBorderColor = useColorModeValue('purple.200', 'purple.600');
-  const tipBg = useColorModeValue('blue.50', 'blue.900');
-  const tipBorderColor = useColorModeValue('blue.200', 'blue.600');
-  const tipTextColor = useColorModeValue('blue.600', 'blue.200');
-  const tipIconColor = useColorModeValue('blue.500', 'blue.300');
+  // 颜色主题 - 支持 isDarkMode 强制覆盖
+  const defaultLabelColor = useColorModeValue('purple.700', 'purple.300');
+  const defaultIconColor = useColorModeValue('purple.500', 'purple.400');
+  const defaultInputBorderColor = useColorModeValue('purple.200', 'purple.600');
+  const defaultTipBg = useColorModeValue('blue.50', 'blue.900');
+  const defaultTipBorderColor = useColorModeValue('blue.200', 'blue.600');
+  const defaultTipTextColor = useColorModeValue('blue.600', 'blue.200');
+  const defaultTipIconColor = useColorModeValue('blue.500', 'blue.300');
+
+  // 深色模式专用颜色
+  const darkModeColors = {
+    labelColor: 'white',
+    iconColor: 'cyan.400',
+    inputBorderColor: 'whiteAlpha.300',
+    inputBg: 'whiteAlpha.50',
+    inputColor: 'white',
+    tipBg: 'rgba(59, 130, 246, 0.15)',
+    tipBorderColor: 'blue.500',
+    tipTextColor: 'blue.200',
+    tipIconColor: 'blue.300',
+  };
+
+  // 根据 isDarkMode 选择颜色
+  const labelColor = isDarkMode ? darkModeColors.labelColor : defaultLabelColor;
+  const iconColor = isDarkMode ? darkModeColors.iconColor : defaultIconColor;
+  const inputBorderColor = isDarkMode ? darkModeColors.inputBorderColor : defaultInputBorderColor;
+  const tipBg = isDarkMode ? darkModeColors.tipBg : defaultTipBg;
+  const tipBorderColor = isDarkMode ? darkModeColors.tipBorderColor : defaultTipBorderColor;
+  const tipTextColor = isDarkMode ? darkModeColors.tipTextColor : defaultTipTextColor;
+  const tipIconColor = isDarkMode ? darkModeColors.tipIconColor : defaultTipIconColor;
 
   // 使用默认日期初始化（仅在 value 为 null 且有 defaultDate 时）
   React.useEffect(() => {
@@ -103,10 +128,18 @@ const TradeDatePicker: React.FC<TradeDatePickerProps> = ({
         min={minDateStr}
         max={maxDateStr}
         width={inputWidth}
-        focusBorderColor="purple.500"
+        focusBorderColor="purple.400"
         borderColor={inputBorderColor}
         borderRadius="lg"
         fontWeight="medium"
+        bg={isDarkMode ? darkModeColors.inputBg : undefined}
+        color={isDarkMode ? darkModeColors.inputColor : undefined}
+        _hover={{ borderColor: isDarkMode ? 'purple.400' : 'purple.300' }}
+        sx={isDarkMode ? {
+          '&::-webkit-calendar-picker-indicator': {
+            filter: 'invert(1)',
+          },
+        } : undefined}
       />
 
       {/* 最新交易日期提示 */}
diff --git a/src/views/Concept/index.js b/src/views/Concept/index.js
index 06fe87d2..bef70f23 100644
--- a/src/views/Concept/index.js
+++ b/src/views/Concept/index.js
@@ -132,6 +132,168 @@ const pulseAnimation = keyframes`
   100% { transform: scale(1); }
 `;
 
+// K线流动动画 - 模拟股票走势
+const klineFlowAnimation = keyframes`
+  0% { transform: translateX(-100%); }
+  100% { transform: translateX(100%); }
+`;
+
+// 网格扫描动画
+const gridScanAnimation = keyframes`
+  0% { opacity: 0.3; transform: translateY(0); }
+  50% { opacity: 0.6; transform: translateY(-20px); }
+  100% { opacity: 0.3; transform: translateY(0); }
+`;
+
+// 脉冲光点动画
+const pulseGlowAnimation = keyframes`
+  0%, 100% { opacity: 0.4; transform: scale(1); }
+  50% { opacity: 0.8; transform: scale(1.2); }
+`;
+
+/**
+ * 金融数据流动背景组件 - 模拟K线走势
+ */
+const FinanceFlowBackground = () => (
+    <Box
+        position="absolute"
+        top={0}
+        left={0}
+        right={0}
+        bottom={0}
+        overflow="hidden"
+        pointerEvents="none"
+        zIndex={0}
+    >
+        {/* 深色渐变底层 */}
+        <Box
+            position="absolute"
+            top={0}
+            left={0}
+            right={0}
+            bottom={0}
+            bgGradient="linear(to-br, gray.900, #0f172a, gray.900)"
+        />
+
+        {/* 网格线背景 */}
+        <Box
+            position="absolute"
+            top={0}
+            left={0}
+            right={0}
+            bottom={0}
+            opacity={0.08}
+            backgroundImage={`
+                linear-gradient(rgba(139, 92, 246, 0.3) 1px, transparent 1px),
+                linear-gradient(90deg, rgba(139, 92, 246, 0.3) 1px, transparent 1px)
+            `}
+            backgroundSize="60px 60px"
+        />
+
+        {/* K线流动效果 - 多条线 */}
+        {[...Array(6)].map((_, i) => (
+            <Box
+                key={i}
+                position="absolute"
+                top={`${15 + i * 15}%`}
+                left={0}
+                right={0}
+                height="2px"
+                opacity={0.15 + (i % 3) * 0.05}
+            >
+                <Box
+                    position="absolute"
+                    width="200px"
+                    height="100%"
+                    bgGradient={i % 2 === 0
+                        ? "linear(to-r, transparent, rgba(239, 68, 68, 0.8), rgba(239, 68, 68, 0.4), transparent)"
+                        : "linear(to-r, transparent, rgba(34, 197, 94, 0.8), rgba(34, 197, 94, 0.4), transparent)"
+                    }
+                    css={{
+                        animation: `${klineFlowAnimation} ${8 + i * 2}s linear infinite`,
+                        animationDelay: `${i * 1.5}s`,
+                    }}
+                />
+            </Box>
+        ))}
+
+        {/* 垂直扫描线 */}
+        <Box
+            position="absolute"
+            top={0}
+            bottom={0}
+            width="1px"
+            left="20%"
+            bgGradient="linear(to-b, transparent, rgba(139, 92, 246, 0.5), transparent)"
+            css={{ animation: `${gridScanAnimation} 4s ease-in-out infinite` }}
+        />
+        <Box
+            position="absolute"
+            top={0}
+            bottom={0}
+            width="1px"
+            left="50%"
+            bgGradient="linear(to-b, transparent, rgba(6, 182, 212, 0.5), transparent)"
+            css={{ animation: `${gridScanAnimation} 5s ease-in-out infinite 1s` }}
+        />
+        <Box
+            position="absolute"
+            top={0}
+            bottom={0}
+            width="1px"
+            left="80%"
+            bgGradient="linear(to-b, transparent, rgba(168, 85, 247, 0.5), transparent)"
+            css={{ animation: `${gridScanAnimation} 6s ease-in-out infinite 2s` }}
+        />
+
+        {/* 脉冲光点 */}
+        {[
+            { top: '20%', left: '15%', color: 'rgba(239, 68, 68, 0.6)', delay: '0s' },
+            { top: '40%', left: '75%', color: 'rgba(34, 197, 94, 0.6)', delay: '1s' },
+            { top: '60%', left: '30%', color: 'rgba(139, 92, 246, 0.6)', delay: '2s' },
+            { top: '80%', left: '60%', color: 'rgba(6, 182, 212, 0.6)', delay: '3s' },
+            { top: '30%', left: '90%', color: 'rgba(239, 68, 68, 0.5)', delay: '0.5s' },
+            { top: '70%', left: '10%', color: 'rgba(34, 197, 94, 0.5)', delay: '1.5s' },
+        ].map((dot, i) => (
+            <Box
+                key={i}
+                position="absolute"
+                top={dot.top}
+                left={dot.left}
+                width="6px"
+                height="6px"
+                borderRadius="full"
+                bg={dot.color}
+                boxShadow={`0 0 20px ${dot.color}`}
+                css={{
+                    animation: `${pulseGlowAnimation} 3s ease-in-out infinite`,
+                    animationDelay: dot.delay,
+                }}
+            />
+        ))}
+
+        {/* 顶部渐变遮罩 */}
+        <Box
+            position="absolute"
+            top={0}
+            left={0}
+            right={0}
+            height="30%"
+            bgGradient="linear(to-b, rgba(15, 23, 42, 0.8), transparent)"
+        />
+
+        {/* 底部渐变遮罩 */}
+        <Box
+            position="absolute"
+            bottom={0}
+            left={0}
+            right={0}
+            height="30%"
+            bgGradient="linear(to-t, rgba(15, 23, 42, 0.9), transparent)"
+        />
+    </Box>
+);
+
 const ConceptCenter = () => {
     const [searchParams, setSearchParams] = useSearchParams();
     const navigate = useNavigate();
@@ -1189,53 +1351,73 @@ const ConceptCenter = () => {
                     isDarkMode={true}
                 />
 
-                {/* 快捷按钮 - 深色主题 */}
-                <ButtonGroup size="sm" variant="outline" flexWrap="wrap">
+                {/* 快捷按钮 - 深色主题，更有区分度 */}
+                <ButtonGroup size="sm" flexWrap="wrap" spacing={2}>
                     <Button
                         onClick={() => handleQuickDateSelect(0)}
-                        borderColor="whiteAlpha.300"
+                        bg="whiteAlpha.100"
                         color="white"
                         borderRadius="full"
+                        border="1px solid"
+                        borderColor="whiteAlpha.200"
+                        px={4}
                         _hover={{
-                            bg: 'whiteAlpha.100',
-                            borderColor: 'purple.400',
+                            bg: 'purple.500',
+                            borderColor: 'purple.500',
+                            boxShadow: '0 0 12px rgba(139, 92, 246, 0.4)',
                         }}
+                        transition="all 0.2s"
                     >
                         今天
                     </Button>
                     <Button
                         onClick={() => handleQuickDateSelect(1)}
-                        borderColor="whiteAlpha.300"
+                        bg="whiteAlpha.100"
                         color="white"
                         borderRadius="full"
+                        border="1px solid"
+                        borderColor="whiteAlpha.200"
+                        px={4}
                         _hover={{
-                            bg: 'whiteAlpha.100',
-                            borderColor: 'purple.400',
+                            bg: 'purple.500',
+                            borderColor: 'purple.500',
+                            boxShadow: '0 0 12px rgba(139, 92, 246, 0.4)',
                         }}
+                        transition="all 0.2s"
                     >
                         昨天
                     </Button>
                     <Button
                         onClick={() => handleQuickDateSelect(7)}
-                        borderColor="whiteAlpha.300"
+                        bg="whiteAlpha.100"
                         color="white"
                         borderRadius="full"
+                        border="1px solid"
+                        borderColor="whiteAlpha.200"
+                        px={4}
                         _hover={{
-                            bg: 'whiteAlpha.100',
-                            borderColor: 'purple.400',
+                            bg: 'purple.500',
+                            borderColor: 'purple.500',
+                            boxShadow: '0 0 12px rgba(139, 92, 246, 0.4)',
                         }}
+                        transition="all 0.2s"
                     >
                         一周前
                     </Button>
                     <Button
                         onClick={() => handleQuickDateSelect(30)}
-                        borderColor="whiteAlpha.300"
+                        bg="whiteAlpha.100"
                         color="white"
                         borderRadius="full"
+                        border="1px solid"
+                        borderColor="whiteAlpha.200"
+                        px={4}
                         _hover={{
-                            bg: 'whiteAlpha.100',
-                            borderColor: 'purple.400',
+                            bg: 'purple.500',
+                            borderColor: 'purple.500',
+                            boxShadow: '0 0 12px rgba(139, 92, 246, 0.4)',
                         }}
+                        transition="all 0.2s"
                     >
                         一月前
                     </Button>
@@ -1245,7 +1427,10 @@ const ConceptCenter = () => {
     );
 
     return (
-        <Box minH="100vh" bg="linear-gradient(to-b, gray.900, slate.900, gray.900)">
+        <Box minH="100vh" position="relative" overflow="hidden">
+            {/* 金融数据流动动画背景 */}
+            <FinanceFlowBackground />
+
             {/* 导航栏已由 MainLayout 提供 */}
 
             {/* Hero Section - 精简版 */}
@@ -1254,6 +1439,7 @@ const ConceptCenter = () => {
                 bgGradient="linear(135deg, #0f0c29 0%, #302b63 50%, #24243e 100%)"
                 color="white"
                 overflow="hidden"
+                zIndex={1}
             >
                 {/* 科幻网格背景 */}
                 <Box
@@ -1457,7 +1643,7 @@ const ConceptCenter = () => {
             </Box>
 
             {/* 主内容区域 - 深色主题 */}
-            <Container maxW="container.xl" py={10}>
+            <Container maxW="container.xl" py={10} position="relative" zIndex={1}>
                 <Box mb={6}>
                     <DateSelector />
                 </Box>