vf_react/src/views/Community/README.md

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/ 模块