Web device modify (#818)

* “设备管理”分页响应调整

* 样式调整

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

@@ -14,14 +14,13 @@
     <div class="main-wrapper">
       <div class="content-panel">
         <div class="content-area">
-          <el-card class="params-card" shadow="never">
+          <el-card class="device-card" shadow="never">
             <el-table
               ref="deviceTable"
               :data="paginatedDeviceList"
               @selection-change="handleSelectionChange"
               class="transparent-table"
-              :header-cell-class-name="headerCellClassName"
+              :header-cell-class-name="headerCellClassName">
-              stripe>
               <el-table-column type="selection" align="center" width="120"></el-table-column>
               <el-table-column label="设备型号" prop="model" align="center"></el-table-column>
               <el-table-column label="固件版本" prop="firmwareVersion" align="center" ></el-table-column>
@@ -67,6 +66,14 @@
                   @click="deleteSelected">解绑</el-button>
               </div>
               <div class="custom-pagination">
+                <el-select v-model="pageSize" @change="handlePageSizeChange" class="page-size-select">
+                    <el-option
+                        v-for="item in pageSizeOptions"
+                        :key="item"
+                        :label="`${item}条/页`"
+                        :value="item">
+                    </el-option>
+                </el-select>
                 <button class="pagination-btn" :disabled="currentPage === 1" @click="goFirst">首页</button>
                 <button class="pagination-btn" :disabled="currentPage === 1" @click="goPrev">上一页</button>
                 <button
@@ -109,6 +116,7 @@ export default {
       currentAgentId: this.$route.query.agentId || '',
       currentPage: 1,
       pageSize: 5,
+      pageSizeOptions: [5, 10, 20, 50, 100],
       deviceList: [],
       loading: false,
       userApi: null,
@@ -132,7 +140,6 @@ export default {
     },
     pageCount() {
       return Math.ceil(this.filteredDeviceList.length / this.pageSize);
-
     },
     visiblePages() {
       const pages = [];
@@ -148,7 +155,7 @@ export default {
         pages.push(i);
       }
       return pages;
-    }
+    },
   },
   mounted() {
     const agentId = this.$route.query.agentId;
@@ -157,6 +164,10 @@ export default {
     }
   },
   methods: {
+    handlePageSizeChange(val) {
+      this.pageSize = val;
+      this.currentPage = 1;
+    },
     handleSearch() {
       this.activeSearchKeyword = this.searchKeyword;
       this.currentPage = 1;
@@ -320,10 +331,14 @@ export default {
 .main-wrapper {
   margin: 5px 22px;
   border-radius: 15px;
-  min-height: 600px;
+  min-height: calc(100vh - 200px);
+  height: auto;
+  max-height: 80vh;
   box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1);
   position: relative;
   background: rgba(237, 242, 255, 0.5);
+  display: flex;
+  flex-direction: column;
 }
 
 .operation-bar {
@@ -356,6 +371,60 @@ export default {
   color: white;
 }
 
+::v-deep .search-input .el-input__inner {
+  border-radius: 4px;
+  border: 1px solid #DCDFE6;
+  background-color: white;
+  transition: border-color 0.2s;
+}
+
+::v-deep .page-size-select{
+  width: 100px;
+  margin-right: 8px;
+}
+
+::v-deep .page-size-select .el-input__inner{
+  height: 32px;
+  line-height: 32px;
+  border-radius: 4px;
+  border: 1px solid #e4e7ed;
+  background: #dee7ff;
+  color: #606266;
+  font-size: 14px;
+}
+::v-deep .page-size-select .el-input__suffix{
+  right: 6px;
+  width: 15px;
+  height: 20px;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  top: 6px;
+  border-radius: 4px;
+}
+
+::v-deep .page-size-select .el-input__suffix-inner{
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 100%;
+}
+::v-deep .page-size-select .el-icon-arrow-up:before{
+  content: "";
+  display: inline-block;
+  border-left: 6px solid transparent;
+  border-right: 6px solid transparent;
+  border-top: 9px solid #606266;
+  position: relative;
+  transform: rotate(0deg);
+  transition: transform 0.3s;
+}
+
+::v-deep .search-input .el-input__inner:focus {
+  border-color: #6b8cff;
+  outline: none;
+}
+
 .content-panel {
   flex: 1;
   display: flex;
@@ -370,28 +439,34 @@ export default {
   flex: 1;
   height: 100%;
   min-width: 600px;
-  overflow-x: auto;
+  overflow: auto;
   background-color: white;
+  display: flex;
+  flex-direction: column;
 }
 
-.params-card {
+.device-card {
   background: white;
   border: none;
   box-shadow: none;
+  display: flex;
+  flex-direction: column;
+  flex: 1;
+  overflow: hidden;
 }
 
 .table_bottom {
   display: flex;
   justify-content: space-between;
   align-items: center;
-  margin-top: 40px;
+  margin-top: 10px;
-  padding: 0 20px;
+  padding-bottom: 10px;
 }
 
 .ctrl_btn {
   display: flex;
   gap: 8px;
-  padding-left: 6px;
+  padding-left: 26px;
 }
 
 .ctrl_btn .el-button {
@@ -430,12 +505,18 @@ export default {
 .custom-pagination {
   display: flex;
   align-items: center;
-  gap: 8px;
+  gap: 10px;
-  margin-top: 15px;
 }
 
-.pagination-btn {
+.custom-pagination .el-select {
-  min-width: 28px;
+  margin-right: 8px;
+}
+
+.custom-pagination .pagination-btn:first-child,
+.custom-pagination .pagination-btn:nth-child(2),
+.custom-pagination .pagination-btn:nth-last-child(2),
+.custom-pagination .pagination-btn:nth-child(3) {
+  min-width: 60px;
   height: 32px;
   padding: 0 12px;
   border-radius: 4px;
@@ -447,28 +528,46 @@ export default {
   transition: all 0.3s ease;
 }
 
-.pagination-btn:first-child,
+.custom-pagination .pagination-btn:first-child:hover,
-.pagination-btn:nth-child(2),
+.custom-pagination .pagination-btn:nth-child(2):hover,
-.pagination-btn:nth-last-child(2) {
+.custom-pagination .pagination-btn:nth-last-child(2):hover,
-  min-width: 60px;
+.custom-pagination .pagination-btn:nth-child(3):hover {
-}
-
-.pagination-btn:hover {
   background: #d7dce6;
 }
 
-.pagination-btn:disabled {
+.custom-pagination .pagination-btn:disabled {
   opacity: 0.6;
   cursor: not-allowed;
 }
 
-.pagination-btn.active {
+.custom-pagination .pagination-btn:not(:first-child):not(:nth-child(3)):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;
+}
+
+.custom-pagination .pagination-btn:not(:first-child):not(:nth-child(3)):not(:nth-child(2)):not(:nth-last-child(2)):hover {
+  background: rgba(245, 247, 250, 0.3);
+}
+
+.custom-pagination .pagination-btn.active {
   background: #5f70f3 !important;
   color: #ffffff !important;
   border-color: #5f70f3 !important;
 }
 
-.total-text {
+.custom-pagination .pagination-btn.active:hover {
+  background: #6d7cf5 !important;
+}
+
+.custom-pagination .total-text {
   color: #909399;
   font-size: 14px;
   margin-left: 10px;
@@ -525,5 +624,31 @@ export default {
   color: #5a64b5;
 }
 
+:deep(.transparent-table) {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  max-height: calc(100vh - 330px);
+}
 
+:deep(.el-table__body-wrapper) {
+  flex: 1;
+  overflow: auto;
+  max-height: none !important;
+}
+
+:deep(.el-table__header-wrapper) {
+  flex-shrink: 0;
+}
+
+@media (min-width: 1144px) {
+  .table_bottom {
+    margin-top: 40px;
+  }
+
+  :deep(.transparent-table) .el-table__body tr td {
+    padding-top: 16px;
+    padding-bottom: 16px;
+  }
+}
 </style>

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

@@ -580,6 +580,11 @@ export default {
   color: white;
 }
 
+.btn-search:hover {
+  opacity: 0.9;
+  transform: translateY(-1px);
+}
+
 ::v-deep .search-input .el-input__inner {
   border-radius: 4px;
   border: 1px solid #DCDFE6;
@@ -634,17 +639,6 @@ export default {
   outline: none;
 }
 
-.btn-search {
-  background: linear-gradient(135deg, #6b8cff, #a966ff);
-  border: none;
-  color: white;
-}
-
-.btn-search:hover {
-  opacity: 0.9;
-  transform: translateY(-1px);
-}
-
 .data-table {
   border-radius: 6px;
   overflow: hidden;