MaxKB 如何正确的使用聊天框渲染样式

灬囖

于 2025-03-27 11:27:59 发布

阅读量580

点赞数 5

分类专栏： MaxKB 文章标签： javascript 前端 vue.js

本文链接：https://blog.csdn.net/hao65103940/article/details/146553044

版权

MaxKB 专栏收录该内容

14 篇文章

订阅专栏

很多小伙伴在使用MaxKB这款非常优秀的软件的时候，在对话聊天框发现背景太单调能不能搞一个图片当背景图。那么这期手把手教大家你想要的都能实现。

用过MaxKB的小伙伴都知道，在MaxKB当中有三大标签，分别是<html_rander>、<quick_question>、

<echarts_rander> 具体用法

我们可以在开场白里面使用<html_rander>来去渲染对话页面。

注意：此处只展示手机端（?mode=embed）嵌入的修改方案，如果是电脑端，可以根据思路修改。

MaxKB 如何正确的使用第三方嵌入链接

一、创建工作流并添加开场白

二、场白模版设置

2.1 设置对话框AI提示语


<html_rander>

<script>

var element = document.querySelector('div.text-center[style*="margin-top"] > span.el-text.el-text--info');
  console.log(element);
if(element){
 element.style.color="red";
 element.style.fontSize="20px";  
}

</script>

</html_rander>

2.2 设置聊天框背景图和背景颜色

<style>

 .ai-chat__operate::before {
        background: none !important; // 去掉聊天框白线条
        }

</style>

// 设置背景颜色
  // document.querySelector(".chat-embed__main").style.backgroundColor="dimgrey"


  // 设置背景图片
    window.addEventListener("resize", changeBackground);
    function changeBackground() {
        const chatEmbedMain = document.querySelector(".chat-embed__main");
        if (window.innerWidth < 768) {
            chatEmbedMain.style.backgroundImage = "url('https://ss1.bdstatic.com/70cFvXSh_Q1YnxGkpoWK1HF6hhy/it/u=2537911176,2928325435&fm=253&gp=0.jpg')";
            chatEmbedMain.style.backgroundSize="cover";
            chatEmbedMain.style.backgroundPosition="center center"
        } else {
            chatEmbedMain.style.backgroundImage = "";
        } 
          const chatMessageBak = document.querySelector(".ai-chat__operate");
          chatMessageBak.style.background="none"
    }
     changeBackground(); // 页面加载时立即执行一次

2.3 设置开场白样式

<html_rander>
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Portal Dashboard</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            background-color: #f8f9fa;
            margin: 0;
            padding: 16px;
            color: #202124;
        }
        .mkb-container {
            max-width: 1200px;
            margin: 0 auto;
            padding: 16px;
            background: white;
            border-radius: 8px;
            box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
        }
        h2 {
            font-size: 1.5em;
            margin-bottom: 1em;
            text-align: center;
        }
        .mkb-tab {
            display: flex;
            justify-content: center;
            gap: 8px;
            margin-bottom: 20px;
            flex-wrap: wrap;
        }
        .mkb-tab button {
            background: transparent;
            border: 1px solid #dadce0;
            padding: 8px 16px;
            font-size: 14px;
            border-radius: 20px;
            cursor: pointer;
            flex: 1 1 auto;
            min-width: 100px;
        }
        .mkb-tab button.active {
            background: #1a73e8;
            color: white;
            border-color: #1a73e8;
        }
        .mkb-tabcontent {
            display: none;
            padding: 16px;
        }
        table {
            width: 100%;
            border-collapse: collapse;
            margin-top: 16px;
        }
        th, td {
            padding: 12px;
            text-align: left;
            border-bottom: 1px solid #dadce0;
            cursor: pointer;
        }
        th {
            background-color: #f8f9fa;
        }
        tr:hover td {
            background-color: rgba(26, 115, 232, 0.04);
        }
        @media (max-width: 600px) {
            body {
                padding: 8px;
            }
            .mkb-container {
                padding: 8px;
                border-radius: 4px;
            }
            h2 {
                font-size: 1.25em;
            }
            .mkb-tab {
                gap: 4px;
                margin-bottom: 16px;
            }
            .mkb-tab button {
                padding: 6px 12px;
                font-size: 12px;
                border-radius: 16px;
                min-width: 80px;
            }
            .mkb-tabcontent {
                padding: 8px;
            }
            th, td {
                padding: 8px;
                font-size: 12px;
            }
        }
    </style>
</head>
<body>
    <div class="mkb-container">
        <h2>欢迎使用MaxKB小助手</h2>
        <div class="mkb-tab">
            <button class="mkb-tablinks" onclick="openMkbTab(event,'mkb-Tab1')">产品相关</button>
            <button class="mkb-tablinks" onclick="openMkbTab(event,'mkb-Tab2')">技术支持</button>
        </div>
        <div id="mkb-Tab1" class="mkb-tabcontent">
            <table class="mkb-table">
                <tr>
                    <th>产品相关</th>
                </tr>
                <tr>
                    <td onclick="send(event)">MaxKB产品怎么样?</td>
                </tr>
                <tr>
                    <td onclick="send(event)">介绍一下MaxKB产品?</td>
                </tr>
            </table>
        </div>
        <div id="mkb-Tab2" class="mkb-tabcontent">
            <table class="mkb-table">
                <tr>
                    <th>技术支持</th>
                </tr>
                <tr>
                    <td onclick="send(event)">人工客服</td>
                </tr>
                <tr>
                    <td onclick="send(event)">交流群</td>
                </tr>
            </table>
        </div>
        <div id="mkb-Tab3" class="mkb-tabcontent">
            <table class="mkb-table">
                <tr>
                    <th>常见问题</th>
                </tr>
                <tr>
                    <td onclick="send(event)">如何使用MaxKB?</td>
                </tr>
                <tr>
                    <td onclick="send(event)">价格是多少?</td>
                </tr>
            </table>
        </div>
        <div id="mkb-Tab4" class="mkb-tabcontent">
            <table class="mkb-table">
                <tr>
                    <th>关于我们</th>
                </tr>
                <tr>
                    <td onclick="send(event)">公司介绍</td>
                </tr>
                <tr>
                    <td onclick="send(event)">联系方式</td>
                </tr>
            </table>
        </div>
    </div>
    <script>
        function openMkbTab(evt, tabName) {
            const tabcontents = document.getElementsByClassName("mkb-tabcontent");
            Array.from(tabcontents).forEach(tab => tab.style.display = "none");
            const tablinks = document.getElementsByClassName("mkb-tablinks");
            Array.from(tablinks).forEach(link => link.classList.remove("active"));
            document.getElementById(tabName).style.display = "block";
            evt.currentTarget.classList.add("active");
        }
        openMkbTab({ currentTarget: document.querySelector('.mkb-tablinks') }, 'mkb-Tab1');

        function send(event) {
            console.log(event);
            console.log(event.target.innerText);
            sendMessage(event.target.innerText);
        }
    </script>
</body>
</html>
</html_rander>