lkddi/chatroom
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases 4 Wiki Activity

迁移头像和设置弹窗事件绑定

Browse Source
This commit is contained in:
流星
2026-04-25 08:04:22 +08:00
parent 247283a282
commit 89f344bd29
3 changed files with 131 additions and 14 deletions
Download Patch File Download Diff File Expand all files Collapse all files
resources/js/chat-room.js
+4
View File
@@ -20,6 +20,7 @@ export {
submitBaccaratLossCoverEvent,
} from "./chat-room/baccarat-loss-cover-admin.js";
export { bindFishingControls } from "./chat-room/fishing.js";
export { bindProfileControls } from "./chat-room/profile-controls.js";
export {
BLOCKABLE_SYSTEM_SENDERS,
BLOCKED_SYSTEM_SENDERS_STORAGE_KEY,
@@ -64,6 +65,7 @@ import {
submitBaccaratLossCoverEvent,
} from "./chat-room/baccarat-loss-cover-admin.js";
import { bindFishingControls } from "./chat-room/fishing.js";
import { bindProfileControls } from "./chat-room/profile-controls.js";
import {
BLOCKABLE_SYSTEM_SENDERS,
BLOCKED_SYSTEM_SENDERS_STORAGE_KEY,
@@ -114,6 +116,7 @@ if (typeof window !== "undefined") {
openAdminBaccaratLossCoverModal,
submitBaccaratLossCoverEvent,
bindFishingControls,
bindProfileControls,
CHAT_FONT_SIZE_STORAGE_KEY,
restoreChatFontSize,
closeChatImageLightbox,
@@ -162,6 +165,7 @@ if (typeof window !== "undefined") {
bindAdminMenuControls();
bindBaccaratLossCoverAdminControls();
bindFishingControls();
bindProfileControls();
bindChatRightPanelControls();
bindMobileDrawerControls();
bindWelcomeMenuControls();
resources/js/chat-room/profile-controls.js
+114
View File
@@ -0,0 +1,114 @@
// 头像选择与个人设置弹窗事件绑定，替代 toolbar 中的内联 onclick/onchange。
let profileControlEventsBound = false;
/**
* 触发存量全局函数，保持当前头像与设置业务逻辑不变。
*
* @param {string} functionName 全局函数名
* @param {...unknown} args 参数
* @returns {void}
*/
function callGlobal(functionName, ...args) {
if (typeof window[functionName] === "function") {
window[functionName](...args);
}
}
/**
* 绑定头像选择器和个人设置弹窗事件。
*
* @returns {void}
*/
export function bindProfileControls() {
if (profileControlEventsBound || typeof document === "undefined") {
return;
}
profileControlEventsBound = true;
document.addEventListener("click", (event) => {
if (!(event.target instanceof Element)) {
return;
}
if (event.target.closest("[data-avatar-picker-close]")) {
event.preventDefault();
callGlobal("closeAvatarPicker");
return;
}
if (event.target.closest("[data-avatar-save]")) {
event.preventDefault();
callGlobal("saveAvatar");
return;
}
if (event.target.closest("[data-avatar-upload-trigger]")) {
event.preventDefault();
// 上传按钮只负责打开隐藏的 file input，上传校验仍由存量 handleAvatarUpload 负责。
document.getElementById("avatar-upload-input")?.click();
return;
}
if (event.target.closest("[data-settings-modal-close]")) {
event.preventDefault();
callGlobal("closeSettingsModal");
return;
}
if (event.target.closest("[data-settings-save-password]")) {
event.preventDefault();
callGlobal("savePassword");
return;
}
if (event.target.closest("[data-settings-send-email-code]")) {
event.preventDefault();
callGlobal("sendEmailCode");
return;
}
if (event.target.closest("[data-settings-copy-wechat-code]")) {
event.preventDefault();
callGlobal("copyWechatBindCode");
return;
}
if (event.target.closest("[data-settings-generate-wechat-code]")) {
event.preventDefault();
callGlobal("generateWechatBindCode");
return;
}
if (event.target.closest("[data-settings-unbind-wechat]")) {
event.preventDefault();
callGlobal("unbindWechat");
return;
}
if (event.target.closest("[data-settings-save-profile]")) {
event.preventDefault();
callGlobal("saveSettings");
return;
}
if (event.target.closest("[data-settings-modal-panel]")) {
event.stopPropagation();
return;
}
// 只在点击设置弹窗遮罩时关闭，避免内容区点击被误判。
if (event.target.closest("[data-settings-modal-overlay]")) {
callGlobal("closeSettingsModal");
}
});
document.addEventListener("change", (event) => {
if (!(event.target instanceof HTMLInputElement) || !event.target.matches("[data-avatar-upload-input]")) {
return;
}
// 保留原上传函数的文件大小校验、接口请求和在线名单刷新逻辑。
callGlobal("handleAvatarUpload", event.target);
});
}
resources/views/chat/partials/layout/toolbar.blade.php
+13 -14
View File
@@ -55,7 +55,7 @@
style="background:#336699; color:#fff; padding:10px 16px; font-size:14px; font-weight:bold;
display:flex; justify-content:space-between; align-items:center;">
<span>🖼 修改头像（原版风格）</span>
<span style="cursor:pointer; font-size:18px;" onclick="closeAvatarPicker()">✕</span>
<span style="cursor:pointer; font-size:18px;" data-avatar-picker-close>✕</span>
</div>
{{-- 预览区 --}}
@@ -65,14 +65,14 @@
<img id="avatar-preview" src="{{ str_starts_with($user->usersf, 'storage/') ? '/' . $user->usersf : '/images/headface/' . ($user->usersf ?: '1.gif') }}"
style="width:40px; height:40px; border:2px solid #336699; border-radius:4px; object-fit: cover;">
<span id="avatar-selected-name" style="font-size:12px; color:#333;">{{ $user->usersf ?: '未设置' }}</span>
<button id="avatar-save-btn" disabled onclick="saveAvatar()"
<button id="avatar-save-btn" disabled data-avatar-save
style="margin-left:auto; padding:5px 16px; background:#336699; color:#fff; border:none;
border-radius:3px; font-size:12px; cursor:pointer;">确定更换系统头像</button>
<div style="width:100%; height:1px; background:#ddd; margin: 4px 0;"></div>
<div style="display:flex; align-items:center; gap:8px; width:100%;">
<span style="font-size:12px; color:#666; font-weight:bold;">自定义头像上传(112x112)：</span>
<input type="file" id="avatar-upload-input" accept="image/jpeg,image/png,image/gif,image/webp" style="display:none;" onchange="handleAvatarUpload(this)">
<button id="avatar-upload-btn" onclick="document.getElementById('avatar-upload-input').click()"
<input type="file" id="avatar-upload-input" accept="image/jpeg,image/png,image/gif,image/webp" style="display:none;" data-avatar-upload-input>
<button id="avatar-upload-btn" data-avatar-upload-trigger
style="padding:5px 16px; background:#16a34a; color:#fff; border:none;
border-radius:3px; font-size:12px; cursor:pointer;">选择本地图片上传</button>
</div>
@@ -87,11 +87,10 @@
</div>
{{-- ═══════════ 个人设置弹窗 ═══════════ --}}
<div id="settings-modal"
onclick="closeSettingsModal()"
<div id="settings-modal" data-settings-modal-overlay
style="display:none; position:fixed; top:0; left:0; right:0; bottom:0;
background:rgba(0,0,0,0.5); z-index:10000; justify-content:center; align-items:center;">
<div onclick="event.stopPropagation()"
<div data-settings-modal-panel
style="background:#fff; border-radius:8px; width:380px; max-height:90vh;
box-shadow:0 8px 32px rgba(0,0,0,0.3); display:flex; flex-direction:column;">
{{-- --}}
@@ -99,7 +98,7 @@
style="background:linear-gradient(135deg,#336699,#5a8fc0); color:#fff;
padding:12px 16px; border-radius:8px 8px 0 0; display:flex; justify-content:space-between; align-items:center; flex-shrink:0;">
<span style="font-size:14px; font-weight:bold;">⚙️ 个人设置</span>
<span onclick="closeSettingsModal()"
<span data-settings-modal-close
style="cursor:pointer; font-size:18px; opacity:0.8;">&times;</span>
</div>
@@ -119,7 +118,7 @@
style="display:none; border-radius:10px; padding:10px 14px;
text-align:center; margin-top:8px; font-size:12px; font-weight:bold;">
</div>
<button onclick="savePassword()"
<button data-settings-save-password
style="padding:6px; background:#336699; color:#fff; border:none; border-radius:4px;
font-size:12px; cursor:pointer;">确定修改密码</button>
</div>
@@ -149,7 +148,7 @@
<label style="font-size:12px; width:50px; text-align:right;">验证码:</label>
<input id="set-email-code" type="text" placeholder="修改邮箱时必填" maxlength="6"
style="flex:1; padding:5px; border:1px solid #ccc; border-radius:4px; font-size:12px; max-width:100px;">
<button id="btn-send-code" type="button" onclick="sendEmailCode()"
<button id="btn-send-code" type="button" data-settings-send-email-code
style="padding:5px 10px; border:1px solid #336699; background:#eef5ff; color:#336699; border-radius:4px; font-size:12px; cursor:pointer;">
获取验证码
</button>
@@ -195,11 +194,11 @@
<div style="display:flex; align-items:center; gap:8px;">
<input id="wechat-bind-code" type="text" readonly value="点击生成"
style="flex:1; padding:6px 8px; border:1px dashed #336699; background:#f9fafb; border-radius:4px; font-size:13px; font-weight:bold; color:#336699; text-align:center; cursor:text;">
<button type="button" id="btn-copy-bind-code" onclick="copyWechatBindCode()"
<button type="button" id="btn-copy-bind-code" data-settings-copy-wechat-code
style="display:none; padding:5px 10px; border:1px solid #10b981; background:#ecfdf5; color:#10b981; border-radius:4px; font-size:12px; cursor:pointer; white-space:nowrap;">
复制
</button>
<button type="button" id="btn-generate-bind-code" onclick="generateWechatBindCode()"
<button type="button" id="btn-generate-bind-code" data-settings-generate-wechat-code
style="padding:5px 10px; border:1px solid #336699; background:#eef5ff; color:#336699; border-radius:4px; font-size:12px; cursor:pointer; white-space:nowrap;">
生成代码
</button>
@@ -208,7 +207,7 @@
@else
<div style="font-size:12px; color:#16a34a; font-weight:bold; display:flex; justify-content:space-between; align-items:center;">
<span>已绑定微信，可接收提醒通知。</span>
<button type="button" onclick="unbindWechat()" style="padding:4px 8px; background:#fee2e2; color:#dc2626; border:1px solid #fecaca; border-radius:4px; font-size:11px; cursor:pointer;">解除绑定</button>
<button type="button" data-settings-unbind-wechat style="padding:4px 8px; background:#fee2e2; color:#dc2626; border:1px solid #fecaca; border-radius:4px; font-size:11px; cursor:pointer;">解除绑定</button>
</div>
@endif
</div>
@@ -221,7 +220,7 @@
</div>
{{-- 保存按钮 --}}
<button onclick="saveSettings()"
<button data-settings-save-profile
style="width:100%; padding:8px; background:linear-gradient(135deg,#336699,#5a8fc0);
color:#fff; border:none; border-radius:4px; font-size:13px; font-weight:bold; cursor:pointer;">
💾 保存资料设置