From 12dfc5b407e5a8f6a0c347703e4f79220c042d31 Mon Sep 17 00:00:00 2001
From: jxxghp <jxxghp@gmail.com>
Date: Thu, 13 Jun 2024 19:11:00 +0800
Subject: [PATCH] fix app mode ui

---
 src/layouts/components/Footer.vue            |  9 ++++++++-
 src/layouts/components/UserProfile.vue       |  2 +-
 src/styles/styles.scss                       | 10 +++++-----
 src/views/discover/TorrentRowListView.vue    | 15 ++++++++++++---
 src/views/reorganize/TransferHistoryView.vue |  6 +++---
 src/views/setting/AccountSettingAbout.vue    |  2 +-
 6 files changed, 30 insertions(+), 14 deletions(-)

diff --git a/src/layouts/components/Footer.vue b/src/layouts/components/Footer.vue
index 738a43fa..8f601ca6 100644
--- a/src/layouts/components/Footer.vue
+++ b/src/layouts/components/Footer.vue
@@ -9,7 +9,7 @@ const appMode = computed(() => {
 
 <template>
   <div v-if="appMode" class="w-100" style="block-size: 3.5rem">
-    <VBottomNavigation grow horizontal color="primary">
+    <VBottomNavigation grow horizontal color="primary" class="footer-nav border-t">
       <VBtn to="/dashboard">
         <VIcon size="28">mdi-home-outline</VIcon>
         <span>首页</span>
@@ -33,3 +33,10 @@ const appMode = computed(() => {
     </VBottomNavigation>
   </div>
 </template>
+<
+<style lang="scss" scoped>
+.footer-nav {
+  padding-block-end: env(safe-area-inset-bottom);
+}
+</style>
+}
diff --git a/src/layouts/components/UserProfile.vue b/src/layouts/components/UserProfile.vue
index 5032b1da..1114441a 100644
--- a/src/layouts/components/UserProfile.vue
+++ b/src/layouts/components/UserProfile.vue
@@ -116,7 +116,7 @@ watch(isCompactMode, value => {
         </VListItem>
 
         <!-- 👉 FAQ -->
-        <VListItem href="https://github.com/jxxghp/MoviePilot/blob/main/README.md" target="_blank">
+        <VListItem href="https://wiki.movie-pilot.org" target="_blank">
           <template #prepend>
             <VIcon class="me-2" icon="mdi-help-circle-outline" size="22" />
           </template>
diff --git a/src/styles/styles.scss b/src/styles/styles.scss
index d57d4cd6..98d444b8 100644
--- a/src/styles/styles.scss
+++ b/src/styles/styles.scss
@@ -24,14 +24,11 @@
 }
 
 .v-dialog > .v-overlay__content {
+  inline-size: calc(100% - 1rem);
   margin-block-start: calc(env(safe-area-inset-top) + 1rem);
   max-block-size: calc(100% - env(safe-area-inset-top) - 1rem);
 }
 
-.v-dialog > .v-overlay__content{
-  inline-size: calc(100% - 1rem);
-}
-
 .v-dialog--fullscreen > .v-overlay__content{
   inline-size: 100%;
   margin-block-start: env(safe-area-inset-top);
@@ -65,7 +62,6 @@
   color: transparent;
 
   --tw-gradient-from: #818cf8;
-  --tw-gradient-to: rgba(129,140,248,0%);
   --tw-gradient-stops: var(--tw-gradient-from),var(--tw-gradient-to);
   --tw-gradient-to: #c084fc;
 }
@@ -188,3 +184,7 @@
 .v-tabs:not(.v-tabs-pill).v-tabs--horizontal {
   border-block-end: 1px solid rgba(var(--v-border-color), var(--v-border-opacity));
 }
+
+.v-fab--bottom {
+  padding-block-end: env(safe-area-inset-bottom);
+}
diff --git a/src/views/discover/TorrentRowListView.vue b/src/views/discover/TorrentRowListView.vue
index 0c2c9743..c872d6c1 100644
--- a/src/views/discover/TorrentRowListView.vue
+++ b/src/views/discover/TorrentRowListView.vue
@@ -1,6 +1,15 @@
 <script lang="ts" setup>
 import type { Context } from '@/api/types'
 import TorrentItem from '@/components/cards/TorrentItem.vue'
+import { useDisplay } from 'vuetify'
+
+// 显示器宽度
+const display = useDisplay()
+
+// APP
+const appMode = computed(() => {
+  return localStorage.getItem('MP_APPMODE') == '1' && display.mdAndDown.value
+})
 
 // 定义输入参数
 const props = defineProps({
@@ -115,7 +124,7 @@ onMounted(() => {
 </script>
 
 <template>
-  <VRow>
+  <VRow :style="appMode ? 'margin-bottom: 56px' : ''">
     <VCol>
       <VList v-if="dataList.length === 0" lines="three" class="rounded p-0 shadow-lg">
         <VListItem>
@@ -263,8 +272,8 @@ onMounted(() => {
 }
 
 @media (width <= 768px) {
-  .orrent-list-vscroll {
-    block-size: calc(100vh - 10rem);
+  .torrent-list-vscroll {
+    block-size: calc(100vh - 8rem - env(safe-area-inset-bottom));
   }
 }
 </style>
diff --git a/src/views/reorganize/TransferHistoryView.vue b/src/views/reorganize/TransferHistoryView.vue
index 28c79dc0..28c45660 100644
--- a/src/views/reorganize/TransferHistoryView.vue
+++ b/src/views/reorganize/TransferHistoryView.vue
@@ -358,7 +358,7 @@ onMounted(fetchData)
 </script>
 
 <template>
-  <VCard>
+  <VCard :style="appMode ? 'margin-bottom: 56px' : ''">
     <VCardItem>
       <VCardTitle>
         <VRow>
@@ -533,12 +533,12 @@ onMounted(fetchData)
 }
 
 .data-table-div {
-  block-size: calc(100vh - 14rem);
+  block-size: calc(100vh - 14rem - env(safe-area-inset-bottom));
 }
 
 @media (width <= 768px) {
   .data-table-div {
-    block-size: calc(100vh - 17rem);
+    block-size: calc(100vh - 16rem - env(safe-area-inset-bottom));
   }
 }
 </style>
diff --git a/src/views/setting/AccountSettingAbout.vue b/src/views/setting/AccountSettingAbout.vue
index 243c35fd..907a9976 100644
--- a/src/views/setting/AccountSettingAbout.vue
+++ b/src/views/setting/AccountSettingAbout.vue
@@ -170,7 +170,7 @@ onMounted(() => {
                     rel="noreferrer"
                     class="text-indigo-500 transition duration-300 hover:underline"
                   >
-                    https://github.com/jxxghp/MoviePilot/blob/main/README.md
+                    https://wiki.movie-pilot.org
                   </a>
                 </span>
               </dd>