第1课：这个邮件助手到底能干嘛？

一句话概括

这是一个连上你真实邮箱的 AI 助手：它能帮你看邮件、搜邮件、自动分类、一键操作、甚至自己"盯着"邮箱帮你干活。

打个比方

想象你雇了一个超级秘书：

普通邮箱	有了这个助手
你自己翻收件箱	跟它说"找一下上周 XX 公司的报价邮件"
你自己判断哪些是紧急的	它自动识别紧急邮件并贴标签
你自己手动归档	一键归档30天前的订阅邮件
你自己记账	它自动从发票邮件里提取金额，记到账单
你自己提取待办	它从邮件里提取任务，放到看板上

而且这个秘书7x24小时在线——新邮件一来，它立刻分析处理。

三大核心能力

1. 对话搜索（Chat）

跟 AI 聊天，让它帮你找邮件、分析内容：

code

你: 找一下上个月 Amazon 的所有订单确认邮件
AI: 我找到了 5 封来自 Amazon 的订单确认邮件...
    [显示邮件列表]

你: 哪个订单金额最高？
AI: 12月15日的订单，金额 $299.99，是一台无线耳机...

它不是在本地文件里搜索——它直接连着你的 Gmail，搜的是真实邮件。

2. 一键操作（Actions）

AI 在对话中生成可点击的按钮，一键完成复杂操作：

code

你: 帮我把这封 bug 报告转发给工程团队
AI: 我分析了这封邮件，已准备好转发内容。
    [🔘 转发 Bug 报告给工程团队]  ← 点一下就转发

你: 把过期的订阅邮件都清理了
AI: 找到 47 封超过30天的订阅邮件。
    [🔘 归档过期订阅邮件]  ← 一键归档

按钮不是固定的——AI 根据你说的话动态生成最合适的操作。

3. 自动监听（Listeners）

设定好规则，AI 就在后台"盯着"你的邮箱：

code

📧 新邮件到达: "Invoice #12345 from Acme Corp - $500"
  ↓
🤖 财务邮件监听器被触发
  ↓
🧠 AI 分析: 这是一张发票，金额 $500，分类为"办公开支"
  ↓
📊 自动记录到财务看板
  ↓
🏷️ 自动给邮件贴上 "Finance" 标签

你什么都不用做，全自动。

系统长什么样？

打开浏览器 http://localhost:3000，你会看到：

code

┌─────────────────────────────────────────────────────┐
│  📨 收件箱  │  💬 聊天  │  📊 财务看板  │  ✅ 任务看板  │
├─────────────┴──────────┴─────────────┴──────────────┤
│                                                     │
│  （当前标签页的内容）                                  │
│                                                     │
│  收件箱 = 你的真实邮件列表                             │
│  聊天   = 跟 AI 助手对话                              │
│  财务看板 = 自动从邮件提取的收支记录                    │
│  任务看板 = 自动从邮件提取的待办事项                    │
│                                                     │
│  右侧: 活跃的监听器列表                               │
│  （哪些自动化规则正在运行）                            │
│                                                     │
└─────────────────────────────────────────────────────┘

背后的架构（先混个脸熟）

graph TD A["你的浏览器 (React 前端) 聊天界面 / 收件箱 / 看板组件"] A -->|"WebSocket 实时通信"| B subgraph B_box["Bun 后端服务器"] B1["Claude Agent SDK (处理对话和智能决策) - AI 大脑"] B2["Actions 一键操作"] B3["Listeners 自动化"] B4["UI State 持久数据"] B5["SQLite 数据库 - 存邮件和状态"] B1 --- B2 B1 --- B3 B1 --- B4 B2 --- B5 B3 --- B5 B4 --- B5 end A -->|"WebSocket 实时通信"| B1 B5 -->|"IMAP 协议"| C["Gmail 邮箱服务器 - 你的真实邮箱"]

这个 demo 是用 TypeScript 写的（不是 Python），涉及前后端全栈开发。别慌，后面一层一层讲。

这套教程的学习路线

graph TD L1["第1课这个邮件助手能干嘛（你在这里）"] L2["第2课技术全景图 -- 认识所有零件"] L3["第3课环境搭建 -- 连上 Gmail，跑起来"] L4["第4课 IMAP 邮件系统 -- 怎么连邮箱、收邮件"] L5["第5课数据库 -- 邮件怎么存、怎么查"] L6["第6课 WebSocket -- 前后端怎么实时通信"] L7["第7课 AI 对话核心 -- Agent 和 SDK 怎么配合"] L8["第8课一键操作 -- Actions 系统详解"] L9["第9课自动化 -- Listeners 监听器详解"] L10["第10课数据看板 -- UI State 和自定义组件"] L11["第11课完整实战串讲 -- 从一封邮件到自动记账"] L12["第12课进阶扩展 -- 自己写 Action/Listener/组件"] L1 --> L2 --> L3 --> L4 --> L5 --> L6 --> L7 --> L8 --> L9 --> L10 --> L11 --> L12

和"智能研究平台"有什么区别？

	智能研究平台	邮件智能助手
语言	Python	TypeScript (前后端全栈)
架构	命令行程序	Web 应用（浏览器+服务器）
AI 交互	一次性任务	持续对话+后台自动化
数据源	搜索引擎	真实邮箱 (IMAP)
输出	PDF 报告	交互式看板+邮件操作
复杂度	⭐⭐⭐	⭐⭐⭐⭐⭐

邮件助手是一个完整的全栈 Web 应用，所以这套教程也会涉及更多技术栈。