优化可用高度计算

src/views/reorganize/TransferHistoryView.vue

@@ -214,10 +214,28 @@ const TransferDict: { [key: string]: string } = {
   rclone_move: t('transferHistory.transferMode.rclone_move'),
 }
 
-const tableStyle = computed(() => {
-  return appMode.value
-    ? 'height: calc(100vh - 15rem - env(safe-area-inset-bottom) - 7rem)'
-    : 'height: calc(100vh - 15rem - env(safe-area-inset-bottom)'
+// 计算列表可用高度
+const availableHeight = computed(() => {
+  // 获取视口高度
+  const viewportHeight = window.innerHeight || document.documentElement.clientHeight
+
+  // navbar高度
+  const navbarHeight = 72
+  // 工具栏高度
+  const toolbarHeight = 88
+  // 底部导航栏高度
+  const footerHeight = appMode.value ? 80 : 16
+  // 安全区域高度
+  const safeAreaHeight =
+    parseFloat(getComputedStyle(document.documentElement).getPropertyValue('--safe-area-inset-bottom')) ||
+    parseFloat(getComputedStyle(document.documentElement).getPropertyValue('--safe-area-inset-top')) ||
+    0
+
+  // 计算可用高度，预留一些边距
+  const availableHeight = viewportHeight - navbarHeight - toolbarHeight - footerHeight - safeAreaHeight - 48
+
+  // 确保最小高度
+  return Math.max(availableHeight, 300)
 })
 
 // 分页提示
@@ -509,7 +527,7 @@ onMounted(() => {
       show-select
       :loading-text="t('transferHistory.loading')"
       hover
-      :style="tableStyle"
+      :style="{ height: `${availableHeight}px` }"
     >
       <template #header.data-table-group>
         <span>{{ t('transferHistory.titleColumn') }}</span>
@@ -608,7 +626,7 @@ onMounted(() => {
       show-select
       :loading-text="t('transferHistory.loading')"
       hover
-      :style="tableStyle"
+      :style="{ height: `${availableHeight}px` }"
     >
       <template #item.title="{ item }">
         <div class="d-flex align-center">