从零构建 AI 对话平台：原生前端实战指南

2. 样式美化与动画

界面是用户体验的关键。我们使用 Flexbox 布局配合渐变背景，并添加淡入动画提升交互质感。

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
}

.chat-container {
    width: 100%;
    max-width: 800px;
    height: 90vh;
    background: white;
    border-radius: 20px;
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.1);
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

/* 消息气泡动画 */
@keyframes fadeIn {
    from { opacity: 0; transform: translateY(10px); }
    to { opacity: 1; transform: translateY(0); }
}

.message {
    max-width: 80%;
    padding: 15px;
    border-radius: 18px;
    animation: fadeIn 0.3s ease-in;
    margin-bottom: 10px;
}

.user-message {
    align-self: flex-end;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: white;
    border-bottom-right-radius: 5px;
}

.bot-message {
    align-self: flex-start;
    background: #f0f2f5;
    color: #333;
    border-bottom-left-radius: 5px;
}

3. 交互逻辑实现

这是项目的核心部分。我们使用 ES6 Class 封装应用逻辑，处理事件绑定、消息渲染及安全转义。

class ChatApp {
    constructor() {
        this.chatMessages = document.getElementById('chatMessages');
        this.messageInput = document.getElementById('messageInput');
        this.sendButton = document.getElementById('sendButton');
        this.init();
    }

    init() {
        // 绑定发送事件
        this.sendButton.addEventListener('click', () => this.sendMessage());
        this.messageInput.addEventListener('keypress', (e) => {
            if (e.key === 'Enter') this.sendMessage();
        });

        // 绑定推荐问题点击事件
        const suggestedButtons = document.querySelectorAll('.suggested-btn');
        suggestedButtons.forEach(btn => {
            btn.addEventListener('click', (e) => {
                const question = e.target.dataset.question;
                this.sendSuggestedQuestion(question);
            });
        });
    }

    sendMessage() {
        const message = this.messageInput.value.trim();
        if (!message) return;

        this.addUserMessage(message);
        this.messageInput.value = '';

        // 模拟 AI 回复延迟
        setTimeout(() => {
            this.simulateAIResponse(message);
        }, 1000 + Math.random() * 2000);
    }

    addUserMessage(content) {
        const messageDiv = document.createElement('div');
        messageDiv.className = 'message user-message';
        const now = new Date();
        const timeString = `${now.getHours().toString().padStart(2, '0')}:${now.getMinutes().toString().padStart(2, '0')}`;
        
        messageDiv.innerHTML = `
            <div><p>${this.escapeHtml(content)}</p></div>
            <div class="time">${timeString}</div>
        `;
        this.chatMessages.appendChild(messageDiv);
        this.scrollToBottom();
    }

    addBotMessage(content) {
        const messageDiv = document.createElement('div');
        messageDiv.className = 'message bot-message';
        const now = new Date();
        const timeString = `${now.getHours().toString().padStart(2, '0')}:${now.getMinutes().toString().padStart(2, '0')}`;
        
        let formattedContent = this.escapeHtml(content);
        // 简单支持代码块高亮
        formattedContent = formattedContent.replace(/```([\s\S]*?)```/g, '<pre><code>$1</code></pre>');
        
        messageDiv.innerHTML = `
            <div><p>${formattedContent}</p></div>
            <div class="time">${timeString}</div>
        `;
        this.chatMessages.appendChild(messageDiv);
        this.scrollToBottom();
    }

    sendSuggestedQuestion(question) {
        this.messageInput.value = question;
        this.sendMessage();
    }

    simulateAIResponse(userMsg) {
        // 实际项目中这里应调用 API
        const response = `您刚才问了：${userMsg}。这是一个模拟回复。`;
        this.addBotMessage(response);
    }

    scrollToBottom() {
        this.chatMessages.scrollTop = this.chatMessages.scrollHeight;
    }

    escapeHtml(text) {
        if (typeof text !== 'string') return '';
        const map = {
            '&': '&amp;',
            '<': '&lt;',
            '>': '&gt;',
            '"': '&quot;',
            "'": '&#039;'
        };
        return text.replace(/[&<>"']/g, function(m) { return map[m]; });
    }
}

// 初始化应用
new ChatApp();

关键功能解析

安全性考虑

在处理用户输入时，必须防止 XSS 攻击。上面的 escapeHtml 方法将特殊字符转换为实体字符，确保内容仅作为文本显示而非执行脚本。

响应式适配

通过 CSS 中的 max-width 和 flex 布局，界面能自动适应不同屏幕尺寸，移动端体验同样流畅。

性能优化建议

• 消息懒加载：当历史消息过多时，只渲染可视区域内的节点。
• 虚拟滚动：对于超长列表，使用虚拟 DOM 技术减少重绘开销。

部署与扩展

本地运行

只需创建三个文件（index.html, style.css, script.js），直接在浏览器打开 index.html 即可查看效果。

在线部署

项目为纯静态资源，可轻松部署至 GitHub Pages、Vercel 或 Netlify 等静态托管服务。

后续扩展方向

• 集成真实的大模型 API 替换模拟回复。
• 增加语音输入和图片上传功能。
• 实现本地存储以保存历史对话。

总结

通过这个项目，我们实践了从 HTML 结构到 CSS 样式再到 JS 交互的全流程开发。这不仅展示了现代前端的核心概念，也为构建更复杂的 AI 应用打下了基础。希望你在掌握这些技术点后，能在此基础上进行更多创新。