update pay function

src/components/ImageLightbox/index.js

@@ -0,0 +1,309 @@
+/**
+ * 图片灯箱组件
+ * 点击图片放大查看
+ */
+
+import React, { useState } from 'react';
+import {
+  Modal,
+  ModalOverlay,
+  ModalContent,
+  ModalBody,
+  ModalCloseButton,
+  Image,
+  Box,
+  IconButton,
+  HStack,
+  useDisclosure,
+} from '@chakra-ui/react';
+import { ChevronLeft, ChevronRight, X, ZoomIn } from 'lucide-react';
+import { motion, AnimatePresence } from 'framer-motion';
+
+const MotionBox = motion(Box);
+
+/**
+ * 单图片灯箱
+ */
+export const ImageLightbox = ({ src, alt, ...props }) => {
+  const { isOpen, onOpen, onClose } = useDisclosure();
+
+  return (
+    <>
+      {/* 缩略图 */}
+      <Box
+        position="relative"
+        cursor="pointer"
+        onClick={onOpen}
+        _hover={{
+          '& .zoom-icon': {
+            opacity: 1,
+          },
+        }}
+        {...props}
+      >
+        <Image
+          src={src}
+          alt={alt}
+          w="100%"
+          h="100%"
+          objectFit="cover"
+          borderRadius="md"
+          transition="all 0.3s"
+          _hover={{
+            transform: 'scale(1.05)',
+            filter: 'brightness(0.8)',
+          }}
+        />
+
+        {/* 放大图标 */}
+        <Box
+          className="zoom-icon"
+          position="absolute"
+          top="50%"
+          left="50%"
+          transform="translate(-50%, -50%)"
+          opacity={0}
+          transition="opacity 0.3s"
+          pointerEvents="none"
+        >
+          <Box
+            bg="blackAlpha.700"
+            borderRadius="full"
+            p="3"
+          >
+            <ZoomIn size={32} color="white" />
+          </Box>
+        </Box>
+      </Box>
+
+      {/* 灯箱模态框 */}
+      <Modal isOpen={isOpen} onClose={onClose} size="full" isCentered>
+        <ModalOverlay bg="blackAlpha.900" backdropFilter="blur(10px)" />
+        <ModalContent bg="transparent" boxShadow="none">
+          <ModalCloseButton
+            position="fixed"
+            top="4"
+            right="4"
+            size="lg"
+            color="white"
+            bg="blackAlpha.600"
+            _hover={{ bg: 'blackAlpha.800' }}
+            borderRadius="full"
+            zIndex={2}
+          />
+          <ModalBody display="flex" alignItems="center" justifyContent="center" p="0">
+            <MotionBox
+              initial={{ opacity: 0, scale: 0.9 }}
+              animate={{ opacity: 1, scale: 1 }}
+              exit={{ opacity: 0, scale: 0.9 }}
+              transition={{ duration: 0.3 }}
+              maxW="90vw"
+              maxH="90vh"
+            >
+              <Image
+                src={src}
+                alt={alt}
+                maxW="100%"
+                maxH="90vh"
+                objectFit="contain"
+                borderRadius="lg"
+              />
+            </MotionBox>
+          </ModalBody>
+        </ModalContent>
+      </Modal>
+    </>
+  );
+};
+
+/**
+ * 多图片轮播灯箱
+ */
+export const ImageGalleryLightbox = ({ images, initialIndex = 0, ...props }) => {
+  const { isOpen, onOpen, onClose } = useDisclosure();
+  const [currentIndex, setCurrentIndex] = useState(initialIndex);
+
+  const handleOpen = (index) => {
+    setCurrentIndex(index);
+    onOpen();
+  };
+
+  const handlePrev = () => {
+    setCurrentIndex((prev) => (prev === 0 ? images.length - 1 : prev - 1));
+  };
+
+  const handleNext = () => {
+    setCurrentIndex((prev) => (prev === images.length - 1 ? 0 : prev + 1));
+  };
+
+  const handleKeyDown = (e) => {
+    if (e.key === 'ArrowLeft') handlePrev();
+    if (e.key === 'ArrowRight') handleNext();
+    if (e.key === 'Escape') onClose();
+  };
+
+  return (
+    <>
+      {/* 缩略图网格 */}
+      <HStack spacing="2" flexWrap="wrap" {...props}>
+        {images.map((image, index) => (
+          <Box
+            key={index}
+            position="relative"
+            cursor="pointer"
+            onClick={() => handleOpen(index)}
+            _hover={{
+              '& .zoom-icon': {
+                opacity: 1,
+              },
+            }}
+          >
+            <Image
+              src={image.src || image}
+              alt={image.alt || `图片 ${index + 1}`}
+              w="150px"
+              h="150px"
+              objectFit="cover"
+              borderRadius="md"
+              transition="all 0.3s"
+              _hover={{
+                transform: 'scale(1.05)',
+                filter: 'brightness(0.8)',
+              }}
+            />
+
+            {/* 放大图标 */}
+            <Box
+              className="zoom-icon"
+              position="absolute"
+              top="50%"
+              left="50%"
+              transform="translate(-50%, -50%)"
+              opacity={0}
+              transition="opacity 0.3s"
+              pointerEvents="none"
+            >
+              <Box bg="blackAlpha.700" borderRadius="full" p="2">
+                <ZoomIn size={24} color="white" />
+              </Box>
+            </Box>
+          </Box>
+        ))}
+      </HStack>
+
+      {/* 灯箱模态框（带轮播） */}
+      <Modal
+        isOpen={isOpen}
+        onClose={onClose}
+        size="full"
+        isCentered
+        onKeyDown={handleKeyDown}
+      >
+        <ModalOverlay bg="blackAlpha.900" backdropFilter="blur(10px)" />
+        <ModalContent bg="transparent" boxShadow="none">
+          {/* 关闭按钮 */}
+          <IconButton
+            icon={<X />}
+            position="fixed"
+            top="4"
+            right="4"
+            size="lg"
+            color="white"
+            bg="blackAlpha.600"
+            _hover={{ bg: 'blackAlpha.800' }}
+            borderRadius="full"
+            zIndex={2}
+            onClick={onClose}
+          />
+
+          <ModalBody
+            display="flex"
+            alignItems="center"
+            justifyContent="center"
+            p="0"
+            position="relative"
+          >
+            {/* 左箭头 */}
+            {images.length > 1 && (
+              <IconButton
+                icon={<ChevronLeft />}
+                position="absolute"
+                left="4"
+                top="50%"
+                transform="translateY(-50%)"
+                size="lg"
+                color="white"
+                bg="blackAlpha.600"
+                _hover={{ bg: 'blackAlpha.800' }}
+                borderRadius="full"
+                zIndex={2}
+                onClick={handlePrev}
+              />
+            )}
+
+            {/* 图片 */}
+            <AnimatePresence mode="wait">
+              <MotionBox
+                key={currentIndex}
+                initial={{ opacity: 0, scale: 0.9 }}
+                animate={{ opacity: 1, scale: 1 }}
+                exit={{ opacity: 0, scale: 0.9 }}
+                transition={{ duration: 0.3 }}
+                maxW="90vw"
+                maxH="90vh"
+              >
+                <Image
+                  src={images[currentIndex].src || images[currentIndex]}
+                  alt={images[currentIndex].alt || `图片 ${currentIndex + 1}`}
+                  maxW="100%"
+                  maxH="90vh"
+                  objectFit="contain"
+                  borderRadius="lg"
+                />
+              </MotionBox>
+            </AnimatePresence>
+
+            {/* 右箭头 */}
+            {images.length > 1 && (
+              <IconButton
+                icon={<ChevronRight />}
+                position="absolute"
+                right="4"
+                top="50%"
+                transform="translateY(-50%)"
+                size="lg"
+                color="white"
+                bg="blackAlpha.600"
+                _hover={{ bg: 'blackAlpha.800' }}
+                borderRadius="full"
+                zIndex={2}
+                onClick={handleNext}
+              />
+            )}
+
+            {/* 图片计数 */}
+            {images.length > 1 && (
+              <Box
+                position="absolute"
+                bottom="4"
+                left="50%"
+                transform="translateX(-50%)"
+                bg="blackAlpha.700"
+                color="white"
+                px="4"
+                py="2"
+                borderRadius="full"
+                fontSize="sm"
+                fontWeight="600"
+              >
+                {currentIndex + 1} / {images.length}
+              </Box>
+            )}
+          </ModalBody>
+        </ModalContent>
+      </Modal>
+    </>
+  );
+};
+
+export default ImageLightbox;

