简约克制的 To-Do 看板,支持个人独立使用与 5 人小团队协作。 看板为骨,列表为辅。看懂需求,克制设计。
- 🏠 个人空间 —— 注册即拥有,看板/任务自由管理
- 👥 团队空间 —— 创建团队、邀请成员、共享看板
- 📋 看板视图 —— 拖拽换列 / 列内排序 / 列横向换序,自动 3 列模板
- 📑 列表视图 —— 按列分组的表格视图,响应式 < 768px 自动启用
- ✅ 完成勾选 —— 卡片直打勾 / 拖到"已完成"列自动完成 / 跨列撤销
- 📝 子任务 Checklist —— 多清单 / 子项勾选 / 实时进度条
- 🏷️ 标签 Label —— 12 色预设 / 自定义颜色 / 任务打多标签
- 👤 任务分配 —— 个人空间自动 owner / 团队空间可分配任意成员
- 💬 评论 + @ 提及 —— 卡片下评论 / 输入 @ 弹成员选择 / 提及高亮
- 📎 附件 —— 上传/下载/删除 / 图片预览 / 大小限制 50MB
- 🕒 30 天自动归档 —— 完成超过 30 天自动归档 / 归档区恢复
- 📥📤 导入导出 —— JSON 完整 / CSV 平铺 / Trello JSON 导入
- 🌗 深色模式 —— 系统/手动切换,localStorage 记忆
- 📱 响应式 —— 桌面/平板/手机自适应
- 🔒 安全 —— bcrypt 密码 / JWT session / 全 404 防泄漏 / 跨用户攻击全 404
| 层 | 选型 |
|---|---|
| 前端 | Next.js 14 (App Router) + React 18 + TypeScript |
| 样式 | Tailwind CSS + shadcn/ui (new-york 风格) |
| 数据库 | SQLite (开发期),Prisma ORM |
| 认证 | NextAuth.js (Credentials + Prisma Adapter, JWT session) |
| 状态管理 | Zustand (按需) |
| 拖拽 | @dnd-kit |
| 文件存储 | 本地 uploads/ (V1);OSS 后期接入 |
| 部署 | Vercel (前端) + 本机 / NAS (后端);OSS 后期接入 |
| 测试 | 自建 bash 回归脚本(180 项,5-10 秒跑完) |
taskflow/
├── prisma/
│ └── schema.prisma # 数据模型(User/Team/Board/Column/Task/...)
├── public/ # 静态资源
├── src/
│ ├── app/
│ │ ├── (auth)/ # 登录、注册
│ │ ├── (dashboard)/ # 我的空间、团队空间
│ │ ├── api/ # auth/register/...
│ │ ├── layout.tsx
│ │ ├── page.tsx # 落地页
│ │ └── globals.css
│ ├── components/
│ │ ├── ui/ # shadcn 组件
│ │ ├── theme-provider.tsx
│ │ ├── theme-toggle.tsx
│ │ ├── user-menu.tsx
│ │ └── providers.tsx
│ ├── lib/
│ │ ├── auth.ts # NextAuth 配置
│ │ ├── prisma.ts # Prisma 单例
│ │ └── utils.ts
│ └── types/
│ └── next-auth.d.ts
└── uploads/ # 本地附件存储(V1)
# 1. 安装依赖(已配置淘宝镜像)
npm install
# 2. 初始化数据库(SQLite 自动建表)
npm run db:push
# 3. 启动开发服务
npm run dev
# → http://localhost:3000参见 .env.example。.env 已自动生成(开发用默认 SQLite + 随机 NEXTAUTH_SECRET)。
V1 范围参见 PRD 的 11 项验收标准。
# 跑完整回归(52 项,5-8 秒)
./scripts/regression.sh详细测试方法、已修复 bug 清单、测试矩阵见 docs/TESTING.md。
- 阶段 0 — 骨架:Next.js + Tailwind + Prisma + NextAuth 配置,登录/注册/我的空间/团队空间四个页面落地
- 阶段 1 — 看板核心:看板 CRUD、默认三列、列操作
- 阶段 2 — 任务核心:任务 CRUD、拖拽换列、排序、详情面板
- 阶段 3 — 任务细节:子任务、标签、优先级、截止日期、分配
- 阶段 4 — 视图:列表视图、看板/列表切换、搜索、筛选
- 阶段 5 — 协作:团队、成员邀请、评论、@ 提及、活动日志
- 阶段 6 — 附件:上传/预览/下载,本地存储
- 阶段 7 — 体验:深色模式、响应式、移动端拖拽
- 阶段 8 — 增强:模板、复制看板、导入导出
- 阶段 9 — 收尾:30 天自动归档、V1 验收
- 极简优先 — 能 3 步完成的事,绝不 5 步
- 看板为骨,列表为辅 — 看板为主视图,列表为高效备选
- 响应式自适应 — 电脑/手机/平板体验一致
- 数据透明可迁 — 用户数据可导出,不被锁死
MIT