任务流
一款个人任务管理应用程序,其用户界面平静,灵感来自Sunsama。基于Next.js 15构建,专为基于开始日期的任务可见性、时间块日常计划和单用户自托管而设计。
现场演示
在您部署的URL上尝试一下——开放注册(50个名额,先到先得)。
特性
- 每日计划 --上午/下午/晚上/非计划时间块,带有拖放功能
- 周视图 --7天日历,支持跨日拖放调度
- 项目和标签 --按项目(颜色编码)和标签组织任务
- 优先级系统 --5个级别(紧急/高/中/低/无),带视觉指示器
- 每日回顾 --追踪能量、情绪,并撰写反思
- 统计 --完成趋势、情绪/能量图
- 开始日期可见性 --任务在开始日期到来之前一直隐藏
- 数据导出/导入 --从设置中进行完整的JSON备份和还原
- 黑暗/光明主题 --通过侧边栏切换
- MCP 服务器 --17个克劳德代码集成工具(任务CRUD、AI任务拆分、日常安排)
技术栈
- 框架:Next.js 15(应用路由器、服务器操作、Turbopack)
- 用户界面:顺风CSS v4+shadcn/ui+Lucide图标
- 数据库:Drizzle ORM+PostgreSQL(霓虹无服务器)
- 认证:Auth.js v5(凭据,JWT)
- 验证:佐德
- 拖放:dnd试剂盒
架构决策
| 决定 | 为什么 |
|---|---|
| 基于REST的服务器操作 | 自动CSRF保护,集成缓存重新验证,减少样板 |
| 分数索引 | position: real 启用O(1)拖放重新排序,而不重新编号兄弟 |
| startDate可见性 | 从“今日”视图隐藏到开始日期的任务——减少认知负荷 |
| 软删除 | deletedAt 时间戳而不是硬删除——用户数据永远不会丢失 |
| JWT会议 | 单用户应用程序不需要DB会话表——更简单,查询更少 |
| Neon HTTP驱动程序 | @neondatabase/serverless 用于无服务器环境中的可靠连接 |
入门指南
先决条件
- Node.js 18+
- PostgreSQL数据库(本地或 霓虹)
设置
# Clone
git clone https://github.com/WeiS49/TaskFlow.git
cd taskflow
# Install dependencies
npm install
# Configure environment
cp .env.example .env
# Edit .env with your DATABASE_URL and generate AUTH_SECRET:
# openssl rand -base64 32
# Push schema to database
npx drizzle-kit push
# Seed admin user
npx tsx src/db/seed.ts
# Start dev server
npm run dev打开 http://localhost:3000 并使用您的凭据登录 .env 文件。
MCP服务器(可选)
MCP服务器允许Claude Code直接管理您的任务。
cd mcp-server
npm install
npm run build添加到您的 .mcp.json:
{
"mcpServers": {
"taskflow": {
"type": "stdio",
"command": "node",
"args": ["
/mcp-server/dist/index.js"],
"env": {
"DATABASE_URL": "your-database-url"
}
}
}
}脚本
npm run dev # Dev server (Turbopack)
npm run build # Production build
npm run lint # ESLint
npx tsc --noEmit # Type check
npx drizzle-kit push # Push schema to DB许可证
麻省理工学院
