From 5ceffc53d685a67589f8e976e5d17b2273b46544 Mon Sep 17 00:00:00 2001
From: zdl <3489966805@qq.com>
Date: Fri, 7 Nov 2025 18:39:49 +0800
Subject: [PATCH] =?UTF-8?q?feat:=20=E4=BA=8B=E4=BB=B6=E4=B8=AD=E5=BF=83?=
 =?UTF-8?q?=E8=AF=A6=E6=83=85=E9=9D=A2=E6=9D=BFUi=E8=B0=83=E6=95=B4?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../DynamicNewsCard/EventDetailScrollPanel.js |  10 +-
 .../DynamicNewsCard/VerticalModeLayout.js     |   1 +
 .../DynamicNewsDetail/CompactMetaBar.js       | 100 ++++++++++++++++++
 3 files changed, 110 insertions(+), 1 deletion(-)
 create mode 100644 src/views/Community/components/DynamicNewsDetail/CompactMetaBar.js

diff --git a/src/views/Community/components/DynamicNewsCard/EventDetailScrollPanel.js b/src/views/Community/components/DynamicNewsCard/EventDetailScrollPanel.js
index 7a12194f..c531220f 100644
--- a/src/views/Community/components/DynamicNewsCard/EventDetailScrollPanel.js
+++ b/src/views/Community/components/DynamicNewsCard/EventDetailScrollPanel.js
@@ -13,13 +13,21 @@ import DynamicNewsDetailPanel from '../DynamicNewsDetail';
  * @param {string} scrollbarTrackBg - 滚动条轨道背景色
  * @param {string} scrollbarThumbBg - 滚动条滑块背景色
  * @param {string} scrollbarThumbHoverBg - 滚动条滑块悬浮背景色
+ * @param {string} detailMode - 详情模式：'full' | 'no-header'（默认 'full'）
+ * @param {boolean} showHeader - 是否显示头部（可选，优先级高于 detailMode）
  */
 const EventDetailScrollPanel = ({
   selectedEvent,
   scrollbarTrackBg,
   scrollbarThumbBg,
   scrollbarThumbHoverBg,
+  detailMode = 'full',
+  showHeader,
 }) => {
+  // 计算是否显示头部：showHeader 显式指定时优先，否则根据 detailMode 判断
+  const shouldShowHeader = showHeader !== undefined
+    ? showHeader
+    : detailMode === 'full';
   return (
     <Box
       pl={2}
@@ -47,7 +55,7 @@ const EventDetailScrollPanel = ({
       }}
     >
       {selectedEvent ? (
-        <DynamicNewsDetailPanel event={selectedEvent} />
+        <DynamicNewsDetailPanel event={selectedEvent} showHeader={shouldShowHeader} />
       ) : (
         <Center h="100%" minH="400px">
           <VStack spacing={4}>
diff --git a/src/views/Community/components/DynamicNewsCard/VerticalModeLayout.js b/src/views/Community/components/DynamicNewsCard/VerticalModeLayout.js
index 05eca5c7..1db9c7cf 100644
--- a/src/views/Community/components/DynamicNewsCard/VerticalModeLayout.js
+++ b/src/views/Community/components/DynamicNewsCard/VerticalModeLayout.js
@@ -161,6 +161,7 @@ const VerticalModeLayout = ({
         {/* 详情面板 */}
         <EventDetailScrollPanel
           key={detailPanelKey}
+          detailMode="no-header"
           selectedEvent={selectedEvent}
         />
       </Box>
diff --git a/src/views/Community/components/DynamicNewsDetail/CompactMetaBar.js b/src/views/Community/components/DynamicNewsDetail/CompactMetaBar.js
new file mode 100644
index 00000000..7abe78ad
--- /dev/null
+++ b/src/views/Community/components/DynamicNewsDetail/CompactMetaBar.js
@@ -0,0 +1,100 @@
+// src/views/Community/components/DynamicNewsDetail/CompactMetaBar.js
+// 精简信息栏组件（无头部模式下右上角显示）
+
+import React from 'react';
+import {
+  HStack,
+  Badge,
+  Text,
+  Icon,
+  useColorModeValue,
+} from '@chakra-ui/react';
+import { ViewIcon } from '@chakra-ui/icons';
+import EventFollowButton from '../EventCard/EventFollowButton';
+
+/**
+ * 精简信息栏组件
+ * 在无头部模式下，显示在 CardBody 右上角
+ * 包含：重要性徽章、浏览次数、关注按钮
+ *
+ * @param {Object} props
+ * @param {Object} props.event - 事件对象
+ * @param {Object} props.importance - 重要性配置对象（包含 level, icon 等）
+ * @param {boolean} props.isFollowing - 是否已关注
+ * @param {number} props.followerCount - 关注数
+ * @param {Function} props.onToggleFollow - 切换关注回调
+ */
+const CompactMetaBar = ({ event, importance, isFollowing, followerCount, onToggleFollow }) => {
+  const viewCountBg = useColorModeValue('white', 'gray.700');
+  const viewCountTextColor = useColorModeValue('gray.600', 'gray.300');
+
+  // 获取重要性文本
+  const getImportanceText = () => {
+    const levelMap = {
+      'S': '极高',
+      'A': '高',
+      'B': '中',
+      'C': '低'
+    };
+    return levelMap[importance.level] || '中';
+  };
+
+  return (
+    <HStack
+      position="absolute"
+      top={3}
+      right={3}
+      spacing={3}
+      zIndex={1}
+    >
+      {/* 重要性徽章 - 与 EventHeaderInfo 样式一致，尺寸略小 */}
+      <Badge
+        px={3}
+        py={1.5}
+        borderRadius="full"
+        fontSize="sm"
+        fontWeight="bold"
+        bgGradient={
+          importance.level === 'S' ? 'linear(to-r, red.500, red.700)' :
+          importance.level === 'A' ? 'linear(to-r, orange.500, orange.700)' :
+          importance.level === 'B' ? 'linear(to-r, blue.500, blue.700)' :
+          'linear(to-r, gray.500, gray.700)'
+        }
+        color="white"
+        boxShadow="lg"
+        display="flex"
+        alignItems="center"
+        gap={1}
+      >
+        <Icon as={importance.icon} boxSize={4} />
+        <Text>重要性：{getImportanceText()}</Text>
+      </Badge>
+
+      {/* 浏览次数 - 添加容器背景以提高可读性 */}
+      <HStack
+        spacing={1}
+        bg={viewCountBg}
+        px={2}
+        py={1}
+        borderRadius="md"
+        boxShadow="sm"
+      >
+        <ViewIcon color="gray.400" boxSize={4} />
+        <Text fontSize="sm" color={viewCountTextColor} whiteSpace="nowrap">
+          {(event.view_count || 0).toLocaleString()}
+        </Text>
+      </HStack>
+
+      {/* 关注按钮 */}
+      <EventFollowButton
+        isFollowing={isFollowing}
+        followerCount={followerCount}
+        onToggle={onToggleFollow}
+        size="sm"
+        showCount={true}
+      />
+    </HStack>
+  );
+};
+
+export default CompactMetaBar;