feat: 好友系统全实现
后端:
- FriendController:add/remove/status/index 四个接口
- FriendAdded / FriendRemoved 广播事件(私有频道)
- channels.php 注册 user.{username} 私有频道鉴权
- routes/web.php 注册好友路由
- ChatController::init() 修复 DutyLog 在 return 后执行的 bug
- ChatController::notifyFriendsOnline() 上线时悄悄话通知好友
前端:
- user-actions:写私信 → 加好友/删好友按钮(动态状态)
- toggleFriend() 方法 + fetchUser 后加载好友状态
- scripts:监听私有频道 FriendAdded/FriendRemoved
- showFriendToast() 右下角浮窗通知(5秒自动消失)
- global-dialog 加 fdSlideIn 动画
This commit is contained in:
@@ -650,6 +650,64 @@
|
||||
}
|
||||
document.addEventListener('DOMContentLoaded', setupChangelogPublishedListener);
|
||||
|
||||
// ── 好友系统私有频道监听(仅本人可见) ────────────────
|
||||
/**
|
||||
* 监听当前用户的私有频道 `user.{username}`,
|
||||
* 收到 FriendAdded / FriendRemoved 事件时用任务弹窗通知。
|
||||
*/
|
||||
function setupFriendNotification() {
|
||||
if (!window.Echo || !window.chatContext) {
|
||||
setTimeout(setupFriendNotification, 500);
|
||||
return;
|
||||
}
|
||||
const myName = window.chatContext.username;
|
||||
window.Echo.private(`user.${myName}`)
|
||||
.listen('.FriendAdded', (e) => {
|
||||
showFriendToast(
|
||||
`💚 <b>${e.from_username}</b> 将你加为好友了!`,
|
||||
'#16a34a'
|
||||
);
|
||||
})
|
||||
.listen('.FriendRemoved', (e) => {
|
||||
showFriendToast(
|
||||
`💔 <b>${e.from_username}</b> 已将你从好友列表移除。`,
|
||||
'#6b7280'
|
||||
);
|
||||
});
|
||||
}
|
||||
document.addEventListener('DOMContentLoaded', setupFriendNotification);
|
||||
|
||||
/**
|
||||
* 显示好友事件通知浮窗(类似任务弹窗,右下角淡入淡出)。
|
||||
*
|
||||
* @param {string} html 通知内容(支持 HTML)
|
||||
* @param {string} color 左边框颜色
|
||||
*/
|
||||
function showFriendToast(html, color = '#16a34a') {
|
||||
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;
|
||||
`;
|
||||
toast.innerHTML = `
|
||||
<div style="font-weight:bold; margin-bottom:4px; color:${color};">💬 好友通知</div>
|
||||
<div>${html}</div>
|
||||
`;
|
||||
// 点击关闭
|
||||
toast.addEventListener('click', () => toast.remove());
|
||||
document.body.appendChild(toast);
|
||||
// 5秒后自动消失
|
||||
setTimeout(() => {
|
||||
toast.style.transition = 'opacity .5s';
|
||||
toast.style.opacity = '0';
|
||||
setTimeout(() => toast.remove(), 500);
|
||||
}, 5000);
|
||||
}
|
||||
|
||||
// ── 全屏特效事件监听(烟花/下雨/雷电/下雪)─────────
|
||||
window.addEventListener('chat:effect', (e) => {
|
||||
const type = e.detail?.type;
|
||||
|
||||
Reference in New Issue
Block a user