Taro TodoList

一个基于 Taro + React + NutUI + Zustand 的跨端待办小应用，包含「今日待办」与「历史记录」两大页面，支持添加、勾选、删除与按日期分组浏览。

🖼️ 界面预览

首页	添加任务弹窗	历史记录

✨ 特性

• 今日待办：快速添加、勾选完成、删除任务
• 历史记录：按日期自动分组，展示每日任务数量
• UI 组件：NutUI Taro 组件库
• 状态管理：Zustand，本地内存存储
• 简洁样式：自定义 SCSS，移动端友好

🧭 目录结构

• src/app.config.ts：全局路由与 tabBar 配置（今日 / 历史）
• src/app.ts：应用入口，注册全局样式
• src/pages/home：今日待办页
• src/pages/history：历史记录页
• src/store/todosList.ts：Zustand 待办状态（新增/切换/删除/按日查询）

🛠 技术栈

• Taro + React
• NutUI React Taro
• Zustand
• SCSS

🚀 快速开始

安装依赖

npm install

开发预览（示例：微信小程序）

npm run dev:weapp

H5 预览

npm run dev:h5

打包构建

npm run build:weapp
npm run build:h5

📱 功能概览

• 添加待办：弹窗输入文本，回车确认清空输入
• 勾选完成：复选框切换完成状态
• 删除待办：二次确认弹窗，防误删
• 日期分组：历史页按日期倒序分组展示，显示每组数量，格式化为「今天/昨天/日期」

🧩 数据结构

type Todo = { id: number text: string completed: boolean date: string // YYYY-M-D }

• addTodo(text, date?)：新增，默认使用今日日期
• toggleTodo(id)：切换完成状态
• deleteTodo(id)：删除
• getTodayTodos()：获取今日待办
• getTodosByDate(date)：按日期过滤

🎨 UI 说明

• 主要组件：Button, Dialog, TextArea, Cell, Checkbox（NutUI）
• 配色：选中色 #fa2c19，背景浅灰，卡片阴影

📂 页面简述

• pages/home：今日待办列表，空态提示「点击右上角添加任务」
• pages/history：历史分组列表，空态提示去首页添加任务