From e69bceeb7764d1ec059c83701a5f2a45bbca2c03 Mon Sep 17 00:00:00 2001
From: lkddi <lkddi@163.com>
Date: Sun, 26 Apr 2026 18:24:55 +0800
Subject: [PATCH] =?UTF-8?q?=E8=B0=83=E6=95=B4=E7=94=A8=E6=88=B7=E6=B5=81?=
 =?UTF-8?q?=E6=B0=B4=E7=AD=9B=E9=80=89=E5=B9=B6=E7=BB=9F=E4=B8=80=E5=88=86?=
 =?UTF-8?q?=E9=A1=B5=E4=B8=AD=E6=96=87=E6=96=87=E6=A1=88?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../views/admin/currency-logs/index.blade.php | 204 +++++++++++-------
 .../pagination/simple-tailwind.blade.php      |  27 +++
 .../vendor/pagination/tailwind.blade.php      | 128 +++++++++++
 3 files changed, 276 insertions(+), 83 deletions(-)
 create mode 100644 resources/views/vendor/pagination/simple-tailwind.blade.php
 create mode 100644 resources/views/vendor/pagination/tailwind.blade.php

diff --git a/resources/views/admin/currency-logs/index.blade.php b/resources/views/admin/currency-logs/index.blade.php
index 10a5d4d..96be1b6 100644
--- a/resources/views/admin/currency-logs/index.blade.php
+++ b/resources/views/admin/currency-logs/index.blade.php
@@ -4,50 +4,48 @@
 
 @section('content')
     @php
+        require resource_path('views/admin/partials/list-theme.php');
         $selectedSourceCount = count($selectedSources ?? []);
     @endphp
 
-    <!-- 筛选面板 -->
-    <div class="bg-white p-5 rounded-xl border border-gray-100 shadow-sm mb-6">
-        <form action="{{ route('admin.currency-logs.index') }}" method="GET" class="flex flex-wrap items-end gap-4">
-            
-            <!-- 用户名 -->
-            <div class="flex-1 min-w-[140px]">
-                <label for="username" class="block text-xs font-semibold text-gray-500 uppercase tracking-wider mb-1.5">用户名</label>
+    <div class="{{ $adminListHeaderCardClass }} mb-6">
+        <div class="{{ $adminListFilterInnerClass }}">
+            <form action="{{ route('admin.currency-logs.index') }}" method="GET"
+                class="flex flex-wrap items-end gap-3 2xl:grid 2xl:grid-cols-[minmax(120px,1fr)_8rem_8rem_minmax(160px,1.1fr)_minmax(160px,1.15fr)_9rem_9rem_auto] 2xl:items-end"
+                data-admin-auto-filter-form>
+                <div class="min-w-[120px] flex-1">
+                    <label for="username" class="{{ $adminListFilterLabelClass }}">用户名</label>
                 <input type="text" name="username" id="username" value="{{ request('username') }}"
-                    class="w-full border-gray-300 rounded-lg shadow-sm focus:border-indigo-500 focus:ring-indigo-500 sm:text-sm px-3 py-2"
+                    class="w-full {{ $adminListFilterInputClass }}" data-auto-submit="input"
                     placeholder="选填">
-            </div>
+                </div>
 
-            <!-- 货币类型 -->
-            <div class="flex-1 min-w-[130px]">
-                <label for="currency" class="block text-xs font-semibold text-gray-500 uppercase tracking-wider mb-1.5">货币类型</label>
+                <div class="w-32 shrink-0">
+                    <label for="currency" class="{{ $adminListFilterLabelClass }}">货币类型</label>
                 <select name="currency" id="currency"
