个人 AI 工作台「nest」：对话驱动的个人工作台
像 Notion + ChatGPT 的结合体，但数据完全归你管，可以部署到自己的服务器上，手机也能访问
CONTENTS
这是什么？
一个由对话驱动的个人工作台——你通过跟 AI 助手聊天，就能管理项目、任务、习惯打卡、写文章，一切数据都保存在你自己手里。
一句话类比： 像 Notion + ChatGPT 的结合体，但数据完全归你管，而且可以部署到自己的服务器上，手机也能访问。
一、整体架构
系统长什么样？
┌──────────┐ ┌───────────┐ ┌──────────────┐
│ 浏览器 │ ←──→ │ FastAPI │ ←──→ │ AI 模型 │
│ (React) │ REST │ 后端 │ OpenAI│ (DeepSeek等) │
│ localhost │ API │ :8000 │ API │ │
└──────────┘ └─────┬─────┘ └──────────────┘
│
┌────▼─────┐
│ SQLite │
│ 数据库 │
│ (本地文件) │
└──────────┘
浏览器（前端）→ 后端 → AI 模型，这是最核心的数据流。
前后端分离
这个项目是典型的前后端分离架构：
- 前端（React）：负责界面展示和用户交互。像一个餐厅的菜单和前台——你看到什么、点哪里，都由前端决定。
- 后端（FastAPI）：负责业务逻辑和数据存储。像餐厅的厨房——你点完菜（操作），后端处理（做饭），然后把结果端上来（返回数据）。
前后端通过 REST API 通信——就像你通过菜单点菜，服务员（API）把订单传给厨房，厨房做好后端上来。
数据存在哪？
全部存在你本机的 SQLite 数据库 里，一个文件而已：
backend/data/workbench.db
为什么用 SQLite 而不是 MySQL？
- 零配置，不需要安装数据库服务
- 一个文件，备份就是复制粘贴
- 个人使用，不需要多用户并发
- 够用就好
类比： 就像用 Excel 文件记账 vs 用金蝶用友——一个人用，Excel 就够了；一百个人同时用，才需要专业数据库。
二、技术栈
| 层 | 技术 | 为什么选它？ |
|---|---|---|
| 前端框架 | React | 组件化，生态丰富，适合复杂交互 |
| 构建工具 | Vite | 比 Webpack 快 10 倍，开发体验好 |
| 前端样式 | 纯 CSS（无框架） | 杂志风格需要精细控制，CSS 框架反而限制 |
| 后端框架 | FastAPI（Python） | 异步性能好，自动生成 API 文档 |
| 数据库 | SQLite | 零配置，单文件，适合个人应用 |
| AI 接口 | OpenAI 兼容协议 | 通用标准，可换任意模型供应商 |
| 容器化 | Docker | 一键部署，环境一致 |
| 桌面打包 | Electron | 把网页变成桌面应用 |
| 手机打包 | PWA / Capacitor | 浏览器添加主屏幕，或 APK 安装 |
为什么不用 Django？
Django 是大而全的框架，自带管理后台、ORM、用户系统。但我们的需求很简单——几个 API 端点、一个 SQLite 数据库。FastAPI 更轻量，性能更好，写起来也快。
类比： 就像做一顿一人食的晚餐，你不需要一个五星级酒店的后厨团队。一个炒锅就够了。
三、功能模块详解
3.1 主页（HomeView）
报刊名板式的总览页面，灵感来自杂志封面：
┌──────────────────────────────────────┐
│ Vol. 2026 · No. 123 │ 8月9日 · 日 │ ← 刊头（Masthead）
├──────────────────────────────────────┤
│ 早上好，小明 │
│ 今日打卡 3/5 · 进行中任务 2 │
├────────────────┬─────────────────────┤
│ 目标倒计时 │ 日历 │
│ 考研 █████ 87天│ 日 一 二 三 四 五 六│
│ 毕业 █████ 200天│ 1 2 3 4 5│
│ [名称] [日期] │ 6 7 8 9 10 11 12│
│ [添加] │ ... │
├────────────────┴─────────────────────┤
│ ■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■ │
│ ← 坚持热力图（GitHub 风格） │
├──────────────────────────────────────┤
│ ┌────────┐ ┌────────┐ ┌────────┐ │
│ │ 今日打卡 │ │ 项目进度│ │ 进行任务│ │ ← 瀑布流卡片
│ │ 健身 ✓ │ │ 网站 80%│ │ 修复bug │ │
│ │ 阅读 │ │ 设计 50%│ │ 写文档 │ │
│ └────────┘ └────────┘ └────────┘ │
└──────────────────────────────────────┘
关键点：
- 所有数据通过一个
/api/overview接口一次性获取 - 倒计时自动计算剩余天数，每小时刷新一次
- 热力图用 CSS 变量控制颜色，自动跟随明暗主题
3.2 对话（ChatView）
核心功能——跟 AI 助手聊天，它能调用工具帮你做事。
工作流程：
你：「帮我建一个项目，叫"毕业设计"」
│
▼
发送消息到后端 → 后端转发给 AI 模型
│
▼
AI 返回：我想调用 create_project 工具
│
▼
后端执行 create_project("毕业设计")
│
▼
把结果返回给 AI → AI 组织成自然语言回复
│
▼
你看到：「已创建项目"毕业设计"」
这就是 Function Calling（函数调用）： AI 模型不只是聊天，它能决定「我该调用哪个工具」，然后后端执行，再把结果告诉它。
类比： 就像你请了一个助理。你说「帮我订一张去北京的机票」，助理（AI）会打开订票系统（工具），查好航班，订好票，然后告诉你结果。你不需要自己操作订票系统。
可用的工具：
- 建项目、建任务、更新任务状态
- 打卡、查询打卡情况
- 查询工作台概况（项目/任务/习惯数量）
- 管理记忆库（提议修改文件）
3.3 项目（ProjectsView）
┌────────────────────┐ ┌────────────────────┐
│ 毕业设计 │ │ 个人网站 │
│ 完成 5/8 个任务 │ │ 完成 3/3 个任务 │
│ ████████████░░ 62% │ │ ██████████████ 100% │
│ [归档] [删除] │ │ [归档] [删除] │
└────────────────────┘ └────────────────────┘
每个项目有名称和描述，下属任务通过 project_id 关联。项目进度条自动计算完成百分比。
3.4 任务看板（TasksView）
三栏看板：待办 → 进行中 → 已完成
┌───────────┬───────────┬───────────┐
│ 待办 3 │ 进行中 2 │ 已完成 5 │
├───────────┼───────────┼───────────┤
│ 写论文 │ 做实验 │ 开题报告 │
│ 查文献 │ 改bug │ 文献综述 │
│ ──────── │ │ │
│ 设计原型 │ │ │
└───────────┴───────────┴───────────┘
任务可以设截止日期、归属项目。点击「开始 →」或「完成 ✓」让任务流转到下一栏。
3.5 打卡（HabitsView）
习惯管理 + 热力图：
┌────────────────────────────────┐
│ ■■■■■■■■■■■■■■■■■■■■■■■■■ │
│ ■■■■■■■■■■■■■■■■■■■■■■■■■ │ ← 53 周热力图
│ ■■■■■■■■■■■■■■■■■■■■■■■■■ │
│ 少 ■■■■■■■■■■■■■■ 多 │
├────────────────────────────────┤
│ ┌──────────────────────┐ │
│ │ 健身 · 连续 15 天 │ │
│ │ 累计 87 天 │ │
│ │ ■■■■■■■■■■■■■■■■■■■■ │ │ ← 单个习惯近 5 周
│ │ [今日打卡] │ │
│ └──────────────────────┘ │
└────────────────────────────────┘
热力图是 GitHub 风格的贡献图——颜色越深，打卡次数越多。每个格子代表一天，鼠标悬停显示具体日期和次数。
3.6 写作（WritingView）
Markdown 双栏编辑器：
┌──────────────────────────────┐
│ [文章标题] [草稿 ▼] [保存] │
├────────────────┬─────────────┤
│ │ │
│ # 标题 │ 标题 │
│ 正文内容... │ 正文内容...│
│ **重点** │ 重点 │
│ │ │
├────────────────┴─────────────┤
│ ☑ 个人博客 [链接] │
│ ☐ Substack [链接] │
│ ☐ Medium [链接] │ ← 发布状态跟踪
└──────────────────────────────┘
左栏写 Markdown，右栏实时预览。支持上传配图、导出 .md 文件、跟踪发布状态。
3.7 记忆库（MemoryView）
这个功能比较特殊，值得单独讲。
它分为两部分：
① 记忆文件 — Agent 提议修改，你审批后才能生效
Agent 在对话中说：「我注意到你喜欢晚上工作，建议记录到记忆库」
│
▼
Agent 调用工具 → 创建一条「提案」（proposal）
│
▼
你去记忆库页面 → 看到提案 → 点击「批准」或「驳回」
│
▼
批准后 → 文件写入 backend/memories/ 目录
这就像 Git 的 Pull Request 机制： Agent 只能提 PR（提案），不能直接 push（修改）。你来 review 和 merge。
② 跨聊天记忆 — 在所有对话中自动生效
你在对话 1 中说：「我是城市规划专业的学生」
│
▼
Agent 自动调用工具 → 保存为 memory_fact
│
▼
你在对话 2 中问：「帮我查一下城市设计案例」
│
▼
Agent 的 system prompt 自动注入这条记忆 → 给出更相关的回答
这就像 ChatGPT 的跨聊天记忆： 你跟 AI 聊过一次，它下次还记得你的背景信息，不需要重复说。
3.8 主题切换
日刊 / 夜刊双模式，通过 CSS 变量实现：
:root {
--bg: #f1eee5; /* 日刊：冷纸底 */
--text: #1a1a1a; /* 墨色 */
--accent: #9e2b25; /* 编辑红 */
}
[data-theme="dark"] {
--bg: #131416; /* 夜刊：深灰底 */
--text: #e9e6dd; /* 米白字 */
--accent: #d0715e; /* 暖红 */
}
CSS 变量的好处是：改一个值，所有用到它的地方都跟着变。 不需要手动改每个元素的颜色。
四、部署方案
四种部署方式，覆盖所有场景
┌──────────────────────────────────────────────────┐
│ 你的电脑 │
│ ┌────────────┐ ┌─────────────────────────────┐ │
│ │ Docker 启动 │ │ Electron 桌面应用 (.exe) │ │
│ │ 一键脚本 │ │ 双击启动，像普通软件一样 │ │
│ └────────────┘ └─────────────────────────────┘ │
└──────────────────────────────────────────────────┘
│
手机访问
│
┌──────────────┴──────────────┐
▼ ▼
┌──────────────┐ ┌──────────────────┐
│ PWA 添加到 │ │ Android APK │
│ 手机主屏幕 │ │ 原生应用体验 │
└──────────────┘ └──────────────────┘
▲ ▲
│ │
┌──────────────────────────────────────────┐
│ 云服务器（公网） │
│ Docker + Caddy HTTPS 反向代理 │
│ 手机从任何地方都能连 │
└──────────────────────────────────────────┘
Docker 是核心
Docker 把整个应用打包成一个「集装箱」——里面装好了 Python、Node.js、所有依赖。无论你在哪台机器上运行，行为完全一致。
类比： 就像麦当劳的标准化厨房——无论在北京还是纽约，用同样的流程、同样的设备，做出来的汉堡味道一样。Docker 保证了「在我电脑上能跑，在你电脑上也能跑」。
Electron 桌面应用
Electron 是一个「浏览器壳」——它把网页包装成一个可以双击打开的桌面应用。
工作原理：
- 启动时，Electron 先启动后端的 Python 进程（用 PyInstaller 打包成 .exe）
- 然后打开一个浏览器窗口，加载
http://localhost:8000 - 用户看到的就是一个完整的桌面应用，不需要额外安装 Python 或 Docker
五、手机端适配
问题
电脑上的三栏布局在手机上完全没法用——侧边栏占半个屏幕，按钮太小点不到。
解决方案
在手机上，布局变成这样：
┌──────────────────────┐
│ ☰ 个人AI工作台│ ← 汉堡菜单（点开滑出侧边栏）
├──────────────────────┤
│ │
│ 内容区域 │
│ （全屏宽） │
│ 单栏布局 │
│ │
├──────────────────────┤
│ 🏠 💬 📁 📋 ✅ ✏️ 💻 📖│ ← 底部导航栏
└──────────────────────┘
三个关键变化：
- 侧边栏变成抽屉（点 ☰ 滑出，点遮罩层收回）
- 底部导航栏固定（拇指够得到）
- 所有多栏布局变成单栏
技术实现用了 CSS 媒体查询 + React 状态检测 的组合拳——CSS 负责外形调整，React 负责交互切换。
六、开发历程
主要里程碑
| 阶段 | 内容 |
|---|---|
| 初始搭建 | React + FastAPI 骨架，基础 CRUD API |
| 对话功能 | 流式聊天、Function Calling 工具调用 |
| 功能完善 | 项目、任务看板、打卡、写作 |
| 记忆库 | Agent 提案审批机制、跨聊天记忆 |
| 杂志风格 UI | CSS 变量主题、日刊/夜刊、刊头、发丝线、编辑红 |
| 手机端适配 | 抽屉式菜单、底部导航、单栏布局 |
| 桌面打包 | Electron + PyInstaller 打包为 .exe |
| 手机 APK | Capacitor 配置、GitHub Actions 自动构建 |
| 云服务器部署 | Docker Compose、Caddy HTTPS、一键部署脚本 |
| 安全加固 | 敏感文件 gitignore、登录保护、CSRF 防护 |
七、学到什么
1. Function Calling 不是魔法
AI 模型并不真的「理解」你的工具，它只是根据你的工具描述（JSON Schema），选择最匹配的那个。你给它的描述越清晰，它选得越准。
2. CSS 变量 + 响应式 = 维护成本低
用 CSS 变量管理主题色，用媒体查询做响应式，比 JS 方案更简洁、性能更好。
3. 个人应用的数据安全思路
- 数据永远存在你自己手里（SQLite 文件）
- API Key 只存在服务端 .env 里
- 聊天记录不上传任何第三方
- 部署到公网时必须加 HTTPS 和密码
4. 渐进式增强
先做桌面版，再做手机适配；先用 Docker 部署，再打包成桌面应用；先 PWA，再 APK。每一步都是在前一步的基础上增加的，没有一步到位。
八、项目结构速览
backend/ ← Python 后端（FastAPI）
app/
main.py 入口、会话、聊天、Claude 面板
workbench.py 项目/任务/打卡/倒计时/文章 API
database.py 数据库建表
auth.py 登录认证
agent_tools.py AI 可调用的工具函数
mcp_server.py MCP 协议支持
data/ 数据库、头像、配图（Git 忽略）
memories/ 记忆库文件（Git 忽略）
.env.example 配置模板
frontend/ ← 前端（React + Vite）
src/
App.jsx 主应用、路由、侧边栏
main.jsx 入口、登录页面
style.css 全局样式（CSS 变量、主题）
workbench.css 组件样式、响应式
views/ 每个页面的组件
components/ 热力图、概况栏、图标等
api.js 跟后端通信的 API 工具
public/
photos/ 主页卡片刊头照片
sw.js 离线缓存 Service Worker
electron/ ← 桌面应用打包
main.js 启动后端 + 打开窗口
build.bat 一键构建脚本
deploy/ ← 服务器部署
setup.sh 一键部署脚本
Caddyfile HTTPS 反向代理配置
docker-compose.yml Docker 一键启动
Dockerfile 容器镜像构建
九、下一步可能的方向
v1 已经完成了从「能跑」到「好用」的蜕变，未来可以考虑：
- 多用户支持：目前是单用户模式
- 数据导出/导入：备份和迁移更方便
- 更多 AI 模型接入：如 Claude、Gemini
- 离线模式：PWA 的 Service Worker 缓存更多资源
- 文件管理：上传的文件集中管理
- 国际化：英文界面支持
最后的话： 这个项目的核心理念是——让 AI 帮你做事，而不是替你做事。 你仍然是主人，AI 是你的工具。所有数据归你，所有决策由你拍板。这就是一个「个人工作台」应该有的样子。