商品管理ui优化, 后台支持分页参数

frontend/src/styles/admin.css

@@ -419,6 +419,75 @@ h1 {
   grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
 }
 
+.admin-listings-page {
+  display: flex;
+  flex-direction: column;
+  min-height: calc(100vh - 128px);
+}
+
+.listing-control-panel {
+  display: grid;
+  grid-template-columns: minmax(340px, 0.65fr) minmax(520px, 1fr) auto;
+  align-items: end;
+  gap: 14px;
+  margin-bottom: 14px;
+  border-radius: 14px;
+  background: #ffffff;
+  padding: 14px 16px;
+  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
+}
+
+.listing-metric-strip {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 8px;
+}
+
+.listing-metric-strip span {
+  display: inline-flex;
+  align-items: baseline;
+  gap: 6px;
+  min-height: 34px;
+  border-radius: 8px;
+  background: #f8f9fe;
+  padding: 8px 10px;
+  color: #8f9bba;
+  font-size: 12px;
+  font-weight: 600;
+}
+
+.listing-metric-strip strong {
+  color: #1b2559;
+  font-size: 16px;
+  font-weight: 800;
+}
+
+.listing-filter-bar {
+  display: grid;
+  grid-template-columns: minmax(180px, 1fr) minmax(160px, 0.8fr) minmax(170px, 0.8fr);
+  gap: 12px;
+}
+
+.listing-filter-bar .el-form-item {
+  margin-bottom: 0;
+}
+
+.listing-filter-bar .el-form-item__label {
+  color: #8f9bba;
+  font-size: 12px;
+  font-weight: 600;
+  letter-spacing: 0.2px;
+}
+
+.listing-action-strip {
+  display: flex;
+  align-items: center;
+  justify-content: flex-end;
+  gap: 8px;
+  padding-bottom: 1px;
+  white-space: nowrap;
+}
+
 /* ========== Dashboard Panels ========== */
 .dashboard-panels {
   display: grid;
@@ -559,6 +628,71 @@ h1 {
   font-size: 12px;
 }
 
+.table-pagination {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 12px;
+  border: none;
+  background: #ffffff;
+  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
+}
+
+.table-pagination {
+  justify-content: flex-end;
+  margin-top: 12px;
+  border-radius: 12px;
+  padding: 12px 16px;
+  box-sizing: border-box;
+  width: 100%;
+  color: #66728f;
+  font-size: 12px;
+  font-weight: 600;
+  white-space: nowrap;
+}
+
+.pagination-controls {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  flex-shrink: 0;
+  white-space: nowrap;
+}
+
+.pagination-summary,
+.pagination-page,
+.pagination-size-label {
+  flex-shrink: 0;
+  white-space: nowrap;
+}
+
+.page-size-select {
+  width: 86px;
+  flex: 0 0 86px;
+}
+
+.page-size-select .el-select__wrapper {
+  min-height: 30px;
+  padding: 4px 8px;
+}
+
+.page-size-select .el-select__selected-item {
+  min-width: max-content;
+}
+
+.admin-listings-page .table-pagination {
+  margin-top: auto;
+}
+
+.pagination-controls .el-button--small {
+  min-width: 44px;
+  padding: 5px 8px;
+}
+
+.pagination-controls .el-button + .el-button {
+  margin-left: 0;
+}
+
 /* ========== Filter Panel ========== */
 .filter-panel {
   display: grid;