重构:抽取 switchTarget/openUserCard 到独立文件 user-actions.blade.php
- 新增 chat/partials/user-actions.blade.php 作为用户交互全局函数 - 从 scripts.blade.php 中移除 switchTarget、openUserCard、showUserInfoInSay2 - frame.blade.php 在 scripts 之前引入 user-actions - 代码职责更清晰,方便维护
This commit is contained in:
@@ -368,6 +368,7 @@
|
|||||||
</div>
|
</div>
|
||||||
|
|
||||||
{{-- ═══════════ 聊天室交互脚本(独立文件维护) ═══════════ --}}
|
{{-- ═══════════ 聊天室交互脚本(独立文件维护) ═══════════ --}}
|
||||||
|
@include('chat.partials.user-actions')
|
||||||
@include('chat.partials.scripts')
|
@include('chat.partials.scripts')
|
||||||
|
|
||||||
{{-- ═══════════ 头像选择弹窗 ═══════════ --}}
|
{{-- ═══════════ 头像选择弹窗 ═══════════ --}}
|
||||||
|
|||||||
@@ -202,74 +202,6 @@
|
|||||||
}
|
}
|
||||||
|
|
||||||
// ── 点击消息中的用户名,切换发言对象 ──────────
|
// ── 点击消息中的用户名,切换发言对象 ──────────
|
||||||
function switchTarget(username) {
|
|
||||||
const options = toUserSelect.options;
|
|
||||||
let found = false;
|
|
||||||
for (let i = 0; i < options.length; i++) {
|
|
||||||
if (options[i].value === username) {
|
|
||||||
toUserSelect.value = username;
|
|
||||||
found = true;
|
|
||||||
break;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
// 如果不在列表中(可能已离线),临时添加
|
|
||||||
if (!found && username !== '大家') {
|
|
||||||
const opt = document.createElement('option');
|
|
||||||
opt.value = username;
|
|
||||||
opt.textContent = username;
|
|
||||||
toUserSelect.appendChild(opt);
|
|
||||||
toUserSelect.value = username;
|
|
||||||
}
|
|
||||||
// 切换目标后自动聚焦输入框,方便直接输入
|
|
||||||
document.getElementById('content').focus();
|
|
||||||
}
|
|
||||||
|
|
||||||
/**
|
|
||||||
* 全局函数:双击用户名打开名片弹窗
|
|
||||||
*
|
|
||||||
* 聊天消息区和右侧用户列表统一调用此函数。
|
|
||||||
* 通过 Alpine.js 的 fetchUser 方法加载用户资料并显示弹窗。
|
|
||||||
*/
|
|
||||||
function openUserCard(username) {
|
|
||||||
if (username === window.chatContext.username) return;
|
|
||||||
const el = document.getElementById('user-modal-container');
|
|
||||||
if (el) {
|
|
||||||
const data = Alpine.$data(el);
|
|
||||||
if (data) data.fetchUser(username);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
/**
|
|
||||||
* 双击用户名 → 在包厢窗口(say2)显示用户基本信息
|
|
||||||
*/
|
|
||||||
async function showUserInfoInSay2(username) {
|
|
||||||
try {
|
|
||||||
const res = await fetch('/user/' + encodeURIComponent(username));
|
|
||||||
const info = await res.json();
|
|
||||||
|
|
||||||
const sexText = info.sex == 2 ? '女' : (info.sex == 1 ? '男' : '保密');
|
|
||||||
const level = info.user_level || 0;
|
|
||||||
const exp = info.exp_num || 0;
|
|
||||||
const jjb = info.jjb || 0;
|
|
||||||
const sign = info.qianming || info.sign || '暂无';
|
|
||||||
|
|
||||||
const lines = [
|
|
||||||
`══════ <b style="color:#336699;">${info.username || username}</b> 的资料 ══════`,
|
|
||||||
`性别:${sexText} 等级:${level} 经验:${exp} 金币:${jjb}`,
|
|
||||||
`签名:${sign}`,
|
|
||||||
`════════════════════════`
|
|
||||||
];
|
|
||||||
|
|
||||||
lines.forEach(text => {
|
|
||||||
const div = document.createElement('div');
|
|
||||||
div.className = 'msg-line';
|
|
||||||
div.innerHTML = `<span style="color:#666; font-size:12px;">${text}</span>`;
|
|
||||||
container2.appendChild(div);
|
|
||||||
});
|
|
||||||
container2.scrollTop = container2.scrollHeight;
|
|
||||||
} catch (e) {
|
|
||||||
console.error('获取用户资料失败:', e);
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
|
|
||||||
/**
|
/**
|
||||||
|
|||||||
@@ -0,0 +1,56 @@
|
|||||||
|
{{--
|
||||||
|
文件功能:用户交互全局函数(单击选择目标、双击打开名片弹窗)
|
||||||
|
|
||||||
|
聊天消息区和右侧用户列表统一调用此文件中的函数。
|
||||||
|
从 scripts.blade.php 中抽取,保持代码职责清晰。
|
||||||
|
|
||||||
|
@author ChatRoom Laravel
|
||||||
|
@version 1.0.0
|
||||||
|
--}}
|
||||||
|
<script>
|
||||||
|
/**
|
||||||
|
* 全局函数:单击用户名 → 切换聊天目标
|
||||||
|
*
|
||||||
|
* 将「对...说」下拉选中为该用户,方便直接发悄悄话。
|
||||||
|
* 若用户已离线不在下拉列表中,临时添加一个 option。
|
||||||
|
*/
|
||||||
|
function switchTarget(username) {
|
||||||
|
const toUserSelect = document.getElementById('to_user');
|
||||||
|
if (!toUserSelect) return;
|
||||||
|
|
||||||
|
const options = toUserSelect.options;
|
||||||
|
let found = false;
|
||||||
|
for (let i = 0; i < options.length; i++) {
|
||||||
|
if (options[i].value === username) {
|
||||||
|
toUserSelect.value = username;
|
||||||
|
found = true;
|
||||||
|
break;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
// 如果不在列表中(可能已离线),临时添加
|
||||||
|
if (!found && username !== '大家') {
|
||||||
|
const opt = document.createElement('option');
|
||||||
|
opt.value = username;
|
||||||
|
opt.textContent = username;
|
||||||
|
toUserSelect.appendChild(opt);
|
||||||
|
toUserSelect.value = username;
|
||||||
|
}
|
||||||
|
// 切换目标后自动聚焦输入框,方便直接输入
|
||||||
|
document.getElementById('content').focus();
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 全局函数:双击用户名 → 打开名片弹窗
|
||||||
|
*
|
||||||
|
* 聊天消息区和右侧用户列表统一调用此函数。
|
||||||
|
* 通过 Alpine.js 的 fetchUser 方法加载用户资料并显示弹窗。
|
||||||
|
*/
|
||||||
|
function openUserCard(username) {
|
||||||
|
if (username === window.chatContext.username) return;
|
||||||
|
const el = document.getElementById('user-modal-container');
|
||||||
|
if (el) {
|
||||||
|
const data = Alpine.$data(el);
|
||||||
|
if (data) data.fetchUser(username);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</script>
|
||||||
Reference in New Issue
Block a user