docs: restructure assignment guides for clarity and consistency

2026-04-01 12:09:34 +08:00
parent 2bc38c6b2d
commit c74849757e
10 changed files with 979 additions and 876 deletions
@@ -1528,35 +1528,35 @@ Sitemap: ${siteUrl}/sitemap.xml
                  link: '/zh-cn/stage-2/frontend/2.5-hogwarts-portraits/'
                },
                {
-                  text: 'AI 营销文案 SaaS 开发实战',
+                  text: 'AI 营销文案 SaaS',
                  link: '/zh-cn/stage-2/assignments/copywriting-platform-supabase/'
                },
                {
-                  text: '在线考试与管理系统开发实战',
+                  text: '在线考试与管理系统',
                  link: '/zh-cn/stage-2/assignments/exam-management-express/'
                },
                {
-                  text: '现代 AI 生图 SaaS 开发实战',
+                  text: '现代 AI 生图 SaaS',
                  link: '/zh-cn/stage-2/assignments/modern-landing-page/'
                },
                {
-                  text: '类 Dify 智能体平台开发实战',
+                  text: '类 Dify 智能体平台',
                  link: '/zh-cn/stage-2/assignments/custom-dify-agent-platform/'
                },
                {
-                  text: '智能旅游规划 Agent 平台开发实战',
+                  text: '智能旅游规划 Agent 平台',
                  link: '/zh-cn/stage-2/assignments/travel-planning-agent-platform/'
                },
                {
-                  text: 'Spring Boot 电影推荐系统开发实战',
+                  text: 'Spring Boot 电影推荐系统',
                  link: '/zh-cn/stage-2/assignments/movie-recommendation-springboot/'
                },
                {
-                  text: '生鲜电商微服务系统开发实战',
+                  text: '生鲜电商微服务系统',
                  link: '/zh-cn/stage-2/assignments/simple-grocery-microservices/'
                },
                {
-                  text: 'Go 交通数据分析平台开发实战',
+                  text: 'Go 交通数据分析平台',
                  link: '/zh-cn/stage-2/assignments/traffic-data-visualization-go/'
                }
              ]
@@ -1,12 +1,42 @@
 # AI 营销文案 SaaS 开发实战

-这个项目不再只是“写一个生成按钮”，而是围绕一份真实 PRD，把一个 AI 营销文案 SaaS 从想法推进到可上线产品。
+## 概述

-你会同时看到三件事：
+本实战项目要求你围绕一份真实的 PRD，从零完成一个面向独立开发者和内容团队的 AI 营销文案 SaaS 产品。你将使用 Supabase 作为后端服务、Stripe 作为支付系统，完成从需求分析到部署上线的全过程。

- 项目要做成什么
- 如何基于 PRD 拆解并推进开发
- 最后应该交付出什么样的效果
+这是 Stage 2 的综合实战环节。在前面几章中，你已经分别学习了前端页面搭建、后端接口开发、数据库操作、支付集成等单项技能——这个项目要求你把它们全部串起来，交付一个可运行的产品原型。
+
+## 前置知识
+
+在开始本项目之前，你应该已经掌握以下内容：
+
+- 前端页面设计与组件库使用（[UI 设计](../../frontend/2.2-ui-design/)、[现代组件库](../../frontend/2.7-modern-component-library/)）
+- 后端接口设计与开发（[接口代码编写](../../backend/2.3-ai-interface-code/)）
+- 数据库基础与 Supabase（[从数据库到 Supabase](../../backend/2.2-database-supabase/)）
+- 支付集成（[Stripe 收费系统](../../backend/2.7-stripe-payment/)）
+- Git 工作流与部署（[Git 和 GitHub](../../backend/2.4-git-workflow/)、[部署 Web 应用](../../backend/2.5-zeabur-deployment/)）
+
+## 学习目标
+
+完成本实战后，你将能够：
+
+1. 阅读并理解一份真实的 PRD，从中提取开发任务清单
+2. 使用 AI 辅助分步生成前端页面和后端接口
+3. 使用 Supabase 实现用户鉴权、数据库操作
+4. 集成 Stripe 实现付费订阅功能
+5. 搭建管理后台并完成端到端联调
+
+## 项目简介
+
+你要构建的产品是一个 AI 营销文案 SaaS，包含三个子系统：
+
+| 子系统 | 职责 |
+|--------|------|
+| **官网前台** | 产品介绍、定价、FAQ、注册转化 |
+| **用户工作台** | 输入产品信息、生成文案、查看历史、升级套餐 |
+| **后台管理台** | 用户管理、生成记录、支付数据、运营概览 |
+
+后端使用 Supabase 提供数据库和鉴权能力，使用 Stripe 处理支付，使用 AI 模型生成营销文案。

 ::: tip PRD 入口
 本项目的需求文档在 GitHub： [查看 PRD](https://github.com/datawhalechina/easy-vibe/blob/main/docs/zh-cn/stage-2/assignments/copywriting-platform-supabase/PRD.md)
@@ -15,69 +45,33 @@
 <div style="margin: 32px 0;">
  <ClientOnly>
    <StepBar :active="0" :items="[
-      { title: '看 PRD', description: '先明确页面、功能、鉴权、数据库、支付与后台范围' },
-      { title: '生成骨架', description: '让 AI 先产出官网、工作台、后台三套界面骨架' },
-      { title: '监工迭代', description: '逐页验收、补接口、修权限、补支付与数据链路' },
-      { title: '交付上线', description: '完成可演示、可运行、可继续开发的 SaaS 原型' }
+      { title: '需求分析', description: '阅读 PRD，明确页面、功能、鉴权、支付范围' },
+      { title: '搭建骨架', description: '用 AI 生成三套前端骨架（www / app / admin）' },
+      { title: '后端集成', description: 'Supabase 鉴权、生成接口、Stripe 支付' },
+      { title: '联调上线', description: '端到端跑通，部署并准备演示' }
    ]" />
  </ClientOnly>
 </div>

-## 这个项目到底在做什么？
+## 第一部分：需求分析

-这是一个面向独立开发者和内容团队的 AI 营销文案 SaaS：
+### 1.1 阅读 PRD

- 官网前台：负责产品介绍、定价、FAQ、注册转化
- 用户工作台：负责输入产品信息、生成文案、查看历史、升级套餐
- 后台管理台：负责用户、生成记录、支付数据和运营概览
+打开 PRD 文档，重点回答以下问题：

-后端需要接住这些关键能力：
+- 系统有几个入口？各自覆盖哪些页面？
+- 每个页面的核心功能是什么？
+- 后端包含哪些模块和数据表？
+- 套餐定价、支付流程、免费额度如何设计？
+- MVP 范围是什么？第一版哪些做，哪些不做？

- 用户鉴权
- 文案生成任务
- 历史记录持久化
- Stripe 支付
- 后台用户和生成数据管理
+::: warning
+如果以上问题没有明确答案，不要开始写代码。需求理解不清楚是导致返工的最常见原因。
+:::

-## 开发过程怎么走？
+### 1.2 确认系统架构

-### 1. 先看 PRD，不要上来就写代码
-
-先确认：
-
- 有几个入口：`www / app / admin`
- 页面清单是否完整
- 后端模块和数据表是否合理
- 套餐、支付和后台范围是否收住
-
-如果 PRD 没拍板，就先不要写代码。
-
-### 2. 先让 AI 生成“骨架版”
-
-第一轮目标不是做完整闭环，而是先生成：
-
- 官网首页
- 登录注册
- 文案生成工作台
- 历史记录页
- 套餐页
- 后台首页与管理页骨架
-
-这一步要先把页面结构、路由和信息架构搭出来。
-
-### 3. 再进入“监工模式”
-
-你需要重点盯这几件事：
-
- 页面结构是不是和 PRD 一致
- 登录态和匿名态有没有分清
- 生成结果有没有稳定落库
- 支付之后套餐状态有没有更新
- 后台是不是能看到真实用户、生成和支付数据
-
-可以把 AI 当执行者，但你自己要做项目经理和验收人。
-
-### 4. 最后做联调和上线
+根据 PRD 梳理出系统的整体架构：

 ```mermaid
 flowchart TD
@@ -91,11 +85,13 @@ flowchart TD
  admin --> analytics["用户 / 生成 / 支付看板"]
 ```

-只要这条链路能跑通，这个项目就不是单点 Demo，而是一个完整 SaaS 原型。
+## 第二部分：搭建项目骨架

-## 怎么让 AI 帮你生成？
+### 2.1 生成前端页面

-推荐按模块逐步下指令，而不是一句“帮我做完”。
+使用 AI 先生成所有页面的基本结构和假数据。
+
+提示词参考：

 ```text
 请基于当前 PRD，帮我生成一个 AI 营销文案 SaaS 的前端骨架。
@@ -109,52 +105,9 @@ flowchart TD
 6. 风格要像现代 SaaS，不像课堂 demo
 ```

-然后再一块一块补：
+### 2.2 完善核心页面

- 鉴权
- 生成接口
- 数据库
- 支付
- 后台管理
-
-## 怎么“监工”才有效？
-
-每做完一个模块，至少检查这 5 件事：
-
-| 检查项 | 要看什么 |
-|------|------|
-| 页面是否对 | 页面数量、入口、功能是否符合 PRD |
-| 接口是否对 | 输入参数、返回结构、状态处理是否合理 |
-| 权限是否对 | 游客、用户、管理员是否隔离 |
-| 数据是否对 | 生成、历史、支付和套餐状态是否一致 |
-| 演示是否对 | 是否真的能完整跑通注册、生成、升级这条链路 |
-
-## 最后的预期效果
-
-做完后，你应该拿到这些交付物：
-
- 一套可运行的 AI 文案 SaaS 项目
- 一份同级 PRD 文档
- 三套入口：`www / app / admin`
- 基础鉴权、生成、历史、支付、后台管理
- 一份 README
- 一个可以演示的线上版本或本地完整运行方案
-
-## 验收标准
-
-| 维度 | 最低达标 |
-|------|------|
-| PRD 对齐 | 页面、功能、数据结构基本符合 PRD |
-| 产品闭环 | 注册、生成、历史、支付升级可以跑通 |
-| 后台能力 | 用户、生成、支付数据可以查看 |
-| 工程完整度 | 前端、后端、数据库、支付链路已接通 |
-| 展示能力 | 可以清楚演示“从 PRD 到成品”的过程 |
-
-::: tip 🚀 完成后你会得到什么？
-你得到的不只是一个生成页面，而是一套完整的 AI SaaS 开发过程样例。后面再做别的产品型项目，也可以继续沿用这套“先 PRD、再生成、再监工、再联调上线”的方法。
-:::
-
-第一版页面完成后，继续补充：
+骨架搭好后，重点完善文案生成工作台（Dashboard）页面：

 ```text
 请继续完善 /dashboard 页面。
@@ -183,32 +136,28 @@ flowchart TD
 - 响应式布局，宽屏窄屏都能正常显示
 ```

+### 2.3 验证页面结构
+
+逐项检查：
+
+- [ ] 三个入口的路由是否独立
+- [ ] 页面数量是否与 PRD 一致
+- [ ] Dashboard 的表单和结果区域布局合理
+- [ ] 假数据展示了基本的 UI 状态
+
 ### 遇到阻碍？

-回头看看这几篇：
+如果你在前端搭建阶段卡住，可以回顾这些章节：

- [构建第一个现代应用程序 - UI 设计](../../frontend/2.2-ui-design/)
+- [UI 设计](../../frontend/2.2-ui-design/)
 - [参考 UI 设计规范设计页面和按钮](../../frontend/2.3-multi-product-ui/)
 - [用 LLM 和 Skills 让界面变好看](../../frontend/2.4-llm-skills-beautiful/)
 - [从设计原型到项目代码](../../frontend/2.6-design-to-code/)
 - [使用现代组件库更新你的界面](../../frontend/2.7-modern-component-library/)

-<div style="margin: 32px 0;">
-  <ClientOnly>
-    <StepBar :active="2" :items="[
-      { title: '定主题', description: '先把网站的页面和功能定下来' },
-      { title: '搭前台', description: '首页、登录、工作台先做出来' },
-      { title: '接后端', description: '数据库、生成、支付接起来' },
-      { title: '做后台与交付', description: '管理台、部署、演示材料补齐' }
-    ]" />
-  </ClientOnly>
-</div>
+## 第三部分：后端集成

-## 3. 接后端：把数据库、生成、支付串起来
-
-这一步才算真正的"全栈"。
-
-### 第三步：接入 Supabase 登录
+### 3.1 接入 Supabase 登录

 ```text
 请把我当成 0 基础，一步一步带我完成 Supabase 登录接入。
@@ -229,7 +178,7 @@ flowchart TD
 - 完成后说明如何验证注册和登录
 ```

-### 第四步：接入生成接口和数据库
+### 3.2 接入生成接口和数据库

 ```text
 请把我当成 0 基础，帮我完成网站的核心功能：生成营销文案并保存。
@@ -260,7 +209,7 @@ flowchart TD
 - 如何测试完整生成链路
 ```

