From 89c1a413058b64ad29fb91d1b44daeecc01506a3 Mon Sep 17 00:00:00 2001
From: IanShaw027 <131567472+IanShaw027@users.noreply.github.com>
Date: Mon, 12 Jan 2026 14:31:21 +0800
Subject: [PATCH] =?UTF-8?q?fix(ops):=20=E4=BF=AE=E5=A4=8D=E9=94=99?=
 =?UTF-8?q?=E8=AF=AF=E6=97=A5=E5=BF=97=E5=92=8C=E8=AF=B7=E6=B1=82=E8=AF=A6?=
 =?UTF-8?q?=E6=83=85=E6=A8=A1=E6=80=81=E6=A1=86=E7=9A=84=E5=B8=83=E5=B1=80?=
 =?UTF-8?q?=E9=97=AE=E9=A2=98?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- 修复 OpsErrorDetailsModal 的内容溢出问题，使用 flex 布局确保正确显示
- 修复 OpsErrorLogTable 的表格滚动问题，添加 min-h-0 确保正确的滚动行为
- 修复 OpsRequestDetailsModal 的布局问题，添加 pageSize 初始化并优化 flex 布局
- 统一使用 flex 布局模式，确保模态框内容在不同屏幕尺寸下正确显示
---
 .../ops/components/OpsErrorDetailsModal.vue   | 114 +++---
 .../admin/ops/components/OpsErrorLogTable.vue | 326 +++++++++---------
 .../ops/components/OpsRequestDetailsModal.vue |  93 ++---
 3 files changed, 272 insertions(+), 261 deletions(-)

