ChatGPT Web 对话框消息实现：子路由切换、消息透传与对话面板设计——《ChatGPT 微服务应用体系构建》chatgpt-web 第5节实战

• 文档
• 教程
• 后端

本文是《ChatGPT 微服务应用体系构建》系列中chatgpt-web前端工程第5节的实战指南，聚焦"对话框消息"面板的完整落地：在上一节对话框列表的基础上，打通"点击对话列表元素 → 子路由跳转 → 消息透传 → 右侧渲染对应对话消息与输入框"的完整链路。读者将掌握 React/TypeScript 下子路由（子页面）的配置与跳转、跨组件消息透传（路由参数）、对话面板界面设计与实现，以及如何用"目标结果导向"的思路推进一个复杂页面的开发。

一、本章诉求：从"列表"到"消息面板"的承上启下

在上一节 第4节：对话框列表 中，我们已经完成了对话框列表窗体：以dialog-*为首的一系列组件实现了"对话列表"与"列表元素"，并在点击"按钮 +"时创建新的会话。此时整个页面已经具备微信式侧边栏 + 对话列表的形态，但右侧还缺少真正的内容承载。

本节要解决的核心诉求非常明确：

1. 在已有的对话框列表基础上，实现对话框消息面板——点击对话框列表中的某个元素（如【心理咨询、面试官】）后，右侧面板应切换到该对话对应的消息记录；
2. 增加消息输入能力——面板底部需要有一个输入框，用于后续输入对话内容；
3. 保持纯前端实现——截至本节，所有操作仍不与服务端关联，对话数据、消息数据都只在前端处理，为后续第8节：流式接口对接预留前端侧的完整骨架。

在学习本章之前，可以带着两个问题驱动思考：

• 对话框消息是怎么和对话框元素关联上的？——每个对话应拥有唯一 ID，消息集合以该 ID 为键建立关联；
• 点击列表元素时，怎么切换到对应的聊天对话框消息？——这需要子路由（子页面）机制 + 消息透传来完成。

这正是本节"子路由设置、页面跳转、消息透传、界面设计和实现"四个重点的全部内涵。

二、目标效果与整体设计思路

2.1 目标效果

在完成了对话框消息之后，整个页面又完善了不少：左侧仍然是对话列表，右侧则呈现当前选中对话的消息面板，包括消息气泡展示区域和底部输入框。测试验证时，可以点击绿色的创建按钮（按钮 +）新建对话；每个对话会生成一个对应的 ID，这个 ID 串联起对话框消息。当点击各个对话列表的元素（如【心理咨询、面试官】）时，右侧会切换到对应的对话消息上。

2.2 界面结构：左侧列表 + 右侧面板

整个页面以 PC 端微信的界面结构为参考（系列课程在第2节：工具栏面板中已确立该设计基调）：

2.3 代码改动范围

本节工程改动以dialog文件下的内容为主，用来实现整个对话框消息部分；同时因为引入了页面的切换（子路由），home.tsx、chat.tsx也有对应少量代码的改动：

• dialog目录（新增/完善）：对话消息面板、消息元素、输入框等组件；
• pages/home/home.tsx：承载对话列表 + 对话消息面板的页面容器，处理点击列表元素时的路由跳转；
• pages/chat/chat.tsx：对话消息子页面，接收透传的消息参数并渲染对应对话内容。

该工程由 WebStorm 的 Next.js TypeScript 模板创建，包含src目录结构，入口为page.tsx、layout.tsx，业务页面从home.tsx开始扩展，详见第1节：Web页面工程初始化。

三、核心机制一：子路由设置与页面跳转

3.1 为什么需要子路由

在第2节：工具栏面板中我们已经通过 TypeScript 提供的方法进行了界面操作地址路由：点击侧边栏的"聊天""角色"按钮，右侧面板在加载不同的div模块间切换。本节进一步把"对话消息"独立成一个子页面（chat子路由），原因在于：

• 对话消息面板拥有独立的状态（当前会话 ID、消息列表、输入内容），独立成页便于聚焦维护；
• 点击对话列表元素 → 跳转到chat子路由 → 按会话 ID 渲染消息，职责链路清晰，与后续第7节：对话角色设定中"点击角色创建聊天信息到对话框"、第8节：流式接口对接中"把应答结果依次填充到消息记录"的扩展方向完全吻合。

3.2 跳转与透传的实现思路

页面跳转采用 React Route 路由子页面开发技术（这也是项目简历技能清单中明确列出的一项：技能清单）。核心链路为：

1. home.tsx中监听对话列表元素的点击事件；
2. 通过路由跳转携带对话 ID 参数进入chat.tsx子页面；
3. chat.tsx从路由参数中解析对话 ID，作为"消息透传"的载体；
4. 依据对话 ID 到前端消息数据源中取回该对话的消息记录并渲染；
5. 面板底部输入框接收用户输入，暂存于前端状态中（本节不调用服务端）。

