企业官网建设流程全解析

1. 项目缘起：为什么我们需要“现代化”的AI聊天界面？

最近几年，AI聊天应用从实验室里的新奇玩具，变成了我们工作和生活中触手可及的工具。无论是集成在办公软件里的智能助手，还是独立的对话机器人，一个流畅、直观、高效的聊天界面，直接决定了用户是愿意持续使用，还是浅尝辄止后迅速离开。我参与过好几个从零到一的AI项目，发现很多团队会把90%的精力投入到后端模型、算法和API上，而前端界面往往被当作一个“附属品”，用最基础的框架草草了事。结果就是，一个强大的AI大脑，却配了一个反应迟钝、交互别扭的“身体”，用户体验大打折扣。

所以，当我们需要“从零构建”一个AI聊天界面时，这个“现代化”到底意味着什么？它绝不仅仅是把聊天框做得好看一点。结合我自己的踩坑经验，我认为一个现代化的AI聊天界面，核心是解决三个矛盾：AI响应的异步性与用户对即时反馈的期待之间的矛盾、非结构化对话流与结构化信息呈现之间的矛盾，以及复杂功能与简洁交互之间的矛盾。这次，我就以Vue 3技术栈为例，抛开那些花哨的UI库，从最本质的设计思想和开发实践入手，分享如何构建一个真正好用、耐用的AI聊天前端。

2. 设计先行：拆解一个AI聊天界面的核心模块

在动手写代码之前，我们必须先把产品形态想清楚。一个完整的AI聊天界面，远不止一个输入框加一个消息列表。我们需要像搭积木一样，把各个功能模块拆解出来。

2.1 会话管理：不止是历史记录

大多数初级实现会把聊天记录简单地存成一个数组。但现代化的聊天需要“会话”（Session）的概念。想象一下使用ChatGPT，你可以创建不同的对话，分别讨论工作、学习或娱乐。这背后就是会话管理。

设计要点：

• 会话列表侧边栏：这是一个常被忽略但极其重要的组件。它需要展示会话标题（可自动从首条消息生成或用户编辑）、最后活动时间、甚至会话的模型类型（如果支持多模型）。交互上，要支持创建、删除、重命名、搜索和固定常用会话。
• 会话状态持久化：用户刷新页面或下次打开时，当前的会话列表和每个会话内的历史消息必须能恢复。这里涉及到前端状态管理（如Pinia）与浏览器本地存储（LocalStorage/IndexedDB）或后端API的协同。对于消息量大的场景，IndexedDB是比LocalStorage更优的选择，因为它存储空间更大且支持异步操作。
• 会话上下文隔离：这是保证对话逻辑清晰的关键。A会话的聊天历史，绝不能泄露到B会话的上下文窗口中。在状态管理设计时，必须确保当前活动会话的ID是获取和提交消息的唯一依据。

2.2 消息流：处理AI的“思考”过程

消息列表是界面的心脏。AI对话的消息类型比人与人聊天复杂得多。

消息类型设计：

1. 用户消息：相对简单，包含文本、发送时间。可扩展支持附件（图片、文件）预览。
2. AI消息：这是核心难点。它不应该是一个静态文本块。
   • 流式输出：现代大模型普遍支持Server-Sent Events (SSE) 或 WebSocket 进行流式响应。前端需要逐词（chunk）接收并实时追加显示，营造“打字”效果。这能极大缓解用户等待的焦虑感。
   • 消息状态：需要明确标识thinking（等待中）、streaming（流式接收中）、finished（完成）、error（出错）等状态，并配合不同的UI指示器（如闪烁的光标、加载动画、错误图标）。
   • 内容渲染：AI的回复很可能是Markdown格式的。我们需要集成一个可靠的Markdown渲染器（如marked、markdown-it），并确保代码高亮、表格、数学公式等都能正确展示。同时，必须做好XSS防护，对原始Markdown文本进行转义或使用安全的渲染库。

2.3 输入区域：从简单文本框到多功能交互中心

输入框不能只是一个<textarea>。它需要成为用户与AI交互的智能门户。

进阶功能考量：

