Initial commit

src/components/SubscriptionUpgradeModal.js

@@ -0,0 +1,175 @@
+import React from 'react';
+import {
+  Modal,
+  ModalOverlay,
+  ModalContent,
+  ModalHeader,
+  ModalFooter,
+  ModalBody,
+  ModalCloseButton,
+  Button,
+  VStack,
+  HStack,
+  Text,
+  Badge,
+  Box,
+  useColorModeValue,
+  Icon,
+  Divider
+} from '@chakra-ui/react';
+import { FaCrown, FaLock, FaStar, FaRocket } from 'react-icons/fa';
+
+const SubscriptionUpgradeModal = ({ 
+  isOpen, 
+  onClose, 
+  requiredLevel = 'pro', 
+  featureName = '功能',
+  currentLevel = 'free'
+}) => {
+  const bgColor = useColorModeValue('white', 'gray.800');
+  const borderColor = useColorModeValue('gray.200', 'gray.600');
+  const textColor = useColorModeValue('gray.600', 'gray.300');
+
+  // 订阅级别信息
+  const subscriptionLevels = {
+    free: {
+      name: '免费版',
+      icon: FaLock,
+      color: 'gray',
+      features: ['基础事件浏览', '有限历史事件查看']
+    },
+    pro: {
+      name: 'Pro版',
+      icon: FaStar,
+      color: 'blue',
+      features: ['相关标的分析', '相关概念分析', '完整历史事件']
+    },
+    max: {
+      name: 'Max版',
+      icon: FaCrown,
+      color: 'purple',
+      features: ['传导链分析', '高级分析工具', '实时数据推送', '所有Pro版功能']
+    }
+  };
+
+  const currentLevelInfo = subscriptionLevels[currentLevel] || subscriptionLevels.free;
+  const requiredLevelInfo = subscriptionLevels[requiredLevel] || subscriptionLevels.pro;
+
+  const handleUpgrade = () => {
+    // 跳转到订阅页面
+    window.location.href = 'https://valuefrontier.cn/home/pages/account/subscription';
+  };
+
+  return (
+    <Modal isOpen={isOpen} onClose={onClose} size="lg" isCentered>
+      <ModalOverlay />
+      <ModalContent bg={bgColor}>
+        <ModalHeader borderBottomWidth="1px" borderColor={borderColor}>
+          <HStack spacing={3}>
+            <Icon as={FaLock} color="red.500" boxSize={6} />
+            <VStack align="start" spacing={0}>
+              <Text fontSize="lg" fontWeight="bold">
+                需要{requiredLevelInfo.name}订阅
+              </Text>
+              <Text fontSize="sm" color={textColor}>
+                当前功能需要更高权限
+              </Text>
+            </VStack>
+          </HStack>
+        </ModalHeader>
+        <ModalCloseButton />
+        
+        <ModalBody py={6}>
+          <VStack spacing={6} align="stretch">
+            {/* 功能说明 */}
+            <Box>
+              <Text fontWeight="semibold" mb={2}>
+                您正在尝试访问：
+              </Text>
+              <Box 
+                p={3} 
+                bg={useColorModeValue('blue.50', 'blue.900')}
+                borderRadius="md"
+                borderLeft="4px solid"
+                borderColor="blue.500"
+              >
+                <Text fontSize="md" fontWeight="medium">
+                  {featureName}
+                </Text>
+              </Box>
+            </Box>
+
+            <Divider />
+
+            {/* 当前订阅状态 */}
+            <Box>
+              <HStack justify="space-between" mb={3}>
+                <Text fontWeight="semibold">当前订阅</Text>
+                <Badge colorScheme={currentLevelInfo.color}>
+                  {currentLevelInfo.name}
+                </Badge>
+              </HStack>
+              <VStack align="start" spacing={1}>
+                {currentLevelInfo.features.map((feature, index) => (
+                  <HStack key={index} spacing={2}>
+                    <Icon as={currentLevelInfo.icon} color={`${currentLevelInfo.color}.500`} boxSize={3} />
+                    <Text fontSize="sm" color={textColor}>{feature}</Text>
+                  </HStack>
+                ))}
+              </VStack>
+            </Box>
+
+            {/* 所需订阅状态 */}
+            <Box>
+              <HStack justify="space-between" mb={3}>
+                <Text fontWeight="semibold">所需订阅</Text>
+                <Badge colorScheme={requiredLevelInfo.color} variant="solid">
+                  {requiredLevelInfo.name}
+                </Badge>
+              </HStack>
+              <VStack align="start" spacing={1}>
+                {requiredLevelInfo.features.map((feature, index) => (
+                  <HStack key={index} spacing={2}>
+                    <Icon as={requiredLevelInfo.icon} color={`${requiredLevelInfo.color}.500`} boxSize={3} />
+                    <Text fontSize="sm" color={textColor}>{feature}</Text>
+                  </HStack>
+                ))}
+              </VStack>
+            </Box>
+
+            {/* 升级提示 */}
+            <Box 
+              p={3} 
+              bg={useColorModeValue('yellow.50', 'yellow.900')}
+              borderRadius="md"
+            >
+              <HStack spacing={2}>
+                <Icon as={FaRocket} color="yellow.600" />
+                <Text fontSize="sm" color={useColorModeValue('yellow.800', 'yellow.200')}>
+                  升级到{requiredLevelInfo.name}即可解锁此功能
+                </Text>
+              </HStack>
+            </Box>
+          </VStack>
+        </ModalBody>
+        
+        <ModalFooter borderTopWidth="1px" borderColor={borderColor}>
+          <HStack spacing={3}>
+            <Button variant="outline" onClick={onClose}>
+              稍后再说
+            </Button>
+            <Button 
+              colorScheme={requiredLevelInfo.color}
+              leftIcon={<Icon as={FaCrown} />}
+              onClick={handleUpgrade}
+            >
+              立即升级
+            </Button>
+          </HStack>
+        </ModalFooter>
+      </ModalContent>
+    </Modal>
+  );
+};
+
+export default SubscriptionUpgradeModal;