diff --git a/frontend/src/views/admin/ops/components/OpsErrorDetailsModal.vue b/frontend/src/views/admin/ops/components/OpsErrorDetailsModal.vue
index 1ba51db8..0280f158 100644
--- a/frontend/src/views/admin/ops/components/OpsErrorDetailsModal.vue
+++ b/frontend/src/views/admin/ops/components/OpsErrorDetailsModal.vue
@@ -174,69 +174,75 @@ watch(
 
 <template>
   <BaseDialog :show="show" :title="modalTitle" width="full" @close="close">
-    <!-- Filters -->
-    <div class="border-b border-gray-200 pb-4 mb-4 dark:border-dark-700">
-      <div class="grid grid-cols-1 gap-4 lg:grid-cols-12">
-        <div class="lg:col-span-5">
-          <div class="relative group">
-            <div class="pointer-events-none absolute inset-y-0 left-0 flex items-center pl-3.5">
-              <svg
-                class="h-4 w-4 text-gray-400 transition-colors group-focus-within:text-blue-500"
-                fill="none"
-                viewBox="0 0 24 24"
-                stroke="currentColor"
-              >
-                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2.5" d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z" />
-              </svg>
+    <div class="flex h-full min-h-0 flex-col">
+      <!-- Filters -->
+      <div class="mb-4 flex-shrink-0 border-b border-gray-200 pb-4 dark:border-dark-700">
+        <div class="grid grid-cols-1 gap-4 lg:grid-cols-12">
+          <div class="lg:col-span-5">
+            <div class="relative group">
+              <div class="pointer-events-none absolute inset-y-0 left-0 flex items-center pl-3.5">
+                <svg
+                  class="h-4 w-4 text-gray-400 transition-colors group-focus-within:text-blue-500"
+                  fill="none"
+                  viewBox="0 0 24 24"
+                  stroke="currentColor"
+                >
+                  <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2.5" d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z" />
+                </svg>
+              </div>
+              <input
+                v-model="q"
+                type="text"
+                class="w-full rounded-2xl border-gray-200 bg-gray-50/50 py-2 pl-10 pr-4 text-sm font-medium text-gray-700 transition-all focus:border-blue-500 focus:bg-white focus:ring-4 focus:ring-blue-500/10 dark:border-dark-700 dark:bg-dark-900 dark:text-gray-300 dark:focus:bg-dark-800"
+                :placeholder="t('admin.ops.errorDetails.searchPlaceholder')"
+              />
             </div>
+          </div>
+
+          <div class="lg:col-span-2">
+            <Select :model-value="statusCode" :options="statusCodeSelectOptions" class="w-full" @update:model-value="statusCode = $event as any" />
+          </div>
+
+          <div class="lg:col-span-2">
+            <Select :model-value="phase" :options="phaseSelectOptions" class="w-full" @update:model-value="phase = String($event ?? '')" />
+          </div>
+
+          <div class="lg:col-span-2">
             <input
-              v-model="q"
+              v-model="accountIdInput"
               type="text"
-              class="w-full rounded-2xl border-gray-200 bg-gray-50/50 py-2 pl-10 pr-4 text-sm font-medium text-gray-700 transition-all focus:border-blue-500 focus:bg-white focus:ring-4 focus:ring-blue-500/10 dark:border-dark-700 dark:bg-dark-900 dark:text-gray-300 dark:focus:bg-dark-800"
-              :placeholder="t('admin.ops.errorDetails.searchPlaceholder')"
+              inputmode="numeric"
+              class="input w-full text-sm"
+              :placeholder="t('admin.ops.errorDetails.accountIdPlaceholder')"
             />
           </div>
-        </div>
 
-        <div class="lg:col-span-2">
-          <Select :model-value="statusCode" :options="statusCodeSelectOptions" class="w-full" @update:model-value="statusCode = $event as any" />
-        </div>
-
-        <div class="lg:col-span-2">
-          <Select :model-value="phase" :options="phaseSelectOptions" class="w-full" @update:model-value="phase = String($event ?? '')" />
-        </div>
-
-        <div class="lg:col-span-2">
-          <input
-            v-model="accountIdInput"
-            type="text"
-            inputmode="numeric"
-            class="input w-full text-sm"
-            :placeholder="t('admin.ops.errorDetails.accountIdPlaceholder')"
-          />
-        </div>
-
-        <div class="lg:col-span-1 flex items-center justify-end">
-          <button type="button" class="btn btn-secondary btn-sm" @click="resetFilters">
-            {{ t('common.reset') }}
-          </button>
+          <div class="lg:col-span-1 flex items-center justify-end">
+            <button type="button" class="btn btn-secondary btn-sm" @click="resetFilters">
+              {{ t('common.reset') }}
+            </button>
+          </div>
         </div>
       </div>
-    </div>
 
-    <!-- Body -->
-    <div class="text-xs text-gray-500 dark:text-gray-400 mb-2">
-      {{ t('admin.ops.errorDetails.total') }} {{ total }}
+      <!-- Body -->
+      <div class="flex min-h-0 flex-1 flex-col">
+        <div class="mb-2 flex-shrink-0 text-xs text-gray-500 dark:text-gray-400">
+          {{ t('admin.ops.errorDetails.total') }} {{ total }}
+        </div>
+
+        <OpsErrorLogTable
+          class="min-h-0 flex-1"
+          :rows="rows"
+          :total="total"
+          :loading="loading"
+          :page="page"
+          :page-size="pageSize"
+          @openErrorDetail="emit('openErrorDetail', $event)"
+          @update:page="page = $event"
+          @update:pageSize="pageSize = $event"
+        />
+      </div>
     </div>
-    <OpsErrorLogTable
-      :rows="rows"
-      :total="total"
-      :loading="loading"
-      :page="page"
-      :page-size="pageSize"
-      @openErrorDetail="emit('openErrorDetail', $event)"
-      @update:page="page = $event"
-      @update:pageSize="pageSize = $event"
-    />
   </BaseDialog>
 </template>
diff --git a/frontend/src/views/admin/ops/components/OpsErrorLogTable.vue b/frontend/src/views/admin/ops/components/OpsErrorLogTable.vue
index 6a4be1a7..416bdba9 100644
--- a/frontend/src/views/admin/ops/components/OpsErrorLogTable.vue
+++ b/frontend/src/views/admin/ops/components/OpsErrorLogTable.vue
@@ -1,176 +1,178 @@
 <template>
-  <div>
-    <div v-if="loading" class="flex items-center justify-center py-10">
+  <div class="flex h-full min-h-0 flex-col">
+    <div v-if="loading" class="flex flex-1 items-center justify-center py-10">
       <div class="h-8 w-8 animate-spin rounded-full border-b-2 border-primary-600"></div>
     </div>
 
-    <div v-else class="overflow-x-auto">
-      <table class="min-w-full divide-y divide-gray-200 dark:divide-dark-700">
-        <thead class="sticky top-0 z-10 bg-gray-50/50 dark:bg-dark-800/50">
-          <tr>
-            <th
-              scope="col"
-              class="whitespace-nowrap px-6 py-4 text-left text-xs font-bold uppercase tracking-wider text-gray-500 dark:text-dark-400"
-            >
-              {{ t('admin.ops.errorLog.timeId') }}
-            </th>
-            <th
-              scope="col"
-              class="whitespace-nowrap px-6 py-4 text-left text-xs font-bold uppercase tracking-wider text-gray-500 dark:text-dark-400"
-            >
-              {{ t('admin.ops.errorLog.context') }}
-            </th>
-            <th
-              scope="col"
-              class="whitespace-nowrap px-6 py-4 text-left text-xs font-bold uppercase tracking-wider text-gray-500 dark:text-dark-400"
-            >
-              {{ t('admin.ops.errorLog.status') }}
-            </th>
-            <th
-              scope="col"
-              class="px-6 py-4 text-left text-xs font-bold uppercase tracking-wider text-gray-500 dark:text-dark-400"
-            >
-              {{ t('admin.ops.errorLog.message') }}
-            </th>
-            <th
-              scope="col"
-              class="whitespace-nowrap px-6 py-4 text-right text-xs font-bold uppercase tracking-wider text-gray-500 dark:text-dark-400"
-            >
-              {{ t('admin.ops.errorLog.latency') }}
-            </th>
-            <th
-              scope="col"
-              class="whitespace-nowrap px-6 py-4 text-right text-xs font-bold uppercase tracking-wider text-gray-500 dark:text-dark-400"
-            >
-              {{ t('admin.ops.errorLog.action') }}
-            </th>
-          </tr>
-        </thead>
-        <tbody class="divide-y divide-gray-100 dark:divide-dark-700">
-          <tr v-if="rows.length === 0" class="bg-white dark:bg-dark-900">
-            <td colspan="6" class="py-16 text-center text-sm text-gray-400 dark:text-dark-500">
-              {{ t('admin.ops.errorLog.noErrors') }}
-            </td>
-          </tr>
+    <div v-else class="flex min-h-0 flex-1 flex-col">
+      <div class="min-h-0 flex-1 overflow-auto">
+        <table class="min-w-full divide-y divide-gray-200 dark:divide-dark-700">
+          <thead class="sticky top-0 z-10 bg-gray-50/50 dark:bg-dark-800/50">
+            <tr>
+              <th
+                scope="col"
+                class="whitespace-nowrap px-6 py-4 text-left text-xs font-bold uppercase tracking-wider text-gray-500 dark:text-dark-400"
+              >
+                {{ t('admin.ops.errorLog.timeId') }}
+              </th>
+              <th
+                scope="col"
+                class="whitespace-nowrap px-6 py-4 text-left text-xs font-bold uppercase tracking-wider text-gray-500 dark:text-dark-400"
+              >
+                {{ t('admin.ops.errorLog.context') }}
+              </th>
+              <th
+                scope="col"
+                class="whitespace-nowrap px-6 py-4 text-left text-xs font-bold uppercase tracking-wider text-gray-500 dark:text-dark-400"
+              >
+                {{ t('admin.ops.errorLog.status') }}
+              </th>
+              <th
+                scope="col"
+                class="px-6 py-4 text-left text-xs font-bold uppercase tracking-wider text-gray-500 dark:text-dark-400"
+              >
+                {{ t('admin.ops.errorLog.message') }}
+              </th>
+              <th
+                scope="col"
+                class="whitespace-nowrap px-6 py-4 text-right text-xs font-bold uppercase tracking-wider text-gray-500 dark:text-dark-400"
+              >
+                {{ t('admin.ops.errorLog.latency') }}
+              </th>
+              <th
+                scope="col"
+                class="whitespace-nowrap px-6 py-4 text-right text-xs font-bold uppercase tracking-wider text-gray-500 dark:text-dark-400"
+              >
+                {{ t('admin.ops.errorLog.action') }}
+              </th>
+            </tr>
+          </thead>
+          <tbody class="divide-y divide-gray-100 dark:divide-dark-700">
+            <tr v-if="rows.length === 0" class="bg-white dark:bg-dark-900">
+              <td colspan="6" class="py-16 text-center text-sm text-gray-400 dark:text-dark-500">
+                {{ t('admin.ops.errorLog.noErrors') }}
+              </td>
+            </tr>
 
-          <tr
-            v-for="log in rows"
-            :key="log.id"
-            class="group cursor-pointer transition-all duration-200 hover:bg-gray-50/80 focus:outline-none focus:ring-2 focus:ring-primary-500 focus:ring-offset-2 dark:hover:bg-dark-800/50 dark:focus:ring-offset-dark-900"
-            tabindex="0"
-            role="button"
-            @click="emit('openErrorDetail', log.id)"
-            @keydown.enter.prevent="emit('openErrorDetail', log.id)"
-            @keydown.space.prevent="emit('openErrorDetail', log.id)"
-          >
-            <!-- Time & ID -->
-            <td class="px-6 py-4">
-              <div class="flex flex-col gap-0.5">
-                <span class="font-mono text-xs font-bold text-gray-900 dark:text-gray-200">
-                  {{ formatDateTime(log.created_at).split(' ')[1] }}
-                </span>
-                <span
-                  class="font-mono text-[10px] text-gray-400 transition-colors group-hover:text-primary-600 dark:group-hover:text-primary-400"
-                  :title="log.request_id || log.client_request_id"
-                >
-                  {{ (log.request_id || log.client_request_id || '').substring(0, 12) }}
-                </span>
-              </div>
-            </td>
+            <tr
+              v-for="log in rows"
+              :key="log.id"
+              class="group cursor-pointer transition-all duration-200 hover:bg-gray-50/80 focus:outline-none focus:ring-2 focus:ring-primary-500 focus:ring-offset-2 dark:hover:bg-dark-800/50 dark:focus:ring-offset-dark-900"
+              tabindex="0"
+              role="button"
+              @click="emit('openErrorDetail', log.id)"
+              @keydown.enter.prevent="emit('openErrorDetail', log.id)"
+              @keydown.space.prevent="emit('openErrorDetail', log.id)"
+            >
+              <!-- Time & ID -->
+              <td class="px-6 py-4">
+                <div class="flex flex-col gap-0.5">
+                  <span class="font-mono text-xs font-bold text-gray-900 dark:text-gray-200">
+                    {{ formatDateTime(log.created_at).split(' ')[1] }}
+                  </span>
+                  <span
+                    class="font-mono text-[10px] text-gray-400 transition-colors group-hover:text-primary-600 dark:group-hover:text-primary-400"
+                    :title="log.request_id || log.client_request_id"
+                  >
+                    {{ (log.request_id || log.client_request_id || '').substring(0, 12) }}
+                  </span>
+                </div>
+              </td>
 
-	            <!-- Context (Platform/Model) -->
-	            <td class="px-6 py-4">
-	              <div class="flex flex-col items-start gap-1.5">
-	                <span
-	                  class="inline-flex items-center rounded-md bg-gray-100 px-2 py-0.5 text-[10px] font-bold uppercase tracking-tight text-gray-600 dark:bg-dark-700 dark:text-gray-300"
-	                >
-	                  {{ log.platform || '-' }}
-	                </span>
-	                <span
-	                  v-if="log.model"
-	                  class="max-w-[160px] truncate font-mono text-[10px] text-gray-500 dark:text-dark-400"
-	                  :title="log.model"
-	                >
-	                  {{ log.model }}
-	                </span>
-	                <div
-	                  v-if="log.group_id || log.account_id"
-	                  class="flex flex-wrap items-center gap-2 font-mono text-[10px] font-semibold text-gray-400 dark:text-dark-500"
-	                >
-	                  <span v-if="log.group_id">{{ t('admin.ops.errorLog.grp') }} {{ log.group_id }}</span>
-	                  <span v-if="log.account_id">{{ t('admin.ops.errorLog.acc') }} {{ log.account_id }}</span>
-	                </div>
-	              </div>
-	            </td>
-
-            <!-- Status & Severity -->
-            <td class="px-6 py-4">
-              <div class="flex flex-wrap items-center gap-2">
-                <span
-                  :class="[
-                    'inline-flex items-center rounded-lg px-2 py-1 text-xs font-black ring-1 ring-inset shadow-sm',
-                    getStatusClass(log.status_code)
-                  ]"
-                >
-                  {{ log.status_code }}
-                </span>
-                <span
-                  v-if="log.severity"
-                  :class="['rounded-md px-2 py-0.5 text-[10px] font-black shadow-sm', getSeverityClass(log.severity)]"
-                >
-                  {{ log.severity }}
-                </span>
-              </div>
-            </td>
-
-            <!-- Message -->
-            <td class="px-6 py-4">
-              <div class="max-w-md lg:max-w-2xl">
-                <p class="truncate text-xs font-semibold text-gray-700 dark:text-gray-300" :title="log.message">
-                  {{ formatSmartMessage(log.message) || '-' }}
-                </p>
-                <div class="mt-1.5 flex flex-wrap gap-x-3 gap-y-1">
-                  <div v-if="log.phase" class="flex items-center gap-1">
-                    <span class="h-1 w-1 rounded-full bg-gray-300"></span>
-                    <span class="text-[9px] font-black uppercase tracking-tighter text-gray-400">{{ log.phase }}</span>
-                  </div>
-                  <div v-if="log.client_ip" class="flex items-center gap-1">
-                    <span class="h-1 w-1 rounded-full bg-gray-300"></span>
-                    <span class="text-[9px] font-mono font-bold text-gray-400">{{ log.client_ip }}</span>
+              <!-- Context (Platform/Model) -->
+              <td class="px-6 py-4">
+                <div class="flex flex-col items-start gap-1.5">
+                  <span
+                    class="inline-flex items-center rounded-md bg-gray-100 px-2 py-0.5 text-[10px] font-bold uppercase tracking-tight text-gray-600 dark:bg-dark-700 dark:text-gray-300"
+                  >
+                    {{ log.platform || '-' }}
+                  </span>
+                  <span
+                    v-if="log.model"
+                    class="max-w-[160px] truncate font-mono text-[10px] text-gray-500 dark:text-dark-400"
+                    :title="log.model"
+                  >
+                    {{ log.model }}
+                  </span>
+                  <div
+                    v-if="log.group_id || log.account_id"
+                    class="flex flex-wrap items-center gap-2 font-mono text-[10px] font-semibold text-gray-400 dark:text-dark-500"
+                  >
+                    <span v-if="log.group_id">{{ t('admin.ops.errorLog.grp') }} {{ log.group_id }}</span>
+                    <span v-if="log.account_id">{{ t('admin.ops.errorLog.acc') }} {{ log.account_id }}</span>
                   </div>
                 </div>
