vue模仿主流ai大模型聊天对话流式单独右侧输出代码块并预览效果代码-html代码-BFW代码库

代码语言：html

所属分类：其他

代码描述：vue模仿主流ai大模型聊天对话流式单独右侧输出代码块并预览效果代码，支持多个代码块的输出和切换、支持本地消息记录的存储，聊天记录与代码显示区域可隐藏，跟豆包的ai编程输出效果很像，ai回复中的代码块是一个卡片占位符，点开后右侧显示具体的代码并且还能预览，配合后端的websocket实时流openai兼容api请求，后端python代码地址：https://code.bfw.wiki/code/17541760817047710067.html

代码标签： vue 模仿主流 ai 大模型聊天对话流式单独右侧输出代码块预览

下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>AI 智能编程助手</title>
    <style>
        /* --- 核心布局 (无变化) --- */
        :root { --sidebar-width: 260px; --right-panel-width: 50%; --border-color: #e0e0e0; --main-bg: #f4f7f6; --panel-bg: #ffffff; --primary-color: #007bff; --primary-hover: #0056b3; }
        body { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; margin: 0; background-color: var(--main-bg); color: #333; height: 100vh; overflow: hidden; }
        #app { display: flex; height: 100%; width: 100%; transition: margin-left 0.3s ease; }
        .sidebar { width: var(--sidebar-width); background-color: var(--panel-bg); border-right: 1px solid var(--border-color); padding: 20px; display: flex; flex-direction: column; overflow-y: auto; flex-shrink: 0; transition: margin-left 0.3s ease; }
        .sidebar.hidden { margin-left: calc(-1 * var(--sidebar-width)); }
        .sidebar h2 { margin: 0 0 20px 0; color: var(--primary-color); font-size: 1.3em; }
        .sidebar ul { list-style: none; padding: 0; margin: 0; flex-grow: 1; }
        .sidebar li { padding: 10px 15px; cursor: pointer; border-radius: 5px; margin-bottom: 8px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; transition: background-color 0.2s ease; }
        .sidebar li:hover { background-color: #f0f0f0; }
        .sidebar li.active { background-color: #e0e0ff; color: #0056b3; font-weight: bold; }
        .sidebar .new-chat-btn { padding: 10px; background-color: var(--primary-color); color: white; border: none; border-radius: 5px; cursor: pointer; transition: background-color 0.2s ease; font-size: 1em; }
        .sidebar .new-chat-btn:hover { background-color: var(--primary-hover); }
        .main-content { flex-grow: 1; display: flex; flex-direction: column; overflow: hidden; background-color: #fdfdfd; }
        .chat-header { display: flex; align-items: center; padding: 10px 20px; background-color: var(--panel-bg); border-bottom: 1px solid var(--border-color); flex-shrink: 0; }
        .chat-header .menu-toggle { font-size: 1.5em; cursor: pointer; padding: 5px 10px; margin-right: 15px; border-radius: 5px; }
        .chat-header .menu-toggle:hover { background-color: #f0f0f0; }
        .chat-header h2 { margin: 0; font-size: 1.2em; }
        .chat-history-scrollable { flex-grow: 1; padding: 20px; overflow-y: auto; display: flex; flex-direction: column; }
        .message { margin-bottom: 20px; display: flex; max-width: 80%; }
        .message.user { align-self: flex-end; }
        .message.assistant { align-self: flex-start; }
        .message p { margin: 0; padding: 12px 18px; border-radius: 18px; line-height: 1.5; word-wrap: break-word; white-space: pre-wrap; }
        .message.user p { background-color: var(--primary-color); color: white; }
        /* 助手消息背景现在由 .markdown-content 控制 */
        .message.assistant .markdown-content-wrapper { background-color: #e9ecef; padding: 12px 18px; border-radius: 18px; }
        
        .code-card { padding: 15px; border: 1px solid #d1e7dd; background-color: #f8f9fa; border-radius: 8px; cursor: pointer; transition: box-shadow 0.2s ease; max-width: 100%; }
        .code-card:hover { box-shadow: 0 2px 8px rgba(0,0,0,0.1); }
        .code-card-content { display: flex; align-items: center; font-weight: 500; color: #0f5132; }
        .code-card-content svg { width: 24px; height: 24px; margin-right: 12px; flex-shrink: 0; }
        .input-area { padding: 15px 20px; background-color: var(--panel-bg); border-top: 1px solid var(--border-color); display: flex; align-items: center; }
        .input-area textarea { flex-grow: 1; margin-right: 15px; padding: 10px; border: 1px solid #ccc; border-radius: 8px; resize: none; font-size: 1em; line-height: 1.5; max-height: 150px; overflow-y: auto; }
        .input-area button { padding: 10px 20px; background-color: #28a745; color: white; border: none; border-radius: 8px; cursor: pointer; transition: background-color 0.2s ease; }
        .input-area button:hover { background-color: #218838; }
        .right-panel { width: var(--right-panel-width); background-color: var(--panel-bg); border-left: 1px solid var(--border-color); display: flex; flex-direction: column; overflow: hidden; flex-shrink: 0; transition:.........完整代码请登录后点击上方下载按钮下载查看