现代化全栈看板系统 (Modern Kanban System)

这是一个基于 React + Node.js 的全栈看板管理系统，支持多用户、多项目管理，提供流畅的拖拽交互体验和现代化的用户界面。

✨ 主要特性

1. 🔐 用户认证系统

• 注册与登录：支持新用户注册和 JWT 身份验证。
• 密码管理：支持用户修改登录密码。
• 安全防护：密码加密存储，受保护的 API 路由。

2. 📂 多项目管理

• 项目切换：顶部标签页式设计，快速在不同项目间切换。
• 项目操作：支持创建、重命名项目。
• 安全删除：删除项目时需输入项目名称进行二次确认，防止误操作。
• 项目排序：支持拖拽调整项目标签顺序。

3. 📊 灵活的看板功能

• 列表管理：
  • 支持无限添加任务列表（列）。
  • 自定义列表标题和颜色标记。
  • 支持拖拽调整列表顺序。
  • 支持按任务优先级自动排序。
• 任务管理：
  • 拖拽交互：基于 @dnd-kit 实现的高性能拖拽，支持跨列移动任务。
  • 任务详情：支持设置标题、描述、优先级（5级旗帜标识）。
  • 附件支持：支持拖拽上传文件附件，支持图片预览。
  • 快捷操作：双击快速编辑，右键菜单等。

4. 🎨 现代化 UI/UX

• 响应式布局：完美适配不同屏幕尺寸，自适应列宽。
• 交互细节：
  • 平滑的过渡动画。
  • 智能的菜单自动隐藏（防误触优化）。
  • 清晰的空状态提示。
  • 优雅的加载状态和错误提示。

🛠 技术栈

前端 (Frontend)

• 框架: React 18 + TypeScript
• 构建工具: Vite
• 样式: Tailwind CSS
• 状态管理: Zustand
• 拖拽库: @dnd-kit (Core, Sortable, Utilities)
• 图标: Lucide React
• 路由: React Router v6

后端 (Backend)

• 运行时: Node.js
• 框架: Express
• 数据库: SQLite (通过 better-sqlite3 驱动)
• 认证: JWT (JSON Web Tokens) + bcryptjs
• 文件处理: Multer (用于附件上传)

🚀 快速开始

环境要求

• Node.js >= 18.0.0
• npm 或 pnpm

安装步骤

1. 克隆项目

   git clone <repository-url>
   cd kanban

2. 安装依赖

   npm install
   # 或者
   pnpm install

3. 启动开发服务器 此命令会同时启动前端 (Vite) 和后端 (Express) 服务：

   npm run dev

4. 访问应用 打开浏览器访问 http://localhost:5173 (或终端显示的端口)。

默认账户

首次启动时，数据库会自动初始化并创建一个管理员账户：

• 用户名: admin
• 密码: admin123

数据库与数据结构

本项目使用 better-sqlite3，并在应用启动时自动检测数据库文件 (kanban.db)。如果文件不存在，系统会自动创建数据库文件并初始化所有数据表，同时注入默认数据。因此，你不需要手动导入 SQL 文件。

如果你需要参考数据库结构，请查看根目录下的 schema.sql 文件。

🐳 Docker 部署

本项目支持 Docker 部署，并配置了数据持久化。

1. 启动服务

   docker-compose up -d

2. 数据持久化 Docker 配置会将数据挂载到本地的 ./data 目录：

   • 数据库文件: ./data/kanban.db
   • 上传的附件: ./data/uploads/

   这样即使容器重建，你的数据也会保留。

📁 项目结构

kanban/
├── api/                 # 后端代码
│   ├── routes/          # API 路由 (auth, tasks, columns, projects...)
│   ├── middleware/      # 中间件 (auth, upload)
│   ├── app.ts           # Express 应用入口
│   ├── db.ts            # 数据库连接与初始化
│   └── server.ts        # 服务器启动文件
├── src/                 # 前端代码
│   ├── components/      # UI 组件 (KanbanColumn, TaskCard, Modals...)
│   ├── pages/           # 页面组件 (Home, Login, Register)
│   ├── store/           # Zustand 状态管理 (authStore, taskStore)
│   ├── lib/             # 工具函数
│   ├── App.tsx          # 根组件与路由配置
│   └── main.tsx         # 入口文件
├── kanban.db            # SQLite 数据库文件 (自动生成，已忽略)
├── uploads/             # 附件存储目录 (自动生成，已忽略)
├── schema.sql           # 数据库结构参考文件
└── package.json         # 项目依赖配置

📝 开发脚本

• npm run dev: 并行启动前后端开发服务。
• npm run client:dev: 仅启动前端开发服务。
• npm run server:dev: 仅启动后端开发服务 (使用 nodemon)。
• npm run build: 构建前端生产代码。
• npm run start: 启动后端生产服务。

🤝 贡献

欢迎提交 Issue 或 Pull Request 来改进这个项目！

🌟 Star History