-              </div>
-            </td>
+              </td>
 
-            <!-- Latency -->
-            <td class="px-6 py-4 text-right">
-              <div class="flex flex-col items-end">
-                <span class="font-mono text-xs font-black" :class="getLatencyClass(log.latency_ms ?? null)">
-                  {{ log.latency_ms != null ? Math.round(log.latency_ms) + 'ms' : '--' }}
-                </span>
-              </div>
-            </td>
+              <!-- Status & Severity -->
+              <td class="px-6 py-4">
+                <div class="flex flex-wrap items-center gap-2">
+                  <span
+                    :class="[
+                      'inline-flex items-center rounded-lg px-2 py-1 text-xs font-black ring-1 ring-inset shadow-sm',
+                      getStatusClass(log.status_code)
+                    ]"
+                  >
+                    {{ log.status_code }}
+                  </span>
+                  <span
+                    v-if="log.severity"
+                    :class="['rounded-md px-2 py-0.5 text-[10px] font-black shadow-sm', getSeverityClass(log.severity)]"
+                  >
+                    {{ log.severity }}
+                  </span>
+                </div>
+              </td>
 
-            <!-- Actions -->
-            <td class="px-6 py-4 text-right" @click.stop>
-              <button type="button" class="btn btn-secondary btn-sm" @click="emit('openErrorDetail', log.id)">
-                {{ t('admin.ops.errorLog.details') }}
-              </button>
-            </td>
-          </tr>
-        </tbody>
-      </table>
+              <!-- Message -->
+              <td class="px-6 py-4">
+                <div class="max-w-md lg:max-w-2xl">
+                  <p class="truncate text-xs font-semibold text-gray-700 dark:text-gray-300" :title="log.message">
+                    {{ formatSmartMessage(log.message) || '-' }}
+                  </p>
+                  <div class="mt-1.5 flex flex-wrap gap-x-3 gap-y-1">
+                    <div v-if="log.phase" class="flex items-center gap-1">
+                      <span class="h-1 w-1 rounded-full bg-gray-300"></span>
+                      <span class="text-[9px] font-black uppercase tracking-tighter text-gray-400">{{ log.phase }}</span>
+                    </div>
+                    <div v-if="log.client_ip" class="flex items-center gap-1">
+                      <span class="h-1 w-1 rounded-full bg-gray-300"></span>
+                      <span class="text-[9px] font-mono font-bold text-gray-400">{{ log.client_ip }}</span>
+                    </div>
+                  </div>
+                </div>
+              </td>
+
+              <!-- Latency -->
+              <td class="px-6 py-4 text-right">
+                <div class="flex flex-col items-end">
+                  <span class="font-mono text-xs font-black" :class="getLatencyClass(log.latency_ms ?? null)">
+                    {{ log.latency_ms != null ? Math.round(log.latency_ms) + 'ms' : '--' }}
+                  </span>
+                </div>
+              </td>
+
+              <!-- Actions -->
+              <td class="px-6 py-4 text-right" @click.stop>
+                <button type="button" class="btn btn-secondary btn-sm" @click="emit('openErrorDetail', log.id)">
+                  {{ t('admin.ops.errorLog.details') }}
+                </button>
+              </td>
+            </tr>
+          </tbody>
+        </table>
+      </div>
+
+      <Pagination
+        v-if="total > 0"
+        :total="total"
+        :page="page"
+        :page-size="pageSize"
+        :page-size-options="[10, 20, 50, 100, 200, 500]"
+        @update:page="emit('update:page', $event)"
+        @update:pageSize="emit('update:pageSize', $event)"
+      />
     </div>