-                    class="w-full border-gray-300 rounded-lg shadow-sm focus:border-indigo-500 focus:ring-indigo-500 sm:text-sm px-3 py-2">
+                    class="w-full {{ $adminListFilterInputClass }}" data-auto-submit="change">
                     <option value="">全部</option>
                     <option value="gold" {{ request('currency') == 'gold' ? 'selected' : '' }}>💰 金币</option>
                     <option value="exp" {{ request('currency') == 'exp' ? 'selected' : '' }}>⭐ 经验</option>
                     <option value="charm" {{ request('currency') == 'charm' ? 'selected' : '' }}>💖 魅力</option>
                 </select>
-            </div>
+                </div>
 
-            <!-- 变动方向 -->
-            <div class="flex-1 min-w-[120px]">
-                <label for="direction" class="block text-xs font-semibold text-gray-500 uppercase tracking-wider mb-1.5">变动方向</label>
+                <div class="w-32 shrink-0">
+                    <label for="direction" class="{{ $adminListFilterLabelClass }}">变动方向</label>
                 <select name="direction" id="direction"
-                    class="w-full border-gray-300 rounded-lg shadow-sm focus:border-indigo-500 focus:ring-indigo-500 sm:text-sm px-3 py-2">
+                    class="w-full {{ $adminListFilterInputClass }}" data-auto-submit="change">
                     <option value="">全部</option>
                     <option value="in" {{ request('direction') == 'in' ? 'selected' : '' }}>➕ 增加</option>
                     <option value="out" {{ request('direction') == 'out' ? 'selected' : '' }}>➖ 扣除</option>
                 </select>
-            </div>
+                </div>
 
-            <!-- 来源途径 -->
-            <div class="flex-1 min-w-[180px]">
-                <label class="block text-xs font-semibold text-gray-500 uppercase tracking-wider mb-1.5">来源途径</label>
-                <details class="relative" data-admin-source-filter>
+                <div class="min-w-[160px] flex-[1.15]">
+                    <label class="{{ $adminListFilterLabelClass }}">来源途径</label>
+                    <details class="relative" data-admin-source-filter>
                     <summary
-                        class="flex w-full cursor-pointer list-none items-center justify-between rounded-lg border border-gray-300 bg-white px-3 py-2 text-sm text-gray-700 shadow-sm transition hover:border-indigo-400">
+                        class="{{ $adminListFilterInputClass }} flex cursor-pointer list-none items-center justify-between bg-white">
                         <span class="truncate">{{ $selectedSourceCount > 0 ? '已选 '.$selectedSourceCount.' 项' : '全部来源' }}</span>
                         <svg class="h-4 w-4 text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24"
                             xmlns="http://www.w3.org/2000/svg">
@@ -55,7 +53,7 @@
                         </svg>
                     </summary>
 
-                    <div class="absolute left-0 z-20 mt-2 flex w-full min-w-[220px] max-w-sm flex-col rounded-lg border border-gray-200 bg-white shadow-lg">
+                    <div class="absolute left-0 z-20 mt-2 flex w-full min-w-[220px] max-w-sm flex-col rounded-xl border border-gray-200 bg-white shadow-lg">
                         <div class="grid max-h-64 gap-1 overflow-y-auto p-3">
                             @foreach ($allSources as $src)
                                 <label class="flex items-center gap-2 rounded-md px-2 py-1.5 text-sm text-gray-700 hover:bg-gray-50">
@@ -69,95 +67,85 @@
 
                         <div class="sticky bottom-0 flex items-center justify-between border-t border-gray-100 bg-white px-3 py-3">
                             <a href="{{ route('admin.currency-logs.index', request()->except('sources')) }}"
-                                class="text-xs text-gray-400 hover:text-gray-600">清空来源</a>
+                                class="{{ $adminListSecondaryTextClass }} hover:text-gray-600">清空来源</a>
                             <span class="text-xs text-gray-400">勾选后点查询生效</span>
                         </div>
                     </div>
-                </details>
-            </div>
+                    </details>
+                </div>
 
