fix(phase2e-2): 全局 H5 容器铺满视口 + 静默自动清理 stale 会议
问题
1. 桌面浏览器大窗口下所有页面内容偏左上、右下大片空白:
uni-app H5 的 html/body/#app/uni-page-* 默认不显式 100% 高度,
且 .room 仅靠 position:fixed inset:0 在某些模式下可能被祖先
容器尺寸限制,导致 toolbar / tabBar 不贴底、内容挤在左上角
2. 刷新会议后再次加入会触发 toast "你不在当前会议中":
cleanupStaleMeetings 对列表里已过期的会议调 leave 必然返回 400,
被全局 request 拦截器误报给用户
3. 会议界面部分按钮点击无反应:
根因同 #1,布局错位后按钮视觉位置与 hit box 不一致
修复
- App.vue: H5 条件编译注入全局基础样式,强制 html/body/#app/uni-app/
uni-page/uni-page-wrapper/uni-page-body 宽高铺满,min-height 100%
- room.vue: .room 追加 width/height/min-width/min-height: 100vw/100vh 冗余
+ z-index:10,彻底兜底 position:fixed 失效场景
- request.js: 新增 options.silent 选项,业务错误 / 401 / 403 / 500 /
网络异常均根据 silent 决定是否弹 toast;401 仍会跳登录
- api/meeting.js: createRoom / joinRoom / leaveRoom 均接受 options 参数
- store/meeting.js:
· cleanupStaleMeetings 内 leave 传 silent:true 忽略幂等错误
· joinAndEnter / createAndEnter 首次尝试(未重试时)传 silent:true,
若命中 staleMeetingHint 自动清理重试,对用户完全无感;重试仍失败
的真实错误走正常 toast
验证
- Playwright 1024x576:room 页 / profile 页 / chat 列表 / 刷新后重新加入
流程截图均显示全屏铺满、tabBar/toolbar 贴底、无误报 toast
- 刷新 → join → 预览 → 加入 日志:首次 400 静默 → 自动清理 → 重试加入
成功,MediaEngine 正常建立
Made-with: Cursor
This commit is contained in:
@@ -530,12 +530,20 @@ onUnload(() => {
|
||||
|
||||
<style scoped>
|
||||
.room {
|
||||
/* 使用 fixed + 100vw/100vh 双重保险:
|
||||
某些祖先(uni-page-wrapper)带 transform 时 fixed 会相对该祖先而非视口;
|
||||
显式 100vw/100vh 可保证始终铺满整个浏览器窗口。 */
|
||||
position: fixed;
|
||||
inset: 0;
|
||||
width: 100vw;
|
||||
height: 100vh;
|
||||
min-width: 100vw;
|
||||
min-height: 100vh;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
background: #0F172A;
|
||||
color: #F3F4F6;
|
||||
z-index: 10;
|
||||
}
|
||||
|
||||
.top-bar {
|
||||
|
||||
Reference in New Issue
Block a user