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

优化：留言板页面布局加宽，充分利用屏幕宽度

Browse Source 
- 左侧导航从 w-64 加宽至 w-72，现代圆角和阴影
- 主容器去掉 max-w-7xl 限制，改为 w-full px-6 充满屏幕
- 右侧列表去掉 max-w-4xl 约束，flex-1 自动铺满剩余空间
This commit is contained in:
流星
2026-02-27 01:52:12 +08:00
parent 8063200f0b
commit 3e1ee7394d
1 changed files with 12 additions and 11 deletions
Download Patch File Download Diff File Expand all files Collapse all files
resources/views/guestbook/index.blade.php
+12 -11
View File
@@ -81,12 +81,12 @@
</div> </div>
{{-- 主体内容区 --}} {{-- 主体内容区 --}}
<div class="flex max-w-7xl mx-auto mt-4 px-4 sm:px-6 lg:px-8"> <div class="flex w-full mt-4 px-6 gap-6">
{{-- 左侧：分类导航 --}} {{-- 左侧：分类导航 --}}
<div <div
class="w-64 bg-white border border-gray-200 rounded-lg shrink-0 hidden md:flex flex-col mb-10 self-start sticky top-20"> class="w-72 bg-white border border-gray-100 rounded-2xl shadow-sm shrink-0 hidden md:flex flex-col mb-10 self-start sticky top-20">
<div class="p-6 flex-1"> <div class="p-5 flex-1">
{{-- 新建留言按钮 --}} {{-- 新建留言按钮 --}}
<button <button
@click="showWriteForm = !showWriteForm; if(showWriteForm) setTimeout(() => $refs.textBody.focus(), 100)" @click="showWriteForm = !showWriteForm; if(showWriteForm) setTimeout(() => $refs.textBody.focus(), 100)"
@@ -117,8 +117,8 @@
</div> </div>
{{-- 右侧：留言流列表 --}} {{-- 右侧：留言流列表 --}}
<main class="flex-1 p-4 sm:p-0 md:pl-6 pb-20"> <main class="flex-1 pb-20 min-w-0">
<div class="max-w-4xl mx-auto space-y-4"> <div class="space-y-4">
@forelse($messages as $msg) @forelse($messages as $msg)
@php @php
@@ -163,7 +163,7 @@
</div> </div>
<div <div
class="text-gray-800 leading-relaxed text-sm whitespace-pre-wrap {{ $isSecret ? 'bg-pink-50 p-3 rounded-lg border border-pink-100' : 'bg-gray-50 p-3 rounded-lg border border-gray-100' }}"> 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)) !!} {!! nl2br(e($msg->text_body)) !!}
</div> </div>
@@ -182,13 +182,14 @@
@endif @endif
</div> </div>
@empty @empty
<div class="bg-white rounded-xl shadow-sm border border-gray-200 p-12 text-center"> <div
<span class="text-4xl">📭</span> class="bg-white rounded-2xl shadow-[0_8px_30px_rgb(0,0,0,0.04)] border border-gray-100/50 p-16 text-center flex flex-col items-center justify-center min-h-[400px]">
<h3 class="mt-4 text-lg font-medium text-gray-900">暂无信件</h3> <span class="text-6xl drop-shadow-sm mb-6">📭</span>
<p class="mt-2 text-sm text-gray-500">这里是空空如也的荒原。</p> <h3 class="text-xl font-bold text-gray-800 tracking-wide">暂无信件</h3>
<p class="mt-3 text-gray-400">这里是空空如也的荒原。</p>
<button <button
@click="showWriteForm = true; towho = ''; setTimeout(() => $refs.textBody.focus(), 100)" @click="showWriteForm = true; towho = ''; setTimeout(() => $refs.textBody.focus(), 100)"
class="mt-4 text-indigo-600 font-bold hover:underline"> class="mt-8 bg-indigo-50 hover:bg-indigo-100 text-indigo-600 font-bold py-2.5 px-6 rounded-xl transition-colors border border-indigo-100/50">
来抢沙发留言吧！ 来抢沙发留言吧！
</button> </button>
</div> </div>