# class-homework-wall

**Repository Path**: chengzi404-byte/class-homework-wall

## Basic Information

- **Project Name**: class-homework-wall
- **Description**: No description available
- **Primary Language**: Unknown
- **License**: Apache-2.0
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2026-03-12
- **Last Updated**: 2026-03-21

## Categories & Tags

**Categories**: Uncategorized

**Tags**: Flask, Python, Web

## README

# 📚 班级作业墙 (Class Homework Wall)

一个专为初中生设计的班级作业管理 Web 应用，帮助同学们高效管理作业，解决微信群作业信息混乱的问题。

![License](https://img.shields.io/badge/license-MIT-blue.svg)
![React](https://img.shields.io/badge/react-18.2+-61DAFB.svg)
![Flask](https://img.shields.io/badge/flask-2.0+-000000.svg)

## ✨ 功能特性

### 📋 基础功能
- **作业发布** - 课代表/班干部可以发布作业，支持图文混排和附件上传
- **作业列表** - 支持列表/卡片/日历三种视图，清晰展示所有作业
- **截止提醒** - 自动计算并显示作业剩余时间，紧急作业高亮提醒

### 🚀 进阶功能
- **完成打卡** - 一键标记作业完成，查看班级完成率
- **智能筛选** - 按科目、紧急程度、完成状态多维度筛选
- **历史作业库** - 自动归档历史作业，方便复习回顾
- **班级公告** - 置顶重要通知，不错过任何班级动态

### ✨ 亮点功能
- **数据统计** - 可视化图表展示作业分布和完成趋势
- **三主题切换** - 清新简洁/活泼校园/深色模式，随心切换
- **响应式设计** - 完美适配教室电脑和手机
- **快捷键支持** - `Ctrl+K` 快速打开搜索

## 🎨 主题预览

| 清新简洁 | 活泼校园 | 深色模式 |
|---------|---------|---------|
| 简约现代的蓝色主题 | 青春活力的橙色主题 | 炫酷护眼的深蓝主题 |

## 🛠️ 技术栈

### 前端
- **React 18** - 用户界面框架
- **Vite** - 构建工具
- **Tailwind CSS** - 原子化 CSS 框架
- **Recharts** - 数据可视化图表
- **Lucide React** - 图标库
- **date-fns** - 日期处理

### 后端
- **Python Flask** - Web 框架
- **SQLite** - 轻量级数据库
- **Flask-JWT-Extended** - 用户认证
- **Flask-CORS** - 跨域支持

## 📁 项目结构

```
class-homework-wall/
├── frontend/                 # React 前端
│   ├── src/
│   │   ├── components/      # 组件
│   │   │   ├── Header.jsx
│   │   │   ├── Sidebar.jsx
│   │   │   ├── HomeworkList.jsx
│   │   │   ├── CreateHomeworkModal.jsx
│   │   │   ├── HomeworkDetailModal.jsx
│   │   │   ├── StatisticsPanel.jsx
│   │   │   ├── AnnouncementsPanel.jsx
│   │   │   └── SearchModal.jsx
│   │   ├── contexts/        # React Context
│   │   │   └── ThemeContext.jsx
│   │   ├── data/            # 模拟数据
│   │   │   └── mockData.js
│   │   ├── utils/           # 工具函数
│   │   │   ├── themes.js
│   │   │   └── helpers.js
│   │   ├── App.jsx
│   │   └── main.jsx
│   ├── package.json
│   ├── tailwind.config.js
│   └── vite.config.js
├── backend/                  # Flask 后端
│   ├── app.py               # 主应用
│   ├── models.py            # 数据模型
│   ├── routes/              # API 路由
│   ├── utils/               # 工具函数
│   └── requirements.txt
├── docs/
│   └── API.md               # API 文档
└── README.md
```

## 🚀 快速开始

### 前端启动

```bash
# 进入前端目录
cd frontend

# 安装依赖
npm install

# 启动开发服务器
npm run dev
```

访问 http://localhost:5173 查看应用

### 后端启动（你自己实现）

根据 `docs/API.md` 中的文档实现后端 API。

参考技术栈：
- Python Flask + SQLite
- 端口: 5000
- Base URL: http://localhost:5000/api

## 📖 使用指南

### 作为学生

1. **查看作业** - 打开首页即可看到所有作业，按截止时间排序
2. **筛选作业** - 使用左侧栏筛选待完成/已完成/紧急作业
3. **标记完成** - 点击作业卡片上的圆圈或进入详情页标记完成
4. **搜索作业** - 按 `Ctrl+K` 或点击搜索按钮，支持按科目/紧急程度/关键词搜索

### 作为课代表/班干部

1. **发布作业** - 点击右上角"发布作业"按钮
2. **填写信息** - 选择科目、填写标题和内容、设置截止时间
3. **上传附件** - 支持图片、文档等附件上传
4. **设置紧急度** - 标记紧急/重要作业

### 主题切换

点击右上角的调色板图标，可在三种主题间切换：
- **清新简洁** - 蓝色调，适合专注学习
- **活泼校园** - 橙色调，充满活力
- **深色模式** - 深蓝调，护眼炫酷

## 🔌 API 接口

详细的 API 文档请参考 `docs/API.md`

主要接口：

| 方法 | 路径 | 说明 |
|------|------|------|
| GET | /api/homeworks | 获取作业列表 |
| POST | /api/homeworks | 创建新作业 |
| GET | /api/homeworks/:id | 获取作业详情 |
| POST | /api/homeworks/:id/complete | 标记完成/取消完成 |
| GET | /api/announcements | 获取公告列表 |
| GET | /api/statistics | 获取统计数据 |

## 📝 数据库 Schema

### 核心表

**homeworks** - 作业表
- id, subject, title, content, deadline, urgency
- created_by, class_id, created_at

**homework_completions** - 完成记录表
- id, homework_id, user_id, completed_at

**announcements** - 公告表
- id, title, content, type, is_pinned, created_by

详细 Schema 请参考 `docs/API.md`

## 🎯 后续优化建议

### 功能扩展
- [ ] 添加评论功能，同学可以讨论作业
- [ ] 添加作业答案分享功能
- [ ] 添加定时提醒功能（邮件/微信推送）
- [ ] 添加作业导出功能（PDF/Excel）
- [ ] 添加班级相册功能

### 性能优化
- [ ] 实现数据分页加载
- [ ] 添加 Redis 缓存
- [ ] 图片压缩和 CDN 加速
- [ ] 实现 WebSocket 实时通知

### 安全增强
- [ ] 添加验证码防止恶意注册
- [ ] 实现接口限流
- [ ] 添加操作日志
- [ ] 定期数据备份

## 🤝 贡献指南

1. Fork 本项目
2. 创建特性分支 (`git checkout -b feature/AmazingFeature`)
3. 提交更改 (`git commit -m 'Add some AmazingFeature'`)
4. 推送分支 (`git push origin feature/AmazingFeature`)
5. 创建 Pull Request

## 📄 许可证

本项目基于 MIT 许可证开源 - 查看 [LICENSE](LICENSE) 文件了解详情

## 🙏 致谢

- 感谢 [Vite](https://vitejs.dev/) 提供极速的开发体验
- 感谢 [Tailwind CSS](https://tailwindcss.com/) 提供灵活的样式方案
- 感谢 [Lucide](https://lucide.dev/) 提供精美的图标

---

**祝你的班级作业墙项目顺利！** 🎉

如有问题，欢迎提交 Issue 或联系开发者。