feat: 聊天室手机端自适应
- 新增 mobile-drawer.blade.php：手机端浮动按钮 + 工具菜单抽屉 + 名单抽屉（独立维护） - frame.blade.php：手机端代码改为 @include 引入 - chat.css：添加 @media (max-width: 640px) 响应式样式 - 隐藏桌面端工具条和右侧名单面板 - 浮动按钮样式（位于屏幕中间偏右） - 抽屉组件从顶部向下展开 - 手机端隐藏房间介绍、输入栏动作/字色/字号/禁音/分屏控件 - 现有 modal 弹窗 max-width 自适应修复 - scripts.blade.php：重构 renderUserList 提取 _renderUserListToContainer - 修复代码损坏残留，补回 setAction/scrollToBottom/autoScrollEl
This commit is contained in:
@@ -658,4 +658,225 @@ a:hover {
|
||||
100% {
|
||||
transform: scale(1) rotate(0deg);
|
||||
}
|
||||
}
|
||||
|
||||
/* ═══════════════════════════════════════════════════
|
||||
手机端响应式布局（≤ 640px）
|
||||
═══════════════════════════════════════════════════ */
|
||||
@media (max-width: 640px) {
|
||||
|
||||
/* 隐藏中间工具条和右侧面板，让消息区占满全宽 */
|
||||
.chat-toolbar,
|
||||
.chat-right {
|
||||
display: none !important;
|
||||
}
|
||||
|
||||
/* 输入框最小宽度适配手机屏 */
|
||||
.input-bar .say-input {
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
/* ── 右下角浮动按钮组 ── */
|
||||
#mobile-fabs {
|
||||
position: fixed;
|
||||
top: 35%;
|
||||
right: 10px;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
gap: 8px;
|
||||
z-index: 500;
|
||||
}
|
||||
|
||||
.mobile-fab {
|
||||
width: 44px;
|
||||
height: 44px;
|
||||
border-radius: 50%;
|
||||
border: none;
|
||||
background: var(--bg-header);
|
||||
color: #fff;
|
||||
font-size: 18px;
|
||||
cursor: pointer;
|
||||
box-shadow: 0 3px 10px rgba(0, 0, 0, 0.35);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
transition: transform 0.15s, background 0.15s;
|
||||
user-select: none;
|
||||
-webkit-tap-highlight-color: transparent;
|
||||
}
|
||||
|
||||
.mobile-fab:active {
|
||||
transform: scale(0.92);
|
||||
background: var(--border-blue);
|
||||
}
|
||||
|
||||
/* ── 抽屉遮罩 ── */
|
||||
#mobile-drawer-mask {
|
||||
display: none;
|
||||
position: fixed;
|
||||
inset: 0;
|
||||
background: rgba(0, 0, 0, 0.45);
|
||||
z-index: 600;
|
||||
}
|
||||
|
||||
#mobile-drawer-mask.open {
|
||||
display: block;
|
||||
}
|
||||
|
||||
/* ── 抽屉通用容器（顶部向下滑入） ── */
|
||||
.mobile-drawer {
|
||||
position: fixed;
|
||||
left: 0;
|
||||
right: 0;
|
||||
top: 0;
|
||||
z-index: 700;
|
||||
background: #fff;
|
||||
border-bottom: 2px solid var(--border-blue);
|
||||
border-radius: 0 0 14px 14px;
|
||||
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.25);
|
||||
transform: translateY(-100%);
|
||||
transition: transform 0.28s cubic-bezier(0.4, 0, 0.2, 1);
|
||||
overflow: hidden;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.mobile-drawer.open {
|
||||
transform: translateY(0);
|
||||
}
|
||||
|
||||
/* 抽屉顶部标题栏 */
|
||||
.mobile-drawer-header {
|
||||
background: var(--bg-header);
|
||||
color: #fff;
|
||||
padding: 10px 14px;
|
||||
font-size: 14px;
|
||||
font-weight: bold;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.mobile-drawer-close {
|
||||
background: none;
|
||||
border: none;
|
||||
color: #fff;
|
||||
font-size: 20px;
|
||||
cursor: pointer;
|
||||
line-height: 1;
|
||||
opacity: 0.85;
|
||||
padding: 0 4px;
|
||||
}
|
||||
|
||||
/* ── 工具条抽屉：横向网格排列按钮 ── */
|
||||
#mobile-drawer-toolbar .mobile-drawer-body {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(5, 1fr);
|
||||
gap: 1px;
|
||||
background: var(--border-blue);
|
||||
max-height: 55vh;
|
||||
overflow-y: auto;
|
||||
}
|
||||
|
||||
#mobile-drawer-toolbar .mobile-tool-btn {
|
||||
background: var(--bg-toolbar);
|
||||
color: #ddd;
|
||||
font-size: 13px;
|
||||
padding: 14px 4px;
|
||||
text-align: center;
|
||||
cursor: pointer;
|
||||
user-select: none;
|
||||
-webkit-tap-highlight-color: transparent;
|
||||
transition: background 0.15s, color 0.15s;
|
||||
writing-mode: horizontal-tb;
|
||||
letter-spacing: 0;
|
||||
}
|
||||
|
||||
#mobile-drawer-toolbar .mobile-tool-btn:active {
|
||||
background: #5599cc;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
/* ── 名单/房间抽屉：复用原 right-panel 结构 ── */
|
||||
#mobile-drawer-users .mobile-drawer-body {
|
||||
max-height: 65vh;
|
||||
overflow: hidden;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
#mobile-drawer-users .mobile-right-clone {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
flex: 1;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
/* 抽屉内的 tabs 复用样式 */
|
||||
#mobile-drawer-users .right-tabs {
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
#mobile-drawer-users .user-list-content {
|
||||
flex: 1;
|
||||
overflow-y: auto;
|
||||
max-height: calc(65vh - 80px);
|
||||
}
|
||||
|
||||
#mobile-drawer-users .online-stats {
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
/* ── 名单抽屉内用户列表 item 放大触摸区域 ── */
|
||||
#mob-online-users-list .user-item {
|
||||
padding: 7px 8px;
|
||||
font-size: 13px;
|
||||
}
|
||||
|
||||
/* ── 现有弹窗（settings / avatar / shop）手机端自适应 ── */
|
||||
/* 防止固定像素宽度的 modal 内容区超出手机屏宽 */
|
||||
#settings-modal > div,
|
||||
#avatar-picker-modal > div {
|
||||
width: 92vw !important;
|
||||
max-width: 420px !important;
|
||||
max-height: 85vh !important;
|
||||
}
|
||||
|
||||
#shop-modal {
|
||||
padding: 12px 6px !important;
|
||||
}
|
||||
|
||||
#shop-modal-inner {
|
||||
width: 92vw !important;
|
||||
max-width: 420px !important;
|
||||
max-height: 85vh !important;
|
||||
overflow-y: auto !important;
|
||||
}
|
||||
|
||||
/* ── 手机端隐藏房间介绍 ── */
|
||||
.room-desc {
|
||||
display: none !important;
|
||||
}
|
||||
|
||||
/* ── 手机端隐藏输入栏中不常用的控件（动作/字色/字号/禁音/分屏） ── */
|
||||
/* 用 :has() 选择器精准定位含对应 input/select 的 label */
|
||||
.input-row label:has(#action),
|
||||
.input-row label:has(#font_color),
|
||||
.input-row label:has(#font_size_select),
|
||||
.input-row label:has(#sound_muted),
|
||||
.input-row label:has(#split_screen) {
|
||||
display: none !important;
|
||||
}
|
||||
}
|
||||
|
||||
/* 桌面端（> 640px）不显示浮动按钮和抽屉组件 */
|
||||
@media (min-width: 641px) {
|
||||
#mobile-fabs,
|
||||
#mobile-drawer-mask,
|
||||
#mobile-drawer-toolbar,
|
||||
#mobile-drawer-users {
|
||||
display: none !important;
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user