125 lines
3.5 KiB
JavaScript
125 lines
3.5 KiB
JavaScript
// 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 }) {
|
|
// 根据订阅类型返回样式配置
|
|
const getBadgeStyles = () => {
|
|
if (subscriptionInfo.type === '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') {
|
|
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)',
|
|
};
|
|
}
|
|
// 基础版
|
|
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();
|
|
|
|
// 智能动态 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>}
|
|
{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,
|
|
};
|