青简问对全攻略（二）：利用前端三件套设计交互UI+实现聊天消息存储

前情提要：从"毛坯房"到"精装修"的AI对话系统进化史

在上一篇文章中，我们完成了一个能跑能聊的"毛坯房"版本：

1. ​极简三件套：用纯HTML+CSS+JavaScript搭建骨架，通过fetch直接调用DeepSeek API实现古人对话
2. ​角色扮演秘籍：通过提示词工程（如"你现在是李白，要狂放不羁"）让AI瞬间穿越千年
3. ​暴力开发法：无需训练模型/购买服务器，GitHub Pages一键部署的"丐版"解决方案

但第一版也暴露了三大"劝退点"：

• ​UI像出土文物：聊天界面堪比DOS命令行，连发送按钮都像用甲骨文刻的
• ​功能缺胳膊少腿：没有对话历史保存，每次刷新都像AI得了健忘症
• ​Key裸奔风险：API密钥直接写在前端代码，黑客看了都想来送"温暖"（敬请期待）

现在，我们要给这个AI对话系统来次全面整容！​ 第二篇将带来：

🔮 ​视觉魔法：对话气泡动画+角色头像+背景图片，让虚拟人物从文字变成"会动的玩意"
📦 ​记忆宫殿：localStorage存储对话记录，告别"七秒记忆鱼"式聊天

首先，向大家展示目标实现后的聊天界面

是不是很让人心动了，看着这么牛逼的帅哥，你一定想跟他聊上两句

话不多说，进入正题

💬 ​聊天气泡代码详解

BaseCharacter 类中的 displayMessage 方法是聊天气泡的核心实现，负责将用户和AI的消息渲染成带样式、动画、重说按钮的对话气泡。以下是关键逻辑：

​1. 气泡生成流程 (displayMessage 方法)

displayMessage(message, sender, isRephrase = false) {
    const chatContainer = document.getElementById('chat-container');
    
    // 1️⃣ 半屏模式设置（渐隐效果）
    if (localStorage.getItem('halfScreen') === 'true') {
        chatContainer.style.maskImage = 'linear-gradient(to bottom, transparent 0%, black 20px, black 100%)';
    }

    // 2️⃣ 创建气泡容器
    const messageContainer = document.createElement('div');
    messageContainer.classList.add('message-container');

    // 3️⃣ 创建气泡元素
    const messageElement = document.createElement('div');
    messageElement.classList.add('message', `${sender}-message`); // 区分用户/AI

    // 4️⃣ 处理特殊符号（括号、星号变半透明）
    const processedMessage = message
        .replace(/（([^）]*)）|$([^)]*)$/g, '<span style="opacity:0.6">$&</span>')
        .replace(/\*([^*]+)\*/g, '<span style="opacity:0.6">（$1）</span>');

    messageElement.innerHTML = processedMessage;
    messageContainer.appendChild(messageElement);

    // 5️⃣ 如果是AI消息，添加"重说"按钮
    if (sender === 'bot') {
        this.addRephraseButton(messageContainer);
    }

    // 6️⃣ 渲染到页面并自动滚动
    chatContainer.appendChild(messageContainer);
    chatContainer.scrollTop = chatContainer.scrollHeight;
}

​2. 核心功能点

​📌 样式区分

• ​用户消息：user-message 类（默认右对齐，浅色背景）
• ​AI消息：bot-message 类（默认左对齐，深色背景）
• ​半透明标注：括号 （） 或星号 * * 内容会自动降低透明度（用于动作/语气说明）

​📌 动态效果

• ​半屏模式：
  启用后聊天框高度限制为 50vh，底部添加渐隐遮罩​（mask-image），营造卷轴展开效果。（敬请期待）

​📌 交互功能