-### 第五步：接入 Stripe 付费
+### 3.3 接入 Stripe 付费

 ```text
 请把我当成 0 基础，帮我给 LaunchKit 加上最简可用的 Stripe 付费。
@@ -281,7 +230,7 @@ flowchart TD
 - 完成后说明如何测试完整支付流程
 ```

-### 第六步：搭建管理后台
+### 3.4 搭建管理后台

 ```text
 请把我当成 0 基础，帮我做一个简洁可用的管理后台。
@@ -290,10 +239,7 @@ flowchart TD

 需要你完成：
 1. 仅 role = admin 的用户可访问 /admin
-2. 后台包含 3 个 Tab：
-   - 用户列表
-   - 生成记录
-   - 订阅状态
+2. 后台包含 3 个 Tab：用户列表、生成记录、订阅状态
 3. 用户列表显示：email、plan、创建时间
 4. 生成记录显示：用户、产品名、渠道、创建时间
 5. 订阅状态显示：用户、套餐、支付状态
@@ -306,37 +252,22 @@ flowchart TD

 ### 遇到阻碍？

-回头看看这几篇：
+如果你在后端开发阶段卡住，可以回顾这些章节：

 - [从数据库到 Supabase](../../backend/2.2-database-supabase/)
 - [大模型辅助编写接口代码与接口文档](../../backend/2.3-ai-interface-code/)
 - [如何集成 Stripe 等收费系统](../../backend/2.7-stripe-payment/)

-<div style="margin: 32px 0;">
-  <ClientOnly>
-    <StepBar :active="3" :items="[
-      { title: '定主题', description: '先把网站的页面和功能定下来' },
-      { title: '搭前台', description: '首页、登录、工作台先做出来' },
-      { title: '接后端', description: '数据库、生成、支付接起来' },
-      { title: '做后台与交付', description: '管理台、部署、演示材料补齐' }
-    ]" />
-  </ClientOnly>
-</div>
+## 第四部分：联调与上线

-## 4. 做后台与交付：真正上线
+### 4.1 端到端测试

-网站基本成型，最后三件事：
+至少验证以下场景：

-### 4.1 部署
+- 注册 → 登录 → 生成文案 → 查看历史 → 升级套餐
+- 管理员登录 → 查看用户数据 → 查看生成记录 → 查看支付状态

-代码推送到 GitHub，部署到公网。
-
-参考：
-
- [Git 和 GitHub 工作流](../../backend/2.4-git-workflow/)
- [如何部署 Web 应用](../../backend/2.5-zeabur-deployment/)
-
-### 第七步：部署前检查
+部署前检查：

 ```text
 请把我当成 0 基础，帮我检查项目是否具备部署条件。
@@ -354,52 +285,37 @@ flowchart TD
 3. 说明修复后的部署步骤
 ```

-### 4.2 README
+### 4.2 部署

-至少包含：
- 项目简介
- 核心页面说明
- 技术栈
- 本地启动步骤
- 环境变量清单
+将项目部署到公网环境。部署教程参考：[Git 和 GitHub 工作流](../../backend/2.4-git-workflow/)、[如何部署 Web 应用](../../backend/2.5-zeabur-deployment/)。

-### 4.3 演示材料
+## 交付物

-至少准备：
- 首页截图
- Dashboard 生成截图
- Billing 页面截图
- Admin 后台截图
- 60 秒左右演示视频
+完成本项目后，你需要提交以下内容：

-## 验收标准
+- [ ] 可访问的线上演示链接
+- [ ] 源码仓库链接（含 README）
+- [ ] PRD 文档
+- [ ] 核心页面截图（首页、Dashboard、Billing、Admin）
+- [ ] 60 秒演示视频（覆盖注册 → 生成 → 支付 → 后台）

-如果你想判断这个作业到底算不算“完成”，不要只看页面有没有写完，而要看下面这几个维度是不是都达标：
+README 至少包含：项目简介、核心页面说明、技术栈、本地启动步骤、环境变量清单。

-| 维度 | 最低达标 | 加分项 |
-|------|------|------|
-| 产品完整度 | 首页、登录、Dashboard、Billing、Admin 都能访问 | 首页文案和视觉风格明显像真实 SaaS |
-| 业务闭环 | 用户可以注册、登录、生成并查看历史 | 免费 / Pro 权限差异清晰可见 |
-| 数据正确性 | 生成结果和支付状态都会写入数据库 | 有明确的错误提示、空状态和 Loading |
+## 评分标准
+
+| 维度 | 基本要求 | 进阶要求 |
+|------|---------|---------|
+| 产品完整度 | 首页、登录、Dashboard、Billing、Admin 都能访问 | 首页文案和视觉风格像真实 SaaS |
+| 业务闭环 | 注册 → 登录 → 生成 → 查看历史可以跑通 | 免费/Pro 权限差异清晰可见 |
+| 数据正确性 | 生成结果和支付状态都写入数据库 | 有明确的错误提示、空状态和 loading |
 | 权限与安全 | 未登录不能访问受保护页面，普通用户不能进 Admin | 有基本的输入校验和服务端鉴权 |
 | 工程交付 | 项目可本地启动，也可部署到公网 | README 清楚，演示视频结构完整 |

-如果你现在还觉得任务太大，就记住一个标准：**优先保证“能跑通”，再去追求“做漂亮”。**
+::: tip
+如果你觉得任务太大，记住一个原则：**先保证"能跑通"，再去追求"做漂亮"。**
+:::

-## 5. 最终成果
-
-按这篇指南做完，你拿到的不是"练习页"，而是一个**最小但完整的 SaaS 产品**：
-
- ✅ 现代组件库前端
- ✅ Supabase 数据库与登录
- ✅ 真实 AI 生成功能
- ✅ Stripe 支付系统
- ✅ 管理员后台
- ✅ 可部署上线
-
-这完全够资格作为**第一个全栈作品**。
-
-## 6. 提交前最后检查
+## 提交前检查

 <el-card shadow="hover" style="margin: 20px 0; border-radius: 12px;">
  <template #header>
@@ -416,6 +332,15 @@ flowchart TD
  </ul>
 </el-card>

-::: tip 🚀 下一篇
-完成这个网站后，继续阅读 [使用现代组件库更新你的界面](../../frontend/2.7-modern-component-library/)，把产品界面的完成度再提升一层。
-:::
+## 参考资料
+
+- [UI 设计](../../frontend/2.2-ui-design/)
+- [参考 UI 设计规范设计页面和按钮](../../frontend/2.3-multi-product-ui/)
+- [用 LLM 和 Skills 让界面变好看](../../frontend/2.4-llm-skills-beautiful/)
+- [从设计原型到项目代码](../../frontend/2.6-design-to-code/)
+- [使用现代组件库更新你的界面](../../frontend/2.7-modern-component-library/)
+- [从数据库到 Supabase](../../backend/2.2-database-supabase/)
+- [大模型辅助编写接口代码与接口文档](../../backend/2.3-ai-interface-code/)
+- [Git 和 GitHub 工作流](../../backend/2.4-git-workflow/)
+- [如何部署 Web 应用](../../backend/2.5-zeabur-deployment/)
+- [如何集成 Stripe 等收费系统](../../backend/2.7-stripe-payment/)
@@ -1,12 +1,40 @@
 # 类 Dify 智能体平台开发实战

-这个项目不是“再配一个聊天页”，而是围绕一份真实 PRD，把一个类 Dify 智能体平台从想法推进到可上线产品。
+## 概述

-你会同时看到三件事：
+本实战项目要求你围绕一份真实的 PRD，从零完成一个模仿 Dify 核心体验的智能体平台。你将构建用户控制台、管理后台和平台后端，实现智能体管理、对话、日志和知识库等核心功能。

- 项目要做成什么
- 如何基于 PRD 拆解并推进开发
- 最后应该交付出什么样的效果
+这是 Stage 2 的综合实战环节。与前面的单页面或单功能项目不同，这个项目要求你构建一个有"平台感"的 AI 产品——包含多角色、多模块、数据持久化和模型调用链路。
+
+## 前置知识
+
+在开始本项目之前，你应该已经掌握以下内容：
+
+- 前端页面设计与组件库使用（[UI 设计](../../frontend/2.2-ui-design/)、[现代组件库](../../frontend/2.7-modern-component-library/)）
+- 后端接口设计与开发（[接口代码编写](../../backend/2.3-ai-interface-code/)）
+- 数据库基础与 Supabase（[从数据库到 Supabase](../../backend/2.2-database-supabase/)）
+- Git 工作流与部署（[Git 和 GitHub](../../backend/2.4-git-workflow/)、[部署 Web 应用](../../backend/2.5-zeabur-deployment/)）
+
+## 学习目标
+
+完成本实战后，你将能够：
+
+1. 阅读并理解一份真实的 PRD，从中提取开发任务清单
+2. 设计智能体平台的页面架构和数据模型
+3. 实现智能体创建、对话、日志记录的完整链路
+4. 使用 AI 辅助完成平台型产品开发
+5. 完成端到端联调，交付一个可演示的 AI 平台原型
+
+## 项目简介
+
+你要构建的产品是一个类 Dify 智能体平台，包含两个子系统：
+
+| 子系统 | 职责 |
+|--------|------|
+| **用户控制台** | 创建智能体、配置 Prompt、发起对话、查看日志、管理知识库 |
+| **管理后台** | 查看用户数据、平台资源使用情况、调用统计 |
+
+后端需要支持以下核心能力：智能体管理、会话管理、消息存储、模型调用、调用日志记录、知识库接入。

 ::: tip PRD 入口
 本项目的需求文档在 GitHub： [查看 PRD](https://github.com/datawhalechina/easy-vibe/blob/main/docs/zh-cn/stage-2/assignments/custom-dify-agent-platform/PRD.md)
@@ -15,56 +43,32 @@
 <div style="margin: 32px 0;">
  <ClientOnly>
    <StepBar :active="0" :items="[
-      { title: '看 PRD', description: '先明确页面、能力边界、鉴权、数据库和日志范围' },
-      { title: '生成骨架', description: '让 AI 先产出官网、控制台、后台三套界面骨架' },
-      { title: '监工迭代', description: '逐页验收、补接口、修权限、补知识库和日志链路' },
-      { title: '交付上线', description: '完成可演示、可运行、可继续开发的平台原型' }
+      { title: '需求分析', description: '阅读 PRD，明确页面、能力边界、鉴权、数据模型' },
+      { title: '搭建骨架', description: '用 AI 生成用户控制台和管理后台骨架' },
+      { title: '迭代开发', description: '逐模块补充智能体、对话、日志、知识库' },
+      { title: '联调上线', description: '端到端跑通，部署并准备演示' }
    ]" />
  </ClientOnly>
 </div>

-## 这个项目到底在做什么？
+## 第一部分：需求分析

-这是一个模仿 Dify 核心体验的智能体平台：
+### 1.1 阅读 PRD

- 用户控制台：创建智能体、配置 Prompt、发起对话、查看日志
- 平台后端：管理智能体、会话、消息、知识库和模型调用
- 管理后台：查看用户和平台资源使用情况
+打开 PRD 文档，重点回答以下问题：

-## 开发过程怎么走？
+- 智能体、会话、日志、知识库哪些要进 MVP？
+- 页面和路由清单是否拍板？
+- 模型调用和日志记录的边界是什么？
+- 多租户和复杂工作流是否先不做？

-### 1. 先看 PRD，不要上来就写代码
+::: warning
+如果以上问题没有明确答案，不要开始写代码。需求理解不清楚是导致返工的最常见原因。
+:::

-先确认：
+### 1.2 确认系统架构

- 智能体、会话、日志、知识库哪些要进 MVP
- 页面和路由清单是否拍板
- 模型调用和日志记录边界是否清楚
- 多租户和复杂工作流是不是先不做
-
-### 2. 先让 AI 生成“骨架版”
-
-第一轮先生成：
-
- 登录页
- 智能体列表页
- 智能体配置页
- 对话页
- 日志页
- 知识库页
- 管理后台首页
-
-### 3. 再进入“监工模式”
-
-你要重点盯这几件事：
-
- 智能体是不是能被正确创建和编辑
- 对话是不是使用了正确的 agent 配置
- 会话和消息有没有稳定落库
- 日志是不是记录了耗时、token、错误
- 知识库和模型调用有没有串权限
-
-### 4. 最后做联调和上线
+根据 PRD 梳理出系统的整体架构：

 ```mermaid
 flowchart TD
@@ -80,7 +84,11 @@ flowchart TD
  logs --> db
 ```

-## 怎么让 AI 帮你生成？
+## 第二部分：搭建项目骨架
+
+### 2.1 生成前端页面
+
+提示词参考：

 ```text
 请基于当前 PRD，帮我生成一个类 Dify 智能体平台的前端骨架。
