Function addExplainButtonsToCodeBlocks

utils/chat-integration.ts:134–172

()

 * 检测页面中的代码块并添加"解释代码"按钮
 */
export function addExplainButtonsToCodeBlocks() {
  const codeBlocks = document.querySelectorAll("pre code")

  codeBlocks.forEach((block) => {
    // 避免重复添加按钮
    if (block.parentElement?.querySelector(".codebox-explain-btn")) {
      return
    }

    const button = document.createElement("button")
    button.textContent = "💬 解释代码"
    button.className = "codebox-explain-btn"
    button.style.cssText = `
      position: absolute;
      top: 8px;
      right: 8px;
      padding: 4px 8px;
      background: #4CAF50;
      color: white;
      border: none;
      border-radius: 4px;
      cursor: pointer;
      font-size: 12px;
      z-index: 1000;
    `

    button.onclick = async () => {
      const code = block.textContent || ""
      const language = block.className.replace("language-", "")
      await explainCode(code, language)
    }

    // 确保 pre 元素有相对定位
    if (block.parentElement) {
      block.parentElement.style.position = "relative"
      block.parentElement.insertBefore(button, block)
    }
  })
}