From 167927af131a67ddc3d7bfc53d70e87f1295bbf6 Mon Sep 17 00:00:00 2001 From: BrettonYe <867057410@qq.com> Date: Fri, 30 Jan 2026 17:38:31 +0800 Subject: [PATCH] Unify pagination layout and improve mobile display - Unify pagination and total footer layout - Improve pagination display on small screens (no overflow) - Add truncated pagination with ellipsis - Standardize paginator style (Bootstrap 4) --- app/Providers/AppServiceProvider.php | 2 +- resources/views/_layout.blade.php | 104 ++++++++++++++++++ resources/views/admin/layouts.blade.php | 19 ++++ resources/views/auth/free.blade.php | 22 ++-- resources/views/auth/layouts.blade.php | 1 + .../components/admin/table-panel.blade.php | 18 ++- resources/views/user/invite.blade.php | 14 +-- resources/views/user/invoices.blade.php | 10 +- resources/views/user/referral.blade.php | 26 ++--- resources/views/user/tickets.blade.php | 14 +-- .../vendor/log-viewer/remark/show.blade.php | 14 +-- 11 files changed, 174 insertions(+), 70 deletions(-) diff --git a/app/Providers/AppServiceProvider.php b/app/Providers/AppServiceProvider.php index d880dbfd..737e855c 100644 --- a/app/Providers/AppServiceProvider.php +++ b/app/Providers/AppServiceProvider.php @@ -38,7 +38,7 @@ class AppServiceProvider extends ServiceProvider */ public function boot(): void { - Paginator::useBootstrap(); + Paginator::useBootstrapFour(); // 检测是否强制跳转https if (config('session.secure')) { diff --git a/resources/views/_layout.blade.php b/resources/views/_layout.blade.php index f3c1130a..30402446 100644 --- a/resources/views/_layout.blade.php +++ b/resources/views/_layout.blade.php @@ -178,6 +178,110 @@ }); } @endauth + + function adjustPagination() { + const paginations = document.querySelectorAll('.pagination'); + + paginations.forEach(pagination => { + const allItems = Array.from(pagination.querySelectorAll('.page-item')); + // 1. 清理动态省略号并恢复显示以进行测量 + pagination.querySelectorAll('.dynamic-dot').forEach(el => el.remove()); + allItems.forEach(item => item.style.display = ''); + + const totalWidthNeeded = pagination.scrollWidth; + + // 2. 寻找第一个宽度限制容器 + let parent = pagination.parentElement; + while (parent && parent.tagName !== 'HTML' && parent.clientWidth === totalWidthNeeded) { + // 如果父容器 clientWidth 明显小于当前 pagination 宽度,说明它就是那个限制框 + parent = parent.parentElement; + } + let limitWidth = parent.clientWidth; + + // 如果宽度足够(给 60px 缓冲),不需要调整 + if (totalWidthNeeded + 60 < limitWidth) return; + + // 3. 更加精准的估算容量 + // 取最后一页的宽度作为基准(通常三位数页码最宽,最具代表性) + const itemWidth = (allItems[allItems.length - 2] || allItems[0]).offsetWidth || 40; + + // 计算最大可用槽位:(容器宽 / 单个宽) - 预留给省略号的 2 个位置 + let maxSlots = Math.max(5, Math.floor(limitWidth / itemWidth) - 2); + + // 4. 筛选页码(排除 Prev/Next) + const numItems = allItems.filter(item => { + const text = item.textContent.trim(); + // 排除上一页/下一页图标,只留数字 + return !isNaN(text) && text !== '' && !item.querySelector('[rel="prev"]') && !item.querySelector('[rel="next"]'); + }); + + const activeItem = pagination.querySelector('.active'); + const firstPage = numItems[0]; + const lastPage = numItems[numItems.length - 1]; + const prevBtn = allItems[0]; + const nextBtn = allItems[allItems.length - 1]; + + // 5. 构建必须显示的权重集合 (Set) + let visibleSet = new Set([prevBtn, nextBtn, firstPage, lastPage, activeItem]); + + // 6. 权重填充:按距离 Active 远近填充剩余槽位 + let remaining = maxSlots - visibleSet.size; + if (remaining > 0) { + const activeIdx = allItems.indexOf(activeItem); + const sortedNums = [...numItems] + .filter(item => !visibleSet.has(item)) + .sort((a, b) => { + const distA = Math.abs(allItems.indexOf(a) - activeIdx); + const distB = Math.abs(allItems.indexOf(b) - activeIdx); + if (distA === distB) return allItems.indexOf(a) - allItems.indexOf(b); // 距离相等时,左侧优先 + return distA - distB; + }); + + for (let i = 0; i < remaining && i < sortedNums.length; i++) { + visibleSet.add(sortedNums[i]); + } + } + + // 7. 执行显示/隐藏 + allItems.forEach(item => { + item.style.display = visibleSet.has(item) ? '' : 'none'; + }); + + // 8. 补齐省略号 (检查索引断层) + const finalVisible = allItems.filter(item => item.style.display !== 'none'); + for (let i = 0; i < finalVisible.length - 1; i++) { + const currIdx = allItems.indexOf(finalVisible[i]); + const nextIdx = allItems.indexOf(finalVisible[i + 1]); + + if (nextIdx - currIdx > 1) { + let nativeDot = null; + for (let j = currIdx + 1; j < nextIdx; j++) { + if (allItems[j].textContent.includes('...')) { + nativeDot = allItems[j]; + break; + } + } + + if (nativeDot) { + nativeDot.style.display = ''; + } else { + // 正确插入 HTML 节点的方法 + finalVisible[i + 1].insertAdjacentHTML('beforebegin', + `
  • ...
  • `); + } + } + } + }); + } + + let resizeTimer; + window.addEventListener('resize', () => { + clearTimeout(resizeTimer); + resizeTimer = setTimeout(adjustPagination, 100); + }); + + // 在 DOM 加载完成后执行一次 + document.addEventListener('DOMContentLoaded', adjustPagination); @yield('layout_javascript') diff --git a/resources/views/admin/layouts.blade.php b/resources/views/admin/layouts.blade.php index 3098b06c..06f0ddf3 100644 --- a/resources/views/admin/layouts.blade.php +++ b/resources/views/admin/layouts.blade.php @@ -3,6 +3,25 @@ @section('layout_css') + @yield('css') @endsection @section('body_class', 'dashboard') diff --git a/resources/views/auth/free.blade.php b/resources/views/auth/free.blade.php index 74ebef50..4de5b14c 100644 --- a/resources/views/auth/free.blade.php +++ b/resources/views/auth/free.blade.php @@ -13,14 +13,20 @@ - @foreach ($inviteList as $invite) + @forelse ($inviteList as $invite) {{ $invite->code }} {{ $invite->dateline }} - @endforeach + @empty + + + {{ trans('common.none') }} + + + @endforelse @endif @else @@ -28,12 +34,14 @@ @endif +@endsection +@section('footer') @if (sysConfig('is_invite_register') && sysConfig('is_free_code')) -
    - {{ trans('common.back') }} - + @endif @endsection diff --git a/resources/views/auth/layouts.blade.php b/resources/views/auth/layouts.blade.php index e0b4db79..47b7cf9c 100644 --- a/resources/views/auth/layouts.blade.php +++ b/resources/views/auth/layouts.blade.php @@ -97,6 +97,7 @@
    @yield('content')
    + @yield('footer')
    @yield('modal') diff --git a/resources/views/components/admin/table-panel.blade.php b/resources/views/components/admin/table-panel.blade.php index 9315f207..1af7ae8f 100644 --- a/resources/views/components/admin/table-panel.blade.php +++ b/resources/views/components/admin/table-panel.blade.php @@ -58,13 +58,19 @@ @if ($count && $pagination) - - diff --git a/resources/views/user/invoices.blade.php b/resources/views/user/invoices.blade.php index a25cd368..fa97c3c4 100644 --- a/resources/views/user/invoices.blade.php +++ b/resources/views/user/invoices.blade.php @@ -63,14 +63,8 @@ - diff --git a/resources/views/user/referral.blade.php b/resources/views/user/referral.blade.php index 2cfa4f56..01741169 100644 --- a/resources/views/user/referral.blade.php +++ b/resources/views/user/referral.blade.php @@ -59,10 +59,8 @@ - @@ -106,17 +104,11 @@ - - diff --git a/resources/views/user/tickets.blade.php b/resources/views/user/tickets.blade.php index 7a1140e3..035cdf2f 100644 --- a/resources/views/user/tickets.blade.php +++ b/resources/views/user/tickets.blade.php @@ -5,7 +5,7 @@ @section('content')
    -
    +

    @@ -53,18 +53,12 @@

    -
    -
    +

    diff --git a/resources/views/vendor/log-viewer/remark/show.blade.php b/resources/views/vendor/log-viewer/remark/show.blade.php index c57b6b15..027584d4 100644 --- a/resources/views/vendor/log-viewer/remark/show.blade.php +++ b/resources/views/vendor/log-viewer/remark/show.blade.php @@ -193,17 +193,11 @@

    -