@@ -92,88 +100,91 @@ flowchart TD
 4. 风格要像现代 AI 平台
 ```

-## 怎么“监工”才有效？
+### 2.2 验证页面结构

-| 检查项 | 要看什么 |
-|------|------|
-| 页面是否对 | 页面数量、功能是否符合 PRD |
-| 接口是否对 | agents、chat、logs、knowledge 是否闭环 |
-| 权限是否对 | 用户是否只能管理自己的 agent 和会话 |
-| 数据是否对 | messages、logs、documents 是否一致 |
-| 演示是否对 | 是否能演示“创建 agent -> 对话 -> 查看日志”完整链路 |
+逐项检查：

-## 最后的预期效果
+- [ ] 用户控制台和管理后台入口是否分开
+- [ ] 智能体列表、配置、对话、日志、知识库页面是否完整
+- [ ] 管理后台首页、用户概览页面是否可访问
+- [ ] 假数据展示了基本的 UI 状态

- 一套可运行的类 Dify 平台
- 一份同级 PRD 文档
- 用户侧控制台 + 管理后台
- 智能体、对话、日志、知识库基础能力
- README 和演示方案
+## 第三部分：迭代开发

-## 验收标准
+### 3.1 按模块推进

-| 维度 | 最低达标 |
-|------|------|
-| PRD 对齐 | 页面、功能、数据结构基本符合 PRD |
-| 产品闭环 | 创建 agent、发起对话、查看日志可以跑通 |
-| 后台能力 | 用户与平台使用概览可查看 |
-| 工程完整度 | 前端、后端、数据库、模型调用链路已接通 |
-| 展示能力 | 可以清楚演示“从 PRD 到成品”的过程 |
+在骨架的基础上，按以下顺序逐模块补充功能：

-::: tip 🚀 完成后你会得到什么？
-你得到的不只是一个聊天页，而是一套 AI 平台型产品的开发样例。后面做知识助手、企业 Agent、AI 控制台时，都可以继续复用这套方法。
-:::
-4. 调用 LLM 前拼接系统提示词和最近 10 条上下文
-5. 返回 assistant 内容并写入消息表
-6. 无论成功失败都写一条 llm_logs
+1. **鉴权**：注册、登录、角色区分
+2. **智能体管理**：创建、编辑、删除、Prompt 配置
+3. **对话功能**：会话创建、消息收发、模型调用
+4. **日志记录**：耗时、token 用量、错误记录
+5. **知识库接入**（加分项）：文档上传、检索、结果注入
+6. **管理后台**：用户数据、资源使用、调用统计

-请给出：
- 路由层代码
- service 层代码
- 错误处理策略
- 如何本地测试
-```
+每完成一个模块，使用下表进行自检：

-### 第四步：可选接入知识库（加分项）
+| 检查项 | 验证方法 |
+|--------|----------|
+| 页面一致性 | 页面数量、功能是否符合 PRD |
+| 接口闭环 | agents、chat、logs、knowledge 接口是否完整 |
+| 权限隔离 | 用户是否只能管理自己的 agent 和会话 |
+| 数据一致性 | messages、logs、documents 数据是否对得上 |
+| 可演示性 | 是否能演示"创建 agent → 对话 → 查看日志"完整链路 |

-你可以给每个智能体增加一个“知识库开关”：
+### 3.2 知识库接入（加分项）
+
+如果你想增加知识库能力，可以给每个智能体增加一个"知识库开关"：

 - 开启后先检索知识片段，再和用户问题一起发送给模型
 - 关闭后按普通对话模式响应

-第一版不必追求复杂 RAG，只要有“检索结果可见、调用链路可解释”即可。
+第一版不必追求复杂 RAG，只要有"检索结果可见、调用链路可解释"即可。

-## 4. 上线与交付：把平台做成可演示产品
+## 第四部分：联调与上线

-### 部署前检查
+### 4.1 端到端测试

- 所有核心接口都做了登录校验
- 智能体归属权限检查通过
- 会话记录、日志记录真实落库
- 模型 Key 使用环境变量，不硬编码
- 错误提示可在前端看到，不只打控制台
+至少验证以下场景：

-### 交付物
+- 注册 → 创建智能体 → 配置 Prompt → 发起对话 → 查看日志
+- 管理员登录 → 查看用户数据 → 查看调用统计

- 可访问演示链接
- 源码仓库链接
- 智能体管理页截图
- 对话页截图
- 日志页截图
- 60 秒演示视频（创建智能体 -> 对话 -> 查看日志）
- README（架构、运行、环境变量、接口说明）
+部署前检查：

-## 验收标准
+- [ ] 所有核心接口都做了登录校验
+- [ ] 智能体归属权限检查通过
+- [ ] 会话记录、日志记录真实落库
+- [ ] 模型 Key 使用环境变量，不硬编码
+- [ ] 错误提示可在前端看到，不只打控制台

-| 维度 | 最低达标 | 加分项 |
-|------|------|------|
-| 平台完整度 | `agents/chat/logs` 三页可用 | 有清晰导航与统一设计语言 |
+### 4.2 部署
+
+将项目部署到公网环境。部署教程参考：[Git 和 GitHub 工作流](../../backend/2.4-git-workflow/)、[如何部署 Web 应用](../../backend/2.5-zeabur-deployment/)。
+
+## 交付物
+
+完成本项目后，你需要提交以下内容：
+
+- [ ] 可访问的线上演示链接
+- [ ] 源码仓库链接（含 README）
+- [ ] PRD 文档
+- [ ] 核心页面截图（智能体管理页、对话页、日志页、后台首页）
+- [ ] 60 秒演示视频（覆盖创建智能体 → 对话 → 查看日志）
+
+README 至少包含：项目简介、架构说明、技术栈、本地启动步骤、环境变量清单、接口说明。
+
+## 评分标准
+
+| 维度 | 基本要求 | 进阶要求 |
+|------|---------|---------|
+| 平台完整度 | agents / chat / logs 三页可用 | 有清晰导航与统一设计语言 |
 | 业务闭环 | 可创建智能体并真实对话 | 支持多智能体切换与历史会话 |
-| 数据与追踪 | 消息与调用日志可查询 | 有 token/耗时统计看板 |
+| 数据与追踪 | 消息与调用日志可查询 | 有 token / 耗时统计看板 |
 | 权限安全 | 仅登录用户可访问核心接口 | 资源归属校验完善 |
 | 工程交付 | 可部署、可演示、README 清晰 | 接入知识库并可解释检索结果 |

-## 提交前最后检查
+## 提交前检查

 <el-card shadow="hover" style="margin: 20px 0; border-radius: 12px;">
  <template #header>
@@ -189,6 +200,11 @@ flowchart TD
  </ul>
 </el-card>

-::: tip 🚀 完成后你会得到什么？
-你将获得一个真正有平台感的 AI 项目，而不只是单点功能 Demo。这会显著提升你在“AI 产品工程化”方向的说服力。
-:::
+## 参考资料
+
+- [UI 设计](../../frontend/2.2-ui-design/)
+- [使用现代组件库更新你的界面](../../frontend/2.7-modern-component-library/)
+- [从数据库到 Supabase](../../backend/2.2-database-supabase/)
+- [大模型辅助编写接口代码与接口文档](../../backend/2.3-ai-interface-code/)
+- [Git 和 GitHub 工作流](../../backend/2.4-git-workflow/)
+- [如何部署 Web 应用](../../backend/2.5-zeabur-deployment/)
@@ -1,12 +1,41 @@
 # 在线考试与管理系统开发实战

-这个项目不是单纯的答题页面，而是围绕一份真实 PRD，把一个多角色业务系统从想法推进到可上线产品。
+## 概述

-你会同时看到三件事：
+本实战项目要求你围绕一份真实的 PRD，从零完成一个在线考试与管理系统。这个项目的特别之处在于它包含多个角色（学生和管理员），每个角色看到的页面和能执行的操作不同。你将使用 Express 构建后端，实现完整的考试业务链路。

- 项目要做成什么
- 如何基于 PRD 拆解并推进开发
- 最后应该交付出什么样的效果
+这是 Stage 2 的综合实战环节。多角色权限系统在实际工作中非常常见，掌握这种模式后，你能够应对教培、SaaS、后台管理等各类业务场景。
+
+## 前置知识
+
+在开始本项目之前，你应该已经掌握以下内容：
+
+- 前端页面设计与组件库使用（[UI 设计](../../frontend/2.2-ui-design/)、[现代组件库](../../frontend/2.7-modern-component-library/)）
+- 后端接口设计与开发（[接口代码编写](../../backend/2.3-ai-interface-code/)）
+- 数据库基础与 Supabase（[从数据库到 Supabase](../../backend/2.2-database-supabase/)）
+- Git 工作流与部署（[Git 和 GitHub](../../backend/2.4-git-workflow/)、[部署 Web 应用](../../backend/2.5-zeabur-deployment/)）
+
+## 学习目标
+
+完成本实战后，你将能够：
+
+1. 阅读并理解一份真实的 PRD，从中提取开发任务清单
+2. 设计多角色系统的权限控制和页面路由
+3. 使用 Express 实现完整的后端 API
+4. 实现考试、提交、自动判分的业务链路
+5. 完成端到端联调，交付一个可演示的业务系统原型
+
+## 项目简介
+
+你要构建的产品是一个在线考试与管理系统，包含三个子系统：
+
+| 子系统 | 职责 |
+|--------|------|
+| **官网前台** | 平台介绍、登录入口 |
+| **学生端** | 考试列表、答题、提交、成绩查看 |
+| **管理后台** | 题库管理、考试管理、提交记录、成绩统计 |
+
+后端使用 Express，需要支持：登录鉴权、角色权限、考试和题库管理、提交流程与自动判分、成绩和统计管理。

 ::: tip PRD 入口
 本项目的需求文档在 GitHub： [查看 PRD](https://github.com/datawhalechina/easy-vibe/blob/main/docs/zh-cn/stage-2/assignments/exam-management-express/PRD.md)
@@ -15,70 +44,32 @@
 <div style="margin: 32px 0;">
  <ClientOnly>
    <StepBar :active="0" :items="[
-      { title: '看 PRD', description: '先明确角色、页面、考试链路、题库和成绩范围' },
-      { title: '生成骨架', description: '让 AI 先产出官网、学生端、管理后台三套界面骨架' },
-      { title: '监工迭代', description: '逐页验收、补接口、修权限、打通考试与成绩链路' },
-      { title: '交付上线', description: '完成可演示、可运行、可继续开发的系统原型' }
+      { title: '需求分析', description: '阅读 PRD，明确角色、页面、考试链路和数据模型' },
+      { title: '搭建骨架', description: '用 AI 生成学生端和管理端页面骨架' },
+      { title: '后端开发', description: 'Express 接通登录、考试、提交、判分' },
+      { title: '联调上线', description: '端到端跑通，部署并准备演示' }
    ]" />
  </ClientOnly>
 </div>

-## 这个项目到底在做什么？
+## 第一部分：需求分析

-这是一个典型的在线考试与管理系统：
+### 1.1 阅读 PRD

- 官网前台：负责平台介绍和登录入口
- 学生端：负责考试列表、答题、提交和成绩查看
- 管理后台：负责题库、考试、提交记录和成绩统计
+打开 PRD 文档，重点回答以下问题：

-后端需要接住这些关键能力：
+- 系统包含哪几个角色？各自能做什么？
+- 页面清单是否完整？学生端和管理端分别有哪些页面？
+- 支持哪些题型？每种题型的判分逻辑是什么？
+- 考试的完整流程是什么？（发布 → 开始 → 作答 → 提交 → 判分 → 查看成绩）

- 登录鉴权
- 角色权限
- 考试和题库管理
- 提交流程与自动判分
- 成绩和统计管理
+::: warning
+如果以上问题没有明确答案，不要开始写代码。需求理解不清楚是导致返工的最常见原因。
+:::

-## 开发过程怎么走？
+### 1.2 确认系统架构

-### 1. 先看 PRD，不要上来就写代码
-
-先确认：
-
- 角色是不是只收敛到 `student / admin`
- 页面清单是否完整
- 题型、提交流程和批改范围是否拍板
- 接口与数据表是否合理
-
-如果 PRD 没拍板，就先不要写代码。
-
-### 2. 先让 AI 生成“骨架版”
-
-第一轮先生成：
-
- 登录页
- 学生考试列表
- 学生答题页
- 学生成绩页
- 后台首页
- 题库管理页
- 考试管理页
- 提交记录页
- 成绩统计页
-
-先把页面结构、导航和信息架构搭出来。
-
-### 3. 再进入“监工模式”
-
-你要重点盯这几件事：
-
- 学生和管理员入口有没有分清
- 登录后权限是不是隔离
- 开始考试、作答、提交链路是不是闭环
- 自动判分和人工复核边界是不是清楚
- 管理端能不能看到真实提交记录和成绩统计
-
-### 4. 最后做联调和上线
+根据 PRD 梳理出系统的整体架构：

 ```mermaid
 flowchart TD
@@ -94,69 +85,15 @@ flowchart TD
  submission --> db
 ```

-只要这条链路能跑通，这个项目就不是课堂作业，而是一套完整的业务系统原型。
+## 第二部分：搭建项目骨架

