feat: 添加导航徽章

2025-10-20 13:28:37 +08:00
parent 923611f3a8
commit 44f9fea624
10 changed files with 2677 additions and 1113 deletions
--- a/src/components/Subscription/SubscriptionBadge.js
+++ b/src/components/Subscription/SubscriptionBadge.js
@@ -0,0 +1,137 @@
+// src/components/Subscription/SubscriptionBadge.js
+import React from 'react';
+import { Box, Text, Tooltip, useColorModeValue } from '@chakra-ui/react';
+import PropTypes from 'prop-types';
+
+export default function SubscriptionBadge({ subscriptionInfo, onClick }) {
+  // 🔍 调试：输出接收到的 props
+  console.log('🎯 [SubscriptionBadge] 接收到的 subscriptionInfo:', subscriptionInfo);
+  console.log('🎯 [SubscriptionBadge] subscriptionInfo.type:', subscriptionInfo?.type, '类型:', typeof subscriptionInfo?.type);
+
+  // 根据订阅类型返回样式配置
+  const getBadgeStyles = () => {
+    console.log('🔧 [SubscriptionBadge] getBadgeStyles 执行, type:', subscriptionInfo.type);
+
+    if (subscriptionInfo.type === 'max') {
+      console.log('✅ [SubscriptionBadge] 匹配到 MAX');
+      return {
+        bg: 'linear-gradient(135deg, #667eea 0%, #764ba2 100%)',
+        color: 'white',
+        icon: '👑',
+        label: 'Max',
+        shadow: '0 4px 12px rgba(118, 75, 162, 0.4)',
+        hoverShadow: '0 6px 16px rgba(118, 75, 162, 0.5)',
+      };
+    }
+    if (subscriptionInfo.type === 'pro') {
+      console.log('✅ [SubscriptionBadge] 匹配到 PRO');
+      return {
+        bg: 'linear-gradient(135deg, #667eea 0%, #3182CE 100%)',
+        color: 'white',
+        icon: '💎',
+        label: 'Pro',
+        shadow: '0 4px 12px rgba(49, 130, 206, 0.4)',
+        hoverShadow: '0 6px 16px rgba(49, 130, 206, 0.5)',
+      };
+    }
+    // 基础版
+    console.log('⚠️ [SubscriptionBadge] 使用默认基础版');
+    return {
+      bg: 'transparent',
+      color: useColorModeValue('gray.600', 'gray.400'),
+      icon: '',
+      label: '基础版',
+      border: '1.5px solid',
+      borderColor: useColorModeValue('gray.300', 'gray.600'),
+      shadow: 'none',
+      hoverShadow: 'none',
+    };
+  };
+
+  const styles = getBadgeStyles();
+  console.log('🎨 [SubscriptionBadge] styles 对象:', styles);
+
+  // 智能动态 Tooltip 文本
+  const getTooltipText = () => {
+    const { type, days_left, is_active } = subscriptionInfo;
+
+    // 基础版用户
+    if (type === 'free') {
+      return '💡 升级到 Pro 或 Max\n解锁高级功能';
+    }
+
+    // 已过期
+    if (!is_active) {
+      return `❌ ${type === 'pro' ? 'Pro' : 'Max'} 会员已过期\n点击续费恢复权益`;
+    }
+
+    // 紧急状态 (<7 天)
+    if (days_left < 7) {
+      return `⚠️ ${type === 'pro' ? 'Pro' : 'Max'} 会员 ${days_left} 天后到期!\n立即续费保持权益`;
+    }
+
+    // 提醒状态 (7-30 天)
+    if (days_left < 30) {
+      return `⏰ ${type === 'pro' ? 'Pro' : 'Max'} 会员即将到期\n还有 ${days_left} 天 · 点击续费`;
+    }
+
+    // 正常状态 (>30 天)
+    return `${type === 'pro' ? '💎' : '👑'} ${type === 'pro' ? 'Pro' : 'Max'} 会员 · ${days_left} 天后到期\n点击查看详情`;
+  };
+
+  return (
+    <Tooltip
+      label={getTooltipText()}
+      hasArrow
+      placement="bottom"
+      fontSize="sm"
+      px={3}
+      py={2}
+      borderRadius="md"
+      bg={useColorModeValue('gray.700', 'gray.300')}
+      color={useColorModeValue('white', 'gray.800')}
+      whiteSpace="pre-line"
+      textAlign="center"
+      maxW="250px"
+    >
+      <Box
+        as="button"
+        onClick={onClick}
+        px={3}
+        py={1.5}
+        borderRadius="full"
+        bg={styles.bg}
+        color={styles.color}
+        border={styles.border}
+        borderColor={styles.borderColor}
+        fontWeight="600"
+        fontSize="sm"
+        cursor="pointer"
+        transition="all 0.3s cubic-bezier(0.4, 0, 0.2, 1)"
+        boxShadow={styles.shadow}
+        _hover={{
+          transform: 'translateY(-2px)',
+          boxShadow: styles.hoverShadow || styles.shadow,
+        }}
+        _active={{
+          transform: 'translateY(0)',
+        }}
+      >
+        {styles.icon && <span style={{ marginRight: '4px' }}>{styles.icon}</span>}
+        {(() => {
+          console.log('📝 [SubscriptionBadge] 渲染文本:', styles.label);
+          return styles.label;
+        })()}
+      </Box>
+    </Tooltip>
+  );
+}
+
+SubscriptionBadge.propTypes = {
+  subscriptionInfo: PropTypes.shape({
+    type: PropTypes.oneOf(['free', 'pro', 'max']).isRequired,
+    days_left: PropTypes.number,
+    is_active: PropTypes.bool,
+  }).isRequired,
+  onClick: PropTypes.func.isRequired,
+};