-
-    <Pagination
-      v-if="total > 0"
-      :total="total"
-      :page="page"
-      :page-size="pageSize"
-      :page-size-options="[10, 20, 50, 100, 200, 500]"
-      @update:page="emit('update:page', $event)"
-      @update:pageSize="emit('update:pageSize', $event)"
-    />
   </div>
 </template>
 
diff --git a/frontend/src/views/admin/ops/components/OpsRequestDetailsModal.vue b/frontend/src/views/admin/ops/components/OpsRequestDetailsModal.vue
index 3044ee3a..d3edd745 100644
--- a/frontend/src/views/admin/ops/components/OpsRequestDetailsModal.vue
+++ b/frontend/src/views/admin/ops/components/OpsRequestDetailsModal.vue
@@ -95,6 +95,7 @@ watch(
   (open) => {
     if (open) {
       page.value = 1
+      pageSize.value = 20
       fetchData()
     }
   }
@@ -150,45 +151,46 @@ const kindBadgeClass = (kind: string) => {
 <template>
   <BaseDialog :show="modelValue" :title="props.preset.title || t('admin.ops.requestDetails.title')" width="full" @close="close">
     <template #default>
-      <div class="flex items-center justify-between mb-4">
-        <div class="text-xs text-gray-500 dark:text-gray-400">
-          {{ t('admin.ops.requestDetails.rangeLabel', { range: rangeLabel }) }}
-        </div>
-        <button
-          type="button"
-          class="btn btn-secondary btn-sm"
-          @click="fetchData"
-        >
-          {{ t('common.refresh') }}
-        </button>
-      </div>
-
-      <!-- Loading -->
-      <div v-if="loading" class="flex items-center justify-center py-16">
-        <div class="flex flex-col items-center gap-3">
-          <svg class="h-8 w-8 animate-spin text-blue-500" fill="none" viewBox="0 0 24 24">
-            <circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle>
-            <path
-              class="opacity-75"
-              fill="currentColor"
-              d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"
-            ></path>
-          </svg>
-          <span class="text-sm font-medium text-gray-500 dark:text-gray-400">{{ t('common.loading') }}</span>
-        </div>
-      </div>
-
-      <!-- Table -->
-      <div v-else>
-        <div v-if="items.length === 0" class="rounded-xl border border-dashed border-gray-200 p-10 text-center dark:border-dark-700">
-          <div class="text-sm font-medium text-gray-600 dark:text-gray-300">{{ t('admin.ops.requestDetails.empty') }}</div>
-          <div class="mt-1 text-xs text-gray-400">{{ t('admin.ops.requestDetails.emptyHint') }}</div>
+      <div class="flex h-full min-h-0 flex-col">
+        <div class="mb-4 flex flex-shrink-0 items-center justify-between">
+          <div class="text-xs text-gray-500 dark:text-gray-400">
+            {{ t('admin.ops.requestDetails.rangeLabel', { range: rangeLabel }) }}
+          </div>
+          <button
+            type="button"
+            class="btn btn-secondary btn-sm"
+            @click="fetchData"
+          >
+            {{ t('common.refresh') }}
+          </button>
         </div>
 
-        <div v-else class="overflow-hidden rounded-xl border border-gray-200 dark:border-dark-700">
-          <div class="overflow-x-auto">
-            <table class="min-w-full divide-y divide-gray-200 dark:divide-dark-700">
-              <thead class="bg-gray-50 dark:bg-dark-900">
+        <!-- Loading -->
+        <div v-if="loading" class="flex flex-1 items-center justify-center py-16">
+          <div class="flex flex-col items-center gap-3">
+            <svg class="h-8 w-8 animate-spin text-blue-500" fill="none" viewBox="0 0 24 24">
+              <circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle>
+              <path
+                class="opacity-75"
+                fill="currentColor"
+                d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"
+              ></path>
+            </svg>
+            <span class="text-sm font-medium text-gray-500 dark:text-gray-400">{{ t('common.loading') }}</span>
+          </div>
+        </div>
+
+        <!-- Table -->
+        <div v-else class="flex min-h-0 flex-1 flex-col">
+          <div v-if="items.length === 0" class="rounded-xl border border-dashed border-gray-200 p-10 text-center dark:border-dark-700">
+            <div class="text-sm font-medium text-gray-600 dark:text-gray-300">{{ t('admin.ops.requestDetails.empty') }}</div>
+            <div class="mt-1 text-xs text-gray-400">{{ t('admin.ops.requestDetails.emptyHint') }}</div>
+          </div>
+
+          <div v-else class="flex min-h-0 flex-1 flex-col overflow-hidden rounded-xl border border-gray-200 dark:border-dark-700">
+            <div class="min-h-0 flex-1 overflow-auto">
+              <table class="min-w-full divide-y divide-gray-200 dark:divide-dark-700">
+                <thead class="sticky top-0 z-10 bg-gray-50 dark:bg-dark-900">
                 <tr>
                   <th class="px-4 py-3 text-left text-[11px] font-bold uppercase tracking-wider text-gray-500 dark:text-gray-400">
                     {{ t('admin.ops.requestDetails.table.time') }}
@@ -265,15 +267,16 @@ const kindBadgeClass = (kind: string) => {
                 </tr>
               </tbody>
             </table>
-          </div>
+            </div>
 
-          <Pagination
-            :total="total"
-            :page="page"
-            :page-size="pageSize"
-            @update:page="handlePageChange"
-            @update:pageSize="handlePageSizeChange"
-          />
+            <Pagination
+              :total="total"
+              :page="page"
+              :page-size="pageSize"
+              @update:page="handlePageChange"
+              @update:pageSize="handlePageSizeChange"
+            />
+          </div>
         </div>
       </div>
     </template>