From 7eacaf8fc5334087353c911a4c0dfae1a4ac325e Mon Sep 17 00:00:00 2001
From: jxxghp <jxxghp@gmail.com>
Date: Thu, 13 Jun 2024 19:52:31 +0800
Subject: [PATCH] fix ui

---
 src/layouts/components/Footer.vue            |  2 +-
 src/router/index.ts                          |  8 +------
 src/styles/styles.scss                       |  2 +-
 src/views/discover/TorrentRowListView.vue    | 25 ++++++++------------
 src/views/reorganize/TransferHistoryView.vue | 17 +++++--------
 5 files changed, 19 insertions(+), 35 deletions(-)

diff --git a/src/layouts/components/Footer.vue b/src/layouts/components/Footer.vue
index a7a046f8..3a05f629 100644
--- a/src/layouts/components/Footer.vue
+++ b/src/layouts/components/Footer.vue
@@ -8,7 +8,7 @@ const appMode = computed(() => {
 </script>
 
 <template>
-  <div v-if="appMode" class="w-100" style="block-size: 3.5rem">
+  <div v-if="appMode" class="w-100" style="block-size: calc(3.5rem + env(safe-area-inset-bottom))">
     <VBottomNavigation
       grow
       horizontal
diff --git a/src/router/index.ts b/src/router/index.ts
index f5cb9418..a832dc83 100644
--- a/src/router/index.ts
+++ b/src/router/index.ts
@@ -1,5 +1,5 @@
 import { createRouter, createWebHashHistory } from 'vue-router'
-import { configureNProgress, doneNProgress, startNProgress } from '@/api/nprogress'
+import { configureNProgress } from '@/api/nprogress'
 import store from '@/store'
 
 // Nprogress
@@ -168,17 +168,11 @@ router.beforeEach((to, from, next) => {
   // 总是记录非login路由
   if (to.fullPath != '/login') store.state.auth.originalPath = to.fullPath
   const isAuthenticated = store.state.auth.token !== null
-
   if (to.meta.requiresAuth && !isAuthenticated) {
     next('/login')
   } else {
-    startNProgress()
     next()
   }
 })
 
-router.afterEach(() => {
-  doneNProgress()
-})
-
 export default router
diff --git a/src/styles/styles.scss b/src/styles/styles.scss
index 98d444b8..3e9727ec 100644
--- a/src/styles/styles.scss
+++ b/src/styles/styles.scss
@@ -185,6 +185,6 @@
   border-block-end: 1px solid rgba(var(--v-border-color), var(--v-border-opacity));
 }
 
-.v-fab--bottom {
+.v-fab__container {
   padding-block-end: env(safe-area-inset-bottom);
 }
diff --git a/src/views/discover/TorrentRowListView.vue b/src/views/discover/TorrentRowListView.vue
index 6df04e25..3e4f2673 100644
--- a/src/views/discover/TorrentRowListView.vue
+++ b/src/views/discover/TorrentRowListView.vue
@@ -124,7 +124,7 @@ onMounted(() => {
 </script>
 
 <template>
-  <VRow :style="appMode ? 'margin-bottom: 56px' : ''">
+  <VRow>
     <VCol>
       <VList v-if="dataList.length === 0" lines="three" class="rounded p-0 shadow-lg">
         <VListItem>
@@ -132,7 +132,14 @@ onMounted(() => {
         </VListItem>
       </VList>
       <VList v-if="dataList.length !== 0" lines="three" class="rounded p-0 torrent-list-vscroll shadow-lg">
-        <VVirtualScroll :items="dataList">
+        <VVirtualScroll
+          :items="dataList"
+          :style="
+            appMode
+              ? 'height: calc(100vh - 6rem - env(safe-area-inset-bottom) - 3.5rem)'
+              : 'height: calc(100vh - 6rem - env(safe-area-inset-bottom)'
+          "
+        >
           <template #default="{ item }">
             <TorrentItem :torrent="item" :key="`${item.torrent_info.title}_${item.torrent_info.site}`" />
           </template>
@@ -140,7 +147,7 @@ onMounted(() => {
       </VList>
     </VCol>
     <VCol xl="2" md="3" class="d-none d-md-block">
-      <VList lines="one" class="rounded torrent-list-vscroll shadow-lg">
+      <VList lines="one" class="rounded shadow-lg" style="height: calc(100vh - 6rem - env(safe-area-inset-bottom)">
         <VListSubheader> 排序 </VListSubheader>
         <VListItem>
           <VChipGroup column v-model="sortField">
@@ -265,15 +272,3 @@ onMounted(() => {
     </VCol>
   </VRow>
 </template>
-<style lang="scss">
-.torrent-list-vscroll {
-  block-size: calc(100vh - 6rem);
-  overflow-y: auto;
-}
-
-@media (width <= 768px) {
-  .torrent-list-vscroll {
-    block-size: calc(100vh - 9rem - env(safe-area-inset-bottom));
-  }
-}
-</style>
diff --git a/src/views/reorganize/TransferHistoryView.vue b/src/views/reorganize/TransferHistoryView.vue
index 76552401..3394ebab 100644
--- a/src/views/reorganize/TransferHistoryView.vue
+++ b/src/views/reorganize/TransferHistoryView.vue
@@ -358,7 +358,7 @@ onMounted(fetchData)
 </script>
 
 <template>
-  <VCard :style="appMode ? 'margin-bottom: 56px' : ''">
+  <VCard>
     <VCardItem>
       <VCardTitle>
         <VRow>
@@ -395,6 +395,11 @@ onMounted(fetchData)
       loading-text="加载中..."
       class="data-table-div"
       hover
+      :style="
+        appMode
+          ? 'height: calc(100vh - 14rem - env(safe-area-inset-bottom) - 3.5rem)'
+          : 'height: calc(100vh - 14rem - env(safe-area-inset-bottom)'
+      "
     >
       <template #item.title="{ item }">
         <div class="d-flex align-center">
@@ -531,14 +536,4 @@ onMounted(fetchData)
 .v-table th {
   white-space: nowrap;
 }
-
-.data-table-div {
-  block-size: calc(100vh - 14rem - env(safe-area-inset-bottom));
-}
-
-@media (width <= 768px) {
-  .data-table-div {
-    block-size: calc(100vh - 17rem - env(safe-area-inset-bottom));
-  }
-}
 </style>