feat(rebate): 返利列表页面功能增强和样式优化

- 添加表格行选择功能，支持单选和全选
- 优化分页组件，增加每页条数选择器
- 更新表格样式，改善视觉效果和响应式布局
- 修改搜索区域和操作按钮样式，统一设计风格
- 调整详情按钮样式，增加图标标识
- 修复分页跳转逻辑，确保页码正确更新
- 优化表格空数据显示和列宽适配

@@ -136,6 +136,14 @@
         <table class="data-table">
         <table class="data-table">
           <thead>
           <thead>
             <tr>
             <tr>
+              <th class="checkbox-col">
+                <input 
+                  type="checkbox" 
+                  :checked="selectAll" 
+                  @change="handleSelectAll"
+                  class="table-checkbox"
+                />
+              </th>
               <th>返利编号</th>
               <th>返利编号</th>
               <th>订单编号</th>
               <th>订单编号</th>
               <th>经销商代码</th>
               <th>经销商代码</th>
@@ -151,9 +159,17 @@
           </thead>
           </thead>
           <tbody>
           <tbody>
             <tr v-if="rebateList.length === 0">
             <tr v-if="rebateList.length === 0">
-              <td colspan="11" class="empty-data">暂无数据</td>
+              <td colspan="12" class="empty-data">暂无数据</td>
             </tr>
             </tr>
             <tr v-for="row in rebateList" :key="row.rebateId">
             <tr v-for="row in rebateList" :key="row.rebateId">
+              <td class="checkbox-col">
+                <input 
+                  type="checkbox" 
+                  :checked="selectedRebates.includes(row)"
+                  @change="handleSelectRebate(row)"
+                  class="table-checkbox"
+                />
+              </td>
               <td>{{ row.rebateNo }}</td>
               <td>{{ row.rebateNo }}</td>
               <td>{{ row.orderNo }}</td>
               <td>{{ row.orderNo }}</td>
               <td>{{ row.dealerCode }}</td>
               <td>{{ row.dealerCode }}</td>
@@ -173,7 +189,7 @@
               </td>
               </td>
               <td>{{ formatDate(row.updateTime || '') }}</td>
               <td>{{ formatDate(row.updateTime || '') }}</td>
               <td>
               <td>
-                <button @click="handleViewDetail(row)" class="action-link">详情</button>
+                <button @click="handleViewDetail(row)" class="table-btn view">✏️ 详情</button>
               </td>
               </td>
             </tr>
             </tr>
           </tbody>
           </tbody>
@@ -181,30 +197,46 @@
       </div>
       </div>
 
 
       <!-- 分页 -->
       <!-- 分页 -->
-      <div class="pagination-wrapper">
+      <div class="table-footer">
+        <div class="pagination-left">
           <div class="pagination-info">
           <div class="pagination-info">
-          共 {{ pagination.total }} 条，{{ pagination.pageSize }}/页
+            共 {{ pagination.total }} 条记录，第 {{ pagination.pageNum }} / {{ getTotalPages() }} 页
+          </div>
+          <div class="page-size-selector">
+            <label>每页显示:</label>
+            <select v-model="pagination.pageSize" @change="handleSizeChange($event)" class="page-size-select">
+              <option value="10">10条</option>
+              <option value="20">20条</option>
+              <option value="50">50条</option>
+              <option value="100">100条</option>
+            </select>
+          </div>
         </div>
         </div>
-        <div class="pagination-controls">
-          <button @click="handlePrevPage" :disabled="pagination.pageNum <= 1" class="page-btn">‹</button>
+        <div class="pagination-container">
+          <button
+            @click="handlePrevPage"
+            :disabled="pagination.pageNum <= 1"
+            class="pagination-btn prev-btn"
+          >
+            上一页
+          </button>
+          <div class="pagination-pages">
             <button 
             <button 
               v-for="page in getPageNumbers()" 
               v-for="page in getPageNumbers()" 
               :key="page"
               :key="page"
               @click="handlePageChange(page)"
               @click="handlePageChange(page)"
-            :class="['page-btn', { active: page === pagination.pageNum }]"
+              :class="['page-number', { active: page === pagination.pageNum }]"
             >
             >
               {{ page }}
               {{ page }}
             </button>
             </button>
