# react-task-manager

**Repository Path**: code-science-lab/react-task-manager

## Basic Information

- **Project Name**: react-task-manager
- **Description**: React 快速开始的练习项目
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2025-09-09
- **Last Updated**: 2025-09-09

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# 📝 React 任务清单 (Task Manager)

一个基于 React + Bootstrap + localStorage 的任务管理应用。

## ✨ 功能特性

- ✅ **新增任务** - 输入任务内容并添加
- ❌ **删除任务** - 点击删除按钮移除任务
- ☑️ **完成状态切换** - 点击复选框标记完成/未完成
- ✏️ **编辑任务** - 双击任务文本进入编辑模式
- 💾 **数据持久化** - 使用 localStorage 保存数据
- 🗑️ **清空已完成** - 一键删除所有已完成任务
- 📱 **响应式设计** - 支持移动端和桌面端

## 🚀 快速开始

### 1. 安装依赖

```bash
npm install
```

### 2. 启动开发服务器

```bash
npm start
```

应用将在 `http://localhost:3000` 启动

### 3. 构建生产版本

```bash
npm run build
```

## 🛠️ 技术栈

- **React 18** - 用户界面库
- **Bootstrap 5** - CSS 框架
- **Webpack 5** - 模块打包器
- **Babel** - JavaScript 编译器
- **localStorage** - 数据持久化

## 📁 项目结构

```
react-task-manager/
├── public/
│   └── index.html          # HTML 模板
├── src/
│   ├── components/
│   │   ├── TaskForm.js     # 任务表单组件
│   │   ├── TaskItem.js     # 任务项组件
│   │   └── TaskList.js     # 任务列表组件
│   ├── App.js              # 主应用组件
│   ├── App.css             # 应用样式
│   ├── index.js            # 应用入口
│   └── index.css           # 全局样式
├── package.json            # 项目配置
├── webpack.config.js       # Webpack 配置
├── .babelrc               # Babel 配置
└── README.md              # 项目说明
```

## 🎯 使用说明

1. **添加任务**: 在输入框中输入任务内容，点击"添加任务"按钮或按回车键
2. **完成任务**: 点击任务左侧的复选框来标记任务完成
3. **编辑任务**: 双击任务文本进入编辑模式，修改后按回车保存
4. **删除任务**: 点击任务右侧的删除按钮
5. **清空已完成**: 点击底部的"清空已完成"按钮删除所有已完成任务

## 📊 数据结构

任务数据以 JSON 格式存储在 localStorage 中：

```json
[
  {
    "id": 1640995200000,
    "text": "学习 React 入门",
    "completed": false
  },
  {
    "id": 1640995260000,
    "text": "完成任务清单小项目",
    "completed": true
  }
]
```

## 🎨 界面预览

- 现代化的卡片式设计
- 渐变背景色
- 响应式布局
- 流畅的动画效果
- Bootstrap 图标支持

## 📝 开发说明

- 使用 React Hooks (useState, useEffect) 管理状态
- 组件化设计，便于维护和扩展
- 支持键盘快捷键操作
- 数据验证和错误提示
- 无障碍访问支持

## 🔧 自定义配置

可以通过修改以下文件来自定义应用：

- `src/App.css` - 应用样式
- `src/index.css` - 全局样式
- `webpack.config.js` - 构建配置
- `package.json` - 项目依赖

## 📄 许可证

MIT License