feat: 事件中心详情面板Ui调整

2025-11-07 18:39:49 +08:00
parent 3574f5391f
commit 5ceffc53d6
3 changed files with 110 additions and 1 deletions
--- a/src/views/Community/components/DynamicNewsDetail/CompactMetaBar.js
+++ 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;