• ​重说按钮​（仅AI消息）：
  通过 addRephraseButton 方法动态添加按钮，点击后触发 handleRephrase 重新生成回答。

  addRephraseButton(container) {
      const btn = document.createElement('button');
      btn.textContent = '重说';
      btn.onclick = (e) => {
          e.stopPropagation();
          this.handleRephrase(); // 删除当前消息并重新请求AI
      };
      container.appendChild(btn);
  }

​3. CSS 样式关键点（需配合HTML）​

假设样式文件中定义了以下规则：

/* 气泡基础样式 */
.message-container {
    margin: 10px;
    animation: fadeIn 0.3s ease; /* 淡入动画 */
}

/* 用户气泡（右对齐） */
.user-message {
    background: #e3f2fd;
    border-radius: 18px 18px 0 18px;
    padding: 12px;
    margin-left: auto;
    max-width: 80%;
}

/* AI气泡（左对齐） */
.bot-message {
    background: #f5f5f5;
    border-radius: 18px 18px 18px 0;
    padding: 12px;
    max-width: 80%;
}

/* 重说按钮 */
.rephrase-btn {
    background: rgba(0, 123, 255, 0.1);
    border: 1px solid #007bff;
    border-radius: 4px;
    padding: 2px 8px;
    font-size: 12px;
    margin-top: 5px;
}

🎨 ​总结：气泡设计的核心思想

这段代码通过 ​动态DOM操作 + 语义化CSS 实现了：

• ​视觉区分：用户/AI消息左右对立
• ​沉浸感：半透明标注、渐隐滚动、重说功能
• ​可扩展性：轻松新增气泡类型（如系统提示、引用回复）

如果需要更花哨的效果（比如飘落花瓣动画），可以在 message-container 上追加动态类名！

💾 ​对话历史保存功能详解

BaseCharacter 类通过 ​本地存储（localStorage）​ 实现了完整的对话历史保存功能，确保用户刷新页面后仍能恢复之前的对话。以下是核心实现逻辑：

​1. 历史记录存储机制

📌 ​保存对话 (sendMessage 方法)

每次AI回复后，会将当前对话记录保存到 localStorage：

// 在sendMessage方法中：
this.messageHistory.push({ role: "assistant", content: botResponse });
localStorage.setItem(`chatHistory_${this.characterName}`, JSON.stringify(this.messageHistory));

• ​键名规则：chatHistory_角色名（如 chatHistory_李白）
• ​数据结构：数组格式，每条消息包含 role（user/assistant）和 content

📌 ​加载历史 (loadHistory 方法)

初始化时自动加载历史记录：

loadHistory() {
    const savedHistory = localStorage.getItem(`chatHistory_${this.characterName}`);
    if (savedHistory) {
        this.messageHistory = JSON.parse(savedHistory);
        // 重新渲染每条消息
        this.messageHistory.forEach(msg => {
            if (msg.role === 'user') this.displayMessage(msg.content, 'user');
            else if (msg.role === 'assistant') this.displayMessage(msg.content, 'bot');
        });
    } else {
        this.sendWelcomeMessage(); // 首次对话发送欢迎语
    }
}

​2. 数据结构示例

实际存储的 localStorage 数据示例（键：chatHistory_李白）：

[
    {
        "role": "system",
        "content": "你正在与张三(男)对话。用户人设: 程序员。请以李白的身份和口吻对话..."
    },
    {
        "role": "user",
        "content": "李白兄，最近写代码好累啊"
    },
    {
        "role": "assistant",
        "content": "（举杯大笑）*痛快！* 代码如诗，不如先饮一杯解忧！"
    }
]

​3. 清空历史功能

右上角垃圾桶按钮触发确认弹窗，点击后清除数据：

// 在initMusicControls方法中：
clearBtn.onclick = () => {
    localStorage.removeItem(`chatHistory_${this.characterName}`);
    this.messageHistory = [this.systemMessage]; // 重置为仅系统消息
    document.getElementById('chat-container').innerHTML = ''; // 清空界面
};

​4. 技术亮点