-            <!-- 备注关键词 -->
-            <div class="flex-1 min-w-[160px]">
-                <label for="remark" class="block text-xs font-semibold text-gray-500 uppercase tracking-wider mb-1.5">备注/房间流水</label>
+                <div class="min-w-[160px] flex-[1.15]">
+                    <label for="remark" class="{{ $adminListFilterLabelClass }}">备注/房间流水</label>
                 <input type="text" name="remark" id="remark" value="{{ request('remark') }}"
-                    class="w-full border-gray-300 rounded-lg shadow-sm focus:border-indigo-500 focus:ring-indigo-500 sm:text-sm px-3 py-2"
+                    class="w-full {{ $adminListFilterInputClass }}" data-auto-submit="input"
                     placeholder="包含(可搜房间名)">
-            </div>
+                </div>
             
-            <!-- 开始日期 -->
-            <div class="flex-none w-36">
-                <label for="date_start" class="block text-xs font-semibold text-gray-500 uppercase tracking-wider mb-1.5">开始日期</label>
+                <div class="w-36 shrink-0">
+                    <label for="date_start" class="{{ $adminListFilterLabelClass }}">开始日期</label>
                 <input type="date" name="date_start" id="date_start" value="{{ request('date_start') }}"
-                    class="w-full border-gray-300 rounded-lg shadow-sm focus:border-indigo-500 focus:ring-indigo-500 sm:text-sm px-3 py-2">
-            </div>
+                    class="w-full {{ $adminListFilterInputClass }}" data-auto-submit="change">
+                </div>
             
-            <!-- 结束日期 -->
-            <div class="flex-none w-36">
-                <label for="date_end" class="block text-xs font-semibold text-gray-500 uppercase tracking-wider mb-1.5">结束日期</label>
+                <div class="w-36 shrink-0">
+                    <label for="date_end" class="{{ $adminListFilterLabelClass }}">结束日期</label>
                 <input type="date" name="date_end" id="date_end" value="{{ request('date_end') }}"
-                    class="w-full border-gray-300 rounded-lg shadow-sm focus:border-indigo-500 focus:ring-indigo-500 sm:text-sm px-3 py-2">
-            </div>
+                    class="w-full {{ $adminListFilterInputClass }}" data-auto-submit="change">
+                </div>
 
-            <!-- 按钮组 -->
-            <div class="flex-none flex items-center space-x-2">
-                <button type="submit"
-                    class="bg-indigo-600 hover:bg-indigo-700 text-white font-medium py-2 px-5 rounded-lg shadow-sm transition flex items-center gap-1.5 text-sm">
-                    <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"></path></svg>
-                    查询
-                </button>
-                <a href="{{ route('admin.currency-logs.index') }}"
-                    class="bg-white border border-gray-300 hover:bg-gray-50 text-gray-700 font-medium py-2 px-4 rounded-lg shadow-sm transition text-sm">
+                <div class="shrink-0 2xl:ml-0">
+                    <a href="{{ route('admin.currency-logs.index') }}" class="{{ $adminListSecondaryButtonClass }}">
                     重置
-                </a>
-            </div>
-        </form>
+                    </a>
+                </div>
+            </form>
+        </div>
     </div>
 
-    <!-- 数据表格 -->
-    <div class="bg-white rounded shadow overflow-hidden">
-        <div class="overflow-x-auto">
-            <table class="w-full text-left border-collapse">
+    <div class="{{ $adminListCardClass }}">
+        <div class="{{ $adminListTableWrapClass }}">
+            <table class="{{ $adminListTableClass }} whitespace-nowrap">
                 <thead>
