feat: Initial commit

web/src/components/Pagination.vue

@@ -0,0 +1,44 @@
+<script setup lang="ts">
+import { computed } from 'vue'
+import { Button } from '@/components/ui/button'
+import { ChevronLeft, ChevronRight } from 'lucide-vue-next'
+
+const props = defineProps<{
+  total: number
+  page: number
+  pageSize: number
+}>()
+
+const emit = defineEmits<{
+  'update:page': [page: number]
+}>()
+
+const totalPages = computed(() => Math.ceil(props.total / props.pageSize) || 1)
+
+function prevPage() {
+  if (props.page > 1) {
+    emit('update:page', props.page - 1)
+  }
+}
+
+function nextPage() {
+  if (props.page < totalPages.value) {
+    emit('update:page', props.page + 1)
+  }
+}
+</script>
+
+<template>
+  <div v-if="total > pageSize" class="flex items-center justify-between px-3 py-2 border-t text-xs text-muted-foreground">
+    <span>共 {{ total }} 条</span>
+    <div class="flex items-center gap-1">
+      <Button variant="ghost" size="icon" class="h-6 w-6" :disabled="page <= 1" @click="prevPage">
+        <ChevronLeft class="h-3 w-3" />
+      </Button>
+      <span class="px-2">{{ page }} / {{ totalPages }}</span>
+      <Button variant="ghost" size="icon" class="h-6 w-6" :disabled="page >= totalPages" @click="nextPage">
+        <ChevronRight class="h-3 w-3" />
+      </Button>
+    </div>
+  </div>
+</template>