-          <button @click="handleNextPage" :disabled="pagination.pageNum >= getTotalPages()" class="page-btn">›</button>
           </div>
           </div>
-        <div class="pagination-jump">
-          前往
-          <input
-            v-model="jumpPage"
-            class="jump-input"
-            @keyup.enter="handleJumpPage"
-          />
-          页
+          <button
+            @click="handleNextPage"
+            :disabled="pagination.pageNum >= getTotalPages()"
+            class="pagination-btn next-btn"
+          >
+            下一页
+          </button>
         </div>
         </div>
       </div>
       </div>
     </div>
     </div>
@@ -421,6 +453,7 @@ const exportLoading = ref(false)
 const auditLoading = ref(false)
 const auditLoading = ref(false)
 const rebateList = ref<Rebate[]>([])
 const rebateList = ref<Rebate[]>([])
 const selectedRebates = ref<Rebate[]>([])
 const selectedRebates = ref<Rebate[]>([])
+const selectAll = ref(false)
 const rebateDetail = ref<Rebate | null>(null)
 const rebateDetail = ref<Rebate | null>(null)
 
 
 // 图表引用
 // 图表引用
@@ -872,8 +905,9 @@ const getCalcFlagClass = (flag: number) => {
 }
 }
 
 
 // 分页变化
 // 分页变化
-const handleSizeChange = (size: number) => {
-  pagination.pageSize = size
+const handleSizeChange = (event: Event) => {
+  const target = event.target as HTMLSelectElement
+  pagination.pageSize = parseInt(target.value)
   pagination.pageNum = 1
   pagination.pageNum = 1
   getRebateList()
   getRebateList()
 }
 }
@@ -898,6 +932,27 @@ const handleSelectionChange = (selection: Rebate[]) => {
   selectedRebates.value = selection
   selectedRebates.value = selection
 }
 }
 
 