-## 怎么让 AI 帮你生成？
+### 2.1 生成前端页面

-推荐按模块逐步下指令，而不是一句“帮我做完”。
+提示词参考：

 ```text
 请基于当前 PRD，帮我生成一个在线考试与管理系统的前端骨架。

-要求：
-1. 分成三个入口：www、app、admin
-2. 官网包括：首页、登录入口
-3. 学生端包括：登录、考试列表、答题页、历史成绩
-4. 后台包括：后台首页、题库管理、考试管理、提交记录、成绩统计
-5. 先只生成页面结构和假数据，不接真实接口
-6. 风格要像真实业务系统，不像课堂 demo
-```
-
-然后再一块一块补：
-
- 登录鉴权
- 考试接口
- 提交与判分
- 题库管理
- 成绩统计
-
-## 怎么“监工”才有效？
-
-每做完一个模块，至少检查这 5 件事：
-
-| 检查项 | 要看什么 |
-|------|------|
-| 页面是否对 | 页面数量、入口、功能是否符合 PRD |
-| 接口是否对 | 请求参数、返回结构、状态处理是否合理 |
-| 权限是否对 | 学生和管理员权限是否隔离 |
-| 数据是否对 | 题目、提交、成绩、统计是否一致 |
-| 演示是否对 | 是否真的能演示完整考试闭环 |
-
-## 最后的预期效果
-
-做完后，你应该拿到这些交付物：
-
- 一套可运行的在线考试系统项目
- 一份同级 PRD 文档
- 三套入口：`www / app / admin`
- 登录、题库、考试、提交、成绩、后台管理
- 一份 README
- 一个可以演示的线上版本或本地完整运行方案
-
-## 验收标准
-
-| 维度 | 最低达标 |
-|------|------|
-| PRD 对齐 | 页面、功能、数据结构基本符合 PRD |
-| 产品闭环 | 登录、考试、提交、成绩查看可以跑通 |
-| 后台能力 | 题库、考试、提交、成绩统计可以查看 |
-| 工程完整度 | 前端、后端、数据库、判分链路已接通 |
-| 展示能力 | 可以清楚演示“从 PRD 到成品”的过程 |
-
-::: tip 🚀 完成后你会得到什么？
-你得到的不只是几个业务页面，而是一套完整的多角色系统开发样例。后面做教培、后台管理、内容平台项目时，都可以继续复用这套方法。
-:::
-
 技术栈要求：
 - Next.js App Router
 - TypeScript
@@ -181,17 +118,9 @@ flowchart TD
 - 注意桌面端和移动端的基本可用性
 ```

-### 第二步：完善学生答题页
+### 2.2 完善学生答题页

-答题页是学生端最重要的一页，至少要包含这些内容：
-
- 考试标题、剩余时间、进度提示
- 当前题目内容与选项
- 上一题 / 下一题导航
- 已作答状态提示
- 提交确认弹窗
-
-你可以继续给 AI IDE 这样的提示：
+答题页是学生端的核心页面，重点完善：

 ```text
 请继续完善学生答题页。
@@ -211,36 +140,34 @@ flowchart TD
 - 有空状态和 loading 状态
 ```

-### 第三步：完善管理员后台
+### 2.3 完善管理员后台

-管理员后台不是越复杂越好，第一版先做三个核心区域：
+管理员后台第一版聚焦三个核心区域：

 - **考试管理**：创建考试、设置时长、发布状态
 - **题库管理**：新增题目、编辑题目、按题型筛选
 - **提交记录**：查看学生提交、分数、时间

-如果你卡住了，可以回头看这些章节：
+### 2.4 验证页面结构
+
+逐项检查：
+
+- [ ] 学生端和管理端入口是否分开
+- [ ] 登录页、考试列表、答题页、成绩页是否完整
+- [ ] 管理端题库、考试管理、提交记录页是否可访问
+- [ ] 学生端和管理端的页面风格有明显区分
+
+### 遇到阻碍？
+
+如果你在前端搭建阶段卡住，可以回顾这些章节：

 - [从数据库到 Supabase](../../backend/2.2-database-supabase/)
 - [应用后端接口设计与开发](../../backend/2.3-ai-interface-code/)
 - [使用现代组件库更新你的界面](../../frontend/2.7-modern-component-library/)

-<div style="margin: 32px 0;">
-  <ClientOnly>
-    <StepBar :active="2" :items="[
-      { title: '定角色与范围', description: '先把参与者、页面和数据模型定下来' },
-      { title: '搭前台', description: '学生端和管理端页面骨架先跑起来' },
-      { title: '写接口', description: '用 Express 接通登录、考试、提交、批改' },
-      { title: '上线交付', description: '部署、README、演示材料全部补齐' }
-    ]" />
-  </ClientOnly>
-</div>
+## 第三部分：后端开发

-## 3. 写接口：让 Express 真正接管业务逻辑
-
-这一步，项目才真正进入“系统开发”状态。
-
-### 第四步：完成登录与权限控制
+### 3.1 登录与权限控制

 ```text
 请把我当成 0 基础，帮我完成在线考试系统的登录与权限控制。
@@ -261,19 +188,19 @@ flowchart TD
 - 完成后说明如何验证权限是否生效
 ```

-### 第五步：完成考试与题库管理接口
+### 3.2 考试与题库管理接口

-建议先做这几组接口：
+建议按以下模块实现：

 | 模块 | 推荐接口 |
-|------|------|
+|------|----------|
 | 考试管理 | `GET /api/exams`、`POST /api/admin/exams`、`PATCH /api/admin/exams/:id` |
 | 题库管理 | `GET /api/admin/questions`、`POST /api/admin/questions` |
 | 开始考试 | `POST /api/submissions/start` |
 | 提交试卷 | `POST /api/submissions/:id/submit` |
 | 成绩记录 | `GET /api/student/history`、`GET /api/admin/submissions` |

-如果你想让 AI IDE 一步步带你完成，可以直接这样说：
+提示词参考：

 ```text
 请帮我为在线考试系统设计并实现 Express API。
@@ -295,52 +222,64 @@ flowchart TD
 - 说明每个接口如何测试
 ```

-### 第六步：实现判分逻辑
+### 3.3 判分逻辑

-这一部分很适合练后端思维。
+判分逻辑是考试系统的核心业务规则：

- 单选题：用户答案与标准答案一致则得分
- 判断题：同样可以自动判分
- 简答题：第一版可以先只保存答案，分数为空，状态为 `reviewed = false`
+- **单选题**：用户答案与标准答案一致则得分
+- **判断题**：同样可以自动判分
+- **简答题**：第一版先只保存答案，分数为空，状态为 `reviewed = false`

-如果你想再加一点 AI 能力，也可以让管理员在后台输入“主题 + 难度”，由模型先生成一批候选题，再人工审核后入库。但这属于加分项，不是必须项。
+::: tip 加分项
+如果你想增加 AI 能力，可以让管理员在后台输入"主题 + 难度"，由模型先生成一批候选题，再人工审核后入库。但这属于加分项，不是必须的。
+:::

-## 4. 上线与交付：把项目从“做完”变成“可展示”
+## 第四部分：联调与上线

-### 部署建议
+### 4.1 端到端测试
+
+至少验证以下场景：
+
+- 学生登录 → 查看考试列表 → 开始答题 → 提交 → 查看成绩
+- 管理员登录 → 创建考试 → 添加题目 → 发布 → 查看提交记录
+
+### 4.2 部署

 - 前端部署到 Vercel / Zeabur
 - Express API 部署到 Zeabur / Railway / Render
 - 数据库用 Supabase Postgres 或托管 PostgreSQL

-部署前至少检查这些内容：
+部署前检查：

- 环境变量是否齐全
- 前后端 API 地址是否正确
- 登录态是否在生产环境正常工作
- 管理员账号是否能真实访问后台
- README 是否包含启动、部署、测试说明
+- [ ] 环境变量是否齐全
+- [ ] 前后端 API 地址是否正确
+- [ ] 登录态在生产环境是否正常
+- [ ] 管理员账号是否能真实访问后台
+- [ ] README 是否包含启动、部署、测试说明

-### 你至少要准备的交付物
+## 交付物

- 首页截图
- 学生考试列表截图
- 学生答题页截图
- 管理后台截图
- 60 秒左右演示视频
- 一份写清楚环境变量和启动方式的 README
+完成本项目后，你需要提交以下内容：

-## 验收标准
+- [ ] 可访问的线上演示链接
+- [ ] 源码仓库链接（含 README）
+- [ ] PRD 文档
+- [ ] 核心页面截图（首页、学生考试列表、答题页、管理后台）
+- [ ] 60 秒演示视频（覆盖学生答题流程和管理员管理流程）

-| 维度 | 最低达标 | 加分项 |
-|------|------|------|
-| 页面完整度 | 学生端和管理端主要页面都可访问 | 页面风格统一，状态清晰，移动端也基本可用 |
+README 至少包含：项目简介、核心页面说明、技术栈、本地启动步骤、环境变量清单。
+
+## 评分标准
+
+| 维度 | 基本要求 | 进阶要求 |
+|------|---------|---------|
+| 页面完整度 | 学生端和管理端主要页面都可访问 | 页面风格统一，移动端基本可用 |
 | 业务闭环 | 学生可登录、参加考试、提交并查看成绩 | 管理员可完整创建并发布考试 |
-| 数据正确性 | 提交答案后能写入数据库，客观题能自动判分 | 简答题支持人工复核或 AI 辅助建议 |
-| 权限控制 | 学生与管理员访问边界清晰 | 服务端接口也有角色校验，不只做前端隐藏 |
+| 数据正确性 | 提交答案后能写入数据库，客观题能自动判分 | 简答题支持人工复核或 AI 辅助 |
+| 权限控制 | 学生与管理员访问边界清晰 | 服务端接口也有角色校验 |
 | 工程交付 | 项目可运行、可部署、README 清晰 | 有演示视频和测试说明 |

-## 提交前最后检查
+## 提交前检查

 <el-card shadow="hover" style="margin: 20px 0; border-radius: 12px;">
  <template #header>
@@ -357,8 +296,11 @@ flowchart TD
  </ul>
 </el-card>

-::: tip 🚀 完成后你会得到什么？
-如果你把这个项目真正做完，你收获的就不只是“又写了几个页面”，而是第一次完整处理了一个多角色业务系统。
+## 参考资料

-这会让你在后续做教培、SaaS、后台管理、内容平台类项目时，明显更有底气。
-:::
+- [UI 设计](../../frontend/2.2-ui-design/)
+- [使用现代组件库更新你的界面](../../frontend/2.7-modern-component-library/)
+- [从数据库到 Supabase](../../backend/2.2-database-supabase/)
+- [大模型辅助编写接口代码与接口文档](../../backend/2.3-ai-interface-code/)
+- [Git 和 GitHub 工作流](../../backend/2.4-git-workflow/)
+- [如何部署 Web 应用](../../backend/2.5-zeabur-deployment/)
@@ -1,12 +1,42 @@
 # 现代 AI 生图 SaaS 开发实战

-这个项目不再只是“做一个页面”，而是围绕一份真实 PRD，把一个 AI 生图 SaaS 从想法推进到可上线产品。
+## 概述

-你会同时看到三件事：
+本实战项目要求你围绕一份真实的 PRD（产品需求文档），从零完成一个参考 Midjourney 体验的 AI 生图 SaaS 产品。你将完整经历需求分析、项目拆解、迭代开发、联调上线的全过程。

- 项目要做成什么
- 如何基于 PRD 拆解并推进开发
- 最后应该交付出什么样的效果
+这是 Stage 2 的综合实战环节。在前面几章中，你已经分别学习了前端页面设计、后端接口开发、数据库操作、支付集成等单项技能——这个项目要求你把它们全部串起来，交付一个可运行的产品原型。
+
+## 前置知识
+
+在开始本项目之前，你应该已经掌握以下内容：
+
+- 前端页面设计与组件库使用（[UI 设计](../../frontend/2.2-ui-design/)、[现代组件库](../../frontend/2.7-modern-component-library/)）
+- 后端接口设计与开发（[接口代码编写](../../backend/2.3-ai-interface-code/)）
+- 数据库基础与 Supabase（[从数据库到 Supabase](../../backend/2.2-database-supabase/)）
+- 支付集成（[Stripe 收费系统](../../backend/2.7-stripe-payment/)）
+- Git 工作流与部署（[Git 和 GitHub](../../backend/2.4-git-workflow/)、[部署 Web 应用](../../backend/2.5-zeabur-deployment/)）
+
+## 学习目标
+
+完成本实战后，你将能够：
+
+1. 阅读并理解一份真实的 PRD，从中提取开发任务清单
+2. 基于 PRD 拆分模块，制定分步推进计划
+3. 使用 AI 辅助完成前端骨架搭建和后端接口开发
+4. 对每个模块进行验证和迭代优化
+5. 完成端到端联调，将项目从"能跑"推进到"能交付"
+
+## 项目简介
+
+你要构建的产品是一个现代 AI 生图 SaaS 平台，包含三个子系统：
+
+| 子系统 | 职责 |
+|--------|------|
+| **官网前台** | 产品介绍、定价、FAQ、注册转化 |
+| **用户工作台** | Prompt 输入、图片生成、图库、积分、套餐、社区互动 |
+| **后台管理台** | 用户管理、任务管理、支付管理、内容审核、SaaS 指标、系统监控 |
+
+后端需要支持以下核心能力：用户鉴权、图片生成任务、OSS 对象存储、积分与套餐支付、图片社交互动、运营数据监控。

 ::: tip PRD 入口
 本项目的需求文档在 GitHub： [查看 PRD](https://github.com/datawhalechina/easy-vibe/blob/main/docs/zh-cn/stage-2/assignments/modern-landing-page/PRD.md)
@@ -15,78 +45,32 @@
 <div style="margin: 32px 0;">
  <ClientOnly>
    <StepBar :active="0" :items="[
-      { title: '看 PRD', description: '先明确页面、功能、鉴权、数据库、支付与监控范围' },
-      { title: '生成骨架', description: '让 AI 先产出前台、工作台、后台三套界面骨架' },
-      { title: '监工迭代', description: '逐页验收、补接口、修权限、补监控与数据链路' },
-      { title: '交付上线', description: '完成可演示、可运行、可继续开发的 SaaS 原型' }
+      { title: '需求分析', description: '阅读 PRD，提取页面、模块、数据模型和边界' },
+      { title: '搭建骨架', description: '用 AI 生成三套前端骨架（www / app / admin）' },
+      { title: '迭代开发', description: '逐模块补充接口、权限、支付、监控' },
+      { title: '联调上线', description: '端到端跑通，部署并准备演示' }
    ]" />
  </ClientOnly>
 </div>

-## 这个项目到底在做什么？
+## 第一部分：需求分析

-这是一个参考 Midjourney 产品体验的现代 AI 生图 SaaS：
+### 1.1 阅读 PRD

- 官网前台：负责产品介绍、定价、FAQ、注册转化
- 用户工作台：负责 Prompt 输入、图片生成、图库、积分、套餐、社区互动
- 后台管理台：负责用户、任务、支付、积分、内容审核、SaaS 指标和系统监控
+打开 PRD 文档，重点回答以下问题：

-同时，后端需要接住这些关键能力：
+- 系统有几个入口？各自覆盖哪些页面？
+- 每个页面的核心功能是什么？
+- 后端包含哪些模块和数据库表？
+- MVP 范围是什么？第一版哪些做，哪些不做？

- 用户鉴权
- 图片生成任务
- OSS 对象存储
- 积分与套餐支付
- 图片分享、点赞、评论、转发
- 留存、转化、API 调用、数据库状态监控
+::: warning
+如果以上问题没有明确答案，不要开始写代码。需求理解不清楚是导致返工的最常见原因。
+:::

-## 开发过程怎么走？
+### 1.2 确认系统架构

-### 1. 先看 PRD，不要上来就写代码
-
-先把这几个问题看清楚：
-
- 有几个入口：`www / app / admin`
- 有几个大页面
- 每个页面的核心功能是什么
- 后端模块和数据库表有哪些
- 第一版哪些做，哪些不做
-
-如果 PRD 没拍板，就不要开始开发。
-
-### 2. 先让 AI 生成“骨架版”
-
-第一轮不是要它一次性写完，而是先生成：
-
- 官网首页
- 登录注册
- 生图工作台
- 历史图库
- 套餐/积分页
- 社区广场
- 后台首页与管理页骨架
-
-这一步的目标是：把信息架构、路由、页面分工先搭出来。
-
-### 3. 再进入“监工模式”
-
-真正难的不是生成第一版，而是持续监工。
-
-你要盯的重点包括：
-
- 页面结构是不是和 PRD 一致
- 前台、工作台、后台入口有没有分清
- 鉴权是不是做对了
- 普通用户和管理员权限有没有串
- 积分、支付、生成任务的状态流是不是闭环
- OSS 上传、数据库写入、任务状态更新是不是一致
- 后台有没有 SaaS 指标和系统监控
-
-可以把 AI 当成执行者，但你自己要做“产品经理 + 技术负责人 + QA”。
-
-### 4. 最后做联调和上线
-
-最后一轮不是补页面，而是把完整链路跑通：
+根据 PRD 中的描述，梳理出系统的整体架构：

 ```mermaid
 flowchart TD
