AI辅助教学

本文档使用 MrDoc 发布

Moodle插入inframe

利用附加HTML接入AI Agent

### 随页面滚动
```javascript
<script>
 window.difyChatbotConfig = {
  token: 'PSHH9mkwj1E0PLHh',
  baseUrl: 'https://dify.careedu.de',
 }
</script>

<script
 src="https://dify.careedu.de/embed.min.js"
 id="PSHH9mkwj1E0PLHh"
 defer>
</script>

<style>
  /* 按钮样式 */
  #dify-chatbot-bubble-button {
    background-color: #1C64F2 !important;
    border-radius: 50% !important;   /* 圆形按钮 */
    width: 3.5rem !important;
    height: 3.5rem !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;

/* 固定在右下角 */
    position: fixed !important;
    bottom: 1rem !important;
    right: 1rem !important;
    z-index: 9999 !important;

box-shadow: 0 4px 12px rgba(0,0,0,0.15) !important; /* 美观阴影 */
    cursor: pointer !important;
  }

/* 聊天小窗样式 */
  #dify-chatbot-bubble-window {
    width: 24rem !important;
    height: 40rem !important;
    border-radius: 0.5rem !important;
    overflow: hidden !important;

/* 固定在按钮上方 */
    position: fixed !important;
    bottom: 5.5rem !important; /* 高度 + 间距，让聊天窗不覆盖按钮 */
    right: 1rem !important;
    z-index: 9999 !important;

box-shadow: 0 8px 24px rgba(0,0,0,0.2) !important;
  }
</style>

<script>
  // 动态修正聊天框和按钮位置，防止 Dify JS 重新定位
  window.addEventListener('load', () => {
    const fixChat = () => {
      const chatWindow = document.querySelector('#dify-chatbot-bubble-window');
      const chatButton = document.querySelector('#dify-chatbot-bubble-button');

if (chatWindow && chatButton) {
        // 聊天小窗固定
        chatWindow.style.position = 'fixed';
        chatWindow.style.bottom = '5.5rem'; // 高度 + 间距
        chatWindow.style.right = '1rem';
        chatWindow.style.zIndex = '9999';

// 按钮固定
        chatButton.style.position = 'fixed';
        chatButton.style.bottom = '1rem';
        chatButton.style.right = '1rem';
        chatButton.style.zIndex = '9999';
      }
    };

// 初次修正
    fixChat();

// 页面滚动或 DOM 变动时重复修正
    document.addEventListener('scroll', fixChat);
    const observer = new MutationObserver(fixChat);
    observer.observe(document.body, { childList: true, subtree: true });
  });
</script>

```

### 窗口固定
```javascript
<script>
 // 检查用户是否已登录（通过 Moodle 的 body class）
 (function() {
   // Moodle 会在 body 上添加 'notloggedin' class
   const isLoggedIn = !document.body.classList.contains('notloggedin');
   
   if (!isLoggedIn) {
     // 未登录，不加载聊天机器人
     return;
   }
   
   // 已登录，加载聊天机器人
   window.difyChatbotConfig = {
     token: 'PSHH9mkwj1E0PLHh',
     baseUrl: 'https://dify.careedu.de',
   };
   
   const script = document.createElement('script');
   script.src = 'https://dify.careedu.de/embed.min.js';
   script.id = 'PSHH9mkwj1E0PLHh';
   script.defer = true;
   document.body.appendChild(script);
 })();
</script>

<style>
  /* 按钮样式 */
  #dify-chatbot-bubble-button {
    background-color: #1C64F2 !important;
    border-radius: 50% !important;   /* 圆形按钮 */
    width: 3.5rem !important;
    height: 3.5rem !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    /* 固定在右下角 */
    position: fixed !important;
    bottom: 1rem !important;
    right: 1rem !important;
    z-index: 9999 !important;
    box-shadow: 0 4px 12px rgba(0,0,0,0.15) !important; /* 美观阴影 */
    cursor: pointer !important;
  }
  /* 聊天小窗样式 */
  #dify-chatbot-bubble-window {
    width: 24rem !important;
    height: 40rem !important;
    border-radius: 0.5rem !important;
    overflow: hidden !important;
    /* 固定在按钮上方 */
    position: fixed !important;
    bottom: 5.5rem !important; /* 高度 + 间距，让聊天窗不覆盖按钮 */
    right: 1rem !important;
    z-index: 9999 !important;
    box-shadow: 0 8px 24px rgba(0,0,0,0.2) !important;
  }
</style>

<script>
  // 动态修正聊天框和按钮位置，防止 Dify JS 重新定位
  window.addEventListener('load', () => {
    const fixChat = () => {
      const chatWindow = document.querySelector('#dify-chatbot-bubble-window');
      const chatButton = document.querySelector('#dify-chatbot-bubble-button');
      if (chatWindow && chatButton) {
        // 聊天小窗固定
        chatWindow.style.position = 'fixed';
        chatWindow.style.bottom = '5.5rem'; // 高度 + 间距
        chatWindow.style.right = '1rem';
        chatWindow.style.zIndex = '9999';
        // 按钮固定
        chatButton.style.position = 'fixed';
        chatButton.style.bottom = '1rem';
        chatButton.style.right = '1rem';
        chatButton.style.zIndex = '9999';
      }
    };
    // 初次修正
    fixChat();
    // 页面滚动或 DOM 变动时重复修正
    document.addEventListener('scroll', fixChat);
    const observer = new MutationObserver(fixChat);
    observer.observe(document.body, { childList: true, subtree: true });
  });
</script>
```

koalalove 2026年1月15日 21:41 收藏文档

上一篇