lkddi
bba47d2698
- 新增 admin/whispers.blade.php 暗色主题聊天气泡样式 - 控制器支持 JSON（弹窗用）和 HTML（新窗口用）双模式 - 区分发出/收到方向，显示时间和消息数量
205 lines
5.3 KiB
PHP
205 lines
5.3 KiB
PHP
{{--
|
|
文件功能：管理员查看用户私聊记录页面
|
|
|
|
以聊天气泡形式展示目标用户最近的悄悄话记录。
|
|
|
|
@author ChatRoom Laravel
|
|
@version 1.0.0
|
|
--}}
|
|
<!DOCTYPE html>
|
|
<html lang="zh-CN">
|
|
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>私聊记录 · {{ $username }} - 管理查看</title>
|
|
<style>
|
|
* {
|
|
margin: 0;
|
|
padding: 0;
|
|
box-sizing: border-box;
|
|
}
|
|
|
|
body {
|
|
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
|
|
background: #1a1a2e;
|
|
color: #e0e0e0;
|
|
min-height: 100vh;
|
|
}
|
|
|
|
.header {
|
|
background: linear-gradient(135deg, #16213e, #0f3460);
|
|
padding: 16px 24px;
|
|
border-bottom: 1px solid #2a3a5e;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
}
|
|
|
|
.header h1 {
|
|
font-size: 16px;
|
|
font-weight: 600;
|
|
color: #e0e0e0;
|
|
}
|
|
|
|
.header h1 .username {
|
|
color: #4fc3f7;
|
|
font-weight: 700;
|
|
}
|
|
|
|
.header .meta {
|
|
font-size: 12px;
|
|
color: #78909c;
|
|
}
|
|
|
|
.chat-container {
|
|
max-width: 680px;
|
|
margin: 20px auto;
|
|
padding: 0 16px;
|
|
}
|
|
|
|
.empty-tip {
|
|
text-align: center;
|
|
color: #666;
|
|
padding: 60px 20px;
|
|
font-size: 14px;
|
|
}
|
|
|
|
.msg-bubble {
|
|
display: flex;
|
|
margin-bottom: 12px;
|
|
gap: 8px;
|
|
align-items: flex-start;
|
|
}
|
|
|
|
.msg-bubble.outgoing {
|
|
flex-direction: row-reverse;
|
|
}
|
|
|
|
.msg-avatar {
|
|
width: 36px;
|
|
height: 36px;
|
|
border-radius: 50%;
|
|
background: #2a3a5e;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
font-size: 13px;
|
|
font-weight: bold;
|
|
color: #4fc3f7;
|
|
flex-shrink: 0;
|
|
}
|
|
|
|
.msg-bubble.outgoing .msg-avatar {
|
|
color: #f48fb1;
|
|
}
|
|
|
|
.msg-body {
|
|
max-width: 75%;
|
|
}
|
|
|
|
.msg-name {
|
|
font-size: 11px;
|
|
color: #78909c;
|
|
margin-bottom: 3px;
|
|
padding: 0 8px;
|
|
}
|
|
|
|
.msg-bubble.outgoing .msg-name {
|
|
text-align: right;
|
|
}
|
|
|
|
.msg-content {
|
|
background: #16213e;
|
|
border: 1px solid #2a3a5e;
|
|
border-radius: 12px;
|
|
padding: 8px 14px;
|
|
font-size: 13px;
|
|
line-height: 1.5;
|
|
color: #e0e0e0;
|
|
word-break: break-word;
|
|
}
|
|
|
|
.msg-bubble.outgoing .msg-content {
|
|
background: #0f3460;
|
|
border-color: #1a4a8a;
|
|
}
|
|
|
|
.msg-time {
|
|
font-size: 10px;
|
|
color: #546e7a;
|
|
margin-top: 3px;
|
|
padding: 0 8px;
|
|
}
|
|
|
|
.msg-bubble.outgoing .msg-time {
|
|
text-align: right;
|
|
}
|
|
|
|
.msg-direction {
|
|
font-size: 10px;
|
|
color: #4fc3f7;
|
|
padding: 0 8px;
|
|
}
|
|
|
|
.msg-bubble.outgoing .msg-direction {
|
|
text-align: right;
|
|
color: #f48fb1;
|
|
}
|
|
|
|
.back-btn {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
gap: 4px;
|
|
color: #4fc3f7;
|
|
text-decoration: none;
|
|
font-size: 13px;
|
|
padding: 6px 12px;
|
|
border-radius: 4px;
|
|
background: rgba(79, 195, 247, 0.1);
|
|
transition: background 0.2s;
|
|
}
|
|
|
|
.back-btn:hover {
|
|
background: rgba(79, 195, 247, 0.2);
|
|
}
|
|
</style>
|
|
</head>
|
|
|
|
<body>
|
|
<div class="header">
|
|
<h1>🔍 私聊记录 · <span class="username">{{ $username }}</span></h1>
|
|
<div>
|
|
<span class="meta">共 {{ count($messages) }} 条记录</span>
|
|
<a href="javascript:window.close()" class="back-btn" style="margin-left: 12px;">✕ 关闭</a>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="chat-container">
|
|
@if (count($messages) === 0)
|
|
<div class="empty-tip">暂无私聊记录</div>
|
|
@else
|
|
@foreach ($messages as $msg)
|
|
@php
|
|
$isOutgoing = $msg->from_user === $username;
|
|
$initial = mb_substr($msg->from_user, 0, 1);
|
|
$time = \Carbon\Carbon::parse($msg->sent_at)->format('m-d H:i:s');
|
|
@endphp
|
|
<div class="msg-bubble {{ $isOutgoing ? 'outgoing' : '' }}">
|
|
<div class="msg-avatar">{{ $initial }}</div>
|
|
<div class="msg-body">
|
|
<div class="msg-name">{{ $msg->from_user }}</div>
|
|
<div class="msg-direction">
|
|
{{ $isOutgoing ? "→ 发给 {$msg->to_user}" : "← 来自 {$msg->from_user}" }}
|
|
</div>
|
|
<div class="msg-content">{!! e($msg->content) !!}</div>
|
|
<div class="msg-time">{{ $time }}</div>
|
|
</div>
|
|
</div>
|
|
@endforeach
|
|
@endif
|
|
</div>
|
|
</body>
|
|
|
|
</html>
|