• 多模态输入：支持粘贴图片、拖拽上传文件。上传后，需要在输入框上方生成预览缩略图，并将文件转换为Base64或先上传到文件服务器获取URL，最终以特定的消息格式（如[image](url)）提交给后端。
• 提示词快捷操作：可以设计一个“/”命令触发菜单，快速插入预设提示词（如“/翻译”、“/总结”），提升效率。
• 文本编辑体验：支持快捷键（如Ctrl+Enter发送）、自适应高度、@功能（如果涉及知识库引用）等。
• 停止生成按钮：在AI流式响应期间，输入框区域应变为一个显眼的“停止生成”按钮，允许用户中断耗时或不满意的回答。

2.4 辅助功能区：提升效率的关键

这些功能围绕主聊天区，提供额外价值。

• 消息操作：对每一条AI消息，提供“复制”、“重新生成”、“引用回复”等操作按钮。
• 模型切换器：如果后端支持多个模型（如GPT-4、Claude、本地模型），需要一个便捷的切换入口，并清晰显示当前使用的模型及其特性（如上下文长度、费用）。
• 上下文管理：高级功能，允许用户手动调整纳入对话上下文的过往消息范围，或一键清空上下文。

3. 技术选型与架构：用Vue 3搭建坚实底座

明确了设计模块，我们来选择实现的技术栈。Vue 3的响应式系统和组合式API非常适合构建此类复杂的交互应用。

3.1 前端框架与核心库

• Vue 3 +<script setup>+ TypeScript：这是我们的基础。TypeScript能提供良好的类型提示，减少运行时错误，尤其是在处理复杂的消息对象和状态时。<script setup>语法让代码更简洁。
• 状态管理：Pinia：Vuex的官方继任者，更简单、更符合组合式API思维。我们将用Pinia来管理全局状态，如：
  • sessionStore: 管理所有会话列表、当前活动会话ID。
  • chatStore: 管理当前会话的消息列表、消息加载状态。
  • uiStore: 管理侧边栏折叠状态、主题模式（亮/暗）、设置项等。
• UI组件库：按需引入 or 自研：对于快速原型，可以使用Element Plus、Ant Design Vue等。但对于追求极致定制和包体积控制的项目，我建议基于headless UI库（如Radix Vue）或完全自研。AI聊天界面交互特殊，很多现成组件并不完全适用。
• 网络请求：Axios + 拦截器：用于常规API调用。对于流式响应，我们需要使用EventSource（用于SSE）或WebSocket。这里重点说SSE，因为它更简单、单向（服务器推送）。我们可以封装一个useSSE组合式函数。
• Markdown渲染：markdown-it + highlight.js：markdown-it插件丰富，性能好。配合highlight.js实现代码高亮。务必注意安全，配置html: false并启用合适的插件链来净化输出。

3.2 项目结构设计

一个清晰的结构是长期维护的保障。我推荐如下结构：

src/ ├── assets/ # 静态资源 ├── components/ # 通用组件 │ ├── chat/ # 聊天相关组件（MessageBubble, ChatInput, SessionSidebar...） │ └── ui/ # 基础UI组件（Button, Modal...） ├── composables/ # 组合式函数（useSSE, useChat, useSession...） ├── stores/ # Pinia store定义 ├── types/ # TypeScript类型定义 ├── utils/ # 工具函数（markdown解析器、时间格式化、存储工具） ├── views/ # 页面组件（ChatView.vue） └── App.vue

4. 核心实现详解：流式聊天与状态管理

让我们深入到最核心的代码部分。假设后端提供了一个POST /chat/completions接口用于普通聊天，和一个GET /chat/completions/stream接口用于流式输出。

4.1 封装流式请求（SSE）

在composables/useSSE.ts中，我们创建一个健壮的SSE连接管理器。

