事件中心UI优化

src/views/Community/components/EventCard/ImportanceStamp.js

@@ -0,0 +1,74 @@
+// 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)
+ */
+const ImportanceStamp = ({ importance }) => {
+  const config = getImportanceConfig(importance);
+
+  // 印章颜色
+  const stampColor = useColorModeValue(config.badgeBg, config.badgeBg);
+
+  return (
+    <Box
+      position="relative"
+      display="inline-block"
+    >
+      {/* 外层圆形边框（双圈） */}
+      <Box
+        position="relative"
+        w="50px"
+        h="50px"
+        borderRadius="50%"
+        borderWidth="3px"
+        borderColor={stampColor}
+        display="flex"
+        alignItems="center"
+        justifyContent="center"
+        transform="rotate(-15deg)"
+        opacity={0.85}
+        boxShadow="0 2px 8px rgba(0,0,0,0.15)"
+        _hover={{
+          opacity: 1,
+          transform: "rotate(-15deg) scale(1.1)",
+        }}
+        transition="all 0.3s ease"
+      >
+        {/* 内层圆形边框 */}
+        <Box
+          position="absolute"
+          w="42px"
+          h="42px"
+          borderRadius="50%"
+          borderWidth="2px"
+          borderColor={stampColor}
+        />
+
+        {/* 印章文字 */}
+        <Text
+          fontSize="xl"
+          fontWeight="black"
+          color={stampColor}
+          fontFamily="'STKaiti', 'KaiTi', 'SimKai', serif"
+          letterSpacing="2px"
+          textShadow="0 0 1px currentColor"
+        >
+          {config.stampText}
+        </Text>
+      </Box>
+    </Box>
+  );
+};
+
+export default ImportanceStamp;