# todo-app

**Repository Path**: iDai/todo-app

## Basic Information

- **Project Name**: todo-app
- **Description**: No description available
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2026-03-05
- **Last Updated**: 2026-03-05

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# Todo Hub - 简洁待办应用

一个基于 Next.js 16 + React 19 的简洁待办列表应用，采用 minimalist 设计风格，帮助你保持专注和高效。

![Next.js](https://img.shields.io/badge/Next.js-16-black?logo=next.js)
![React](https://img.shields.io/badge/React-19-61dafb?logo=react)
![Tailwind CSS](https://img.shields.io/badge/Tailwind-4-38bdf8?logo=tailwind-css)
![daisyUI](https://img.shields.io/badge/daisyUI-5-5a0ef8?logo=daisyui)

## 功能特性

- **任务管理**: 添加、完成/取消完成、删除任务
- **筛选视图**: 全部任务、今日任务、已完成任务
- **数据持久化**: 使用 localStorage 保存数据，刷新不丢失
- **撤销功能**: 删除任务后支持 5 秒内撤销
- **响应式设计**: 桌面端侧边栏 + 移动端抽屉式菜单
- **今日概览**: 显示今日待办和已完成任务数量
- **时间追踪**: 记录每个任务的创建时间和完成时间
- **极简设计**: 自定义 todoclean 主题，清爽蓝色系
- **数据导出/导入**: 支持将所有任务数据导出为 JSON 文件，也可从备份文件导入恢复

## 技术栈

### 核心框架
- **Next.js 16.1.6** - React 全栈框架 (App Router)
- **React 19.2.4** - UI 库
- **TypeScript 5.7.3** - 类型系统

### UI 组件
- **shadcn/ui** (New York 风格) - 基于 Radix UI 的组件库
- **daisyUI 5** - Tailwind CSS 组件插件
- **Tailwind CSS 4.2.0** - 原子化 CSS 框架
- **Lucide React** - 图标库

### 表单与验证
- **React Hook Form 7.54.1** - 表单库
- **Zod 3.24.1** - Schema 验证

### 工具库
- **clsx + tailwind-merge** - 样式合并工具
- **class-variance-authority** - 样式变体工具

## 开发指南

### 环境要求
- Node.js 18+
- pnpm (推荐使用 pnpm 作为包管理器)

### 安装依赖
```bash
pnpm install
```

### 启动开发服务器
```bash
pnpm dev
```

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

### 构建生产版本
```bash
pnpm build
```

### 启动生产服务器
```bash
pnpm start
```

### 运行 ESLint
```bash
pnpm lint
```

## 项目结构

```
todo-app/
├── app/                        # Next.js App Router
│   ├── layout.tsx              # 根布局 (字体、主题配置)
│   ├── page.tsx                # 主页面 (客户端组件，核心逻辑)
│   └── globals.css             # 全局样式 + daisyUI 主题配置
├── components/
│   ├── ui/                     # shadcn/ui 基础组件
│   ├── todo-sidebar.tsx        # 桌面端侧边栏 (含今日概览)
│   ├── mobile-header.tsx       # 移动端头部导航
│   ├── task-list.tsx           # 任务列表容器
│   ├── task-item.tsx           # 单个任务组件
│   ├── task-input.tsx          # 新增任务输入框
│   └── empty-state.tsx         # 空状态提示
├── hooks/
│   ├── use-mobile.ts           # 移动端检测 hook
│   └── use-toast.ts            # Toast 通知 hook
├── lib/
│   └── utils.ts                # cn() 工具函数
├── public/                     # 静态资源
└── package.json                # 依赖配置
```

## 核心功能实现

### 数据持久化
使用 `localStorage` 存储任务数据：
- 初始化时从 localStorage 加载
- 每次任务变更时自动保存
- 水合保护：服务端渲染时不访问 localStorage

### 数据导出/导入
支持导出所有任务数据到本地，也可从备份文件导入：
- **导出**: 点击侧边栏底部的 Export 按钮，下载 JSON 格式备份文件
- **导入**: 点击 Import 按钮选择 JSON 文件，导入后替换当前所有任务
- **文件格式**:
  ```json
  {
    "tasks": [...],
    "exportedAt": "2026-03-04T..."
  }
  ```

### 任务数据结构
```typescript
interface Task {
  id: string           // 唯一标识
  text: string         // 任务内容
  completed: boolean   // 完成状态
  createdAt: string    // 创建日期 (ISO 字符串)
  completedAt?: string // 完成时间 (ISO 字符串)
  isOverdue?: boolean  // 是否为逾期任务（非今日创建且未完成）
}
```

### 筛选逻辑
- **All Tasks**: 显示所有任务
- **Today**: 显示所有未完成的任务（包含今日创建 + 之前未完成，之前未完成的会标记"逾期"）
- **Completed**: 筛选 `completed === true` 的任务

## 部署指南

### Vercel 部署（推荐）

1. 安装 Vercel CLI：
```bash
npm i -g vercel
```

2. 在项目中运行：
```bash
vercel
```

3. 按提示完成部署

### 其他平台

构建后部署 `dist` 或 `.next` 目录到任意支持 Node.js 的托管平台：

```bash
pnpm build
# 然后部署 .next 目录
```

### 环境变量

无需特殊环境变量配置。

## 自定义主题

主题配置在 `app/globals.css` 中，修改 `todoclean` 主题的颜色变量：

```css
@plugin "daisyui/theme" {
  name: "todoclean";
  --color-primary: oklch(55% 0.2 255);  /* 主色调 - 蓝色 */
  --color-accent: oklch(62% 0.18 255);  /* 强调色 */
  /* ... 其他颜色 */
}
```

## 浏览器支持

- Chrome (最新版)
- Firefox (最新版)
- Safari (最新版)
- Edge (最新版)

## License

MIT