Community 模块说明
本目录包含社区页面的所有组件，按功能模块进行组织。
目录结构
src/views/Community/
├── index.js # 页面入口
├── components/ # 组件目录
│ ├── SearchFilters/ # 搜索筛选模块
│ │ ├── CompactSearchBox.js
│ │ ├── CompactSearchBox.css
│ │ ├── TradingTimeFilter.js
│ │ └── index.js
│ ├── EventCard/ # 事件卡片模块
│ │ ├── atoms/ # 原子组件
│ │ └── index.js
│ ├── HotEvents/ # 热点事件模块
│ │ ├── HotEvents.js
│ │ ├── HotEvents.css
│ │ ├── HotEventsSection.js
│ │ └── index.js
│ ├── DynamicNews/ # 动态新闻模块
│ │ ├── layouts/
│ │ ├── hooks/
│ │ └── index.js
│ ├── EventDetailModal/ # 事件详情弹窗模块
│ │ ├── EventDetailModal.tsx
│ │ ├── EventDetailModal.less
│ │ └── index.ts
│ └── HeroPanel.js # 英雄面板（独立组件）
└── hooks/ # 页面级 Hooks
├── useEventData.js
├── useEventFilters.js
└── useCommunityEvents.js
1. SearchFilters 模块（搜索筛选）
路径：components/SearchFilters/
| 文件 | 行数 | 功能 |
|---|---|---|
CompactSearchBox.js |
612 | 紧凑搜索框，集成关键词搜索、概念/行业筛选 |
TradingTimeFilter.js |
491 | 交易时间筛选器，被 CompactSearchBox 引用 |
使用方式：
import { CompactSearchBox } from './components/SearchFilters';
2. EventCard 模块（事件卡片）
路径：components/EventCard/
主卡片组件
| 文件 | 功能 |
|---|---|
CompactEventCard.js |
紧凑事件卡片（列表模式） |
DetailedEventCard.js |
详细事件卡片（展开模式） |
DynamicNewsEventCard.js |
动态新闻事件卡片 |
HorizontalDynamicNewsEventCard.js |
水平布局新闻卡片 |
原子组件（atoms/）
| 文件 | 功能 |
|---|---|
EventHeader.js |
事件标题头部 |
EventDescription.js |
事件描述文本 |
EventStats.js |
事件统计数据 |
EventPriceDisplay.js |
股价显示 |
EventTimeline.js |
事件时间线 |
EventFollowButton.js |
关注按钮 |
EventImportanceBadge.js |
重要性徽章 |
ImportanceBadge.js |
通用重要性徽章 |
ImportanceStamp.js |
重要性印章 |
KeywordsCarousel.js |
关键词轮播 |
使用方式：
// 使用主卡片组件
import EventCard from './components/EventCard';
// 使用原子组件
import { EventHeader, EventTimeline } from './components/EventCard/atoms';
3. HotEvents 模块（热点事件）
路径：components/HotEvents/
| 文件 | 功能 |
|---|---|
HotEvents.js |
热点事件列表渲染 |
HotEventsSection.js |
热点事件区块容器 |
使用方式：
import { HotEventsSection } from './components/HotEvents';
4. DynamicNews 模块（动态新闻）
路径：components/DynamicNews/
主组件
| 文件 | 功能 |
|---|---|
DynamicNewsCard.js |
主列表容器（695行） |
EventScrollList.js |
事件滚动列表 |
EventDetailScrollPanel.js |
事件详情滚动面板 |
ModeToggleButtons.js |
模式切换按钮 |
PaginationControl.js |
分页控制器 |
constants.js |
常量配置 |
布局组件（layouts/）
| 文件 | 功能 |
|---|---|
VerticalModeLayout.js |
垂直布局模式 |
VirtualizedFourRowGrid.js |
虚拟滚动四行网格（性能优化） |
Hooks（hooks/）
| 文件 | 功能 |
|---|---|
usePagination.js |
分页逻辑 Hook |
使用方式：
import { DynamicNewsCard } from './components/DynamicNews';
import { usePagination } from './components/DynamicNews/hooks';
5. EventDetailModal 模块（事件详情弹窗）
路径：components/EventDetailModal/
| 文件 | 功能 |
|---|---|
EventDetailModal.tsx |
事件详情弹窗（TypeScript） |
EventDetailModal.less |
弹窗样式 |
使用方式：
import EventDetailModal from './components/EventDetailModal';
6. 独立组件
路径：components/
| 文件 | 行数 | 功能 |
|---|---|---|
HeroPanel.js |
972 | 首页英雄面板（指数K线 + 概念词云） |
说明：
HeroPanel.js使用懒加载，包含 ECharts (~600KB)
更新日志
- 2024-12-09: 目录结构重组
- 创建
SearchFilters/模块（含 CSS） - 创建
EventCard/atoms/原子组件目录 - 创建
HotEvents/模块（含 CSS） - 重组
DynamicNews/模块（含 layouts/ 和 hooks/） - 创建
EventDetailModal/模块
- 创建