init

apps/frontend/src/components/admin/AdminPaginationBar.vue

@@ -0,0 +1,62 @@
+<script setup lang="ts">
+const props = defineProps<{
+  page: number
+  pageSize: number
+  total: number
+  loading?: boolean
+}>()
+
+const emit = defineEmits<{
+  (event: 'change', page: number): void
+}>()
+
+function goPrev() {
+  if (props.page <= 1 || props.loading) {
+    return
+  }
+
+  emit('change', props.page - 1)
+}
+
+function goNext() {
+  if (props.loading || props.page * props.pageSize >= props.total) {
+    return
+  }
+
+  emit('change', props.page + 1)
+}
+</script>
+
+<template>
+  <footer class="pagination-bar">
+    <span>第 {{ page }} 页，共 {{ Math.max(1, Math.ceil(total / pageSize)) }} 页，合计 {{ total }} 条</span>
+    <div class="actions">
+      <el-button :disabled="page <= 1 || loading" round @click="goPrev">上一页</el-button>
+      <el-button :disabled="page * pageSize >= total || loading" round @click="goNext">下一页</el-button>
+    </div>
+  </footer>
+</template>
+
+<style scoped>
+.pagination-bar {
+  display: flex;
+  justify-content: space-between;
+  gap: 12px;
+  align-items: center;
+  margin-top: 14px;
+  color: #64748b;
+  font-size: 13px;
+}
+
+.actions {
+  display: flex;
+  gap: 8px;
+}
+
+@media (max-width: 780px) {
+  .pagination-bar {
+    flex-direction: column;
+    align-items: flex-start;
+  }
+}
+</style>