# next.js todo list

**Repository Path**: free_bird/next.js-todo-list

## Basic Information

- **Project Name**: next.js todo list
- **Description**: 一个基于next.js的todo list
- **Primary Language**: Unknown
- **License**: MIT
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 1
- **Forks**: 0
- **Created**: 2025-05-11
- **Last Updated**: 2025-05-18

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# 待办事项应用 (Next.js + JSON)

一个现代化、美观的待办事项应用，基于Next.js和JSON构建，具有以下特点：
- 使用JSON文件实现数据持久化
- 现代化UI设计，带有毛玻璃效果和流畅动画
- 使用Tailwind CSS实现响应式布局
- 完善的标签分类和筛选系统
- 自定义标签管理功能
- 优化的代码架构和可维护性

## 🌟 功能特点

- **任务管理**：添加、完成、删除待办事项
- **标签系统**：按不同标签分类待办事项，支持自定义标签
- **数据分析**：标签统计和可视化进度展示
- **自定义标签**：创建个性化标签并选择颜色
- **视觉效果**：流畅的动画和交互效果
- **数据持久化**：使用JSON文件本地存储
- **响应式设计**：适配各种屏幕尺寸的设备

## 🏷️ 标签管理系统

应用提供了强大的标签管理功能：
- 内置多种预设标签（工作、学习、生活等）
- 创建自定义标签并选择颜色
- 标签统计面板显示每个类别的完成情况
- 按标签筛选待办事项
- 高亮显示完成率最高的标签类别

## 🚀 快速开始

首先，安装依赖：

```bash
npm install
```

然后，运行开发服务器：

```bash
npm run dev
```

在浏览器中打开 [http://localhost:3000](http://localhost:3000) 查看结果。

## 🔑 登录信息

默认用户名: `admin`  
默认密码: `123456`

可以在 `.env.local` 文件中修改这些值。

## 💾 数据持久化

该应用使用JSON文件来存储待办事项，数据文件保存在 `data/todos.json` 中。
自定义标签数据存储在浏览器的localStorage中，方便用户在同一浏览器中持久使用。

系统会自动为admin用户创建一些初始待办事项。您登录后可以添加、编辑和删除自己的待办事项。

## 🏗️ 项目架构

```
├── app/              # Next.js 应用目录
│   ├── api/          # API 路由
│   ├── login/        # 登录页面
│   └── page.tsx      # 主页
├── components/       # React 组件
│   ├── Todo.tsx      # 待办事项组件
│   ├── TodoForm.tsx  # 添加待办事项表单
│   ├── TodoList.tsx  # 待办事项列表
│   └── TagStats.tsx  # 标签统计组件
├── lib/              # 工具库
│   └── db.ts         # 数据库操作
└── types/            # 类型定义
    └── index.ts      # 类型和常量
```

## 🔧 生产环境部署

构建生产版本：

```bash
npm run build
```

运行生产版本：

```bash
npm start
```

## 🛠️ 技术栈

- **Next.js** - React 框架
- **React** - UI 库
- **TypeScript** - 类型安全
- **JSON** - 数据存储
- **Tailwind CSS** - 样式框架
- **React Icons** - 图标库
- **LocalStorage** - 标签管理存储