update pay ui

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}
       />
 
       {/* 最新交易日期提示 */}