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

修复手机端双触发弹窗：名单 item 和消息名字均支持 touchend double-tap 弹出用户名片

Browse Source
This commit is contained in:
流星
2026-03-18 20:51:57 +08:00
parent 340cbe8784
commit b63b709032
2 changed files with 68 additions and 39 deletions
Download Patch File Download Diff File Expand all files Collapse all files
resources/views/chat/partials/layout/input-bar.blade.php
+26 -28
View File
@@ -73,35 +73,33 @@
</label> </label>
@if ($user->id === 1 || $user->activePosition()->exists()) {{-- 欢迎语快捷按钮 + 下拉浮层 --}}
{{-- 欢迎语快捷按钮 + 下拉浮层 --}} <div style="position:relative;display:inline-block;" id="welcome-btn-wrap">
<div style="position:relative;display:inline-block;" id="welcome-btn-wrap"> <button type="button" onclick="toggleWelcomeMenu(event)"
<button type="button" onclick="toggleWelcomeMenu(event)" style="font-size:11px;padding:1px 6px;background:#e07820;color:#fff;border:none;border-radius:2px;cursor:pointer;">
style="font-size:11px;padding:1px 6px;background:#e07820;color:#fff;border:none;border-radius:2px;cursor:pointer;"> 💬 欢迎
💬 欢迎 </button>
</button> <div id="welcome-menu" class="welcome-menu" style="display:none;">
<div id="welcome-menu" class="welcome-menu" style="display:none;"> @php
@php $welcomeMessages = [
$welcomeMessages = [ '欢迎【{name}】来到我们的聊天室，请遵守规则，文明聊天！',
'欢迎【{name}】来到我们的聊天室，请遵守规则，文明聊天！', '【{name}】，你好！欢迎来访，有什么问题随时告诉我们！',
'【{name}】，你好！欢迎来访，有什么问题随时告诉我们！', '热烈欢迎【{name}】加入，愿您在这里度过愉快的时光！',
'热烈欢迎【{name}】加入，愿您在这里度过愉快的时光！', '欢迎新朋友【{name}】！请先阅读公告，了解聊天室规则哦～',
'欢迎新朋友【{name}】！请先阅读公告，了解聊天室规则哦～', '【{name}】来了！欢迎欢迎，希望你在这里玩得开心！',
'【{name}】来了！欢迎欢迎，希望你在这里玩得开心！', '亲爱的【{name}】，欢迎光临本聊天室，请保持文明礼貌！',
'亲爱的【{name}】，欢迎光临本聊天室，请保持文明礼貌！', '欢迎【{name}】入驻！有问题请联系管理员，我们随时为您服务！',
'欢迎【{name}】入驻！有问题请联系管理员，我们随时为您服务！', '【{name}】，初来乍到，欢迎多多关照，我们是一家人！',
'【{name}】，初来乍到，欢迎多多关照，我们是一家人！', '大家欢迎新成员【{name}】！请遵守群规，共建和谐聊天环境！',
'大家欢迎新成员【{name}】！请遵守群规，共建和谐聊天环境！', '欢迎【{name}】莅临指导！希望你常来，让我们一起聊天！',
'欢迎【{name}】莅临指导！希望你常来，让我们一起聊天！', ];
]; @endphp
@endphp @foreach ($welcomeMessages as $msg)
@foreach ($welcomeMessages as $msg) <div class="welcome-menu-item" onclick="sendWelcomeTpl({{ json_encode($msg) }})">
<div class="welcome-menu-item" onclick="sendWelcomeTpl({{ json_encode($msg) }})"> {{ $msg }}</div>
{{ $msg }}</div> @endforeach
@endforeach
</div>
</div> </div>
@endif </div>
@if ( @if (
$user->user_level >= (int) \App\Models\Sysparam::getValue('level_announcement', '10') || $user->user_level >= (int) \App\Models\Sysparam::getValue('level_announcement', '10') ||
resources/views/chat/partials/scripts.blade.php
+42 -11
View File
@@ -311,18 +311,25 @@
document.getElementById('content').focus(); document.getElementById('content').focus();
}, 250); }, 250);
}; };
// 双击打开用户名片弹窗（全局统一入口）；手机端同时关闭名单抽屉 // 双击 / 手机端双触发 打开用户名片弹窗
item.ondblclick = () => { const _openCardFromList = () => {
// 取消尚未执行的单击定时器 if (_clickTimer) { clearTimeout(_clickTimer); _clickTimer = null; }
if (_clickTimer) { if (typeof closeMobileDrawer === 'function') { closeMobileDrawer(); }
clearTimeout(_clickTimer);
_clickTimer = null;
}
if (typeof closeMobileDrawer === 'function') {
closeMobileDrawer();
}
openUserCard(username); openUserCard(username);
}; };
item.ondblclick = _openCardFromList;
// 手机端：检测 300ms 内两次 touchend 触发双击
let _tapTime = 0;
item.addEventListener('touchend', (e) => {
const now = Date.now();
if (now - _tapTime < 300) {
e.preventDefault();
_openCardFromList();
_tapTime = 0;
} else {
_tapTime = now;
}
}, { passive: false });
targetContainer.appendChild(item); targetContainer.appendChild(item);
}); });
} }
@@ -490,7 +497,7 @@
if (systemUsers.includes(uName) || isGameLabel(uName)) { if (systemUsers.includes(uName) || isGameLabel(uName)) {
return `<span class="msg-user" style="color: ${color};">${uName}</span>`; return `<span class="msg-user" style="color: ${color};">${uName}</span>`;
} }
return `<span class="msg-user" style="color: ${color}; cursor: pointer;" onclick="switchTarget('${uName}')" ondblclick="openUserCard('${uName}')">${uName}</span>`; return `<span class="msg-user" data-u="${uName}" style="color: ${color}; cursor: pointer;" onclick="switchTarget('${uName}')" ondblclick="openUserCard('${uName}')">${uName}</span>`;
}; };
// 系统播报用户（不包含 AI小班长）使用军号图标，AI小班长用专属图，普通用户用头像 // 系统播报用户（不包含 AI小班长）使用军号图标，AI小班长用专属图，普通用户用头像
@@ -663,6 +670,30 @@
if (typeof window.initChat === 'function') { if (typeof window.initChat === 'function') {
window.initChat(window.chatContext.roomId); window.initChat(window.chatContext.roomId);
} }
// 手机端：在公屏(say1)和包厢(say2)容器上注册 touchend 委托
// 检测 300ms 内两次触摸同一 [data-u] 用户名 span，触发 openUserCard
let _msgTapTarget = null;
let _msgTapTime = 0;
['say1', 'say2'].forEach(id => {
const el = document.getElementById(id);
if (!el) { return; }
el.addEventListener('touchend', (e) => {
const span = e.target.closest('[data-u]');
if (!span) { return; }
const uName = span.dataset.u;
const now = Date.now();
if (uName === _msgTapTarget && now - _msgTapTime < 300) {
e.preventDefault();
openUserCard(uName);
_msgTapTarget = null;
_msgTapTime = 0;
} else {
_msgTapTarget = uName;
_msgTapTime = now;
}
}, { passive: false });
});
}); });
// ── WebSocket 事件监听 ──────────────────────────── // ── WebSocket 事件监听 ────────────────────────────