fix(meeting): 聊天面板点击失效 & 成员/邀请按钮支持 toggle

ChatPanel 的 .btn-send 使用了 all:unset 导致 position 变为 static,
其 uni-app 自动注入的 ::after 伪元素(inset: 0 -1200px -80px 0)
absolute 定位会回溯到 body 作为 containing block,
形成一个覆盖几乎整个视口的隐形遮罩层,导致聊天面板的关闭按钮 (.btn-close)、
输入框 (textarea) 甚至发送按钮本身周围区域都无法点击/输入。

修复:
1. ChatPanel 的 .btn-send::after 从仅 border:none 升级为
   content:none + display:none,彻底抹除遮罩
2. room.vue 中 openMembers / openInvite 改为 toggle 切换,
   解决"再次点击成员按钮面板不会关闭"的问题

验证:Playwright 真实 DOM 命中测试 close/textarea/send 全部 hitSelf=true,
成员按钮二次点击面板正常关闭。

Made-with: Cursor
This commit is contained in:
bujinyuan
2026-04-22 16:34:30 +08:00
parent 3aa8174bc0
commit a311c03a21
2 changed files with 12 additions and 4 deletions

View File

@@ -396,8 +396,16 @@ const close = () => emit('close')
line-height: 1; line-height: 1;
box-sizing: border-box; box-sizing: border-box;
} }
/* 防御 uni-app H5 <uni-button> 内部嵌套 <button> 的全宽/默认边框 */ /* 关键防御uni-app H5 会给 <uni-button> 注入一个 ::after 伪元素
.btn-send::after { border: none !important; } inset: 0 -1200px -80px 0, 即 2400x160 的点击反馈遮罩)。
由于 .btn-send 使用 all:unset 后 position 变为 static
::after 的 absolute 定位会回溯到 body 作为 containing block
形成横跨整个视口的覆盖层,阻挡关闭按钮、输入框的点击。
这里彻底禁用 ::after。 */
.btn-send::after {
content: none !important;
display: none !important;
}
.input-area ::v-deep(uni-button.btn-send) { .input-area ::v-deep(uni-button.btn-send) {
width: auto; width: auto;
margin: 0; margin: 0;

View File

@@ -376,8 +376,8 @@ const onCamToggle = async () => {
} }
} }
const openInvite = () => { inviteVisible.value = true } const openInvite = () => { inviteVisible.value = !inviteVisible.value }
const openMembers = () => { memberVisible.value = true } const openMembers = () => { memberVisible.value = !memberVisible.value }
const openChat = () => { const openChat = () => {
// 点击工具栏聊天按钮时进行切换:已打开 → 关闭;未打开 → 打开并标记已读 // 点击工具栏聊天按钮时进行切换:已打开 → 关闭;未打开 → 打开并标记已读
if (chatVisible.value) { if (chatVisible.value) {