Merge pull request #648 from xinnan-tech/web-model-api

Web model api

main/manager-web/src/apis/module/model.js

@@ -0,0 +1,30 @@
+import RequestService from '../httpRequest'
+import {getServiceUrl} from '../api'
+
+
+export default {
+    // 获取模型配置列表
+    getModelList(params, callback) {
+      const queryParams = new URLSearchParams({
+        modelType: params.modelType,
+        modelName: params.modelName || '',
+        page: params.page || 0,
+        limit: params.limit || 10
+      }).toString();
+
+      RequestService.sendRequest()
+        .url(`${getServiceUrl()}/api/v1/models/models/list?${queryParams}`)
+        .method('GET')
+        .success((res) => {
+            RequestService.clearRequestTime()
+            callback(res)
+        })
+        .fail((err) => {
+            console.error('获取模型列表失败:', err)
+            RequestService.reAjaxFun(() => {
+                this.getModelList(params, callback)
+            })
+        }).send()
+    },
+
+}

main/manager-web/src/views/ModelConfig.vue

@@ -97,8 +97,16 @@
                 删除
               </el-button>
             </div>
-            <div class="pagination-container">
+            <div class="custom-pagination">
-            <el-pagination @current-change="handleCurrentChange" background :current-page="currentPage" :page-size="pageSize" layout="prev, pager, next" :total="total"/>
+              <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);
     }
   },
 };
@@ -353,6 +408,7 @@ export default {
   height: 100%;
   min-width: 600px;
   overflow-x: auto;
+  background-color: white;
 
 }
 
@@ -573,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>
 

main/manager-web/src/views/UserManagement.vue

@@ -231,7 +231,7 @@ export default {
       row.status = '正常';
       console.log('恢复用户：', row);
     },
-    
+
     // 用户删除
     deleteUser(row) {
         this.$confirm('确定要删除该用户吗？', '警告', {
@@ -346,9 +346,9 @@ $table-bg-color: #ecf1fd;
 }
 
 .user-card {
-  background: $table-bg-color;
+  background: white;
   border-radius: 12px;
-  padding: 20px;
+  padding: 15px;
   margin: 15px;
 }
 
@@ -498,11 +498,11 @@ $table-bg-color: #ecf1fd;
   }
 
   :deep(.el-table) {
-    background: $table-bg-color;
+    background: white;
 
     &.transparent-table {
       .el-table__header th {
-        background: $table-bg-color !important;
+        background: white !important;
         color: black;
       }
 
@@ -515,7 +515,7 @@ $table-bg-color: #ecf1fd;
       }
 
       .el-table__body tr {
-        background-color: $table-bg-color;
+        background-color: white;
         td {
           border: {
             top: 1px solid rgba(0, 0, 0, 0.04);