todo-calendar更新啦！

Todo Calendar v0.3.0 阶段性更新：数据导入导出 + 统计回顾，你的时间管理助手终于有记忆了

主题：Todo Calendar 开发日记
发布日期：2026-08-04
在线体验：https://yyyhhh0317.github.io/todo-calendar

一、先说结论：v0.3.0 是一个"记忆版"

从 v0.1.0 一个只有列表的 TODO，到 v0.2.0 能计时、能完成块，再到昨天刚刚发布的 v0.3.0 —— 这个项目终于有了两个真正能用的"记忆"能力：

这是目前为止功能变化最大的一个版本，建议所有在用的同学都点一下设置里的「导出备份」先留个存档。

二、v0.1.0 → v0.3.0 三段式回顾

如果你是新关注的朋友，可以按顺序体验一下每个版本的差异，变化其实很直观。

三、v0.3.0 新功能详解

3.1 数据导入导出 — 给你的数据买份保险

怎么用

右上角齿轮图标 → 设置 → 数据管理

导出备份：

• 点击「导出备份」，立刻下载一个 todo-calendar-backup-YYYY-MM-DD.json 文件
• 里面包含你的所有任务、排期、计时记录、UI 状态、侧栏比例
• 文件名带日期，多版本备份不混乱

导入恢复：

• 点击「导入恢复」选择 JSON 文件
• 导入前会校验：是不是 Todo Calendar 的备份？版本是否兼容？
• 二次确认后覆盖当前数据，页面自动刷新生效

技术上是怎么做的

核心逻辑都在 todo-calendar/src/features/settings/dataTransfer.ts 里：

• 备份格式带 version（当前为 1）、exportedAt（导出时间）、app: 'todo-calendar' 三要素
• 导入时做 3 层校验：JSON 解析 → app 标识 → 版本字段
• 恢复后直接 window.location.reload()，让所有 Zustand store 从 localStorage 重新初始化，避免状态不一致

export function collectBackupData(): BackupData {
const data: Record<string, unknown> = {}
for (const key of EXPORT_KEYS) {
const value = loadFromStorage<unknown>(key)
if (value !== null) data[key] = value
}
return { version: 1, exportedAt: new Date().toISOString(), app: 'todo-calendar', data }
}

💡 小提示：目前 7 个持久化键全部参与导出，包括 sidebar-split（任务侧栏拆分比例）这种 UI 细节，换电脑也能无缝衔接。

3.2 统计回顾面板 — 看见你的时间去向

怎么用

右上角齿轮图标 → 设置 → 统计回顾 → 查看统计

或者直接在设置面板里点「查看统计」

四件套核心指标

① 摘要卡片（2×2 网格）

直接就能看清楚全局：

• 完成率：X%（已完成/总任务数）
• 预估总时长：所有任务加起来计划花多久
• 排期总时长：拖到日历上的时间总量
• 实际用时：计时器累计的真实时间

如果实际用时 > 预估，卡片会自动变红，提醒你"时间总是不够用"。

② 预估 vs 实际对比条

两条进度条基本并排，那么你是个乐观派（预估总是比实际短）或者保守派。

③ 最近 14 天排期时长柱状图

• 14 根柱子 = 过去两周
• 悬停看具体日期和时长
• 底部有日期范围

④ 完成率热力图（最近 8 周）

GitHub Contributions 风格的 56 格热力图：

• 每一列是一周，周一在最上面
• 颜色从浅到深 5 个等级：0 → 1 → 2-3 → 4-5 → 5+ 个任务
• 右下角有图例：少 ■■■■■ 多

完成一个任务就会在今天的格子上点亮一格，很有成就感。

技术：纯 SVG + CSS，零图表依赖

统计面板的图表没有引入任何第三方图表库（Chart.js、ECharts、Recharts 都没装），全部用原生 SVG 矩形 + Tailwind 色阶实现。

好处是显而易见的：

• 打包体积没涨（构建产物还是 ~86KB gzip）
• 加载零延迟
• 定制颜色、大小、动画极其方便

热力图颜色等级逻辑在todo-calendar/src/features/stats/statsUtils.ts：

export function getHeatmapLevel(count: number): number {
if (count === 0) return 0
if (count === 1) return 1
if (count <= 3) return 2
if (count <= 5) return 3
return 4
}

3.3 入口统一：顶部工具栏新增设置按钮

之前版本的计时器入口是单按钮，现在右侧多了一个齿轮图标：

[周视图] [月视图] ⏱ ⚙
↑ ↑
计时器 设置

点击设置 → 弹窗从右侧滑出，UI更加流畅

四、改动文件一览

本次 8 个文件变动，761 行新增，3 行删除：

modified: package.json (版本号 0.2.0 → 0.3.0)
modified: src/app/App.tsx (集成两个新面板)
modified: src/features/schedule/components/TopBar.tsx (设置按钮入口)
modified: src/shared/components/Icons.tsx (+4 新图标: Chart/Download/Upload/Close)
created: src/features/settings/dataTransfer.ts (导入导出核心)
created: src/features/settings/components/SettingsPanel.tsx (设置面板 UI)
created: src/features/stats/statsUtils.ts (统计计算工具)
created: src/features/stats/components/StatsPanel.tsx (统计面板 UI)

五、当前的完整功能清单

给刚入坑的同学做个速查：

六、接下来做什么？（Roadmap 预告）

v0.3.0 解决了"数据安全"和"可视化回顾"两个最基础的长期需求。接下来的方向，我列几个正在考虑的，你也可以在评论里投票告诉我最想要哪个：

候选功能池

• A 优先级自动排序算法：根据截止日、重要性、预估时长，每天早上给你推一个今日建议清单
• B 子任务 / 任务标签：给任务打标签（工作/生活/学习），统计支持按标签筛选
• C 重复任务模板：每周一上午必做的事，自动生成任务
• D PWA 支持：离线可用，桌面端可安装
• E 暗色主题：护眼模式切换

七、快速开始

在线用（推荐）

👉 https://yyyhhh0317.github.io/todo-calendar

不用装任何东西，打开浏览器就能用，数据存在本地浏览器里。

本地跑

git clone https://github.com/yyyhhh0317/todo-calendar.git
cd todo-calendar
npm install
npm run dev

先导出备份再升级

如果你之前在用 v0.2.x，务必先：设置 → 导出备份 → 保存好 JSON 文件，再体验新版功能。

八、结语

这个项目从一开始就是为了做一个"我自己每天会打开用"的工具，现在 v0.3.0 上线，它终于变成具备长期使用的基础条件了（因为有备份 😂）。

后续还会持续在这里更新阶段性的版本推送。有任何想法、需求、Bug，欢迎来 GitHub 提 Issue：

👉 https://github.com/yyyhhh0317/todo-calendar/issues

当然，评论区也可以~

—

Todo Calendar · 把 TODO List 和时间表合在一起的轻量时间工具
本主题同步更新各阶段版本的设计思路、技术实现与功能迭代记录