海宁网站开发网站建设私单
大家好，我是 展菲，目前在上市企业从事人工智能项目研发管理工作，平时热衷于分享各种编程领域的软硬技能知识以及前沿技术，包括iOS、前端、Harmony OS、Java、Python等方向。在移动端开发、鸿蒙开发、物联网、嵌入式、云原生、开源等领域有深厚造诣。
图书作者：《ESP32-C3 物联网工程开发实战》
图书作者：《SwiftUI 入门，进阶与实战》
超级个体：COC上海社区主理人
特约讲师：大学讲师，谷歌亚马逊分享嘉宾
科技博主：华为HDE/HDG
我的博客内容涵盖广泛，主要分享技术教程、Bug解决方案、开发工具使用、前沿科技资讯、产品评测与使用体验。我特别关注云服务产品评测、AI 产品对比、开发板性能测试以及技术报告，同时也会提供产品优缺点分析、横向对比，并分享技术沙龙与行业大会的参会体验。我的目标是为读者提供有深度、有实用价值的技术洞察与分析。
展菲：您的前沿技术领航员
👋 大家好，我是展菲！
📱 全网搜索“展菲”，即可纵览我在各大平台的知识足迹。
📣 公众号“Swift社区”，每周定时推送干货满满的技术长文，从新兴框架的剖析到运维实战的复盘，助您技术进阶之路畅通无阻。
💬 微信端添加好友“fzhanfei”，与我直接交流，不管是项目瓶颈的求助，还是行业趋势的探讨，随时畅所欲言。
📅 最新动态：2025 年 3 月 17 日
快来加入技术社区，一起挖掘技术的无限潜能，携手迈向数字化新征程！
文章目录
- 摘要
- 引言
- 整体功能设计
- 模块划分
- 技术选型
- 界面原型设计
- 首页结构
- 情绪色彩体系（EmoColor）
- 关键代码模块
- IndexedDB 数据结构定义
- 添加任务和情绪
- 拖拽排序 + 实时保存
- 情境场景与实际应用
- 上班族早晨启动仪式
- 晚上导出小结
- QA 环节
- Q: IndexedDB 的数据安全吗？
- Q: 可否用这个工具做多人协同？
- Q: 有必要用 Vue 吗？原生写更轻吧？
- 总结
摘要
本文将带你一步步用 Vue 和 IndexedDB 构建一个融合「任务管理」与「情绪记录」的轻量小工具。它支持拖拽管理每日任务、记录情绪状态、图标标记、情绪色彩化展示，还能导出每日小结报告——更重要的是，它完全离线可用，适合放在你的浏览器书签里，随时点开就能用。
引言
我们在日常生活中常常被“待办清单”工具和“情绪日记”工具分别困扰。前者功能过重、界面复杂，后者又和任务管理脱节，无法形成完整闭环。那有没有可能，我们用一个超轻的小工具，把这两件事一次搞定？
我们来动手做一个吧——不需要注册、不依赖云端，开浏览器就能用，能做情绪打卡、任务安排，还能回顾一天的情绪波动和完成情况。
整体功能设计
模块划分
-
任务管理：可添加、修改、删除、拖拽任务
-
情绪记录：支持 5 种情绪打卡（开心、平静、焦虑、难过、生气）
-
日历面板：显示每日任务 + 情绪状态（颜色小圆点）
-
离线存储：使用 IndexedDB 保存所有数据
-
每日小结导出：自动生成报告，支持导出 Markdown
技术选型
-
框架：Vue 3 + Composition API
-
状态管理：组合式响应式变量
-
本地存储：IndexedDB（使用 idb 库简化操作）
-
拖拽交互：SortableJS
-
导出功能：使用 Blob 下载 Markdown 文件
界面原型设计
首页结构
-
顶部：今天日期 + 情绪选择（图标按钮）
-
中间：待办任务列表（支持添加、删除、拖拽排序）
-
底部：导出今日总结按钮 + 任务完成情况统计
情绪色彩体系（EmoColor）
| 情绪 | 图标 | 背景色 |
|---|---|---|
| 开心 | 😄 | #FFD700 |
| 平静 | 😌 | #87CEFA |
| 焦虑 | 😰 | #FF8C00 |
| 难过 | 😢 | #778899 |
| 生气 | 😡 | #DC143C |
关键代码模块
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 = updatedOrdersaveOrderToIndexedDB(updatedOrder)}})
})情境场景与实际应用
上班族早晨启动仪式
上班前打开浏览器：
-
一键记录今天的情绪状态
-
添加3件今天必须完成的任务
-
拖拽安排优先级
晚上导出小结
晚上临睡前点击「导出今日总结」按钮，系统自动导出 Markdown 文件，内容包括今日任务完成率、情绪波动记录，方便写日记、复盘。
QA 环节
Q: IndexedDB 的数据安全吗？
A: 在同一台设备上是安全的，除非用户清除浏览器缓存。不过你可以设置自动导出本地文件的功能做备份。
Q: 可否用这个工具做多人协同？
A: 当前定位是轻量离线使用。如果你想支持多人共享，可用 Service Worker + PWA 或 Firebase Firestore 做轻量云同步。
Q: 有必要用 Vue 吗？原生写更轻吧？
A: 原生也可以实现。但使用 Vue 更有利于后续扩展，比如加组件、支持周视图、多用户等。
总结
这个项目虽然小，但可以作为练习很多技术的 playground：
-
熟悉 Vue 的组合式 API
-
理解 IndexedDB 数据存储模型
-
掌握拖拽交互设计
-
探索如何把“无聊工具”做得有趣、亲切、易用
它也提醒我们：不一定非要做个大而全的 App，有时候一个“小而美”的实用页面，就能给人生活带来很大帮助。