docs: 添加 EventList.js 重构文档
This commit is contained in:
zdl
195
README.md
195
README.md
@@ -1,3 +1,198 @@
|
|||||||
# vf_react
|
# vf_react
|
||||||
|
|
||||||
前端
|
前端
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## 📚 重构记录
|
||||||
|
|
||||||
|
### 2025-10-30: EventList.js 组件化重构
|
||||||
|
|
||||||
|
#### 🎯 重构目标
|
||||||
|
将 Community 社区页面的 `EventList.js` 组件（1095行）拆分为多个可复用的子组件，提高代码可维护性和复用性。
|
||||||
|
|
||||||
|
#### 📊 重构成果
|
||||||
|
- **重构前**: 1095 行
|
||||||
|
- **重构后**: 497 行
|
||||||
|
- **减少**: 598 行 (-54.6%)
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
### 📁 新增目录结构
|
||||||
|
|
||||||
|
```
|
||||||
|
src/views/Community/components/EventCard/
|
||||||
|
├── index.js (60行) - EventCard 统一入口，智能路由紧凑/详细模式
|
||||||
|
│
|
||||||
|
├── ──────────────────────────────────────────────────────────
|
||||||
|
│ 原子组件 (Atoms) - 7个基础UI组件
|
||||||
|
├── ──────────────────────────────────────────────────────────
|
||||||
|
│
|
||||||
|
├── EventTimeline.js (60行) - 时间轴显示组件
|
||||||
|
│ └── Props: createdAt, timelineStyle, borderColor, minHeight
|
||||||
|
│
|
||||||
|
├── EventImportanceBadge.js (100行) - 重要性等级标签 (S/A/B/C/D)
|
||||||
|
│ └── Props: importance, showTooltip, showIcon, size
|
||||||
|
│
|
||||||
|
├── EventStats.js (60行) - 统计信息 (浏览/帖子/关注)
|
||||||
|
│ └── Props: viewCount, postCount, followerCount, size, spacing
|
||||||
|
│
|
||||||
|
├── EventFollowButton.js (40行) - 关注按钮
|
||||||
|
│ └── Props: isFollowing, followerCount, onToggle, size, showCount
|
||||||
|
│
|
||||||
|
├── EventPriceDisplay.js (130行) - 价格变动显示 (平均/最大/周)
|
||||||
|
│ └── Props: avgChange, maxChange, weekChange, compact, inline
|
||||||
|
│
|
||||||
|
├── EventDescription.js (60行) - 描述文本 (支持展开/收起)
|
||||||
|
│ └── Props: description, textColor, minLength, noOfLines
|
||||||
|
│
|
||||||
|
├── EventHeader.js (100行) - 事件标题头部
|
||||||
|
│ └── Props: title, importance, onTitleClick, linkColor, compact
|
||||||
|
│
|
||||||
|
├── ──────────────────────────────────────────────────────────
|
||||||
|
│ 组合组件 (Molecules) - 2个卡片组件
|
||||||
|
├── ──────────────────────────────────────────────────────────
|
||||||
|
│
|
||||||
|
├── CompactEventCard.js (160行) - 紧凑模式事件卡片
|
||||||
|
│ ├── 使用: EventTimeline, EventHeader, EventStats, EventFollowButton
|
||||||
|
│ └── Props: event, index, isFollowing, followerCount, callbacks...
|
||||||
|
│
|
||||||
|
└── DetailedEventCard.js (170行) - 详细模式事件卡片
|
||||||
|
├── 使用: EventTimeline, EventHeader, EventStats, EventFollowButton,
|
||||||
|
│ EventPriceDisplay, EventDescription
|
||||||
|
└── Props: event, isFollowing, followerCount, callbacks...
|
||||||
|
```
|
||||||
|
|
||||||
|
**总计**: 10个文件，940行代码
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
### 🔧 重构的文件
|
||||||
|
|
||||||
|
#### `src/views/Community/components/EventList.js`
|
||||||
|
|
||||||
|
**移除的内容**:
|
||||||
|
- ❌ `renderPriceChange` 函数 (~60行)
|
||||||
|
- ❌ `renderCompactEvent` 函数 (~200行)
|
||||||
|
- ❌ `renderDetailedEvent` 函数 (~300行)
|
||||||
|
- ❌ `expandedDescriptions` state（展开状态管理移至子组件）
|
||||||
|
- ❌ 冗余的 Chakra UI 导入
|
||||||
|
|
||||||
|
**保留的功能**:
|
||||||
|
- ✅ WebSocket 实时推送
|
||||||
|
- ✅ 浏览器原生通知
|
||||||
|
- ✅ 关注状态管理 (followingMap, followCountMap)
|
||||||
|
- ✅ 分页控制
|
||||||
|
- ✅ 视图模式切换（紧凑/详细）
|
||||||
|
- ✅ 推送权限管理
|
||||||
|
|
||||||
|
**新增引入**:
|
||||||
|
```javascript
|
||||||
|
import EventCard from './EventCard';
|
||||||
|
```
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
### 🏗️ 架构改进
|
||||||
|
|
||||||
|
#### 重构前（单体架构）
|
||||||
|
```
|
||||||
|
EventList.js (1095行)
|
||||||
|
├── 业务逻辑 (WebSocket, 关注, 通知)
|
||||||
|
├── renderCompactEvent (200行)
|
||||||
|
│ └── 所有UI代码内联
|
||||||
|
├── renderDetailedEvent (300行)
|
||||||
|
│ └── 所有UI代码内联
|
||||||
|
└── renderPriceChange (60行)
|
||||||
|
```
|
||||||
|
|
||||||
|
#### 重构后（组件化架构）
|
||||||
|
```
|
||||||
|
EventList.js (497行) - 容器组件
|
||||||
|
├── 业务逻辑 (WebSocket, 关注, 通知)
|
||||||
|
└── 渲染逻辑
|
||||||
|
└── EventCard (智能路由)
|
||||||
|
├── CompactEventCard (紧凑模式)
|
||||||
|
│ ├── EventTimeline
|
||||||
|
│ ├── EventHeader (compact)
|
||||||
|
│ ├── EventStats
|
||||||
|
│ └── EventFollowButton
|
||||||
|
└── DetailedEventCard (详细模式)
|
||||||
|
├── EventTimeline
|
||||||
|
├── EventHeader (detailed)
|
||||||
|
├── EventStats
|
||||||
|
├── EventFollowButton
|
||||||
|
├── EventPriceDisplay
|
||||||
|
└── EventDescription
|
||||||
|
```
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
### ✨ 优势
|
||||||
|
|
||||||
|
1. **可维护性** ⬆️
|
||||||
|
- 每个组件职责单一（单一职责原则）
|
||||||
|
- 代码行数减少 54.6%
|
||||||
|
- 组件边界清晰，易于理解
|
||||||
|
|
||||||
|
2. **可复用性** ⬆️
|
||||||
|
- 原子组件可在其他页面复用
|
||||||
|
- 例如：EventImportanceBadge 可用于任何需要显示事件等级的地方
|
||||||
|
|
||||||
|
3. **可测试性** ⬆️
|
||||||
|
- 小组件更容易编写单元测试
|
||||||
|
- 可独立测试每个组件的渲染和交互
|
||||||
|
|
||||||
|
4. **性能优化** ⬆️
|
||||||
|
- React 可以更精确地追踪变化
|
||||||
|
- 减少不必要的重渲染
|
||||||
|
- 每个子组件可独立优化（useMemo, React.memo）
|
||||||
|
|
||||||
|
5. **开发效率** ⬆️
|
||||||
|
- 新增功能时只需修改对应的子组件
|
||||||
|
- 代码审查更高效
|
||||||
|
- 降低了代码冲突的概率
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
### 📦 依赖工具函数
|
||||||
|
|
||||||
|
本次重构使用了之前提取的工具函数：
|
||||||
|
|
||||||
|
```
|
||||||
|
src/utils/priceFormatters.js (105行)
|
||||||
|
├── getPriceChangeColor(value) - 获取价格变化文字颜色
|
||||||
|
├── getPriceChangeBg(value) - 获取价格变化背景颜色
|
||||||
|
├── getPriceChangeBorderColor(value) - 获取价格变化边框颜色
|
||||||
|
├── formatPriceChange(value) - 格式化价格为字符串
|
||||||
|
└── PriceArrow({ value }) - 价格涨跌箭头组件
|
||||||
|
|
||||||
|
src/constants/animations.js (72行)
|
||||||
|
├── pulseAnimation - 脉冲动画（S/A级标签）
|
||||||
|
├── fadeIn - 渐入动画
|
||||||
|
├── slideInUp - 从下往上滑入
|
||||||
|
├── scaleIn - 缩放进入
|
||||||
|
└── spin - 旋转动画（Loading）
|
||||||
|
```
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
### 🚀 下一步优化计划
|
||||||
|
|
||||||
|
Phase 1 已完成，后续可继续优化：
|
||||||
|
|
||||||
|
- **Phase 2**: 拆分 StockDetailPanel.js (1067行 → ~250行)
|
||||||
|
- **Phase 3**: 拆分 InvestmentCalendar.js (827行 → ~200行)
|
||||||
|
- **Phase 4**: 拆分 MidjourneyHeroSection.js (813行 → ~200行)
|
||||||
|
- **Phase 5**: 拆分 UnifiedSearchBox.js (679行 → ~180行)
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
### 🔗 相关提交
|
||||||
|
|
||||||
|
- `feat: 拆分 EventList.js/提取价格相关工具函数到 utils/priceFormatters.js`
|
||||||
|
- `feat(EventList): 创建事件卡片原子组件`
|
||||||
|
- `feat(EventList): 创建事件卡片组合组件`
|
||||||
|
- `refactor(EventList): 使用组件化架构替换内联渲染函数`
|
||||||
|
|
||||||
|
---
|
||||||
Reference in New Issue
Block a user