其中"消息透传"正是本节的关键设计点：对话框元素与消息面板之间通过"会话 ID"这个唯一标识建立关联，ID 在路由跳转时作为参数传递，消息面板据此拉取对应数据。这也呼应了第4节中"与谁在聊天、聊天了多少条、什么时候结束的最后一次对话"这些信息建模的延续。

四、核心机制二：对话与消息的关联建模

4.1 对话 ID 串联消息

每个对话拥有一个唯一 ID，该 ID 串联对话框消息。数据结构上可以抽象为：

• 对话（Dialog/Conversation）：id（唯一标识）、name（如心理咨询、面试官）、最后一条消息摘要、时间等信息，用于左侧列表展示；
• 消息（Message）：dialogId（关联的对话 ID）、发送方向（用户/助手）、内容文本、时间等信息，用于右侧面板渲染。

当用户点击列表元素时，通过该元素的 ID 找到对应对话，再以dialogId关联到消息集合。这套"以 ID 为键、一对一/一对多关联"的前端数据建模，为第6节：完善对话处理中"把对话列表和消息存储到浏览器（localStorage/zustand persist）"、以及后续扩展为服务端存储都留好了接口。

4.2 创建对话与切换对话

目标效果中明确了两类交互：

创建对话的入口在上一节（第4节）已经实现，本节在其基础上补全右侧消息面板的响应；切换对话则完全由本节的子路由 + 透传机制承担。

五、界面设计与实现要点

5.1 对话消息面板（dialog 模块）

dialog文件下内容负责整个对话框消息部分，包括：

• 消息展示区：以气泡列表形式渲染当前对话的历史消息，区分用户消息与助手消息的样式（左/右对齐、不同底色）；
• 输入框区域：位于面板底部，提供文本输入，作为后续对话内容的入口；
• 消息元素组件：单个消息的展示单元，承载内容文本与基础样式。

界面设计延续系列课程的 PC 微信风格，左侧列表 + 右侧消息面板的经典双栏布局，使"对话列表 → 消息面板"的视觉引导自然流畅。

5.2 home.tsx 与 chat.tsx 的联动

• pages/home/home.tsx：页面容器。这里承载了对话列表与消息面板两大区域的布局，同时负责"点击列表元素 → 跳转 chat 子路由"的事件处理；
• pages/chat/chat.tsx：对话消息子页面。接收透传的对话 ID 参数，拉取并渲染对应消息，绑定输入框状态。

两者的联动构成了完整的"页面跳转 + 消息透传"闭环，后续第6节：完善对话处理中扩展的chat-store.ts（对话列表与对话信息的存储）、markdown.tsx（MD 渲染）、输入框上方控制栏（上下文控制与模型选择）都是在这一基础上叠加的。

六、本节在系列课程中的位置与延伸

本节处于chatgpt-web前端的承上启下位置：

• 承上：基于第4节：对话框列表的列表能力，补全右侧消息面板，形成完整可交互的前端界面雏形；
• 启下：
  • 第6节：完善对话处理在"消息发送和展现"基础上，将对话列表与消息存入浏览器（减少对服务器的调用）、扩展 Markdown 渲染 ChatGPT 返回的 MD 格式数据（尤其是代码块）、完善输入框上方控制栏（模型选择、上下文控制参数透传至后端接口）；
  • 第7节：对话角色设定将角色（Java 面试官、文案写手、心灵导师等）预设为好友，点击对话时创建聊天信息到对话框中，复用本节的对话创建与跳转机制；
  • 第8节：流式接口对接通过跨域处理、fetch 调用接口、ReadableStream 流式数据填充，把服务端流式应答以打字机效果渲染进本节搭建的消息面板中；
  • 第9节：公众号扫码登录在对话信息必要位置加入权限拦截校验。

本节完成后，读者应能够在自己的 Next.js + TypeScript 工程中独立实现"列表 → 子路由 → 消息面板"的对话界面，并清楚理解：对话 ID 是串联列表与消息的纽带，子路由跳转与参数透传是切换对话的通道，消息面板则是后续一切对话交互（存储、渲染、流式填充、权限拦截）的载体。

附：相关章节与仓库路径

• 本节前置：第4节：对话框列表
• 本节延伸：第6节：完善对话处理、第7节：对话角色设定、第8节：流式接口对接、第9节：公众号扫码登录
• 工程初始化与框架说明：第1节：Web页面工程初始化、第2节：工具栏面板、第3节：按钮定义与事件实现
• 项目综述与技能清单：项目综述、面试技能与简历汇总

• 文档
• 教程
• 后端