移动端页面适配

2025-12-10 14:17:31 +08:00
parent 403e2c28c0
commit ffbdcb29c4
13 changed files with 3169 additions and 645 deletions
--- a/src/pages/api/Usage.vue
+++ b/src/pages/api/Usage.vue
@@ -7,7 +7,7 @@
    <template #actions>
      <div class="flex gap-4">
        <div class="stat-item">
-          <div class="stat-value">{{ stats.total_calls || 0 }}</div>
+          <div class="stat-value">{{ total}}</div>
          <div class="stat-label">总调用次数</div>
        </div>
      </div>
--- a/src/pages/api/WhiteList.vue
+++ b/src/pages/api/WhiteList.vue
@@ -4,9 +4,14 @@
    subtitle="管理您的API访问IP白名单，最多可添加10个IP地址"
  >
    <template #actions>
-      <el-button type="primary" @click="showAddForm = true">
+      <el-button
+        type="primary"
+        :size="isMobile ? 'small' : 'default'"
+        @click="showAddForm = true"
+      >
        <PlusIcon class="w-4 h-4 mr-1" />
-        添加IP地址
+        <span :class="isMobile ? 'hidden sm:inline' : ''">添加IP地址</span>
+        <span :class="isMobile ? 'sm:hidden' : 'hidden'">添加</span>
      </el-button>
    </template>

@@ -69,54 +74,104 @@
        </el-empty>
      </div>

+      <!-- 移动端卡片布局 -->
+      <div v-else-if="isMobile" class="white-list-cards">
+        <div
+          v-for="item in whiteListData"
+          :key="item.ip_address"
+          class="white-list-card"
+        >
+          <div class="card-header">
+            <div class="flex items-center gap-2">
+              <ComputerDesktopIcon class="w-5 h-5 text-blue-500" />
+              <span class="font-mono font-semibold text-base">{{ item.ip_address }}</span>
+            </div>
+            <el-tag type="success" size="small">
+              <span class="flex items-center"><ShieldCheckIcon class="w-3 h-3 mr-1" />已添加</span>
+            </el-tag>
+          </div>
+          <div class="card-body">
+            <div class="card-item">
+              <div class="card-label">
+                <CalendarIcon class="w-4 h-4 mr-1" />
+                添加时间
+              </div>
+              <div class="card-value">{{ formatDate(item.created_at) }}</div>
+            </div>
+            <div v-if="item.remark" class="card-item">
+              <div class="card-label">
+                <DocumentTextIcon class="w-4 h-4 mr-1" />
+                备注
+              </div>
+              <div class="card-value">{{ item.remark }}</div>
+            </div>
+          </div>
+          <div class="card-footer">
+            <el-button
+              type="danger"
+              size="small"
+              @click="handleDeleteIP(item.ip_address)"
+              :loading="deleteLoading === item.ip_address"
+              class="w-full"
+            >
+              <TrashIcon class="w-4 h-4 mr-1" />
+              删除
+            </el-button>
+          </div>
+        </div>
+      </div>
+
+      <!-- 桌面端表格布局 -->
      <div v-else class="white-list-table">
-        <el-table :data="whiteListData" stripe>
-          <el-table-column prop="ip_address" label="IP地址" min-width="200">
-            <template #default="{ row }">
-              <div class="flex items-center">
-                <ComputerDesktopIcon class="w-4 h-4 mr-2 text-blue-500" />
-                <span class="font-mono text-sm">{{ row.ip_address }}</span>
-              </div>
-            </template>
-          </el-table-column>
+        <div class="table-container">
+          <el-table :data="whiteListData" stripe>
+            <el-table-column prop="ip_address" label="IP地址" min-width="200">
+              <template #default="{ row }">
+                <div class="flex items-center">
+                  <ComputerDesktopIcon class="w-4 h-4 mr-2 text-blue-500" />
+                  <span class="font-mono text-sm">{{ row.ip_address }}</span>
+                </div>
+              </template>
+            </el-table-column>

