Merge branch 'master' of http://gitlab.erry.com/zhouhui.jiang/test_cursor

@@ -116,7 +116,7 @@
               <th>异常类型</th>
               <th>异常类型</th>
               <th>严重程度</th>
               <th>严重程度</th>
               <th class="sortable">日期 ↕️</th>
               <th class="sortable">日期 ↕️</th>
-              <th>操作</th>
+              <th class="action-header">操作</th>
             </tr>
             </tr>
           </thead>
           </thead>
           <tbody>
           <tbody>
@@ -744,7 +744,7 @@ const handleExport = async () => {
     
     
     ElMessage.info('正在导出数据，请稍候...')
     ElMessage.info('正在导出数据，请稍候...')
     
     
-    const response = await exceptionWorkorderApi.exportExceptionWorkorders(searchParams.value)
+    const response = await exceptionWorkorderApi.exportExceptionWorkorders(searchParams)
     
     
     // 创建下载链接
     // 创建下载链接
     const blob = new Blob([response as unknown as BlobPart], {
     const blob = new Blob([response as unknown as BlobPart], {
@@ -899,21 +899,20 @@ onMounted(() => {
 
 
 <style scoped>
 <style scoped>
 .exception-workorder-container {
 .exception-workorder-container {
-  padding: 0px;
   background: #f5f5f5;
   background: #f5f5f5;
   min-height: 100vh;
   min-height: 100vh;
 }
 }
 
 
-/* 搜索区域样式 */
+/* 搜索区域 */
 .search-section {
 .search-section {
   background: white;
   background: white;
-  padding: 16px 20px;
+  padding: 16px;
   border-bottom: 1px solid #e0e0e0;
   border-bottom: 1px solid #e0e0e0;
 }
 }
 
 
 .search-row {
 .search-row {
   display: flex;
   display: flex;
-  gap: 25px;
+  gap: 16px;
   align-items: center;
   align-items: center;
   flex-wrap: wrap;
   flex-wrap: wrap;
   margin-bottom: 12px;
   margin-bottom: 12px;
@@ -927,127 +926,147 @@ onMounted(() => {
   display: flex;
   display: flex;
   align-items: center;
   align-items: center;
   gap: 8px;
   gap: 8px;
-  flex: 0 0 auto;
 }
 }
 
 
 .search-item label {
 .search-item label {
-  color: #666;
-  font-size: 14px;
-  width: 90px;
+  font-size: 12px;
+  color: #333;
   white-space: nowrap;
   white-space: nowrap;
-  text-align: right;
 }
 }
 
 
-.search-input {
-  width: 180px;
-  height: 32px;
-  border: 1px solid #ddd;
+.search-input, .search-select {
+  padding: 6px 8px;
+  border: 1px solid #d9d9d9;
   border-radius: 4px;
   border-radius: 4px;
-  padding: 0 8px;
-  font-size: 14px;
+  font-size: 12px;
+  width: 120px;
 }
 }
 
 
-.search-select {
-  width: 160px;
-  height: 32px;
-  border: 1px solid #ddd;
-  border-radius: 4px;
-  padding: 0 8px;
-  font-size: 14px;
-  background: white;
+.search-input:focus, .search-select:focus {
+  outline: none;
+  border-color: #1890ff;
 }
 }
 
 
 .search-actions {
 .search-actions {
-  margin-left: auto;
   display: flex;
   display: flex;
-  gap: 10px;
+  gap: 8px;
 }
 }
 
 
-.search-btn, .reset-btn {
-  padding: 6px 16px;
+.search-btn {
+  background: #1890ff;
+  color: white;
   border: none;
   border: none;
-  border-radius: 4px;
+  padding: 4px 8px;
+  border-radius: 3px;
+  font-size: 11px;
   cursor: pointer;
   cursor: pointer;
-  font-size: 14px;
-  height: 32px;
 }
 }
 
 
-.search-btn {
-  background: #007bff;
-  color: white;
+.search-btn:hover {
+  background: #40a9ff;
 }
 }
 
 
 .reset-btn {
 .reset-btn {
-  background: #6c757d;
+  background: #ff7875;
   color: white;
   color: white;
+  border: none;
+  padding: 4px 8px;
+  border-radius: 3px;
+  font-size: 11px;
+  cursor: pointer;
+  height: 24px;
+  display: flex;
+  align-items: center;
+}
+
+.reset-btn:hover {
+  background: #ff9c99;
 }
 }
 
 
-/* 操作按钮区域样式 */
+/* 操作区域 */
 .action-section {
 .action-section {
   background: white;
   background: white;
-  padding: 12px 20px 12px 20px;
+  padding: 12px 16px;
   border-bottom: 1px solid #e0e0e0;
   border-bottom: 1px solid #e0e0e0;
 }
 }
 
 
-.action-section .action-buttons {
+.action-buttons {
   display: flex;
   display: flex;
-  gap: 10px;
-  justify-content: flex-start;
-  align-items: center;
-  margin: 0;
-  padding: 0;
+  gap: 6px;
 }
 }
 
 
 .action-btn {
 .action-btn {
-  padding: 6px 16px;
+  padding: 4px 8px;
   border: none;
   border: none;
-  border-radius: 4px;
+  border-radius: 3px;
+  font-size: 11px;
   cursor: pointer;
   cursor: pointer;
-  font-size: 14px;
-  height: 32px;
-  font-weight: 500;
+  transition: all 0.2s;
 }
 }
 
 
 .action-btn.primary {
 .action-btn.primary {
-  background: #007bff;
+  background: #1890ff;
   color: white;
   color: white;
 }
 }
 
 
+.action-btn.primary:hover {
+  background: #40a9ff;
+}
+
 .action-btn.success {
 .action-btn.success {
-  background: #28a745;
+  background: #52c41a;
   color: white;
   color: white;
 }
 }
 
 
+.action-btn.success:hover {
+  background: #73d13d;
+}
+
 .action-btn.secondary {
 .action-btn.secondary {
-  background: #6c757d;
+  background: #52c41a;
   color: white;
   color: white;
 }
 }
 
 
-/* 表格区域样式 */
+.action-btn.secondary:hover {
+  background: #73d13d;
+}
+
+/* 表格区域 */
 .table-section {
 .table-section {
   background: white;
   background: white;
-  margin-bottom: 0;
+  margin: 16px;
+  border-radius: 6px;
+  overflow: hidden;
+  box-shadow: 0 2px 8px rgba(0,0,0,0.1);
 }
 }
 
 
 .table-header {
 .table-header {
-  padding: 10px 20px;
-  border-bottom: 1px solid #eee;
+  padding: 8px 16px;
+  background: #fafafa;
+  border-bottom: 1px solid #e0e0e0;
   display: flex;
   display: flex;
   justify-content: flex-end;
   justify-content: flex-end;
 }
 }
 
 
 .table-controls {
 .table-controls {
   display: flex;
   display: flex;
-  gap: 5px;
+  gap: 4px;
 }
 }
 
 
 .control-btn {
 .control-btn {
-  padding: 4px 8px;
-  border: 1px solid #ddd;
   background: white;
   background: white;
-  border-radius: 4px;
+  border: 1px solid #d9d9d9;
+  border-radius: 3px;
+  padding: 4px 8px;
+  font-size: 11px;
   cursor: pointer;
   cursor: pointer;
-  font-size: 12px;
+  transition: all 0.2s;
+}
+
+.control-btn:hover {
+  background: #f0f8ff;
+  border-color: #1890ff;
+  color: #1890ff;
 }
 }
 
 
 .table-container {
 .table-container {
@@ -1077,31 +1096,29 @@ onMounted(() => {
 .data-table {
 .data-table {
   width: 100%;
   width: 100%;
   border-collapse: collapse;
   border-collapse: collapse;
-  font-size: 14px;
 }
 }
 
 
-.data-table th {
-  background: #f8f9fa;
-  border: 1px solid #ddd;
-  padding: 12px 8px;
+.data-table th,
+.data-table td {
+  padding: 8px 12px;
   text-align: left;
   text-align: left;
+  border-bottom: 1px solid #f0f0f0;
+  font-size: 12px;
+}
+
+.data-table th {
+  background: #fafafa;
   font-weight: 600;
   font-weight: 600;
   color: #333;
   color: #333;
   white-space: nowrap;
   white-space: nowrap;
 }
 }
 
 
-.data-table td {
-  border: 1px solid #ddd;
-  padding: 12px 8px;
-  vertical-align: middle;
-}
-
-.data-table tbody tr:nth-child(even) {
-  background: #f8f9fa;
+.data-table th.action-header {
+  text-align: center;
 }
 }
 
 
 .data-table tbody tr:hover {
 .data-table tbody tr:hover {
-  background: #e9ecef;
+  background: #f5f7fa;
 }
 }
 
 
 .sortable {
 .sortable {
@@ -1109,26 +1126,31 @@ onMounted(() => {
   user-select: none;
   user-select: none;
 }
 }
 
 
+.table-checkbox {
+  width: 14px;
+  height: 14px;
+  cursor: pointer;
+}
+
 .select-all, .row-select {
 .select-all, .row-select {
   margin: 0;
   margin: 0;
 }
 }
 
 
 .status-badge, .severity-badge {
 .status-badge, .severity-badge {
-  padding: 2px 8px;
-  border-radius: 12px;
-  font-size: 12px;
-  font-weight: 500;
+  padding: 2px 6px;
+  border-radius: 3px;
+  font-size: 10px;
   display: inline-block;
   display: inline-block;
 }
 }
 
 
 .status-badge.pending {
 .status-badge.pending {
-  background: #fff3cd;
-  color: #856404;
+  background: #fff7e6;
+  color: #fa8c16;
 }
 }
 
 
 .status-badge.processing {
 .status-badge.processing {
-  background: #d1ecf1;
-  color: #0c5460;
+  background: #e6f7ff;
+  color: #1890ff;
 }
 }
 
 
 .status-badge.resolved {
 .status-badge.resolved {
@@ -1200,24 +1222,24 @@ onMounted(() => {
 /* 表格内操作按钮容器 */
 /* 表格内操作按钮容器 */
 .table-actions {
 .table-actions {
   display: flex;
   display: flex;
-  gap: 8px;
+  gap: 4px;
   justify-content: center;
   justify-content: center;
   align-items: center;
   align-items: center;
   flex-wrap: wrap;
   flex-wrap: wrap;
   padding: 0 4px;
   padding: 0 4px;
 }
 }
 
 
-/* 操作按钮样式 */
-.action-btn {
-  padding: 4px 8px;
-  font-size: 12px;
-  border-radius: 4px;
-  font-weight: 500;
-  min-width: 60px;
-  height: 28px;
+/* 表格内操作按钮样式 */
+.table-actions .action-btn {
+  padding: 2px 6px;
+  margin-right: 4px;
+  border: none;
+  border-radius: 3px;
+  font-size: 10px;
+  cursor: pointer;
   display: inline-flex;
   display: inline-flex;
   align-items: center;
   align-items: center;
-  justify-content: center;
+  gap: 2px;
   white-space: nowrap;
   white-space: nowrap;
 }
 }
 
 
@@ -1228,49 +1250,52 @@ onMounted(() => {
 
 
 /* 分页区域样式 */
 /* 分页区域样式 */
 .pagination-section {
 .pagination-section {
-  background: white;
-  padding: 12px 20px;
-  border-top: 1px solid #e0e0e0;
   display: flex;
   display: flex;
   justify-content: space-between;
   justify-content: space-between;
   align-items: center;
   align-items: center;
+  padding: 8px 16px;
+  background: #fafafa;
+  border-top: 1px solid #e0e0e0;
 }
 }
 
 
 .pagination-info {
 .pagination-info {
-  display: flex;
-  align-items: center;
-  gap: 10px;
-  font-size: 14px;
+  font-size: 12px;
   color: #666;
   color: #666;
 }
 }
 
 
 .page-size-select {
 .page-size-select {
-  height: 28px;
-  border: 1px solid #ddd;
+  padding: 4px 8px;
+  border: 1px solid #d9d9d9;
   border-radius: 4px;
   border-radius: 4px;
-  padding: 0 8px;
-  font-size: 14px;
+  font-size: 12px;
+  background: white;
+  cursor: pointer;
 }
 }
 
 
 .pagination-controls {
 .pagination-controls {
   display: flex;
   display: flex;
   align-items: center;
   align-items: center;
   gap: 8px;
   gap: 8px;
-  font-size: 14px;
 }
 }
 
 
 .page-btn {
 .page-btn {
-  padding: 4px 12px;
-  border: 1px solid #ddd;
+  padding: 4px 8px;
+  border: 1px solid #d9d9d9;
+  border-radius: 3px;
   background: white;
   background: white;
-  border-radius: 4px;
   cursor: pointer;
   cursor: pointer;
-  font-size: 14px;
+  font-size: 11px;
+  transition: all 0.2s;
+}
+
+.page-btn:hover:not(:disabled) {
+  background: #f0f8ff;
+  border-color: #1890ff;
+  color: #1890ff;
 }
 }
 
 
 .page-btn:disabled {
 .page-btn:disabled {
-  background: #f8f9fa;
-  color: #6c757d;
+  opacity: 0.5;
   cursor: not-allowed;
   cursor: not-allowed;
 }
 }
 
 

@@ -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="pagination-info">
-          共 {{ pagination.total }} 条，{{ pagination.pageSize }}/页
+      <div class="table-footer">
+        <div class="pagination-left">
+          <div class="pagination-info">
+            共 {{ 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>
-          <button 
-            v-for="page in getPageNumbers()" 
-            :key="page"
-            @click="handlePageChange(page)"
-            :class="['page-btn', { active: page === pagination.pageNum }]"
+        <div class="pagination-container">
+          <button
+            @click="handlePrevPage"
+            :disabled="pagination.pageNum <= 1"
+            class="pagination-btn prev-btn"
           >
           >
-            {{ page }}
+            上一页
+          </button>
+          <div class="pagination-pages">
+            <button 
+              v-for="page in getPageNumbers()" 
+              :key="page"
+              @click="handlePageChange(page)"
+              :class="['page-number', { active: page === pagination.pageNum }]"
+            >
+              {{ page }}
+            </button>
+          </div>
+          <button
+            @click="handleNextPage"
+            :disabled="pagination.pageNum >= getTotalPages()"
+            class="pagination-btn next-btn"
+          >
+            下一页
           </button>
           </button>
-          <button @click="handleNextPage" :disabled="pagination.pageNum >= getTotalPages()" class="page-btn">›</button>
-        </div>
-        <div class="pagination-jump">
-          前往
-          <input
-            v-model="jumpPage"
-            class="jump-input"
-            @keyup.enter="handleJumpPage"
-          />
-          页
         </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);
-
-  .search-row {
-    display: flex;
-    align-items: center;
-    gap: 24px;
-    flex-wrap: wrap;
-    margin-bottom: 12px;
-
-    &:last-child {
-      margin-bottom: 0;
-    }
+  padding: 16px;
+  border-bottom: 1px solid #e0e0e0;
+}
 
 
-    .search-item {
-      display: flex;
-      align-items: center;
-      gap: 8px;
+.search-row {
+  display: flex;
+  gap: 16px;
+  align-items: center;
+  flex-wrap: wrap;
+  margin-bottom: 12px;
+}
 
 
-      label {
-        font-size: 14px;
-        color: #333;
-        white-space: nowrap;
-        min-width: 80px;
-      }
+.search-row:last-child {
+  margin-bottom: 0;
+}
 
 
-      .search-input {
-        padding: 8px 12px;
-        border: 1px solid #ddd;
-        border-radius: 4px;
-        font-size: 14px;
-        width: 160px;
-        transition: border-color 0.3s;
+.search-item {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+}
 
 
-        &:focus {
-          outline: none;
-          border-color: #409eff;
-        }
-      }
+.search-item label {
+  font-size: 12px;
+  color: #333;
+  white-space: nowrap;
+}
 
 
-      .search-select {
-        padding: 8px 12px;
-        border: 1px solid #ddd;
-        border-radius: 4px;
-        font-size: 14px;
-        width: 120px;
-        background: white;
-        cursor: pointer;
-        transition: border-color 0.3s;
-
-        &:focus {
-          outline: none;
-          border-color: #409eff;
-        }
-      }
-    }
+.search-input, .search-select {
+  padding: 6px 8px;
+  border: 1px solid #d9d9d9;
+  border-radius: 4px;
+  font-size: 12px;
+  width: 120px;
+}
 
 
-    .search-actions {
-      margin-left: auto;
-      display: flex;
-      gap: 8px;
+.search-input:focus, .search-select:focus {
+  outline: none;
+  border-color: #1890ff;
+}
 
 
-      .search-btn, .reset-btn {
-        padding: 8px 16px;
-        border: 1px solid #ddd;
-        border-radius: 4px;
-        font-size: 14px;
-        cursor: pointer;
-        transition: all 0.3s;
-        background: white;
+.search-actions {
+  display: flex;
+  gap: 8px;
+}
 
 
-        &:hover {
-          background: #f5f7fa;
-        }
+.search-btn {
+  background: #1890ff;
+  color: white;
+  border: none;
+  padding: 4px 8px;
+  border-radius: 3px;
+  font-size: 11px;
+  cursor: pointer;
+}
 
 
-        &:disabled {
-          opacity: 0.6;
-          cursor: not-allowed;
-        }
-      }
+.search-btn:hover {
+  background: #40a9ff;
+}
 
 
-      .search-btn {
-        background: #409eff;
-        color: white;
-        border-color: #409eff;
+.reset-btn {
+  background: #ff7875;
+  color: white;
+  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);
-
-  .action-buttons {
-    display: flex;
-    gap: 12px;
-
-    .action-btn {
-      padding: 8px 16px;
-      border: 1px solid #ddd;
-      border-radius: 4px;
-      font-size: 14px;
-      cursor: pointer;
-      transition: all 0.3s;
-      background: white;
-
-      &:hover {
-        background: #f5f7fa;
-      }
+  padding: 12px 16px;
+  border-bottom: 1px solid #e0e0e0;
+}
 
 
-      &:disabled {
-        opacity: 0.6;
-        cursor: not-allowed;
-      }
+.action-buttons {
+  display: flex;
+  gap: 6px;
+}
 
 
-      &.primary {
-        background: #409eff;
-        color: white;
-        border-color: #409eff;
+.action-btn {
+  padding: 4px 8px;
+  border: none;
+  border-radius: 3px;
+  font-size: 11px;
+  cursor: pointer;
+  transition: all 0.2s;
+}
 
 
-        &:hover {
-          background: #66b1ff;
-        }
-      }
+.action-btn.primary {
+  background: #1890ff;
+  color: white;
+}
 
 
-      &.secondary {
-        background: #67c23a;
-        color: white;
-        border-color: #67c23a;
+.action-btn.primary:hover {
+  background: #40a9ff;
+}
 
 
-        &:hover {
-          background: #85ce61;
-        }
-      }
+.action-btn.secondary {
+  background: #52c41a;
+  color: white;
+}
 
 
-      &.danger {
-        background: #f56c6c;
-        color: white;
-        border-color: #f56c6c;
+.action-btn.secondary:hover {
+  background: #73d13d;
+}
 
 
-        &:hover {
-          background: #f78989;
-        }
-      }
-    }
-  }
+.action-btn.danger {
+  background: #ff4d4f;
+  color: white;
 }
 }
 
 
 .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 {
-    display: flex;
-    justify-content: flex-end;
-    align-items: center;
-    padding: 12px 20px;
-    border-bottom: 1px solid #f0f0f0;
-    background: #fafafa;
+.table-header {
+  padding: 8px 16px;
+  background: #fafafa;
+  border-bottom: 1px solid #e0e0e0;
+  display: flex;
+  justify-content: flex-end;
+}
 
 
-    .table-controls {
-      display: flex;
-      gap: 8px;
-
-      .control-btn {
-        padding: 6px 12px;
-        border: 1px solid #ddd;
-        border-radius: 4px;
-        background: white;
-        cursor: pointer;
-        font-size: 14px;
-        transition: all 0.3s;
+.table-controls {
+  display: flex;
+  gap: 4px;
+}
 
 
-        &:hover {
-          background: #f5f7fa;
-          border-color: #409eff;
-        }
-      }
-    }
-  }
+.control-btn {
+  background: white;
+  border: 1px solid #d9d9d9;
+  border-radius: 3px;
+  padding: 4px 8px;
+  font-size: 11px;
+  cursor: pointer;
+  transition: all 0.2s;
+}
+
+.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 {
-      width: 100%;
-      border-collapse: collapse;
-      font-size: 14px;
+.data-table {
+  width: 100%;
+  border-collapse: collapse;
+  font-size: 12px;
+}
 
 
-      thead {
-        background: #fafafa;
+.data-table th,
+.data-table td {
+  padding: 8px 12px;
+  text-align: left;
+  border-bottom: 1px solid #f0f0f0;
+  font-size: 12px;
+}
 
 
-        th {
-          padding: 12px 16px;
-          text-align: left;
-          font-weight: 500;
-          color: #333;
-          border-bottom: 1px solid #e0e0e0;
-          white-space: nowrap;
-        }
-      }
+.data-table th {
+  background: #fafafa;
+  font-weight: 600;
+  color: #333;
+  white-space: nowrap;
+}
 
 
-      tbody {
-        tr {
-          transition: background-color 0.3s;
+.data-table tbody tr:hover {
+  background: #f5f7fa;
+}
 
 
-          &:hover {
-            background: #f5f7fa;
-          }
+/* 表格复选框 */
+.table-checkbox {
+  width: 14px;
+  height: 14px;
+}
 
 
-          &:nth-child(even) {
-            background: #fafafa;
-          }
+/* 表格操作按钮 */
+.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;
+}
 
 
-          &:nth-child(even):hover {
-            background: #f0f2f5;
-          }
+.table-btn.view {
+  background: #1890ff;
+  color: white;
+}
 
 
-          td {
-            padding: 12px 16px;
-            border-bottom: 1px solid #f0f0f0;
-            vertical-align: middle;
+.table-btn.edit {
+  background: #1890ff;
+  color: white;
+}
 
 
-            &.empty-data {
-              text-align: center;
-              color: #999;
-              font-style: italic;
-              padding: 40px;
-            }
-          }
-        }
-      }
-    }
-  }
+.table-btn.delete {
+  background: #ff4d4f;
+  color: white;
+}
 
 
-  .pagination-wrapper {
-    display: flex;
-    justify-content: space-between;
-    align-items: center;
-    padding: 12px 20px;
-    border-top: 1px solid #f0f0f0;
-    background: #fafafa;
-
-    .pagination-info {
-      font-size: 14px;
-      color: #666;
-    }
+/* 分页样式 */
+.table-footer {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: 8px 16px;
+  background: #f8f9fa;
+  border-top: 1px solid #e0e0e0;
+}
 
 
-    .pagination-controls {
-      display: flex;
-      gap: 4px;
-      align-items: center;
+.pagination-left {
+  display: flex;
+  align-items: center;
+  gap: 16px;
+}
 
 
-      .page-btn {
-        padding: 6px 12px;
-        border: 1px solid #ddd;
-        border-radius: 4px;
-        background: white;
-        cursor: pointer;
-        font-size: 14px;
-        transition: all 0.3s;
-        min-width: 32px;
+.pagination-info {
+  font-size: 12px;
+  color: #666;
+}
 
 
-        &:hover:not(:disabled) {
-          background: #f5f7fa;
-          border-color: #409eff;
-        }
+.page-size-selector {
+  display: flex;
+  align-items: center;
+  gap: 4px;
+  font-size: 11px;
+  color: #666;
+}
 
 
-        &:disabled {
-          opacity: 0.5;
-          cursor: not-allowed;
-        }
+.page-size-select {
+  padding: 2px 4px;
+  border: 1px solid #d9d9d9;
+  border-radius: 3px;
+  font-size: 10px;
+  background: white;
+}
 
 
-        &.active {
-          background: #409eff;
-          color: white;
-          border-color: #409eff;
-        }
-      }
-    }
+.pagination-container {
+  display: flex;
+  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);
+}
 
 
-    .pagination-jump {
-      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;
-        text-align: center;
-        font-size: 14px;
+.pagination-btn {
+  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;
+  height: 20px;
+}
 
 
-        &:focus {
-          outline: none;
-          border-color: #409eff;
-        }
-      }
-    }
-  }
+.pagination-btn:hover:not(:disabled) {
+  background: #e9ecef;
+  color: #495057;
+}
+
+.pagination-btn:disabled {
+  opacity: 0.5;
+  cursor: not-allowed;
+}
+
+.pagination-pages {
+  display: flex;
+}
+
+.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;
+  height: 20px;
+}
+
+.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>

 <template>
 <template>
   <div class="log-management">
   <div class="log-management">
-    <!-- 页面标题 -->
-    <div class="page-header">
-      <h2>日志管理</h2>
-      <p>系统操作日志查询与管理</p>
-    </div>
-
-    <!-- 搜索表单 -->
-    <el-card class="search-card" shadow="never">
-      <el-form :model="searchForm" :inline="true" class="search-form">
-        <el-form-item label="日志类型">
-          <el-select v-model="searchForm.logType" placeholder="请选择日志类型" clearable style="width: 200px">
-            <el-option label="操作日志" value="0" />
-            <el-option label="异常日志" value="1" />
-            <el-option label="登录日志" value="2" />
-          </el-select>
-        </el-form-item>
-        
-        <el-form-item label="用户名">
-          <el-input
-            v-model="searchForm.username"
+    <!-- 搜索筛选区域 -->
+    <div class="search-section">
+      <div class="search-row">
+        <div class="search-item">
+          <label>日志类型：</label>
+          <select v-model="searchForm.logType" class="search-select">
+            <option value="">全部</option>
+            <option value="0">操作日志</option>
+            <option value="1">异常日志</option>
+            <option value="2">登录日志</option>
+          </select>
+        </div>
+        <div class="search-item">
+          <label>用户名：</label>
+          <input 
+            v-model="searchForm.username" 
+            type="text" 
             placeholder="请输入用户名"
             placeholder="请输入用户名"
-            clearable
-            style="width: 200px"
+            class="search-input"
           />
           />
-        </el-form-item>
-        
-        <el-form-item label="操作模块">
-          <el-input
-            v-model="searchForm.module"
+        </div>
+        <div class="search-item">
+          <label>操作模块：</label>
+          <input 
+            v-model="searchForm.module" 
+            type="text" 
             placeholder="请输入操作模块"
             placeholder="请输入操作模块"
-            clearable
-            style="width: 200px"
+            class="search-input"
           />
           />
-        </el-form-item>
-        
-        <el-form-item label="操作结果">
-          <el-select v-model="searchForm.status" placeholder="请选择操作结果" clearable style="width: 200px">
-            <el-option label="成功" :value="1" />
-            <el-option label="失败" :value="0" />
-          </el-select>
-        </el-form-item>
-        
-        <el-form-item label="时间范围">
-          <el-date-picker
-            v-model="dateRange"
-            type="datetimerange"
-            range-separator="至"
-            start-placeholder="开始时间"
-            end-placeholder="结束时间"
-            format="YYYY-MM-DD HH:mm:ss"
-            value-format="YYYY-MM-DD HH:mm:ss"
-            @change="handleDateRangeChange"
-            style="width: 350px"
+        </div>
+        <div class="search-item">
+          <label>操作结果：</label>
+          <select v-model="searchForm.status" class="search-select">
+            <option value="">全部</option>
+            <option value="1">成功</option>
+            <option value="0">失败</option>
+          </select>
+        </div>
+        <div class="search-item">
+          <label>时间范围：</label>
+          <input 
+            v-model="dateRangeText" 
+            type="text" 
+            placeholder="请选择时间范围"
+            class="search-input"
+            @click="showDatePicker = true"
+            readonly
           />
           />
-        </el-form-item>
-        
-        <el-form-item>
-          <el-button type="primary" @click="handleSearch" :loading="loading">
-            <el-icon><Search /></el-icon>
-            搜索
-          </el-button>
-          <el-button @click="handleReset">
-            <el-icon><Refresh /></el-icon>
-            重置
-          </el-button>
-        </el-form-item>
-      </el-form>
-    </el-card>
-
-    <!-- 操作按钮 -->
-    <el-card class="toolbar-card" shadow="never">
-      <div class="toolbar">
-        <div class="toolbar-left">
-          <el-button
-            type="danger"
-            :disabled="selectedLogs.length === 0"
-            @click="handleBatchDelete"
-          >
-            <el-icon><Delete /></el-icon>
-            批量删除
-          </el-button>
-          <el-button type="warning" @click="handleCleanExpired">
-            <el-icon><Delete /></el-icon>
-            清理过期日志
-          </el-button>
-          <el-button type="info" @click="handleExport">
-            <el-icon><Download /></el-icon>
-            导出日志
-          </el-button>
         </div>
         </div>
-        <div class="toolbar-right">
-          <el-button @click="handleRefresh" :loading="loading">
-            <el-icon><Refresh /></el-icon>
-            刷新
-          </el-button>
+        <div class="search-actions">
+          <button @click="handleSearch" class="search-btn">🔍 搜索</button>
+          <button @click="handleReset" class="reset-btn">🔄 重置</button>
         </div>
         </div>
       </div>
       </div>
-    </el-card>
+    </div>
+
+    <!-- 操作按钮区域 -->
+    <div class="action-section">
+      <div class="action-buttons">
+        <button 
+          @click="handleBatchDelete" 
+          :disabled="selectedLogs.length === 0"
+          class="action-btn danger"
+        >
+          🗑️ 批量删除
+        </button>
+        <button @click="handleCleanExpired" class="action-btn warning">
+          🧹 清理过期日志
+        </button>
+        <button @click="handleExport" class="action-btn info">
+          📋 导出日志
+        </button>
+      </div>
+    </div>
 
 
-    <!-- 日志列表 -->
-    <el-card class="table-card" shadow="never">
+    <!-- 数据表格 -->
+    <div class="table-section">
+      <div class="table-header">
+        <div class="table-controls">
+          <button @click="handleTableSearch" class="control-btn" title="搜索">🔍</button>
+          <button @click="handleTableRefresh" class="control-btn" title="刷新">🔄</button>
+          <button @click="handleTableExport" class="control-btn" title="导出">📋</button>
+          <button @click="handleTableViewToggle" class="control-btn" title="视图切换">⊞</button>
+        </div>
+      </div>
       
       
-      <el-table
-        v-loading="loading"
-        :data="logList"
-        @selection-change="handleSelectionChange"
-        stripe
-        border
-        style="width: 100%"
-      >
-        <el-table-column type="selection" width="50" align="center" />
-        
-        <el-table-column prop="logId" label="日志ID" width="80" align="center" />
-        
-        <el-table-column prop="logTypeText" label="日志类型" width="100" align="center">
-          <template #default="{ row }">
-            <el-tag :type="getLogTypeTagType(row.logType)" size="small">
-              {{ row.logTypeText }}
-            </el-tag>
-          </template>
-        </el-table-column>
-        
-        <el-table-column prop="username" label="用户名" width="100" align="center" />
-        
-        <el-table-column prop="module" label="操作模块" width="120" align="center" />
-        
-        <el-table-column prop="operation" label="操作内容" min-width="180" show-overflow-tooltip />
-        
-        <el-table-column prop="ip" label="IP地址" width="120" align="center" />
-        
-        <el-table-column prop="logTime" label="操作时间" width="160" align="center">
-          <template #default="{ row }">
-            {{ formatDate(row.logTime) }}
-          </template>
-        </el-table-column>
-        
-        <el-table-column prop="statusText" label="操作结果" width="100" align="center">
-          <template #default="{ row }">
-            <el-tag :type="row.status === 1 ? 'success' : 'danger'" size="small">
-              {{ row.statusText }}
-            </el-tag>
-          </template>
-        </el-table-column>
-        
-        <el-table-column label="操作" width="140" fixed="right" align="center">
-          <template #default="{ row }">
-            <el-button
-              type="primary"
-              size="small"
-              @click="handleViewDetail(row)"
-              link
-            >
-              详情
-            </el-button>
-            <el-button
-              type="danger"
-              size="small"
-              @click="handleDelete(row)"
-              link
-            >
-              删除
-            </el-button>
-          </template>
-        </el-table-column>
-      </el-table>
-
-      <!-- 分页 -->
-      <div class="pagination-container">
-        <el-pagination
-          v-model:current-page="pagination.pageNum"
-          v-model:page-size="pagination.pageSize"
-          :page-sizes="[10, 20, 50, 100]"
-          :total="pagination.total"
-          layout="total, sizes, prev, pager, next, jumper"
-          @size-change="handleSizeChange"
-          @current-change="handleCurrentChange"
-        />
+      <div class="table-container">
+        <table class="data-table">
+          <thead>
+            <tr>
+              <th class="checkbox-col">
+                <input 
+                  type="checkbox" 
+                  :checked="selectAll" 
+                  @change="handleSelectAll"
+                  class="table-checkbox"
+                />
+              </th>
+              <th>日志ID</th>
+              <th>日志类型</th>
+              <th>用户名</th>
+              <th>操作模块</th>
+              <th>操作内容</th>
+              <th>IP地址</th>
+              <th>操作时间</th>
+              <th>操作结果</th>
+              <th>操作</th>
+            </tr>
+          </thead>
+          <tbody>
+            <tr v-for="log in logList" :key="log.logId">
+              <td class="checkbox-col">
+                <input 
+                  type="checkbox" 
+                  :checked="selectedLogs.includes(log.logId)"
+                  @change="handleSelectLog(log.logId)"
+                  class="table-checkbox"
+                />
+              </td>
+              <td>{{ log.logId }}</td>
+              <td>
+                <span :class="['status-badge', getLogTypeClass(log.logType)]">
+                  {{ log.logTypeText }}
+                </span>
+              </td>
+              <td>{{ log.username }}</td>
+              <td>{{ log.module }}</td>
+              <td class="operation-cell" :title="log.operation">{{ log.operation }}</td>
+              <td>{{ log.ip }}</td>
+              <td>{{ formatDate(log.logTime) }}</td>
+              <td>
+                <span :class="['status-badge', log.status === 1 ? 'success' : 'error']">
+                  {{ log.statusText }}
+                </span>
+              </td>
+              <td class="action-col">
+                <button @click="handleViewDetail(log)" class="action-btn primary" title="查看">👁️</button>
+                <button @click="handleDelete(log)" class="action-btn danger" title="删除">🗑️</button>
+              </td>
+            </tr>
+          </tbody>
+        </table>
+      </div>
+    </div>
+
+    <!-- 分页 -->
+    <div class="pagination-section">
+      <div class="pagination-info">
+        共 {{ pagination.total }} 条记录，第 {{ pagination.pageNum }} / {{ Math.ceil(pagination.total / pagination.pageSize) }} 页
       </div>
       </div>
-    </el-card>
+      <div class="pagination-controls">
+        <button 
+          @click="handlePrevPage" 
+          :disabled="pagination.pageNum <= 1"
+          class="pagination-btn"
+        >
+          ← 上一页
+        </button>
+        <span class="page-info">{{ pagination.pageNum }} / {{ Math.ceil(pagination.total / pagination.pageSize) }}</span>
+        <button 
+          @click="handleNextPage" 
+          :disabled="pagination.pageNum >= Math.ceil(pagination.total / pagination.pageSize)"
+          class="pagination-btn"
+        >
+          下一页 →
+        </button>
+        <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>
 
 
     <!-- 日志详情对话框 -->
     <!-- 日志详情对话框 -->
-    <el-dialog
-      v-model="detailDialogVisible"
-      title="日志详情"
-      width="800px"
-      :close-on-click-modal="false"
-    >
-      <div v-if="logDetail" class="log-detail">
-        <el-descriptions :column="2" border>
-          <el-descriptions-item label="日志ID">
-            {{ logDetail.logId }}
-          </el-descriptions-item>
-          <el-descriptions-item label="日志类型">
-            <el-tag :type="getLogTypeTagType(logDetail.logType)">
-              {{ logDetail.logTypeText }}
-            </el-tag>
-          </el-descriptions-item>
-          <el-descriptions-item label="用户名">
-            {{ logDetail.username }}
-          </el-descriptions-item>
-          <el-descriptions-item label="用户ID">
-            {{ logDetail.userId }}
-          </el-descriptions-item>
-          <el-descriptions-item label="操作模块">
-            {{ logDetail.module }}
-          </el-descriptions-item>
-          <el-descriptions-item label="操作内容">
-            {{ logDetail.operation }}
-          </el-descriptions-item>
-          <el-descriptions-item label="IP地址">
-            {{ logDetail.ip }}
-          </el-descriptions-item>
-          <el-descriptions-item label="操作时间">
-            {{ formatDate(logDetail.logTime) }}
-          </el-descriptions-item>
-          <el-descriptions-item label="操作结果">
-            <el-tag :type="logDetail.status === 1 ? 'success' : 'danger'">
-              {{ logDetail.statusText }}
-            </el-tag>
-          </el-descriptions-item>
-          <el-descriptions-item label="错误信息" v-if="logDetail.errorMsg">
-            {{ logDetail.errorMsg }}
-          </el-descriptions-item>
-        </el-descriptions>
-        
-        <div v-if="logDetail.requestParam" class="request-param">
-          <h4>请求参数</h4>
-          <el-input
-            v-model="logDetail.requestParam"
-            type="textarea"
-            :rows="6"
-            readonly
-            placeholder="无请求参数"
-          />
+    <div v-if="detailDialogVisible" class="dialog-overlay" @click="closeDetailDialog">
+      <div class="dialog-content" @click.stop>
+        <div class="dialog-header">
+          <h3>日志详情</h3>
+          <button @click="closeDetailDialog" class="close-btn">×</button>
+        </div>
+        <div class="dialog-body">
+          <div class="log-detail">
+            <div class="detail-grid">
+              <div class="detail-item">
+                <label>日志ID：</label>
+                <span>{{ logDetail?.logId }}</span>
+              </div>
+              <div class="detail-item">
+                <label>日志类型：</label>
+                <span :class="['status-badge', getLogTypeClass(logDetail?.logType || '')]">
+                  {{ logDetail?.logTypeText }}
+                </span>
+              </div>
+              <div class="detail-item">
+                <label>用户ID：</label>
+                <span>{{ logDetail?.userId }}</span>
+              </div>
+              <div class="detail-item">
+                <label>用户名：</label>
+                <span>{{ logDetail?.username }}</span>
+              </div>
+              <div class="detail-item">
+                <label>操作模块：</label>
+                <span>{{ logDetail?.module }}</span>
+              </div>
+              <div class="detail-item">
+                <label>操作内容：</label>
+                <span>{{ logDetail?.operation }}</span>
+              </div>
+              <div class="detail-item">
+                <label>IP地址：</label>
+                <span>{{ logDetail?.ip }}</span>
+              </div>
+              <div class="detail-item">
+                <label>操作时间：</label>
+                <span>{{ formatDate(logDetail?.logTime || '') }}</span>
+              </div>
+              <div class="detail-item">
+                <label>操作结果：</label>
+                <span :class="['status-badge', logDetail?.status === 1 ? 'success' : 'error']">
+                  {{ logDetail?.statusText }}
+                </span>
+              </div>
+              <div v-if="logDetail?.errorMsg" class="detail-item full-width">
+                <label>错误信息：</label>
+                <span>{{ logDetail.errorMsg }}</span>
+              </div>
+            </div>
+            
+            <div v-if="logDetail?.requestParam" class="request-param">
+              <h4>请求参数</h4>
+              <textarea 
+                :value="logDetail.requestParam"
+                readonly
+                placeholder="无请求参数"
+                class="request-textarea"
+                rows="6"
+              ></textarea>
+            </div>
+          </div>
+        </div>
+        <div class="dialog-footer">
+          <button @click="closeDetailDialog" class="action-btn primary">关闭</button>
         </div>
         </div>
       </div>
       </div>
-      
-      <template #footer>
-        <el-button @click="detailDialogVisible = false">关闭</el-button>
-      </template>
-    </el-dialog>
+    </div>
 
 
     <!-- 清理过期日志对话框 -->
     <!-- 清理过期日志对话框 -->
-    <el-dialog
-      v-model="cleanDialogVisible"
-      title="清理过期日志"
-      width="400px"
-      :close-on-click-modal="false"
-    >
-      <el-form :model="cleanForm" label-width="100px">
-        <el-form-item label="过期天数">
-          <el-input-number
-            v-model="cleanForm.expireDays"
-            :min="1"
-            :max="365"
-            placeholder="请输入过期天数"
-            style="width: 100%"
-          />
-        </el-form-item>
-        <el-form-item>
-          <el-text type="warning">
-            将删除指定天数之前的所有日志记录，此操作不可恢复！
-          </el-text>
-        </el-form-item>
-      </el-form>
-      
-      <template #footer>
-        <el-button @click="cleanDialogVisible = false">取消</el-button>
-        <el-button type="danger" @click="handleConfirmClean" :loading="cleanLoading">
-          确认清理
-        </el-button>
-      </template>
-    </el-dialog>
+    <div v-if="cleanDialogVisible" class="dialog-overlay" @click="closeCleanDialog">
+      <div class="dialog-content" @click.stop>
+        <div class="dialog-header">
+          <h3>清理过期日志</h3>
+          <button @click="closeCleanDialog" class="close-btn">×</button>
+        </div>
+        <div class="dialog-body">
+          <form @submit.prevent="handleConfirmClean" class="clean-form">
+            <div class="form-group">
+              <label class="required">过期天数：</label>
+              <input 
+                v-model.number="cleanForm.expireDays"
+                type="number"
+                min="1"
+                max="365"
+                placeholder="请输入过期天数"
+                class="form-input"
+                required
+              />
+            </div>
+            <div class="warning-text">
+              ⚠️ 将删除指定天数之前的所有日志记录，此操作不可恢复！
+            </div>
+          </form>
+        </div>
+        <div class="dialog-footer">
+          <button @click="closeCleanDialog" class="action-btn">取消</button>
+          <button @click="handleConfirmClean" :disabled="cleanLoading" class="action-btn danger">
+            {{ cleanLoading ? '清理中...' : '确认清理' }}
+          </button>
+        </div>
+      </div>
+    </div>
   </div>
   </div>
 </template>
 </template>
 
 
@@ -286,12 +296,15 @@ import { formatDate } from '@/utils/index'
 // 响应式数据
 // 响应式数据
 const loading = ref(false)
 const loading = ref(false)
 const logList = ref<Log[]>([])
 const logList = ref<Log[]>([])
-const selectedLogs = ref<Log[]>([])
+const selectedLogs = ref<number[]>([])
 const detailDialogVisible = ref(false)
 const detailDialogVisible = ref(false)
 const logDetail = ref<LogDetail | null>(null)
 const logDetail = ref<LogDetail | null>(null)
 const cleanDialogVisible = ref(false)
 const cleanDialogVisible = ref(false)
 const cleanLoading = ref(false)
 const cleanLoading = ref(false)
 const dateRange = ref<[string, string] | null>(null)
 const dateRange = ref<[string, string] | null>(null)
+const dateRangeText = ref('')
+const showDatePicker = ref(false)
+const selectAll = ref(false)
 
 
 // 搜索表单
 // 搜索表单
 const searchForm = reactive<LogSearchParams>({
 const searchForm = reactive<LogSearchParams>({
@@ -337,6 +350,70 @@ const handleExport = () => {
   ElMessage.info('导出功能开发中...')
   ElMessage.info('导出功能开发中...')
 }
 }
 
 
+// 全选/取消全选
+const handleSelectAll = () => {
+  selectAll.value = !selectAll.value
+  if (selectAll.value) {
+    selectedLogs.value = logList.value.map(log => log.logId)
+  } else {
+    selectedLogs.value = []
+  }
+}
+
+// 选择单个日志
+const handleSelectLog = (logId: number) => {
+  const index = selectedLogs.value.indexOf(logId)
+  if (index > -1) {
+    selectedLogs.value.splice(index, 1)
+  } else {
+    selectedLogs.value.push(logId)
+  }
+  selectAll.value = selectedLogs.value.length === logList.value.length
+}
+
+// 获取日志类型样式类
+const getLogTypeClass = (logType: string) => {
+  switch (logType) {
+    case '0': return 'info'
+    case '1': return 'warning'
+    case '2': return 'success'
+    default: return 'default'
+  }
+}
+
+// 表格控制按钮
+const handleTableSearch = () => {
+  handleSearch()
+}
+
+const handleTableRefresh = () => {
+  handleRefresh()
+}
+
+const handleTableExport = () => {
+  handleExport()
+}
+
+const handleTableViewToggle = () => {
+  ElMessage.info('视图切换功能开发中...')
+}
+
+// 分页控制
+const handlePrevPage = () => {
+  if (pagination.pageNum > 1) {
+    pagination.pageNum--
+    getLogList()
+  }
+}
+
+const handleNextPage = () => {
+  const totalPages = Math.ceil(pagination.total / pagination.pageSize)
+  if (pagination.pageNum < totalPages) {
+    pagination.pageNum++
+    getLogList()
+  }
+}
+
 // 获取日志列表
 // 获取日志列表
 const getLogList = async () => {
 const getLogList = async () => {
   try {
   try {
@@ -402,8 +479,9 @@ const handleDateRangeChange = (value: [string, string] | null) => {
 }
 }
 
 
 // 分页大小变化
 // 分页大小变化
-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
   getLogList()
   getLogList()
 }
 }
@@ -416,7 +494,7 @@ const handleCurrentChange = (page: number) => {
 
 
 // 选择变化
 // 选择变化
 const handleSelectionChange = (selection: Log[]) => {
 const handleSelectionChange = (selection: Log[]) => {
-  selectedLogs.value = selection
+  selectedLogs.value = selection.map(log => log.logId)
 }
 }
 
 
 // 查看详情
 // 查看详情
@@ -481,7 +559,7 @@ const handleBatchDelete = async () => {
       }
       }
     )
     )
     
     
-    const logIds = selectedLogs.value.map(log => log.logId)
+    const logIds = selectedLogs.value
     const response = await logApi.deleteLogs(logIds)
     const response = await logApi.deleteLogs(logIds)
     if (response.code === 200) {
     if (response.code === 200) {
       ElMessage.success('批量删除成功')
       ElMessage.success('批量删除成功')
@@ -502,6 +580,16 @@ const handleCleanExpired = () => {
   cleanDialogVisible.value = true
   cleanDialogVisible.value = true
 }
 }
 
 
+// 关闭详情对话框
+const closeDetailDialog = () => {
+  detailDialogVisible.value = false
+}
+
+// 关闭清理对话框
+const closeCleanDialog = () => {
+  cleanDialogVisible.value = false
+}
+
 // 确认清理
 // 确认清理
 const handleConfirmClean = async () => {
 const handleConfirmClean = async () => {
   if (!cleanForm.expireDays || cleanForm.expireDays <= 0) {
   if (!cleanForm.expireDays || cleanForm.expireDays <= 0) {
@@ -524,7 +612,7 @@ const handleConfirmClean = async () => {
     const response = await logApi.cleanExpiredLogs(cleanForm.expireDays)
     const response = await logApi.cleanExpiredLogs(cleanForm.expireDays)
     if (response.code === 200) {
     if (response.code === 200) {
       ElMessage.success(response.data)
       ElMessage.success(response.data)
-      cleanDialogVisible.value = false
+      closeCleanDialog()
       getLogList()
       getLogList()
     } else {
     } else {
       ElMessage.error(response.message || '清理失败')
       ElMessage.error(response.message || '清理失败')
@@ -545,99 +633,505 @@ onMounted(() => {
 })
 })
 </script>
 </script>
 
 
-<style scoped>
+<style scoped lang="scss">
 .log-management {
 .log-management {
-  padding: 20px;
+  background: #f5f5f5;
+  min-height: 100vh;
 }
 }
 
 
-.page-header {
-  margin-bottom: 20px;
+// 搜索区域
+.search-section {
+  background: white;
+  padding: 16px;
+  border-bottom: 1px solid #e0e0e0;
 }
 }
 
 
-.page-header h2 {
-  margin: 0 0 8px 0;
-  color: #303133;
-  font-size: 20px;
+.search-row {
+  display: flex;
+  gap: 16px;
+  align-items: center;
+  flex-wrap: wrap;
+}
+
+.search-item {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+}
+
+.search-item label {
+  font-size: 12px;
+  color: #333;
+  white-space: nowrap;
+}
+
+.search-input, .search-select {
+  padding: 6px 8px;
+  border: 1px solid #d9d9d9;
+  border-radius: 4px;
+  font-size: 12px;
+  width: 120px;
+}
+
+.search-input:focus, .search-select:focus {
+  outline: none;
+  border-color: #1890ff;
+}
+
+.search-actions {
+  display: flex;
+  gap: 8px;
+}
+
+.search-btn {
+  background: #1890ff;
+  color: white;
+  border: none;
+  padding: 4px 8px;
+  border-radius: 3px;
+  font-size: 11px;
+  cursor: pointer;
+}
+
+.search-btn:hover {
+  background: #40a9ff;
+}
+
+.reset-btn {
+  background: #ff7875;
+  color: white;
+  border: none;
+  padding: 4px 8px;
+  border-radius: 3px;
+  font-size: 11px;
+  cursor: pointer;
+  height: 24px;
+  display: flex;
+  align-items: center;
+}
+
+.reset-btn:hover {
+  background: #ff9c99;
+}
+
+// 操作区域
+.action-section {
+  background: white;
+  padding: 12px 16px;
+  border-bottom: 1px solid #e0e0e0;
+}
+
+.action-buttons {
+  display: flex;
+  gap: 6px;
+}
+
+.action-btn {
+  padding: 4px 8px;
+  border: none;
+  border-radius: 3px;
+  font-size: 11px;
+  cursor: pointer;
+  transition: all 0.2s;
+}
+
+.action-btn.primary {
+  background: #1890ff;
+  color: white;
+}
+
+.action-btn.primary:hover {
+  background: #40a9ff;
+}
+
+.action-btn.danger {
+  background: #ff4d4f;
+  color: white;
+}
+
+.action-btn.danger:hover {
+  background: #ff7875;
+}
+
+.action-btn.warning {
+  background: #faad14;
+  color: white;
+}
+
+.action-btn.warning:hover {
+  background: #ffc53d;
+}
+
+.action-btn.info {
+  background: #52c41a;
+  color: white;
+}
+
+.action-btn.info:hover {
+  background: #73d13d;
+}
+
+.action-btn:disabled {
+  opacity: 0.5;
+  cursor: not-allowed;
+}
+
+// 表格区域
+.table-section {
+  background: white;
+  margin: 16px;
+  border-radius: 6px;
+  overflow: hidden;
+  box-shadow: 0 2px 8px rgba(0,0,0,0.1);
+}
+
+.table-header {
+  padding: 8px 16px;
+  background: #fafafa;
+  border-bottom: 1px solid #e0e0e0;
+  display: flex;
+  justify-content: flex-end;
+}
+
+.table-controls {
+  display: flex;
+  gap: 4px;
+}
+
+.control-btn {
+  background: white;
+  border: 1px solid #d9d9d9;
+  border-radius: 3px;
+  padding: 4px 8px;
+  font-size: 11px;
+  cursor: pointer;
+  transition: all 0.2s;
+}
+
+.control-btn:hover {
+  background: #f0f8ff;
+  border-color: #1890ff;
+  color: #1890ff;
+}
+
+.table-container {
+  overflow-x: auto;
+}
+
+.data-table {
+  width: 100%;
+  border-collapse: collapse;
+}
+
+.data-table th,
+.data-table td {
+  padding: 8px 12px;
+  text-align: left;
+  border-bottom: 1px solid #f0f0f0;
+  font-size: 12px;
+}
+
+.data-table th {
+  background: #fafafa;
   font-weight: 600;
   font-weight: 600;
+  color: #333;
+  white-space: nowrap;
 }
 }
 
 
-.page-header p {
-  margin: 0;
-  color: #909399;
-  font-size: 14px;
+.data-table tbody tr:hover {
+  background: #f5f7fa;
+}
+
+.checkbox-col {
+  width: 50px;
+  text-align: center;
+}
+
+.table-checkbox {
+  width: 14px;
+  height: 14px;
+  cursor: pointer;
+}
+
+.operation-cell {
+  max-width: 200px;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.action-col {
+  width: 120px;
+  text-align: center;
 }
 }
 
 
-.search-card {
-  margin-bottom: 16px;
+.action-col .action-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;
 }
 }
 
 
-.search-form {
-  margin-bottom: 0;
+// 状态标签
+.status-badge {
+  padding: 2px 6px;
+  border-radius: 3px;
+  font-size: 10px;
 }
 }
 
 
-.toolbar-card {
-  margin-bottom: 16px;
+.status-badge.info {
+  background: #e6f7ff;
+  color: #1890ff;
 }
 }
 
 
-.toolbar {
+.status-badge.warning {
+  background: #fff7e6;
+  color: #fa8c16;
+}
+
+.status-badge.success {
+  background: #f6ffed;
+  color: #52c41a;
+}
+
+.status-badge.error {
+  background: #fff2f0;
+  color: #ff4d4f;
+}
+
+.status-badge.default {
+  background: #f5f5f5;
+  color: #8c8c8c;
+}
+
+// 分页区域
+.pagination-section {
   display: flex;
   display: flex;
   justify-content: space-between;
   justify-content: space-between;
   align-items: center;
   align-items: center;
+  padding: 8px 16px;
+  background: #fafafa;
+  border-top: 1px solid #e0e0e0;
 }
 }
 
 
-.toolbar-left,
-.toolbar-right {
+.pagination-info {
+  font-size: 12px;
+  color: #666;
+}
+
+.pagination-controls {
   display: flex;
   display: flex;
+  align-items: center;
   gap: 8px;
   gap: 8px;
 }
 }
 
 
-.table-card {
-  margin-bottom: 16px;
+.pagination-btn {
+  padding: 4px 8px;
+  border: 1px solid #d9d9d9;
+  border-radius: 3px;
+  background: white;
+  cursor: pointer;
+  font-size: 11px;
+  transition: all 0.2s;
+}
+
+.pagination-btn:hover:not(:disabled) {
+  background: #f0f8ff;
+  border-color: #1890ff;
+  color: #1890ff;
+}
+
+.pagination-btn:disabled {
+  opacity: 0.5;
+  cursor: not-allowed;
 }
 }
 
 
-.pagination-container {
+.page-info {
+  font-size: 12px;
+  color: #666;
+  padding: 0 8px;
+}
+
+.page-size-select {
+  padding: 4px 8px;
+  border: 1px solid #d9d9d9;
+  border-radius: 4px;
+  font-size: 12px;
+  background: white;
+  cursor: pointer;
+}
+
+// 对话框样式
+.dialog-overlay {
+  position: fixed;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  background: rgba(0, 0, 0, 0.5);
   display: flex;
   display: flex;
+  align-items: center;
   justify-content: center;
   justify-content: center;
-  margin-top: 20px;
+  z-index: 1000;
+}
+
+.dialog-content {
+  background: white;
+  border-radius: 6px;
+  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
+  width: 90%;
+  max-width: 600px;
+  max-height: 80vh;
+  overflow-y: auto;
+}
+
+.dialog-header {
+  padding: 12px 16px;
+  border-bottom: 1px solid #e0e0e0;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+}
+
+.dialog-header h3 {
+  margin: 0;
+  font-size: 14px;
+  color: #333;
+}
+
+.close-btn {
+  background: none;
+  border: none;
+  font-size: 16px;
+  cursor: pointer;
+  color: #999;
+  padding: 0;
+  width: 20px;
+  height: 20px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.close-btn:hover {
+  color: #666;
+}
+
+.dialog-body {
+  padding: 16px;
+}
+
+.dialog-footer {
+  padding: 12px 16px;
+  border-top: 1px solid #e0e0e0;
+  display: flex;
+  justify-content: flex-end;
+  gap: 6px;
+}
+
+// 详情网格布局
+.detail-grid {
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+  gap: 12px;
+}
+
+.detail-item {
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+}
+
+.detail-item.full-width {
+  grid-column: 1 / -1;
+}
+
+.detail-item label {
+  font-weight: 600;
+  color: #333;
+  font-size: 12px;
+}
+
+.detail-item span {
+  color: #666;
+  font-size: 12px;
 }
 }
 
 
 .log-detail {
 .log-detail {
-  max-height: 600px;
+  max-height: 400px;
   overflow-y: auto;
   overflow-y: auto;
 }
 }
 
 
 .request-param {
 .request-param {
-  margin-top: 20px;
+  margin-top: 16px;
 }
 }
 
 
 .request-param h4 {
 .request-param h4 {
-  margin: 0 0 10px 0;
-  color: #303133;
-  font-size: 14px;
+  margin: 0 0 8px 0;
+  color: #333;
+  font-size: 12px;
   font-weight: 600;
   font-weight: 600;
 }
 }
 
 
-/* 表格优化 */
-.el-table {
-  font-size: 14px;
+.request-textarea {
+  width: 100%;
+  padding: 6px 8px;
+  border: 1px solid #d9d9d9;
+  border-radius: 3px;
+  font-size: 11px;
+  font-family: monospace;
+  resize: vertical;
+  background: #f9f9f9;
 }
 }
 
 
-.el-table .cell {
-  padding: 8px 12px;
-  line-height: 1.5;
+// 表单样式
+.clean-form {
+  display: flex;
+  flex-direction: column;
+  gap: 12px;
 }
 }
 
 
-.el-table th.el-table__cell {
-  background: #fafafa;
-  color: #606266;
+.form-group {
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+}
+
+.form-group label {
   font-weight: 600;
   font-weight: 600;
+  color: #333;
+  font-size: 12px;
+}
+
+.form-group label.required::after {
+  content: ' *';
+  color: #ff4d4f;
+}
+
+.form-input {
+  padding: 6px 8px;
+  border: 1px solid #d9d9d9;
+  border-radius: 3px;
+  font-size: 12px;
+  transition: border-color 0.2s;
 }
 }
 
 
-.el-table td.el-table__cell {
-  padding: 12px 0;
+.form-input:focus {
+  outline: none;
+  border-color: #1890ff;
 }
 }
 
 
-.el-table .el-button + .el-button {
-  margin-left: 8px;
+.warning-text {
+  padding: 8px;
+  background: #fff7e6;
+  border: 1px solid #ffd591;
+  border-radius: 3px;
+  color: #fa8c16;
+  font-size: 11px;
 }
 }
 </style>
 </style>