feat: 优化事件中心页面 重构后的文件结构

src/views/Community/
     ├── index.js (主组件，150行左右)
     ├── components/
     │   ├── EventTimelineCard.js (新增)
     │   ├── EventTimelineHeader.js (新增)
     │   ├── EventListSection.js (新增)
     │   ├── HotEventsSection.js (新增)
     │   ├── EventModals.js (新增)
     │   ├── UnifiedSearchBox.js (已有)
     │   ├── EventList.js (已有)
     │   └── ...
     └── hooks/
         ├── useEventFilters.js (新增)
         └── useEventData.js (新增)

src/views/Community/components/EventListSection.js

@@ -0,0 +1,65 @@
+// src/views/Community/components/EventListSection.js
+// 事件列表区域组件（包含Loading、Empty、List三种状态）
+
+import React from 'react';
+import {
+  Center,
+  VStack,
+  Spinner,
+  Text
+} from '@chakra-ui/react';
+import EventList from './EventList';
+
+/**
+ * 事件列表区域组件
+ * @param {boolean} loading - 加载状态
+ * @param {Array} events - 事件列表
+ * @param {Object} pagination - 分页信息
+ * @param {Function} onPageChange - 分页变化回调
+ * @param {Function} onEventClick - 事件点击回调
+ * @param {Function} onViewDetail - 查看详情回调
+ */
+const EventListSection = ({
+  loading,
+  events,
+  pagination,
+  onPageChange,
+  onEventClick,
+  onViewDetail
+}) => {
+  // Loading 状态
+  if (loading) {
+    return (
+      <Center py={10}>
+        <VStack>
+          <Spinner size="xl" color="blue.500" thickness="4px" />
+          <Text color="gray.500">正在加载最新事件...</Text>
+        </VStack>
+      </Center>
+    );
+  }
+
+  // Empty 状态
+  if (!events || events.length === 0) {
+    return (
+      <Center py={10}>
+        <VStack>
+          <Text fontSize="lg" color="gray.500">暂无事件数据</Text>
+        </VStack>
+      </Center>
+    );
+  }
+
+  // List 状态
+  return (
+    <EventList
+      events={events}
+      pagination={pagination}
+      onPageChange={onPageChange}
+      onEventClick={onEventClick}
+      onViewDetail={onViewDetail}
+    />
+  );
+};
+
+export default EventListSection;

src/views/Community/components/EventModals.js

@@ -0,0 +1,63 @@
+// src/views/Community/components/EventModals.js
+// 事件弹窗组合组件（包含详情Modal和股票Drawer）
+
+import React from 'react';
+import {
+  Modal,
+  ModalOverlay,
+  ModalContent,
+  ModalHeader,
+  ModalBody,
+  ModalCloseButton
+} from '@chakra-ui/react';
+import EventDetailModal from './EventDetailModal';
+import StockDetailPanel from './StockDetailPanel';
+
+/**
+ * 事件弹窗组合组件
+ * @param {Object} eventModalState - 事件详情Modal状态
+ * @param {boolean} eventModalState.isOpen - 是否打开
+ * @param {Function} eventModalState.onClose - 关闭回调
+ * @param {Object} eventModalState.event - 事件对象
+ * @param {Function} eventModalState.onEventClose - 事件关闭回调（清除状态）
+ * @param {Object} stockDrawerState - 股票详情Drawer状态
+ * @param {boolean} stockDrawerState.visible - 是否显示
+ * @param {Object} stockDrawerState.event - 事件对象
+ * @param {Function} stockDrawerState.onClose - 关闭回调
+ */
+const EventModals = ({
+  eventModalState,
+  stockDrawerState
+}) => {
+  return (
+    <>
+      {/* 事件详情模态框 - 使用Chakra UI Modal */}
+      <Modal
+        isOpen={eventModalState.isOpen}
+        onClose={eventModalState.onClose}
+        size="xl"
+      >
+        <ModalOverlay />
+        <ModalContent>
+          <ModalHeader>事件详情</ModalHeader>
+          <ModalCloseButton />
+          <ModalBody pb={6}>
+            <EventDetailModal
+              event={eventModalState.event}
+              onClose={eventModalState.onEventClose}
+            />
+          </ModalBody>
+        </ModalContent>
+      </Modal>
+
+      {/* 股票详情抽屉 - 使用原组件自带的 Antd Drawer */}
+      <StockDetailPanel
+        visible={stockDrawerState.visible}
+        event={stockDrawerState.event}
+        onClose={stockDrawerState.onClose}
+      />
+    </>
+  );
+};
+
+export default EventModals;

src/views/Community/components/EventTimelineCard.js

