用 Vue 做一个轻量离线的“待办清单 + 情绪打卡”小工具

摘要

本文将带你一步步用 Vue 和 IndexedDB 构建一个融合「任务管理」与「情绪记录」的轻量小工具。它支持拖拽管理每日任务、记录情绪状态、图标标记、情绪色彩化展示，还能导出每日小结报告——更重要的是，它完全离线可用，适合放在你的浏览器书签里，随时点开就能用。

引言

我们在日常生活中常常被“待办清单”工具和“情绪日记”工具分别困扰。前者功能过重、界面复杂，后者又和任务管理脱节，无法形成完整闭环。那有没有可能，我们用一个超轻的小工具，把这两件事一次搞定？

我们来动手做一个吧——不需要注册、不依赖云端，开浏览器就能用，能做情绪打卡、任务安排，还能回顾一天的情绪波动和完成情况。

整体功能设计

模块划分

• 任务管理：可添加、修改、删除、拖拽任务
• 情绪记录：支持 5 种情绪打卡（开心、平静、焦虑、难过、生气）
• 日历面板：显示每日任务 + 情绪状态（颜色小圆点）
• 离线存储：使用 IndexedDB 保存所有数据
• 每日小结导出：自动生成报告，支持导出 Markdown

技术选型

• 框架：Vue 3 + Composition API
• 状态管理：组合式响应式变量
• 本地存储：IndexedDB（使用 idb 库简化操作）
• 拖拽交互：SortableJS
• 导出功能：使用 Blob 下载 Markdown 文件

界面原型设计

首页结构

• 顶部：今天日期 + 情绪选择（图标按钮）
• 中间：待办任务列表（支持添加、删除、拖拽排序）
• 底部：导出今日总结按钮 + 任务完成情况统计

情绪色彩体系（EmoColor）

关键代码模块

IndexedDB 数据结构定义

// db.js
import { openDB } from 'idb'

export const dbPromise = openDB('todoMoodDB', 1, {
  upgrade(db) {
    db.createObjectStore('tasks', { keyPath: 'id', autoIncrement: true })
    db.createObjectStore('moods', { keyPath: 'date' })
  }
})

添加任务和情绪

// addTask.vue
async function addTask(content) {
  await dbPromise.then(db => db.add('tasks', {
    content,
    done: false,
    date: today()
  }))
}

// moodSelect.vue
async function setMood(type) {
  await dbPromise.then(db => db.put('moods', {
    date: today(),
    type
  }))
}

拖拽排序 + 实时保存

// 使用 Sortable.js 实现任务拖拽并保存新顺序
import Sortable from 'sortablejs'

onMounted(() => {
  Sortable.create(document.getElementById('taskList'), {
    onEnd(evt) {
      const updatedOrder = reorder(tasks.value, evt.oldIndex, evt.newIndex)
      tasks.value = updatedOrder
      saveOrderToIndexedDB(updatedOrder)
    }
  })
})

情境场景与实际应用

上班族早晨启动仪式

上班前打开浏览器：

• 一键记录今天的情绪状态
• 添加3件今天必须完成的任务
• 拖拽安排优先级

晚上导出小结

晚上临睡前点击「导出今日总结」按钮，系统自动导出 Markdown 文件，内容包括今日任务完成率、情绪波动记录，方便写日记、复盘。

QA 环节

Q: IndexedDB 的数据安全吗？

A: 在同一台设备上是安全的，除非用户清除浏览器缓存。不过你可以设置自动导出本地文件的功能做备份。

Q: 可否用这个工具做多人协同？

A: 当前定位是轻量离线使用。如果你想支持多人共享，可用 Service Worker + PWA 或 Firebase Firestore 做轻量云同步。

Q: 有必要用 Vue 吗？原生写更轻吧？

A: 原生也可以实现。但使用 Vue 更有利于后续扩展，比如加组件、支持周视图、多用户等。

总结

这个项目虽然小，但可以作为练习很多技术的 playground：

• 熟悉 Vue 的组合式 API
• 理解 IndexedDB 数据存储模型
• 掌握拖拽交互设计
• 探索如何把“无聊工具”做得有趣、亲切、易用

它也提醒我们：不一定非要做个大而全的 App，有时候一个“小而美”的实用页面，就能给人生活带来很大帮助。