src/index.js

@@ -6,6 +6,9 @@ import { BrowserRouter as Router } from 'react-router-dom';
 // 导入 Brainwave 样式（空文件，保留以避免错误）
 import './styles/brainwave.css';
 
+// 导入 Select 下拉框颜色修复样式
+import './styles/select-fix.css';
+
 // 导入 Bytedesk 客服系统 z-index 覆盖样式（必须在所有样式之后导入）
 import './styles/bytedesk-override.css';
 

src/styles/select-fix.css

@@ -0,0 +1,89 @@
+/**
+ * 修复 Chakra UI Select 组件的下拉选项颜色问题
+ * 黑金主题下，下拉选项需要深色背景和白色文字
+ */
+
+/* 所有 select 元素的 option 样式 */
+select option {
+  background-color: #1A1A1A !important; /* 深色背景 */
+  color: #FFFFFF !important; /* 白色文字 */
+  padding: 8px !important;
+}
+
+/* 选中的 option */
+select option:checked {
+  background-color: #2A2A2A !important;
+  color: #FFC107 !important; /* 金色高亮 */
+}
+
+/* hover 状态的 option (某些浏览器支持) */
+select option:hover {
+  background-color: #222222 !important;
+  color: #FFD700 !important;
+}
+
+/* 禁用的 option */
+select option:disabled {
+  color: #808080 !important;
+  background-color: #151515 !important;
+}
+
+/* Firefox 特殊处理 */
+@-moz-document url-prefix() {
+  select option {
+    background-color: #1A1A1A !important;
+    color: #FFFFFF !important;
+  }
+}
+
+/* Webkit/Chrome 特殊处理 */
+select {
+  /* 自定义下拉箭头颜色 */
+  color-scheme: dark;
+}
+
+/* 修复 Chakra UI Select 组件的特定样式 */
+.chakra-select {
+  background-color: #1A1A1A !important;
+  color: #FFFFFF !important;
+  border-color: #333333 !important;
+}
+
+.chakra-select:hover {
+  border-color: #404040 !important;
+}
+
+.chakra-select:focus {
+  border-color: #FFC107 !important;
+  box-shadow: 0 0 0 1px rgba(255, 193, 7, 0.3) !important;
+}
+
+/* 下拉箭头图标 */
+.chakra-select__icon-wrapper {
+  color: #FFFFFF !important;
+}
+
+/* 修复所有表单 select 元素 */
+select[class*="chakra-select"],
+select[class*="select"] {
+  background-color: #1A1A1A !important;
+  color: #FFFFFF !important;
+}
+
+/* 自定义滚动条 (适用于下拉列表) */
+select::-webkit-scrollbar {
+  width: 8px;
+}
+
+select::-webkit-scrollbar-track {
+  background: #0A0A0A;
+}
+
+select::-webkit-scrollbar-thumb {
+  background: #333333;
+  border-radius: 4px;
+}
+
+select::-webkit-scrollbar-thumb:hover {
+  background: #FFC107;
+}

src/theme/forumTheme.js

@@ -217,6 +217,32 @@ export const forumComponentStyles = {
     },
   },
 
+  // Select下拉框样式（修复白色文字问题）
+  Select: {
+    baseStyle: {
+      field: {
+        bg: forumColors.background.card,
+        color: forumColors.text.primary,
+        borderColor: forumColors.border.default,
+        _hover: {
+          borderColor: forumColors.border.light,
+        },
+        _focus: {
+          borderColor: forumColors.border.gold,
+          boxShadow: `0 0 0 1px ${forumColors.border.goldGlow}`,
+        },
+        // 修复下拉选项颜色
+        option: {
+          bg: forumColors.background.card,
+          color: forumColors.text.primary,
+        },
+      },
+      icon: {
+        color: forumColors.text.primary,
+      },
+    },
+  },
+
   // 标签样式
   Tag: {
     variants: {