Kanban Board

一个现代化的看板应用，采用毛玻璃美学设计，支持任务管理、拖放排序和文件上传。

功能特性

• 完整 CRUD 操作 - 创建、读取、更新、删除列和卡片
• 拖放功能 - 卡片可在列内排序或移动到不同列
• 文件上传 - 支持拖放上传，图片预览，多文件上传（2MB 限制）
• 优先级管理 - 低/中/高三级优先级，颜色区分
• 截止日期 - 设置截止日期，过期卡片红色警告
• 毛玻璃 UI - 半透明背景，模糊效果，渐变紫色背景
• 数据持久化 - LocalStorage 自动保存，跨标签页同步

技术栈

• React 19 + TypeScript
• Vite - 快速开发构建
• Tailwind CSS - 现代样式框架
• React Context + useReducer - 状态管理

快速开始

安装依赖

npm install

启动开发服务器

npm run dev

访问 http://localhost:5173 查看应用。

构建生产版本

npm run build

预览生产构建

npm run preview

项目结构

src/
├── components/
│   ├── Board/           # 主看板容器
│   ├── Column/          # 列组件（拖放、添加卡片）
│   ├── Card/            # 卡片组件（显示、拖动）
│   ├── CardModal/       # 卡片编辑模态框
│   ├── FileUpload/      # 文件上传组件
│   └── UI/              # 毛玻璃风格 UI 组件
├── hooks/
│   ├── useLocalStorage  # LocalStorage 持久化
│   ├── useDragDrop      # 拖放逻辑
│   └── useFileUpload    # 文件处理
├── types/
│   └── index.ts         # TypeScript 类型定义
├── utils/
│   └── fileUtils.ts     # 文件编码/解码工具
├── context/
│   └── BoardContext.tsx # 全局状态管理
└── App.tsx              # 应用入口

核心组件

组件	功能
Board	看板主容器，渲染所有列，管理拖放状态
Column	列组件，显示卡片列表，支持添加/删除卡片
Card	卡片组件，显示标题、描述、优先级、截止日期
CardModal	卡片编辑模态框，编辑所有卡片属性
FileUpload	文件上传区域，支持拖放和点击上传

默认数据

应用首次加载时会创建三个默认列：

• To Do - 待办事项
• In Progress - 进行中
• Done - 已完成

数据存储

所有数据保存在浏览器的 LocalStorage 中，键名为 kanban-board。数据包括列、卡片、附件（Base64 编码）。

License

MIT