To-Do List 应用

一个美观、功能完善的待办事项管理应用，具有现代化UI设计和丰富的自定义选项。

🚀 功能特点

任务管理

• 添加、删除待办任务
• 标记任务完成/未完成状态
• 任务过滤（全部、待完成、已完成）
• 一键清除所有已完成任务
• 显示剩余待完成任务数量

视觉设计

• 现代化UI界面，流畅的动画效果
• 深色/浅色模式无缝切换
• 6种精美背景样式（4种渐变背景，2种抽象图案背景）
• 可调节背景透明度
• 完全响应式设计，适配桌面和移动设备

用户体验

• 本地存储，保存任务和个性化设置
• 平滑的交互动画和过渡效果
• 直观的设置面板
• 空状态友好提示
• 任务创建时间记录

🛠️ 技术栈

• 前端框架: React 19
• 构建工具: Vite
• 样式方案: CSS3 (现代特性)
• 存储方案: localStorage
• 响应式设计: CSS Flexbox & Grid
• 动画效果: CSS Animations & Transitions
• 开发服务器: Vite Dev Server

📦 安装与运行

前提条件

• Node.js 16.x 或更高版本
• npm 或 yarn 包管理器

安装步骤

1. 克隆项目（如果需要）

git clone [repository-url]
cd To-Do-List

2. 安装依赖

npm install
# 或
yarn install

3. 启动开发服务器

npm run dev
# 或
yarn dev

4. 构建生产版本

npm run build
# 或
yarn build

5. 预览生产版本

npm run preview
# 或
yarn preview

🎯 使用指南

添加任务

1. 在顶部输入框中输入任务内容
2. 点击「添加」按钮或按 Enter 键

管理任务

• 点击复选框标记任务为已完成/未完成
• 点击任务右侧的删除按钮移除任务

过滤任务

使用底部控制栏中的按钮切换任务视图：

• 全部: 显示所有任务
• 待完成: 仅显示未完成任务
• 已完成: 仅显示已完成任务

自定义外观

1. 点击右上角的太阳/月亮图标切换深色/浅色模式
2. 点击齿轮图标打开设置面板
3. 在设置面板中：
   • 选择喜欢的背景样式
   • 调整背景透明度滑块

📁 项目结构

To-Do-List/
├── public/            # 静态资源
├── src/
│   ├── assets/        # 应用资源
│   ├── App.jsx        # 主应用组件
│   ├── App.css        # 应用样式
│   ├── index.css      # 全局样式
│   └── main.jsx       # 应用入口
├── package.json       # 项目配置和依赖
├── vite.config.js     # Vite配置
└── README.md          # 项目说明文档

✨ 设计亮点

• 毛玻璃效果: 使用 backdrop-filter 创建半透明磨砂玻璃效果
• 渐变背景: 精心设计的渐变背景和抽象图案
• 微交互: 悬停效果、过渡动画增强用户体验
• 深浅主题: 自动适配系统主题，支持手动切换
• 响应式布局: 在各种屏幕尺寸上提供最佳体验

🔮 未来功能规划

• 任务编辑功能
• 任务优先级设置
• 任务分类/标签系统
• 任务搜索功能
• 数据导入/导出
• 云同步功能
• 定时提醒功能

🤝 贡献指南

欢迎贡献代码、报告问题或提出建议！

📝 许可证

本项目采用 MIT 许可证 - 详情请查看 LICENSE 文件