574 lines
17 KiB
PHP
574 lines
17 KiB
PHP
{{--
|
||
文件功能：好友列表浮窗面板
|
||
|
||
提供全局 JS API：
|
||
window.openFriendPanel() 打开好友面板（自动刷新列表）
|
||
window.closeFriendPanel() 关闭好友面板
|
||
|
||
面板分为两个区域：
|
||
1. 📋 我关注的好友 —— 我已添加的人，显示互相状态、添加时间、删除按钮
|
||
2. 💌 对方已加我 —— 别人加了我但我未回加，显示对方添加时间、回加按钮
|
||
|
||
搜索栏支持输入用户名后按 Enter 或点击「➕ 添加好友」直接添加。
|
||
|
||
所有添加/删除操作调用与双击用户卡片完全相同的后端接口：
|
||
POST /friend/{username}/add
|
||
DELETE /friend/{username}/remove
|
||
|
||
依赖：
|
||
- window.chatContext.roomId 当前房间 ID（由 frame.blade.php 注入）
|
||
- meta[name="csrf-token"] CSRF 令牌
|
||
|
||
@author ChatRoom Laravel
|
||
@version 1.0.0
|
||
--}}
|
||
|
||
{{-- ════ 样式 ════ --}}
|
||
<style>
|
||
#friend-panel {
|
||
display: none;
|
||
position: fixed;
|
||
inset: 0;
|
||
background: rgba(0, 0, 0, .5);
|
||
z-index: 9999;
|
||
justify-content: center;
|
||
align-items: center;
|
||
}
|
||
|
||
#friend-panel-inner {
|
||
background: #fff;
|
||
border-radius: 8px;
|
||
width: 480px;
|
||
max-width: 96vw;
|
||
max-height: 86vh;
|
||
display: flex;
|
||
flex-direction: column;
|
||
box-shadow: 0 8px 32px rgba(0, 0, 0, .3);
|
||
overflow: hidden;
|
||
}
|
||
|
||
#friend-panel-header {
|
||
background: linear-gradient(135deg, #336699, #5a8fc0);
|
||
color: #fff;
|
||
padding: 10px 16px;
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 10px;
|
||
flex-shrink: 0;
|
||
}
|
||
|
||
#friend-panel-title {
|
||
font-size: 14px;
|
||
font-weight: bold;
|
||
flex: 1;
|
||
}
|
||
|
||
#friend-panel-close {
|
||
cursor: pointer;
|
||
font-size: 18px;
|
||
opacity: .8;
|
||
line-height: 1;
|
||
transition: opacity .15s;
|
||
}
|
||
|
||
#friend-panel-close:hover {
|
||
opacity: 1;
|
||
}
|
||
|
||
#friend-add-bar {
|
||
padding: 8px 12px;
|
||
border-bottom: 1px solid #e8eef5;
|
||
display: flex;
|
||
gap: 6px;
|
||
background: #f6faff;
|
||
flex-shrink: 0;
|
||
}
|
||
|
||
#friend-search-input {
|
||
flex: 1;
|
||
padding: 5px 10px;
|
||
border: 1px solid #aac;
|
||
border-radius: 4px;
|
||
font-size: 12px;
|
||
outline: none;
|
||
}
|
||
|
||
#friend-search-input:focus {
|
||
border-color: #336699;
|
||
}
|
||
|
||
#friend-search-btn {
|
||
padding: 5px 14px;
|
||
background: #336699;
|
||
color: #fff;
|
||
border: none;
|
||
border-radius: 4px;
|
||
font-size: 12px;
|
||
font-weight: bold;
|
||
cursor: pointer;
|
||
}
|
||
|
||
#friend-search-btn:hover {
|
||
background: #2a5580;
|
||
}
|
||
|
||
#friend-panel-body {
|
||
flex: 1;
|
||
overflow-y: auto;
|
||
padding: 10px 12px;
|
||
background: #f6faff;
|
||
}
|
||
|
||
.fp-section-title {
|
||
font-size: 11px;
|
||
font-weight: bold;
|
||
color: #336699;
|
||
padding: 4px 0 6px;
|
||
border-bottom: 1px solid #cde;
|
||
margin-bottom: 6px;
|
||
}
|
||
|
||
.fp-row {
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 8px;
|
||
padding: 6px 8px;
|
||
border-radius: 5px;
|
||
background: #fff;
|
||
margin-bottom: 5px;
|
||
border: 1px solid #e0eaf5;
|
||
font-size: 12px;
|
||
}
|
||
|
||
.fp-row:hover {
|
||
background: #eef5ff;
|
||
}
|
||
|
||
.fp-avatar {
|
||
width: 28px;
|
||
height: 28px;
|
||
border-radius: 3px;
|
||
border: 1px solid #aac;
|
||
flex-shrink: 0;
|
||
object-fit: cover;
|
||
}
|
||
|
||
.fp-name {
|
||
font-weight: bold;
|
||
color: #224466;
|
||
flex: 1;
|
||
}
|
||
|
||
.fp-badge {
|
||
font-size: 10px;
|
||
padding: 1px 6px;
|
||
border-radius: 10px;
|
||
flex-shrink: 0;
|
||
}
|
||
|
||
.fp-badge-mutual {
|
||
background: #e8fde8;
|
||
color: #16a34a;
|
||
}
|
||
|
||
.fp-badge-onesided {
|
||
background: #fff3e0;
|
||
color: #b45309;
|
||
}
|
||
|
||
.fp-date {
|
||
font-size: 10px;
|
||
color: #999;
|
||
flex-shrink: 0;
|
||
}
|
||
|
||
.fp-action-btn {
|
||
padding: 3px 10px;
|
||
border: none;
|
||
border-radius: 3px;
|
||
font-size: 11px;
|
||
font-weight: bold;
|
||
cursor: pointer;
|
||
transition: opacity .15s;
|
||
flex-shrink: 0;
|
||
}
|
||
|
||
.fp-action-btn:hover {
|
||
opacity: .8;
|
||
}
|
||
|
||
.fp-btn-add {
|
||
background: #16a34a;
|
||
color: #fff;
|
||
}
|
||
|
||
.fp-btn-remove {
|
||
background: #dc2626;
|
||
color: #fff;
|
||
}
|
||
|
||
#fp-notice {
|
||
font-size: 11px;
|
||
color: #888;
|
||
text-align: center;
|
||
padding: 4px 0 2px;
|
||
min-height: 18px;
|
||
}
|
||
|
||
.fp-empty {
|
||
text-align: center;
|
||
color: #aaa;
|
||
font-size: 12px;
|
||
padding: 16px 0;
|
||
}
|
||
|
||
/* 在线状态小圆点 */
|
||
.fp-status {
|
||
display: inline-flex;
|
||
align-items: center;
|
||
gap: 3px;
|
||
font-size: 10px;
|
||
font-weight: bold;
|
||
padding: 1px 6px;
|
||
border-radius: 10px;
|
||
flex-shrink: 0;
|
||
}
|
||
|
||
.fp-status-online {
|
||
background: #dcfce7;
|
||
color: #15803d;
|
||
}
|
||
|
||
.fp-status-offline {
|
||
background: #f1f5f9;
|
||
color: #94a3b8;
|
||
}
|
||
</style>
|
||
|
||
{{-- ════ HTML ════ --}}
|
||
<div id="friend-panel">
|
||
<div id="friend-panel-inner">
|
||
{{-- 标题栏 --}}
|
||
<div id="friend-panel-header">
|
||
<span id="friend-panel-title">👥 我的好友</span>
|
||
<span id="friend-panel-close" onclick="closeFriendPanel()">✕</span>
|
||
</div>
|
||
|
||
{{-- 搜索/添加新好友 --}}
|
||
<div id="friend-add-bar">
|
||
<input id="friend-search-input" type="text" maxlength="20" placeholder="输入用户名搜索并添加好友…"
|
||
onkeydown="if(event.key==='Enter') friendSearch()">
|
||
<button id="friend-search-btn" onclick="friendSearch()">➕ 添加好友</button>
|
||
</div>
|
||
|
||
{{-- 操作结果提示 --}}
|
||
<div id="fp-notice"></div>
|
||
|
||
{{-- 列表主体（由 JS 动态填充） --}}
|
||
<div id="friend-panel-body">
|
||
<div class="fp-empty">加载中…</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
{{-- ════ JavaScript ════ --}}
|
||
<script>
|
||
/**
|
||
* 好友面板控制器。
|
||
*
|
||
* 功能：
|
||
* 1. 打开/关闭好友面板
|
||
* 2. 获取并渲染「我关注的好友」和「对方已加我」两个列表
|
||
* 3. 添加/删除好友（调用与双击用户卡片相同的后端接口）
|
||
* 4. 搜索用户名并直接添加为好友
|
||
*/
|
||
(function() {
|
||
/**
|
||
* 获取当前房间 ID（frame.blade.php 注入的 chatContext）。
|
||
*
|
||
* @returns {number|null}
|
||
*/
|
||
const roomId = () => window.chatContext?.roomId ?? null;
|
||
|
||
/**
|
||
* 获取 CSRF Token。
|
||
*
|
||
* @returns {string}
|
||
*/
|
||
const csrf = () => document.querySelector('meta[name="csrf-token"]').content;
|
||
|
||
/**
|
||
* 打开好友面板并自动拉取最新数据。
|
||
*/
|
||
window.openFriendPanel = function() {
|
||
document.getElementById('friend-panel').style.display = 'flex';
|
||
loadFriends();
|
||
};
|
||
|
||
/**
|
||
* 关闭好友面板。
|
||
*/
|
||
window.closeFriendPanel = function() {
|
||
document.getElementById('friend-panel').style.display = 'none';
|
||
};
|
||
|
||
// 点击遮罩关闭
|
||
document.getElementById('friend-panel').addEventListener('click', function(e) {
|
||
if (e.target === this) {
|
||
closeFriendPanel();
|
||
}
|
||
});
|
||
|
||
/**
|
||
* 在面板顶部显示操作结果提示文字。
|
||
*
|
||
* @param {string} msg 提示文字
|
||
* @param {string} color 文字颜色（CSS 颜色值）
|
||
*/
|
||
function setNotice(msg, color) {
|
||
const el = document.getElementById('fp-notice');
|
||
el.textContent = msg;
|
||
el.style.color = color || '#888';
|
||
}
|
||
|
||
/**
|
||
* 从服务端拉取好友数据并渲染列表。
|
||
* 调用 GET /friends 返回 { friends, pending }。
|
||
*/
|
||
function loadFriends() {
|
||
document.getElementById('friend-panel-body').innerHTML =
|
||
'<div class="fp-empty">加载中…</div>';
|
||
setNotice('');
|
||
|
||
fetch('/friends', {
|
||
headers: {
|
||
'Accept': 'application/json',
|
||
'X-CSRF-TOKEN': csrf()
|
||
}
|
||
})
|
||
.then(r => r.json())
|
||
.then(data => renderFriends(data.friends || [], data.pending || []))
|
||
.catch(() => {
|
||
document.getElementById('friend-panel-body').innerHTML =
|
||
'<div class="fp-empty">加载失败，请重试</div>';
|
||
});
|
||
}
|
||
|
||
/**
|
||
* 渲染两个列表：我关注的好友 + 对方已加我（待回加）。
|
||
*
|
||
* @param {Array} friends 我已添加的好友数组
|
||
* @param {Array} pending 对方已加我但我未回加的数组
|
||
*/
|
||
function renderFriends(friends, pending) {
|
||
const body = document.getElementById('friend-panel-body');
|
||
body.innerHTML = '';
|
||
|
||
// ── 我关注的好友 ──
|
||
const h1 = document.createElement('div');
|
||
h1.className = 'fp-section-title';
|
||
h1.textContent = '📋 我关注的好友（' + friends.length + '）';
|
||
body.appendChild(h1);
|
||
|
||
if (friends.length === 0) {
|
||
appendEmpty(body, '还没有添加任何好友');
|
||
} else {
|
||
friends.forEach(f => body.appendChild(makeFriendRow(f)));
|
||
}
|
||
|
||
// ── 对方已加我（待回加）──
|
||
const h2 = document.createElement('div');
|
||
h2.className = 'fp-section-title';
|
||
h2.style.marginTop = '10px';
|
||
h2.textContent = '💌 对方已加我，待我回加（' + pending.length + '）';
|
||
body.appendChild(h2);
|
||
|
||
if (pending.length === 0) {
|
||
appendEmpty(body, '暂无');
|
||
} else {
|
||
pending.forEach(p => body.appendChild(makePendingRow(p)));
|
||
}
|
||
}
|
||
|
||
/**
|
||
* 向容器追加空状态提示。
|
||
*
|
||
* @param {HTMLElement} container 父容器
|
||
* @param {string} text 提示文字
|
||
*/
|
||
function appendEmpty(container, text) {
|
||
const el = document.createElement('div');
|
||
el.className = 'fp-empty';
|
||
el.textContent = text;
|
||
container.appendChild(el);
|
||
}
|
||
|
||
/**
|
||
* 创建「我关注的好友」行（头像/用户名/互相徽章/添加时间/删除按钮）。
|
||
*
|
||
* @param {object} f 好友数据 { username, headface, mutual, sub_time }
|
||
* @returns {HTMLElement}
|
||
*/
|
||
function makeFriendRow(f) {
|
||
const row = document.createElement('div');
|
||
row.className = 'fp-row';
|
||
|
||
const avatar = document.createElement('img');
|
||
avatar.className = 'fp-avatar';
|
||
let hf = f.headface || '1.gif';
|
||
avatar.src = hf.startsWith('storage/') ? '/' + hf : '/images/headface/' + hf;
|
||
avatar.alt = f.username;
|
||
|
||
const name = document.createElement('span');
|
||
name.className = 'fp-name';
|
||
name.textContent = f.username;
|
||
|
||
// 在线状态标记（映名后）
|
||
const status = document.createElement('span');
|
||
status.className = 'fp-status ' + (f.is_online ? 'fp-status-online' : 'fp-status-offline');
|
||
status.textContent = f.is_online ? '🟢 在线' : '⚫ 离线';
|
||
|
||
const badge = document.createElement('span');
|
||
badge.className = 'fp-badge ' + (f.mutual ? 'fp-badge-mutual' : 'fp-badge-onesided');
|
||
badge.textContent = f.mutual ? '💚 互相好友' : '👤 单向关注';
|
||
|
||
const date = document.createElement('span');
|
||
date.className = 'fp-date';
|
||
date.textContent = f.sub_time || '';
|
||
|
||
const btn = document.createElement('button');
|
||
btn.className = 'fp-action-btn fp-btn-remove';
|
||
btn.textContent = '删除';
|
||
btn.onclick = () => friendAction('remove', f.username, btn);
|
||
|
||
row.append(avatar, name, status, badge, date, btn);
|
||
return row;
|
||
}
|
||
|
||
/**
|
||
* 创建「待回加」行（头像/用户名/对方添加时间/回加按钮）。
|
||
*
|
||
* @param {object} p 待回加用户数据 { username, headface, added_at }
|
||
* @returns {HTMLElement}
|
||
*/
|
||
function makePendingRow(p) {
|
||
const row = document.createElement('div');
|
||
row.className = 'fp-row';
|
||
|
||
const avatar = document.createElement('img');
|
||
avatar.className = 'fp-avatar';
|
||
let hf = p.headface || '1.gif';
|
||
avatar.src = hf.startsWith('storage/') ? '/' + hf : '/images/headface/' + hf;
|
||
avatar.alt = p.username;
|
||
|
||
const name = document.createElement('span');
|
||
name.className = 'fp-name';
|
||
name.textContent = p.username;
|
||
|
||
// 在线状态标记
|
||
const status = document.createElement('span');
|
||
status.className = 'fp-status ' + (p.is_online ? 'fp-status-online' : 'fp-status-offline');
|
||
status.textContent = p.is_online ? '🟢 在线' : '⚫ 离线';
|
||
|
||
const date = document.createElement('span');
|
||
date.className = 'fp-date';
|
||
date.textContent = p.added_at ? '他于 ' + p.added_at + ' 添加了我' : '';
|
||
|
||
const btn = document.createElement('button');
|
||
btn.className = 'fp-action-btn fp-btn-add';
|
||
btn.textContent = '➕ 回加';
|
||
btn.onclick = () => friendAction('add', p.username, btn);
|
||
|
||
row.append(avatar, name, status, date, btn);
|
||
return row;
|
||
}
|
||
|
||
/**
|
||
* 执行添加或删除好友操作。
|
||
* 调用与双击用户卡片完全相同的后端接口。
|
||
*
|
||
* @param {'add'|'remove'} action 操作类型
|
||
* @param {string} username 目标用户名
|
||
* @param {HTMLElement} btn 触发按钮（操作期间禁用）
|
||
*/
|
||
async function friendAction(action, username, btn) {
|
||
btn.disabled = true;
|
||
btn.style.opacity = '0.5';
|
||
setNotice('');
|
||
|
||
try {
|
||
const res = await fetch('/friend/' + encodeURIComponent(username) + '/' + action, {
|
||
method: action === 'remove' ? 'DELETE' : 'POST',
|
||
headers: {
|
||
'X-CSRF-TOKEN': csrf(),
|
||
'Content-Type': 'application/json',
|
||
'Accept': 'application/json',
|
||
},
|
||
body: JSON.stringify({
|
||
room_id: roomId()
|
||
}),
|
||
});
|
||
const data = await res.json();
|
||
|
||
if (data.status === 'success') {
|
||
setNotice(data.message, '#16a34a');
|
||
setTimeout(loadFriends, 700); // 延迟刷新列表
|
||
} else {
|
||
setNotice(data.message || '操作失败', '#dc2626');
|
||
btn.disabled = false;
|
||
btn.style.opacity = '1';
|
||
}
|
||
} catch (e) {
|
||
setNotice('网络异常，请重试', '#dc2626');
|
||
btn.disabled = false;
|
||
btn.style.opacity = '1';
|
||
}
|
||
}
|
||
|
||
/**
|
||
* 通过搜索框添加新好友（Enter 或点击按钮触发）。
|
||
* 用户名经后端验证（不能加自己、不能重复添加等）。
|
||
*/
|
||
window.friendSearch = async function() {
|
||
const input = document.getElementById('friend-search-input');
|
||
const username = input.value.trim();
|
||
|
||
if (!username) {
|
||
setNotice('请输入用户名', '#b45309');
|
||
return;
|
||
}
|
||
|
||
const btn = document.getElementById('friend-search-btn');
|
||
btn.disabled = true;
|
||
setNotice('正在添加…');
|
||
|
||
try {
|
||
const res = await fetch('/friend/' + encodeURIComponent(username) + '/add', {
|
||
method: 'POST',
|
||
headers: {
|
||
'X-CSRF-TOKEN': csrf(),
|
||
'Content-Type': 'application/json',
|
||
'Accept': 'application/json',
|
||
},
|
||
body: JSON.stringify({
|
||
room_id: roomId()
|
||
}),
|
||
});
|
||
const data = await res.json();
|
||
|
||
if (data.status === 'success') {
|
||
setNotice(data.message, '#16a34a');
|
||
input.value = '';
|
||
setTimeout(loadFriends, 700);
|
||
} else {
|
||
setNotice(data.message || '添加失败', '#dc2626');
|
||
}
|
||
} catch (e) {
|
||
setNotice('网络异常', '#dc2626');
|
||
} finally {
|
||
btn.disabled = false;
|
||
}
|
||
};
|
||
})();
|
||
</script>
|