Kanban看板任务管理系统

项目简介

这是一个基于React实现的现代化看板任务管理系统。它提供了直观的拖拽界面，让用户能够轻松地管理和组织任务。系统支持创建多个任务列表（如待办、进行中、已完成等），用户可以通过拖拽方式移动任务卡片，实现任务状态的快速变更。

主要功能

• ✨ 支持创建、编辑和删除任务列表（列）
• 📝 支持创建、编辑和删除任务卡片
• 🎯 任务卡片支持拖拽排序
• 🔄 列表支持拖拽排序
• 💾 数据自动保存到本地存储
• 🎨 美观的深色主题UI设计

技术栈

• React 18: 用于构建用户界面的JavaScript库
• TypeScript: 添加静态类型检查，提高代码可维护性
• Tailwind CSS: 用于快速构建自定义设计的实用程序优先的CSS框架
• @dnd-kit: 强大的拖放功能库，用于实现任务和列表的拖拽功能
• Vite: 现代前端构建工具，提供极快的开发体验
• React Router: 用于实现页面路由导航

本地开发

1. 安装依赖

npm install

2. 启动开发服务器

npm run dev

3. 构建生产版本

npm run build

项目结构

src/
  ├── components/         # 组件目录
  │   ├── KanbanBoard.tsx    # 看板主组件
  │   ├── ColumnContainer.tsx # 列容器组件
  │   ├── TaskCard.tsx       # 任务卡片组件
  │   └── ...
  ├── icons/             # 图标组件
  ├── types.ts           # TypeScript类型定义
  └── App.tsx           # 应用程序入口

特色亮点

• 🎯 支持任务在不同状态列表间的拖拽移动
• 📱 响应式设计，适配各种屏幕尺寸
• 🎨 优雅的UI动画效果
• 💾 自动保存功能，数据不会丢失
• ⌨️ 支持键盘操作和快捷键
• 🌙 内置深色主题

贡献

欢迎提交问题和改进建议！如果您想为项目做出贡献，请：

1. Fork 项目
2. 创建您的特性分支
3. 提交您的改动
4. 推送到分支
5. 创建一个Pull Request

许可证

本项目采用 MIT 许可证