From fe0f7dcf7564c5330467d9aacdfc04b18e68abd6 Mon Sep 17 00:00:00 2001
From: zhuoqinglian <1035449612@qq.com>
Date: Tue, 9 Jun 2026 15:05:16 +0800
Subject: [PATCH] =?UTF-8?q?feat:=20=E5=AE=8C=E6=88=90=E5=88=86=E9=A1=B5?=
 =?UTF-8?q?=E7=BB=84=E4=BB=B6=E6=8A=BD=E7=A6=BB?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../src/components/CustomPagination.vue       | 68 +++++++++++++++++++
 1 file changed, 68 insertions(+)
 create mode 100644 main/manager-web/src/components/CustomPagination.vue

diff --git a/main/manager-web/src/components/CustomPagination.vue b/main/manager-web/src/components/CustomPagination.vue
new file mode 100644
index 00000000..3e5ed7b5
--- /dev/null
+++ b/main/manager-web/src/components/CustomPagination.vue
@@ -0,0 +1,68 @@
+<template>
+  <div class="pagination-wrapper">
+    <el-pagination
+      :current-page="currentPage"
+      :page-size="pageSize"
+      :page-sizes="pageSizeOptions"
+      :total="total"
+      layout="sizes, prev, pager, next, total"
+      background
+      @size-change="handleSizeChange"
+      @current-change="handlePageChange"
+    />
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'Pagination',
+  props: {
+    total: {
+      type: Number,
+      default: 0
+    },
+    currentPage: {
+      type: Number,
+      default: 1
+    },
+    pageSize: {
+      type: Number,
+      default: 10
+    },
+    pageSizeOptions: {
+      type: Array,
+      default: () => [10, 20, 50, 100]
+    }
+  },
+  methods: {
+    handleSizeChange(val) {
+      this.$emit('size-change', val);
+    },
+    handlePageChange(page) {
+      this.$emit('page-change', page);
+    }
+  }
+};
+</script>
+
+<style lang="scss" scoped>
+.pagination-wrapper {
+  margin-top: 20px;
+}
+::v-deep .el-pagination {
+  .btn-next,
+  .btn-prev,
+  .el-pager li {
+    background: transparent !important;
+    min-width: 36px !important;
+  }
+  .el-pager li:not(.disabled).active {
+    background: linear-gradient(135deg, #2a6dfe 0%, #6b8cff 50%, #2a6dfe 100%) !important;
+    border-radius: 6px;
+    box-shadow: 0 1px 3px rgba(45, 111, 254, 0.3);
+    color: #fff;
+    font-weight: 600;
+    text-shadow: 0 1px 1px rgba(0, 0, 0, 0.15);
+  }
+}
+</style>