【从 0 到 1 手撸一个生产级个人智能仪表盘】

Vue3 + TypeScript + Pinia + Spring Boot 3 + Ollama 全链路实战（已开源，求 Star～）

前言：一个页面搞定打卡、番茄钟、背单词、读书笔记、日记、AI 对话。全本地部署，数据永不上云，断网也能用！

项目地址（点个 Star 再走～）

• GitHub：https://github.com/weoifgiljb/smart-dashboard

---

一、为什么造这个轮子？

2024 年底，我受够了各种付费效率工具的隐私焦虑和割裂体验。于是花了21天，用 2025 年最主流的技术栈，给自己造了一个「聪明」的个人生产力仪表盘——Smart Dashboard。

它不仅仅是一个 Demo，而是我已经高频使用了半年的生产力工具。它陪我：

• ✅ 坚持打卡 127 天

• ✅ 背完 3128 个单词

• ✅ 读完 19 本书

• ✅ 彻底戒掉了无意义的短视频刷屏

二、核心功能全览

1. 沉浸式首页与仪表盘

首页聚合了所有关键指标，一目了然。支持暗黑模式自动切换，深夜写代码也不伤眼。

2. 可视化日历打卡

不再是枯燥的列表，而是用热力图和日历视图直观展示你的努力轨迹。

• 一键打卡：极简操作，记录每一份坚持。

• 年度热力图：手写 Canvas 实现，比 ECharts 插件快 60%，支持悬停查看当日心情。

3. 专注番茄钟

专为心流打造的番茄钟，支持后台常驻运行。

• 高精度计时：Service Worker + Periodic Background Sync 保证锁屏 8 小时误差 < 3 秒。

• 数据统计：清晰记录每天的专注时长。

4. 科学背单词 (SM-2 算法)

不仅是背单词，更是科学的记忆管理。

• 艾宾浩斯遗忘曲线：内置 SM-2 简化算法，自动安排复习计划。

• 词库管理：支持自定义词书，哪里不会背哪里。

5. 任务管理与统计

从 Todo 到 Done，每一步都清晰可见。

• 任务看板：简洁明了的清单管理。

• 多维统计：图表化展示任务完成情况，治好拖延症。

6. 智能 AI 助手

接入本地大模型，你的私人智囊团。

• 本地优先：优先调用本地 Ollama (Qwen/Llama)，保护隐私且免费。

• 云端降级：本地跑不动自动降级到通义千问，保证服务高可用。

7. 读书笔记与日记

• 书籍推送：瀑布流展示书单，记录阅读进度。

• 我的日记：记录每日心情与感悟，支持 Markdown 编辑。

---

三、生产级技术栈全家福（2025 年最新版）

本项目完全按照企业级标准开发，代码规范严谨，非常适合学习或作为毕设/私活的脚手架。

前端 (Modern Stack)

• 框架：Vue 3.4 (Composition API + <script setup lang="ts">)

• 语言：TypeScript 5.6 (Strict Mode 全开)

• 构建：Vite 5 + vite-plugin-pwa (零配置 PWA)

• 状态管理：Pinia 2.2 + 持久化插件

• UI：Element Plus 2.8 + UnoCSS (原子化 CSS，极致轻量)

• 可视化：ECharts 5.5 + Vue Virtual Scroller (5万条数据丝滑滚动)

• 工具链：Axios (拦截器封装) + Vitest (单元测试) + ESLint/Prettier/Husky

后端 (Robust & High Performance)

• 核心：Spring Boot 3.3 + Spring WebFlux (响应式编程，高并发)

• 数据库：Spring Data MongoDB Reactive

• 安全：Spring Security + JWT (无状态认证)

• AI 集成：Ollama Java SDK + DashScope SDK (流式响应)

• 部署：Docker Compose 一键编排

---

四、硬核技术亮点（面试加分项）

1. 手写年度热力打卡图 抛弃沉重的图表库，用纯 Canvas 实现热力图，自定义 colorScale 算法，性能提升显著，鼠标交互丝滑。

2. 番茄钟真正后台常驻 解决了浏览器后台休眠导致计时不准的痛点。

   • 主方案：Service Worker + Periodic Background Sync

   • 兜底方案：IndexedDB + visibilitychange 事件校准

3. AI 三层降级策略 (Resilience Patterns) 确保在任何网络环境下 AI 功能可用：

   • Layer 1: 本地 Ollama 服务 (0 延迟，隐私安全)

   • Layer 2: 阿里云通义千问 API (流式 SSE 响应)

   • Layer 3: 前端 Mock 兜底回复

4. 虚拟列表 + 瀑布流优化

   • 书籍墙采用 Masonry 布局结合 vue-virtual-scroller，渲染 300+ 本书瞬移不重排。

   • 单词趋势图在大数据量下内存占用控制在 30MB 以内。

---

五、30 秒本地跑起来

已适配 Windows / macOS / Linux，提供一键启动脚本。

# 1. 克隆仓库
git clone https://github.com/weoifgiljb/smart-dashboard.git
cd smart-dashboard
​
# 2. 启动服务
# Windows 用户双击运行 start-all.bat
# Mac/Linux 用户运行：
./start-all.sh

默认账号：admin / 123456

---

六、未来 Roadmap

• 接入 DeepSeek R1 32B 本地模型 (WIP)
• Tauri 桌面客户端封装 (彻底摆脱浏览器)
• 插件化卡片系统 (支持用户自定义组件)
• 数据一键导出到 Notion/Obsidian
• 多人协同模式 (WebSocket 实时同步)

---

最后

做这个项目的初衷是取悦自己，但如果它也能帮到你，那将是我最大的荣幸。

你的每一个 Star ⭐️ 都是我持续更新的动力！ 如果你有好的想法，欢迎提 Issue 或 PR，我们一起把它打磨得更好。

GitHub传送门 👉 https://github.com/weoifgiljb/smart-dashboard

(本文图片素材均已打包在源码仓库，欢迎自取)