@@ -103,13 +87,15 @@ flowchart TD
  admin --> observability["API / DB / Provider 监控"]
 ```

-只要这条链路能跑通，这个项目就不是“Demo 页面”，而是一个完整产品原型。
+建议你用自己的话把架构图画一遍，确认你对系统的理解是完整的。

-## 怎么让 AI 帮你生成？
+## 第二部分：搭建项目骨架

-推荐按模块逐步下指令，而不是一句“帮我做完”。
+### 2.1 生成前端页面

-例如先让它生成三套前端骨架：
+使用 AI 先生成所有页面的基本结构和假数据。这一步的目标是搭出信息架构和路由，不需要接真实接口。
+
+提示词参考：

 ```text
 请基于当前 PRD，帮我生成一个现代 AI 生图 SaaS 的前端骨架。
@@ -123,52 +109,103 @@ flowchart TD
 6. 风格参考 Midjourney，简洁、现代、带产品感
 ```

-然后再一块一块补：
+### 2.2 验证页面结构

- 鉴权
- 数据库
- OSS 上传
- 支付
- 积分系统
- 社区互动
- 后台统计和监控
+骨架生成后，逐项检查：

-## 怎么“监工”才有效？
+- [ ] 三个入口的路由是否独立（`/`、`/app`、`/admin`）
+- [ ] 页面数量是否与 PRD 一致
+- [ ] 每个页面是否可以正常访问和导航
+- [ ] 假数据是否展示了基本的 UI 状态（列表、空状态、表单等）

-每做完一个模块，至少检查这 5 件事：
+## 第三部分：迭代开发

-| 检查项 | 要看什么 |
-|------|------|
-| 页面是否对 | 页面数量、入口、功能是否符合 PRD |
-| 接口是否对 | 请求参数、返回结构、状态处理是否合理 |
-| 权限是否对 | 普通用户和管理员是否隔离 |
-| 数据是否对 | 数据库、OSS、支付、积分是否一致 |
-| 演示是否对 | 是否真的能给别人完整演示一条链路 |
+### 3.1 按模块推进

-如果发现 AI 写偏了，不要整页推翻，直接让它改具体模块。
+在骨架的基础上，按以下顺序逐模块补充功能：

-## 最后的预期效果
+1. **鉴权**：注册、登录、角色区分
+2. **数据库**：数据表创建、读写接口
+3. **核心业务**：图片生成任务、结果存储
+4. **OSS 存储**：图片上传与访问
+5. **支付**：套餐、积分、Stripe 集成
+6. **社交互动**：分享、点赞、评论
+7. **后台管理**：用户管理、任务管理、内容审核
+8. **数据监控**：SaaS 指标看板、系统监控

-做完后，你应该拿到这些交付物：
+每完成一个模块，使用下表进行自检：

- 一套可运行的 AI 生图 SaaS 项目
- 一份同级 PRD 文档
- 三套入口：`www / app / admin`
- 基础鉴权、支付、积分、OSS、社区互动、后台管理
- SaaS 指标看板和系统监控页
- 一份 README
- 一个可以演示的线上版本或本地完整运行方案
+| 检查项 | 验证方法 |
+|--------|----------|
+| 页面一致性 | 页面数量、入口、功能是否符合 PRD |
+| 接口正确性 | 请求参数、返回结构、状态处理是否合理 |
+| 权限隔离 | 普通用户和管理员是否互相隔离 |
+| 数据一致性 | 数据库、OSS、支付、积分是否对得上 |
+| 可演示性 | 是否能给别人完整演示一条业务链路 |

-## 验收标准
-
-| 维度 | 最低达标 |
-|------|------|
-| PRD 对齐 | 页面、功能、数据结构基本符合 PRD |
-| 产品闭环 | 注册、购买积分、生成图片、查看历史、分享互动可以跑通 |
-| 后台能力 | 用户、任务、支付、内容、积分、监控可以查看 |
-| 工程完整度 | 前端、后端、数据库、OSS、支付链路都已接通 |
-| 展示能力 | 可以清楚演示“从 PRD 到成品”的完整过程 |
-
-::: tip 🚀 做完这个项目，你会得到什么？
-你得到的不只是一个页面，也不只是一个小功能，而是一套完整的 AI SaaS 产品开发过程样例。后面再做别的项目，你可以继续沿用这套“先 PRD、再生成、再监工、再联调上线”的方法。
+::: tip
+如果发现 AI 生成的内容偏离了 PRD，不要整页推翻重来，直接让它修改具体模块即可。
 :::
+
+### 3.2 角色与分工
+
+在迭代过程中，你需要同时扮演三个角色：
+
+- **产品经理**：确认每个模块的功能是否符合 PRD
+- **技术负责人**：确认实现方案是否合理
+- **测试工程师**：确认功能是否跑得通
+
+## 第四部分：联调与上线
+
+### 4.1 端到端测试
+
+最后阶段的重点不是补新页面，而是把完整业务链路跑通。至少验证以下场景：
+
+- 注册 → 购买积分 → 生成图片 → 查看历史 → 分享互动
+- 管理员登录 → 查看用户数据 → 查看任务统计 → 查看系统监控
+
+### 4.2 部署
+
+将项目部署到公网环境，确保：
+
+- 环境变量配置完整
+- 登录回调地址正确
+- 支付回调地址正确
+- 页面无缺失的 loading、空状态、错误提示
+
+部署教程参考：[Git 和 GitHub 工作流](../../backend/2.4-git-workflow/)、[如何部署 Web 应用](../../backend/2.5-zeabur-deployment/)。
+
+## 交付物
+
+完成本项目后，你需要提交以下内容：
+
+- [ ] 可访问的线上演示链接
+- [ ] 源码仓库链接（含 README）
+- [ ] PRD 文档
+- [ ] 核心页面截图（官网首页、生图工作台、图库、套餐页、后台首页）
+- [ ] 60 秒演示视频（覆盖注册 → 生成 → 查看 → 后台管理）
+
+README 至少包含：项目简介、核心页面说明、技术栈、本地启动步骤、环境变量清单。
+
+## 评分标准
+
+| 维度 | 基本要求 | 进阶要求 |
+|------|---------|---------|
+| PRD 对齐 | 页面、功能、数据结构基本符合 PRD | 能清晰说明每个设计决策与 PRD 的对应关系 |
+| 产品闭环 | 注册 → 购买积分 → 生成图片 → 查看历史 → 分享互动可跑通 | 支付状态、积分余额、生成次数数据一致 |
+| 后台能力 | 用户、任务、支付、内容管理可查看 | SaaS 指标看板和系统监控页完整可用 |
+| 工程完整度 | 前端、后端、数据库、OSS、支付链路已接通 | 有错误处理、空状态、loading 状态 |
+| 交付质量 | 可部署、可运行 | README 清楚、演示视频结构完整 |
+
+## 参考资料
+
+- [UI 设计](../../frontend/2.2-ui-design/)
+- [参考 UI 设计规范设计页面和按钮](../../frontend/2.3-multi-product-ui/)
+- [用 LLM 和 Skills 让界面变好看](../../frontend/2.4-llm-skills-beautiful/)
+- [从设计原型到项目代码](../../frontend/2.6-design-to-code/)
+- [使用现代组件库更新你的界面](../../frontend/2.7-modern-component-library/)
+- [从数据库到 Supabase](../../backend/2.2-database-supabase/)
+- [大模型辅助编写接口代码与接口文档](../../backend/2.3-ai-interface-code/)
+- [Git 和 GitHub 工作流](../../backend/2.4-git-workflow/)
+- [如何部署 Web 应用](../../backend/2.5-zeabur-deployment/)
+- [如何集成 Stripe 等收费系统](../../backend/2.7-stripe-payment/)
@@ -1,12 +1,40 @@
 # Spring Boot 电影推荐系统开发实战

-这个项目不是“做一个电影列表页”，而是围绕一份真实 PRD，把一个带推荐能力的内容产品从想法推进到可上线原型。
+## 概述

-你会同时看到三件事：
+本实战项目要求你围绕一份真实的 PRD，使用 Spring Boot 完成一个带推荐能力的电影网站。这个项目的核心挑战在于：它不是简单的增删改查，而是需要你思考"用户行为如何影响推荐结果"以及"推荐如何可解释"。

- 项目要做成什么
- 如何基于 PRD 拆解并推进开发
- 最后应该交付出什么样的效果
+这是 Stage 2 的综合实战环节。你将第一次接触"内容 + 行为 + 推荐"型产品的开发模式，这种模式在电商、内容平台、个性化 Feed 等场景中非常常见。
+
+## 前置知识
+
+在开始本项目之前，你应该已经掌握以下内容：
+
+- 前端页面设计与组件库使用（[UI 设计](../../frontend/2.2-ui-design/)、[现代组件库](../../frontend/2.7-modern-component-library/)）
+- 后端接口设计与开发（[接口代码编写](../../backend/2.3-ai-interface-code/)）
+- 数据库基础与 Supabase（[从数据库到 Supabase](../../backend/2.2-database-supabase/)）
+- Git 工作流与部署（[Git 和 GitHub](../../backend/2.4-git-workflow/)、[部署 Web 应用](../../backend/2.5-zeabur-deployment/)）
+
+## 学习目标
+
+完成本实战后，你将能够：
+
+1. 阅读 PRD 并从中提取推荐系统的开发任务清单
+2. 使用 Spring Boot 搭建后端项目并实现 RESTful API
+3. 设计"用户行为 → 推荐"的完整数据链路
+4. 实现可解释的推荐逻辑
+5. 完成端到端联调，交付可演示的产品原型
+
+## 项目简介
+
+你要构建的产品是一个带推荐能力的电影网站：
+
+| 功能 | 描述 |
+|------|------|
+| **浏览与搜索** | 用户可以浏览和搜索电影 |
+| **评分与收藏** | 用户可以给电影评分、添加收藏 |
+| **个性化推荐** | 系统根据用户行为给出推荐结果 |
+| **管理后台** | 管理员维护电影数据、查看推荐效果 |

 ::: tip PRD 入口
 本项目的需求文档在 GitHub： [查看 PRD](https://github.com/datawhalechina/easy-vibe/blob/main/docs/zh-cn/stage-2/assignments/movie-recommendation-springboot/PRD.md)
@@ -15,54 +43,30 @@
 <div style="margin: 32px 0;">
  <ClientOnly>
    <StepBar :active="0" :items="[
-      { title: '看 PRD', description: '先明确页面、评分收藏、推荐逻辑和后台范围' },
-      { title: '生成骨架', description: '让 AI 先产出列表页、详情页、推荐页和后台页骨架' },
-      { title: '监工迭代', description: '逐页验收、补接口、修推荐逻辑和数据链路' },
-      { title: '交付上线', description: '完成可演示、可运行、可继续开发的推荐系统原型' }
+      { title: '需求分析', description: '阅读 PRD，明确推荐策略、行为数据和后台范围' },
+      { title: '搭建骨架', description: '用 AI 生成列表页、详情页、推荐页和后台页' },
+      { title: '迭代开发', description: '补充推荐逻辑、行为记录和后台管理' },
+      { title: '联调上线', description: '端到端跑通，部署并准备演示' }
    ]" />
  </ClientOnly>
 </div>

-## 这个项目到底在做什么？
+## 第一部分：需求分析

-这是一个带推荐能力的电影网站：
+### 1.1 阅读 PRD

- 用户可以浏览、搜索、评分、收藏电影
- 系统根据用户行为给出推荐结果
- 管理员可以维护电影数据和查看推荐效果
+打开 PRD 文档，重点回答以下问题：

-## 开发过程怎么走？
+- 推荐策略是什么？第一版是否使用可解释版本（如基于评分相似度）？
+- 用户行为数据要存哪些？（评分、收藏、浏览记录等）
+- 管理员需要看哪些推荐效果指标？
+- 页面清单是否完整？

-### 1. 先看 PRD，不要上来就写代码
+::: warning
+如果以上问题没有明确答案，不要开始写代码。需求理解不清楚是导致返工的最常见原因。
+:::

-先确认：
-
- 推荐策略是不是先用可解释版本
- 页面和后台范围是否拍板
- 用户行为数据要存哪些
- 管理员要看哪些推荐效果指标
-
-### 2. 先让 AI 生成“骨架版”
-
-第一轮先生成：
-
- 首页
- 电影列表页
- 电影详情页
- 推荐页
- 个人中心
- 管理后台
-
-### 3. 再进入“监工模式”
-
-你要重点盯这几件事：
-
- 列表、详情、评分、收藏是不是闭环
- 推荐结果是不是和行为数据联动
- 推荐理由是不是可解释
- 后台电影数据和用户行为是不是能查看
-
-### 4. 最后做联调和上线
+### 1.2 确认系统架构

 ```mermaid
 flowchart TD