1. ​角色隔离存储
   不同角色的对话历史独立保存（chatHistory_角色名），避免互相覆盖。

2. ​自动滚动定位
   加载历史后自动滚动到底部（chatContainer.scrollTop = chatContainer.scrollHeight）。

3. ​容错处理
   如果 localStorage 读取失败（如用户禁用存储），会自动降级为新建对话。

​5. 实际应用场景

🎨 CSS 背景图片 & 头像框内容

​1. 背景图片设置

• ​全局背景：

  body {
      background: url(https://blog.csdn.net/'huoqubing.png') center/cover no-repeat fixed;
  }

  • ​效果：整个页面使用 huoqubing.png 作为背景图，​居中、覆盖整个视口、不重复、固定不滚动
  • ​适用场景：适合历史人物（如霍去病）的沉浸式对话界面

• ​视频背景（备用）​：

  #background-video {
      position: fixed;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      object-fit: cover;
      z-index: -1;
      opacity: 0;
      transition: opacity 1s ease;
  }
  #background-video.show {
      opacity: 1;
  }

  • ​功能：支持动态视频背景（通过JS切换 show 类控制显隐）
  • ​交互逻辑：视频播放时隐藏聊天界面（.video-playing #chat-container）

​2. 头像框设计

• ​顶部标题栏头像：

  .header-container {
      background-color: rgba(0, 0, 0, 0.7);
      backdrop-filter: blur(10px);
      border: 1px solid rgba(255, 255, 255, 0.2);
      display: flex;
      align-items: center;
      gap: 15px;
      padding: 6px 16px;
      border-radius: 14px;
      position: absolute;
      top: 20px;
      left: 80px;
  }
  .title-avatar {
      width: 35px;
      height: 35px;
      border-radius: 50%;
      border: 2px solid rgba(255, 255, 255, 0.5);
      object-fit: cover;
  }

  • ​样式特点：
    • ​圆形头像 + 白色半透明边框
    • ​毛玻璃效果​（backdrop-filter: blur(10px)）
    • ​左侧定位​（与返回按钮配合）

• ​返回按钮​（搭配头像框和切换回的主页使用）：

  .back-button {
      position: absolute;
      left: 20px;
      top: 20px;
      background: rgba(0, 123, 255, 0.5);
      border-radius: 50%;
      width: 30px;
      height: 30px;
  }

​3. 动态效果

• ​消息渐显动画：

  .message {
      animation: messageFadeIn 0.6s ease-out forwards;
      opacity: 0;
      transform: translateY(10px);
  }
  @keyframes messageFadeIn {
      to { opacity: 1; transform: translateY(0); }
  }

  • ​作用：新消息弹出时带轻微上浮+淡入效果

• ​视频控制联动：

  .video-playing #chat-container { opacity: 0; }
  .video-ended #chat-container { opacity: 1; }

  • ​逻辑：播放视频时隐藏聊天框，结束后恢复

CSS都写完了，那么HTML一切都好说：

<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>霍去病</title>
    <link rel="stylesheet" type="text/css" href="../../styles/common.css">
    <link rel="stylesheet" type="text/css" href="huoqubing.css">
</head>

<body>
    <video id="background-video" preload="auto">
        <source src="huoqubing.mp4" type="video/mp4">
    </video>
    <div class="back-button" onclick="location.href='../../index.html'">
        <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor">
            <path d="M19 12H5M12 19l-7-7 7-7" />
        </svg>
    </div>

    <div class="header-container">
        <img src="huoqubinghead.png" class="title-avatar" alt="头像">
        <h1>霍去病</h1>
    </div>

    <div id="chat-container"></div>

    <div id="input-area">
        <input type="text" id="user-input" placeholder="输入你的消息..." style="padding-right: 40px;">

        <button id="send-button">发送</button>

        </div>
    </div>
    <script type="module" src="js路径"></script>

</body>

</html>

好了，现在，你就可以和你喜欢的人物对话了！