From db472620f381783536147cdaa3187230251c3621 Mon Sep 17 00:00:00 2001
From: zdl <3489966805@qq.com>
Date: Fri, 31 Oct 2025 15:33:22 +0800
Subject: [PATCH] =?UTF-8?q?feat:=20=E6=B7=BB=E5=8A=A0=E4=BA=8B=E4=BB=B6?=
 =?UTF-8?q?=E8=AF=A6=E6=83=85=E5=A4=B4=E9=83=A8?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../DynamicNewsDetail/EventHeaderInfo.js      | 116 ++++++++++++++++++
 1 file changed, 116 insertions(+)
 create mode 100644 src/views/Community/components/DynamicNewsDetail/EventHeaderInfo.js

diff --git a/src/views/Community/components/DynamicNewsDetail/EventHeaderInfo.js b/src/views/Community/components/DynamicNewsDetail/EventHeaderInfo.js
new file mode 100644
index 00000000..d0911fbf
--- /dev/null
+++ b/src/views/Community/components/DynamicNewsDetail/EventHeaderInfo.js
@@ -0,0 +1,116 @@
+// src/views/Community/components/DynamicNewsDetail/EventHeaderInfo.js
+// 事件头部信息区组件
+
+import React from 'react';
+import {
+  Box,
+  Flex,
+  HStack,
+  Heading,
+  Text,
+  useColorModeValue,
+} from '@chakra-ui/react';
+import { ViewIcon } from '@chakra-ui/icons';
+import moment from 'moment';
+import StockChangeIndicators from '../../../../components/StockChangeIndicators';
+
+/**
+ * 事件头部信息区组件
+ * @param {Object} props
+ * @param {Object} props.event - 事件对象
+ * @param {Object} props.importance - 重要性配置对象（包含 level, color 等）
+ */
+const EventHeaderInfo = ({ event, importance }) => {
+  const sectionBg = useColorModeValue('gray.50', 'gray.750');
+  const headingColor = useColorModeValue('gray.700', 'gray.200');
+
+  // 获取重要性文本
+  const getImportanceText = () => {
+    const levelMap = {
+      'S': '极高',
+      'A': '高',
+      'B': '中',
+      'C': '低'
+    };
+    return levelMap[importance.level] || '中';
+  };
+
+  // 格式化涨跌幅数字
+  const formatChange = (value) => {
+    if (value === null || value === undefined) return '--';
+    const prefix = value > 0 ? '+' : '';
+    return `${prefix}${value.toFixed(2)}%`;
+  };
+
+  return (
+    <Box bg={sectionBg} p={3} borderRadius="md" position="relative">
+      {/* 粉色圆角标签（左上角绝对定位） */}
+      {event.related_avg_chg !== null && event.related_avg_chg !== undefined && (
+        <Box
+          position="absolute"
+          top="-8px"
+          left="-8px"
+          bg="pink.500"
+          color="white"
+          px={3}
+          py={1}
+          borderRadius="full"
+          fontSize="sm"
+          fontWeight="bold"
+          boxShadow="md"
+          zIndex={1}
+        >
+          {formatChange(event.related_avg_chg)}
+        </Box>
+      )}
+
+      {/* 第一行：标题 */}
+      <Flex align="center" justify="space-between" mb={3} gap={4}>
+        {/* 标题 */}
+        <Heading size="md" color={headingColor} flex={1}>
+          {event.title}
+        </Heading>
+      </Flex>
+      {/* 第二行：浏览数 + 日期 */}
+      <Flex align="left" mb={3} gap={4}>
+        {/* 浏览数 */}
+        <HStack spacing={1}>
+          <ViewIcon color="gray.400" boxSize={4} />
+          <Text fontSize="sm" color="gray.400" whiteSpace="nowrap">
+            {(event.view_count || 0).toLocaleString()}次浏览
+          </Text>
+        </HStack>
+
+        {/* 日期 */}
+        <Text fontSize="sm" color="red.500" fontWeight="medium" whiteSpace="nowrap">
+          {moment(event.created_at).format('YYYY年MM月DD日')}
+        </Text>
+      </Flex>
+
+      {/* 第三行：涨跌幅指标 + 重要性文本 */}
+      <HStack spacing={3} align="center">
+        <Box maxW="500px">
+          <StockChangeIndicators
+            avgChange={event.related_avg_chg}
+            maxChange={event.related_max_chg}
+            weekChange={event.related_week_chg}
+          />
+        </Box>
+
+        {/* 重要性文本 */}
+        <Box
+          bg="yellow.100"
+          px={2}
+          py={1}
+          borderRadius="md"
+        >
+          <Text fontSize="sm" color="yellow.700" whiteSpace="nowrap" fontWeight="medium">
+            重要性：{getImportanceText()}
+          </Text>
+        </Box>
+      </HStack>
+    </Box>
+  );
+};
+
+export default EventHeaderInfo;