feat: 导航UI调整

src/components/Subscription/CrownTooltip.js

@@ -0,0 +1,137 @@
+// src/components/Subscription/CrownTooltip.js
+import React from 'react';
+import {
+    Box,
+    VStack,
+    HStack,
+    Text,
+    Divider,
+    useColorModeValue
+} from '@chakra-ui/react';
+import PropTypes from 'prop-types';
+
+/**
+ * Tooltip 内容组件 - 显示详细的会员信息
+ * 导出此组件供头像也使用相同的 Tooltip 内容
+ */
+export const TooltipContent = ({ subscriptionInfo }) => {
+    const tooltipText = useColorModeValue('gray.700', 'gray.100');
+    const dividerColor = useColorModeValue('gray.200', 'gray.600');
+    const { type, days_left, is_active } = subscriptionInfo;
+
+    // 基础版用户
+    if (type === 'free') {
+        return (
+            <VStack spacing={2} align="stretch" minW="200px">
+                <Text fontSize="md" fontWeight="bold" color={tooltipText}>
+                    ✨ 基础版用户
+                </Text>
+                <Divider borderColor={dividerColor} />
+                <Text fontSize="sm" color={tooltipText} opacity={0.8}>
+                    解锁更多高级功能
+                </Text>
+                <Text fontSize="xs" color={tooltipText} opacity={0.6} textAlign="center" mt={1}>
+                    点击头像升级会员
+                </Text>
+            </VStack>
+        );
+    }
+
+    // 付费用户
+    const isExpired = !is_active;
+    const isUrgent = days_left < 7;
+    const isWarning = days_left < 30;
+
+    return (
+        <VStack spacing={2} align="stretch" minW="220px">
+            <HStack justify="space-between">
+                <Text fontSize="md" fontWeight="bold" color={tooltipText}>
+                    {type === 'pro' ? '💎 Pro 会员' : '👑 Max 会员'}
+                </Text>
+                {isExpired && <Text fontSize="xs" color="red.500">已过期</Text>}
+            </HStack>
+
+            <Divider borderColor={dividerColor} />
+
+            {/* 状态信息 */}
+            {isExpired ? (
+                <HStack spacing={2}>
+                    <Text fontSize="sm" color="red.500">❌</Text>
+                    <Text fontSize="sm" color={tooltipText}>
+                        会员已过期，续费恢复权益
+                    </Text>
+                </HStack>
+            ) : (
+                <VStack spacing={1} align="stretch">
+                    <HStack spacing={2}>
+                        <Text fontSize="sm">
+                            {isUrgent ? '⚠️' : isWarning ? '⏰' : '📅'}
+                        </Text>
+                        <Text fontSize="sm" color={tooltipText}>
+                            {isUrgent && <Text as="span" color="red.500" fontWeight="600">紧急! </Text>}
+                            还有 <Text as="span" fontWeight="600" color={isUrgent ? 'red.500' : isWarning ? 'orange.500' : tooltipText}>{days_left}</Text> 天到期
+                        </Text>
+                    </HStack>
+                    <Text fontSize="xs" color={tooltipText} opacity={0.7} pl={6}>
+                        享受全部高级功能
+                    </Text>
+                </VStack>
+            )}
+
+            {/* 操作提示 */}
+            <Text fontSize="xs" color={tooltipText} opacity={0.6} textAlign="center" mt={1}>
+                {isExpired || isUrgent ? '点击头像立即续费' : '点击头像管理订阅'}
+            </Text>
+        </VStack>
+    );
+};
+
+/**
+ * 皇冠图标组件 - 显示在头像左上角的会员标识（纯图标，无 Tooltip）
+ * Tooltip 由外层统一包裹
+ *
+ * @param {Object} subscriptionInfo - 订阅信息
+ * @param {string} subscriptionInfo.type - 订阅类型: 'free' | 'pro' | 'max'
+ */
+export function CrownIcon({ subscriptionInfo }) {
+    // 基础版用户不显示皇冠
+    if (subscriptionInfo.type === 'free') {
+        return null;
+    }
+
+    return (
+        <Box
+            position="absolute"
+            top="-8px"
+            left="-8px"
+            zIndex={2}
+            display="flex"
+            alignItems="center"
+            justifyContent="center"
+            w="24px"
+            h="24px"
+            _hover={{
+                transform: 'scale(1.2)',
+            }}
+            transition="all 0.3s ease"
+        >
+            <Text fontSize="20px" filter="drop-shadow(0 2px 4px rgba(0,0,0,0.3))">
+                {subscriptionInfo.type === 'max' ? '👑' : '💎'}
+            </Text>
+        </Box>
+    );
+}
+
+CrownIcon.propTypes = {
+    subscriptionInfo: PropTypes.shape({
+        type: PropTypes.oneOf(['free', 'pro', 'max']).isRequired,
+    }).isRequired,
+};
+
+TooltipContent.propTypes = {
+    subscriptionInfo: PropTypes.shape({
+        type: PropTypes.oneOf(['free', 'pro', 'max']).isRequired,
+        days_left: PropTypes.number,
+        is_active: PropTypes.bool,
+    }).isRequired,
+};