为什么做这个
市面上的待办 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 <token>，后端用 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。
评论（0）
暂无评论