geo/apps/desktop-client/src/renderer/components/PaginationBar.vue

<script setup lang="ts">
import { computed } from 'vue'

const props = withDefaults(
  defineProps<{
    current: number
    pageSize: number
    total: number
    maxVisiblePages?: number
  }>(),
  {
    maxVisiblePages: 5,
  },
)

const emit = defineEmits<{
  (event: 'change', page: number): void
}>()

type PageToken = number | 'ellipsis'

const totalPages = computed(() => Math.max(1, Math.ceil(props.total / props.pageSize)))

const tokens = computed<PageToken[]>(() => {
  if (totalPages.value <= props.maxVisiblePages) {
    return Array.from({ length: totalPages.value }, (_value, index) => index + 1)
  }

  const pages: PageToken[] = [1]
  let start = Math.max(2, props.current - 1)
  let end = Math.min(totalPages.value - 1, props.current + 1)

  while (end - start < 2 && start > 2) {
    start -= 1
  }
  while (end - start < 2 && end < totalPages.value - 1) {
    end += 1
  }

  if (start > 2) {
    pages.push('ellipsis')
  }

  for (let page = start; page <= end; page += 1) {
    pages.push(page)
  }

  if (end < totalPages.value - 1) {
    pages.push('ellipsis')
  }

  pages.push(totalPages.value)
  return pages
})

function goTo(page: number) {
  if (page === props.current || page < 1 || page > totalPages.value) {
    return
  }
  emit('change', page)
}
</script>

<template>
  <nav v-if="totalPages > 1" class="pagination" aria-label="Pagination">
    <button class="pagination__nav" :disabled="props.current <= 1" @click="goTo(props.current - 1)">
      上一页
    </button>

    <div class="pagination__pages">
      <template
        v-for="token in tokens"
        :key="`${token}-${typeof token === 'number' ? token : Math.random()}`"
      >
        <span v-if="token === 'ellipsis'" class="pagination__ellipsis">…</span>
        <button
          v-else
          class="pagination__page"
          :class="{ active: token === props.current }"
          @click="goTo(token)"
        >
          {{ token }}
        </button>
      </template>
    </div>

    <button
      class="pagination__nav"
      :disabled="props.current >= totalPages"
      @click="goTo(props.current + 1)"
    >
      下一页
    </button>
  </nav>
</template>

<style scoped>
.pagination {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 10px;
  flex-wrap: wrap;
}

.pagination__pages {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.pagination__nav,
.pagination__page {
  appearance: none;
  min-width: 34px;
  height: 34px;
  padding: 0 12px;
  border-radius: 10px;
  border: 1px solid #dbe5f0;
  background: #ffffff;
  color: #334155;
  cursor: pointer;
  font-size: 12px;
  font-weight: 600;
  transition:
    background-color 0.2s ease,
    border-color 0.2s ease,
    color 0.2s ease,
    opacity 0.2s ease;
}

.pagination__nav:hover:not(:disabled),
.pagination__page:hover:not(:disabled) {
  background: #f8fafc;
  border-color: #bfdbfe;
}

.pagination__nav:disabled,
.pagination__page:disabled {
  cursor: not-allowed;
  opacity: 0.5;
}

.pagination__page.active {
  background: #1677ff;
  border-color: #1677ff;
  color: #ffffff;
}

.pagination__ellipsis {
  width: 18px;
  text-align: center;
  color: #94a3b8;
  font-size: 14px;
}
</style>