-                    <tr class="bg-gray-50 text-gray-600 text-sm uppercase tracking-wider border-b border-gray-200">
-                        <th class="px-6 py-4 font-semibold whitespace-nowrap">记录ID</th>
-                        <th class="px-6 py-4 font-semibold whitespace-nowrap">用户</th>
-                        <th class="px-6 py-4 font-semibold whitespace-nowrap">类型</th>
-                        <th class="px-6 py-4 font-semibold whitespace-nowrap">变动数额</th>
-                        <th class="px-6 py-4 font-semibold whitespace-nowrap">变后余额</th>
-                        <th class="px-6 py-4 font-semibold whitespace-nowrap">来源</th>
-                        <th class="px-6 py-4 font-semibold whitespace-nowrap w-1/4">备注信息</th>
-                        <th class="px-6 py-4 font-semibold text-right whitespace-nowrap">发生时间</th>
+                    <tr class="{{ $adminListTableHeadRowClass }}">
+                        <th class="{{ $adminListTableHeadCellClass }}">记录ID</th>
+                        <th class="{{ $adminListTableHeadCellClass }}">用户</th>
+                        <th class="{{ $adminListTableHeadCellClass }}">类型</th>
+                        <th class="{{ $adminListTableHeadCellClass }}">变动数额</th>
+                        <th class="{{ $adminListTableHeadCellClass }}">变后余额</th>
+                        <th class="{{ $adminListTableHeadCellClass }}">来源</th>
+                        <th class="{{ $adminListTableHeadCellClass }} w-1/4">备注信息</th>
+                        <th class="{{ $adminListTableHeadCellClass }} text-right">发生时间</th>
                     </tr>
                 </thead>
-                <tbody class="divide-y divide-gray-100">
+                <tbody class="{{ $adminListTableBodyClass }}">
                     @forelse ($logs as $log)
-                        <tr class="hover:bg-gray-50 transition cursor-default">
-                            <td class="px-6 py-4 text-sm text-gray-500">
+                        <tr class="{{ $adminListTableRowClass }} cursor-default">
+                            <td class="px-6 py-4 {{ $adminListSecondaryTextClass }}">
                                 #{{ $log->id }}
                             </td>
                             <td class="px-6 py-4">
                                 <div class="flex flex-col whitespace-nowrap">
-                                    <span class="font-bold text-gray-800">{{ $log->username }}</span>
+                                    <span class="{{ $adminListPrimaryTextClass }}">{{ $log->username }}</span>
                                 </div>
                             </td>
                             <td class="px-6 py-4">
                                 @if($log->currency === 'gold')
-                                    <span class="inline-flex items-center gap-1 whitespace-nowrap px-2 py-0.5 rounded text-xs font-medium bg-yellow-100 text-yellow-800">
+                                    <span class="inline-flex items-center gap-1 whitespace-nowrap rounded-full bg-yellow-50 px-2 py-0.5 text-xs font-semibold text-yellow-700 ring-1 ring-yellow-200">
                                         <span>💰</span><span>金币</span>
                                     </span>
                                 @elseif($log->currency === 'exp')
-                                    <span class="inline-flex items-center gap-1 whitespace-nowrap px-2 py-0.5 rounded text-xs font-medium bg-blue-100 text-blue-800">
+                                    <span class="inline-flex items-center gap-1 whitespace-nowrap rounded-full bg-blue-50 px-2 py-0.5 text-xs font-semibold text-blue-700 ring-1 ring-blue-200">
                                         <span>⭐</span><span>经验</span>
                                     </span>
                                 @elseif($log->currency === 'charm')
-                                    <span class="inline-flex items-center gap-1 whitespace-nowrap px-2 py-0.5 rounded text-xs font-medium bg-pink-100 text-pink-800">
+                                    <span class="inline-flex items-center gap-1 whitespace-nowrap rounded-full bg-pink-50 px-2 py-0.5 text-xs font-semibold text-pink-700 ring-1 ring-pink-200">
                                         <span>💖</span><span>魅力</span>
                                     </span>
                                 @else
-                                    <span class="text-gray-500">{{ $log->currency }}</span>
+                                    <span class="{{ $adminListSecondaryTextClass }}">{{ $log->currency }}</span>
                                 @endif
                             </td>
-                            <td class="px-6 py-4 font-bold text-lg">
+                            <td class="px-6 py-4 {{ $adminListNumericTextClass }}">
                                 @if ($log->amount > 0)
                                     <span class="text-emerald-500">+{{ $log->amount }}</span>
                                 @elseif ($log->amount === 0)