@@ -75,7 +79,11 @@ flowchart TD
  admin["后台管理"] --> db
 ```

-## 怎么让 AI 帮你生成？
+## 第二部分：搭建项目骨架
+
+### 2.1 生成前端页面
+
+提示词参考：

 ```text
 请基于当前 PRD，帮我生成一个 Spring Boot 电影推荐系统的前端骨架。
@@ -86,34 +94,69 @@ flowchart TD
 3. 风格要像真实内容产品，而不是课堂 demo
 ```

-## 怎么“监工”才有效？
+### 2.2 验证页面结构

-| 检查项 | 要看什么 |
-|------|------|
-| 页面是否对 | 页面数量、功能是否符合 PRD |
-| 接口是否对 | movies、ratings、favorites、recommendations 是否闭环 |
-| 数据是否对 | 用户行为是否影响推荐结果 |
-| 推荐是否对 | 推荐理由是否清晰、结果是否可解释 |
-| 演示是否对 | 是否能演示“浏览 -> 评分 -> 推荐变化” |
+逐项检查：

-## 最后的预期效果
+- [ ] 电影列表页支持搜索和筛选
+- [ ] 电影详情页包含评分和收藏按钮
+- [ ] 推荐页能展示推荐结果和推荐理由
+- [ ] 管理后台能展示电影数据和推荐效果

- 一套可运行的电影推荐系统
- 一份同级 PRD 文档
- 浏览、评分、收藏、推荐、后台管理
- Spring Boot 后端与推荐逻辑
- README 和演示方案
+## 第三部分：迭代开发

-## 验收标准
+### 3.1 按模块推进

-| 维度 | 最低达标 |
-|------|------|
-| PRD 对齐 | 页面、功能、数据结构基本符合 PRD |
-| 产品闭环 | 浏览、评分、收藏、推荐可以跑通 |
-| 后台能力 | 电影数据和推荐效果可查看 |
-| 工程完整度 | 前端、后端、数据库、推荐接口已接通 |
-| 展示能力 | 可以清楚演示“从 PRD 到成品”的过程 |
+1. **Spring Boot 项目搭建**：项目结构、数据库配置、基础 CRUD
+2. **电影数据管理**：电影列表、详情、搜索接口
+3. **用户行为**：评分、收藏接口，行为数据写入
+4. **推荐逻辑**：基于用户行为的推荐算法实现
+5. **推荐展示**：推荐结果展示，包含推荐理由
+6. **管理后台**：电影数据维护、推荐效果查看

-::: tip 🚀 完成后你会得到什么？
-你得到的不只是一个电影站，而是一套“内容 + 行为 + 推荐”型产品的开发样例。
-:::
+### 3.2 模块自检
+
+| 检查项 | 验证方法 |
+|--------|----------|
+| 基础功能 | 列表、详情、评分、收藏是否闭环 |
+| 推荐联动 | 用户行为是否影响推荐结果 |
+| 推荐可解释性 | 用户能理解为什么被推荐这些电影 |
+| 后台数据 | 管理员能查看电影数据和推荐效果 |
+
+## 第四部分：联调与上线
+
+### 4.1 端到端测试
+
+至少验证以下场景：
+
+- 浏览电影 → 评分 → 收藏 → 查看推荐页，确认推荐结果发生变化
+- 管理员登录 → 添加电影 → 查看推荐效果统计
+
+## 交付物
+
+完成本项目后，你需要提交以下内容：
+
+- [ ] 可访问的线上演示链接
+- [ ] 源码仓库链接（含 README）
+- [ ] PRD 文档
+- [ ] 核心页面截图（电影列表、电影详情、推荐页、管理后台）
+- [ ] 60 秒演示视频
+
+## 评分标准
+
+| 维度 | 基本要求 | 进阶要求 |
+|------|---------|---------|
+| PRD 对齐 | 页面、功能、数据结构基本符合 PRD | 能清晰说明设计决策 |
+| 产品闭环 | 浏览 → 评分 → 收藏 → 推荐可跑通 | 评分行为明显影响推荐结果 |
+| 推荐质量 | 推荐结果合理、推荐理由可解释 | 支持多种推荐策略 |
+| 后台能力 | 电影数据和推荐效果可查看 | 有推荐准确率等统计指标 |
+| 工程完整度 | 前端、Spring Boot 后端、数据库链路已接通 | 推荐接口有缓存或性能优化 |
+
+## 参考资料
+
+- [UI 设计](../../frontend/2.2-ui-design/)
+- [使用现代组件库更新你的界面](../../frontend/2.7-modern-component-library/)
+- [从数据库到 Supabase](../../backend/2.2-database-supabase/)
+- [大模型辅助编写接口代码与接口文档](../../backend/2.3-ai-interface-code/)
+- [Git 和 GitHub 工作流](../../backend/2.4-git-workflow/)
+- [如何部署 Web 应用](../../backend/2.5-zeabur-deployment/)
@@ -1,12 +1,48 @@
 # 生鲜电商微服务系统开发实战

-这个项目不是“做一个买菜网站”，而是围绕一份真实 PRD，把一个微服务电商系统从想法推进到可运行原型。
+## 概述

-你会同时看到三件事：
+本实战项目要求你围绕一份真实的 PRD，从零完成一个生鲜电商微服务系统。与前面的单服务项目不同，这个项目的后端按业务拆分成多个独立服务，通过 API 网关统一对外。你将学习如何设计服务边界、如何处理跨服务的数据一致性问题。

- 项目要做成什么
- 如何基于 PRD 拆解并推进开发
- 最后应该交付出什么样的效果
+这是 Stage 2 的综合实战环节。微服务架构在实际工作中非常常见，掌握服务拆分和网关路由的基本思路后，你能够应对更复杂的后端系统设计。
+
+## 前置知识
+
+在开始本项目之前，你应该已经掌握以下内容：
+
+- 前端页面设计与组件库使用（[UI 设计](../../frontend/2.2-ui-design/)、[现代组件库](../../frontend/2.7-modern-component-library/)）
+- 后端接口设计与开发（[接口代码编写](../../backend/2.3-ai-interface-code/)）
+- 数据库基础与 Supabase（[从数据库到 Supabase](../../backend/2.2-database-supabase/)）
+- Git 工作流与部署（[Git 和 GitHub](../../backend/2.4-git-workflow/)、[部署 Web 应用](../../backend/2.5-zeabur-deployment/)）
+
+## 学习目标
+
+完成本实战后，你将能够：
+
+1. 阅读 PRD 并提取微服务系统的开发任务清单
+2. 按业务领域拆分服务边界（鉴权、商品、库存、订单）
+3. 设计和实现 API 网关路由
+4. 处理库存扣减和订单一致性等跨服务问题
+5. 完成端到端联调，交付可演示的微服务原型
+
+## 项目简介
+
+你要构建的产品是一个生鲜电商微服务系统：
+
+| 子系统 | 职责 |
+|--------|------|
+| **用户端** | 浏览商品、下单、查看订单 |
+| **管理端** | 商品管理、库存管理、订单管理 |
+
+后端按业务拆分为以下服务：
+
+| 服务 | 职责 |
+|------|------|
+| **API Gateway** | 统一入口、路由转发、鉴权校验 |
+| **Auth Service** | 用户注册、登录、JWT 颁发 |
+| **Catalog Service** | 商品信息管理 |
+| **Inventory Service** | 库存数量管理 |
+| **Order Service** | 订单创建、状态管理 |

 ::: tip PRD 入口
 本项目的需求文档在 GitHub： [查看 PRD](https://github.com/datawhalechina/easy-vibe/blob/main/docs/zh-cn/stage-2/assignments/simple-grocery-microservices/PRD.md)
@@ -15,53 +51,30 @@
 <div style="margin: 32px 0;">
  <ClientOnly>
    <StepBar :active="0" :items="[
-      { title: '看 PRD', description: '先明确服务拆分、页面、交易链路和补偿策略' },
-      { title: '生成骨架', description: '让 AI 先产出前端、网关和服务骨架' },
-      { title: '监工迭代', description: '逐模块验收、补接口、修库存与订单一致性' },
-      { title: '交付上线', description: '完成可演示、可运行、可继续开发的微服务原型' }
+      { title: '需求分析', description: '阅读 PRD，明确服务拆分、页面和交易链路' },
+      { title: '搭建骨架', description: '生成前端、网关和各服务骨架' },
+      { title: '迭代开发', description: '逐模块补接口、修库存与订单一致性' },
+      { title: '联调上线', description: '端到端跑通，部署并准备演示' }
    ]" />
  </ClientOnly>
 </div>

-## 这个项目到底在做什么？
+## 第一部分：需求分析

-这是一个生鲜电商微服务系统：
+### 1.1 阅读 PRD

- 用户端负责浏览商品、下单、查看订单
- 管理端负责商品、库存和订单管理
- 后端按业务拆成网关、鉴权、商品、库存、订单服务
+打开 PRD 文档，重点回答以下问题：

-## 开发过程怎么走？
+- 服务如何拆分？每个服务的职责边界是什么？
+- 前台和管理端分别有哪些页面？
+- 下单后库存扣减的策略是什么？成功 / 失败 / 超时各怎么处理？
+- 第一版哪些复杂能力（如分布式事务、消息队列）先不做？

-### 1. 先看 PRD，不要上来就写代码
+::: warning
+如果以上问题没有明确答案，不要开始写代码。需求理解不清楚是导致返工的最常见原因。
+:::

-先确认：
-
- 服务拆分是否拍板
- 前台和管理端页面是否清楚
- 下单、库存扣减和补偿策略是否明确
- 第一版哪些复杂能力先不做
-
-### 2. 先让 AI 生成“骨架版”
-
-第一轮先生成：
-
- 用户端首页、商品页、购物车、订单页
- 管理端商品、库存、订单管理页
- API Gateway
- auth、catalog、inventory、order 四个服务骨架
-
-### 3. 再进入“监工模式”
-
-你要重点盯这几件事：
-
- 网关路由是否正确
- JWT 和角色权限是否正确
- 商品和库存数据是否一致
- 下单后库存和订单状态是否闭环
- 失败补偿是否真的能回滚
-
-### 4. 最后做联调和上线
+### 1.2 确认系统架构

 ```mermaid
 flowchart TD
