槐序待办：一个从零手写的专注与任务管理工具

Aurora.歆の小破站，欢迎你的到来！关注

为什么做这个

市面上的待办 App 已经很多了。滴答清单、Things、TickTick、微软 To Do…… 功能都很全，界面也很精致。

但用久了总觉得哪里不对劲：

太复杂。打开一个 App 要等三秒，闪屏、广告、签到、会员弹窗轮番上来，我就想记一条”下午三点给客户回电话”而已。
太重。很多 App 默认要注册账号、要联网、要把你的数据上传到它的服务器，我才刚打开，它还不知道我要不要用呢。
不自由。想改个配色，想加个小功能，想导出个数据，都得看人家脸色。
数据不是我的。今天这家公司倒闭了，明天那个 App 下架了，我的任务记录就没了。

所以我想：能不能做一个刚刚好的工具？

打开就能用，不用注册、不用联网，数据先存在浏览器本地
想要云同步的时候，可以登录账号，手机电脑数据自动同步
界面干净，没有广告、没有签到、没有会员弹窗
代码开源，100% 原生 HTML/CSS/JS，想改哪里改哪里
数据是我的，随时导出 JSON，随时导入回来

于是就有了 槐序待办。

它长什么样

打开后的第一眼，是两个区域：

左边是一个番茄钟 —— 25 分钟专注、5 分钟休息，圆形进度环随着时间一秒秒收缩。下面还有”今日专注”的统计卡：完成了几颗番茄、专注了多少分钟、今天的任务完成率、连续专注了几天、本周累计多少颗。

右边是一个任务列表 —— 顶部是日期筛选（全部/今天/昨天/近 7 天/指定日期），中间是输入框和分类标签，下面是任务清单。每条任务有优先级色条、分类标签、创建时间。

整体配色是柔和的紫粉渐变，深色模式下是深蓝墨色。没有刺眼的对比，看久了眼睛不累。

手机上还有一个移动端专属界面 —— 底部三个 Tab 切换（专注/待办/我的），所有操作都适配了手指触摸，长按任务删除，右上角点一下就能切换深色模式。

它有哪些功能

番茄钟

25 分钟专注 + 5 分钟休息，标准番茄工作法
圆形进度环，进度可视化
到点响铃（用 Web Audio 合成，不需要音频文件）
完成番茄后自动切换到休息模式，休息结束自动切回专注
“自动循环”开关：打开后一个番茄接一个番茄自动推进，不用手点
每完成一颗番茄，底部会点亮一个小圆点

待办清单

添加任务：输入框回车即可
优先级：高（红）/ 中（橙）/ 低（绿），左侧色条一眼区分
分类：默认带”工作/生活/学习”，可以自己加、选颜色
拖拽排序：按住左侧的 ⋮⋮ 手柄可以拖到任意位置
双击编辑：改文字不用删了重写
筛选：日期 + 分类 + 状态（全部/进行中/已完成）三层组合
搜索：右上角搜索框实时过滤

数据统计

今日完成的番茄数、专注分钟数
今日任务完成率
连续专注天数（streak）：每天有番茄记录就 +1，断一天清零
本周累计番茄：从周一算到今天

界面

深色 / 浅色两套主题，一键切换，记住你的选择
首次打开跟随系统偏好
大字体、高对比度，远处也看得清

多用户 + 云同步（可选）

不登录也能用，数据存本地
登录后数据自动同步到服务器
电脑上加的任务，手机登录同一账号后自动出现
支持注册、登录、退出、注销

PWA

桌面版可以”安装到桌面”
装完后是一个独立窗口，没有浏览器地址栏，像原生 App
支持离线打开（本地模式完全可用）

技术上是怎么做出来的

这个项目有一个原则：能用原生就绝不用框架。

前端：HTML + CSS + JavaScript，没有 React、Vue、Tailwind
后端：Node.js + Express + SQLite，就三个依赖
数据存储：localStorage（本地）+ SQLite（云端）
认证：JWT + bcrypt 加密密码
离线：Service Worker 缓存

数据同步怎么解决冲突

多设备同步最麻烦的是：手机和电脑同时改了数据，怎么办？

我的方案很简单：时间戳最后写入者获胜。

每次本地数据变更，记一个时间戳 local_updated_at
服务器端也存一个 updated_at
打开 App 时：
- 如果服务器更新时间 > 本地 → 拉服务器数据覆盖本地
- 如果本地更新时间 > 服务器 → 把本地数据推上去
- 差不多就什么都不做

这样避免了复杂的 diff 合并逻辑，代价是同一秒内两端同时修改会丢一边，但对于个人待办场景，这个概率很低，简单方案就够用了。

PWA 怎么做的

只需要三个文件：

manifest.json — 告诉浏览器应用名、图标、启动方式
sw.js — Service Worker，缓存静态资源，拦截请求
HTML 里注册 SW

if (‘serviceWorker’ in navigator) {
 navigator.serviceWorker.register(‘/sw.js’);
 }

缓存策略：

HTML 页面：网络优先，失败时用缓存
静态资源（CSS/JS/图片）：缓存优先，后台更新
API 请求：只走网络，不缓存（避免拿到旧数据）

前后端如何交互

后端就 5 个接口：

POST /api/register 注册
 POST /api/login 登录
 GET /api/data 拉取云数据
 POST /api/data 上传云数据
 DELETE /api/account 注销账号

所有需要登录的接口都带 Authorization: Bearer ，后端用 JWT 验证。

部署有多简单

如果你有服务器，部署只需要：

# 1. 建目录
mkdir -p ~/huaixu-todo/{server,public}
cd ~/huaixu-todo

# 2. 把 package.json 和 server.js 放到 server/
# 3. 把 index.html、mobile.html、tx.png 放到 public/

# 4. 安装依赖并启动
cd server
npm install
node server.js

打开 http://你的IP:3000 就能用了。

配 Nginx 反代 + Let’s Encrypt 免费 HTTPS，10 分钟搞定。PWA 也自动生效。

一些设计上的小细节

启动动画 3.5 秒：显示 Logo 和加载进度条，切换提示文字。为什么是 3.5 秒？因为比这短感觉像闪一下、比这长用户等得不耐烦，3.5 秒刚好让用户心理上”完成一次加载”。
颜色系统用 CSS 变量：--primary、--text-2、--card-2…… 一套变量，浅色深色改一次就全部生效。
对比度：深色模式下所有文字都调亮了，次要文字从 #8a93b0 提到 #b8c0d8，主文字用纯白。不看第二眼也清晰。
手机端长按删除：桌面版用鼠标点 ✕ 删除，但手机上没有鼠标，一个小 ✕ 图标太难点。改成长按任务 600ms 弹出删除确认，配合震动反馈。

最后

这个项目不是要取代那些成熟的商业 App。它只是我自己需要一个简单的工具，就顺手做了出来。

如果你也有类似的需求 —— 不想要广告、不想要注册、不想要复杂 —— 欢迎来试试。

如果你懂点代码，也可以直接 fork 一份改成自己喜欢的样子。所有代码都是原生的，没有框架门槛。

愿你的番茄钟永远不会被打断，愿你的任务清单一页清空。

项目地址：https://todo.lruriawa.top
技术栈：原生 HTML/CSS/JS + Node.js + SQLite
作者：天津市槐序网络科技工作室

代码过段时间会开源到GitHub。

添加评论

点踩

分享查看原文

参与讨论