update pay ui
This commit is contained in:
@@ -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}
|
||||
/>
|
||||
|
||||
{/* 最新交易日期提示 */}
|
||||
|
||||
@@ -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>
|
||||
|
||||
Reference in New Issue
Block a user