适配

src/pages/api/Usage.vue

@@ -89,20 +89,21 @@
       </div> -->
 
       <div v-else class="bg-white rounded-lg shadow-sm border border-gray-200 overflow-hidden">
-        <el-table
-          :data="apiCalls"
-          style="width: 100%"
-          :header-cell-style="{
-            background: '#f8fafc',
-            color: '#475569',
-            fontWeight: '600',
-            fontSize: '14px'
-          }"
-          :cell-style="{
-            fontSize: '14px',
-            color: '#1e293b'
-          }"
-        >
+        <div class="table-container">
+          <el-table
+            :data="apiCalls"
+            style="width: 100%"
+            :header-cell-style="{
+              background: '#f8fafc',
+              color: '#475569',
+              fontWeight: '600',
+              fontSize: '14px'
+            }"
+            :cell-style="{
+              fontSize: '14px',
+              color: '#1e293b'
+            }"
+          >
           <el-table-column prop="transaction_id" label="交易ID" min-width="180">
             <template #default="{ row }">
               <span class="font-mono text-sm text-gray-600">{{ row.transaction_id }}</span>
@@ -186,20 +187,23 @@
             </template>
           </el-table-column>
         </el-table>
+        </div>
       </div>
     </template>
 
     <template #pagination>
-      <el-pagination
-        v-if="total > 0"
-        v-model:current-page="currentPage"
-        v-model:page-size="pageSize"
-        :page-sizes="[10, 20, 50, 100]"
-        :total="total"
-        layout="total, sizes, prev, pager, next, jumper"
-        @size-change="handleSizeChange"
-        @current-change="handleCurrentChange"
-      />
+      <div class="pagination-wrapper">
+        <el-pagination
+          v-if="total > 0"
+          v-model:current-page="currentPage"
+          v-model:page-size="pageSize"
+          :page-sizes="[10, 20, 50, 100]"
+          :total="total"
+          layout="total, sizes, prev, pager, next, jumper"
+          @size-change="handleSizeChange"
+          @current-change="handleCurrentChange"
+        />
+      </div>
     </template>
 
     <template #extra>
@@ -554,7 +558,9 @@ const handleViewDetail = (apiCall) => {
 }
 
 .error-content {
-  space-y: 2;
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
 }
 
 .error-type {
@@ -657,6 +663,19 @@ const handleViewDetail = (apiCall) => {
   background: #f8fafc !important;
 }
 
+/* 表格容器 */
+.table-container {
+  overflow-x: auto;
+  -webkit-overflow-scrolling: touch;
+}
+
+/* 分页器包装器 */
+.pagination-wrapper {
+  padding: 16px 0;
+  overflow-x: auto;
+  -webkit-overflow-scrolling: touch;
+}
+
 /* 响应式设计 */
 @media (max-width: 768px) {
   .stat-item {
@@ -683,5 +702,131 @@ const handleViewDetail = (apiCall) => {
   .detail-value {
     font-size: 14px;
   }
+
+  /* 表格在移动端优化 */
+  .table-container {
+    overflow-x: auto;
+    -webkit-overflow-scrolling: touch;
+  }
+
+  :deep(.el-table) {
+    font-size: 12px;
+    min-width: 1000px;
+  }
+
+  :deep(.el-table th),
+  :deep(.el-table td) {
+    padding: 8px 4px;
+  }
+
+  :deep(.el-table .cell) {
+    padding: 0 4px;
+    word-break: break-word;
+    line-height: 1.4;
+  }
+
+  /* 分页组件在移动端优化 */
+  .pagination-wrapper {
+    padding: 12px 0;
+    overflow-x: auto;
+    -webkit-overflow-scrolling: touch;
+  }
+
+  .pagination-wrapper :deep(.el-pagination) {
+    flex-wrap: nowrap;
+    min-width: fit-content;
+    justify-content: flex-start;
+  }
+
+  .pagination-wrapper :deep(.el-pagination__sizes) {
+    display: none;
+  }
+
+  .pagination-wrapper :deep(.el-pagination__total) {
+    font-size: 12px;
+    margin-right: 8px;
+    white-space: nowrap;
+  }
+
+  .pagination-wrapper :deep(.el-pagination__jump) {
+    display: none;
+  }
+
+  .pagination-wrapper :deep(.el-pager li) {
+    min-width: 32px;
+    height: 32px;
+    line-height: 32px;
+    margin: 0 2px;
+    font-size: 12px;
+  }
+
+  .pagination-wrapper :deep(.btn-prev),
+  .pagination-wrapper :deep(.btn-next) {
+    min-width: 32px;
+    height: 32px;
+    line-height: 32px;
+    font-size: 12px;
+  }
+
+  /* 对话框在移动端优化 */
+  .detail-dialog :deep(.el-dialog) {
+    margin: 20px;
+    width: calc(100% - 40px) !important;
+    max-width: none;
+  }
+
+  .detail-dialog :deep(.el-dialog__body) {
+    padding: 16px;
+    max-height: 80vh;
+    overflow-y: auto;
+  }
+
+  .detail-dialog :deep(.grid-cols-2) {
+    grid-template-columns: 1fr;
+    gap: 16px;
+  }
+}
+
+/* 超小屏幕进一步优化 */
+@media (max-width: 480px) {
+  .pagination-wrapper {
+    padding: 8px 0;
+  }
+
+  .pagination-wrapper :deep(.el-pagination__total) {
+    display: none;
+  }
+
+  .pagination-wrapper :deep(.el-pagination) {
+    font-size: 11px;
+  }
+
+  .pagination-wrapper :deep(.el-pager li) {
+    min-width: 28px;
+    height: 28px;
+    line-height: 28px;
+    font-size: 11px;
+  }
+
+  .pagination-wrapper :deep(.btn-prev),
+  .pagination-wrapper :deep(.btn-next) {
+    min-width: 28px;
+    height: 28px;
+    line-height: 28px;
+    font-size: 11px;
+  }
+
+  .stat-item {
+    padding: 10px 12px;
+    min-width: 80px;
+  }
+
+  .stat-value {
+    font-size: 18px;
+  }
+
+  .stat-label {
+    font-size: 11px;
+  }
 }
 </style>