From 3aa8174bc02a06e154ce446cfbe5c943571c2687 Mon Sep 17 00:00:00 2001
From: bujinyuan <bujinyuan@qianxin.com>
Date: Wed, 22 Apr 2026 16:27:16 +0800
Subject: [PATCH] =?UTF-8?q?fix(meeting):=20=E6=8A=B9=E9=99=A4=20uni-button?=
 =?UTF-8?q?=20::after=20=E9=81=AE=E7=BD=A9=E4=BF=AE=E5=A4=8D=E5=B7=A5?=
 =?UTF-8?q?=E5=85=B7=E6=A0=8F=E7=82=B9=E5=87=BB=E5=A4=B1=E6=95=88?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

uni-app H5 会给每个 <button> 编译后的 <uni-button> 自动注入一个
::after 伪元素作为点击态反馈遮罩，其 inset 为 0 -1200px -80px 0
（即 2400px × 160px），向按钮右侧扩展 1200px，下方扩展 80px。

这导致会议工具栏（MeetingToolbar）里每个按钮的 ::after 都横跨整个
toolbar，最后一个"离开"按钮 DOM 顺序最上，其 ::after 覆盖了所有
兄弟按钮的命中区域：点击"静音/视频/邀请/成员/聊天"时实际都命中
"离开"按钮的 ::after，触发离开弹窗；且弹窗中的"取消"按钮同样被
右侧"结束会议"按钮的 ::after 遮挡，点击取消反而会触发结束会议。

修复：在 .btn 和 .leave-btn 上显式设置 ::after { content: none;
display: none }，并把按钮设为 position: relative 固化堆叠上下文。

验证：Playwright 真实点击各按钮 hitSelf=true，取消按钮不再
错误触发结束会议逻辑。

Made-with: Cursor
---
 frontend/src/components/meeting/MeetingToolbar.vue |  9 +++++++++
 frontend/src/pages/meeting/room.vue                | 13 ++++++++++++-
 2 files changed, 21 insertions(+), 1 deletion(-)

diff --git a/frontend/src/components/meeting/MeetingToolbar.vue b/frontend/src/components/meeting/MeetingToolbar.vue
index 03a6fe0..6b4405d 100644
--- a/frontend/src/components/meeting/MeetingToolbar.vue
+++ b/frontend/src/components/meeting/MeetingToolbar.vue
@@ -142,6 +142,15 @@ const emitIf = (name) => {
   border-radius: 16rpx;
   transition: background-color 0.15s ease, transform 0.1s ease;
   color: rgba(255, 255, 255, 0.85);
+  position: relative;
+}
+/* 关键修复：uni-app H5 会为 <button> 编译后的 <uni-button> 自动注入一个
+   伪元素 ::after（尺寸约 2400rpx × 160rpx，向右下延伸），
+   作为点击态反馈遮罩；若不抹除，会覆盖右侧所有兄弟按钮，
+   导致除最后一个按钮外其他按钮都"点不到"。 */
+.btn::after {
+  content: none !important;
+  display: none !important;
 }
 .btn:hover { background: rgba(255, 255, 255, 0.06); }
 .btn:active { transform: translateY(1rpx); }
diff --git a/frontend/src/pages/meeting/room.vue b/frontend/src/pages/meeting/room.vue
index bd5cf7d..ac5f040 100644
--- a/frontend/src/pages/meeting/room.vue
+++ b/frontend/src/pages/meeting/room.vue
@@ -548,7 +548,10 @@ onUnload(() => {
   flex-direction: column;
   background: #0F172A;
   color: #F3F4F6;
-  z-index: 10;
+  /* 必须高于 CustomTabBar（z-index:999），否则从带 tabBar 的页面
+     navigateTo 进会议室后，上一页遗留的 tabBar 会悬浮覆盖 toolbar
+     导致静音/摄像头/邀请/成员/聊天按钮全部被拦截 */
+  z-index: 1000;
 }
 
 .top-bar {
@@ -721,6 +724,14 @@ onUnload(() => {
   font-size: 26rpx;
   font-weight: 600;
   transition: background-color 0.12s ease;
+  position: relative;
+}
+/* 同样抹除 uni-app H5 自动注入的 ::after 遮罩（inset: 0 -1200px -80px 0），
+   否则 cancel 按钮的 ::after 会覆盖到右侧确认按钮区域，
+   导致点击 "取消" 命中 "结束会议" 逻辑。 */
+.leave-btn::after {
+  content: none !important;
+  display: none !important;
 }
 .leave-cancel {
   background: #F3F4F6;