# 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 引用 |

**使用方式**：
```javascript
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` | 关键词轮播 |

**使用方式**：
```javascript
// 使用主卡片组件
import EventCard from './components/EventCard';

// 使用原子组件
import { EventHeader, EventTimeline } from './components/EventCard/atoms';
```

---

## 3. HotEvents 模块（热点事件）

路径：`components/HotEvents/`

| 文件 | 功能 |
|------|------|
| `HotEvents.js` | 热点事件列表渲染 |
| `HotEventsSection.js` | 热点事件区块容器 |

**使用方式**：
```javascript
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 |

**使用方式**：
```javascript
import { DynamicNewsCard } from './components/DynamicNews';
import { usePagination } from './components/DynamicNews/hooks';
```

---

## 5. EventDetailModal 模块（事件详情弹窗）

路径：`components/EventDetailModal/`

| 文件 | 功能 |
|------|------|
| `EventDetailModal.tsx` | 事件详情弹窗（TypeScript） |
| `EventDetailModal.less` | 弹窗样式 |

**使用方式**：
```javascript
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/` 模块