87 lines
2.4 KiB
JavaScript
87 lines
2.4 KiB
JavaScript
// src/views/Community/components/EventCard/ImportanceStamp.js
|
|
// 重要性印章组件
|
|
|
|
import React from 'react';
|
|
import {
|
|
Box,
|
|
Text,
|
|
useColorModeValue,
|
|
} from '@chakra-ui/react';
|
|
import { getImportanceConfig } from '../../../../constants/importanceLevels';
|
|
|
|
/**
|
|
* 重要性印章组件（模拟盖章效果）
|
|
* @param {Object} props
|
|
* @param {string} props.importance - 重要性等级 (S/A/B/C)
|
|
* @param {string} props.size - 印章尺寸 ('sm' | 'md' | 'lg')
|
|
*/
|
|
const ImportanceStamp = ({ importance, size = 'md' }) => {
|
|
const config = getImportanceConfig(importance);
|
|
|
|
// 印章颜色
|
|
const stampColor = useColorModeValue(config.badgeBg, config.badgeBg);
|
|
|
|
// 尺寸配置
|
|
const sizeConfig = {
|
|
sm: { outer: '40px', inner: '34px', fontSize: 'md', borderOuter: '2px', borderInner: '1.5px' },
|
|
md: { outer: '50px', inner: '42px', fontSize: 'xl', borderOuter: '3px', borderInner: '2px' },
|
|
lg: { outer: '60px', inner: '52px', fontSize: '2xl', borderOuter: '4px', borderInner: '2.5px' },
|
|
};
|
|
|
|
const currentSize = sizeConfig[size];
|
|
|
|
return (
|
|
<Box
|
|
position="relative"
|
|
display="inline-block"
|
|
>
|
|
{/* 外层圆形边框（双圈） */}
|
|
<Box
|
|
position="relative"
|
|
w={currentSize.outer}
|
|
h={currentSize.outer}
|
|
borderRadius="50%"
|
|
borderWidth={currentSize.borderOuter}
|
|
borderColor={stampColor}
|
|
display="flex"
|
|
alignItems="center"
|
|
justifyContent="center"
|
|
transform="rotate(-15deg)"
|
|
opacity={0.9}
|
|
boxShadow="0 3px 12px rgba(0,0,0,0.2)"
|
|
bg={useColorModeValue('white', 'gray.800')}
|
|
_hover={{
|
|
opacity: 1,
|
|
transform: "rotate(-15deg) scale(1.15)",
|
|
boxShadow: "0 4px 16px rgba(0,0,0,0.3)",
|
|
}}
|
|
transition="all 0.3s ease"
|
|
>
|
|
{/* 内层圆形边框 */}
|
|
<Box
|
|
position="absolute"
|
|
w={currentSize.inner}
|
|
h={currentSize.inner}
|
|
borderRadius="50%"
|
|
borderWidth={currentSize.borderInner}
|
|
borderColor={stampColor}
|
|
/>
|
|
|
|
{/* 印章文字 */}
|
|
<Text
|
|
fontSize={currentSize.fontSize}
|
|
fontWeight="black"
|
|
color={stampColor}
|
|
fontFamily={config.stampFont}
|
|
letterSpacing="2px"
|
|
textShadow="0 0 2px currentColor"
|
|
>
|
|
{config.stampText}
|
|
</Text>
|
|
</Box>
|
|
</Box>
|
|
);
|
|
};
|
|
|
|
export default ImportanceStamp;
|