vf_react/src/views/Community/components/EventCard/EventImportanceBadge.js

// src/views/Community/components/EventCard/EventImportanceBadge.js
import React from 'react';
import { Badge, Tooltip, VStack, HStack, Text, Divider, Circle } from '@chakra-ui/react';
import { InfoIcon } from '@chakra-ui/icons';
import { getImportanceConfig, getAllImportanceLevels } from '../../../../constants/importanceLevels';

/**
 * 事件重要性等级标签组件
 * @param {Object} props
 * @param {string} props.importance - 重要性等级（S/A/B/C/D）
 * @param {boolean} props.showTooltip - 是否显示详细提示框（默认 false）
 * @param {boolean} props.showIcon - 是否显示信息图标（默认 false）
 * @param {string} props.size - 标签大小（xs/sm/md/lg，默认 xs）
 */
const EventImportanceBadge = ({
    importance,
    showTooltip = false,
    showIcon = false,
    size = 'xs'
}) => {
    const importanceConfig = getImportanceConfig(importance);

    // 简单模式：只显示标签
    if (!showTooltip) {
        return (
            <Badge
                colorScheme={importanceConfig.color.split('.')[0]}
                fontSize={size}
                px={size === 'xs' ? 2 : size === 'sm' ? 2.5 : 3}
                py={size === 'xs' ? 1 : size === 'sm' ? 1 : 1.5}
                borderRadius="md"
                fontWeight="bold"
                display="inline-flex"
                alignItems="center"
                verticalAlign="middle"
            >
                {importance || 'C'}级
            </Badge>
        );
    }

    // 详细模式：带提示框的标签
    return (
        <Tooltip
            label={
                <VStack align="start" spacing={1} maxW="320px">
                    <Text fontWeight="bold" fontSize="sm" mb={1}>
                        重要性等级说明
                    </Text>
                    <Divider borderColor="gray.300" />
                    {getAllImportanceLevels().map((level) => (
                        <HStack key={level.level} spacing={2} align="center" w="full" py={0.5}>
                            <Circle
                                size="8px"
                                bg={level.dotBg}
                                flexShrink={0}
                            />
                            <Text fontSize="xs" color="gray.700" lineHeight="1.5">
                                <Text as="span" fontWeight="bold">{level.level}级</Text>
                                {level.description}
                            </Text>
                        </HStack>
                    ))}
                </VStack>
            }
            placement="top"
            hasArrow
            bg="white"
            color="gray.800"
            fontSize="md"
            p={3}
            borderRadius="lg"
            borderWidth="1px"
            borderColor="gray.200"
            boxShadow="lg"
        >
            <Badge
                colorScheme={importanceConfig.color.split('.')[0]}
                px={1.5}
                py={0.5}
                borderRadius="md"
                fontSize={size}
                cursor="help"
                display="flex"
                alignItems="center"
                gap={1}
                flexShrink={0}
            >
                {showIcon && <InfoIcon boxSize={2.5} />}
                {importance || 'C'}级
            </Badge>
        </Tooltip>
    );
};

export default EventImportanceBadge;