重构：将用户名片弹窗完整迁移到 user-actions.blade.php
- 从 frame.blade.php 中移除 276 行用户名片弹窗代码 - 全部整合到 user-actions.blade.php（全局函数 + Alpine 组件 + 弹窗 HTML） - frame.blade.php 减负至约 300 行，结构更清晰 - 所有用户交互逻辑集中管理：单击切换目标、双击名片弹窗、管理操作
This commit is contained in:
@@ -91,282 +91,6 @@
|
|||||||
@include('chat.partials.right-panel')
|
@include('chat.partials.right-panel')
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
{{-- ═══════════ 用户名片弹窗 (Alpine.js) ═══════════ --}}
|
|
||||||
<div id="user-modal-container" x-data="{
|
|
||||||
showUserModal: false,
|
|
||||||
userInfo: {},
|
|
||||||
isMuting: false,
|
|
||||||
muteDuration: 5,
|
|
||||||
showWhispers: false,
|
|
||||||
whisperList: [],
|
|
||||||
showAnnounce: false,
|
|
||||||
announceText: '',
|
|
||||||
|
|
||||||
async fetchUser(username) {
|
|
||||||
try {
|
|
||||||
const res = await fetch('/user/' + encodeURIComponent(username));
|
|
||||||
const data = await res.json();
|
|
||||||
if (data.status === 'success') {
|
|
||||||
this.userInfo = data.data;
|
|
||||||
this.showUserModal = true;
|
|
||||||
this.isMuting = false;
|
|
||||||
this.showWhispers = false;
|
|
||||||
this.whisperList = [];
|
|
||||||
}
|
|
||||||
} catch (e) { console.error(e); }
|
|
||||||
},
|
|
||||||
|
|
||||||
async kickUser() {
|
|
||||||
const reason = prompt('踢出原因（可留空）：', '违反聊天室规则');
|
|
||||||
if (reason === null) return;
|
|
||||||
try {
|
|
||||||
const res = await fetch('/command/kick', {
|
|
||||||
method: 'POST',
|
|
||||||
headers: {
|
|
||||||
'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').getAttribute('content'),
|
|
||||||
'Content-Type': 'application/json',
|
|
||||||
'Accept': 'application/json'
|
|
||||||
},
|
|
||||||
body: JSON.stringify({
|
|
||||||
username: this.userInfo.username,
|
|
||||||
room_id: window.chatContext.roomId,
|
|
||||||
reason: reason || '违反聊天室规则'
|
|
||||||
})
|
|
||||||
});
|
|
||||||
const data = await res.json();
|
|
||||||
if (data.status === 'success') {
|
|
||||||
this.showUserModal = false;
|
|
||||||
} else {
|
|
||||||
alert('操作失败：' + data.message);
|
|
||||||
}
|
|
||||||
} catch (e) { alert('网络异常'); }
|
|
||||||
},
|
|
||||||
|
|
||||||
async muteUser() {
|
|
||||||
try {
|
|
||||||
const res = await fetch('/command/mute', {
|
|
||||||
method: 'POST',
|
|
||||||
headers: {
|
|
||||||
'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').getAttribute('content'),
|
|
||||||
'Content-Type': 'application/json',
|
|
||||||
'Accept': 'application/json'
|
|
||||||
},
|
|
||||||
body: JSON.stringify({
|
|
||||||
username: this.userInfo.username,
|
|
||||||
room_id: window.chatContext.roomId,
|
|
||||||
duration: this.muteDuration
|
|
||||||
})
|
|
||||||
});
|
|
||||||
const data = await res.json();
|
|
||||||
if (data.status === 'success') {
|
|
||||||
this.showUserModal = false;
|
|
||||||
} else {
|
|
||||||
alert('操作失败：' + data.message);
|
|
||||||
}
|
|
||||||
} catch (e) { alert('网络异常'); }
|
|
||||||
},
|
|
||||||
|
|
||||||
async warnUser() {
|
|
||||||
const reason = prompt('警告原因：', '请注意言行');
|
|
||||||
if (reason === null) return;
|
|
||||||
try {
|
|
||||||
const res = await fetch('/command/warn', {
|
|
||||||
method: 'POST',
|
|
||||||
headers: {
|
|
||||||
'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').getAttribute('content'),
|
|
||||||
'Content-Type': 'application/json',
|
|
||||||
'Accept': 'application/json'
|
|
||||||
},
|
|
||||||
body: JSON.stringify({
|
|
||||||
username: this.userInfo.username,
|
|
||||||
room_id: window.chatContext.roomId,
|
|
||||||
reason: reason || '请注意言行'
|
|
||||||
})
|
|
||||||
});
|
|
||||||
const data = await res.json();
|
|
||||||
if (data.status === 'success') {
|
|
||||||
this.showUserModal = false;
|
|
||||||
} else {
|
|
||||||
alert('操作失败：' + data.message);
|
|
||||||
}
|
|
||||||
} catch (e) { alert('网络异常'); }
|
|
||||||
},
|
|
||||||
|
|
||||||
async freezeUser() {
|
|
||||||
if (!confirm('确定要冻结 ' + this.userInfo.username + ' 的账号吗？冻结后将无法登录！')) return;
|
|
||||||
const reason = prompt('冻结原因：', '严重违规');
|
|
||||||
if (reason === null) return;
|
|
||||||
try {
|
|
||||||
const res = await fetch('/command/freeze', {
|
|
||||||
method: 'POST',
|
|
||||||
headers: {
|
|
||||||
'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').getAttribute('content'),
|
|
||||||
'Content-Type': 'application/json',
|
|
||||||
'Accept': 'application/json'
|
|
||||||
},
|
|
||||||
body: JSON.stringify({
|
|
||||||
username: this.userInfo.username,
|
|
||||||
room_id: window.chatContext.roomId,
|
|
||||||
reason: reason || '严重违规'
|
|
||||||
})
|
|
||||||
});
|
|
||||||
const data = await res.json();
|
|
||||||
if (data.status === 'success') {
|
|
||||||
this.showUserModal = false;
|
|
||||||
} else {
|
|
||||||
alert('操作失败：' + data.message);
|
|
||||||
}
|
|
||||||
} catch (e) { alert('网络异常'); }
|
|
||||||
},
|
|
||||||
|
|
||||||
async loadWhispers() {
|
|
||||||
try {
|
|
||||||
const res = await fetch('/command/whispers/' + encodeURIComponent(this.userInfo.username), {
|
|
||||||
headers: { 'Accept': 'application/json' }
|
|
||||||
});
|
|
||||||
const data = await res.json();
|
|
||||||
if (data.status === 'success') {
|
|
||||||
this.whisperList = data.messages;
|
|
||||||
this.showWhispers = true;
|
|
||||||
} else {
|
|
||||||
alert(data.message);
|
|
||||||
}
|
|
||||||
} catch (e) { alert('网络异常'); }
|
|
||||||
},
|
|
||||||
|
|
||||||
async sendAnnounce() {
|
|
||||||
if (!this.announceText.trim()) return;
|
|
||||||
try {
|
|
||||||
const res = await fetch('/command/announce', {
|
|
||||||
method: 'POST',
|
|
||||||
headers: {
|
|
||||||
'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').getAttribute('content'),
|
|
||||||
'Content-Type': 'application/json',
|
|
||||||
'Accept': 'application/json'
|
|
||||||
},
|
|
||||||
body: JSON.stringify({
|
|
||||||
content: this.announceText,
|
|
||||||
room_id: window.chatContext.roomId,
|
|
||||||
})
|
|
||||||
});
|
|
||||||
const data = await res.json();
|
|
||||||
if (data.status === 'success') {
|
|
||||||
this.announceText = '';
|
|
||||||
this.showAnnounce = false;
|
|
||||||
} else {
|
|
||||||
alert(data.message);
|
|
||||||
}
|
|
||||||
} catch (e) { alert('网络异常'); }
|
|
||||||
}
|
|
||||||
}">
|
|
||||||
<div x-show="showUserModal" style="display: none;" class="modal-overlay"
|
|
||||||
x-on:click.self="showUserModal = false">
|
|
||||||
<div class="modal-card" x-transition>
|
|
||||||
{{-- 弹窗头部 --}}
|
|
||||||
<div class="modal-header">
|
|
||||||
<h3 x-text="'用户名片 · ' + userInfo.username"></h3>
|
|
||||||
<button class="modal-close" x-on:click="showUserModal = false">×</button>
|
|
||||||
</div>
|
|
||||||
{{-- 弹窗内容 --}}
|
|
||||||
<div class="modal-body">
|
|
||||||
<div class="profile-row">
|
|
||||||
<img class="profile-avatar" x-show="userInfo.headface"
|
|
||||||
:src="'/images/headface/' + userInfo.headface" x-on:error="$el.style.display='none'">
|
|
||||||
<div class="profile-info">
|
|
||||||
<h4>
|
|
||||||
<span x-text="userInfo.username"></span>
|
|
||||||
<span class="level-badge" x-text="'LV.' + userInfo.user_level"></span>
|
|
||||||
<span class="sex-badge"
|
|
||||||
x-text="userInfo.sex === '男' ? '♂' : (userInfo.sex === '女' ? '♀' : '')"
|
|
||||||
:style="userInfo.sex === '男' ? 'color: blue' : (userInfo.sex === '女' ?
|
|
||||||
'color: deeppink' : '')"></span>
|
|
||||||
</h4>
|
|
||||||
<div style="font-size: 11px; color: #999; margin-top: 2px;">
|
|
||||||
加入: <span x-text="userInfo.created_at"></span>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="profile-detail" x-text="userInfo.sign || '这家伙很懒，什么也没留下'"></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>
|
|
||||||
|
|
||||||
{{-- 特权操作（各按钮按等级独立显示） --}}
|
|
||||||
@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
|
|
||||||
</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>
|
|
||||||
</div>
|
|
||||||
@endif
|
|
||||||
|
|
||||||
{{-- 私信记录展示区（管理员查看） --}}
|
|
||||||
<div x-show="showWhispers"
|
|
||||||
style="display: none; padding: 0 16px 12px; max-height: 200px; overflow-y: auto;">
|
|
||||||
<div style="font-size: 11px; color: #666; margin-bottom: 4px;"
|
|
||||||
x-text="'最近 ' + whisperList.length + ' 条悄悄话：'"></div>
|
|
||||||
<template x-for="w in whisperList" :key="w.id">
|
|
||||||
<div style="font-size: 11px; padding: 3px 0; border-bottom: 1px solid #f0f0f0;">
|
|
||||||
<span style="color: #6366f1;" x-text="w.from_user"></span>
|
|
||||||
→ <span style="color: #059669;" x-text="w.to_user"></span>：
|
|
||||||
<span x-text="w.content"></span>
|
|
||||||
<span style="color: #aaa; font-size: 10px;" x-text="'(' + w.sent_at + ')'"></span>
|
|
||||||
</div>
|
|
||||||
</template>
|
|
||||||
<div x-show="whisperList.length === 0" style="font-size: 11px; color: #aaa;">暂无悄悄话记录</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
{{-- ═══════════ 聊天室交互脚本（独立文件维护） ═══════════ --}}
|
{{-- ═══════════ 聊天室交互脚本（独立文件维护） ═══════════ --}}
|
||||||
@include('chat.partials.user-actions')
|
@include('chat.partials.user-actions')
|
||||||
@include('chat.partials.scripts')
|
@include('chat.partials.scripts')
|
||||||
@@ -392,8 +116,7 @@
|
|||||||
<span style="font-size:12px; color:#666;">当前选中：</span>
|
<span style="font-size:12px; color:#666;">当前选中：</span>
|
||||||
<img id="avatar-preview" src="/images/headface/{{ $user->usersf ?: '1.gif' }}"
|
<img id="avatar-preview" src="/images/headface/{{ $user->usersf ?: '1.gif' }}"
|
||||||
style="width:40px; height:40px; border:2px solid #336699; border-radius:4px;">
|
style="width:40px; height:40px; border:2px solid #336699; border-radius:4px;">
|
||||||
<span id="avatar-selected-name"
|
<span id="avatar-selected-name" style="font-size:12px; color:#333;">{{ $user->usersf ?: '未设置' }}</span>
|
||||||
style="font-size:12px; color:#333;">{{ $user->usersf ?: '未设置' }}</span>
|
|
||||||
<button id="avatar-save-btn" disabled onclick="saveAvatar()"
|
<button id="avatar-save-btn" disabled onclick="saveAvatar()"
|
||||||
style="margin-left:auto; padding:5px 16px; background:#336699; color:#fff; border:none;
|
style="margin-left:auto; padding:5px 16px; background:#336699; color:#fff; border:none;
|
||||||
border-radius:3px; font-size:12px; cursor:pointer;">确定更换</button>
|
border-radius:3px; font-size:12px; cursor:pointer;">确定更换</button>
|
||||||
|
|||||||
@@ -1,12 +1,18 @@
|
|||||||
{{--
|
{{--
|
||||||
文件功能：用户交互全局函数（单击选择目标、双击打开名片弹窗）
|
文件功能：用户交互全局函数 + 名片弹窗组件
|
||||||
|
|
||||||
聊天消息区和右侧用户列表统一调用此文件中的函数。
|
包含：
|
||||||
从 scripts.blade.php 中抽取，保持代码职责清晰。
|
1. switchTarget() — 单击用户名切换聊天目标
|
||||||
|
2. openUserCard() — 双击用户名打开名片弹窗
|
||||||
|
3. 用户名片弹窗 Alpine.js 组件（资料查看 + 管理操作）
|
||||||
|
|
||||||
|
从 scripts.blade.php 和 frame.blade.php 中抽取，保持代码职责清晰。
|
||||||
|
|
||||||
@author ChatRoom Laravel
|
@author ChatRoom Laravel
|
||||||
@version 1.0.0
|
@version 1.0.0
|
||||||
--}}
|
--}}
|
||||||
|
|
||||||
|
{{-- ═══════════ 全局交互函数 ═══════════ --}}
|
||||||
<script>
|
<script>
|
||||||
/**
|
/**
|
||||||
* 全局函数：单击用户名 → 切换聊天目标
|
* 全局函数：单击用户名 → 切换聊天目标
|
||||||
@@ -54,3 +60,279 @@
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
|
{{-- ═══════════ 用户名片弹窗 (Alpine.js) ═══════════ --}}
|
||||||
|
<div id="user-modal-container" x-data="{
|
||||||
|
showUserModal: false,
|
||||||
|
userInfo: {},
|
||||||
|
isMuting: false,
|
||||||
|
muteDuration: 5,
|
||||||
|
showWhispers: false,
|
||||||
|
whisperList: [],
|
||||||
|
showAnnounce: false,
|
||||||
|
announceText: '',
|
||||||
|
|
||||||
|
async fetchUser(username) {
|
||||||
|
try {
|
||||||
|
const res = await fetch('/user/' + encodeURIComponent(username));
|
||||||
|
const data = await res.json();
|
||||||
|
if (data.status === 'success') {
|
||||||
|
this.userInfo = data.data;
|
||||||
|
this.showUserModal = true;
|
||||||
|
this.isMuting = false;
|
||||||
|
this.showWhispers = false;
|
||||||
|
this.whisperList = [];
|
||||||
|
}
|
||||||
|
} catch (e) { console.error(e); }
|
||||||
|
},
|
||||||
|
|
||||||
|
async kickUser() {
|
||||||
|
const reason = prompt('踢出原因（可留空）：', '违反聊天室规则');
|
||||||
|
if (reason === null) return;
|
||||||
|
try {
|
||||||
|
const res = await fetch('/command/kick', {
|
||||||
|
method: 'POST',
|
||||||
|
headers: {
|
||||||
|
'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').getAttribute('content'),
|
||||||
|
'Content-Type': 'application/json',
|
||||||
|
'Accept': 'application/json'
|
||||||
|
},
|
||||||
|
body: JSON.stringify({
|
||||||
|
username: this.userInfo.username,
|
||||||
|
room_id: window.chatContext.roomId,
|
||||||
|
reason: reason || '违反聊天室规则'
|
||||||
|
})
|
||||||
|
});
|
||||||
|
const data = await res.json();
|
||||||
|
if (data.status === 'success') {
|
||||||
|
this.showUserModal = false;
|
||||||
|
} else {
|
||||||
|
alert('操作失败：' + data.message);
|
||||||
|
}
|
||||||
|
} catch (e) { alert('网络异常'); }
|
||||||
|
},
|
||||||
|
|
||||||
|
async muteUser() {
|
||||||
|
try {
|
||||||
|
const res = await fetch('/command/mute', {
|
||||||
|
method: 'POST',
|
||||||
|
headers: {
|
||||||
|
'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').getAttribute('content'),
|
||||||
|
'Content-Type': 'application/json',
|
||||||
|
'Accept': 'application/json'
|
||||||
|
},
|
||||||
|
body: JSON.stringify({
|
||||||
|
username: this.userInfo.username,
|
||||||
|
room_id: window.chatContext.roomId,
|
||||||
|
duration: this.muteDuration
|
||||||
|
})
|
||||||
|
});
|
||||||
|
const data = await res.json();
|
||||||
|
if (data.status === 'success') {
|
||||||
|
this.showUserModal = false;
|
||||||
|
} else {
|
||||||
|
alert('操作失败：' + data.message);
|
||||||
|
}
|
||||||
|
} catch (e) { alert('网络异常'); }
|
||||||
|
},
|
||||||
|
|
||||||
|
async warnUser() {
|
||||||
|
const reason = prompt('警告原因：', '请注意言行');
|
||||||
|
if (reason === null) return;
|
||||||
|
try {
|
||||||
|
const res = await fetch('/command/warn', {
|
||||||
|
method: 'POST',
|
||||||
|
headers: {
|
||||||
|
'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').getAttribute('content'),
|
||||||
|
'Content-Type': 'application/json',
|
||||||
|
'Accept': 'application/json'
|
||||||
|
},
|
||||||
|
body: JSON.stringify({
|
||||||
|
username: this.userInfo.username,
|
||||||
|
room_id: window.chatContext.roomId,
|
||||||
|
reason: reason || '请注意言行'
|
||||||
|
})
|
||||||
|
});
|
||||||
|
const data = await res.json();
|
||||||
|
if (data.status === 'success') {
|
||||||
|
this.showUserModal = false;
|
||||||
|
} else {
|
||||||
|
alert('操作失败：' + data.message);
|
||||||
|
}
|
||||||
|
} catch (e) { alert('网络异常'); }
|
||||||
|
},
|
||||||
|
|
||||||
|
async freezeUser() {
|
||||||
|
if (!confirm('确定要冻结 ' + this.userInfo.username + ' 的账号吗？冻结后将无法登录！')) return;
|
||||||
|
const reason = prompt('冻结原因：', '严重违规');
|
||||||
|
if (reason === null) return;
|
||||||
|
try {
|
||||||
|
const res = await fetch('/command/freeze', {
|
||||||
|
method: 'POST',
|
||||||
|
headers: {
|
||||||
|
'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').getAttribute('content'),
|
||||||
|
'Content-Type': 'application/json',
|
||||||
|
'Accept': 'application/json'
|
||||||
|
},
|
||||||
|
body: JSON.stringify({
|
||||||
|
username: this.userInfo.username,
|
||||||
|
room_id: window.chatContext.roomId,
|
||||||
|
reason: reason || '严重违规'
|
||||||
|
})
|
||||||
|
});
|
||||||
|
const data = await res.json();
|
||||||
|
if (data.status === 'success') {
|
||||||
|
this.showUserModal = false;
|
||||||
|
} else {
|
||||||
|
alert('操作失败：' + data.message);
|
||||||
|
}
|
||||||
|
} catch (e) { alert('网络异常'); }
|
||||||
|
},
|
||||||
|
|
||||||
|
async loadWhispers() {
|
||||||
|
try {
|
||||||
|
const res = await fetch('/command/whispers/' + encodeURIComponent(this.userInfo.username), {
|
||||||
|
headers: { 'Accept': 'application/json' }
|
||||||
|
});
|
||||||
|
const data = await res.json();
|
||||||
|
if (data.status === 'success') {
|
||||||
|
this.whisperList = data.messages;
|
||||||
|
this.showWhispers = true;
|
||||||
|
} else {
|
||||||
|
alert(data.message);
|
||||||
|
}
|
||||||
|
} catch (e) { alert('网络异常'); }
|
||||||
|
},
|
||||||
|
|
||||||
|
async sendAnnounce() {
|
||||||
|
if (!this.announceText.trim()) return;
|
||||||
|
try {
|
||||||
|
const res = await fetch('/command/announce', {
|
||||||
|
method: 'POST',
|
||||||
|
headers: {
|
||||||
|
'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').getAttribute('content'),
|
||||||
|
'Content-Type': 'application/json',
|
||||||
|
'Accept': 'application/json'
|
||||||
|
},
|
||||||
|
body: JSON.stringify({
|
||||||
|
content: this.announceText,
|
||||||
|
room_id: window.chatContext.roomId,
|
||||||
|
})
|
||||||
|
});
|
||||||
|
const data = await res.json();
|
||||||
|
if (data.status === 'success') {
|
||||||
|
this.announceText = '';
|
||||||
|
this.showAnnounce = false;
|
||||||
|
} else {
|
||||||
|
alert(data.message);
|
||||||
|
}
|
||||||
|
} catch (e) { alert('网络异常'); }
|
||||||
|
}
|
||||||
|
}">
|
||||||
|
<div x-show="showUserModal" style="display: none;" class="modal-overlay" x-on:click.self="showUserModal = false">
|
||||||
|
<div class="modal-card" x-transition>
|
||||||
|
{{-- 弹窗头部 --}}
|
||||||
|
<div class="modal-header">
|
||||||
|
<h3 x-text="'用户名片 · ' + userInfo.username"></h3>
|
||||||
|
<button class="modal-close" x-on:click="showUserModal = false">×</button>
|
||||||
|
</div>
|
||||||
|
{{-- 弹窗内容 --}}
|
||||||
|
<div class="modal-body">
|
||||||
|
<div class="profile-row">
|
||||||
|
<img class="profile-avatar" x-show="userInfo.headface"
|
||||||
|
:src="'/images/headface/' + (userInfo.headface || '1.gif').toLowerCase()"
|
||||||
|
x-on:error="$el.style.display='none'">
|
||||||
|
<div class="profile-info">
|
||||||
|
<h4>
|
||||||
|
<span x-text="userInfo.username"></span>
|
||||||
|
<span class="level-badge" x-text="'LV.' + userInfo.user_level"></span>
|
||||||
|
<span class="sex-badge"
|
||||||
|
x-text="userInfo.sex === '男' ? '♂' : (userInfo.sex === '女' ? '♀' : '')"
|
||||||
|
:style="userInfo.sex === '男' ? 'color: blue' : (userInfo.sex === '女' ?
|
||||||
|
'color: deeppink' : '')"></span>
|
||||||
|
</h4>
|
||||||
|
<div style="font-size: 11px; color: #999; margin-top: 2px;">
|
||||||
|
加入: <span x-text="userInfo.created_at"></span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="profile-detail" x-text="userInfo.sign || '这家伙很懒，什么也没留下'"></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>
|
||||||
|
|
||||||
|
{{-- 特权操作（各按钮按等级独立显示） --}}
|
||||||
|
@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
|
||||||
|
</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>
|
||||||
|
</div>
|
||||||
|
@endif
|
||||||
|
|
||||||
|
{{-- 私信记录展示区（管理员查看） --}}
|
||||||
|
<div x-show="showWhispers"
|
||||||
|
style="display: none; padding: 0 16px 12px; max-height: 200px; overflow-y: auto;">
|
||||||
|
<div style="font-size: 11px; color: #666; margin-bottom: 4px;"
|
||||||
|
x-text="'最近 ' + whisperList.length + ' 条悄悄话：'"></div>
|
||||||
|
<template x-for="w in whisperList" :key="w.id">
|
||||||
|
<div style="font-size: 11px; padding: 3px 0; border-bottom: 1px solid #f0f0f0;">
|
||||||
|
<span style="color: #6366f1;" x-text="w.from_user"></span>
|
||||||
|
→ <span style="color: #059669;" x-text="w.to_user"></span>：
|
||||||
|
<span x-text="w.content"></span>
|
||||||
|
<span style="color: #aaa; font-size: 10px;" x-text="'(' + w.sent_at + ')'"></span>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
<div x-show="whisperList.length === 0" style="font-size: 11px; color: #aaa;">暂无悄悄话记录</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|||||||
Reference in New Issue
Block a user