-          <el-table-column prop="created_at" label="添加时间" min-width="180">
-            <template #default="{ row }">
-              <div class="flex items-center">
-                <CalendarIcon class="w-4 h-4 mr-2 text-gray-400" />
-                <span class="text-sm">{{ formatDate(row.created_at) }}</span>
-              </div>
-            </template>
-          </el-table-column>
+            <el-table-column prop="created_at" label="添加时间" min-width="180">
+              <template #default="{ row }">
+                <div class="flex items-center">
+                  <CalendarIcon class="w-4 h-4 mr-2 text-gray-400" />
+                  <span class="text-sm">{{ formatDate(row.created_at) }}</span>
+                </div>
+              </template>
+            </el-table-column>

-          <el-table-column prop="remark" label="备注" min-width="150">
-            <template #default="{ row }">
-              <span class="text-sm text-gray-600">{{ row.remark || '-' }}</span>
-            </template>
-          </el-table-column>
+            <el-table-column prop="remark" label="备注" min-width="150">
+              <template #default="{ row }">
+                <span class="text-sm text-gray-600">{{ row.remark || '-' }}</span>
+              </template>
+            </el-table-column>

-          <el-table-column label="状态" width="120">
-            <template #default>
-              <el-tag type="success" size="small">
-                <span class="flex items-center"><ShieldCheckIcon class="w-3 h-3 mr-1" />已添加</span>
-              </el-tag>
-            </template>
-          </el-table-column>
+            <el-table-column label="状态" width="120">
+              <template #default>
+                <el-tag type="success" size="small">
+                  <span class="flex items-center"><ShieldCheckIcon class="w-3 h-3 mr-1" />已添加</span>
+                </el-tag>
+              </template>
+            </el-table-column>

-          <el-table-column label="操作" width="120" fixed="right">
-            <template #default="{ row }">
-              <el-button
-                type="danger"
-                size="small"
-                @click="handleDeleteIP(row.ip_address)"
-                :loading="deleteLoading === row.ip_address"
-              >
-                <TrashIcon class="w-3 h-3 mr-1" />
-                删除
-              </el-button>
-            </template>
-          </el-table-column>
-        </el-table>
+            <el-table-column label="操作" width="120" fixed="right">
+              <template #default="{ row }">
+                <el-button
+                  type="danger"
+                  size="small"
+                  @click="handleDeleteIP(row.ip_address)"
+                  :loading="deleteLoading === row.ip_address"
+                >
+                  <TrashIcon class="w-3 h-3 mr-1" />
+                  删除
+                </el-button>
+              </template>
+            </el-table-column>
+          </el-table>
+        </div>
      </div>
    </template>

@@ -125,8 +180,9 @@
      <el-dialog
        v-model="showAddForm"
        title="添加IP地址"
-        width="500px"
+        :width="isMobile ? '90%' : '500px'"
        :close-on-click-modal="false"
+        class="add-ip-dialog"
      >
        <el-form
          ref="addFormRef"
@@ -173,10 +229,16 @@
        </el-form>

        <template #footer>
-          <div class="flex justify-end gap-2">
-            <el-button @click="showAddForm = false">取消</el-button>
+          <div :class="['flex', 'gap-2', isMobile ? 'flex-col' : 'justify-end']">
+            <el-button
+              :class="isMobile ? 'w-full' : ''"
+              @click="showAddForm = false"
+            >
+              取消
+            </el-button>
            <el-button
              type="primary"
+              :class="isMobile ? 'w-full' : ''"
              @click="handleAddIP"
              :loading="addLoading"
              :disabled="whiteListData.length >= 10"
@@ -238,6 +300,7 @@ import FilterItem from '@/components/common/FilterItem.vue'
 import FilterSection from '@/components/common/FilterSection.vue'
 import ListPageLayout from '@/components/common/ListPageLayout.vue'
 import { useCertification } from '@/composables/useCertification'
