From 88d772e53a82147ef7b07a79826cd99c6c5800a1 Mon Sep 17 00:00:00 2001
From: lkddi <lkddi@163.com>
Date: Fri, 27 Feb 2026 02:11:23 +0800
Subject: [PATCH] =?UTF-8?q?=E7=BE=8E=E5=8C=96=EF=BC=9A=E7=95=99=E8=A8=80?=
 =?UTF-8?q?=E6=9D=BF=E6=B6=88=E6=81=AF=E5=8D=A1=E7=89=87=E9=87=8D=E6=9E=84?=
 =?UTF-8?q?=E4=B8=BA=E6=A0=87=E9=A2=98=E6=A0=8F+=E6=AD=A3=E6=96=87?=
 =?UTF-8?q?=E7=9A=84=E4=B8=A4=E6=AE=B5=E5=BC=8F=E5=B8=83=E5=B1=80?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- 头部区域：显示发件人首字符圆形头像、两端收发信息、时间戳
- 正文区域：靠左对齐、高度随内容自适应、去掉多余上下空白
- 私密信件用粉色背景条和徽标标识
- 悬停时出现删除按钮，hover 阴影微增
---
 resources/views/guestbook/index.blade.php | 60 +++++++++++++----------
 1 file changed, 33 insertions(+), 27 deletions(-)

diff --git a/resources/views/guestbook/index.blade.php b/resources/views/guestbook/index.blade.php
index e03e4e6..5039b5d 100644
--- a/resources/views/guestbook/index.blade.php
+++ b/resources/views/guestbook/index.blade.php
@@ -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>