@@ -0,0 +1,80 @@
+// src/views/Community/components/EventTimelineCard.js
+// 事件时间轴卡片组件（整合Header + Search + List）
+
+import React, { forwardRef } from 'react';
+import {
+  Card,
+  CardHeader,
+  CardBody,
+  Box,
+  useColorModeValue
+} from '@chakra-ui/react';
+import EventTimelineHeader from './EventTimelineHeader';
+import UnifiedSearchBox from './UnifiedSearchBox';
+import EventListSection from './EventListSection';
+
+/**
+ * 事件时间轴卡片组件
+ * @param {Array} events - 事件列表
+ * @param {boolean} loading - 加载状态
+ * @param {Object} pagination - 分页信息
+ * @param {Object} filters - 筛选条件
+ * @param {Array} popularKeywords - 热门关键词
+ * @param {Date} lastUpdateTime - 最后更新时间
+ * @param {Function} onSearch - 搜索回调
+ * @param {Function} onPageChange - 分页变化回调
+ * @param {Function} onEventClick - 事件点击回调
+ * @param {Function} onViewDetail - 查看详情回调
+ * @param {Object} ref - 用于滚动的ref
+ */
+const EventTimelineCard = forwardRef(({
+  events,
+  loading,
+  pagination,
+  filters,
+  popularKeywords,
+  lastUpdateTime,
+  onSearch,
+  onPageChange,
+  onEventClick,
+  onViewDetail
+}, ref) => {
+  const cardBg = useColorModeValue('white', 'gray.800');
+  const borderColor = useColorModeValue('gray.200', 'gray.700');
+
+  return (
+    <Card ref={ref} bg={cardBg} borderColor={borderColor} mb={4}>
+      {/* 标题部分 */}
+      <CardHeader>
+        <EventTimelineHeader lastUpdateTime={lastUpdateTime} />
+      </CardHeader>
+
+      {/* 主体内容 */}
+      <CardBody>
+        {/* 统一搜索组件（整合了话题、股票、行业、日期、排序、重要性、热门概念、筛选标签） */}
+        <Box mb={4}>
+          <UnifiedSearchBox
+            onSearch={onSearch}
+            popularKeywords={popularKeywords}
+            filters={filters}
+            loading={loading}
+          />
+        </Box>
+
+        {/* 事件列表（包含Loading、Empty、List三种状态） */}
+        <EventListSection
+          loading={loading}
+          events={events}
+          pagination={pagination}
+          onPageChange={onPageChange}
+          onEventClick={onEventClick}
+          onViewDetail={onViewDetail}
+        />
+      </CardBody>
+    </Card>
+  );
+});
+
+EventTimelineCard.displayName = 'EventTimelineCard';
+
+export default EventTimelineCard;

src/views/Community/components/EventTimelineHeader.js

@@ -0,0 +1,42 @@
+// src/views/Community/components/EventTimelineHeader.js
+// 事件时间轴标题组件
+
+import React from 'react';
+import {
+  Flex,
+  VStack,
+  HStack,
+  Heading,
+  Text,
+  Badge
+} from '@chakra-ui/react';
+import { TimeIcon } from '@chakra-ui/icons';
+
+/**
+ * 事件时间轴标题组件
+ * @param {Date} lastUpdateTime - 最后更新时间
+ */
+const EventTimelineHeader = ({ lastUpdateTime }) => {
+  return (
+    <Flex justify="space-between" align="center">
+      <VStack align="start" spacing={1}>
+        <Heading size="md">
+          <HStack>
+            <TimeIcon />
+            <Text>实时事件时间轴</Text>
+          </HStack>
+        </Heading>
+        <HStack fontSize="sm" color="gray.500">
+          <Badge colorScheme="green">全网监控</Badge>
+          <Badge colorScheme="orange">智能捕获</Badge>
+          <Badge colorScheme="purple">深度分析</Badge>
+        </HStack>
+      </VStack>
+      <Text fontSize="xs" color="gray.500">
+        最后更新: {lastUpdateTime.toLocaleTimeString()}
+      </Text>
+    </Flex>
+  );
+};
+
+export default EventTimelineHeader;

src/views/Community/components/HotEventsSection.js

@@ -0,0 +1,38 @@
+// src/views/Community/components/HotEventsSection.js
+// 热点事件区域组件
+
+import React from 'react';
+import {
+  Card,
+  CardHeader,
+  CardBody,
+  Heading,
+  useColorModeValue
+} from '@chakra-ui/react';
+import HotEvents from './HotEvents';
+
+/**
+ * 热点事件区域组件
+ * @param {Array} events - 热点事件列表
+ */
+const HotEventsSection = ({ events }) => {
+  const cardBg = useColorModeValue('white', 'gray.800');
+
+  // 如果没有热点事件，不渲染组件
+  if (!events || events.length === 0) {
+    return null;
+  }
+
+  return (
+    <Card mt={8} bg={cardBg}>
+      <CardHeader>
+        <Heading size="md">🔥 热点事件</Heading>
+      </CardHeader>
+      <CardBody>
+        <HotEvents events={events} />
+      </CardBody>
+    </Card>
+  );
+};
+
+export default HotEventsSection;