Vue3 流式 AI 聊天框组件｜支持联网搜索 / 虚拟列表 / 本地存储

项目简介

基于 Vue3 开发的高性能 AI 聊天界面组件，实现了类 ChatGPT 的流式打字效果，同时内置虚拟列表优化、联网搜索、聊天记录持久化、响应式适配等实用功能，可直接对接大模型 API 快速落地，适配前后端分离项目的对话场景。

核心功能

1. 流式响应渲染：支持大模型 SSE 接口对接，实现逐字输出的打字机效果，告别等待卡顿
2. 虚拟列表优化：长对话场景下仅渲染可视区域，大幅提升页面滚动性能，避免 DOM 过多导致的卡顿
3. 联网搜索增强：内置联网开关，开启后自动追加实时联网提示词，让 AI 获取最新信息，回答更精准
4. 聊天记录持久化：对话自动保存到本地 localStorage，刷新页面不丢失，支持一键清空重置
5. 多模型切换：支持 glm-4-flash/glm-4v/glm-5.1 等多模型切换，适配不同需求场景
6. 响应式适配：完美适配 PC / 移动端布局，输入框自适应高度，聊天气泡区分用户 / AI 样式
7. 实用交互优化：消息一键复制、Enter 发送 / Ctrl+Enter 换行防抖、加载状态禁用重复请求

技术栈

• 前端框架：Vue3（Composition API）
• 核心优化：虚拟列表、防抖节流、SSE 流式解析
• 存储方案：localStorage 本地持久化
• 适配兼容：响应式布局、移动端适配
• 额外支持：API 对接封装、错误捕获与提示

项目亮点

✅ 性能优化：虚拟列表避免长列表 DOM 冗余，滚动丝滑不卡顿

✅ 体验友好：加载状态、错误提示、一键复制等细节交互完善

✅ 开箱即用：组件化设计，可直接嵌入现有 Vue 项目快速对接大模型

✅ 可扩展性强：支持多模型、联网开关、记忆长度控制等扩展配置