feat: 创建组合组件（Molecules）

- EventHeader: 标题头部组件（100行） │ │ │ │ - CompactEventCard: 紧凑模式卡片（160行） │ │ │ │ - DetailedEventCard: 详细模式卡片（170行） │ │ │ │ - index.js: EventCard 统一入口（60行）
2025-10-30 12:15:03 +08:00
parent d2c8c4689b
commit b6c1b44855
4 changed files with 469 additions and 0 deletions
--- a/src/views/Community/components/EventCard/index.js
+++ b/src/views/Community/components/EventCard/index.js
@@ -0,0 +1,67 @@
+// src/views/Community/components/EventCard/index.js
+import React from 'react';
+import CompactEventCard from './CompactEventCard';
+import DetailedEventCard from './DetailedEventCard';
+
+/**
+ * 事件卡片统一入口组件
+ * 根据 isCompactMode 自动选择紧凑模式或详细模式
+ *
+ * @param {Object} props
+ * @param {Object} props.event - 事件对象
+ * @param {number} props.index - 事件索引（紧凑模式下用于交替背景色）
+ * @param {boolean} props.isCompactMode - 是否为紧凑模式
+ * @param {boolean} props.isFollowing - 是否已关注
+ * @param {number} props.followerCount - 关注数
+ * @param {Function} props.onEventClick - 卡片点击事件
+ * @param {Function} props.onTitleClick - 标题点击事件
+ * @param {Function} props.onViewDetail - 查看详情事件（仅紧凑模式）
+ * @param {Function} props.onToggleFollow - 切换关注事件
+ * @param {Object} props.timelineStyle - 时间轴样式配置
+ * @param {string} props.borderColor - 边框颜色
+ */
+const EventCard = ({
+    event,
+    index,
+    isCompactMode,
+    isFollowing,
+    followerCount,
+    onEventClick,
+    onTitleClick,
+    onViewDetail,
+    onToggleFollow,
+    timelineStyle,
+    borderColor,
+}) => {
+    if (isCompactMode) {
+        return (
+            <CompactEventCard
+                event={event}
+                index={index}
+                isFollowing={isFollowing}
+                followerCount={followerCount}
+                onEventClick={onEventClick}
+                onTitleClick={onTitleClick}
+                onViewDetail={onViewDetail}
+                onToggleFollow={onToggleFollow}
+                timelineStyle={timelineStyle}
+                borderColor={borderColor}
+            />
+        );
+    }
+
+    return (
+        <DetailedEventCard
+            event={event}
+            isFollowing={isFollowing}
+            followerCount={followerCount}
+            onEventClick={onEventClick}
+            onTitleClick={onTitleClick}
+            onToggleFollow={onToggleFollow}
+            timelineStyle={timelineStyle}
+            borderColor={borderColor}
+        />
+    );
+};
+
+export default EventCard;