[Bug] 局域网IP的HTTP访问时WebUI 代码块复制按钮无效

[alonguser]

What happened / 发生了什么

问题描述

WebUI 中代码块右上角的复制按钮点击无任何反应，控制台无输出。

原因分析

按钮使用了 @click.stop 或 stopPropagation()，导致点击事件无法冒泡，同时内部绑定的复制逻辑未正常执行。

复现步骤

1. 在 WebUI 中触发一条包含代码块的回复
2. 点击代码块右上角的复制按钮
3. 无任何反应，剪贴板内容未更新

环境信息

• AstrBot 版本：v4.23.2
• 浏览器：Chrome
• 访问方式：局域网IP的HTTP访问

临时解决方案

在控制台手动覆盖按钮的 onclick：
document.querySelectorAll('.code-action-btn[aria-label="Copy"]').forEach(btn => {
btn.onclick = function() {
const code = this.closest('.code-block-container')?.querySelector('pre code')?.innerText;
if (!code) return;
const ta = document.createElement('textarea');
ta.value = code;
document.body.appendChild(ta);
ta.select();
document.execCommand('copy');
document.body.removeChild(ta);
};
});

建议修复方式

去掉按钮上的 stopPropagation，或确保内部复制逻辑正确执行。

Reproduce / 如何复现？

1. 在 WebUI 中发送任意触发代码块的消息
2. 等待回复渲染完成
3. 点击代码块右上角的复制按钮
4. 无任何反应，剪贴板内容未更新，控制台无输出

AstrBot version, deployment method (e.g., Windows Docker Desktop deployment), provider used, and messaging platform used. / AstrBot 版本、部署方式（如 Windows Docker Desktop 部署）、使用的提供商、使用的消息平台适配器

AstrBot 版本：v4.23.2
部署方式：Docker
消息平台：WebUI

OS

Windows

Logs / 报错日志

控制台无任何报错输出，点击按钮后无日志。

Are you willing to submit a PR? / 你愿意提交 PR 吗？

• Yes!

Code of Conduct

• I have read and agree to abide by the project's Code of Conduct。

[dosubot]

Hi @alonguser! I'm Dosu and I’m helping the AstrBot team.

你好 @alonguser，这个问题看起来和之前 #5351 报告的复制按钮失效问题相关 [1]。

关于代码块内的复制按钮： 当前版本中，代码块的渲染和其内部的复制按钮是由外部库 markstream-vue 的 MarkdownCodeBlockNode 组件提供的 [2]，并不是 AstrBot 自己实现的。所以如果代码块右上角的复制按钮无效，问题可能出在该外部库的实现上，而非 AstrBot 的 @click.stop 或 stopPropagation()。

关于 AstrBot 自身的复制逻辑： AstrBot 的消息级复制按钮（消息下方的复制按钮）使用的是简单的 @click 绑定 + navigator.clipboard.writeText()，没有使用 .stop 修饰符 [3][4]。

一个可能的因素： 你是通过 HTTP localhost 访问的。在 v4.18 时期曾有一个类似问题（非 HTTPS / 局域网 IP 下剪贴板 API 受限），PR #5352 做了修复 [5]。但当前版本的消息级复制只使用了 navigator.clipboard API，没有 document.execCommand('copy') 的回退路径 [6]。如果你的环境中 Clipboard API 不可用（非安全上下文），复制会静默失败。

建议排查方向：

1. 确认你点击的是代码块右上角的按钮（由 markstream-vue 提供）还是消息下方的复制按钮（AstrBot 自身实现）——两者的实现不同。
2. 在浏览器控制台检查 navigator.clipboard 是否可用（HTTP localhost 通常算安全上下文，应该没问题）。
3. 如果问题确实出在 markstream-vue 的代码块复制按钮上，可能需要在该库层面修复或由 AstrBot 覆盖其行为。

To reply, just mention @dosu.

---

Share context across your team and agents. Try Dosu.

[alonguser]

在浏览器控制台输入console.log(navigator.clipboard);输出undefined说明Clipboard API确实不可用，我又看了下，我是通过局域网IP的HTTP访问的WebUI

[dosubot]

这就对了。通过局域网 IP 的 HTTP 访问属于非安全上下文，浏览器会禁用 navigator.clipboard API。

目前 MessageList.vue 中的复制逻辑只使用了 navigator.clipboard?.writeText()，没有任何回退机制，所以在你的环境下会静默失败 [1]。

但同一个项目中的 ReadmeDialog.vue [2] 和 Settings.vue [3] 已经实现了 document.execCommand('copy') 的回退方案。修复方向应该是让聊天组件也采用类似的双路径复制策略：优先用 Clipboard API，失败时回退到 execCommand('copy')。

如果你有兴趣提交 PR，可以参考这两个组件中的 tryExecCommandCopy() / tryFallbackCopy() 实现。

To reply, just mention @dosu.

---

Share context across your team and agents. Try Dosu.