feat: 任命/撤销通知系统 + 用户名片UI优化
- 任命/撤销事件增加 type 字段区分类型 - 任命：全屏礼花 + 紫色弹窗 + 紫色系统消息 - 撤销：灰色弹窗 + 灰色系统消息，无礼花 - 消息分发：操作者/被操作者显示在私聊面板，其他人显示在公屏 - 系统消息加随机鼓励语（各5条轮换） - ChatStateService 修复 Redis key 前缀扫描问题（getAllActiveRoomIds） - 用户名片折叠优化：管理员视野、职务履历均可折叠 - 管理操作 + 职务操作合并为「🔧 管理操作」折叠区 - 悄悄话改为「🎁 送礼物」按钮，礼物面板内联展开
This commit is contained in:
@@ -43,7 +43,11 @@
|
||||
fishReelUrl: "{{ route('fishing.reel', $room->id) }}",
|
||||
chatBotUrl: "{{ route('chatbot.chat') }}",
|
||||
chatBotClearUrl: "{{ route('chatbot.clear') }}",
|
||||
chatBotEnabled: {{ \App\Models\Sysparam::getValue('chatbot_enabled', '0') === '1' ? 'true' : 'false' }}
|
||||
chatBotEnabled: {{ \App\Models\Sysparam::getValue('chatbot_enabled', '0') === '1' ? 'true' : 'false' }},
|
||||
hasPosition: {{ Auth::user()->activePosition || Auth::user()->user_level >= $superLevel ? 'true' : 'false' }},
|
||||
appointPositionsUrl: "{{ route('chat.appoint.positions') }}",
|
||||
appointUrl: "{{ route('chat.appoint.appoint') }}",
|
||||
revokeUrl: "{{ route('chat.appoint.revoke') }}"
|
||||
};
|
||||
</script>
|
||||
@vite(['resources/css/app.css', 'resources/js/app.js', 'resources/js/chat.js'])
|
||||
|
||||
@@ -145,10 +145,15 @@
|
||||
item.dataset.username = username;
|
||||
|
||||
const headface = (user.headface || '1.gif').toLowerCase();
|
||||
// VIP 图标和管理员标识 (互斥显示：管理员优先)
|
||||
|
||||
// 徽章优先级：职务图标 > 管理员 > VIP
|
||||
let badges = '';
|
||||
if (user.is_admin) {
|
||||
// 军人专属风格：由于宽度受限，采用代表最高荣誉与权威的“将官军功章”单字符
|
||||
if (user.position_icon) {
|
||||
// 有职务：显示职务图标，hover 显示职务名称
|
||||
const posTitle = (user.position_name || '在职') + ' · ' + username;
|
||||
badges +=
|
||||
`<span style="font-size:13px; margin-left:2px;" title="${posTitle}">${user.position_icon}</span>`;
|
||||
} else if (user.is_admin) {
|
||||
badges += `<span style="font-size:12px; margin-left:2px;" title="最高统帅">🎖️</span>`;
|
||||
} else if (user.vip_icon) {
|
||||
const vipColor = user.vip_color || '#f59e0b';
|
||||
@@ -315,14 +320,33 @@
|
||||
|
||||
let html = '';
|
||||
|
||||
// 系统用户消息以醒目公告样式显示
|
||||
if (systemUsers.includes(msg.from_user)) {
|
||||
// 第一个判断分支：如果是纯 HTML 系统的进出播报
|
||||
if (msg.action === 'system_welcome') {
|
||||
div.style.cssText = 'margin: 3px 0;';
|
||||
const iconImg =
|
||||
`<img src="/images/bugle.png" style="display:inline;width:16px;height:16px;vertical-align:middle;margin-right:2px;mix-blend-mode: multiply;" onerror="this.src='/images/headface/1.gif'">`;
|
||||
|
||||
let parsedContent = msg.content;
|
||||
parsedContent = parsedContent.replace(/【([^】]+)】/g, function(match, uName) {
|
||||
return '【' + clickableUser(uName, '#000099') + '】';
|
||||
});
|
||||
|
||||
html = `${iconImg} ${parsedContent}`;
|
||||
}
|
||||
// 接下来再判断各类发话人
|
||||
else if (systemUsers.includes(msg.from_user)) {
|
||||
if (msg.from_user === '系统公告') {
|
||||
// 管理员公告：大字醒目红框样式
|
||||
div.style.cssText =
|
||||
'background: linear-gradient(135deg, #fef2f2, #fff1f2); border: 2px solid #ef4444; border-radius: 6px; padding: 8px 12px; margin: 4px 0; box-shadow: 0 2px 4px rgba(239,68,68,0.15);';
|
||||
|
||||
let parsedContent = msg.content;
|
||||
parsedContent = parsedContent.replace(/【([^】]+)】/g, function(match, uName) {
|
||||
return '【' + clickableUser(uName, '#dc2626') + '】';
|
||||
});
|
||||
|
||||
html =
|
||||
`<div style="font-weight: bold; color: #dc2626;">${msg.content} <span style="color: #999; font-weight: normal;">(${timeStr})</span></div>`;
|
||||
`<div style="font-weight: bold; color: #dc2626;">${parsedContent} <span style="color: #999; font-weight: normal;">(${timeStr})</span></div>`;
|
||||
timeStrOverride = true;
|
||||
} else if (msg.from_user === '系统传音') {
|
||||
// 自动升级播报 / 赠礼通知：金色左边框，轻量提示样式，不喧宾夺主
|
||||
@@ -343,8 +367,16 @@
|
||||
giftHtml =
|
||||
`<img src="${msg.gift_image}" alt="${msg.gift_name || ''}" style="display:inline-block;width:40px;height:40px;vertical-align:middle;margin-left:6px;animation:giftBounce 0.6s ease-in-out;">`;
|
||||
}
|
||||
|
||||
// 让带有【用户名】的系统通知变成可点击和双击的蓝色用户标
|
||||
let parsedContent = msg.content;
|
||||
// 利用正则匹配【用户名】结构，捕获组 $1 即是里面真正的用户名
|
||||
parsedContent = parsedContent.replace(/【([^】]+)】/g, function(match, uName) {
|
||||
return '【' + clickableUser(uName, '#000099') + '】';
|
||||
});
|
||||
|
||||
html =
|
||||
`${headImg}<span class="msg-user" style="color: ${fontColor}; font-weight: bold;">${msg.from_user}：</span><span class="msg-content" style="color: ${fontColor}">${msg.content}</span>${giftHtml}`;
|
||||
`${headImg}<span class="msg-user" style="color: ${fontColor}; font-weight: bold;">${msg.from_user}：</span><span class="msg-content" style="color: ${fontColor}">${parsedContent}</span>${giftHtml}`;
|
||||
}
|
||||
} else if (msg.is_secret) {
|
||||
if (msg.from_user === '系统') {
|
||||
@@ -384,6 +416,14 @@
|
||||
}
|
||||
div.innerHTML = html;
|
||||
|
||||
// 后端下发的带有 welcome_user 的也是系统欢迎/离开消息，加上属性标记
|
||||
if (msg.welcome_user) {
|
||||
div.setAttribute('data-system-user', msg.welcome_user);
|
||||
// 收到后端来的新欢迎消息时，把界面上该用户旧的都删掉
|
||||
const oldWelcomes = container.querySelectorAll(`[data-system-user="${msg.welcome_user}"]`);
|
||||
oldWelcomes.forEach(el => el.remove());
|
||||
}
|
||||
|
||||
// 路由规则（复刻原版）：
|
||||
// 公众窗口(say1)：别人的公聊消息
|
||||
// 包厢窗口(say2)：自己发的消息 + 悄悄话 + 对自己说的消息
|
||||
@@ -439,89 +479,12 @@
|
||||
const user = e.detail;
|
||||
onlineUsers[user.username] = user;
|
||||
renderUserList();
|
||||
|
||||
// 原版风格：完整句式的随机趣味欢迎语
|
||||
const gender = user.sex == 2 ? '美女' : '帅哥';
|
||||
const uname = user.username;
|
||||
const welcomeTemplates = [
|
||||
`${gender}<b>${uname}</b>开着刚买不久的车，来到了，见到各位大虾，拱手曰："众位大虾，小生有礼了"`,
|
||||
`${gender}<b>${uname}</b>骑着小毛驴哼着小调，悠闲地走了进来，对大家嘿嘿一笑`,
|
||||
`${gender}<b>${uname}</b>坐着豪华轿车缓缓驶入，推门而出，拍了拍身上的灰，霸气说道："我来也！"`,
|
||||
`${gender}<b>${uname}</b>踩着七彩祥云从天而降，众人皆惊，抱拳道："各位久等了！"`,
|
||||
`${gender}<b>${uname}</b>划着小船飘然而至，微微一笑，翩然上岸`,
|
||||
`${gender}<b>${uname}</b>骑着自行车铃铛叮当响，远远就喊："我来啦！想我没？"`,
|
||||
`${gender}<b>${uname}</b>开着拖拉机突突突地开了进来，下车后拍了拍手说："交通不便，来迟了！"`,
|
||||
`${gender}<b>${uname}</b>坐着火箭嗖的一声到了，吓了大家一跳，嘿嘿笑道："别怕别怕，是我啊"`,
|
||||
`${gender}<b>${uname}</b>骑着白马翩翩而来，英姿飒爽，拱手道："江湖路远，各位有礼了"`,
|
||||
`${gender}<b>${uname}</b>开着宝马一路飞驰到此，推开车门走了下来，向大家挥了挥手`,
|
||||
`${gender}<b>${uname}</b>踩着风火轮呼啸而至，在人群中潇洒亮相`,
|
||||
`${gender}<b>${uname}</b>乘坐滑翔伞从天空缓缓降落，对大家喊道："hello，我从天上来！"`,
|
||||
`${gender}<b>${uname}</b>从地下钻了出来，拍了拍土，说："哎呀，走错路了，不过总算到了"`,
|
||||
`${gender}<b>${uname}</b>蹦蹦跳跳地跑了进来，嘻嘻哈哈地跟大家打招呼`,
|
||||
`${gender}<b>${uname}</b>悄悄地溜了进来，生怕被人发现，东张西望了一番`,
|
||||
`${gender}<b>${uname}</b>迈着六亲不认的步伐走进来，气场两米八`,
|
||||
];
|
||||
const msg = welcomeTemplates[Math.floor(Math.random() * welcomeTemplates.length)];
|
||||
const now = new Date();
|
||||
const timeStr = now.getHours().toString().padStart(2, '0') + ':' +
|
||||
now.getMinutes().toString().padStart(2, '0') + ':' +
|
||||
now.getSeconds().toString().padStart(2, '0');
|
||||
|
||||
const sysDiv = document.createElement('div');
|
||||
sysDiv.className = 'msg-line';
|
||||
|
||||
// VIP 用户使用专属颜色和图标
|
||||
if (user.vip_icon && user.vip_name) {
|
||||
const vipColor = user.vip_color || '#f59e0b';
|
||||
sysDiv.innerHTML =
|
||||
`<span style="color: ${vipColor}; font-weight: bold;">【${user.vip_icon} ${user.vip_name}】${msg}</span><span class="msg-time">(${timeStr})</span>`;
|
||||
} else {
|
||||
sysDiv.innerHTML =
|
||||
`<span style="color: green">【欢迎】${msg}</span><span class="msg-time">(${timeStr})</span>`;
|
||||
}
|
||||
container.appendChild(sysDiv);
|
||||
scrollToBottom();
|
||||
});
|
||||
|
||||
window.addEventListener('chat:leaving', (e) => {
|
||||
const user = e.detail;
|
||||
delete onlineUsers[user.username];
|
||||
renderUserList();
|
||||
|
||||
// 原版风格：趣味离开语（与进入一致的风格）
|
||||
const gender = user.sex == 2 ? '美女' : '帅哥';
|
||||
const uname = user.username;
|
||||
const leaveTemplates = [
|
||||
`${gender}<b>${uname}</b>潇洒地挥了挥手，骑着小毛驴哼着小调离去了`,
|
||||
`${gender}<b>${uname}</b>开着跑车扬长而去，留下一路烟尘`,
|
||||
`${gender}<b>${uname}</b>踩着七彩祥云飘然远去，消失在天际`,
|
||||
`${gender}<b>${uname}</b>悄无声息地溜走了，连个招呼都不打`,
|
||||
`${gender}<b>${uname}</b>跳上直升机螺旋桨呼呼作响，朝大家喊道："我先走啦！"`,
|
||||
`${gender}<b>${uname}</b>拱手告别："各位大虾，后会有期！"随后翩然离去`,
|
||||
`${gender}<b>${uname}</b>骑着自行车铃铛叮当响，远远就喊："下次再聊！拜拜！"`,
|
||||
`${gender}<b>${uname}</b>坐着热气球缓缓升空，朝大家挥手告别`,
|
||||
`${gender}<b>${uname}</b>迈着六亲不认的步伐离开了，留下一众人目瞪口呆`,
|
||||
`${gender}<b>${uname}</b>化作一缕青烟消散在空气中……`,
|
||||
];
|
||||
const msg = leaveTemplates[Math.floor(Math.random() * leaveTemplates.length)];
|
||||
const now = new Date();
|
||||
const timeStr = now.getHours().toString().padStart(2, '0') + ':' +
|
||||
now.getMinutes().toString().padStart(2, '0') + ':' +
|
||||
now.getSeconds().toString().padStart(2, '0');
|
||||
|
||||
const sysDiv = document.createElement('div');
|
||||
sysDiv.className = 'msg-line';
|
||||
// VIP 用户离开也带专属颜色和图标
|
||||
if (user.vip_icon && user.vip_name) {
|
||||
const vipColor = user.vip_color || '#f59e0b';
|
||||
sysDiv.innerHTML =
|
||||
`<span style="color: ${vipColor}; font-weight: bold;">【${user.vip_icon} ${user.vip_name}】${msg}</span><span class="msg-time">(${timeStr})</span>`;
|
||||
} else {
|
||||
sysDiv.innerHTML =
|
||||
`<span style="color: #cc6600">【离开】${msg}</span><span class="msg-time">(${timeStr})</span>`;
|
||||
}
|
||||
container.appendChild(sysDiv);
|
||||
scrollToBottom();
|
||||
});
|
||||
|
||||
window.addEventListener('chat:message', (e) => {
|
||||
@@ -642,6 +605,51 @@
|
||||
// DOMContentLoaded 后启动，确保 Vite 编译的 JS 已加载
|
||||
document.addEventListener('DOMContentLoaded', setupScreenClearedListener);
|
||||
|
||||
// ── 开发日志发布通知（仅 Room 1 大厅可见）────────────
|
||||
/**
|
||||
* 监听 ChangelogPublished 事件，在大厅聊天区展示系统通知
|
||||
* 通知包含版本号、标题和可点击的查看链接
|
||||
* 复用「系统传音」样式（金色左边框，不喧宾夺主）
|
||||
*/
|
||||
function setupChangelogPublishedListener() {
|
||||
if (!window.Echo || !window.chatContext) {
|
||||
setTimeout(setupChangelogPublishedListener, 500);
|
||||
return;
|
||||
}
|
||||
// 仅在 Room 1（星光大厅）时监听
|
||||
if (window.chatContext.roomId !== 1) {
|
||||
return;
|
||||
}
|
||||
window.Echo.join('room.1')
|
||||
.listen('.ChangelogPublished', (e) => {
|
||||
const now = new Date();
|
||||
const timeStr = now.getHours().toString().padStart(2, '0') + ':' +
|
||||
now.getMinutes().toString().padStart(2, '0') + ':' +
|
||||
now.getSeconds().toString().padStart(2, '0');
|
||||
|
||||
const sysDiv = document.createElement('div');
|
||||
sysDiv.className = 'msg-line';
|
||||
// 金色左边框通知样式（复用「系统传音」风格）
|
||||
sysDiv.style.cssText =
|
||||
'background: #fffbeb; border-left: 3px solid #d97706; border-radius: 4px; padding: 5px 10px; margin: 3px 0;';
|
||||
sysDiv.innerHTML = `<span style="color: #b45309; font-weight: bold;">
|
||||
📋 【版本更新】v${e.version} · ${e.title}
|
||||
<a href="${e.url}" target="_blank" rel="noopener"
|
||||
style="color: #7c3aed; text-decoration: underline; margin-left: 8px; font-size: 0.85em;">
|
||||
查看详情 →
|
||||
</a>
|
||||
</span><span class="msg-time">(${timeStr})</span>`;
|
||||
|
||||
const say1 = document.getElementById('chat-messages-container');
|
||||
if (say1) {
|
||||
say1.appendChild(sysDiv);
|
||||
say1.scrollTop = say1.scrollHeight;
|
||||
}
|
||||
});
|
||||
console.log('ChangelogPublished 监听器已注册（Room 1 专属）');
|
||||
}
|
||||
document.addEventListener('DOMContentLoaded', setupChangelogPublishedListener);
|
||||
|
||||
// ── 全屏特效事件监听（烟花/下雨/雷电/下雪）─────────
|
||||
window.addEventListener('chat:effect', (e) => {
|
||||
const type = e.detail?.type;
|
||||
@@ -1397,4 +1405,174 @@
|
||||
div.textContent = text;
|
||||
return div.innerHTML;
|
||||
}
|
||||
|
||||
// ══════════════════════════════════════════
|
||||
// 任命公告：复用现有礼花特效 + 隆重弹窗
|
||||
// ══════════════════════════════════════════
|
||||
|
||||
/**
|
||||
* 显示任命公告弹窗（居中，5 秒后淡出）
|
||||
*/
|
||||
function showAppointmentBanner(data) {
|
||||
const dept = data.department_name ? escapeHtml(data.department_name) + ' · ' : '';
|
||||
const isRevoke = data.type === 'revoke';
|
||||
const banner = document.createElement('div');
|
||||
banner.id = 'appointment-banner';
|
||||
banner.style.cssText = `
|
||||
position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%);
|
||||
z-index: 99999; text-align: center; pointer-events: none;
|
||||
animation: appoint-pop 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275);
|
||||
`;
|
||||
|
||||
if (isRevoke) {
|
||||
banner.innerHTML = `
|
||||
<div style="background: linear-gradient(135deg, #374151, #4b5563, #6b7280);
|
||||
border-radius: 20px; padding: 24px 40px; box-shadow: 0 20px 60px rgba(0,0,0,0.4);
|
||||
border: 2px solid rgba(255,255,255,0.15); backdrop-filter: blur(8px);">
|
||||
<div style="font-size: 36px; margin-bottom: 8px;">📋</div>
|
||||
<div style="color: #d1d5db; font-size: 12px; font-weight: bold; letter-spacing: 3px; margin-bottom: 12px;">
|
||||
── 职务撤销 ──
|
||||
</div>
|
||||
<div style="color: white; font-size: 20px; font-weight: 900; text-shadow: 0 2px 8px rgba(0,0,0,0.3);">
|
||||
${escapeHtml(data.position_icon)} ${escapeHtml(data.target_username)}
|
||||
</div>
|
||||
<div style="color: #d1d5db; font-size: 13px; margin-top: 8px;">
|
||||
<strong style="color: #f3f4f6;">${dept}${escapeHtml(data.position_name)}</strong> 职务已被撤销
|
||||
</div>
|
||||
<div style="color: rgba(255,255,255,0.4); font-size: 11px; margin-top: 10px;">
|
||||
由 ${escapeHtml(data.operator_name)} 执行 · ${new Date().toLocaleTimeString('zh-CN')}
|
||||
</div>
|
||||
</div>
|
||||
`;
|
||||
} else {
|
||||
banner.innerHTML = `
|
||||
<div style="background: linear-gradient(135deg, #4f46e5, #7c3aed, #db2777);
|
||||
border-radius: 20px; padding: 28px 44px; box-shadow: 0 20px 60px rgba(0,0,0,0.4);
|
||||
border: 2px solid rgba(255,255,255,0.25); backdrop-filter: blur(8px);">
|
||||
<div style="font-size: 40px; margin-bottom: 8px;">🎊🎖️🎊</div>
|
||||
<div style="color: #fde68a; font-size: 13px; font-weight: bold; letter-spacing: 3px; margin-bottom: 12px;">
|
||||
══ 任命公告 ══
|
||||
</div>
|
||||
<div style="color: white; font-size: 22px; font-weight: 900; text-shadow: 0 2px 8px rgba(0,0,0,0.3);">
|
||||
${escapeHtml(data.position_icon)} ${escapeHtml(data.target_username)}
|
||||
</div>
|
||||
<div style="color: #e0e7ff; font-size: 14px; margin-top: 8px;">
|
||||
荣任 <strong style="color: #fde68a;">${dept}${escapeHtml(data.position_name)}</strong>
|
||||
</div>
|
||||
<div style="color: rgba(255,255,255,0.5); font-size: 11px; margin-top: 10px;">
|
||||
由 ${escapeHtml(data.operator_name)} 任命 · ${new Date().toLocaleTimeString('zh-CN')}
|
||||
</div>
|
||||
</div>
|
||||
`;
|
||||
}
|
||||
|
||||
// 弹窗动画关键帧（动态注入一次）
|
||||
if (!document.getElementById('appoint-keyframes')) {
|
||||
const style = document.createElement('style');
|
||||
style.id = 'appoint-keyframes';
|
||||
style.textContent = `
|
||||
@keyframes appoint-pop {
|
||||
0% { opacity: 0; transform: translate(-50%,-50%) scale(0.5); }
|
||||
70% { transform: translate(-50%,-50%) scale(1.05); }
|
||||
100% { opacity: 1; transform: translate(-50%,-50%) scale(1); }
|
||||
}
|
||||
@keyframes appoint-fade-out {
|
||||
from { opacity: 1; }
|
||||
to { opacity: 0; transform: translate(-50%,-50%) scale(0.9); }
|
||||
}
|
||||
`;
|
||||
document.head.appendChild(style);
|
||||
}
|
||||
|
||||
document.body.appendChild(banner);
|
||||
|
||||
// 4.5 秒后淡出移除
|
||||
setTimeout(() => {
|
||||
banner.style.animation = 'appoint-fade-out 0.5s ease forwards';
|
||||
setTimeout(() => banner.remove(), 500);
|
||||
}, 4500);
|
||||
}
|
||||
|
||||
/**
|
||||
* 监听任命公告事件：根据 type 区分任命（礼花+紫色弹窗）和撤销（灰色弹窗）
|
||||
*/
|
||||
window.addEventListener('chat:appointment-announced', (e) => {
|
||||
const data = e.detail;
|
||||
const isRevoke = data.type === 'revoke';
|
||||
const dept = data.department_name ? escapeHtml(data.department_name) + ' · ' : '';
|
||||
|
||||
// ── 任命才有礼花 ──
|
||||
if (!isRevoke && typeof EffectManager !== 'undefined') {
|
||||
EffectManager.play('fireworks');
|
||||
}
|
||||
|
||||
showAppointmentBanner(data);
|
||||
|
||||
// ── 聊天区系统消息：操作者/被操作者 → 私聊面板；其余人 → 公屏 ──
|
||||
const now = new Date();
|
||||
const timeStr = now.getHours().toString().padStart(2, '0') + ':' +
|
||||
now.getMinutes().toString().padStart(2, '0') + ':' +
|
||||
now.getSeconds().toString().padStart(2, '0');
|
||||
|
||||
const myName = window.chatContext?.username ?? '';
|
||||
const isInvolved = myName === data.operator_name || myName === data.target_username;
|
||||
|
||||
// 随机鼓励语库
|
||||
const appointPhrases = [
|
||||
'望再接再厉，大展宏图，为大家服务！',
|
||||
'期待在任期间带领大家更上一层楼！',
|
||||
'众望所归，任重道远，加油！',
|
||||
'新官上任，一展风采，前程似锦！',
|
||||
'相信你能胜任，期待你的精彩表现！',
|
||||
];
|
||||
const revokePhrases = [
|
||||
'感谢在任期间的辛勤付出，辛苦了！',
|
||||
'江湖路长，愿前程似锦，未来可期！',
|
||||
'感谢您为大家的奉献，一路顺风！',
|
||||
'在任一场，情谊长存，感谢付出！',
|
||||
'相信以后还有更多精彩，继续加油！',
|
||||
];
|
||||
const randomPhrase = isRevoke ?
|
||||
revokePhrases[Math.floor(Math.random() * revokePhrases.length)] :
|
||||
appointPhrases[Math.floor(Math.random() * appointPhrases.length)];
|
||||
|
||||
// 构建消息 DOM（内容相同，分配到不同面板）
|
||||
function buildSysMsg() {
|
||||
const sysDiv = document.createElement('div');
|
||||
sysDiv.className = 'msg-line';
|
||||
if (isRevoke) {
|
||||
sysDiv.style.cssText =
|
||||
'background:#f3f4f6; border-left:3px solid #9ca3af; border-radius:4px; padding:4px 10px; margin:2px 0;';
|
||||
sysDiv.innerHTML =
|
||||
`<span style="color:#6b7280;">📋 </span>` +
|
||||
`<span style="color:#374151;"><b>${escapeHtml(data.target_username)}</b> 的 ${escapeHtml(data.position_icon)} ${dept}${escapeHtml(data.position_name)} 职务已被 <b>${escapeHtml(data.operator_name)}</b> 撤销。${randomPhrase}</span>` +
|
||||
`<span class="msg-time">(${timeStr})</span>`;
|
||||
} else {
|
||||
sysDiv.style.cssText =
|
||||
'background:#f5f3ff; border-left:3px solid #7c3aed; border-radius:4px; padding:4px 10px; margin:2px 0;';
|
||||
sysDiv.innerHTML =
|
||||
`<span style="color:#7c3aed;">🎖️ </span>` +
|
||||
`<span style="color:#3730a3;">恭喜 <b>${escapeHtml(data.target_username)}</b> 荣任 ${escapeHtml(data.position_icon)} ${dept}<b>${escapeHtml(data.position_name)}</b>，由 <b>${escapeHtml(data.operator_name)}</b> 任命。${randomPhrase}</span>` +
|
||||
`<span class="msg-time">(${timeStr})</span>`;
|
||||
}
|
||||
return sysDiv;
|
||||
}
|
||||
|
||||
const say1 = document.getElementById('chat-messages-container');
|
||||
const say2 = document.getElementById('chat-messages-container2');
|
||||
|
||||
if (isInvolved) {
|
||||
// 操作者 / 被操作者：消息进私聊面板（包厢窗口）
|
||||
if (say2) {
|
||||
say2.appendChild(buildSysMsg());
|
||||
say2.scrollTop = say2.scrollHeight;
|
||||
}
|
||||
} else {
|
||||
// 其他人：消息进公屏
|
||||
if (say1) {
|
||||
say1.appendChild(buildSysMsg());
|
||||
say1.scrollTop = say1.scrollHeight;
|
||||
}
|
||||
}
|
||||
});
|
||||
</script>
|
||||
|
||||
@@ -27,8 +27,10 @@
|
||||
<div class="tool-btn" onclick="window.open('{{ route('guestbook.index') }}', '_blank')" title="留言板/私信">留言</div>
|
||||
<div class="tool-btn" onclick="window.open('{{ route('guide') }}', '_blank')" title="规则/帮助">规则</div>
|
||||
|
||||
@if ($user->user_level >= $superLevel)
|
||||
@if ($user->id === 1 || $user->activePosition()->exists())
|
||||
<div class="tool-btn" style="color: #ffcc00;" onclick="window.open('/admin', '_blank')" title="管理后台">管理</div>
|
||||
<div class="tool-btn" onclick="window.open('{{ route('leaderboard.index') }}', '_blank')" title="排行榜">排行
|
||||
</div>
|
||||
@else
|
||||
<div class="tool-btn" onclick="window.open('{{ route('leaderboard.index') }}', '_blank')" title="排行榜">排行
|
||||
</div>
|
||||
|
||||
@@ -89,6 +89,18 @@
|
||||
giftCount: 1,
|
||||
sendingGift: false,
|
||||
|
||||
// 任命相关
|
||||
showAppointPanel: false,
|
||||
appointPositions: [],
|
||||
selectedPositionId: null,
|
||||
appointRemark: '',
|
||||
appointLoading: false,
|
||||
|
||||
// 折叠状态
|
||||
showAdminView: false, // 管理员视野
|
||||
showPositionHistory: false, // 职务履历
|
||||
showAdminPanel: false, // 管理操作（管理操作+职务操作合并）
|
||||
|
||||
/** 获取用户资料 */
|
||||
async fetchUser(username) {
|
||||
try {
|
||||
@@ -102,7 +114,6 @@
|
||||
if (!res.ok) {
|
||||
const errorData = await res.json().catch(() => ({}));
|
||||
console.error('Failed to fetch user:', errorData.message || res.statusText);
|
||||
// 如果是 404 或者 500 等错误，直接静默退出或提示
|
||||
return;
|
||||
}
|
||||
|
||||
@@ -113,12 +124,90 @@
|
||||
this.isMuting = false;
|
||||
this.showWhispers = false;
|
||||
this.whisperList = [];
|
||||
this.showAppointPanel = false;
|
||||
this.selectedPositionId = null;
|
||||
this.appointRemark = '';
|
||||
// 有职务的操作人预加载可用职务列表
|
||||
if (window.chatContext?.hasPosition) {
|
||||
this._loadPositions();
|
||||
}
|
||||
}
|
||||
} catch (e) {
|
||||
console.error('Error fetching user:', e);
|
||||
}
|
||||
},
|
||||
|
||||
/** 加载可任命职务列表 */
|
||||
async _loadPositions() {
|
||||
if (!window.chatContext?.appointPositionsUrl) return;
|
||||
try {
|
||||
const res = await fetch(window.chatContext.appointPositionsUrl, {
|
||||
headers: {
|
||||
'Accept': 'application/json'
|
||||
}
|
||||
});
|
||||
const data = await res.json();
|
||||
if (data.status === 'success') {
|
||||
this.appointPositions = data.positions;
|
||||
if (this.appointPositions.length > 0) {
|
||||
this.selectedPositionId = this.appointPositions[0].id;
|
||||
}
|
||||
}
|
||||
} catch (e) {
|
||||
/* 静默失败 */
|
||||
}
|
||||
},
|
||||
|
||||
/** 快速任命 */
|
||||
async doAppoint() {
|
||||
if (this.appointLoading || !this.selectedPositionId) return;
|
||||
this.appointLoading = true;
|
||||
try {
|
||||
const res = await fetch(window.chatContext.appointUrl, {
|
||||
method: 'POST',
|
||||
headers: this._headers(),
|
||||
body: JSON.stringify({
|
||||
username: this.userInfo.username,
|
||||
position_id: this.selectedPositionId,
|
||||
remark: this.appointRemark.trim() || null,
|
||||
room_id: window.chatContext.roomId ?? null,
|
||||
})
|
||||
});
|
||||
const data = await res.json();
|
||||
alert(data.message);
|
||||
if (data.status === 'success') {
|
||||
this.showUserModal = false;
|
||||
}
|
||||
} catch (e) {
|
||||
alert('网络异常');
|
||||
}
|
||||
this.appointLoading = false;
|
||||
},
|
||||
|
||||
/** 快速撤销 */
|
||||
async doRevoke() {
|
||||
if (!confirm('确定要撤销 ' + this.userInfo.username + ' 的职务吗？')) return;
|
||||
this.appointLoading = true;
|
||||
try {
|
||||
const res = await fetch(window.chatContext.revokeUrl, {
|
||||
method: 'POST',
|
||||
headers: this._headers(),
|
||||
body: JSON.stringify({
|
||||
username: this.userInfo.username,
|
||||
remark: '聊天室快速撤销',
|
||||
room_id: window.chatContext.roomId ?? null,
|
||||
})
|
||||
});
|
||||
const data = await res.json();
|
||||
alert(data.message);
|
||||
if (data.status === 'success') {
|
||||
this.showUserModal = false;
|
||||
}
|
||||
} catch (e) {
|
||||
alert('网络异常');
|
||||
}
|
||||
this.appointLoading = false;
|
||||
},
|
||||
/** 踢出用户 */
|
||||
async kickUser() {
|
||||
const reason = prompt('踢出原因（可留空）：', '违反聊天室规则');
|
||||
@@ -324,7 +413,14 @@
|
||||
:style="userInfo.sex === '男' ? 'color: blue' : (userInfo.sex === '女' ?
|
||||
'color: deeppink' : '')"></span>
|
||||
</h4>
|
||||
<div style="font-size: 11px; color: #999; margin-top: 2px;">
|
||||
{{-- 在职职务标签（有职务时才显示） --}}
|
||||
<div x-show="userInfo.position_name"
|
||||
style="display: inline-flex; align-items: center; gap: 3px; margin-top: 3px; padding: 2px 8px; background: #f3e8ff; border: 1px solid #d8b4fe; border-radius: 20px; font-size: 11px; color: #7c3aed; font-weight: bold;">
|
||||
<span x-text="userInfo.position_icon" style="font-size: 13px;"></span>
|
||||
<span
|
||||
x-text="(userInfo.department_name ? userInfo.department_name + ' · ' : '') + userInfo.position_name"></span>
|
||||
</div>
|
||||
<div style="font-size: 11px; color: #999; margin-top: 4px;">
|
||||
加入: <span x-text="userInfo.created_at"></span>
|
||||
</div>
|
||||
</div>
|
||||
@@ -359,161 +455,260 @@
|
||||
|
||||
{{-- 管理员可见区域 (IP 与 归属地) --}}
|
||||
<div x-show="userInfo.last_ip !== undefined"
|
||||
style="margin-top: 8px; padding: 8px 10px; background: #fee2e2; border: 1px dashed #fca5a5; border-radius: 8px; font-size: 11px; color: #991b1b;">
|
||||
<div style="font-weight: bold; margin-bottom: 4px; display: flex; align-items: center; gap: 4px;">
|
||||
<span>🛡️</span> 管理员视野
|
||||
style="margin-top: 8px; border-radius: 8px; overflow: hidden;">
|
||||
{{-- 可点击标题 --}}
|
||||
<div x-on:click="showAdminView = !showAdminView"
|
||||
style="display: flex; align-items: center; justify-content: space-between; padding: 6px 10px;
|
||||
background: #fee2e2; border: 1px dashed #fca5a5; border-radius: 8px;
|
||||
cursor: pointer; font-size: 11px; color: #991b1b; font-weight: bold; user-select: none;">
|
||||
<span>🛡️ 管理员视野</span>
|
||||
<span x-text="showAdminView ? '▲' : '▼'" style="font-size: 10px; opacity: 0.6;"></span>
|
||||
</div>
|
||||
<div style="display: flex; flex-direction: column; gap: 3px;">
|
||||
<div><span style="opacity: 0.8;">主要IP：</span><span x-text="userInfo.last_ip || '无'"></span>
|
||||
</div>
|
||||
<div><span style="opacity: 0.8;">本次IP：</span><span x-text="userInfo.login_ip || '无'"></span>
|
||||
</div>
|
||||
<div><span style="opacity: 0.8;">归属地：</span><span x-text="userInfo.location || '未知'"></span>
|
||||
{{-- 折叠内容 --}}
|
||||
<div x-show="showAdminView" x-transition
|
||||
style="display: none; padding: 8px 10px; background: #fff5f5; border: 1px dashed #fca5a5;
|
||||
border-top: none; border-radius: 0 0 8px 8px; font-size: 11px; color: #991b1b;">
|
||||
<div style="display: flex; flex-direction: column; gap: 3px;">
|
||||
<div><span style="opacity: 0.8;">主要IP：</span><span x-text="userInfo.last_ip || '无'"></span>
|
||||
</div>
|
||||
<div><span style="opacity: 0.8;">本次IP：</span><span x-text="userInfo.login_ip || '无'"></span>
|
||||
</div>
|
||||
<div><span style="opacity: 0.8;">归属地：</span><span x-text="userInfo.location || '未知'"></span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="profile-detail" x-text="userInfo.sign || '这家伙很懒，什么也没留下'" style="margin-top: 12px;"></div>
|
||||
</div>
|
||||
|
||||
{{-- 普通操作按钮 --}}
|
||||
<div class="modal-actions" x-show="userInfo.username !== window.chatContext.username">
|
||||
<button class="btn-whisper"
|
||||
x-on:click="document.getElementById('to_user').value = userInfo.username; document.getElementById('content').focus(); showUserModal = false;">
|
||||
悄悄话
|
||||
</button>
|
||||
<a class="btn-mail"
|
||||
:href="'{{ route('guestbook.index', ['tab' => 'outbox']) }}&to=' + encodeURIComponent(userInfo
|
||||
.username)"
|
||||
target="_blank">
|
||||
写私信
|
||||
</a>
|
||||
</div>
|
||||
|
||||
{{-- 送花/礼物互动区 --}}
|
||||
<div style="padding: 16px; margin: 0 16px 16px; background: #fff; border-radius: 12px; border: 1px solid #f1f5f9; box-shadow: 0 2px 8px rgba(0,0,0,0.02);"
|
||||
x-show="userInfo.username !== window.chatContext.username" x-data="{ showGiftPanel: false }">
|
||||
|
||||
{{-- 初始状态：只显示一个主操作按钮 --}}
|
||||
<button x-show="!showGiftPanel" x-on:click="showGiftPanel = true"
|
||||
style="width: 100%; height: 44px; display: flex; align-items: center; justify-content: center; gap: 8px; background: linear-gradient(135deg, #fce4ec 0%, #fbcfe8 100%); color: #db2777; border: 1px dashed #f9a8d4; border-radius: 10px; font-size: 15px; font-weight: bold; cursor: pointer; transition: all 0.2s; box-shadow: 0 2px 4px rgba(219, 39, 119, 0.1);"
|
||||
x-on:mousedown="$el.style.transform='scale(0.98)'" x-on:mouseup="$el.style.transform='scale(1)'"
|
||||
x-on:mouseleave="$el.style.transform='scale(1)'">
|
||||
<span style="font-size: 18px;">🎁</span>
|
||||
<span>赠送礼物给 TA</span>
|
||||
</button>
|
||||
|
||||
{{-- 展开状态：显示礼物面板 --}}
|
||||
<div x-show="showGiftPanel" style="display: none;" x-transition>
|
||||
<div
|
||||
style="display: flex; justify-content: space-between; align-items: center; margin-bottom: 12px;">
|
||||
<div style="display: flex; align-items: center; gap: 6px;">
|
||||
<span style="font-size: 16px;">🎁</span>
|
||||
<span style="font-size: 14px; color: #334155; font-weight: bold;">选择礼物</span>
|
||||
</div>
|
||||
<button x-on:click="showGiftPanel = false"
|
||||
style="background: none; border: none; color: #94a3b8; cursor: pointer; font-size: 20px; line-height: 1; padding: 0 4px;">×</button>
|
||||
{{-- 职务履历时间轴（有任职记录才显示，可折叠） --}}
|
||||
<div x-show="userInfo.position_history && userInfo.position_history.length > 0"
|
||||
style="display: none; margin-top: 10px; border-top: 1px solid #f0f0f0; padding-top: 8px;">
|
||||
{{-- 可点击标题 --}}
|
||||
<div x-on:click="showPositionHistory = !showPositionHistory"
|
||||
style="display: flex; align-items: center; justify-content: space-between;
|
||||
cursor: pointer; font-size: 11px; font-weight: bold; color: #7c3aed;
|
||||
margin-bottom: 4px; user-select: none;">
|
||||
<span>🎖️ 职务履历 <span style="font-weight: normal; font-size: 10px; color: #9ca3af;"
|
||||
x-text="'（' + userInfo.position_history.length + ' 条）'"></span></span>
|
||||
<span x-text="showPositionHistory ? '▲' : '▼'" style="font-size: 10px; opacity:0.5;"></span>
|
||||
</div>
|
||||
|
||||
{{-- 礼物选择列表 --}}
|
||||
<div
|
||||
style="display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; margin-bottom: 16px; max-height: 200px; overflow-y: auto; padding-right: 4px;">
|
||||
<template x-for="g in gifts" :key="g.id">
|
||||
<div x-on:click="selectedGiftId = g.id"
|
||||
:style="selectedGiftId === g.id ?
|
||||
'border-color: #f43f5e; background: #fff1f2; box-shadow: 0 4px 12px rgba(244, 63, 94, 0.15); transform: translateY(-1px);' :
|
||||
'border-color: #e2e8f0; background: #fff; box-shadow: 0 1px 2px rgba(0,0,0,0.03); transform: translateY(0);'"
|
||||
style="border: 2px solid; padding: 10px 4px; border-radius: 10px; text-align: center; cursor: pointer; transition: all 0.2s ease; display: flex; flex-direction: column; align-items: center; justify-content: center;">
|
||||
<img :src="'/images/gifts/' + g.image"
|
||||
style="width: 44px; height: 44px; object-fit: contain; margin-bottom: 6px; transition: transform 0.2s ease;"
|
||||
:style="selectedGiftId === g.id ? 'transform: scale(1.1);' : ''"
|
||||
:alt="g.name">
|
||||
<div style="font-size: 12px; color: #1e293b; font-weight: 600; margin-bottom: 4px; width: 100%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;"
|
||||
x-text="g.name"></div>
|
||||
<div style="font-size: 10px; color: #e11d48; font-weight: 500; line-height: 1.3;">
|
||||
<div x-text="g.cost + ' 💰'"></div>
|
||||
<div x-text="'+' + g.charm + ' ✨'"></div>
|
||||
{{-- 折叠内容 --}}
|
||||
<div x-show="showPositionHistory" x-transition style="display: none;">
|
||||
<template x-for="(h, idx) in userInfo.position_history" :key="idx">
|
||||
<div style="display: flex; gap: 10px; margin-bottom: 8px; position: relative;">
|
||||
{{-- 线 --}}
|
||||
<div
|
||||
style="display: flex; flex-direction: column; align-items: center; width: 18px; flex-shrink: 0;">
|
||||
<div style="width: 10px; height: 10px; border-radius: 50%; flex-shrink: 0; margin-top: 2px;"
|
||||
:style="h.is_active ? 'background: #7c3aed; box-shadow: 0 0 0 3px #ede9fe;' :
|
||||
'background: #d1d5db;'">
|
||||
</div>
|
||||
<template x-if="idx < userInfo.position_history.length - 1">
|
||||
<div style="width: 1px; flex: 1; background: #e5e7eb; margin-top: 2px;"></div>
|
||||
</template>
|
||||
</div>
|
||||
{{-- 内容 --}}
|
||||
<div style="flex: 1; font-size: 11px; padding-bottom: 4px;">
|
||||
<div style="font-weight: bold; color: #374151;">
|
||||
<span x-text="h.position_icon" style="margin-right: 2px;"></span>
|
||||
<span
|
||||
x-text="(h.department_name ? h.department_name + ' · ' : '') + h.position_name"></span>
|
||||
<span x-show="h.is_active"
|
||||
style="display: inline-block; margin-left: 4px; padding: 0 5px; background: #ede9fe; color: #7c3aed; border-radius: 10px; font-size: 10px;">在职中</span>
|
||||
</div>
|
||||
<div style="color: #9ca3af; font-size: 10px; margin-top: 2px;">
|
||||
<span x-text="h.appointed_at"></span>
|
||||
<span> – </span>
|
||||
<span x-text="h.is_active ? '至今' : (h.revoked_at || '')"></span>
|
||||
<span style="margin-left: 4px;" x-text="'(' + h.duration_days + ' 天)'"></span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{{-- 数量 + 送出按钮 --}}
|
||||
<div style="display: flex; gap: 12px; align-items: center;">
|
||||
<div style="position: relative;">
|
||||
<select x-model.number="giftCount"
|
||||
style="appearance: none; width: 76px; height: 42px; padding: 0 24px 0 12px; border: 1px solid #cbd5e1; border-radius: 8px; font-size: 14px; font-weight: 500; color: #334155; background-color: #fff; cursor: pointer; outline: none; box-shadow: 0 1px 2px rgba(0,0,0,0.05); transition: border-color 0.2s ease;"
|
||||
onfocus="this.style.borderColor='#f43f5e'" onblur="this.style.borderColor='#cbd5e1'">
|
||||
<option value="1">1 个</option>
|
||||
<option value="5">5 个</option>
|
||||
<option value="10">10 个</option>
|
||||
<option value="66">66 个</option>
|
||||
<option value="99">99 个</option>
|
||||
<option value="520">520 个</option>
|
||||
</select>
|
||||
<div
|
||||
style="position: absolute; right: 10px; top: 50%; transform: translateY(-50%); pointer-events: none; color: #94a3b8; font-size: 10px;">
|
||||
▼
|
||||
{{-- 普通操作按鈕：写私信 + 送花 + 内联礼物面板 --}}
|
||||
<div x-data="{ showGiftPanel: false }" x-show="userInfo.username !== window.chatContext.username">
|
||||
|
||||
<div class="modal-actions" style="margin-bottom: 0;">
|
||||
{{-- 写私信 --}}
|
||||
<a class="btn-mail"
|
||||
:href="'{{ route('guestbook.index', ['tab' => 'outbox']) }}&to=' + encodeURIComponent(userInfo
|
||||
.username)"
|
||||
target="_blank">
|
||||
写私信
|
||||
</a>
|
||||
{{-- 送花按鈕（与写私信并列） --}}
|
||||
<button class="btn-whisper" x-on:click="showGiftPanel = !showGiftPanel">
|
||||
🎁 送礼物
|
||||
</button>
|
||||
</div>
|
||||
|
||||
{{-- 内联礼物面板 --}}
|
||||
<div x-show="showGiftPanel" x-transition
|
||||
style="display: none;
|
||||
padding: 12px 16px; background: #fff; border-top: 1px solid #f1f5f9;">
|
||||
|
||||
<div
|
||||
style="display: flex; justify-content: space-between; align-items: center; margin-bottom: 10px;">
|
||||
<span style="font-size: 13px; color: #334155; font-weight: bold;">🎁 选择礼物</span>
|
||||
<button x-on:click="showGiftPanel = false"
|
||||
style="background: none; border: none; color: #94a3b8; cursor: pointer; font-size: 18px; line-height: 1;">×</button>
|
||||
</div>
|
||||
|
||||
{{-- 礼物选择列表 --}}
|
||||
<div
|
||||
style="display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; margin-bottom: 12px; max-height: 180px; overflow-y: auto;">
|
||||
<template x-for="g in gifts" :key="g.id">
|
||||
<div x-on:click="selectedGiftId = g.id"
|
||||
:style="selectedGiftId === g.id ?
|
||||
'border-color: #f43f5e; background: #fff1f2; box-shadow: 0 4px 12px rgba(244,63,94,0.15);' :
|
||||
'border-color: #e2e8f0; background: #fff;'"
|
||||
style="border: 2px solid; padding: 8px 4px; border-radius: 8px; text-align: center; cursor: pointer; transition: all 0.15s;">
|
||||
<img :src="'/images/gifts/' + g.image"
|
||||
style="width: 36px; height: 36px; object-fit: contain; margin-bottom: 4px;"
|
||||
:alt="g.name">
|
||||
<div style="font-size: 11px; color: #1e293b; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;"
|
||||
x-text="g.name"></div>
|
||||
<div style="font-size: 10px; color: #e11d48;" x-text="g.cost + ' 💰'"></div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
</div>
|
||||
|
||||
{{-- 数量 + 送出 --}}
|
||||
<div style="display: flex; gap: 8px; align-items: center;">
|
||||
<select x-model.number="giftCount"
|
||||
style="width: 70px; height: 36px; padding: 0 8px; border: 1px solid #cbd5e1; border-radius: 6px; font-size: 13px; color: #334155;">
|
||||
<option value="1">1 个</option>
|
||||
<option value="5">5 个</option>
|
||||
<option value="10">10 个</option>
|
||||
<option value="66">66 个</option>
|
||||
<option value="99">99 个</option>
|
||||
<option value="520">520 个</option>
|
||||
</select>
|
||||
<button x-on:click="sendGift(); showGiftPanel = false;" :disabled="sendingGift"
|
||||
style="flex: 1; height: 42px; display: flex; align-items: center; justify-content: center; gap: 8px; background: linear-gradient(135deg, #f43f5e 0%, #be123c 100%); color: #fff; border: 1px solid #9f1239; border-radius: 8px; font-size: 16px; font-weight: 800; letter-spacing: 1px; cursor: pointer; transition: all 0.2s; box-shadow: 0 4px 12px rgba(225, 29, 72, 0.4), inset 0 1px 1px rgba(255, 255, 255, 0.3);"
|
||||
x-on:mousedown="if(!sendingGift) { $el.style.transform='scale(0.96)'; $el.style.boxShadow='0 2px 6px rgba(225, 29, 72, 0.3)'; }"
|
||||
x-on:mouseup="if(!sendingGift) { $el.style.transform='scale(1)'; $el.style.boxShadow='0 4px 12px rgba(225, 29, 72, 0.4), inset 0 1px 1px rgba(255, 255, 255, 0.3)'; }"
|
||||
x-on:mouseleave="if(!sendingGift) { $el.style.transform='scale(1)'; $el.style.boxShadow='0 4px 12px rgba(225, 29, 72, 0.4), inset 0 1px 1px rgba(255, 255, 255, 0.3)'; }"
|
||||
:style="sendingGift ?
|
||||
'opacity: 0.7; cursor: not-allowed; transform: scale(1) !important; box-shadow: none;' :
|
||||
''">
|
||||
<span x-text="sendingGift ? '正在送出...' : '💝 确认赠送'"
|
||||
style="text-shadow: 0 1px 2px rgba(0,0,0,0.3);"></span>
|
||||
style="flex:1; height: 36px; background: linear-gradient(135deg,#f43f5e,#be123c); color:#fff;
|
||||
border: none; border-radius: 6px; font-size: 14px; font-weight: bold; cursor: pointer;"
|
||||
:style="sendingGift ? 'opacity:0.7; cursor:not-allowed;' : ''">
|
||||
<span x-text="sendingGift ? '正在送出...' : '💝 确认赠送'"></span>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{{-- 特权操作（各按钮按等级独立显示） --}}
|
||||
@if ($myLevel >= $levelWarn || $room->master == Auth::user()->username)
|
||||
<div style="padding: 0 16px 12px;"
|
||||
x-show="userInfo.username !== window.chatContext.username && userInfo.user_level < {{ $myLevel }}">
|
||||
<div style="font-size: 11px; color: #c00; margin-bottom: 6px; font-weight: bold;">管理操作</div>
|
||||
<div style="display: flex; gap: 6px; flex-wrap: wrap;">
|
||||
@if ($myLevel >= $levelWarn)
|
||||
<button
|
||||
style="flex:1; padding: 5px; border-radius: 4px; font-size: 11px; background: #fef3c7; border: 1px solid #f59e0b; cursor: pointer;"
|
||||
x-on:click="warnUser()">⚠️ 警告</button>
|
||||
@endif
|
||||
@if ($myLevel >= $levelKick)
|
||||
<button
|
||||
style="flex:1; padding: 5px; border-radius: 4px; font-size: 11px; background: #fee2e2; border: 1px solid #ef4444; cursor: pointer;"
|
||||
x-on:click="kickUser()">🚫 踢出</button>
|
||||
@endif
|
||||
@if ($myLevel >= $levelMute)
|
||||
<button
|
||||
style="flex:1; padding: 5px; border-radius: 4px; font-size: 11px; background: #e0e7ff; border: 1px solid #6366f1; cursor: pointer;"
|
||||
x-on:click="isMuting = !isMuting">🔇 禁言</button>
|
||||
@endif
|
||||
@if ($myLevel >= $levelFreeze)
|
||||
<button
|
||||
style="flex:1; padding: 5px; border-radius: 4px; font-size: 11px; background: #dbeafe; border: 1px solid #3b82f6; cursor: pointer;"
|
||||
x-on:click="freezeUser()">🧊 冻结</button>
|
||||
@endif
|
||||
@if ($myLevel >= $superLevel)
|
||||
<button
|
||||
style="flex:1; padding: 5px; border-radius: 4px; font-size: 11px; background: #f3e8ff; border: 1px solid #a855f7; cursor: pointer;"
|
||||
x-on:click="loadWhispers()">🔍 私信</button>
|
||||
@endif
|
||||
{{-- 管理操作 + 职务操作 合并折叠区 --}}
|
||||
@if (
|
||||
$myLevel >= $levelWarn ||
|
||||
$room->master == Auth::user()->username ||
|
||||
Auth::user()->activePosition ||
|
||||
$myLevel >= $superLevel)
|
||||
<div style="padding: 0 16px 12px;" x-show="userInfo.username !== window.chatContext.username">
|
||||
|
||||
{{-- 折叠标题 --}}
|
||||
<div x-on:click="showAdminPanel = !showAdminPanel"
|
||||
style="display: flex; align-items: center; justify-content: space-between;
|
||||
padding: 6px 10px; background: #fef2f2; border: 1px solid #fecaca;
|
||||
border-radius: 6px; cursor: pointer; user-select: none;">
|
||||
<span style="font-size: 11px; color: #c00; font-weight: bold;">🔧 管理操作</span>
|
||||
<span x-text="showAdminPanel ? '▲' : '▼'"
|
||||
style="font-size: 10px; color: #c00; opacity: 0.6;"></span>
|
||||
</div>
|
||||
</div>
|
||||
{{-- 禁言表单 --}}
|
||||
<div x-show="isMuting" style="display: none; padding: 0 16px 12px;">
|
||||
<div style="display: flex; gap: 6px; align-items: center;">
|
||||
<input type="number" x-model="muteDuration" min="1" max="1440" placeholder="分钟"
|
||||
style="width: 60px; padding: 4px; border: 1px solid #ccc; border-radius: 3px; font-size: 11px;">
|
||||
<span style="font-size: 11px; color: #b86e00;">分钟</span>
|
||||
<button x-on:click="muteUser()"
|
||||
style="padding: 4px 12px; background: #6366f1; color: #fff; border: none; border-radius: 3px; font-size: 11px; cursor: pointer;">执行</button>
|
||||
|
||||
{{-- 折叠内容 --}}
|
||||
<div x-show="showAdminPanel" x-transition style="display: none; margin-top: 6px;">
|
||||
|
||||
@if ($myLevel >= $levelWarn || $room->master == Auth::user()->username)
|
||||
<div x-show="userInfo.user_level < {{ $myLevel }}">
|
||||
<div style="font-size: 10px; color: #9ca3af; margin-bottom: 4px; padding-left: 2px;">
|
||||
管理员操作</div>
|
||||
<div style="display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 8px;">
|
||||
@if ($myLevel >= $levelWarn)
|
||||
<button
|
||||
style="flex:1; padding: 5px; border-radius: 4px; font-size: 11px; background: #fef3c7; border: 1px solid #f59e0b; cursor: pointer;"
|
||||
x-on:click="warnUser()">⚠️ 警告</button>
|
||||
@endif
|
||||
@if ($myLevel >= $levelKick)
|
||||
<button
|
||||
style="flex:1; padding: 5px; border-radius: 4px; font-size: 11px; background: #fee2e2; border: 1px solid #ef4444; cursor: pointer;"
|
||||
x-on:click="kickUser()">🚫 踢出</button>
|
||||
@endif
|
||||
@if ($myLevel >= $levelMute)
|
||||
<button
|
||||
style="flex:1; padding: 5px; border-radius: 4px; font-size: 11px; background: #e0e7ff; border: 1px solid #6366f1; cursor: pointer;"
|
||||
x-on:click="isMuting = !isMuting">🔇 禁言</button>
|
||||
@endif
|
||||
@if ($myLevel >= $levelFreeze)
|
||||
<button
|
||||
style="flex:1; padding: 5px; border-radius: 4px; font-size: 11px; background: #dbeafe; border: 1px solid #3b82f6; cursor: pointer;"
|
||||
x-on:click="freezeUser()">🧊 冻结</button>
|
||||
@endif
|
||||
@if ($myLevel >= $superLevel)
|
||||
<button
|
||||
style="flex:1; padding: 5px; border-radius: 4px; font-size: 11px; background: #f3e8ff; border: 1px solid #a855f7; cursor: pointer;"
|
||||
x-on:click="loadWhispers()">🔍 私信</button>
|
||||
@endif
|
||||
</div>
|
||||
</div>
|
||||
@endif
|
||||
|
||||
@if (Auth::user()->activePosition || $myLevel >= $superLevel)
|
||||
<div>
|
||||
<div style="font-size: 10px; color: #9ca3af; margin-bottom: 4px; padding-left: 2px;">
|
||||
职务操作</div>
|
||||
<div style="display: flex; gap: 6px; flex-wrap: wrap;">
|
||||
<template x-if="!userInfo.position_name">
|
||||
<button x-on:click="showAppointPanel = !showAppointPanel"
|
||||
style="flex:1; padding: 5px; border-radius: 4px; font-size: 11px; background: #f3e8ff; border: 1px solid #a855f7; cursor: pointer;">✨
|
||||
任命职务</button>
|
||||
</template>
|
||||
<template x-if="userInfo.position_name">
|
||||
<button x-on:click="doRevoke()" :disabled="appointLoading"
|
||||
style="flex:1; padding: 5px; border-radius: 4px; font-size: 11px; background: #fef9c3; border: 1px solid #eab308; cursor: pointer;">🔧
|
||||
撤销职务</button>
|
||||
</template>
|
||||
</div>
|
||||
<div x-show="showAppointPanel" x-transition
|
||||
style="display:none; margin-top:8px; padding:10px; background:#faf5ff; border:1px solid #d8b4fe; border-radius:6px;">
|
||||
<div style="font-size:11px; color:#7c3aed; margin-bottom:6px;">选择职务：</div>
|
||||
<select x-model.number="selectedPositionId"
|
||||
style="width:100%; padding:4px; border:1px solid #c4b5fd; border-radius:4px; font-size:11px; margin-bottom:6px;">
|
||||
<template x-for="p in appointPositions" :key="p.id">
|
||||
<option :value="p.id"
|
||||
x-text="(p.icon?p.icon+' ':'')+p.department+' · '+p.name"></option>
|
||||
</template>
|
||||
</select>
|
||||
<input type="text" x-model="appointRemark" placeholder="备注（如任命原因）"
|
||||
style="width:100%; padding:4px; border:1px solid #c4b5fd; border-radius:4px; font-size:11px; box-sizing:border-box; margin-bottom:6px;">
|
||||
<div style="display:flex; gap:6px;">
|
||||
<button x-on:click="doAppoint()"
|
||||
:disabled="appointLoading || !selectedPositionId"
|
||||
style="flex:1; padding:5px; background:#7c3aed; color:#fff; border:none; border-radius:4px; font-size:11px; cursor:pointer;">
|
||||
<span x-text="appointLoading?'处理中...':'✅ 确认任命'"></span>
|
||||
</button>
|
||||
<button x-on:click="showAppointPanel=false"
|
||||
style="padding:5px 10px; background:#fff; border:1px solid #ccc; border-radius:4px; font-size:11px; cursor:pointer;">取消</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@endif
|
||||
|
||||
</div>{{-- /折叠内容 --}}
|
||||
|
||||
{{-- 禁言输入表单 --}}
|
||||
<div x-show="isMuting" style="display:none; margin-top:6px;">
|
||||
<div style="display:flex; gap:6px; align-items:center;">
|
||||
<input type="number" x-model="muteDuration" min="1" max="1440"
|
||||
placeholder="分钟"
|
||||
style="width:60px; padding:4px; border:1px solid #ccc; border-radius:3px; font-size:11px;">
|
||||
<span style="font-size:11px; color:#b86e00;">分钟</span>
|
||||
<button x-on:click="muteUser()"
|
||||
style="padding:4px 12px; background:#6366f1; color:#fff; border:none; border-radius:3px; font-size:11px; cursor:pointer;">执行</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
@endif
|
||||
|
||||
|
||||
Reference in New Issue
Block a user