feat: 事件详情权限加上权限校验
This commit is contained in:
97
src/components/SubscriptionBadge.js
Normal file
97
src/components/SubscriptionBadge.js
Normal file
@@ -0,0 +1,97 @@
|
||||
// src/components/SubscriptionBadge.js
|
||||
// 会员专享标签组件
|
||||
|
||||
import React from 'react';
|
||||
import {
|
||||
Badge,
|
||||
HStack,
|
||||
Icon,
|
||||
Text,
|
||||
useColorModeValue,
|
||||
} from '@chakra-ui/react';
|
||||
import { FaStar, FaCrown } from 'react-icons/fa';
|
||||
import { logger } from '../utils/logger';
|
||||
|
||||
/**
|
||||
* 会员专享标签组件
|
||||
* @param {Object} props
|
||||
* @param {'pro' | 'max'} props.tier - 会员等级:pro 或 max
|
||||
* @param {'sm' | 'md'} props.size - 标签尺寸
|
||||
*/
|
||||
const SubscriptionBadge = ({ tier = 'pro', size = 'sm' }) => {
|
||||
// 🔍 调试:SubscriptionBadge 被渲染(强制输出)
|
||||
console.error('🔴 [DEBUG] SubscriptionBadge 组件被渲染 - 这不应该出现(max 会员)', {
|
||||
tier,
|
||||
size,
|
||||
调用位置: new Error().stack
|
||||
});
|
||||
|
||||
// 🔍 调试:SubscriptionBadge 被渲染(logger)
|
||||
logger.debug('SubscriptionBadge', '组件被渲染', {
|
||||
tier,
|
||||
size,
|
||||
调用栈: new Error().stack
|
||||
});
|
||||
|
||||
// PRO 和 MAX 配置
|
||||
const config = {
|
||||
pro: {
|
||||
label: 'PRO专享',
|
||||
icon: FaStar,
|
||||
bgGradient: 'linear(to-r, blue.400, purple.500)',
|
||||
color: 'white',
|
||||
},
|
||||
max: {
|
||||
label: 'MAX专享',
|
||||
icon: FaCrown,
|
||||
bgGradient: 'linear(to-r, pink.400, red.500)',
|
||||
color: 'white',
|
||||
},
|
||||
};
|
||||
|
||||
const tierConfig = config[tier] || config.pro;
|
||||
|
||||
// 尺寸配置
|
||||
const sizeConfig = {
|
||||
sm: {
|
||||
fontSize: 'xs',
|
||||
iconSize: 2.5,
|
||||
px: 2,
|
||||
py: 0.5,
|
||||
},
|
||||
md: {
|
||||
fontSize: 'sm',
|
||||
iconSize: 3,
|
||||
px: 3,
|
||||
py: 1,
|
||||
},
|
||||
};
|
||||
|
||||
const currentSize = sizeConfig[size] || sizeConfig.sm;
|
||||
|
||||
return (
|
||||
<Badge
|
||||
bgGradient={tierConfig.bgGradient}
|
||||
color={tierConfig.color}
|
||||
borderRadius="full"
|
||||
px={currentSize.px}
|
||||
py={currentSize.py}
|
||||
fontSize={currentSize.fontSize}
|
||||
fontWeight="bold"
|
||||
boxShadow="sm"
|
||||
display="inline-flex"
|
||||
alignItems="center"
|
||||
gap={1}
|
||||
transition="all 0.2s"
|
||||
_hover={{
|
||||
transform: 'scale(1.05)',
|
||||
boxShadow: 'md',
|
||||
}}
|
||||
>
|
||||
<Icon as={tierConfig.icon} boxSize={currentSize.iconSize} />
|
||||
<Text>{tierConfig.label}</Text>
|
||||
</Badge>
|
||||
);
|
||||
};
|
||||
|
||||
export default SubscriptionBadge;
|
||||
Reference in New Issue
Block a user