lkddi/chatroom
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

美化：留言板消息卡片重构为标题栏+正文的两段式布局

Browse Source 
- 头部区域：显示发件人首字符圆形头像、两端收发信息、时间戳
- 正文区域：靠左对齐、高度随内容自适应、去掉多余上下空白
- 私密信件用粉色背景条和徽标标识
- 悬停时出现删除按钮，hover 阴影微增
This commit is contained in:
流星
2026-02-27 02:11:23 +08:00
parent 6a0f11b893
commit 88d772e53a
1 changed files with 33 additions and 27 deletions
Download Patch File Download Diff File Expand all files Collapse all files

60
resources/views/guestbook/index.blade.php
View File

@@ -180,34 +180,39 @@
$isFromMe = Auth::check() && $msg->who === Auth::user()->username;
@endphp
{{-- 消息卡片 --}}
<div
class="bg-white rounded-xl shadow-sm border {{ $isSecret ? 'border-pink-200' : 'border-gray-200' }} p-5 relative group overflow-hidden">
class="bg-white rounded-2xl border {{ $isSecret ? 'border-pink-200 bg-pink-50/20' : 'border-gray-100' }} shadow-sm hover:shadow-md transition-shadow duration-200 overflow-hidden">
@if ($isSecret)
<div
class="absolute top-0 right-0 bg-pink-100 text-pink-700 text-[10px] font-bold px-2 py-1 rounded-bl-lg">
🔒 私密信件
{{-- 卡片头部：发件人 / 收件人 / 时间 --}}
<div
class="flex items-center justify-between px-5 py-3.5 border-b {{ $isSecret ? 'border-pink-100 bg-pink-50/50' : 'border-gray-50 bg-gray-50/50' }}">
<div class="flex items-center gap-2 text-sm">
{{-- 发件人头像占位 --}}
<div
class="w-7 h-7 rounded-full {{ $isSecret ? 'bg-pink-200' : 'bg-indigo-100' }} flex items-center justify-center text-xs font-bold {{ $isSecret ? 'text-pink-700' : 'text-indigo-700' }} shrink-0">
{{ mb_substr($msg->who, 0, 1) }}
</div>
<span class="font-bold text-gray-800">{{ $msg->who }}</span>
<span class="text-gray-400 text-xs">向</span>
<span class="font-semibold {{ $msg->towho ? 'text-indigo-600' : 'text-gray-500' }}">
{{ $msg->towho ?: '大家' }}
</span>
@if ($isSecret)
<span
class="bg-pink-100 text-pink-600 text-[10px] font-bold px-1.5 py-0.5 rounded-md">🔒
您您话</span>
@endif
</div>
@endif
<div class="flex justify-between items-start mb-2">
<div class="flex items-center text-sm">
<span class="font-bold text-indigo-700">{{ $msg->who }}</span>
<span class="text-gray-400 mx-2">给</span>
<span
class="font-bold {{ $msg->towho ? 'text-indigo-700' : 'text-gray-500' }}">{{ $msg->towho ?: '大家' }}</span>
<span class="text-gray-400 mx-2">留言：</span>
</div>
<div class="text-xs text-gray-400 flex items-center space-x-3">
<div class="flex items-center gap-3 text-xs text-gray-400 shrink-0">
<span>{{ \Carbon\Carbon::parse($msg->post_time)->diffForHumans() }}</span>
@if ($isFromMe || $isToMe || (Auth::check() && Auth::user()->user_level >= 15))
<form action="{{ route('guestbook.destroy', $msg->id) }}" method="POST"
onsubmit="return confirm('确定要抹除这条留言吗？');" class="inline">
onsubmit="return confirm('确定要抓除这条留言吗？');" class="inline">
@csrf
@method('DELETE')
<button type="submit"
class="text-red-400 hover:text-red-600 transition opacity-0 group-hover:opacity-100 bg-red-50 px-2 py-1 rounded">
class="text-red-400 hover:text-red-600 transition opacity-0 group-hover:opacity-100">
删除
</button>
</form>
@@ -215,18 +220,19 @@
</div>
</div>
<div
class="text-gray-700 leading-loose text-[15px] whitespace-pre-wrap {{ $isSecret ? 'bg-pink-50/50 p-4 rounded-xl border border-pink-100/50' : 'mt-2' }}">
{!! nl2br(e($msg->text_body)) !!}
{{-- 正文内容 --}}
<div class="px-5 py-4">
<p class="text-gray-700 text-[15px] leading-relaxed whitespace-pre-wrap">
{!! nl2br(e($msg->text_body)) !!}</p>
</div>
{{-- 回复TA按钒 --}}
@if (!Auth::check() || $msg->who !== Auth::user()->username)
<div class="mt-3 flex justify-end">
<div class="px-5 pb-3 flex justify-end">
<button
@click="showWriteForm = true; towho = '{{ $msg->who }}'; setTimeout(() => $refs.textBody.focus(), 100); window.scrollTo({top:0, behavior:'smooth'})"
class="text-xs text-indigo-500 hover:text-indigo-700 font-medium flex items-center transition">
<svg class="w-3 h-3 mr-1" fill="none" stroke="currentColor"
viewBox="0 0 24 24">
@click="showWriteForm = true; towho = '{{ $msg->who }}'; setTimeout(() => $refs.textBody.focus(), 100)"
class="text-xs text-indigo-500 hover:text-indigo-700 font-medium flex items-center gap-1 transition">
<svg class="w-3 h-3" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
d="M3 10h10a8 8 0 018 8v2M3 10l6 6m-6-6l6-6"></path>
</svg>