@@ -166,27 +154,27 @@
                                     <span class="text-red-500">{{ $log->amount }}</span>
                                 @endif
                             </td>
-                            <td class="px-6 py-4 text-sm font-medium text-gray-700">
+                            <td class="px-6 py-4 {{ $adminListNumericTextClass }} text-gray-700">
                                 {{ $log->balance_after }}
                             </td>
                             <td class="px-6 py-4">
                                 @php
                                     $sourceLabel = \App\Enums\CurrencySource::tryFrom($log->source)?->label() ?? $log->source;
                                 @endphp
-                                <span class="bg-slate-100 text-slate-700 py-1 px-2 rounded font-medium text-xs whitespace-nowrap">
+                                <span class="inline-flex whitespace-nowrap rounded-full bg-slate-100 px-2 py-0.5 text-xs font-semibold text-slate-700">
                                     {{ $sourceLabel }}
                                 </span>
                             </td>
-                            <td class="px-6 py-4 text-sm text-gray-600">
+                            <td class="px-6 py-4 {{ $adminListBodyTextClass }}">
                                 {{ $log->remark }}
                             </td>
-                            <td class="px-6 py-4 text-sm text-gray-500 text-right whitespace-nowrap">
+                            <td class="px-6 py-4 {{ $adminListSecondaryTextClass }} text-right whitespace-nowrap">
                                 {{ $log->created_at->format('Y-m-d H:i:s') }}
                             </td>
                         </tr>
                     @empty
                         <tr>
-                            <td colspan="8" class="px-6 py-8 text-center text-gray-500">
+                            <td colspan="8" class="{{ $adminListEmptyClass }}">
                                 📭 暂无相关流水记录
                             </td>
                         </tr>
@@ -195,7 +183,7 @@
             </table>
         </div>
         @if ($logs->hasPages())
-            <div class="px-6 py-4 border-t border-gray-200">
+            <div class="{{ $adminListPaginationClass }}">
                 {{ $logs->links() }}
             </div>
         @endif
