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

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

代码语言：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;.........完整代码请登录后点击上方下载按钮下载查看