<div class="chat-box">
      <div class="messages">
        <!-- 显示对话记录 -->
        <div
            v-for="(i, index) in chatDatas"
            :key="index"
            :class="['message', i.role]"
        >
          <div class="message-box">
            <div v-html="md.render(i.content)" ref="markdownContent"></div>
          </div>
        </div>
      </div>
    </div>

const md = new MarkdownIt({
      highlight: (str, lang) => {
        try {
          // 如果有语言并且 hl.js 支持高亮，则渲染高亮
          if (lang && hljs.getLanguage(lang)) {
            const highlighted = hljs.highlight(str, { language: lang }).value;
            return `
              <div class="code-container">
                <div class="code-toolbar">
                  <span class="code-lang">${lang ? md.utils.escapeHtml(lang) : "plaintext"}</span>
                  <button class="copy-btn" @click="copyToClipboard($event.target)">复制</button>
                </div>
                <pre class="code-content"><code class="hljs">${highlighted}</code></pre>
              </div>
            `;
          }
        } catch (err) {
          console.error("Highlight error:", err);
        }

        // 当没有语言高亮时，直接输出代码使用默认样式
        return `
          <div class="code-container">
            <div class="code-toolbar">
              <span class="code-lang">${lang ? md.utils.escapeHtml(lang) : "plaintext"}</span>
              <button class="copy-btn">复制</button>
            </div>
            <pre class="code-content"><code class="hljs">${md.utils.escapeHtml(str)}</code></pre>
          </div>
        `;
      },
    });

/* ********** 聊天区域 ********** */
.chat-box {
flex: 1;
overflow-y: auto; /* 启用垂直滚动条 */
overflow-x: hidden; /* 隐藏横向滚动条 */
background: white;
padding: 15px;
border-radius: 14px;
border: 1px solid #dde3f2;
box-shadow: inset 0 1px 4px rgba(0, 0, 0, 0.05);
box-sizing: border-box;
max-width: 100%; /* 确保宽度自适应屏幕 */
word-wrap: break-word;
}

.messages {
display: flex;
flex-direction: column;
gap: 15px;
}

.message {
display: flex;
flex-shrink: 1;
word-break: break-word;
white-space: pre-wrap;
}

.message.user {
align-self: flex-end; /* 用户消息靠右对齐 */
max-width: 85%;
}

.message.ai {
align-self: flex-start; /* AI 消息靠左对齐 */
max-width: 85%;
}

.message .message-box {
background: linear-gradient(135deg, #f1f5ff, #d9e8ff);
color: #34495e;
padding: 10px 15px;
border-radius: 12px;
line-height: 1.6;
box-shadow: 0px 2px 6px rgba(0, 0, 0, 0.1);
word-break: break-word;
white-space: normal;
}

.message.user .message-box {
background: linear-gradient(135deg, #dcf8c6, #bde5a5);
color: #4a4a4a;
border-radius: 12px;
text-align: left;
}

.message .message-box img,
.message .message-box pre {
max-width: 100%;
overflow-x: auto;
word-break: break-word;
white-space: pre-wrap;
}

::v-deep(.code-container) {
  border-radius: 8px; /* 整体圆角设计 */
  overflow: hidden; /* 裁切溢出的内容 */
  box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.1); /* 阴影 */
  background-color: #000; /* 代码块背景色 */
  font-family: "Courier New", monospace; /* 字体为等宽 */
  border: 1px solid #ddd; /* 浅灰色边框 */
  position: relative; /* 使子内容可相对定位 */
  padding-bottom: 12px; /* 防止边界太贴 */
}

/* 顶部的工具栏 */
::v-deep(.code-toolbar) {
  display: flex; /* 左右分布布局 */
  justify-content: space-between; /* 左右对齐 */
  align-items: center; /* 垂直居中 */
  background: inherit; /* 使用与代码块相同的背景色 */
  padding: 12px; /* 内边距 */
  padding-top: 0px;
  padding-bottom: 0px;
  font-size: 14px; /* 工具栏字体大小 */
  color: #000; /* 工具栏文字为稍淡的灰色 */
}

/* 显示代码的语言类型 */
::v-deep(.code-lang) {
  font-size: 12px; /* 字体稍微小些 */
  font-weight: bold; /* 粗体强调 */
  color: #00bbff; /* 字体颜色更浅一些 */
  text-transform: uppercase; /* 全部使用大写字母 */
}

/* 复制按钮样式 */
::v-deep(.copy-btn) {
  background-color: inherit; /* 按钮透明化背景 */
  border: none; /* 无边框 */
  color: #00ffde; /* 按钮颜色 */
  font-weight: bold;
  cursor: pointer; /* 鼠标手形 */
  font-size: 12px;
  padding: 4px 8px; /* 内边距 */
  transition: color 0.2s ease; /* 悬停时颜色渐变 */
}

::v-deep(.copy-btn:hover) {
  color: #005a99; /* 悬停时颜色更深 */
}

/* 代码的内容块 */
::v-deep(.code-content) {
  padding: 16px 12px; /* 内边距，让代码块和顶部工具栏拉开距离 */
  padding-top: 0px;
  margin: 0;
  font-size: 13px; /* 代码块字体大小 */
  line-height: 1.5; /* 行距更优，让代码更易读 */
  background: inherit; /* 保持与整体背景一致 */
  border: none; /* 无额外边框 */
  overflow-x: auto; /* 横向滚动支持 */
}

/* 滚动条样式 */
::v-deep(.code-content::-webkit-scrollbar) {
  height: 8px;
}

::v-deep(.code-content::-webkit-scrollbar-thumb) {
  background-color: #bbb;
  border-radius: 4px;
}

::v-deep(.code-content::-webkit-scrollbar-thumb:hover) {
  background-color: #999;
}


上面这样，消息内容过多时，内容会超出box导致内容一部分被覆盖，请你修改上面样式，实现内容不被覆盖，而是自适应宽度自动换行