@@ -74,7 +87,11 @@ flowchart TD
  order --> inventory
 ```

-## 怎么让 AI 帮你生成？
+## 第二部分：搭建项目骨架
+
+### 2.1 生成项目结构
+
+提示词参考：

 ```text
 请基于当前 PRD，帮我生成一个生鲜电商微服务系统的项目骨架。
@@ -86,34 +103,70 @@ flowchart TD
 4. 先不接真实数据库和支付
 ```

-## 怎么“监工”才有效？
+### 2.2 验证项目结构

-| 检查项 | 要看什么 |
-|------|------|
-| 页面是否对 | 页面数量、入口、功能是否符合 PRD |
-| 接口是否对 | catalog、inventory、orders 是否闭环 |
-| 权限是否对 | 用户与管理员权限是否隔离 |
-| 数据是否对 | 商品、库存、订单状态是否一致 |
-| 演示是否对 | 是否能演示“浏览 -> 下单 -> 查单 -> 管理库存” |
+逐项检查：

-## 最后的预期效果
+- [ ] 五个服务目录结构清晰
+- [ ] API Gateway 可以启动并转发请求
+- [ ] 各服务健康检查接口可用
+- [ ] 前端用户端和管理端页面可访问

- 一套可运行的生鲜电商微服务系统
- 一份同级 PRD 文档
- 用户端、管理端、网关和 4 个核心服务
- JWT 鉴权、库存扣减、订单管理
- README 和演示方案
+## 第三部分：迭代开发

-## 验收标准
+### 3.1 按模块推进

-| 维度 | 最低达标 |
-|------|------|
-| PRD 对齐 | 页面、功能、数据结构基本符合 PRD |
-| 产品闭环 | 浏览、下单、库存、查单可以跑通 |
-| 后台能力 | 商品、库存、订单管理可以查看 |
-| 工程完整度 | 前端、网关、服务、数据库链路已接通 |
-| 展示能力 | 可以清楚演示“从 PRD 到成品”的过程 |
+1. **API Gateway**：路由配置、JWT 校验中间件
+2. **Auth Service**：注册、登录、JWT 颁发
+3. **Catalog Service**：商品 CRUD、列表查询
+4. **Inventory Service**：库存查询、库存扣减
+5. **Order Service**：订单创建、状态流转、库存联动
+6. **管理端**：商品管理、库存管理、订单管理

-::: tip 🚀 完成后你会得到什么？
-你得到的不只是一个电商练习题，而是一套微服务项目的开发样例。后面再做复杂后端系统时，这会非常有用。
-:::
+### 3.2 模块自检
+
+| 检查项 | 验证方法 |
+|--------|----------|
+| 网关路由 | 各服务接口是否通过网关正确转发 |
+| 权限隔离 | 用户端和管理端接口是否隔离 |
+| 数据一致 | 商品和库存数据是否同步 |
+| 交易闭环 | 下单后库存扣减、订单状态是否一致 |
+| 失败处理 | 库存不足或超时时是否有补偿机制 |
+
+## 第四部分：联调与上线
+
+### 4.1 端到端测试
+
+至少验证以下场景：
+
+- 浏览商品 → 加入购物车 → 下单 → 查看订单
+- 管理员 → 添加商品 → 更新库存 → 查看订单
+
+## 交付物
+
+完成本项目后，你需要提交以下内容：
+
+- [ ] 可访问的线上演示链接
+- [ ] 源码仓库链接（含 README）
+- [ ] PRD 文档
+- [ ] 核心页面截图（商品列表、下单页、订单页、管理后台）
+- [ ] 60 秒演示视频
+
+## 评分标准
+
+| 维度 | 基本要求 | 进阶要求 |
+|------|---------|---------|
+| PRD 对齐 | 页面、功能、服务拆分基本符合 PRD | 能清晰说明服务拆分的理由 |
+| 产品闭环 | 浏览 → 下单 → 库存扣减 → 查看订单可跑通 | 订单超时或库存不足有补偿机制 |
+| 服务架构 | 各服务可独立启动，通过网关统一访问 | 服务间通信有错误处理和重试 |
+| 后台能力 | 商品、库存、订单管理可操作 | 管理端有数据统计 |
+| 工程完整度 | 前端、网关、服务、数据库链路已接通 | 有 Docker Compose 或类似编排 |
+
+## 参考资料
+
+- [UI 设计](../../frontend/2.2-ui-design/)
+- [使用现代组件库更新你的界面](../../frontend/2.7-modern-component-library/)
+- [从数据库到 Supabase](../../backend/2.2-database-supabase/)
+- [大模型辅助编写接口代码与接口文档](../../backend/2.3-ai-interface-code/)
+- [Git 和 GitHub 工作流](../../backend/2.4-git-workflow/)
+- [如何部署 Web 应用](../../backend/2.5-zeabur-deployment/)
@@ -1,12 +1,40 @@
 # Go 交通数据分析平台开发实战

-这个项目不是“写几个 Go 接口”，而是围绕一份真实 PRD，把一个数据接入、聚合、告警、可视化的产品原型推进出来。
+## 概述

-你会同时看到三件事：
+本实战项目要求你围绕一份真实的 PRD，使用 Go 完成一个交通数据分析平台。这个项目的方向与前面的增删改查系统不同——你需要构建一条"数据接入 → 聚合 → 告警 → 可视化"的完整数据链路。这种数据产品在 IoT、监控、运营分析等场景中非常常见。

- 项目要做成什么
- 如何基于 PRD 拆解并推进开发
- 最后应该交付出什么样的效果
+这是 Stage 2 的综合实战环节，也是你第一次接触 Go 语言。不用担心，有了前面 JavaScript / TypeScript 的基础，学习 Go 并不难——重点是理解数据链路的设计思路。
+
+## 前置知识
+
+在开始本项目之前，你应该已经掌握以下内容：
+
+- 前端页面设计与组件库使用（[UI 设计](../../frontend/2.2-ui-design/)、[现代组件库](../../frontend/2.7-modern-component-library/)）
+- 后端接口设计与开发（[接口代码编写](../../backend/2.3-ai-interface-code/)）
+- 数据库基础与 Supabase（[从数据库到 Supabase](../../backend/2.2-database-supabase/)）
+- Git 工作流与部署（[Git 和 GitHub](../../backend/2.4-git-workflow/)、[部署 Web 应用](../../backend/2.5-zeabur-deployment/)）
+
+## 学习目标
+
+完成本实战后，你将能够：
+
+1. 阅读 PRD 并提取数据产品的开发任务清单
+2. 使用 Go（Gin 或 Fiber）搭建后端 API 服务
+3. 设计数据接入、窗口聚合和告警的完整链路
+4. 让后端数据和前端看板保持一致
+5. 完成端到端联调，交付可演示的数据产品原型
+
+## 项目简介
+
+你要构建的产品是一个 Go 交通数据分析平台：
+
+| 模块 | 职责 |
+|------|------|
+| **数据接入** | 接收原始交通事件并入库 |
+| **数据聚合** | 按时间窗口计算趋势和拥堵指标 |
+| **告警** | 基于规则生成告警记录 |
+| **看板展示** | 在前端展示趋势图、排行榜和告警列表 |

 ::: tip PRD 入口
 本项目的需求文档在 GitHub： [查看 PRD](https://github.com/datawhalechina/easy-vibe/blob/main/docs/zh-cn/stage-2/assignments/traffic-data-visualization-go/PRD.md)
@@ -15,55 +43,30 @@
 <div style="margin: 32px 0;">
  <ClientOnly>
    <StepBar :active="0" :items="[
-      { title: '看 PRD', description: '先明确数据来源、指标、告警规则和看板范围' },
-      { title: '生成骨架', description: '让 AI 先产出 API、聚合任务和看板页骨架' },
-      { title: '监工迭代', description: '逐模块验收、补接口、修指标口径和告警链路' },
-      { title: '交付上线', description: '完成可演示、可运行、可继续开发的数据产品原型' }
+      { title: '需求分析', description: '阅读 PRD，明确数据来源、指标口径和告警规则' },
+      { title: '搭建骨架', description: '用 AI 生成 Go API 服务和前端看板骨架' },
+      { title: '迭代开发', description: '补充聚合逻辑、告警规则和看板接口' },
+      { title: '联调上线', description: '端到端跑通，部署并准备演示' }
    ]" />
  </ClientOnly>
 </div>

-## 这个项目到底在做什么？
+## 第一部分：需求分析

-这是一个 Go 交通数据分析平台：
+### 1.1 阅读 PRD

- 接收原始交通事件
- 做窗口聚合
- 计算趋势和拥堵指标
- 生成告警
- 在前端看板中展示结果
+打开 PRD 文档，重点回答以下问题：

-## 开发过程怎么走？
+- 数据来源是什么？字段有哪些？
+- 核心指标的定义是什么？（比如"拥堵"的具体标准）
+- 告警规则是什么？第一版是否先收敛到简单规则？
+- 看板包含哪些页面和图表？

-### 1. 先看 PRD，不要上来就写代码
+::: warning
+如果以上问题没有明确答案，不要开始写代码。需求理解不清楚是导致返工的最常见原因。
+:::

-先确认：
-
- 数据来源和字段是否拍板
- 指标口径是否清楚
- 告警规则是否先收敛到简单版本
- 看板页面范围是否合理
-
-### 2. 先让 AI 生成“骨架版”
-
-第一轮先生成：
-
- Go API 服务骨架
- 数据接入接口
- 聚合任务骨架
- 总览看板、趋势页、告警页
-
-### 3. 再进入“监工模式”
-
-你要重点盯这几件事：
-
- 原始数据是否正确入库
- 聚合口径是否一致
- 告警规则是否符合预期
- 看板展示和后端数据是否一致
- API 是否有统一返回结构和错误处理
-
-### 4. 最后做联调和上线
+### 1.2 确认数据链路

 ```mermaid
 flowchart TD
@@ -75,7 +78,11 @@ flowchart TD
  alert --> dashboard
 ```

-## 怎么让 AI 帮你生成？
+## 第二部分：搭建项目骨架
+
+### 2.1 生成 Go API 服务
+
+提示词参考：

 ```text
 请基于当前 PRD，帮我生成一个 Go 交通数据分析平台骨架。
