本篇将系统性介绍我们在项目中实现的前端 AI 聊天界面，基于 Vue3 组合式 API 和 TypeScript 构建，结合 Axios 请求后端接口，实现了多轮对话、会话管理、消息渲染、Markdown 支持等完整功能。

所展示的这份前端页面文件不仅仅是一个普通的“对话框”，更是前后端联动、响应式设计、用户体验优化等多个方面的集中体现。

---

一、页面结构与布局设计

该页面整体采用 <template> + <script setup> + <style scoped> 的 Vue 单文件组件结构（SFC），模块划分清晰，职责明确：

• 左侧为会话管理区（.session-list）：列出当前用户的所有历史会话，支持切换与新建；

• 右侧为聊天展示区（.chat-container）：展示选中会话中的全部消息记录，并附带输入框供用户发送新消息。

布局上采用 flex 布局进行横向划分，使聊天界面在大屏下具有良好的信息密度和可读性。CSS 使用 scoped 限定范围，避免样式泄露，同时对 Markdown、代码块、引用内容等做了美化处理。

聊天容器还使用了自定义背景图，使界面更加美观，与传统单色背景形成差异化。

---

二、会话管理逻辑（左侧）

1. 会话列表加载

在组件挂载时（onMounted），首先调用 loadSessions() 方法，从后端接口拉取当前用户的会话数据列表：

• 如果列表为空，则自动调用 createSession() 新建一个空会话；

• 如果有历史会话，默认选中第一个并加载其历史消息。

这一设计既提升了首次进入页面的响应体验，也确保了“始终有一个可用会话”。

2. 会话切换与高亮

通过点击左侧某一会话项触发 switchSession(session.id) 方法，自动切换当前聊天上下文，同时请求该会话的历史消息。

当前选中会话通过 currentSessionId 与 active class 绑定，视觉上自动高亮显示。

3. 新建会话流程

点击“新建会话”按钮将调用 createSession() 方法：

• 首先校验用户是否登录；

• 然后向后端发送 POST 请求创建新会话，默认标题为“新会话”；

• 成功后刷新列表并自动切换至新创建的会话。

这一逻辑配合后端的自动会话管理机制，确保用户始终能从零开始一场新对话。

---

三、消息发送与回复逻辑（右侧）

1. 用户消息输入与提交

用户在输入框中输入内容后，点击“发送”按钮或按下 Enter 键会触发 sendMessage() 方法：

• 首先检查当前是否选中了会话；

• 然后校验输入内容是否为空；

• 构造一条用户消息并推入 messages 数组用于即时展示；

• 同时调用 /chat 接口将用户输入发送给后端模型。

用户的每一次输入都会保存在当前会话上下文中，用于构造多轮对话的上下文信息。

2. 自动设置会话标题

为了让用户在多会话中更好地区分，每个会话第一次收到用户输入时，会自动将输入内容的前 10 个字符设置为该会话的标题，并更新到后端及本地 sessions 列表中。这一设计大大增强了界面实用性。

3. 模型回复处理

接收到模型回复后，会将其内容交由 processModelResponse() 处理函数进行格式化：

• 提取并美化 <think> 标签中的内容，转换为 <blockquote> 以突出展示；

• 使用 marked 将内容解析为 HTML，实现 Markdown 渲染支持；

• 最终将结果作为 AI 的一条消息添加到对话框中。

若请求失败或模型无响应，系统会显示错误提示信息，并回显一个默认“抱歉”回复，保障界面稳定性。

---

四、消息展示与滚动体验优化

1. 多轮消息展示

所有消息数据保存在响应式数组 messages 中，通过 v-for 动态渲染出消息记录。每条消息分为三部分结构：

• 头像区域：根据角色显示用户头像或 AI 头像；

• 气泡文本：支持代码高亮、引用框、段落结构等；

• 自定义样式：区分用户消息和 AI 消息的气泡样式与颜色。

通过判断 message.role 绑定不同 class，实现了用户消息右对齐、AI 消息左对齐的布局规范。

2. 智能滚动与性能保护

为了保证聊天窗口能自动滚动到底部，同时避免页面滚动性能问题，设计了一个 scrollToBottom() 方法并做了多重优化：

• 使用了 debounce 函数防抖控制频率；

• 采用 requestAnimationFrame 确保在下一帧执行滚动操作；

• 检查当前是否已在底部，避免无效滚动；

• 监听并抑制 ResizeObserver loop limit exceeded 警告，提升开发体验。

这一设计在移动端和桌面端均能保持良好的滚动行为，特别适合 AI 多轮问答等对话密集型界面。