这是一个功能强大的待办事项管理应用，具有3D立体设计风格。支持任务创建、编辑、删除、完成状态管理，日期筛选功能，以及倒计时提醒功能。使用React 19、TypeScript、Vite、Redux Toolkit和IndexedDB构建，提供流畅的用户体验和数据持久化能力。
--- ## 📚 仓库介绍 ### 🎯 项目功能 📋 **任务管理** - 创建、编辑、删除任务，支持完成状态切换 📅 **日期筛选** - 虚拟滚动日期列表，无限加载，居中显示 ⏱️ **倒计时器** - 开始/暂停/重置，倒计时结束自动完成任务 💾 **数据持久化** - IndexedDB 本地存储，离线可用，刷新不丢失 🎨 **3D 设计** - 柔软橡胶质感、卡通风格、多层阴影效果 📱 **响应式** - 支持 PC 和移动端，自适应布局 ### 🛠️ 技术栈 **前端框架** - ⚖️ React 19 - 最新版本，函数组件 + Hooks - 🔷 TypeScript - 严格类型检查（ES2022） - ⚡ Vite - 极速热更新和构建 **状态管理** - 📦 Redux Toolkit - createSlice + createAsyncThunk - 🔗 React-Redux - 官方 React 绑定 **样式 & 数据** - 🎨 SCSS - 模块化样式，3D 立体效果 - 💾 IndexedDB - 浏览器本地数据库 --- 采用 3D 立体插画风格，柔软橡胶质感与卡通化设计，配色鲜明活泼，打造富有玩味的视觉体验。 ## 🎨 设计风格 - **3D 立体插画**：柔软橡胶质感、圆润造型、卡通化风格 - **配色方案**：亮橙色（#ff8a3d）+ 蓝色（#4a90e2） - **视觉效果**：多层阴影、渐变背景、3D 按钮、底部投影 - **交互反馈**：按压效果、悬停动画、缩放变换 ## ✨ 核心功能 ### 📝 任务管理 - ✅ **创建任务**：自定义标题、设置预计完成时间 - ✅ **编辑任务**：修改标题、预计完成时间及完成状态 - ✅ **删除任务**：自定义确认弹窗（非原生 alert） - ✅ **完成状态切换**：点击图标快速切换，已完成任务显示绿色主题 - ✅ **已完成任务限制**：已完成任务禁用编辑、删除、倒计时功能 ### 📅 日期筛选 - ✅ **动态日期列表**：日期随系统时间实时更新 - ✅ **虚拟滚动**：只渲染可见区域 + 左右缓冲，性能优化 - ✅ **无限加载**：向左/右滚动自动加载更多日期 - ✅ **居中显示**：当前日期自动居中于视口 - ✅ **数据联动**：点击日期自动筛选对应任务 ### ⏱️ 倒计时功能 - ✅ **开始/暂停**：点击"开始执行"触发倒计时 - ✅ **实时显示**：以"时:分:秒"格式显示剩余时间 - ✅ **重置功能**：一键重置到预设时间 - ✅ **完成提醒**：时间到达显示"🎉 任务时间已到！" - ✅ **自动完成**：倒计时结束自动勾选任务为完成状态 - ✅ **页面刷新保持**：刷新后自动检查并标记已完成任务 ### 💾 数据持久化 - ✅ **IndexedDB 存储**：离线数据持久化 - ✅ **完整 CRUD**：增删改查工具类封装 - ✅ **状态同步**：倒计时进度、完成状态不丢失 ### 📱 响应式设计 - ✅ **移动端适配**：支持触摸滚动、响应式布局 - ✅ **PC 端优化**：鼠标悬停效果、键盘操作 ## 🛠️ 技术栈 ### 前端框架 - **React 19**：最新版本，函数组件 + Hooks - **TypeScript**：严格类型检查（ES2022） - **Vite**：极速构建工具 ### 状态管理 - **Redux Toolkit**：现代化 Redux，createSlice + createAsyncThunk - **React-Redux**：官方 React 绑定 ### 样式方案 - **SCSS**：CSS 预处理器，支持嵌套、变量、混合 - **CSS 模块化**：组件级样式隔离 ### 数据存储 - **IndexedDB**：浏览器本地数据库 - **自定义工具类**：完整的 CRUD 操作封装 ## 📁 项目结构 ```plaintext src/ ├── components/ # React组件 │ ├── DateFilter.tsx # 日期筛选器（虚拟滚动） │ ├── TodoForm.tsx # 添加任务表单 │ ├── TodoList.tsx # 任务列表 │ ├── TodoItem.tsx # 单个任务项 │ ├── Timer.tsx # 倒计时器 │ ├── ConfirmModal.tsx # 自定义确认弹窗 │ └── *.scss # 对应样式文件 ├── store/ # Redux状态管理 │ ├── store.ts # Store配置 │ ├── todoSlice.ts # Todo切片（状态 + 异步操作） │ └── hooks.ts # 类型化Hooks（useAppDispatch/useAppSelector） ├── utils/ # 工具函数 │ └── indexedDB.ts # IndexedDB封装（完整CRUD） ├── App.tsx # 主应用组件 ├── main.tsx # 应用入口 └── index.scss # 全局样式 ``` ## 🚀 快速开始 ### 安装依赖 ```bash npm install ``` ### 开发模式 ```bash npm run dev ``` ### 构建生产版本 ```bash npm run build ``` ### 预览构建结果 ```bash npm run preview ``` ## 📦 主要依赖 ```json { "dependencies": { "react": "^19.x", "react-dom": "^19.x", "react-redux": "^9.x", "@reduxjs/toolkit": "^2.x", "sass": "^1.x" }, "devDependencies": { "@vitejs/plugin-react": "^4.x", "typescript": "~5.6.x", "vite": "^6.x" } } ``` ## 🎯 核心特性实现 ### 1. 虚拟滚动优化 ```typescript // 只渲染可见区域的 date-item const visibleDates = useMemo(() => { const startIndex = Math.floor(scrollLeft / itemWidth) - bufferCount; const endIndex = Math.ceil((scrollLeft + containerWidth) / itemWidth) + bufferCount; return allDates.slice(startIndex, endIndex + 1); }, [scrollLeft, allDates]); ``` ### 2. Redux 异步操作 ```typescript export const addTodoAsync = createAsyncThunk( "todos/addTodo", async (todo: Todo) => { await indexedDBUtil.add(todo); return todo; } ); ``` ### 3. IndexedDB 封装 ```typescript class IndexedDBUtil { async add(todo: TodoData): Promise