fix(phase2e-2): 会议内聊天面板 UI 布局优化

问题修复:
- 原遮罩式抽屉覆盖底部 toolbar,导致按钮不可点击
- 发送按钮过小不显眼
- 聊天面板打开时视频区被遮挡出现大片空白

改进:
- room.vue 主区改为 flex-row 布局:视频列 + 聊天列并排,聊天打开时视频自动收窄
- ChatPanel 去除全屏遮罩,作为侧边栏嵌入 chat-col,保留过渡动画
- 发送按钮增加纸飞机图标并采用渐变背景,hover / active / disabled 状态清晰
- msg-list 使用 flex:1 + min-height:0 + height:0 修复 scroll-view 高度撑破问题,保证输入区始终固定在底部
- 小屏(<750px)自动回退为全屏浮层,避免挤压视频

Made-with: Cursor
This commit is contained in:
bujinyuan
2026-04-22 15:32:10 +08:00
parent 1222bf551d
commit 16225c413d
2 changed files with 103 additions and 69 deletions

View File

@@ -34,22 +34,38 @@
</view>
</view>
<!-- 视频网格 -->
<!-- 主区左视频 + 右侧聊天面板 chatVisible 时侧栏展开 -->
<view class="body">
<VideoGrid :tiles="tiles">
<template #tile="{ tile }">
<VideoTile
:user-id="tile.userId"
:name="tile.name"
:is-local="tile.isLocal"
:is-host="tile.isHost"
:audio-enabled="tile.audioEnabled"
:video-enabled="tile.videoEnabled"
:audio-track="tile.audioTrack"
:video-track="tile.videoTrack"
/>
</template>
</VideoGrid>
<view class="video-col">
<VideoGrid :tiles="tiles">
<template #tile="{ tile }">
<VideoTile
:user-id="tile.userId"
:name="tile.name"
:is-local="tile.isLocal"
:is-host="tile.isHost"
:audio-enabled="tile.audioEnabled"
:video-enabled="tile.videoEnabled"
:audio-track="tile.audioTrack"
:video-track="tile.videoTrack"
/>
</template>
</VideoGrid>
</view>
<view class="chat-col" :class="{ open: chatVisible }">
<ChatPanel
:visible="chatVisible"
:messages="chatMessages"
:current-user-id="myUserId"
:display-name-map="displayNameMap"
:has-more="chatHasMore"
:loading-more="chatLoadingMore"
@close="closeChat"
@send="onChatSend"
@load-more="onChatLoadMore"
@request-initial-load="onChatRequestInitialLoad"
/>
</view>
</view>
<!-- 底部工具条 -->
@@ -92,20 +108,6 @@
@close="inviteVisible = false"
/>
<!-- 聊天面板 -->
<ChatPanel
:visible="chatVisible"
:messages="chatMessages"
:current-user-id="myUserId"
:display-name-map="displayNameMap"
:has-more="chatHasMore"
:loading-more="chatLoadingMore"
@close="closeChat"
@send="onChatSend"
@load-more="onChatLoadMore"
@request-initial-load="onChatRequestInitialLoad"
/>
<!-- 离会确认弹窗 -->
<view v-if="leaveDialogVisible" class="leave-mask" @click.self="leaveDialogVisible = false">
<view class="leave-modal">
@@ -633,6 +635,31 @@ onUnload(() => {
min-height: 0;
background: #0B1220;
overflow: hidden;
display: flex;
flex-direction: row;
}
.video-col {
flex: 1;
min-width: 0;
min-height: 0;
display: flex;
overflow: hidden;
}
.chat-col {
width: 0;
min-height: 0;
flex-shrink: 0;
overflow: hidden;
transition: width 0.24s ease;
border-left: 1rpx solid rgba(255, 255, 255, 0.06);
background: #1F2937;
}
.chat-col.open { width: 640rpx; }
@media (max-width: 750px) {
/* 小屏幕:聊天面板改为全屏浮层,避免挤压视频 */
.chat-col { position: fixed; top: 0; right: 0; bottom: 0; z-index: 205; }
.chat-col.open { width: 100vw; }
}
/* 离会弹窗 */