refactor: Community 目录结构重组 + 修复导入路径 + 添加 Mock 数据
## 目录重构 - DynamicNewsCard/ → DynamicNews/（含 layouts/, hooks/ 子目录） - EventCard 原子组件 → EventCard/atoms/ - EventDetailModal 独立目录化 - HotEvents 独立目录化（含 CSS） - SearchFilters 独立目录化（CompactSearchBox, TradingTimeFilter） ## 导入路径修复 - EventCard/*.js: 统一使用 @constants/, @utils/, @components/ 别名 - atoms/*.js: 修复移动后的相对路径问题 - DynamicNewsCard.js: 更新 contexts, store, constants 导入 - EventHeaderInfo.js, CompactMetaBar.js: 修复 EventFollowButton 导入 ## Mock Handler 添加 - /api/events/:eventId/expectation-score - 事件超预期得分 - /api/index/:indexCode/realtime - 指数实时行情 ## 警告修复 - CitationMark.js: overlayInnerStyle → styles (Antd 5.x) - CitedContent.js: 移除不支持的 jsx 属性 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude <noreply@anthropic.com>
This commit is contained in:
zdl
184
src/views/Community/README.md
Normal file
184
src/views/Community/README.md
Normal file
@@ -0,0 +1,184 @@
|
||||
# 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/` 模块
|
||||
Reference in New Issue
Block a user