From 722a26a4bdd1510a59828aa5856b5bbad40299cf Mon Sep 17 00:00:00 2001
From: Annyfee <2287551746@qq.com>
Date: Tue, 6 Jan 2026 10:13:05 +0800
Subject: [PATCH] docs(m13): add README section for module 13

---
 m13_streamlit/README.md | 123 ++++++++++++++++++++++++++++++++++++++++
 1 file changed, 123 insertions(+)
 create mode 100644 m13_streamlit/README.md

diff --git a/m13_streamlit/README.md b/m13_streamlit/README.md
new file mode 100644
index 0000000..38455ff
--- /dev/null
+++ b/m13_streamlit/README.md
@@ -0,0 +1,123 @@
+# 🧩 模块说明：Streamlit 实战篇 - 构建 AI Agent Web 应用
+
+> 📌 核心知识点：Streamlit 基础组件｜对话式 UI 设计｜Agents SDK 集成｜多智能体协作系统｜状态持久化与会话管理
+
+---
+
+### 1. `s01_st_basics.py` （Streamlit 基础组件）
+
+全面介绍 Streamlit 的核心 UI 组件，为构建 AI Agent 应用打下基础。
+
+- ✅ 掌握点：
+  - 使用 `st.chat_input` 实现用户对话输入
+  - 使用 `st.chat_message` 创建对话气泡，支持自定义头像
+  - 使用 `st.status` 实现可折叠的中间步骤展示
+  - 使用 `st.empty()` 创建动态占位符，实现实时内容更新
+  - 使用 `st.session_state` 实现跨会话的状态持久化
+  - 使用 `st.sidebar` 设计侧边栏布局
+  - 使用 `st.rerun()` 触发页面重新渲染，保持 UI 与状态同步
+
+- 输出：
+  - 展示一个包含输入框、对话气泡、折叠状态栏、动态占位符的完整交互界面
+  - 演示会话状态的管理和侧边栏的设计
+  - 静态演示 `st.rerun()` 的使用场景和注意事项
+
+> 💡 此文件是 Streamlit 的入门指南，适合初次接触 Streamlit 的开发者快速掌握核心组件。
+
+---
+
+### 2. `s02_st_layout_demo.py` （布局与页面配置）
+
+演示 Streamlit 的页面布局配置和聊天界面的基础构建方式。
+
+- ✅ 掌握点：
+  - 使用 `st.set_page_config` 配置页面标题和布局模式
+  - 实现 `layout="wide"` 宽屏布局，适合复杂应用场景
+  - 使用 `st.sidebar` 构建侧边栏监控面板
+  - 使用 `st.header`、`st.subheader`、`st.info` 设计侧边栏信息展示
+  - 实现模拟的聊天历史展示流程
+
+- 输出：
+  - 一个带有专业标题和侧边栏监控面板的智能客服驾驶舱界面
+  - 展示用户和助手的对话气泡模拟效果
+  - 包含用户画像信息展示的侧边栏布局
+
+> 💡 此示例展示了如何构建专业的管理驾驶舱界面，适合需要监控功能的 AI 应用场景。
+
+---
+
+### 3. `s03_agent_single_mvp.py` （单智能体 MVP 实现）
+
+基于 Agents SDK 实现一个完整的单智能体客服系统，集成 OpenAI 兼容接口。
+
+- ✅ 掌握点：
+  - 配置 OpenAIChatCompletionsModel 和 AsyncOpenAI 客户端
+  - 使用 DeepSeek 模型构建智能客服 Agent
+  - 定义 Agent 的系统指令，包含业务逻辑判断（退票、改签等）
+  - 使用 `st.spinner` 显示加载动画
+  - 使用 `Runner.run_sync` 同步执行智能体任务
+  - 实现聊天历史的状态管理和自动渲染
+
+- 输出：
+  - 一个可交互的智能航空客服助手
+  - 支持退票申请、改签服务等业务场景
+  - 完整的对话历史记录和上下文管理
+  - 带侧边栏用户画像展示的监控界面
+
+> 💡 这是构建 AI Agent Web 应用的基础模板，展示了如何将 Agents SDK 与 Streamlit 无缝集成。
+
+---
+
+### 4. `s04_agent_multi_session.py` （多智能体多会话系统）
+
+基于 Agents SDK 构建完整的多智能体协作系统，实现智能路由和会话持久化。
+
+- ✅ 掌握点：
+  - 使用 `SQLiteSession` 实现对话历史的数据库持久化
+  - 实现多智能体协作（TriageAgent、RefundAgent、ChangeAgent）
+  - 使用 `MCP` 协议连接高德地图等外部服务
+  - 实现智能体之间的动态转接和状态切换
+  - 使用流式输出 `Runner.run_streamed` 实现实时响应
+  - 捕获和处理智能体事件（工具调用、转接事件）
+  - 实现会话管理和历史消息回放功能
+  - 设计可复用的侧边栏渲染函数
+
+- 输出：
+  - 完整的智能航空客服多智能体系统
+  - 自动根据用户需求转接至对应的专业坐席（退票专员、改签专员）
+  - 实时展示工具调用日志和智能体转接过程
+  - 支持会话历史持久化，页面刷新后依然保持对话上下文
+  - 动态更新的驾驶舱监控界面，显示当前坐席、用户画像和会话统计
+
+> 💡 这是接近生产环境的多智能体应用示例，展示了如何构建可扩展、可维护的复杂 AI Agent 系统。
+
+---
+
+### 🔔 全局注意事项
+
+- **学习路径建议**：
+  `s01.`（基础组件） → `s02.`（布局配置） → `s03.`（单智能体集成） → `s04.`（多智能体协作）
+- 所有 `.py` 文件依赖根目录 `.env` 中的 `OPENAI_API_KEY`
+- `s03` 和 `s04` 使用 DeepSeek API 作为 OpenAI 兼容端点
+- `s04_agent_multi_session.py` 需要依赖 `m12_agents_sdk_swarm` 模块中的智能体定义
+- 运行前确保已安装相关依赖：`streamlit`、`agents`、`openai`、`nest-asyncio`
+
+- **运行方式**：
+  ```bash
+  cd m13_streamlit
+  streamlit run s01_st_basics.py      # 基础组件演示
+  streamlit run s02_st_layout_demo.py # 布局配置演示
+  streamlit run s03_agent_single_mvp.py  # 单智能体 MVP
+  streamlit run s04_agent_multi_session.py # 多智能体系统
+  ```
+
+---
+
+### 💡 **建议**
+
+- 尝试扩展 `s04_agent_multi_session.py`，添加更多专业坐席（如投诉处理、行李查询）
+- 实验不同的 Agent 路由逻辑，优化用户体验
+- 将真实的服务 API（如航班查询、支付系统）集成到系统中
+- 探索 SQLiteSession 的高级用法，如会话分析、对话导出等
+- 考虑添加语音输入、多语言支持等扩展功能
+- 研究 Streamlit 的自定义组件，构建更丰富的可视化界面