@@ -203,12 +191,62 @@
 
     <script>
         document.addEventListener('DOMContentLoaded', function () {
+            const autoFilterForm = document.querySelector('[data-admin-auto-filter-form]');
             const sourceFilter = document.querySelector('[data-admin-source-filter]');
+            let autoSubmitTimer = null;
+
+            const submitAutoFilter = function () {
+                if (!autoFilterForm) {
+                    return;
+                }
+
+                if (typeof autoFilterForm.requestSubmit === 'function') {
+                    autoFilterForm.requestSubmit();
+                    return;
+                }
+
+                autoFilterForm.submit();
+            };
+
+            if (autoFilterForm) {
+                autoFilterForm.querySelectorAll('[data-auto-submit="input"]').forEach(function (inputElement) {
+                    inputElement.addEventListener('input', function () {
+                        window.clearTimeout(autoSubmitTimer);
+                        autoSubmitTimer = window.setTimeout(function () {
+                            submitAutoFilter();
+                        }, 450);
+                    });
+
+                    inputElement.addEventListener('keydown', function (event) {
+                        if (event.key !== 'Enter') {
+                            return;
+                        }
+
+                        event.preventDefault();
+                        window.clearTimeout(autoSubmitTimer);
+                        submitAutoFilter();
+                    });
+                });
+
+                autoFilterForm.querySelectorAll('[data-auto-submit="change"]').forEach(function (fieldElement) {
+                    fieldElement.addEventListener('change', function () {
+                        window.clearTimeout(autoSubmitTimer);
+                        submitAutoFilter();
+                    });
+                });
+            }
 
             if (!sourceFilter) {
                 return;
             }
 
+            sourceFilter.querySelectorAll('input[type="checkbox"]').forEach(function (checkboxElement) {
+                checkboxElement.addEventListener('change', function () {
+                    window.clearTimeout(autoSubmitTimer);
+                    submitAutoFilter();
+                });
+            });
+
             document.addEventListener('click', function (event) {
                 if (!sourceFilter.open) {
                     return;
diff --git a/resources/views/vendor/pagination/simple-tailwind.blade.php b/resources/views/vendor/pagination/simple-tailwind.blade.php
new file mode 100644
index 0000000..2cab55d
--- /dev/null
+++ b/resources/views/vendor/pagination/simple-tailwind.blade.php
@@ -0,0 +1,27 @@
+@if ($paginator->hasPages())
+    <nav role="navigation" aria-label="分页导航" class="flex items-center justify-between gap-2">
+
+        @if ($paginator->onFirstPage())
+            <span class="inline-flex cursor-not-allowed items-center rounded-md border border-gray-300 bg-white px-4 py-2 text-sm leading-5 font-medium text-gray-600 dark:border-gray-600 dark:bg-gray-700 dark:text-gray-300">
+                上一页
+            </span>
+        @else
+            <a href="{{ $paginator->previousPageUrl() }}" rel="prev"
+                class="inline-flex items-center rounded-md border border-gray-300 bg-white px-4 py-2 text-sm leading-5 font-medium text-gray-800 transition duration-150 ease-in-out hover:bg-gray-100 hover:text-gray-700 focus:border-blue-300 focus:ring focus:outline-none active:bg-gray-100 active:text-gray-800 dark:border-gray-600 dark:bg-gray-800 dark:text-gray-200 dark:hover:bg-gray-900 dark:hover:text-gray-200 dark:focus:border-blue-700 dark:active:bg-gray-700 dark:active:text-gray-300">
+                上一页
+            </a>
+        @endif
+
+        @if ($paginator->hasMorePages())
+            <a href="{{ $paginator->nextPageUrl() }}" rel="next"
+                class="inline-flex items-center rounded-md border border-gray-300 bg-white px-4 py-2 text-sm leading-5 font-medium text-gray-800 transition duration-150 ease-in-out hover:bg-gray-100 hover:text-gray-700 focus:border-blue-300 focus:ring focus:outline-none active:bg-gray-100 active:text-gray-800 dark:border-gray-600 dark:bg-gray-800 dark:text-gray-200 dark:hover:bg-gray-900 dark:hover:text-gray-200 dark:focus:border-blue-700 dark:active:bg-gray-700 dark:active:text-gray-300">
+                下一页
+            </a>
+        @else
+            <span class="inline-flex cursor-not-allowed items-center rounded-md border border-gray-300 bg-white px-4 py-2 text-sm leading-5 font-medium text-gray-600 dark:border-gray-600 dark:bg-gray-700 dark:text-gray-300">
+                下一页
+            </span>
+        @endif
+
+    </nav>
+@endif
diff --git a/resources/views/vendor/pagination/tailwind.blade.php b/resources/views/vendor/pagination/tailwind.blade.php
new file mode 100644
index 0000000..a70accc
--- /dev/null
+++ b/resources/views/vendor/pagination/tailwind.blade.php
@@ -0,0 +1,128 @@
+@if ($paginator->hasPages())
+    <nav role="navigation" aria-label="分页导航">
+
+        <div class="flex items-center justify-between gap-2 sm:hidden">
+
+            @if ($paginator->onFirstPage())
+                <span class="inline-flex cursor-not-allowed items-center rounded-md border border-gray-300 bg-white px-4 py-2 text-sm leading-5 font-medium text-gray-600 dark:border-gray-600 dark:bg-gray-700 dark:text-gray-300">
+                    上一页
+                </span>
+            @else
+                <a href="{{ $paginator->previousPageUrl() }}" rel="prev"
+                    class="inline-flex items-center rounded-md border border-gray-300 bg-white px-4 py-2 text-sm leading-5 font-medium text-gray-800 transition duration-150 ease-in-out hover:bg-gray-100 hover:text-gray-700 focus:border-blue-300 focus:ring focus:outline-none active:bg-gray-100 active:text-gray-800 dark:border-gray-600 dark:bg-gray-800 dark:text-gray-200 dark:hover:bg-gray-900 dark:hover:text-gray-200 dark:focus:border-blue-700 dark:active:bg-gray-700 dark:active:text-gray-300">
+                    上一页
+                </a>
+            @endif
+
+            @if ($paginator->hasMorePages())
+                <a href="{{ $paginator->nextPageUrl() }}" rel="next"
+                    class="inline-flex items-center rounded-md border border-gray-300 bg-white px-4 py-2 text-sm leading-5 font-medium text-gray-800 transition duration-150 ease-in-out hover:bg-gray-100 hover:text-gray-700 focus:border-blue-300 focus:ring focus:outline-none active:bg-gray-100 active:text-gray-800 dark:border-gray-600 dark:bg-gray-800 dark:text-gray-200 dark:hover:bg-gray-900 dark:hover:text-gray-200 dark:focus:border-blue-700 dark:active:bg-gray-700 dark:active:text-gray-300">
+                    下一页
+                </a>
+            @else
+                <span class="inline-flex cursor-not-allowed items-center rounded-md border border-gray-300 bg-white px-4 py-2 text-sm leading-5 font-medium text-gray-600 dark:border-gray-600 dark:bg-gray-700 dark:text-gray-300">
+                    下一页
+                </span>
+            @endif
+
+        </div>
+
+        <div class="hidden sm:flex sm:flex-1 sm:items-center sm:justify-between sm:gap-2">
+
+            <div>
+                <p class="text-sm leading-5 text-gray-700 dark:text-gray-600">
+                    显示第
+                    @if ($paginator->firstItem())
+                        <span class="font-medium">{{ $paginator->firstItem() }}</span>
+                        到
+                        <span class="font-medium">{{ $paginator->lastItem() }}</span>
+                    @else
+                        {{ $paginator->count() }}
+                    @endif
+                    条，共
+                    <span class="font-medium">{{ $paginator->total() }}</span>
+                    条记录
+                </p>
+            </div>
+
+            <div>
+                <span class="inline-flex rounded-md shadow-sm rtl:flex-row-reverse">
+
+                    @if ($paginator->onFirstPage())
+                        <span aria-disabled="true" aria-label="上一页">
+                            <span
+                                class="inline-flex items-center rounded-l-md border border-gray-300 bg-white px-2 py-2 text-sm leading-5 font-medium text-gray-500 dark:border-gray-600 dark:bg-gray-700 dark:text-gray-400"
+                                aria-hidden="true">
+                                <svg class="h-5 w-5" fill="currentColor" viewBox="0 0 20 20">
+                                    <path fill-rule="evenodd"
+                                        d="M12.707 5.293a1 1 0 010 1.414L9.414 10l3.293 3.293a1 1 0 01-1.414 1.414l-4-4a1 1 0 010-1.414l4-4a1 1 0 011.414 0z"
+                                        clip-rule="evenodd" />
+                                </svg>
+                            </span>
+                        </span>
+                    @else
+                        <a href="{{ $paginator->previousPageUrl() }}" rel="prev"
+                            class="inline-flex items-center rounded-l-md border border-gray-300 bg-white px-2 py-2 text-sm leading-5 font-medium text-gray-500 transition duration-150 ease-in-out hover:bg-gray-100 hover:text-gray-400 focus:border-blue-300 focus:ring focus:outline-none active:bg-gray-100 active:text-gray-500 dark:border-gray-600 dark:bg-gray-800 dark:text-gray-300 dark:hover:bg-gray-900 dark:hover:text-gray-300 dark:focus:border-blue-800 dark:active:bg-gray-700"
+                            aria-label="上一页">
+                            <svg class="h-5 w-5" fill="currentColor" viewBox="0 0 20 20">
+                                <path fill-rule="evenodd"
+                                    d="M12.707 5.293a1 1 0 010 1.414L9.414 10l3.293 3.293a1 1 0 01-1.414 1.414l-4-4a1 1 0 010-1.414l4-4a1 1 0 011.414 0z"
+                                    clip-rule="evenodd" />
+                            </svg>
+                        </a>
+                    @endif
+
+                    @foreach ($elements as $element)
+                        @if (is_string($element))
+                            <span aria-disabled="true">
+                                <span
+                                    class="inline-flex cursor-default items-center border border-gray-300 bg-white px-4 py-2 -ml-px text-sm leading-5 font-medium text-gray-700 dark:border-gray-600 dark:bg-gray-800 dark:text-gray-300">{{ $element }}</span>
+                            </span>
+                        @endif
+
+                        @if (is_array($element))
+                            @foreach ($element as $page => $url)
+                                @if ($page == $paginator->currentPage())
+                                    <span aria-current="page">
+                                        <span
+                                            class="inline-flex cursor-default items-center border border-gray-300 bg-gray-200 px-4 py-2 -ml-px text-sm leading-5 font-medium text-gray-700 dark:border-gray-600 dark:bg-gray-700 dark:text-gray-300">{{ $page }}</span>
+                                    </span>
+                                @else
+                                    <a href="{{ $url }}"
+                                        class="inline-flex items-center border border-gray-300 bg-white px-4 py-2 -ml-px text-sm leading-5 font-medium text-gray-700 transition duration-150 ease-in-out hover:bg-gray-100 hover:text-gray-700 focus:border-blue-300 focus:ring focus:outline-none active:bg-gray-100 active:text-gray-700 dark:border-gray-600 dark:bg-gray-800 dark:text-gray-300 dark:hover:bg-gray-900 dark:hover:text-gray-300 dark:focus:border-blue-800 dark:active:bg-gray-700"
+                                        aria-label="跳转到第 {{ $page }} 页">
+                                        {{ $page }}
+                                    </a>
+                                @endif
+                            @endforeach
+                        @endif
+                    @endforeach
+
+                    @if ($paginator->hasMorePages())
+                        <a href="{{ $paginator->nextPageUrl() }}" rel="next"
+                            class="inline-flex items-center rounded-r-md border border-gray-300 bg-white px-2 py-2 -ml-px text-sm leading-5 font-medium text-gray-500 transition duration-150 ease-in-out hover:bg-gray-100 hover:text-gray-400 focus:border-blue-300 focus:ring focus:outline-none active:bg-gray-100 active:text-gray-500 dark:border-gray-600 dark:bg-gray-800 dark:text-gray-300 dark:hover:bg-gray-900 dark:hover:text-gray-300 dark:focus:border-blue-800 dark:active:bg-gray-700"
+                            aria-label="下一页">
+                            <svg class="h-5 w-5" fill="currentColor" viewBox="0 0 20 20">
+                                <path fill-rule="evenodd"
+                                    d="M7.293 14.707a1 1 0 010-1.414L10.586 10 7.293 6.707a1 1 0 011.414-1.414l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414 0z"
+                                    clip-rule="evenodd" />
+                            </svg>
+                        </a>
+                    @else
+                        <span aria-disabled="true" aria-label="下一页">
+                            <span
+                                class="inline-flex cursor-not-allowed items-center rounded-r-md border border-gray-300 bg-white px-2 py-2 -ml-px text-sm leading-5 font-medium text-gray-500 dark:border-gray-600 dark:bg-gray-700 dark:text-gray-400"
+                                aria-hidden="true">
+                                <svg class="h-5 w-5" fill="currentColor" viewBox="0 0 20 20">
+                                    <path fill-rule="evenodd"
+                                        d="M7.293 14.707a1 1 0 010-1.414L10.586 10 7.293 6.707a1 1 0 011.414-1.414l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414 0z"
+                                        clip-rule="evenodd" />
+                                </svg>
+                            </span>
+                        </span>
+                    @endif
+                </span>
+            </div>
+        </div>
+    </nav>
+@endif