2
0

pagination.blade.php 3.3 KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374757677787980818283848586878889909192939495
  1. {{-- resources/views/components/wiki/pagination.blade.php --}}
  2. {{--
  3. props:
  4. $pagination array { total, per_page, current_page, last_page }
  5. $routeName string route name
  6. $routeParams array route params (不含分页参数)
  7. $queryParams array 额外 query string 参数,如 ['q'=>'...', 'category'=>'...']
  8. --}}
  9. @props([
  10. 'pagination',
  11. 'routeName',
  12. 'routeParams' => [],
  13. 'queryParams' => [],
  14. ])
  15. @php
  16. $current = $pagination['current_page'];
  17. $last = $pagination['last_page'];
  18. if ($last <= 1) return; // 只有一页不渲染
  19. // 生成带页码的 URL
  20. $pageUrl = function (int $page) use ($routeName, $routeParams, $queryParams): string {
  21. $qs = array_merge($queryParams, ['page' => $page]);
  22. return route($routeName, $routeParams) . '?' . http_build_query($qs);
  23. };
  24. // 计算显示的页码范围(当前页前后各 2 页)
  25. $window = 2;
  26. $start = max(1, $current - $window);
  27. $end = min($last, $current + $window);
  28. @endphp
  29. <nav class="wiki-pagination" aria-label="分页导航">
  30. {{-- 上一页 --}}
  31. @if ($current > 1)
  32. <a class="wiki-page-btn" href="{{ $pageUrl($current - 1) }}" aria-label="上一页">
  33. <svg width="14" height="14" viewBox="0 0 16 16" fill="none">
  34. <path d="M10 12L6 8l4-4" stroke="currentColor" stroke-width="1.5"
  35. stroke-linecap="round" stroke-linejoin="round"/>
  36. </svg>
  37. </a>
  38. @else
  39. <span class="wiki-page-btn wiki-page-btn--disabled" aria-disabled="true">
  40. <svg width="14" height="14" viewBox="0 0 16 16" fill="none">
  41. <path d="M10 12L6 8l4-4" stroke="currentColor" stroke-width="1.5"
  42. stroke-linecap="round" stroke-linejoin="round"/>
  43. </svg>
  44. </span>
  45. @endif
  46. {{-- 第一页 + 省略号 --}}
  47. @if ($start > 1)
  48. <a class="wiki-page-btn" href="{{ $pageUrl(1) }}">1</a>
  49. @if ($start > 2)
  50. <span class="wiki-page-ellipsis">…</span>
  51. @endif
  52. @endif
  53. {{-- 页码窗口 --}}
  54. @for ($p = $start; $p <= $end; $p++)
  55. @if ($p === $current)
  56. <span class="wiki-page-btn wiki-page-btn--active" aria-current="page">{{ $p }}</span>
  57. @else
  58. <a class="wiki-page-btn" href="{{ $pageUrl($p) }}">{{ $p }}</a>
  59. @endif
  60. @endfor
  61. {{-- 省略号 + 最后一页 --}}
  62. @if ($end < $last)
  63. @if ($end < $last - 1)
  64. <span class="wiki-page-ellipsis">…</span>
  65. @endif
  66. <a class="wiki-page-btn" href="{{ $pageUrl($last) }}">{{ $last }}</a>
  67. @endif
  68. {{-- 下一页 --}}
  69. @if ($current < $last)
  70. <a class="wiki-page-btn" href="{{ $pageUrl($current + 1) }}" aria-label="下一页">
  71. <svg width="14" height="14" viewBox="0 0 16 16" fill="none">
  72. <path d="M6 4l4 4-4 4" stroke="currentColor" stroke-width="1.5"
  73. stroke-linecap="round" stroke-linejoin="round"/>
  74. </svg>
  75. </a>
  76. @else
  77. <span class="wiki-page-btn wiki-page-btn--disabled" aria-disabled="true">
  78. <svg width="14" height="14" viewBox="0 0 16 16" fill="none">
  79. <path d="M6 4l4 4-4 4" stroke="currentColor" stroke-width="1.5"
  80. stroke-linecap="round" stroke-linejoin="round"/>
  81. </svg>
  82. </span>
  83. @endif
  84. </nav>