fmode-app/src/app/ui/components/pagination/pagination.html

<div class="flex flex-wrap items-center gap-4">
  @if (showTotal()) {
    <span class="text-sm text-muted">共 {{ total() }} 条</span>
  }

  @if (simple()) {
    <div class="flex items-center gap-1.5">
      <button
        type="button"
        [class]="navClasses()"
        (click)="prev()"
        [disabled]="currentPage() <= 1"
        aria-label="上一页"
      >
        <i class="fa-solid fa-angle-left" aria-hidden="true"></i>
      </button>
      <span class="min-w-20 px-2 text-center text-sm text-ink-2">{{ currentPage() }} / {{ totalPages() }}</span>
      <button
        type="button"
        [class]="navClasses()"
        (click)="next()"
        [disabled]="currentPage() >= totalPages()"
        aria-label="下一页"
      >
        <i class="fa-solid fa-angle-right" aria-hidden="true"></i>
      </button>
    </div>
  } @else {
    <div class="flex items-center gap-1.5">
      <button
        type="button"
        [class]="navClasses()"
        (click)="prev()"
        [disabled]="currentPage() <= 1"
        aria-label="上一页"
      >
        <i class="fa-solid fa-angle-left" aria-hidden="true"></i>
      </button>
      @for (p of pageItems(); track $index) {
        @if (p === '…') {
          <span class="select-none px-1 text-sm text-muted" aria-hidden="true">…</span>
        } @else {
          <button
            type="button"
            [class]="pageClasses(p === currentPage())"
            (click)="go(p)"
            [attr.aria-current]="p === currentPage() ? 'page' : null"
          >
            {{ p }}
          </button>
        }
      }
      <button
        type="button"
        [class]="navClasses()"
        (click)="next()"
        [disabled]="currentPage() >= totalPages()"
        aria-label="下一页"
      >
        <i class="fa-solid fa-angle-right" aria-hidden="true"></i>
      </button>
    </div>

    <div class="flex items-center gap-2">
      <input
        type="number"
        min="1"
        [attr.max]="totalPages()"
        [value]="jumpValue()"
        (input)="onJumpInput($event)"
        (keydown)="onJumpKeydown($event)"
        class="h-8 w-16 rounded-lg border border-edge bg-surface px-2 text-center text-sm text-ink outline-none transition-colors focus:border-primary"
        placeholder="页码"
        aria-label="跳转到页码"
      />
      <button type="button" [class]="jumpBtnClasses" (click)="jump()">跳转</button>
    </div>
  }
</div>