个人数字生活档案

项目简介

一个 Apple 风格的个人数字生活档案网站，用于记录和展示生活中的方方面面：听过的音乐、看过的书影、做过的项目、玩过的游戏、拍过的照片，以及随手写下的博客。所有数据自动同步，无需手动录入。

为什么做这个网站

市面上的个人主页大多是简历式的单页展示，千篇一律。我想要的是一个真正"活着"的网站——打开就能看到我最近在听什么歌、看了哪部电影、又入坑了什么游戏。它不是一份静态简历，而是一个持续更新的数字生活切面。

核心功能

音乐档案

通过 NeteaseCloudMusicApi 自动同步网易云音乐数据，展示本周播放统计、最近播放列表和最爱歌手排行。独立部署的 Node.js 服务负责 API 转发，主站通过内部接口调用，数据每 24 小时缓存刷新，避免频繁请求被限速。

书影档案

自研豆瓣增量爬虫，支持翻页断点续爬，每次最多抓取 5 页（75 条），页间间隔 2 秒以规避限速。数据持久化在 SQLite 中，支持观影/读书分类和"看过/想看/在看"状态筛选。因豆瓣 CDN 限制 Referer，额外开发了图片代理接口绕过检查。

项目展示

JSON 文件驱动的项目卡片，每个项目支持独立详情页。详情页通过 MDX 编写，支持富文本、图片展示和自定义组件，可选手机边框或全幅两种展示风格。

AI Lab

集成了浏览器端 OWLv2 开放词汇目标检测和 3D-MOOD 单目 3D 目标检测两个在线演示。OWLv2 模型运行在 Web Worker 中，预计算结果实现首屏秒出，模型加载完成后解锁实时推理。

AI 助手

右下角的悬浮按钮集成了 DeepSeek 大模型对话能力，系统提示词注入了网站结构和当前页面上下文，能回答关于站主的各种问题，同时做了隐私保护，不暴露敏感信息。

技术架构

前端

基于 Next.js 16 App Router 构建，使用 TypeScript 确保类型安全。样式采用 Tailwind CSS v4，通过 `@theme inline` 配置设计令牌，无需额外配置文件。入场动画使用 GSAP 实现，每个子页面拥有独特的渐变背景色。

数据层

better-sqlite3 承担两个角色：音乐数据的 24 小时 TTL 缓存，以及豆瓣书影数据的持久存储。爬虫进度记录在 `douban_crawl_state` 表中，支持断点续爬和自动重置。

设计语言

整体参考 Apple 设计规范：浅色系背景（#f5f5f7）、毛玻璃卡片效果（backdrop-blur 40px）、20px 大圆角、SF Pro 字体栈。书影页的大封面卡片网格参考了微信读书的视觉风格。

技术挑战

豆瓣反爬

豆瓣对未登录请求返回 302 重定向，频繁访问会触发限速。解决方案是携带 dbcl2 cookie 模拟登录态，控制爬取频率（页间 2 秒间隔），并实现增量爬取避免重复请求。

浏览器端模型推理

OWLv2 模型约 200MB，直接加载会阻塞主线程。采用 Web Worker 隔离推理计算，通过 progress_callback 实时回传加载进度，预计算结果保证首屏体验不受模型加载影响。

SSE 流式对话

DeepSeek API 的 SSE 响应在网络不稳定时可能出现跨 chunk 的 JSON 分割。通过维护 buffer 实现跨块解析，确保流式输出不丢字。