优化:成功/失败 flash 提示 3秒后自动淡出消失,支持手动关闭

This commit is contained in:
2026-02-27 02:20:43 +08:00
parent 3634bc8cde
commit b42b89ab72
+24 -9
View File
@@ -121,24 +121,39 @@
</div>
</header>
{{-- ═══════════ 全局提示消息 ═══════════ --}}
{{-- ═══════════ 全局提示消息3秒自动消失) ═══════════ --}}
@if (session('success'))
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 mt-4">
<div class="bg-green-100 border-l-4 border-green-500 text-green-700 p-4 rounded shadow-sm">
<p class="font-bold">操作成功</p>
<p>{{ session('success') }}</p>
<div x-data="{ show: true }" x-show="show" x-init="setTimeout(() => show = false, 3000)"
x-transition:leave="transition ease-in duration-500" x-transition:leave-start="opacity-100 translate-y-0"
x-transition:leave-end="opacity-0 -translate-y-2" class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 mt-4">
<div
class="bg-green-100 border-l-4 border-green-500 text-green-700 p-4 rounded shadow-sm flex justify-between items-start">
<div>
<p class="font-bold">操作成功</p>
<p>{{ session('success') }}</p>
</div>
<button @click="show = false"
class="ml-4 text-green-500 hover:text-green-700 text-lg leading-none">&times;</button>
</div>
</div>
@endif
@if (session('error'))
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 mt-4">
<div class="bg-red-100 border-l-4 border-red-500 text-red-700 p-4 rounded shadow-sm">
<p class="font-bold">操作失败</p>
<p>{{ session('error') }}</p>
<div x-data="{ show: true }" x-show="show" x-init="setTimeout(() => show = false, 4000)"
x-transition:leave="transition ease-in duration-500" x-transition:leave-start="opacity-100 translate-y-0"
x-transition:leave-end="opacity-0 -translate-y-2" class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 mt-4">
<div
class="bg-red-100 border-l-4 border-red-500 text-red-700 p-4 rounded shadow-sm flex justify-between items-start">
<div>
<p class="font-bold">操作失败</p>
<p>{{ session('error') }}</p>
</div>
<button @click="show = false"
class="ml-4 text-red-400 hover:text-red-600 text-lg leading-none">&times;</button>
</div>
</div>
@endif
{{-- ═══════════ 页面主体内容 ═══════════ --}}
<div class="flex-1">
@yield('content')