77 lines
1.5 KiB
Markdown
77 lines
1.5 KiB
Markdown
|
# React 前端重构说明
|
||
|
|
|
||
|
|
## 📁 项目结构
|
||
|
|
|
||
|
|
```
|
||
|
|
frontend-react/
|
||
|
|
├── src/
|
||
|
|
│ ├── components/
|
||
|
|
│ │ ├── Calendar.js # ⭐ 日历组件（核心）
|
||
|
|
│ │ ├── DiaryDetail.js # 日记详情
|
||
|
|
│ │ ├── ExperienceList.js # 经验总结列表
|
||
|
|
│ │ └── StatsPanel.js # 统计面板
|
||
|
|
│ ├── App.js # 主应用
|
||
|
|
│ ├── index.js # 入口
|
||
|
|
│ └── index.css # 样式
|
||
|
|
├── package.json
|
||
|
|
└── README.md
|
||
|
|
```
|
||
|
|
|
||
|
|
## 🎯 组件化优势
|
||
|
|
|
||
|
|
### 之前的 HTML/JS 大杂烩
|
||
|
|
- ❌ 所有逻辑混在一个文件
|
||
|
|
- ❌ 难以维护
|
||
|
|
- ❌ 看不清功能边界
|
||
|
|
- ❌ 容易误删核心功能
|
||
|
|
|
||
|
|
### 现在的 React 组件
|
||
|
|
- ✅ 每个功能独立组件
|
||
|
|
- ✅ 清晰的依赖关系
|
||
|
|
- ✅ 易于测试和维护
|
||
|
|
- ✅ 组件级别注释保护
|
||
|
|
|
||
|
|
## 🔧 开发指南
|
||
|
|
|
||
|
|
### 修改日历功能
|
||
|
|
```bash
|
||
|
|
# 只需修改这个文件
|
||
|
|
src/components/Calendar.js
|
||
|
|
|
||
|
|
# 阅读文档
|
||
|
|
docs/CALENDAR.md
|
||
|
|
|
||
|
|
# 测试
|
||
|
|
npm start
|
||
|
|
```
|
||
|
|
|
||
|
|
### 添加新功能
|
||
|
|
1. 在 `components/` 创建新组件
|
||
|
|
2. 在 `App.js` 中引入
|
||
|
|
3. 运行测试
|
||
|
|
|
||
|
|
## 🚀 构建部署
|
||
|
|
|
||
|
|
```bash
|
||
|
|
# 安装依赖
|
||
|
|
npm install
|
||
|
|
|
||
|
|
# 开发模式
|
||
|
|
npm start
|
||
|
|
|
||
|
|
# 生产构建
|
||
|
|
npm run build
|
||
|
|
|
||
|
|
# 部署构建产物
|
||
|
|
cp -r build/* ../frontend/
|
||
|
|
```
|
||
|
|
|
||
|
|
## ⚠️ 核心组件
|
||
|
|
|
||
|
|
**不可删除的组件：**
|
||
|
|
- `Calendar.js` - 日历组件 ⭐⭐⭐
|
||
|
|
- `App.js` - 主应用 ⭐⭐
|
||
|
|
- `StatsPanel.js` - 统计面板 ⭐
|
||
|
|
|
||
|
|
修改前必须阅读 `docs/` 对应文档。
|