import { ref, onUnmounted } from 'vue'; export function useSSE(url: string, options: { onMessage: (data: string) => void; onError?: (error: Event) => void; }) { const eventSource = ref<EventSource | null>(null); const isConnecting = ref(false); const error = ref<Event | null>(null); const connect = (params?: Record<string, string>) => { if (eventSource.value) { close(); // 连接前先关闭旧的 } isConnecting.value = true; error.value = null; const queryString = params ? `?${new URLSearchParams(params)}` : ''; const fullUrl = `${url}${queryString}`; const es = new EventSource(fullUrl); eventSource.value = es; es.onopen = () => { console.log('SSE连接已建立'); isConnecting.value = false; }; es.onmessage = (event) => { // 假设后端返回的数据格式为：data: {"content": "单词", "done": false} try { if (event.data.startsWith('data: ')) { const jsonStr = event.data.replace('data: ', ''); const parsedData = JSON.parse(jsonStr); options.onMessage(parsedData.content); // 将流式内容片段传递给回调 if (parsedData.done) { close(); // 流式结束，关闭连接 } } } catch (e) { console.error('解析SSE消息失败:', e, event.data); } }; es.onerror = (err) => { console.error('SSE连接错误:', err); error.value = err; isConnecting.value = false; close(); options.onError?.(err); }; }; const close = () => { if (eventSource.value) { eventSource.value.close(); eventSource.value = null; } }; // 组件卸载时自动关闭连接 onUnmounted(() => { close(); }); return { connect, close, isConnecting, error }; }

4.2 设计聊天状态（Pinia Store）

在stores/chatStore.ts中，我们管理当前会话的消息状态。

import { defineStore } from 'pinia'; import { ref, computed } from 'vue'; import type { Message } from '@/types/chat'; export const useChatStore = defineStore('chat', () => { // 当前会话的消息列表 const messages = ref<Message[]>([]); // 当前是否正在接收流式响应 const isStreaming = ref(false); // 当前是否正在加载历史消息 const isLoadingHistory = ref(false); // 获取最后一条消息（通常是用于追加流式内容） const lastMessage = computed(() => messages.value[messages.value.length - 1]); // 添加新消息 const addMessage = (msg: Message) => { messages.value.push(msg); }; // 更新最后一条消息的内容（用于流式追加） const updateLastMessageContent = (contentChunk: string) => { const lastMsg = lastMessage.value; if (lastMsg && lastMsg.role === 'assistant') { lastMsg.content += contentChunk; // 注意：这里直接修改了响应式对象，在Vue 3中是可响应的 } }; // 设置最后一条消息的状态（如从streaming改为finished） const setLastMessageStatus = (status: Message['status']) => { const lastMsg = lastMessage.value; if (lastMsg) { lastMsg.status = status; } }; // 清空当前会话消息 const clearMessages = () => { messages.value = []; }; // 从服务器加载历史消息（假设有接口） const loadHistory = async (sessionId: string) => { isLoadingHistory.value = true; try { const response = await api.get(`/sessions/${sessionId}/messages`); messages.value = response.data; } catch (error) { console.error('加载历史消息失败:', error); } finally { isLoadingHistory.value = false; } }; return { messages, isStreaming, isLoadingHistory, lastMessage, addMessage, updateLastMessageContent, setLastMessageStatus, clearMessages, loadHistory, }; });

4.3 实现聊天组件与逻辑

在components/chat/ChatWindow.vue中，我们将所有部分串联起来。

<template> <div class="chat-container"> <!-- 消息列表区域 --> <div class="message-list"> <MessageBubble v-for="msg in chatStore.messages" :key="msg.id" :message="msg" @regenerate="handleRegenerate" /> <div v-if="chatStore.isLoadingHistory" class="loading">加载历史消息中...</div> </div> <!-- 输入区域 --> <ChatInput :disabled="chatStore.isStreaming" @send="handleSendMessage" @stop="handleStopGeneration" /> </div> </template> <script setup lang="ts"> import { ref, onMounted } from 'vue'; import { useChatStore } from '@/stores/chatStore'; import { useSessionStore } from '@/stores/sessionStore'; import { useSSE } from '@/composables/useSSE'; import MessageBubble from './MessageBubble.vue'; import ChatInput from './ChatInput.vue'; import { sendMessageApi } from '@/api/chat'; const chatStore = useChatStore(); const sessionStore = useSessionStore(); // 使用封装的SSE composable const { connect: connectStream, close: closeStream } = useSSE('/api/chat/completions/stream', { onMessage: (chunk) => { // 收到流式片段，追加到最后一条AI消息 chatStore.updateLastMessageContent(chunk); }, onError: (err) => { console.error('流式连接错误:', err); chatStore.setLastMessageStatus('error'); chatStore.isStreaming = false; } }); const handleSendMessage = async (content: string) => { // 1. 添加用户消息到列表 const userMessage: Message = { id: generateId(), role: 'user', content, timestamp: new Date(), status: 'finished' }; chatStore.addMessage(userMessage); // 2. 添加一个初始状态的AI消息占位符 const aiMessage: Message = { id: generateId(), role: 'assistant', content: '', timestamp: new Date(), status: 'streaming' // 初始状态为流式接收中 }; chatStore.addMessage(aiMessage); chatStore.isStreaming = true; // 3. 启动流式连接，将当前会话ID和用户消息作为参数 connectStream({ session_id: sessionStore.activeSessionId, message: content }); // 注意：这里也可以选择使用普通的POST请求，然后由后端返回一个Stream ID，前端再根据这个ID去连接特定的SSE流。 // 上述简化示例是直接将用户消息作为查询参数传递。 }; const handleStopGeneration = () => { // 关闭SSE连接 closeStream(); // 更新最后一条消息状态为完成（或被中断） chatStore.setLastMessageStatus('finished'); chatStore.isStreaming = false; }; const handleRegenerate = async (messageId: string) => { // 重新生成逻辑：找到该消息之前的所有消息作为上下文，重新发送请求 // 实现略... }; // 生成简单ID const generateId = () => Date.now().toString() + Math.random().toString(36).substr(2, 9); // 当会话切换时，加载对应的历史消息 onMounted(() => { if (sessionStore.activeSessionId) { chatStore.loadHistory(sessionStore.activeSessionId); } }); </script>

5. 高级功能与性能优化实践

基础功能跑通后，我们需要关注那些能让体验从“可用”到“优秀”的细节。

5.1 消息虚拟列表与性能

当单次会话历史达到几百甚至上千条时，渲染所有DOM节点会严重拖慢页面。虚拟列表是必须的。我们可以使用vue-virtual-scroller或@tanstack/vue-virtual这类库。

核心思路是只渲染可视区域及其附近的消息项。在MessageList组件中应用虚拟列表后，即使有上万条消息，也能保持流畅滚动。关键在于，每条消息组件的高度最好是固定的，或者能提前计算，这样虚拟滚动的计算才准确。

5.2 上下文长度管理与Token计数

大模型有上下文窗口限制（如4K、8K、128K Token）。我们需要在UI上给用户清晰的感知。

• 实时Token估算：在输入框下方显示当前已输入文字的估算Token数。可以使用类似tiktoken的浏览器库（但体积大），或用一个简单的经验公式：Token数 ≈ 汉字数 + 英文单词数 * 1.3进行粗略估算。
• 上下文消耗可视化：在侧边栏或顶部栏，用一个进度条显示当前会话已使用的上下文比例。颜色可以从绿色（安全）渐变到红色（将满）。这需要后端在每次回复后返回当前会话的累计Token消耗。
• 智能上下文截断：当接近限制时，提供“自动清理最早消息”或“手动选择保留范围”的选项。更高级的实现可以集成向量数据库，进行基于语义的摘要或检索，而非简单的截断。

5.3 处理富媒体与文件上传

让AI“看懂”图片或文档是现代聊天界面的趋势。

• 前端处理：使用<input type="file">或拖放库接收文件。用FileReader读取图片为Base64，并生成预览。对于大文件，应先调用单独的上传接口，获取一个可访问的URL，再将URL传给聊天接口。
• 消息结构扩展：我们的Message类型需要支持多部分内容。

  interface MessageContent { type: 'text' | 'image_url'; text?: string; image_url?: { url: string }; // 可以是Base64 data URL 或 远程URL } interface Message { id: string; role: 'user' | 'assistant'; content: MessageContent[]; // 从string变为数组 // ...其他字段 }

• 渲染适配：MessageBubble组件需要能遍历content数组，根据type分别渲染文本或<img>标签。

5.4 错误处理与用户体验

网络请求、服务器错误、模型生成长度限制等都会出错。粗暴的alert会毁掉体验。

• 优雅的错误提示：在消息气泡内，用特定的样式（如红色边框、警告图标）展示错误消息，并附带“重试”按钮。全局可以使用一个轻量的Toast通知来提示网络连接问题。
• 重试机制：对于可重试的错误（如网络超时），提供一键重试。重试时最好能携带相同的请求参数。
• 加载状态：除了消息本身的thinking状态，在请求发送后、流式开始前，可以有一个全局的小型加载指示器，告知用户请求已发出。

6. 样式与交互细节：打磨产品质感

视觉和动效是“现代化”的直接体现。

• 暗色/亮色主题：使用CSS变量定义颜色体系，通过切换html标签上的>