type
Post
status
Published
date
Apr 14, 2026
slug
taskflow
summary
TaskFlow 是我围绕个人任务管理做的一次完整实践，包含任务记录、筛选排序、截止提醒、进度看板、账号认证和真实数据持久化。
tags
TS
必看精选
生活
category
前端开发
icon
password
类型
日期
Apr 14, 2026
标签
概述
状态
完成
TaskFlow：一个偏个人工作台风格的任务管理项目
TaskFlow 是我做的一个个人任务管理项目。它不是单纯的 Todo List，而是更接近一个小型工作台：可以记录任务、筛选任务、查看截止风险，也能通过 Dashboard 看到最近的完成情况和任务分布。
做这个项目的起点其实很日常。任务一多之后，问题往往不只是“有没有记下来”，而是我能不能快速判断：现在最该处理哪几件事，哪些任务快到期了，最近推进得怎么样。TaskFlow 就是围绕这个场景做出来的。
项目地址
项目预览
项目目前已经部署到 Vercel：
如果没有配置完整的 Appwrite 环境变量，项目会自动进入本地演示模式；配置完成后，则可以使用真实注册、登录、资料保存和任务持久化能力。
主要功能
TaskFlow 目前包含几个核心模块：
- 注册、登录、退出登录
- 个人资料设置，包括昵称和头像地址
- 任务创建、编辑、删除和状态切换
- 任务详情页
- 按关键词、标签、状态、优先级筛选任务
- 按截止日期、创建时间、更新时间和优先级排序
- Dashboard 数据看板
- 完成趋势、状态分布、标签分布和近期活动
- 逾期、今天到期、3 天内到期提醒
- URL 同步筛选条件和看板时间范围
我比较喜欢的一点是，任务列表和 Dashboard 的状态都可以通过 URL 保留下来。刷新页面之后，当前筛选条件不会丢；分享链接时，也能还原同一个视图。
技术选型
这个项目使用的是：
- Next.js App Router
- React
- TypeScript
- Appwrite
- React Hook Form
- Zod
- Zustand
- Vercel
前端部分主要用 Next.js App Router 组织页面、布局和 API Route。表单使用 React Hook Form + Zod 做输入管理和校验。任务状态由 Zustand 管理，本地演示模式下会落到 localStorage。
后端数据部分接入 Appwrite，用于账号认证和任务存储。
数据和认证设计
项目里浏览器不会直接拿服务端权限去访问 Appwrite，而是先请求当前站点的 Next.js API，再由服务端 API 调用 Appwrite。
这样做主要是为了两个目的：
- Appwrite API Key 留在服务端，不暴露给浏览器。
- 登录态通过项目自己的 httpOnly cookie 保存，前端不用直接管理敏感会话信息。
任务数据开启了 row-level permissions，每条任务只给当前用户读写权限。资料信息没有额外建 profile 表，而是复用 Appwrite Account 的 name 和 prefs 来保存昵称与头像地址。
演示模式
我不希望项目在没有后端配置时变成一个空页面，所以做了本地演示模式。
当 Appwrite 环境变量没有配置完整时，TaskFlow 会使用内置 mock 数据和 localStorage。这样别人打开项目时，即使没有我的 Appwrite 配置，也可以看到完整的界面和主要交互。
配置 Appwrite 后，同一套界面会切换到真实数据模式，任务会从远程同步。
这个设计对个人项目展示挺有用：作品集页面可以直接体验，开发时也能方便切换真实数据和本地数据。
Dashboard 的设计
Dashboard 不是单独堆几个统计数字，而是围绕“今天该怎么看任务”来组织信息。
目前支持三个观察范围：
- 今天
- 本周
- 全部
页面里会展示未完成任务、进行中任务、已完成任务、逾期任务、今天到期任务和 3 天内到期任务。同时也会显示完成趋势、状态分布、标签分布、近期活动和即将到期任务。
我希望它给人的感觉不是“数据很多”，而是“扫一眼就知道现在该先处理什么”。
任务筛选和排序
任务模块支持关键词、标签、状态、优先级筛选，也支持多种排序方式。
这里我重点处理了截止日期相关逻辑。任务会被判断为逾期、今天到期或即将到期，这些信息不仅会展示在界面上，也会参与排序和提醒。
相比简单列表，这样的任务视图会更接近实际使用时的思考方式：不是只看任务存在，而是看任务的紧急程度和当前状态。
项目收获
这个项目对我来说最大的收获，是把一个看似普通的任务管理需求，拆成了比较完整的产品链路：
- 页面路由
- 用户认证
- 表单校验
- 状态管理
- API Route
- 数据持久化
- 权限控制
- URL 状态同步
- 部署和环境变量配置
它也让我更清楚地感受到，一个个人项目如果想真正像“应用”而不是“页面”，需要处理很多边界情况。比如未登录访问、环境变量缺失、远程数据同步失败、本地演示兜底、筛选状态恢复等。
这些细节不一定显眼，但它们决定了项目是否真的可用。
后续计划
后面我还想继续补几个方向：
- 给任务增加子任务或备注
- 支持头像上传
- 增加任务导出功能
- 给 Dashboard 补充更多时间维度
- 整理 Appwrite table 中旧兼容字段
- 进一步优化移动端任务操作体验
TaskFlow 目前已经可以作为一个完整的个人项目展示，也能作为我后续继续迭代的任务工作台。
- Author:Uonlra
- URL:https://www.uonlra.blog//article/taskflow
- Copyright:All articles in this blog, except for special statements, adopt BY-NC-SA agreement. Please indicate the source!
