From c594650aa4720513ea1cccc3d0811c915e310b47 Mon Sep 17 00:00:00 2001
From: zzlgreat <zzlgreat@gmail.com>
Date: Mon, 24 Nov 2025 07:21:02 +0800
Subject: [PATCH] update pay function

---
 src/views/ValueForum/PredictionTopicDetail.js |  33 ++---
 src/views/ValueForum/components/TradeModal.js | 117 ++++++++++--------
 2 files changed, 85 insertions(+), 65 deletions(-)

diff --git a/src/views/ValueForum/PredictionTopicDetail.js b/src/views/ValueForum/PredictionTopicDetail.js
index 2f079324..776a43aa 100644
--- a/src/views/ValueForum/PredictionTopicDetail.js
+++ b/src/views/ValueForum/PredictionTopicDetail.js
@@ -174,8 +174,8 @@ const PredictionTopicDetail = () => {
   };
 
   return (
-    <Box minH="100vh" bg={forumColors.background.main} pt="80px" pb="20">
-      <Container maxW="container.xl">
+    <Box minH="100vh" bg={forumColors.background.main} pt={{ base: "60px", md: "80px" }} pb={{ base: "6", md: "20" }}>
+      <Container maxW="container.xl" px={{ base: "3", sm: "4", md: "6" }}>
         {/* 头部：返回按钮 */}
         <Button
           variant="ghost"
@@ -206,8 +206,8 @@ const PredictionTopicDetail = () => {
                 {/* 头部 */}
                 <Box
                   bg={forumColors.gradients.goldSubtle}
-                  px="6"
-                  py="4"
+                  px={{ base: "4", md: "6" }}
+                  py={{ base: "3", md: "4" }}
                   borderBottom="1px solid"
                   borderColor={forumColors.border.default}
                 >
@@ -233,15 +233,16 @@ const PredictionTopicDetail = () => {
 
                   <Heading
                     as="h1"
-                    fontSize="2xl"
+                    fontSize={{ base: "lg", md: "2xl" }}
                     fontWeight="bold"
                     color={forumColors.text.primary}
-                    mt="4"
+                    mt={{ base: "3", md: "4" }}
+                    lineHeight="1.4"
                   >
                     {topic.title}
                   </Heading>
 
-                  <Text fontSize="md" color={forumColors.text.secondary} mt="3">
+                  <Text fontSize={{ base: "sm", md: "md" }} color={forumColors.text.secondary} mt={{ base: "2", md: "3" }}>
                     {topic.description}
                   </Text>
 
@@ -265,15 +266,15 @@ const PredictionTopicDetail = () => {
                 </Box>
 
                 {/* 市场数据 */}
-                <Box p="6">
-                  <SimpleGrid columns={{ base: 1, md: 2 }} spacing="6">
+                <Box p={{ base: "4", md: "6" }}>
+                  <SimpleGrid columns={{ base: 1, md: 2 }} spacing={{ base: "4", md: "6" }}>
                     {/* Yes 方 */}
                     <Box
                       bg="linear-gradient(135deg, rgba(72, 187, 120, 0.1) 0%, rgba(72, 187, 120, 0.05) 100%)"
                       border="2px solid"
                       borderColor="green.400"
                       borderRadius="xl"
-                      p="6"
+                      p={{ base: "4", md: "6" }}
                       position="relative"
                     >
                       {yesData.lord_id && (
@@ -344,7 +345,7 @@ const PredictionTopicDetail = () => {
                       border="2px solid"
                       borderColor="red.400"
                       borderRadius="xl"
-                      p="6"
+                      p={{ base: "4", md: "6" }}
                       position="relative"
                     >
                       {noData.lord_id && (
@@ -439,14 +440,14 @@ const PredictionTopicDetail = () => {
 
           {/* 右侧：操作面板 */}
           <Box gridColumn={{ base: '1', lg: '3' }}>
-            <VStack spacing="6" align="stretch" position="sticky" top="90px">
+            <VStack spacing={{ base: "4", md: "6" }} align="stretch" position={{ base: "relative", lg: "sticky" }} top={{ base: "0", lg: "90px" }}>
               {/* 奖池信息 */}
               <Box
                 bg={forumColors.background.card}
                 borderRadius="xl"
                 border="1px solid"
                 borderColor={forumColors.border.gold}
-                p="6"
+                p={{ base: "4", md: "6" }}
               >
                 <VStack spacing="4" align="stretch">
                   <HStack justify="center" spacing="2">
@@ -457,7 +458,7 @@ const PredictionTopicDetail = () => {
                   </HStack>
 
                   <Text
-                    fontSize="4xl"
+                    fontSize={{ base: "3xl", md: "4xl" }}
                     fontWeight="bold"
                     color={forumColors.primary[500]}
                     textAlign="center"
@@ -499,7 +500,9 @@ const PredictionTopicDetail = () => {
                     color={forumColors.background.main}
                     size="lg"
                     w="full"
+                    h={{ base: "12", md: "auto" }}
                     fontWeight="bold"
+                    fontSize={{ base: "md", md: "lg" }}
                     onClick={() => handleOpenTrade('buy')}
                     _hover={{
                       transform: 'translateY(-2px)',
@@ -517,7 +520,9 @@ const PredictionTopicDetail = () => {
                     color={forumColors.text.primary}
                     size="lg"
                     w="full"
+                    h={{ base: "12", md: "auto" }}
                     fontWeight="bold"
+                    fontSize={{ base: "md", md: "lg" }}
                     onClick={() => handleOpenTrade('sell')}
                     _hover={{
                       bg: forumColors.background.hover,
diff --git a/src/views/ValueForum/components/TradeModal.js b/src/views/ValueForum/components/TradeModal.js
index f205b822..6c77d67f 100644
--- a/src/views/ValueForum/components/TradeModal.js
+++ b/src/views/ValueForum/components/TradeModal.js
@@ -212,51 +212,54 @@ const TradeModal = ({ isOpen, onClose, topic, mode = 'buy', onTradeSuccess }) =>
   };
 
   return (
-    <Modal isOpen={isOpen} onClose={onClose} size="lg" isCentered>
+    <Modal isOpen={isOpen} onClose={onClose} size={{ base: "full", sm: "lg" }} isCentered>
       <ModalOverlay backdropFilter="blur(4px)" />
       <ModalContent
         bg={forumColors.background.card}
-        borderRadius="xl"
+        borderRadius={{ base: "0", sm: "xl" }}
         border="1px solid"
         borderColor={forumColors.border.default}
+        maxH={{ base: "100vh", sm: "90vh" }}
+        m={{ base: "0", sm: "4" }}
       >
         <ModalHeader
           bg={forumColors.gradients.goldSubtle}
-          borderTopRadius="xl"
+          borderTopRadius={{ base: "0", sm: "xl" }}
           borderBottom="1px solid"
           borderColor={forumColors.border.default}
+          py={{ base: "4", sm: "3" }}
         >
           <HStack spacing="2">
             <Icon
               as={mode === 'buy' ? Zap : DollarSign}
-              boxSize="20px"
+              boxSize={{ base: "18px", sm: "20px" }}
               color={forumColors.primary[500]}
             />
-            <Text color={forumColors.text.primary}>
+            <Text color={forumColors.text.primary} fontSize={{ base: "md", sm: "lg" }}>
               {mode === 'buy' ? '购买席位' : '卖出席位'}
             </Text>
           </HStack>
         </ModalHeader>
         <ModalCloseButton color={forumColors.text.primary} />
 
-        <ModalBody py="6">
+        <ModalBody py={{ base: "4", sm: "6" }} px={{ base: "4", sm: "6" }}>
           <VStack spacing="5" align="stretch">
             {/* 话题标题 */}
             <Box
               bg={forumColors.background.hover}
               borderRadius="lg"
-              p="3"
+              p={{ base: "3", sm: "3" }}
               border="1px solid"
               borderColor={forumColors.border.default}
             >
-              <Text fontSize="sm" fontWeight="600" color={forumColors.text.primary}>
+              <Text fontSize={{ base: "xs", sm: "sm" }} fontWeight="600" color={forumColors.text.primary} lineHeight="1.5">
                 {topic.title}
               </Text>
             </Box>
 
             {/* 选择方向 */}
             <Box>
-              <Text fontSize="sm" fontWeight="600" color={forumColors.text.primary} mb="3">
+              <Text fontSize={{ base: "sm", sm: "sm" }} fontWeight="600" color={forumColors.text.primary} mb={{ base: "2", sm: "3" }}>
                 选择方向
               </Text>
               <RadioGroup value={selectedOption} onChange={setSelectedOption}>
@@ -275,31 +278,32 @@ const TradeModal = ({ isOpen, onClose, topic, mode = 'buy', onTradeSuccess }) =>
                       border="2px solid"
                       borderColor={selectedOption === 'yes' ? 'green.400' : forumColors.border.default}
                       borderRadius="lg"
-                      p="4"
+                      p={{ base: "3", sm: "4" }}
                       cursor="pointer"
                       onClick={() => setSelectedOption('yes')}
+                      minH={{ base: "auto", sm: "auto" }}
                     >
                       <Flex justify="space-between" align="center">
-                        <HStack spacing="3">
-                          <Radio value="yes" colorScheme="green" />
+                        <HStack spacing={{ base: "2", sm: "3" }}>
+                          <Radio value="yes" colorScheme="green" size={{ base: "md", sm: "lg" }} />
                           <VStack align="start" spacing="0">
                             <HStack spacing="2">
-                              <Icon as={TrendingUp} boxSize="16px" color="green.500" />
-                              <Text fontWeight="600" color="green.600">
+                              <Icon as={TrendingUp} boxSize={{ base: "14px", sm: "16px" }} color="green.500" />
+                              <Text fontWeight="600" color="green.600" fontSize={{ base: "sm", sm: "md" }}>
                                 看涨 / Yes
                               </Text>
                             </HStack>
-                            <Text fontSize="xs" color={forumColors.text.secondary}>
+                            <Text fontSize={{ base: "2xs", sm: "xs" }} color={forumColors.text.secondary}>
                               {positions.yes.total_shares}份持仓
                             </Text>
                           </VStack>
                         </HStack>
 
                         <VStack align="end" spacing="0">
-                          <Text fontSize="xl" fontWeight="bold" color="green.600">
+                          <Text fontSize={{ base: "lg", sm: "xl" }} fontWeight="bold" color="green.600">
                             {Math.round(positions.yes.current_price)}
                           </Text>
-                          <Text fontSize="xs" color={forumColors.text.secondary}>
+                          <Text fontSize={{ base: "2xs", sm: "xs" }} color={forumColors.text.secondary}>
                             积分/份
                           </Text>
                         </VStack>
@@ -321,31 +325,32 @@ const TradeModal = ({ isOpen, onClose, topic, mode = 'buy', onTradeSuccess }) =>
                       border="2px solid"
                       borderColor={selectedOption === 'no' ? 'red.400' : forumColors.border.default}
                       borderRadius="lg"
-                      p="4"
+                      p={{ base: "3", sm: "4" }}
                       cursor="pointer"
                       onClick={() => setSelectedOption('no')}
+                      minH={{ base: "auto", sm: "auto" }}
                     >
                       <Flex justify="space-between" align="center">
-                        <HStack spacing="3">
-                          <Radio value="no" colorScheme="red" />
+                        <HStack spacing={{ base: "2", sm: "3" }}>
+                          <Radio value="no" colorScheme="red" size={{ base: "md", sm: "lg" }} />
                           <VStack align="start" spacing="0">
                             <HStack spacing="2">
-                              <Icon as={TrendingDown} boxSize="16px" color="red.500" />
-                              <Text fontWeight="600" color="red.600">
+                              <Icon as={TrendingDown} boxSize={{ base: "14px", sm: "16px" }} color="red.500" />
+                              <Text fontWeight="600" color="red.600" fontSize={{ base: "sm", sm: "md" }}>
                                 看跌 / No
                               </Text>
                             </HStack>
-                            <Text fontSize="xs" color={forumColors.text.secondary}>
+                            <Text fontSize={{ base: "2xs", sm: "xs" }} color={forumColors.text.secondary}>
                               {positions.no.total_shares}份持仓
                             </Text>
                           </VStack>
                         </HStack>
 
                         <VStack align="end" spacing="0">
-                          <Text fontSize="xl" fontWeight="bold" color="red.600">
+                          <Text fontSize={{ base: "lg", sm: "xl" }} fontWeight="bold" color="red.600">
                             {Math.round(positions.no.current_price)}
                           </Text>
-                          <Text fontSize="xs" color={forumColors.text.secondary}>
+                          <Text fontSize={{ base: "2xs", sm: "xs" }} color={forumColors.text.secondary}>
                             积分/份
                           </Text>
                         </VStack>
@@ -358,11 +363,11 @@ const TradeModal = ({ isOpen, onClose, topic, mode = 'buy', onTradeSuccess }) =>
 
             {/* 购买份额 */}
             <Box>
-              <Flex justify="space-between" mb="3">
-                <Text fontSize="sm" fontWeight="600" color={forumColors.text.primary}>
+              <Flex justify="space-between" mb={{ base: "2", sm: "3" }}>
+                <Text fontSize={{ base: "sm", sm: "sm" }} fontWeight="600" color={forumColors.text.primary}>
                   {mode === 'buy' ? '购买份额' : '卖出份额'}
                 </Text>
-                <Text fontSize="sm" color={forumColors.text.secondary}>
+                <Text fontSize={{ base: "sm", sm: "sm" }} color={forumColors.text.secondary}>
                   {shares} 份
                 </Text>
               </Flex>
@@ -375,21 +380,21 @@ const TradeModal = ({ isOpen, onClose, topic, mode = 'buy', onTradeSuccess }) =>
                 step={1}
                 focusThumbOnChange={false}
               >
-                <SliderTrack bg={forumColors.background.hover}>
+                <SliderTrack bg={forumColors.background.hover} h={{ base: "2", sm: "1.5" }}>
                   <SliderFilledTrack bg={forumColors.gradients.goldPrimary} />
                 </SliderTrack>
-                <SliderThumb boxSize="6" bg={forumColors.primary[500]}>
-                  <Box as={Icon} as={DollarSign} boxSize="12px" color="white" />
+                <SliderThumb boxSize={{ base: "7", sm: "6" }} bg={forumColors.primary[500]}>
+                  <Box as={Icon} as={DollarSign} boxSize={{ base: "14px", sm: "12px" }} color="white" />
                 </SliderThumb>
               </Slider>
 
-              <HStack justify="space-between" mt="2" fontSize="xs" color={forumColors.text.tertiary}>
+              <HStack justify="space-between" mt="2" fontSize={{ base: "2xs", sm: "xs" }} color={forumColors.text.tertiary}>
                 <Text>1份</Text>
                 <Text>{maxShares}份 (最大)</Text>
               </HStack>
 
               {mode === 'sell' && userPosition && (
-                <Text fontSize="xs" color={forumColors.text.secondary} mt="2">
+                <Text fontSize={{ base: "2xs", sm: "xs" }} color={forumColors.text.secondary} mt="2">
                   你的持仓：{userPosition.shares}份 · 平均成本：{Math.round(userPosition.avg_cost)}积分/份
                 </Text>
               )}
@@ -401,10 +406,10 @@ const TradeModal = ({ isOpen, onClose, topic, mode = 'buy', onTradeSuccess }) =>
               border="1px solid"
               borderColor={forumColors.border.gold}
               borderRadius="lg"
-              p="4"
+              p={{ base: "3", sm: "4" }}
             >
-              <VStack spacing="2" align="stretch">
-                <Flex justify="space-between" fontSize="sm">
+              <VStack spacing={{ base: "1.5", sm: "2" }} align="stretch">
+                <Flex justify="space-between" fontSize={{ base: "xs", sm: "sm" }}>
                   <Text color={forumColors.text.secondary}>
                     {mode === 'buy' ? '购买成本' : '卖出收益'}
                   </Text>
@@ -413,31 +418,31 @@ const TradeModal = ({ isOpen, onClose, topic, mode = 'buy', onTradeSuccess }) =>
                   </Text>
                 </Flex>
 
-                <Flex justify="space-between" fontSize="sm">
+                <Flex justify="space-between" fontSize={{ base: "xs", sm: "sm" }}>
                   <Text color={forumColors.text.secondary}>平均价格</Text>
                   <Text fontWeight="600" color={forumColors.text.primary}>
                     {Math.round(avgPrice)} 积分/份
                   </Text>
                 </Flex>
 
-                <Flex justify="space-between" fontSize="sm">
+                <Flex justify="space-between" fontSize={{ base: "xs", sm: "sm" }}>
                   <Text color={forumColors.text.secondary}>交易税 (2%)</Text>
                   <Text fontWeight="600" color={forumColors.text.primary}>
                     {Math.round(tax)} 积分
                   </Text>
                 </Flex>
 
-                <Box borderTop="1px solid" borderColor={forumColors.border.default} pt="2" mt="1">
+                <Box borderTop="1px solid" borderColor={forumColors.border.default} pt={{ base: "1.5", sm: "2" }} mt="1">
                   <Flex justify="space-between">
-                    <Text fontWeight="bold" color={forumColors.text.primary}>
+                    <Text fontWeight="bold" color={forumColors.text.primary} fontSize={{ base: "sm", sm: "md" }}>
                       {mode === 'buy' ? '总计' : '净收益'}
                     </Text>
                     <HStack spacing="1">
-                      <Icon as={DollarSign} boxSize="20px" color={forumColors.primary[500]} />
-                      <Text fontSize="2xl" fontWeight="bold" color={forumColors.primary[500]}>
+                      <Icon as={DollarSign} boxSize={{ base: "16px", sm: "20px" }} color={forumColors.primary[500]} />
+                      <Text fontSize={{ base: "xl", sm: "2xl" }} fontWeight="bold" color={forumColors.primary[500]}>
                         {Math.round(totalCost)}
                       </Text>
-                      <Text fontSize="sm" color={forumColors.text.secondary}>
+                      <Text fontSize={{ base: "xs", sm: "sm" }} color={forumColors.text.secondary}>
                         积分
                       </Text>
                     </HStack>
@@ -445,14 +450,14 @@ const TradeModal = ({ isOpen, onClose, topic, mode = 'buy', onTradeSuccess }) =>
                 </Box>
 
                 {/* 余额提示 */}
-                <Box borderTop="1px solid" borderColor={forumColors.border.default} pt="2">
-                  <Flex justify="space-between" fontSize="sm">
+                <Box borderTop="1px solid" borderColor={forumColors.border.default} pt={{ base: "1.5", sm: "2" }}>
+                  <Flex justify="space-between" fontSize={{ base: "xs", sm: "sm" }}>
                     <Text color={forumColors.text.secondary}>你的余额：</Text>
                     <Text fontWeight="600" color={forumColors.text.primary}>
                       {userAccount.balance} 积分
                     </Text>
                   </Flex>
-                  <Flex justify="space-between" fontSize="sm" mt="1">
+                  <Flex justify="space-between" fontSize={{ base: "xs", sm: "sm" }} mt="1">
                     <Text color={forumColors.text.secondary}>
                       {mode === 'buy' ? '交易后：' : '交易后：'}
                     </Text>
@@ -483,11 +488,11 @@ const TradeModal = ({ isOpen, onClose, topic, mode = 'buy', onTradeSuccess }) =>
                 border="1px solid"
                 borderColor="red.200"
                 borderRadius="lg"
-                p="3"
+                p={{ base: "2.5", sm: "3" }}
               >
                 <HStack spacing="2">
-                  <Icon as={AlertCircle} boxSize="16px" color="red.500" />
-                  <Text fontSize="sm" color="red.600" fontWeight="600">
+                  <Icon as={AlertCircle} boxSize={{ base: "14px", sm: "16px" }} color="red.500" />
+                  <Text fontSize={{ base: "xs", sm: "sm" }} color="red.600" fontWeight="600">
                     {tradeCheck.reason}
                   </Text>
                 </HStack>
@@ -496,13 +501,20 @@ const TradeModal = ({ isOpen, onClose, topic, mode = 'buy', onTradeSuccess }) =>
           </VStack>
         </ModalBody>
 
-        <ModalFooter borderTop="1px solid" borderColor={forumColors.border.default}>
-          <HStack spacing="3">
+        <ModalFooter
+          borderTop="1px solid"
+          borderColor={forumColors.border.default}
+          py={{ base: "3", sm: "4" }}
+          px={{ base: "4", sm: "6" }}
+        >
+          <HStack spacing={{ base: "2", sm: "3" }} w="full" justify="flex-end">
             <Button
               variant="ghost"
               onClick={onClose}
               color={forumColors.text.secondary}
               _hover={{ bg: forumColors.background.hover }}
+              h={{ base: "10", sm: "auto" }}
+              fontSize={{ base: "sm", sm: "md" }}
             >
               取消
             </Button>
@@ -519,6 +531,9 @@ const TradeModal = ({ isOpen, onClose, topic, mode = 'buy', onTradeSuccess }) =>
                 transform: 'translateY(-2px)',
               }}
               _active={{ transform: 'translateY(0)' }}
+              h={{ base: "11", sm: "auto" }}
+              fontSize={{ base: "sm", sm: "md" }}
+              px={{ base: "6", sm: "4" }}
             >
               {mode === 'buy' ? `购买 ${shares} 份` : `卖出 ${shares} 份`}
             </Button>