From 5934cf718d3c0bc82370191d13940f605dc3ff8d Mon Sep 17 00:00:00 2001
From: CGD <3030332422@qq.com>
Date: Wed, 2 Apr 2025 17:19:46 +0800
Subject: [PATCH] =?UTF-8?q?=E4=BC=98=E5=8C=96=E4=BA=86=E2=80=9D=E7=94=A8?=
 =?UTF-8?q?=E6=88=B7=E7=AE=A1=E7=90=86=E2=80=9C=E9=A1=B5=E9=9D=A2=E6=A0=B7?=
 =?UTF-8?q?=E5=BC=8F=EF=BC=8C=E4=BF=AE=E6=94=B9=E4=BA=86=E2=80=9D=E6=A8=A1?=
 =?UTF-8?q?=E5=9E=8B=E9=85=8D=E7=BD=AE=E2=80=9C=E9=A1=B5=E9=9D=A2=E7=9A=84?=
 =?UTF-8?q?=E5=88=86=E9=A1=B5=E5=99=A8?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 main/manager-web/src/views/ModelConfig.vue    | 128 +++++++++++++++++-
 main/manager-web/src/views/UserManagement.vue |   4 +-
 2 files changed, 128 insertions(+), 4 deletions(-)

diff --git a/main/manager-web/src/views/ModelConfig.vue b/main/manager-web/src/views/ModelConfig.vue
index 601fd9f9..3345fb2c 100644
--- a/main/manager-web/src/views/ModelConfig.vue
+++ b/main/manager-web/src/views/ModelConfig.vue
@@ -97,8 +97,16 @@
                 删除
               </el-button>
             </div>
-            <div class="pagination-container">
-            <el-pagination @current-change="handleCurrentChange" background :current-page="currentPage" :page-size="pageSize" layout="prev, pager, next" :total="total"/>
+            <div class="custom-pagination">
+              <button class="pagination-btn" :disabled="currentPage === 1" @click="goFirst">首页</button>
+              <button class="pagination-btn" :disabled="currentPage === 1" @click="goPrev">上一页</button>
+
+              <button v-for="page in visiblePages" :key="page" class="pagination-btn" :class="{ active: page === currentPage }" @click="goToPage(page)">
+                {{ page }}
+              </button>
+
+              <button class="pagination-btn" :disabled="currentPage === pageCount" @click="goNext">下一页</button>
+              <span class="total-text">共{{ total }}条记录</span>
             </div>
           </div>
         </div>
@@ -143,6 +151,28 @@ export default {
       isAllSelected: false
     };
   },
+
+  computed: {
+    pageCount() {
+      return Math.ceil(this.total / this.pageSize);
+    },
+    visiblePages() {
+      const pages = [];
+      const maxVisible = 3;
+      let start = Math.max(1, this.currentPage - 1);
+      let end = Math.min(this.pageCount, start + maxVisible - 1);
+
+      if (end - start + 1 < maxVisible) {
+        start = Math.max(1, end - maxVisible + 1);
+      }
+
+      for (let i = start; i <= end; i++) {
+        pages.push(i);
+      }
+      return pages;
+    }
+  },
+
   methods: {
     headerCellClassName({ column, columnIndex }) {
       if (columnIndex === 0) {
@@ -228,6 +258,31 @@ export default {
     },
     handleAddConfirm(newModel) {
       console.log('新增模型数据:', newModel);
+    },
+
+    // 分页器
+    goFirst() {
+    this.currentPage = 1;
+    this.loadData();
+    },
+    goPrev() {
+      if (this.currentPage > 1) {
+        this.currentPage--;
+        this.loadData();
+      }
+    },
+    goNext() {
+      if (this.currentPage < this.pageCount) {
+        this.currentPage++;
+        this.loadData();
+      }
+    },
+    goToPage(page) {
+      this.currentPage = page;
+      this.loadData();
+    },
+    loadData() {
+      console.log('加载数据，当前页:', this.currentPage);
     }
   },
 };
@@ -574,5 +629,74 @@ export default {
   padding-right: 10px;
 }
 
+/* 分页器 */
+.custom-pagination {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  margin-top: 15px;
+
+  /* 导航按钮样式 (首页、上一页、下一页) */
+
+  .pagination-btn:first-child,
+  .pagination-btn:nth-child(2),
+  .pagination-btn:nth-last-child(2) {
+    min-width: 60px;
+    height: 32px;
+    padding: 0 12px;
+    border-radius: 4px;
+    border: 1px solid #e4e7ed;
+    background: #DEE7FF;
+    color: #606266;
+    font-size: 14px;
+    cursor: pointer;
+    transition: all 0.3s ease;
+
+    &:hover {
+      background: #d7dce6;
+    }
+
+    &:disabled {
+      opacity: 0.6;
+      cursor: not-allowed;
+    }
+  }
+
+  /* 数字按钮样式 */
+
+  .pagination-btn:not(:first-child):not(:nth-child(2)):not(:nth-last-child(2)) {
+    min-width: 28px;
+    height: 32px;
+    padding: 0;
+    border-radius: 4px;
+    border: 1px solid transparent;
+    background: transparent;
+    color: #606266;
+    font-size: 14px;
+    cursor: pointer;
+    transition: all 0.3s ease;
+
+    &:hover {
+      background: rgba(245, 247, 250, 0.3);
+    }
+  }
+
+  .pagination-btn.active {
+    background: #5f70f3 !important;
+    color: #ffffff !important;
+    border-color: #5f70f3 !important;
+
+    &:hover {
+      background: #6d7cf5 !important;
+    }
+  }
+
+  .total-text {
+    color: #909399;
+    font-size: 14px;
+    margin-left: 10px;
+  }
+}
+
 </style>
 
diff --git a/main/manager-web/src/views/UserManagement.vue b/main/manager-web/src/views/UserManagement.vue
index 8623981c..cecebf3c 100644
--- a/main/manager-web/src/views/UserManagement.vue
+++ b/main/manager-web/src/views/UserManagement.vue
@@ -348,8 +348,8 @@ $table-bg-color: #ecf1fd;
 .user-card {
   background: white;
   border-radius: 12px;
-  padding: 20px;
-  margin: 15px;
+  padding: 15px;
+  margin: -10px 15px;
 }
 
 .table_bottom {