96 lines
3.6 KiB
JavaScript
96 lines
3.6 KiB
JavaScript
// src/views/Community/components/EventCard/ImportanceBadge.js
|
||
// 重要性标签通用组件
|
||
|
||
import React from 'react';
|
||
import {
|
||
Box,
|
||
Text,
|
||
HStack,
|
||
VStack,
|
||
Popover,
|
||
PopoverTrigger,
|
||
PopoverContent,
|
||
PopoverBody,
|
||
PopoverArrow,
|
||
Portal,
|
||
} from '@chakra-ui/react';
|
||
import { getImportanceConfig, getAllImportanceLevels } from '../../../../constants/importanceLevels';
|
||
|
||
/**
|
||
* 重要性标签组件（实心样式）
|
||
* @param {Object} props
|
||
* @param {string} props.importance - 重要性等级 ('S' | 'A' | 'B' | 'C')
|
||
* @param {Object} props.position - 定位配置 { top, left, right, bottom }，默认为 { top: 0, left: 0 }
|
||
*/
|
||
const ImportanceBadge = ({ importance, position = { top: 0, left: 0 } }) => {
|
||
const importanceConfig = getImportanceConfig(importance);
|
||
|
||
return (
|
||
<Popover trigger="hover" placement="right" isLazy>
|
||
<PopoverTrigger>
|
||
<Box
|
||
position="absolute"
|
||
top={position.top}
|
||
left={position.left}
|
||
right={position.right}
|
||
bottom={position.bottom}
|
||
zIndex={1}
|
||
bg={importanceConfig.badgeBg}
|
||
color={importanceConfig.badgeColor || 'white'}
|
||
fontSize="11px"
|
||
fontWeight="bold"
|
||
w="30px"
|
||
h="15px"
|
||
borderRadius="xl"
|
||
display="flex"
|
||
alignItems="center"
|
||
justifyContent="center"
|
||
cursor="help"
|
||
boxShadow="sm"
|
||
>
|
||
{importanceConfig.label}
|
||
</Box>
|
||
</PopoverTrigger>
|
||
<Portal>
|
||
<PopoverContent width="auto" maxW="350px">
|
||
<PopoverArrow />
|
||
<PopoverBody p={3}>
|
||
<VStack align="stretch" spacing={2}>
|
||
<Text fontSize="sm" fontWeight="bold" mb={1}>
|
||
重要性等级说明
|
||
</Text>
|
||
{getAllImportanceLevels().map(item => (
|
||
<HStack key={item.level} spacing={2} align="center">
|
||
<Box
|
||
w="30px"
|
||
h="15px"
|
||
bg={item.badgeBg}
|
||
color={item.badgeColor || 'white'}
|
||
fontSize="9px"
|
||
fontWeight="bold"
|
||
display="flex"
|
||
alignItems="center"
|
||
justifyContent="center"
|
||
borderRadius="lg"
|
||
flexShrink={0}
|
||
>
|
||
{item.label}
|
||
</Box>
|
||
<Text fontSize="xs" flex={1}>
|
||
<Text as="span" fontWeight="bold">
|
||
{item.label}：
|
||
</Text>
|
||
{item.description}
|
||
</Text>
|
||
</HStack>
|
||
))}
|
||
</VStack>
|
||
</PopoverBody>
|
||
</PopoverContent>
|
||
</Portal>
|
||
</Popover>
|
||
);
|
||
};
|
||
|
||
export default ImportanceBadge;
|