+import { useMobileTable } from '@/composables/useMobileTable'
 import {
  CalendarIcon,
  ComputerDesktopIcon,
@@ -258,6 +321,9 @@ const {
  canCallAPI
 } = useCertification()

+// 移动端检测
+const { isMobile, isTablet } = useMobileTable()
+
 // 响应式数据
 const loading = ref(false)
 const addLoading = ref(false)
@@ -419,6 +485,69 @@ const formatDate = (dateString) => {
 </script>

 <style scoped>
+/* 表格容器 */
+.table-container {
+  overflow-x: auto;
+  -webkit-overflow-scrolling: touch;
+}
+
+/* 移动端卡片布局 */
+.white-list-cards {
+  display: flex;
+  flex-direction: column;
+  gap: 12px;
+}
+
+.white-list-card {
+  background: white;
+  border: 1px solid #e5e7eb;
+  border-radius: 8px;
+  padding: 16px;
+  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
+}
+
+.card-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  margin-bottom: 12px;
+  padding-bottom: 12px;
+  border-bottom: 1px solid #f3f4f6;
+}
+
+.card-body {
+  display: flex;
+  flex-direction: column;
+  gap: 12px;
+  margin-bottom: 12px;
+}
+
+.card-item {
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+}
+
+.card-label {
+  display: flex;
+  align-items: center;
+  font-size: 12px;
+  color: #6b7280;
+  font-weight: 500;
+}
+
+.card-value {
+  font-size: 14px;
+  color: #1f2937;
+  word-break: break-word;
+}
+
+.card-footer {
+  padding-top: 12px;
+  border-top: 1px solid #f3f4f6;
+}
+
+/* 使用说明 */
 .help-content {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
@@ -444,10 +573,93 @@ const formatDate = (dateString) => {
  margin: 0;
 }

-/* 响应式设计 */
+/* 移动端响应式设计 */
@media (max-width: 768px) {
  .help-content {
    grid-template-columns: 1fr;
+    gap: 16px;
+  }
+
+  .help-item {
+    padding: 12px;
+  }
+
+  .help-title {
+    font-size: 14px;
+    margin-bottom: 6px;
+  }
+
+  .help-text {
+    font-size: 13px;
+  }
+
+  /* 表格在移动端优化 */
+  .table-container {
+    overflow-x: auto;
+    -webkit-overflow-scrolling: touch;
+  }
+
+  :deep(.white-list-table .el-table) {
+    font-size: 12px;
+    min-width: 600px;
+  }
+
+  :deep(.white-list-table .el-table th),
+  :deep(.white-list-table .el-table td) {
+    padding: 8px 4px;
+  }
+
+  :deep(.white-list-table .el-table .cell) {
+    padding: 0 4px;
+    word-break: break-word;
+    line-height: 1.4;
+  }
+
+  /* 对话框在移动端优化 */
+  :deep(.add-ip-dialog .el-dialog__body) {
+    padding: 16px;
+  }
+
+  :deep(.add-ip-dialog .el-form-item) {
+    margin-bottom: 16px;
+  }
+
+  :deep(.add-ip-dialog .el-form-item__label) {
+    font-size: 14px;
+    padding-bottom: 4px;
+  }
+}
+
+/* 超小屏幕进一步优化 */
+@media (max-width: 480px) {
+  .white-list-card {
+    padding: 12px;
+  }
+
+  .card-header {
+    flex-direction: column;
+    align-items: flex-start;
+    gap: 8px;
+  }
+
+  .card-body {
+    gap: 10px;
+  }
+
+  .card-label {
+    font-size: 11px;
+  }
+
+  .card-value {
+    font-size: 13px;
+  }
+
+  .help-item {
+    padding: 10px;
+  }
+
+  :deep(.add-ip-dialog .el-dialog__body) {
+    padding: 12px;
  }
 }
 </style>