mkdocs内嵌Open WebUI

---

# **教程：在 MkDocs 中内嵌 Open WebUI 弹窗助手**

本教程将实现：

* 在 MkDocs 页面右下角显示一个 **“AI 助手”按钮**
* 点击后弹出一个 **可折叠的 Open WebUI iframe 窗口**
* 由 MkDocs 服务器加载自定义 JS/CSS
* 能嵌入登录界面、保持 WebSocket 通信

示例最终效果如下：

```
页面右下角 → “AI助手”按钮 → 弹出 360×560 的 Open WebUI 窗口
```

---

# **1. 目录结构**

你的文件结构如下（保持一致即可）：

```bash
root@debian1-hp01:~# tree /root/mydoc
/root/mydoc
├── docs
│   ├── css
│   │   └── openwebui.css
│   ├── index.md
│   └── js
│       └── openwebui.js
└── mkdocs.yml
```

说明：

* `docs/css/openwebui.css` —— 控制按钮与iframe样式
* `docs/js/openwebui.js` —— 控制按钮创建与iframe显示逻辑
* `mkdocs.yml` —— 配置 MkDocs 让其加载 CSS 与 JS

---

# **2. 编写 openwebui.css**

路径：`docs/css/openwebui.css`

```css
#openwebui-btn {
    position: fixed;
    bottom: 25px;
    right: 25px;
    padding: 12px 18px;
    background: #3f51b5;
    color: white;
    border: none;
    border-radius: 8px;
    cursor: pointer;
    z-index: 9999;
}

#openwebui-frame {
    position: fixed;
    bottom: 90px;
    right: 12px;
    width: 360px;
    height: 560px;
    border: 1px solid #ccc;
    border-radius: 8px;
    z-index: 9999;
    display: none;
}
```

作用：

* 固定按钮位置
* 创建悬浮 iframe
* 默认隐藏（点击按钮才展开）

---

# **3. 编写 openwebui.js**

路径：`docs/js/openwebui.js`

```javascript
document.addEventListener("DOMContentLoaded", function() {
    const btn = document.createElement("button");
    btn.innerText = "AI 助手";
    btn.id = "openwebui-btn";
    document.body.appendChild(btn);

const iframe = document.createElement("iframe");
    iframe.src = "https://oi.careedu.de/";   // ← 修改为你的 Open WebUI 地址
    iframe.id = "openwebui-frame";
    document.body.appendChild(iframe);

btn.addEventListener("click", function() {
        iframe.style.display = iframe.style.display === "none" ? "block" : "none";
    });
});
```

说明：

* 点击按钮，控制 iframe 的显示/隐藏
* iframe 内加载完整的 Open WebUI，包括登录界面、WebSocket

---

# **4. 修改 mkdocs.yml**

确保 CSS 与 JS 被 MkDocs 加载。

编辑根目录 `/root/mydoc/mkdocs.yml`：

```yaml
site_name: My Docs
theme:
  name: material
  features:
    - navigation.tabs
    - navigation.sections
    - toc.integrate
    - content.code.copy

extra_javascript:
  - js/openwebui.js

extra_css:
  - css/openwebui.css

nav:
  - Home: index.md
```

---

# **5. 启动 mkdocs 本地调试**

```bash
mkdocs serve -a 0.0.0.0:8000
```

访问：

```
http://服务器IP:8000/
```

你会看见右下角出现 **AI助手** 按钮。
点击即可弹出 Open WebUI 页面。

---

# **6. 高度自适应与窗口拖动**
docs/css/openwebui.css
```bash
#openwebui-btn {
    position: fixed;
    bottom: 25px;
    right: 25px;
    padding: 12px 18px;
    background: #3f51b5;
    color: white;
    border: none;
    border-radius: 8px;
    cursor: pointer;
    z-index: 9999;
}

/* 外部容器（用于拖动） */
#openwebui-container {
    position: fixed;
    bottom: 90px;
    right: 12px;
    width: 360px;
    height: 560px;
    display: none;
    z-index: 9999;
    border-radius: 8px;
    border: 1px solid #ccc;
    background: #fff;
    box-shadow: 0 4px 12px rgba(0,0,0,0.15);
}

/* 顶部标题栏，用于拖动 */
#openwebui-header {
    height: 32px;
    background: #3f51b5;
    color: white;
    font-size: 14px;
    padding: 6px 10px;
    cursor: move;
    user-select: none;
    border-radius: 8px 8px 0 0;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

/* iframe 区域 */
#openwebui-frame {
    width: 100%;
    height: calc(100% - 32px);
    border: none;
    border-radius: 0 0 8px 8px;
}
```
docs/js/openwebui.js
```bash
document.addEventListener("DOMContentLoaded", function () {

// ========= 自动高度自适应 =========
    function getAutoHeight() {
        const screenH = window.innerHeight;
        const maxHeight = screenH - 80; // 顶部留 80px 不遮挡
        return Math.min(560, maxHeight);
    }

// ========= 创建按钮 =========
    const btn = document.createElement("button");
    btn.innerText = "AI 助手";
    btn.id = "openwebui-btn";
    document.body.appendChild(btn);

// ========= 创建容器（用于拖动） =========
    const container = document.createElement("div");
    container.id = "openwebui-container";
    container.style.height = getAutoHeight() + "px";
    document.body.appendChild(container);

// ========= 标题栏（可拖动） =========
    const header = document.createElement("div");
    header.id = "openwebui-header";
    header.innerHTML = `<span>AI 助手</span>`;
    container.appendChild(header);

// ========= iframe =========
    const iframe = document.createElement("iframe");
    iframe.id = "openwebui-frame";
    iframe.src = "https://oi.careedu.de/"; // ← 修改为你的 Open WebUI 地址
    container.appendChild(iframe);

// ========= 按钮点击事件（显示/隐藏） =========
    btn.addEventListener("click", () => {
        const isHidden = container.style.display === "none";
        container.style.display = isHidden ? "block" : "none";
    });

// ========= 监听窗口变化（自动高度） =========
    window.addEventListener("resize", () => {
        container.style.height = getAutoHeight() + "px";
    });

// ========= 拖动事件 =========
    let isDragging = false;
    let offsetX = 0;
    let offsetY = 0;

header.addEventListener("mousedown", function (e) {
        isDragging = true;
        offsetX = e.clientX - container.offsetLeft;
        offsetY = e.clientY - container.offsetTop;
    });

document.addEventListener("mousemove", function (e) {
        if (isDragging) {
            container.style.left = (e.clientX - offsetX) + "px";
            container.style.top = (e.clientY - offsetY) + "px";
            container.style.bottom = "auto"; // 拖动后取消 bottom 固定
            container.style.right = "auto";  // 拖动后取消 right 固定
        }
    });

document.addEventListener("mouseup", function () {
        isDragging = false;
    });
});

```