From 0e555febddced94ad609d714d5aef4881da3b75b Mon Sep 17 00:00:00 2001 From: shuaiplus <2327005759@qq.com> Date: Thu, 15 May 2025 01:23:15 +0800 Subject: [PATCH] =?UTF-8?q?=E6=89=8B=E6=9C=BA=E9=80=82=E9=85=8D?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- web/index.html | 1 - web/main.js | 102 ++++++++++++++++++++++++++++++++------ web/style.css | 130 +++++++++++++++++++++++++++++++++++++++++++++++++ 3 files changed, 218 insertions(+), 15 deletions(-) diff --git a/web/index.html b/web/index.html index fe325c5..ef74fd9 100644 --- a/web/index.html +++ b/web/index.html @@ -59,7 +59,6 @@ -
diff --git a/web/main.js b/web/main.js index 6dee8e8..7023680 100644 --- a/web/main.js +++ b/web/main.js @@ -521,17 +521,26 @@ function renderMainHeader() { onlineCount += 1; } const safeRoomName = escapeHTML(roomName); + // 头部结构：更多按钮和右侧栏按钮互换位置，右侧栏按钮在最右侧 document.getElementById("main-header").innerHTML = ` -
-
#${safeRoomName}
- ${onlineCount} members + +
+
+
#${safeRoomName}
+ ${onlineCount} members +
- +
Share
Quit
@@ -539,6 +548,53 @@ function renderMainHeader() {
`; setupMoreBtnMenu(); + // 重新绑定移动端按钮事件 + const sidebar = document.getElementById('sidebar'); + const rightbar = document.getElementById('rightbar'); + const mobileMenuBtn = document.getElementById('mobile-menu-btn'); + const mobileInfoBtn = document.getElementById('mobile-info-btn'); + const sidebarMask = document.getElementById('mobile-sidebar-mask'); + const rightbarMask = document.getElementById('mobile-rightbar-mask'); + function isMobile() { + return window.innerWidth <= 768; + } + function updateMobileBtnDisplay() { + if (isMobile()) { + if (mobileMenuBtn) mobileMenuBtn.style.display = 'flex'; + if (mobileInfoBtn) mobileInfoBtn.style.display = 'flex'; + } else { + if (mobileMenuBtn) mobileMenuBtn.style.display = 'none'; + if (mobileInfoBtn) mobileInfoBtn.style.display = 'none'; + if (sidebar) sidebar.classList.remove('mobile-open'); + if (rightbar) rightbar.classList.remove('mobile-open'); + if (sidebarMask) sidebarMask.classList.remove('active'); + if (rightbarMask) rightbarMask.classList.remove('active'); + } + } + updateMobileBtnDisplay(); + window.addEventListener('resize', updateMobileBtnDisplay); + if (mobileMenuBtn && sidebar && sidebarMask) { + mobileMenuBtn.onclick = function(e) { + e.stopPropagation(); + sidebar.classList.add('mobile-open'); + sidebarMask.classList.add('active'); + }; + sidebarMask.onclick = function() { + sidebar.classList.remove('mobile-open'); + sidebarMask.classList.remove('active'); + }; + } + if (mobileInfoBtn && rightbar && rightbarMask) { + mobileInfoBtn.onclick = function(e) { + e.stopPropagation(); + rightbar.classList.add('mobile-open'); + rightbarMask.classList.add('active'); + }; + rightbarMask.onclick = function() { + rightbar.classList.remove('mobile-open'); + rightbarMask.classList.remove('active'); + }; + } } // 清空消息区（UI占位） @@ -837,6 +893,7 @@ window.addEventListener('DOMContentLoaded', () => { const loginContainer = document.getElementById('login-container'); const chatContainer = document.getElementById('chat-container'); const loginForm = document.getElementById('login-form'); + if (loginForm) { loginForm.addEventListener('submit', loginFormHandler(null)); } @@ -916,7 +973,8 @@ window.addEventListener('DOMContentLoaded', () => { setupTabs(); renderChatArea(); - // 移动端侧栏/右栏按钮和遮罩逻辑 + const sidebar = document.getElementById('sidebar'); + const rightbar = document.getElementById('rightbar'); const mobileMenuBtn = document.getElementById('mobile-menu-btn'); const mobileInfoBtn = document.getElementById('mobile-info-btn'); const sidebarMask = document.getElementById('mobile-sidebar-mask'); @@ -965,24 +1023,40 @@ window.addEventListener('DOMContentLoaded', () => { rightbarMask.classList.remove('active'); }; } - // 切换房间/成员时自动关闭侧栏 - function closeMobilePanels() { - if (sidebar) sidebar.classList.remove('mobile-open'); - if (sidebarMask) sidebarMask.classList.remove('active'); - if (rightbar) rightbar.classList.remove('mobile-open'); - if (rightbarMask) rightbarMask.classList.remove('active'); - } + // 点击其它区域关闭侧栏/右栏 + document.addEventListener('click', function(ev) { + if (!isMobile()) return; + if (sidebar && sidebar.classList.contains('mobile-open')) { + if (!sidebar.contains(ev.target) && ev.target !== mobileMenuBtn) { + sidebar.classList.remove('mobile-open'); + sidebarMask.classList.remove('active'); + } + } + if (rightbar && rightbar.classList.contains('mobile-open')) { + if (!rightbar.contains(ev.target) && ev.target !== mobileInfoBtn) { + rightbar.classList.remove('mobile-open'); + rightbarMask.classList.remove('active'); + } + } + }); + // 监听房间点击和成员tab点击 const roomList = document.getElementById('room-list'); if (roomList) { roomList.addEventListener('click', function() { - if (isMobile()) closeMobilePanels(); + if (isMobile()) { + if (sidebar) sidebar.classList.remove('mobile-open'); + if (sidebarMask) sidebarMask.classList.remove('active'); + } }); } const memberTabs = document.getElementById('member-tabs'); if (memberTabs) { memberTabs.addEventListener('click', function() { - if (isMobile()) closeMobilePanels(); + if (isMobile()) { + if (rightbar) rightbar.classList.remove('mobile-open'); + if (rightbarMask) rightbarMask.classList.remove('active'); + } }); } }); \ No newline at end of file diff --git a/web/style.css b/web/style.css index b25b5a9..8cfc407 100644 --- a/web/style.css +++ b/web/style.css @@ -1222,3 +1222,133 @@ body { cursor: grab; user-select: none; } + +@media (max-width: 768px) { + html, body { + width: 100vw; + height: 100vh; + min-width: 0; + min-height: 0; + max-width: 100vw; + max-height: 100vh; + overflow: hidden; + position: fixed; + margin: 0; + padding: 0; + overscroll-behavior: none; + /* 不要强制 background: #fff;，避免覆盖主区域背景 */ + } + .container { + width: 100vw; + height: 100vh; + min-width: 0; + min-height: 0; + max-width: 100vw; + max-height: 100vh; + overflow: hidden; + margin: 0; + padding: 0; + position: fixed; + left: 0; top: 0; + } + .main { + width: 100vw; + height: 100vh; + min-width: 0; + min-height: 0; + max-width: 100vw; + max-height: 100vh; + overflow: hidden; + margin: 0; + padding: 0; + position: relative; + flex: 1 1 100%; + } + .chat-area { + width: 100vw; + max-width: 100vw; + min-width: 0; + flex: 1 1 auto; + overflow-y: auto; + box-sizing: border-box; + background: none; + margin: 0; + padding: 16px 4px 8px 4px; + } + .chat-input-area { + width: 100vw; + max-width: 100vw; + min-width: 0; + box-sizing: border-box; + margin: 0; + padding: 5px 15px 10px 10px; + } + /* 防止页面被拖动 */ + * { + touch-action: pan-y; + } + .sidebar, + .rightbar { + position: fixed; + top: 0; + bottom: 0; + z-index: 1000; + height: 100vh; + background: #fff; + transition: transform 0.28s cubic-bezier(.4,0,.2,1), box-shadow 0.18s; + box-shadow: 2px 0 16px #0002; + } + .sidebar { + left: 0; + max-width: 70vw; + transform: translateX(-100%); + border-right: 1px solid #e0e0e0; + } + .sidebar.mobile-open { + transform: translateX(0); + } + .rightbar { + right: 0; + max-width: 70vw; + transform: translateX(100%); + border-left: 1px solid #e0e0e0; + } + .rightbar.mobile-open { + transform: translateX(0); + } + .mobile-sidebar-mask, + .mobile-rightbar-mask { + display: none; + position: fixed; + left: 0; top: 0; right: 0; bottom: 0; + background: rgba(0,0,0,0.18); + z-index: 999; + } + .mobile-sidebar-mask.active, + .mobile-rightbar-mask.active { + display: block; + } + .mobile-menu-btn, + .mobile-info-btn { + background: rgba(255, 255, 255, 0.85); + border: none; + align-items: center; + width: 38px; + height: 38px; + z-index: 1100; + cursor: pointer; + border-radius: 50%; + transition: background 0.18s, box-shadow 0.18s, transform 0.22s cubic-bezier(.4,0,.2,1); + opacity: 1; + will-change: transform, opacity; + color: #707070; + } + .mobile-menu-btn:active, + .mobile-info-btn:active { + background: #e0e0e0; + transform: scale(0.93); + } + .settings-panel-card { + left: 2vw !important; + } +} \ No newline at end of file