优化：好友通知弹窗根据互相状态显示不同内容
FriendAdded 事件： - 新增 hasAddedBack 字段（B 是否已回加 A） - Toast：已互相好友 → '你们现在互为好友 🎉' - Toast：未回加 → '但你还没有添加对方为好友' + [➕ 回加] 一键操作按钮 FriendRemoved 事件： - 新增 hadAddedBack 字段（之前是否互相好友） - Toast：之前互相好友 → 提示 + [🗑️ 同步移除] 一键操作按钮 - Toast：单向好友 → 简单通知，无操作按钮 Toast 改进： - 右上角 × 关闭按钮 - 快捷操作按钮支持 fetch 直接请求 - 完成后显示结果并自动关闭，延时改为 8 秒
This commit is contained in:
@@ -663,49 +663,134 @@
|
||||
const myName = window.chatContext.username;
|
||||
window.Echo.private(`user.${myName}`)
|
||||
.listen('.FriendAdded', (e) => {
|
||||
showFriendToast(
|
||||
`💚 <b>${e.from_username}</b> 将你加为好友了！`,
|
||||
'#16a34a'
|
||||
);
|
||||
if (e.has_added_back) {
|
||||
// 我已经把对方加了，现在对方也加了我 → 双向好友
|
||||
showFriendToast(
|
||||
`💚 <b>${e.from_username}</b> 将你加为好友了！<br>你们现在互为好友 🎉`,
|
||||
'#16a34a'
|
||||
);
|
||||
} else {
|
||||
// 对方加了我，但我还没加对方 → 提示可以回加
|
||||
showFriendToast(
|
||||
`💚 <b>${e.from_username}</b> 将你加为好友了！<br>
|
||||
<span style="color:#6b7280; font-size:12px;">但你还没有添加对方为好友。</span>`,
|
||||
'#16a34a', {
|
||||
label: `➕ 回加 ${e.from_username}`,
|
||||
username: e.from_username,
|
||||
action: 'add'
|
||||
}
|
||||
);
|
||||
}
|
||||
})
|
||||
.listen('.FriendRemoved', (e) => {
|
||||
showFriendToast(
|
||||
`💔 <b>${e.from_username}</b> 已将你从好友列表移除。`,
|
||||
'#6b7280'
|
||||
);
|
||||
if (e.had_added_back) {
|
||||
// 之前是互相好友，现在对方删除了我 → 提示可以同步删除
|
||||
showFriendToast(
|
||||
`💔 <b>${e.from_username}</b> 已将你从好友列表移除。<br>
|
||||
<span style="color:#6b7280; font-size:12px;">你的好友列表中仍保留对方，可点击同步移除。</span>`,
|
||||
'#6b7280', {
|
||||
label: `🗑️ 同步移除 ${e.from_username}`,
|
||||
username: e.from_username,
|
||||
action: 'remove'
|
||||
}
|
||||
);
|
||||
} else {
|
||||
// 对方删我，但原来就是单向的
|
||||
showFriendToast(
|
||||
`💔 <b>${e.from_username}</b> 已将你从他的好友列表移除。`,
|
||||
'#9ca3af'
|
||||
);
|
||||
}
|
||||
});
|
||||
}
|
||||
document.addEventListener('DOMContentLoaded', setupFriendNotification);
|
||||
|
||||
/**
|
||||
* 显示好友事件通知浮窗（类似任务弹窗，右下角淡入淡出）。
|
||||
* 显示好友事件通知浮窗（右下角淡入淡出）。
|
||||
*
|
||||
* @param {string} html 通知内容（支持 HTML）
|
||||
* @param {string} color 左边框颜色
|
||||
* @param {string} html 通知内容（支持 HTML）
|
||||
* @param {string} color 左边框 / 主题颜色
|
||||
* @param {object|null} action 可选操作按钮 { label, username, action:'add'|'remove' }
|
||||
*/
|
||||
function showFriendToast(html, color = '#16a34a') {
|
||||
function showFriendToast(html, color = '#16a34a', action = null) {
|
||||
const toast = document.createElement('div');
|
||||
toast.style.cssText = `
|
||||
position: fixed; bottom: 24px; right: 24px; z-index: 999999;
|
||||
background: #fff; border-left: 4px solid ${color};
|
||||
border-radius: 8px; padding: 14px 18px; min-width: 260px; max-width: 320px;
|
||||
box-shadow: 0 8px 32px rgba(0,0,0,.18);
|
||||
font-size: 13px; color: #374151; line-height: 1.5;
|
||||
animation: fdSlideIn .3s ease; cursor: pointer;
|
||||
font-size: 13px; color: #374151; line-height: 1.6;
|
||||
animation: fdSlideIn .3s ease;
|
||||
`;
|
||||
|
||||
// 操作按钮 HTML
|
||||
let actionHtml = '';
|
||||
if (action) {
|
||||
actionHtml = `
|
||||
<div style="margin-top:10px;">
|
||||
<button id="friend-toast-btn-${Date.now()}"
|
||||
style="background:${color}; color:#fff; border:none; border-radius:5px;
|
||||
padding:5px 12px; font-size:12px; font-weight:bold; cursor:pointer;">
|
||||
${action.label}
|
||||
</button>
|
||||
</div>`;
|
||||
}
|
||||
|
||||
toast.innerHTML = `
|
||||
<div style="font-weight:bold; margin-bottom:4px; color:${color};">💬 好友通知</div>
|
||||
<div>${html}</div>
|
||||
<div style="display:flex; justify-content:space-between; align-items:flex-start;">
|
||||
<div>
|
||||
<div style="font-weight:bold; margin-bottom:4px; color:${color};">💬 好友通知</div>
|
||||
<div>${html}</div>
|
||||
${actionHtml}
|
||||
</div>
|
||||
<button onclick="this.closest('div[style]').remove()"
|
||||
style="background:none; border:none; color:#9ca3af; font-size:18px;
|
||||
cursor:pointer; line-height:1; margin-left:8px; flex-shrink:0;">×</button>
|
||||
</div>
|
||||
`;
|
||||
// 点击关闭
|
||||
toast.addEventListener('click', () => toast.remove());
|
||||
|
||||
document.body.appendChild(toast);
|
||||
|
||||
// 绑定操作按钮事件
|
||||
if (action) {
|
||||
const btn = toast.querySelector('button[id^="friend-toast-btn"]');
|
||||
if (btn) {
|
||||
btn.addEventListener('click', async () => {
|
||||
btn.disabled = true;
|
||||
btn.textContent = '处理中…';
|
||||
try {
|
||||
const method = action.action === 'add' ? 'POST' : 'DELETE';
|
||||
const url =
|
||||
`/friend/${encodeURIComponent(action.username)}/${action.action === 'add' ? 'add' : 'remove'}`;
|
||||
const csrf = document.querySelector('meta[name="csrf-token"]')?.content ?? '';
|
||||
const res = await fetch(url, {
|
||||
method,
|
||||
headers: {
|
||||
'Content-Type': 'application/json',
|
||||
'X-CSRF-TOKEN': csrf,
|
||||
'Accept': 'application/json'
|
||||
},
|
||||
body: JSON.stringify({
|
||||
room_id: window.chatContext?.roomId
|
||||
}),
|
||||
});
|
||||
const data = await res.json();
|
||||
btn.textContent = data.status === 'success' ? '✅ 已完成' : '❌ 失败';
|
||||
btn.style.background = data.status === 'success' ? '#16a34a' : '#cc4444';
|
||||
setTimeout(() => toast.remove(), 2000);
|
||||
} catch (e) {
|
||||
btn.textContent = '❌ 网络错误';
|
||||
}
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
// 5秒后自动消失
|
||||
setTimeout(() => {
|
||||
toast.style.transition = 'opacity .5s';
|
||||
toast.style.opacity = '0';
|
||||
setTimeout(() => toast.remove(), 500);
|
||||
}, 5000);
|
||||
}, 8000);
|
||||
}
|
||||
|
||||
// ── 全屏特效事件监听（烟花/下雨/雷电/下雪）─────────
|
||||
|
||||
Reference in New Issue
Block a user