feat 搭建架构骨架

src/components/PaginationBar.vue

@@ -0,0 +1,108 @@
+<script setup lang="ts">
+import { computed } from 'vue'
+
+interface Props {
+  page: number
+  pageSize: number
+  total: number
+}
+
+const props = defineProps<Props>()
+
+const emit = defineEmits<{ pageChange: [page: number] }>()
+
+const pageCount = computed(() => Math.max(1, Math.ceil(props.total / props.pageSize)))
+
+/** 页码序列：≤7 全部展示，否则首尾 + 当前页窗口（… 省略） */
+const pages = computed<Array<number | '...'>>(() => {
+  const n = pageCount.value
+  const { page } = props
+  if (n <= 7) return Array.from({ length: n }, (_, i) => i + 1)
+  const window: Array<number | '...'> = []
+  for (let p = page - 1; p <= page + 1; p++) {
+    if (p >= 1 && p <= n) window.push(p)
+  }
+  if (page > 3) window.unshift('...')
+  if (page < n - 2) window.push('...')
+  return [1, ...window.filter((item) => item !== 1 && item !== n), n].filter(
+    (item, index, arr) => arr.indexOf(item) === index,
+  )
+})
+
+function go(page: number): void {
+  if (page < 1 || page > pageCount.value || page === props.page) return
+  emit('pageChange', page)
+}
+</script>
+
+<template>
+  <nav class="pagination" aria-label="分页">
+    <button
+      class="pagination__btn"
+      :disabled="page <= 1"
+      @click="go(page - 1)"
+    >
+      ‹
+    </button>
+    <button
+      v-for="(item, index) in pages"
+      :key="`${item}-${index}`"
+      class="pagination__btn"
+      :class="{ 'is-active': item === page, 'is-ellipsis': item === '...' }"
+      :disabled="item === '...'"
+      @click="go(item as number)"
+    >
+      {{ item }}
+    </button>
+    <button
+      class="pagination__btn"
+      :disabled="page >= pageCount"
+      @click="go(page + 1)"
+    >
+      ›
+    </button>
+  </nav>
+</template>
+
+<style lang="less" scoped>
+.pagination {
+  .flex(row, center);
+  gap: @spacing-xs;
+  padding: @spacing-base 0;
+
+  &__btn {
+    .flex(row, center);
+    min-width: 32px;
+    height: 32px;
+    padding: 0 @spacing-xs;
+    border: 1px solid @border-color;
+    border-radius: @radius-sm;
+    background: @white;
+    color: @text-color;
+    font-size: @font-size-base;
+    transition: all 0.2s;
+
+    &:hover:not(:disabled):not(.is-ellipsis) {
+      border-color: @primary-color;
+      color: @primary-color;
+    }
+
+    &.is-active {
+      border-color: @primary-color;
+      background: @primary-color;
+      color: @white;
+    }
+
+    &.is-ellipsis {
+      border-color: transparent;
+      background: transparent;
+      cursor: default;
+    }
+
+    &:disabled:not(.is-ellipsis) {
+      opacity: 0.4;
+      cursor: not-allowed;
+    }
+  }
+}
+</style>