+// 全选/取消全选
+const handleSelectAll = () => {
+  if (selectAll.value) {
+    selectedRebates.value = [...rebateList.value]
+  } else {
+    selectedRebates.value = []
+  }
+}
+
+// 选择单个返利记录
+const handleSelectRebate = (rebate: Rebate) => {
+  const index = selectedRebates.value.findIndex(r => r.rebateId === rebate.rebateId)
+  if (index > -1) {
+    selectedRebates.value.splice(index, 1)
+  } else {
+    selectedRebates.value.push(rebate)
+  }
+  // 更新全选状态
+  selectAll.value = selectedRebates.value.length === rebateList.value.length && rebateList.value.length > 0
+}
+
 // 查看详情
 // 查看详情
 const handleViewDetail = async (row: Rebate) => {
 const handleViewDetail = async (row: Rebate) => {
   try {
   try {
@@ -1588,170 +1643,132 @@ onMounted(async () => {
 
 
 <style scoped lang="scss">
 <style scoped lang="scss">
 .rebate-page {
 .rebate-page {
-  padding: 20px;
-  background: #f5f7fa;
+  background: #f5f5f5;
   min-height: 100vh;
   min-height: 100vh;
-
 }
 }
 
 
+/* 搜索区域 */
 .search-section {
 .search-section {
   background: white;
   background: white;
-  padding: 16px 20px;
-  margin-bottom: 16px;
-  border-radius: 4px;
-  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.1);
+  padding: 16px;
+  border-bottom: 1px solid #e0e0e0;
+}
 
 
-  .search-row {
+.search-row {
   display: flex;
   display: flex;
+  gap: 16px;
   align-items: center;
   align-items: center;
-    gap: 24px;
   flex-wrap: wrap;
   flex-wrap: wrap;
   margin-bottom: 12px;
   margin-bottom: 12px;
+}
 
 
-    &:last-child {
+.search-row:last-child {
   margin-bottom: 0;
   margin-bottom: 0;
-    }
+}
 
 
-    .search-item {
+.search-item {
   display: flex;
   display: flex;
   align-items: center;
   align-items: center;
   gap: 8px;
   gap: 8px;
+}
 
 
-      label {
-        font-size: 14px;
+.search-item label {
+  font-size: 12px;
   color: #333;
   color: #333;
   white-space: nowrap;
   white-space: nowrap;
-        min-width: 80px;
-      }
-
-      .search-input {
-        padding: 8px 12px;
-        border: 1px solid #ddd;
-        border-radius: 4px;
-        font-size: 14px;
-        width: 160px;
-        transition: border-color 0.3s;
-
-        &:focus {
-          outline: none;
-          border-color: #409eff;
-        }
-      }
+}
 
 
-      .search-select {
-        padding: 8px 12px;
-        border: 1px solid #ddd;
+.search-input, .search-select {
+  padding: 6px 8px;
+  border: 1px solid #d9d9d9;
   border-radius: 4px;
   border-radius: 4px;
-        font-size: 14px;
+  font-size: 12px;
   width: 120px;
   width: 120px;
-        background: white;
-        cursor: pointer;
-        transition: border-color 0.3s;
+}
 
 
-        &:focus {
+.search-input:focus, .search-select:focus {
   outline: none;
   outline: none;
-          border-color: #409eff;
-        }
-      }
-    }
+  border-color: #1890ff;
+}
 
 
-    .search-actions {
-      margin-left: auto;
+.search-actions {
   display: flex;
   display: flex;
   gap: 8px;
   gap: 8px;
+}
 
 
-      .search-btn, .reset-btn {
-        padding: 8px 16px;
-        border: 1px solid #ddd;
-        border-radius: 4px;
-        font-size: 14px;
+.search-btn {
+  background: #1890ff;
+  color: white;
+  border: none;
+  padding: 4px 8px;
+  border-radius: 3px;
+  font-size: 11px;
   cursor: pointer;
   cursor: pointer;
-        transition: all 0.3s;
-        background: white;
-
-        &:hover {
-          background: #f5f7fa;
-        }
+}
 
 
-        &:disabled {
-          opacity: 0.6;
-          cursor: not-allowed;
-        }
-      }
+.search-btn:hover {
+  background: #40a9ff;
+}
 
 
-      .search-btn {
-        background: #409eff;
+.reset-btn {
+  background: #ff7875;
   color: white;
   color: white;
-        border-color: #409eff;
+  border: none;
+  padding: 4px 8px;
+  border-radius: 3px;
+  font-size: 11px;
+  cursor: pointer;
+  height: 24px;
+  display: flex;
+  align-items: center;
+}
 
 
-        &:hover {
-          background: #66b1ff;
-        }
-      }
-    }
-  }
+.reset-btn:hover {
+  background: #ff9c99;
 }
 }
 
 
+/* 操作区域 */
 .action-section {
 .action-section {
   background: white;
   background: white;
-  padding: 12px 20px;
-  margin-bottom: 16px;
-  border-radius: 4px;
-  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.1);
+  padding: 12px 16px;
+  border-bottom: 1px solid #e0e0e0;
+}
 
 
-  .action-buttons {
+.action-buttons {
   display: flex;
   display: flex;
-    gap: 12px;
+  gap: 6px;
+}
 
 
-    .action-btn {
-      padding: 8px 16px;
-      border: 1px solid #ddd;
-      border-radius: 4px;
-      font-size: 14px;
+.action-btn {
+  padding: 4px 8px;
+  border: none;
+  border-radius: 3px;
+  font-size: 11px;
   cursor: pointer;
   cursor: pointer;
-      transition: all 0.3s;
-      background: white;
-
-      &:hover {
-        background: #f5f7fa;
-      }
-
-      &:disabled {
-        opacity: 0.6;
-        cursor: not-allowed;
-      }
+  transition: all 0.2s;
+}
 
 
-      &.primary {
-        background: #409eff;
+.action-btn.primary {
+  background: #1890ff;
   color: white;
   color: white;
-        border-color: #409eff;
+}
 
 
-        &:hover {
-          background: #66b1ff;
-        }
-      }
+.action-btn.primary:hover {
+  background: #40a9ff;
+}
 
 
-      &.secondary {
-        background: #67c23a;
+.action-btn.secondary {
+  background: #52c41a;
   color: white;
   color: white;
-        border-color: #67c23a;
+}
 
 
-        &:hover {
-          background: #85ce61;
-        }
-      }
+.action-btn.secondary:hover {
+  background: #73d13d;
+}
 
 
-      &.danger {
-        background: #f56c6c;
+.action-btn.danger {
+  background: #ff4d4f;
   color: white;
   color: white;
-        border-color: #f56c6c;
-
-        &:hover {
-          background: #f78989;
-        }
-      }
-    }
-  }
 }
 }
 
 
 .charts-section {
 .charts-section {
@@ -1825,42 +1842,45 @@ onMounted(async () => {
   width: 100%;
   width: 100%;
 }
 }
 
 
+/* 表格区域 */
 .table-section {
 .table-section {
   background: white;
   background: white;
-  border-radius: 4px;
-  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.1);
+  margin: 16px;
+  border-radius: 6px;
   overflow: hidden;
   overflow: hidden;
+  box-shadow: 0 2px 8px rgba(0,0,0,0.1);
+}
 
 
-  .table-header {
+.table-header {
+  padding: 8px 16px;
+  background: #fafafa;
+  border-bottom: 1px solid #e0e0e0;
   display: flex;
   display: flex;
   justify-content: flex-end;
   justify-content: flex-end;
-    align-items: center;
-    padding: 12px 20px;
-    border-bottom: 1px solid #f0f0f0;
-    background: #fafafa;
+}
 
 
-    .table-controls {
+.table-controls {
   display: flex;
   display: flex;
-      gap: 8px;
+  gap: 4px;
+}
 
 
-      .control-btn {
-        padding: 6px 12px;
-        border: 1px solid #ddd;
-        border-radius: 4px;
+.control-btn {
   background: white;
   background: white;
+  border: 1px solid #d9d9d9;
+  border-radius: 3px;
+  padding: 4px 8px;
+  font-size: 11px;
   cursor: pointer;
   cursor: pointer;
-        font-size: 14px;
-        transition: all 0.3s;
+  transition: all 0.2s;
+}
 
 
-        &:hover {
-          background: #f5f7fa;
-          border-color: #409eff;
-        }
-      }
-    }
-  }
+.control-btn:hover {
+  background: #f0f8ff;
+  border-color: #1890ff;
+  color: #1890ff;
+}
 
 
-  .table-container {
+.table-container {
     position: relative;
     position: relative;
 
 
     .loading-overlay {
     .loading-overlay {
@@ -1880,126 +1900,165 @@ onMounted(async () => {
         color: #666;
         color: #666;
       }
       }
     }
     }
+  }
 
 
-    .data-table {
+.data-table {
   width: 100%;
   width: 100%;
   border-collapse: collapse;
   border-collapse: collapse;
-      font-size: 14px;
-
-      thead {
-        background: #fafafa;
+  font-size: 12px;
+}
 
 
-        th {
-          padding: 12px 16px;
+.data-table th,
+.data-table td {
+  padding: 8px 12px;
   text-align: left;
   text-align: left;
-          font-weight: 500;
+  border-bottom: 1px solid #f0f0f0;
+  font-size: 12px;
+}
+
+.data-table th {
+  background: #fafafa;
+  font-weight: 600;
   color: #333;
   color: #333;
-          border-bottom: 1px solid #e0e0e0;
   white-space: nowrap;
   white-space: nowrap;
-        }
-      }
-
-      tbody {
-        tr {
-          transition: background-color 0.3s;
+}
 
 
-          &:hover {
+.data-table tbody tr:hover {
   background: #f5f7fa;
   background: #f5f7fa;
-          }
+}
 
 
-          &:nth-child(even) {
-            background: #fafafa;
-          }
+/* 表格复选框 */
+.table-checkbox {
+  width: 14px;
+  height: 14px;
+}
 
 
-          &:nth-child(even):hover {
-            background: #f0f2f5;
-          }
+/* 表格操作按钮 */
+.table-btn {
+  padding: 2px 6px;
+  margin-right: 4px;
+  border: none;
+  border-radius: 3px;
+  font-size: 10px;
+  cursor: pointer;
+  display: inline-flex;
+  align-items: center;
+  gap: 2px;
+}
 
 
-          td {
-            padding: 12px 16px;
-            border-bottom: 1px solid #f0f0f0;
-            vertical-align: middle;
+.table-btn.view {
+  background: #1890ff;
+  color: white;
+}
 
 
-            &.empty-data {
-              text-align: center;
-              color: #999;
-              font-style: italic;
-              padding: 40px;
-            }
-          }
-        }
-      }
-    }
-  }
+.table-btn.edit {
+  background: #1890ff;
+  color: white;
+}
+
+.table-btn.delete {
+  background: #ff4d4f;
+  color: white;
+}
 
 
-  .pagination-wrapper {
+/* 分页样式 */
+.table-footer {
   display: flex;
   display: flex;
   justify-content: space-between;
   justify-content: space-between;
   align-items: center;
   align-items: center;
-    padding: 12px 20px;
-    border-top: 1px solid #f0f0f0;
-    background: #fafafa;
+  padding: 8px 16px;
+  background: #f8f9fa;
+  border-top: 1px solid #e0e0e0;
+}
 
 
-    .pagination-info {
-      font-size: 14px;
+.pagination-left {
+  display: flex;
+  align-items: center;
+  gap: 16px;
+}
+
+.pagination-info {
+  font-size: 12px;
   color: #666;
   color: #666;
-    }
+}
 
 
-    .pagination-controls {
+.page-size-selector {
   display: flex;
   display: flex;
+  align-items: center;
   gap: 4px;
   gap: 4px;
+  font-size: 11px;
+  color: #666;
+}
+
+.page-size-select {
+  padding: 2px 4px;
+  border: 1px solid #d9d9d9;
+  border-radius: 3px;
+  font-size: 10px;
+  background: white;
+}
+
+.pagination-container {
+  display: flex;
   align-items: center;
   align-items: center;
+  background: #f8f9fa;
+  border: 1px solid #e9ecef;
+  border-radius: 8px;
+  overflow: hidden;
+  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
+}
 
 
-      .page-btn {
-        padding: 6px 12px;
-        border: 1px solid #ddd;
-        border-radius: 4px;
+.pagination-btn {
+  padding: 2px 6px;
+  border: none;
   background: white;
   background: white;
+  color: #6c757d;
+  font-size: 11px;
+  font-weight: 500;
   cursor: pointer;
   cursor: pointer;
-        font-size: 14px;
-        transition: all 0.3s;
-        min-width: 32px;
+  transition: all 0.2s;
+  border-right: 1px solid #e9ecef;
+  height: 20px;
+}
 
 
-        &:hover:not(:disabled) {
-          background: #f5f7fa;
-          border-color: #409eff;
-        }
+.pagination-btn:hover:not(:disabled) {
+  background: #e9ecef;
+  color: #495057;
+}
 
 
-        &:disabled {
+.pagination-btn:disabled {
   opacity: 0.5;
   opacity: 0.5;
   cursor: not-allowed;
   cursor: not-allowed;
-        }
-
-        &.active {
-          background: #409eff;
-          color: white;
-          border-color: #409eff;
-        }
-      }
-    }
+}
 
 
-    .pagination-jump {
+.pagination-pages {
   display: flex;
   display: flex;
-      align-items: center;
-      gap: 8px;
-      font-size: 14px;
-      color: #666;
+}
 
 
-      .jump-input {
-        width: 50px;
-        padding: 4px 8px;
-        border: 1px solid #ddd;
-        border-radius: 4px;
+.page-number {
+  padding: 2px 6px;
+  border: none;
+  background: white;
+  color: #6c757d;
+  font-size: 11px;
+  font-weight: 500;
+  cursor: pointer;
+  transition: all 0.2s;
+  border-right: 1px solid #e9ecef;
+  min-width: 28px;
   text-align: center;
   text-align: center;
-        font-size: 14px;
+  height: 20px;
+}
 
 
-        &:focus {
-          outline: none;
-          border-color: #409eff;
-        }
-      }
-    }
-  }
+.page-number:hover {
+  background: #e9ecef;
+  color: #495057;
+}
+
+.page-number.active {
+  background: #1890ff;
+  color: white;
+  font-weight: 600;
 }
 }
 
 
 .status-tag {
 .status-tag {
@@ -2049,7 +2108,7 @@ onMounted(async () => {
   overflow-y: auto;
   overflow-y: auto;
 }
 }
 
 
-// 响应式设计
+/* 响应式设计 */
 @media (max-width: 1200px) {
 @media (max-width: 1200px) {
   .charts-container {
   .charts-container {
     grid-template-columns: 1fr;
     grid-template-columns: 1fr;
@@ -2071,6 +2130,5 @@ onMounted(async () => {
       margin-top: 12px;
       margin-top: 12px;
     }
     }
   }
   }
-
 }
 }
 </style>
 </style>