From 072cf8dc8edd3c3af2d05fc1e51784db4d8a89a9 Mon Sep 17 00:00:00 2001 From: shuaiplus <2327005759@qq.com> Date: Tue, 20 May 2025 19:19:01 +0800 Subject: [PATCH] =?UTF-8?q?=E4=BC=98=E5=8C=96=E8=A1=A8=E6=83=85=E9=80=89?= =?UTF-8?q?=E6=8B=A9=E5=99=A8=E6=A0=B7=E5=BC=8F=EF=BC=8C=E8=B0=83=E6=95=B4?= =?UTF-8?q?emoji=E5=A4=A7=E5=B0=8F=E8=AE=BE=E7=BD=AE?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- web/main.js | 84 ++++++++++++++++++++++++++++++++++------------- web/util.emoji.js | 1 - 2 files changed, 61 insertions(+), 24 deletions(-) diff --git a/web/main.js b/web/main.js index 5aa0a20..ea41e35 100644 --- a/web/main.js +++ b/web/main.js @@ -1,6 +1,16 @@ +/** + * NodeCrypt 聊天应用主入口文件 + * 负责初始化界面、绑定事件及协调各模块功能 + */ + +// === 工具模块导入 === import { processImage, setupImageSend } from './util.image.js'; import { setupEmojiPicker } from './util.emoji.js'; import { openSettingsPanel, closeSettingsPanel, initSettings, notifyMessage } from './util.settings.js'; +import { escapeHTML, textToHTML } from './util.string.js'; +import { $, $$, $id, on, off, addClass, removeClass } from './util.dom.js'; + +// === 核心功能模块导入 === import { roomsData, activeRoomIndex, @@ -17,6 +27,7 @@ import { updateChatInputStyle, setupInputPlaceholder } from './chat.js'; +// === 界面相关模块导入 === import { renderUserList, renderMainHeader, @@ -27,17 +38,26 @@ import { setupTabs, autofillRoomPwd } from './ui.js'; -import { escapeHTML, textToHTML } from './util.string.js'; -import { $, $$, $id, on, off, addClass, removeClass } from './util.dom.js'; -// 全局配置 +// === 全局配置 === + +/** + * 应用全局配置 + * rsaPublic: RSA公钥，用于加密通信 + * wsAddress: WebSocket服务器地址 + * debug: 是否开启调试模式 + */ window.config = { rsaPublic: 'MIIBIjANBgkqhkiG9w0BAQEFAAOCAQ8AMIIBCgKCAQEA7+gGYn7Wavs/WpcubvlJX9IBhv4eQtOdcedmquodYVQl5l2Jd64cNj/okIxMpQqtvJW/zvN6BNHAgBKyB5D6Yf9qHN0FwdXnAsSVxlAHA2guMOpXQFjyYj01BRrRAGMOyYkYlhQ+cvgoJzaE2skO/aYqYzrqOnexaUFLYN+1xEITqrTwpKnCPdlhGArrXYFTmloBOJy18CYlNyJkdbsUN/Q7Lxyq3bkLsPx2Gr80wh4rUQltc+VY5CYqjxuRwV65o04hspfS9VHXnT5OSAElDDNBys1u3hr3j1WDXSB9+v9ksA8NCi8j+iN7ADaqMGPA82EaSbYcFpd9alLHBGa9GwIDAQAB', wsAddress: 'wss://crypt.works/ws', debug: true }; -// 将关键函数暴露给全局，以便其他模块调用 +// === 全局函数导出 === + +/** + * 将核心函数暴露给全局作用域，便于跨模块调用 + */ window.addSystemMsg = addSystemMsg; window.joinRoom = joinRoom; window.notifyMessage = notifyMessage; @@ -45,10 +65,13 @@ window.setupEmojiPicker = setupEmojiPicker; // 页面初始化 window.addEventListener('DOMContentLoaded', () => { + // 获取主要UI元素 const loginContainer = $id('login-container'); const chatContainer = $id('chat-container'); const loginForm = $id('login-form'); + // === 登录相关初始化 === + // 绑定初始登录表单 if (loginForm) { loginForm.addEventListener('submit', loginFormHandler(null)); @@ -56,7 +79,9 @@ window.addEventListener('DOMContentLoaded', () => { // 绑定"进入新房间"按钮 const joinBtn = $('.join-room'); - if (joinBtn) joinBtn.onclick = openLoginModal; + if (joinBtn) { + joinBtn.onclick = openLoginModal; + } // 禁止主登录页输入框输入空格 preventSpaceInput($id('userName')); @@ -65,7 +90,8 @@ window.addEventListener('DOMContentLoaded', () => { // 自动填充URL参数中的房间信息 autofillRoomPwd(); - + // === 界面组件初始化 === + // 设置各种UI组件 setupInputPlaceholder(); setupMoreBtnMenu(); @@ -76,16 +102,15 @@ window.addEventListener('DOMContentLoaded', () => { initSettings(); // 设置按钮点击事件 - let settingsBtn = $id('settings-btn'); + const settingsBtn = $id('settings-btn'); if (settingsBtn) { settingsBtn.onclick = (e) => { e.stopPropagation(); openSettingsPanel(); }; } - // 点击其它区域关闭设置面板 - document.addEventListener('click', function(ev) { + document.addEventListener('click', (ev) => { const panel = $id('settings-panel'); if (panel && panel.style.display === 'block') { const card = panel.querySelector('.settings-panel-card'); @@ -94,12 +119,13 @@ window.addEventListener('DOMContentLoaded', () => { } } }); + // === 消息收发功能 === // 自动聚焦到输入框并设置消息发送逻辑 const input = document.querySelector('.input-message-input'); if (input) { input.focus(); - input.addEventListener('keydown', function(e) { + input.addEventListener('keydown', (e) => { if (e.key === 'Enter' && !e.shiftKey) { e.preventDefault(); const text = input.innerText.trim(); @@ -128,7 +154,7 @@ window.addEventListener('DOMContentLoaded', () => { }); } - // 附件按钮和图片发送、粘贴图片功能 + // 图片发送功能 setupImageSend({ inputSelector: '.input-message-input', attachBtnSelector: '.chat-attach-btn', @@ -156,23 +182,26 @@ window.addEventListener('DOMContentLoaded', () => { } }); - // 初始化UI - renderMainHeader(); - renderUserList(); setupTabs(); + // 移动端适配辅助函数 + const isMobile = () => { + return window.innerWidth <= 768; + }; - // 监听房间点击和成员tab点击（移动端） + // 初始化UI组件 + renderMainHeader(); + renderUserList(); + setupTabs(); + + // 移动端侧边栏处理 const roomList = $id('room-list'); const sidebar = $id('sidebar'); const rightbar = $id('rightbar'); const sidebarMask = $id('mobile-sidebar-mask'); const rightbarMask = $id('mobile-rightbar-mask'); - const isMobile = () => { - return window.innerWidth <= 768; - } - + // 监听房间列表点击（移动端） if (roomList) { - roomList.addEventListener('click', function() { + roomList.addEventListener('click', () => { if (isMobile()) { if (sidebar) sidebar.classList.remove('mobile-open'); if (sidebarMask) sidebarMask.classList.remove('active'); @@ -180,9 +209,10 @@ window.addEventListener('DOMContentLoaded', () => { }); } + // 监听成员标签点击（移动端） const memberTabs = $id('member-tabs'); if (memberTabs) { - memberTabs.addEventListener('click', function() { + memberTabs.addEventListener('click', () => { if (isMobile()) { if (rightbar) removeClass(rightbar, 'mobile-open'); if (rightbarMask) removeClass(rightbarMask, 'active'); @@ -191,12 +221,20 @@ window.addEventListener('DOMContentLoaded', () => { } }); -// 清空消息区（UI占位） +// === 辅助函数 === + +/** + * 清空消息区域 + * 用于UI重置或切换房间 + */ function clearChat() { $id("chat-area").innerHTML = ""; } -// Telegram风格输入框占位符逻辑 +/** + * Telegram风格输入框自动增高 + * 随着用户输入内容增加，输入框自动调整高度 + */ function autoGrowInput() { const input = $('.input-message-input'); if (!input) return; diff --git a/web/util.emoji.js b/web/util.emoji.js index 396aa4d..947af7a 100644 --- a/web/util.emoji.js +++ b/web/util.emoji.js @@ -27,7 +27,6 @@ const addEmojiPickerStyles = () => { style.id = 'emoji-picker-styles'; style.textContent = ` emoji-picker { - --emoji-size: 1.25rem; --background: #fff; --border-color: rgba(0, 0, 0, 0.1); --border-radius: 10px;