@@ -88,33 +95,69 @@ flowchart TD
 5. 先不做真实复杂分析，只做可运行结构
 ```

-## 怎么“监工”才有效？
+### 2.2 验证项目结构

-| 检查项 | 要看什么 |
-|------|------|
-| 接口是否对 | ingest、dashboard、alerts 是否闭环 |
-| 数据是否对 | 原始表、聚合表、告警表是否一致 |
-| 指标是否对 | 趋势、排名、告警口径是否合理 |
-| 页面是否对 | 看板展示和后端结果是否对齐 |
-| 演示是否对 | 是否能演示“接入 -> 聚合 -> 告警 -> 展示” |
+逐项检查：

-## 最后的预期效果
+- [ ] Go 服务可以正常启动
+- [ ] 数据接入接口可接收并存储数据
+- [ ] 聚合任务框架已搭好
+- [ ] 前端看板页面可展示基本图表

- 一套可运行的 Go 数据分析平台
- 一份同级 PRD 文档
- 数据接入、聚合、告警、看板展示
- README 和演示方案
+## 第三部分：迭代开发

-## 验收标准
+### 3.1 按模块推进

-| 维度 | 最低达标 |
-|------|------|
-| PRD 对齐 | 页面、功能、数据结构基本符合 PRD |
-| 产品闭环 | 接入、聚合、告警、看板可以跑通 |
-| 分析能力 | 趋势、排行、告警三个核心模块可用 |
-| 工程完整度 | Go API、数据库、前端看板链路已接通 |
-| 展示能力 | 可以清楚演示“从 PRD 到成品”的过程 |
+1. **数据接入 API**：接收原始交通事件，写入数据库
+2. **数据聚合**：按时间窗口聚合，计算趋势和拥堵指标
+3. **告警规则**：基于阈值生成告警记录
+4. **看板接口**：提供趋势数据、排行数据、告警列表
+5. **前端看板**：趋势图、排行榜、告警列表页面

-::: tip 🚀 完成后你会得到什么？
-你得到的不只是一个接口项目，而是一套“数据接入 + 数据产品”型项目的开发样例。
-:::
+### 3.2 模块自检
+
+| 检查项 | 验证方法 |
+|--------|----------|
+| 数据接入 | 原始数据是否正确入库 |
+| 聚合口径 | 趋势、排名指标的计算逻辑是否一致 |
+| 告警规则 | 告警触发条件是否符合预期 |
+| 数据一致性 | 看板展示和后端数据是否对得上 |
+| API 规范 | 是否有统一返回结构和错误处理 |
+
+## 第四部分：联调与上线
+
+### 4.1 端到端测试
+
+至少验证以下场景：
+
+- 接入一批测试数据 → 聚合任务执行 → 看板展示更新
+- 触发告警条件 → 告警记录生成 → 告警页面显示
+
+## 交付物
+
+完成本项目后，你需要提交以下内容：
+
+- [ ] 可访问的线上演示链接
+- [ ] 源码仓库链接（含 README）
+- [ ] PRD 文档
+- [ ] 核心页面截图（数据接入演示、趋势看板、告警列表）
+- [ ] 60 秒演示视频
+
+## 评分标准
+
+| 维度 | 基本要求 | 进阶要求 |
+|------|---------|---------|
+| PRD 对齐 | 功能和数据结构基本符合 PRD | 能清晰说明指标口径和聚合逻辑 |
+| 数据链路 | 接入 → 聚合 → 告警 → 看板可跑通 | 聚合任务支持增量更新 |
+| 分析能力 | 趋势、排行、告警三个模块可用 | 指标可配置、告警规则可自定义 |
+| 前端展示 | 看板能展示基本图表 | 图表支持时间范围筛选 |
+| 工程完整度 | Go API、数据库、前端链路已接通 | API 有统一错误处理和日志 |
+
+## 参考资料
+
+- [UI 设计](../../frontend/2.2-ui-design/)
+- [使用现代组件库更新你的界面](../../frontend/2.7-modern-component-library/)
+- [从数据库到 Supabase](../../backend/2.2-database-supabase/)
+- [大模型辅助编写接口代码与接口文档](../../backend/2.3-ai-interface-code/)
+- [Git 和 GitHub 工作流](../../backend/2.4-git-workflow/)
+- [如何部署 Web 应用](../../backend/2.5-zeabur-deployment/)
@@ -1,12 +1,40 @@
 # 智能旅游规划 Agent 平台开发实战

-这个项目不是“做一个会聊天的旅行助手”，而是围绕一份真实 PRD，把一个可执行的旅行规划产品从想法推进到可上线原型。
+## 概述

-你会同时看到三件事：
+本实战项目要求你围绕一份真实的 PRD，从零完成一个智能旅游规划 Agent 平台。你将构建一个能接收结构化输入、生成每日行程、支持保存和重用的完整 AI 产品——不只是聊天机器人，而是一个有任务管理能力的产品。

- 项目要做成什么
- 如何基于 PRD 拆解并推进开发
- 最后应该交付出什么样的效果
+这是 Stage 2 的综合实战环节。这个项目的核心挑战在于：如何让 AI 生成结构化、可用的行程规划，而不是一大段不可操作的文字。
+
+## 前置知识
+
+在开始本项目之前，你应该已经掌握以下内容：
+
+- 前端页面设计与组件库使用（[UI 设计](../../frontend/2.2-ui-design/)、[现代组件库](../../frontend/2.7-modern-component-library/)）
+- 后端接口设计与开发（[接口代码编写](../../backend/2.3-ai-interface-code/)）
+- 数据库基础与 Supabase（[从数据库到 Supabase](../../backend/2.2-database-supabase/)）
+- Git 工作流与部署（[Git 和 GitHub](../../backend/2.4-git-workflow/)、[部署 Web 应用](../../backend/2.5-zeabur-deployment/)）
+
+## 学习目标
+
+完成本实战后，你将能够：
+
+1. 阅读 PRD 并从中提取 Agent 平台的开发任务清单
+2. 设计结构化的输入表单和结构化的输出格式
+3. 实现 Agent 编排层，处理用户输入、模型调用和结果存储
+4. 构建"生成 → 保存 → 重用"的业务闭环
+5. 完成端到端联调，交付可演示的 AI 产品原型
+
+## 项目简介
+
+你要构建的产品是一个智能旅游规划 Agent 平台：
+
+| 功能 | 描述 |
+|------|------|
+| **行程规划** | 用户输入出发地、目的地、日期、预算和偏好，系统生成每日行程 |
+| **预算拆分** | 行程结果包含预算分配和建议 |
+| **历史管理** | 用户可以保存历史计划、再次生成、导出 |
+| **管理后台** | 管理员查看热门目的地、失败任务和用户反馈 |

 ::: tip PRD 入口
 本项目的需求文档在 GitHub： [查看 PRD](https://github.com/datawhalechina/easy-vibe/blob/main/docs/zh-cn/stage-2/assignments/travel-planning-agent-platform/PRD.md)
@@ -15,55 +43,30 @@
 <div style="margin: 32px 0;">
  <ClientOnly>
    <StepBar :active="0" :items="[
-      { title: '看 PRD', description: '先明确页面、角色、Agent 编排、外部数据和导出范围' },
-      { title: '生成骨架', description: '让 AI 先产出首页、规划页、历史页、后台页骨架' },
-      { title: '监工迭代', description: '逐页验收、补接口、修结构化输出和任务状态' },
-      { title: '交付上线', description: '完成可演示、可运行、可继续开发的产品原型' }
+      { title: '需求分析', description: '阅读 PRD，明确页面、Agent 编排、输入输出结构' },
+      { title: '搭建骨架', description: '用 AI 生成首页、规划页、历史页、后台页骨架' },
+      { title: '迭代开发', description: '逐模块补充结构化输出、任务状态、历史管理' },
+      { title: '联调上线', description: '端到端跑通，部署并准备演示' }
    ]" />
  </ClientOnly>
 </div>

-## 这个项目到底在做什么？
+## 第一部分：需求分析

-这是一个旅行规划 Agent 平台：
+### 1.1 阅读 PRD

- 用户输入出发地、目的地、日期、预算和偏好
- 系统生成每日行程、预算拆分和建议
- 用户可以保存历史计划、再次生成、导出
- 管理员可以查看热门目的地、失败任务和反馈
+打开 PRD 文档，重点回答以下问题：

-## 开发过程怎么走？
+- 第一版是否只做单目的地？
+- 行程输出是否必须结构化？结构是什么？
+- 导出能力做多深？（分享链接 / PDF / 图片）
+- 后台统计和任务日志的范围是什么？

-### 1. 先看 PRD，不要上来就写代码
+::: warning
+如果以上问题没有明确答案，不要开始写代码。需求理解不清楚是导致返工的最常见原因。
+:::

-先确认：
-
- 第一版是否只做单目的地
- 行程输出是否必须结构化
- 导出能力做多深
- 后台统计和任务日志范围是否清楚
-
-### 2. 先让 AI 生成“骨架版”
-
-第一轮先生成：
-
- 首页
- 规划页
- 行程详情页
- 历史记录页
- 管理后台页
-
-### 3. 再进入“监工模式”
-
-你要重点盯这几件事：
-
- 输入表单字段是否和 PRD 一致
- 行程输出是否真的结构化
- 预算、节奏和每日活动是否合理
- 历史计划和重生成是否闭环
- 失败任务有没有被记录
-
-### 4. 最后做联调和上线
+### 1.2 确认系统架构

 ```mermaid
 flowchart TD
@@ -75,7 +78,11 @@ flowchart TD
  db --> admin["后台统计与日志"]
 ```

-## 怎么让 AI 帮你生成？
+## 第二部分：搭建项目骨架
+
+### 2.1 生成前端页面
+
+提示词参考：

 ```text
 请基于当前 PRD，帮我生成一个智能旅游规划 Agent 平台的前端骨架。
@@ -87,34 +94,71 @@ flowchart TD
 4. 风格要像现代 AI 产品
 ```

-## 怎么“监工”才有效？
+### 2.2 验证页面结构

-| 检查项 | 要看什么 |
-|------|------|
-| 页面是否对 | 页面数量、功能是否符合 PRD |
-| 接口是否对 | 规划、详情、历史、重生成是否闭环 |
-| 输出是否对 | 行程结果是不是结构化且可读 |
-| 数据是否对 | trip、itinerary、logs 是否一致 |
-| 演示是否对 | 是否能演示“输入 -> 生成 -> 保存 -> 再次生成” |
+逐项检查：

-## 最后的预期效果
+- [ ] 规划页的表单字段是否与 PRD 一致
+- [ ] 结果预览区域能展示结构化的行程数据
+- [ ] 历史记录页可以展示多条计划
+- [ ] 管理后台页可以展示统计数据

- 一套可运行的旅行规划 Agent 平台
- 一份同级 PRD 文档
- 首页、规划、详情、历史、后台五类页面
- Agent 编排、结构化输出、历史管理、后台统计
- README 和演示方案
+## 第三部分：迭代开发

-## 验收标准
+### 3.1 按模块推进

-| 维度 | 最低达标 |
-|------|------|
-| PRD 对齐 | 页面、功能、数据结构基本符合 PRD |
-| 产品闭环 | 规划、保存、历史、重生成可以跑通 |
-| 后台能力 | 任务统计和失败日志可以查看 |
-| 工程完整度 | 前端、后端、数据库、模型调用链路已接通 |
-| 展示能力 | 可以清楚演示“从 PRD 到成品”的过程 |
+1. **鉴权**：注册、登录
+2. **规划表单**：结构化输入（出发地、目的地、日期、预算、偏好）
+3. **Agent 编排**：接收输入 → 调用模型 → 解析结构化输出
+4. **结果展示**：行程按天展示、预算拆分、建议
+5. **历史管理**：保存计划、再次生成、导出
+6. **管理后台**：热门目的地、失败任务、用户反馈
+7. **任务状态**：生成中 / 成功 / 失败的状态管理和错误记录

-::: tip 🚀 完成后你会得到什么？
-你得到的不只是一个旅游聊天 Demo，而是一套带结构化输入、Agent 编排和任务管理的 AI 产品开发样例。
-:::
+### 3.2 模块自检
+
+| 检查项 | 验证方法 |
+|--------|----------|
+| 输入完整性 | 表单字段是否与 PRD 一致 |
+| 输出结构化 | 行程结果是不是结构化数据（而非一大段文字） |
+| 数据一致性 | trip、itinerary、logs 数据是否对得上 |
+| 闭环验证 | 是否能演示"输入 → 生成 → 保存 → 再次生成" |
+
+## 第四部分：联调与上线
+
+### 4.1 端到端测试
+
+至少验证以下场景：
+
+- 输入行程参数 → 生成每日行程 → 查看预算拆分 → 保存到历史
+- 从历史记录中再次生成行程
+- 管理员查看任务统计和失败日志
+
+## 交付物
+
+完成本项目后，你需要提交以下内容：
+
+- [ ] 可访问的线上演示链接
+- [ ] 源码仓库链接（含 README）
+- [ ] PRD 文档
+- [ ] 核心页面截图（规划页、行程详情页、历史记录页、管理后台）
+- [ ] 60 秒演示视频
+
+## 评分标准
+
+| 维度 | 基本要求 | 进阶要求 |
+|------|---------|---------|
+| PRD 对齐 | 页面、功能、数据结构基本符合 PRD | 能清晰说明设计决策 |
+| 产品闭环 | 规划 → 保存 → 历史 → 重生成可跑通 | 支持导出和分享 |
+| 输出质量 | 行程结果结构化且可读 | 预算拆分合理、建议有针对性 |
+| 后台能力 | 任务统计和失败日志可查看 | 有热门目的地分析 |
+| 工程完整度 | 前端、后端、数据库、模型调用链路已接通 | 任务状态管理完善，错误可追溯 |
+
+## 参考资料
+
+- [UI 设计](../../frontend/2.2-ui-design/)
+- [使用现代组件库更新你的界面](../../frontend/2.7-modern-component-library/)
+- [从数据库到 Supabase](../../backend/2.2-database-supabase/)
+- [大模型辅助编写接口代码与接口文档](../../backend/2.3-ai-interface-code/)
+- [Git 和 GitHub 工作流](../../backend/2.4-git-workflow/)
+- [如何部署 Web 应用](../../backend/2.5-zeabur-deployment/)