从 0 到 1 手撸一个生产级个人智能仪表盘（求star~）

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

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

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

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

GitHub ：github.com/weoifgiljb/...

一、为什么造这个轮子？

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 一键编排

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

手写年度热力打卡图 抛弃沉重的图表库，用纯 Canvas 实现热力图，自定义 colorScale 算法，性能提升显著，鼠标交互丝滑。
番茄钟真正后台常驻 解决了浏览器后台休眠导致计时不准的痛点。
- 主方案：Service Worker + Periodic Background Sync
- 兜底方案：IndexedDB + visibilitychange 事件校准
AI 三层降级策略 (Resilience Patterns) 确保在任何网络环境下 AI 功能可用：
- Layer 1: 本地 Ollama 服务 (0 延迟，隐私安全)
- Layer 2: 阿里云通义千问 API (流式 SSE 响应)
- Layer 3: 前端 Mock 兜底回复
虚拟列表 + 瀑布流优化
- 书籍墙采用 Masonry 布局结合 vue-virtual-scroller，渲染 300+ 本书瞬移不重排。
- 单词趋势图在大数据量下内存占用控制在 30MB 以内。

五、30 秒本地跑起来

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

bash 复制代码

# 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传送门 👉 github.com/weoifgiljb/...

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