From c314d49e11ab9f9cbbd5c1d98856bf9b0b647a80 Mon Sep 17 00:00:00 2001
From: jxxghp <jxxghp@gmail.com>
Date: Tue, 18 Feb 2025 07:56:11 +0800
Subject: [PATCH] =?UTF-8?q?feat(Footer):=20=E4=BD=BF=E7=94=A8=20VMenu=20?=
 =?UTF-8?q?=E7=BB=84=E4=BB=B6=E6=9B=BF=E4=BB=A3=20VBottomSheet=20=E4=BB=A5?=
 =?UTF-8?q?=E4=BC=98=E5=8C=96=E6=9B=B4=E5=A4=9A=E8=8F=9C=E5=8D=95=E7=9A=84?=
 =?UTF-8?q?=E5=B1=95=E7=A4=BA?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/layouts/components/Footer.vue | 48 ++++++++++++++-----------------
 1 file changed, 21 insertions(+), 27 deletions(-)

diff --git a/src/layouts/components/Footer.vue b/src/layouts/components/Footer.vue
index 57cebcf3..133155b1 100644
--- a/src/layouts/components/Footer.vue
+++ b/src/layouts/components/Footer.vue
@@ -1,6 +1,7 @@
 <script setup lang="ts">
 import { SystemNavMenus } from '@/router/menu'
 import { useDisplay } from 'vuetify'
+import { VMenu } from 'vuetify/lib/components/index.mjs'
 
 const display = useDisplay()
 const appMode = inject('pwaMode') && display.mdAndDown.value
@@ -53,40 +54,33 @@ const toggleMoreMenu = () => {
         <VIcon v-if="activeState.tv" size="28">mdi-television-play</VIcon>
         <VIcon v-else size="28">mdi-television</VIcon>
       </VBtn>
-      <VBtn @click="toggleMoreMenu" :ripple="false">
+      <VBtn :ripple="false">
         <VIcon
           size="28"
           :icon="moreMenuDialog ? 'mdi-close' : 'mdi-dots-horizontal'"
           :color="moreMenuDialog ? 'primary' : ''"
         />
+        <VMenu v-model="moreMenuDialog" close-on-content-click activator="parent">
+          <VDivider />
+          <VList class="font-bold" lines="one">
+            <VListSubheader class="bg-transparent"> 更多 </VListSubheader>
+            <VListItem
+              class="pe-20"
+              v-for="(menu, index) in moreMemus"
+              :key="index"
+              :prepend-icon="menu.icon"
+              nav
+              :to="menu.to"
+              :base-color="currentPath === menu.to ? 'primary' : undefined"
+            >
+              <VListItemTitle>
+                <span class="text-lg">{{ menu.title }}</span>
+              </VListItemTitle>
+            </VListItem>
+          </VList>
+        </VMenu>
       </VBtn>
     </VBottomNavigation>
-    <VBottomSheet
-      v-if="moreMenuDialog"
-      v-model="moreMenuDialog"
-      inset
-      close-on-content-click
-      :scrim="false"
-      style="margin-bottom: calc(3.5rem + env(safe-area-inset-bottom))"
-      content-class="elevation-0"
-    >
-      <VDivider />
-      <VList class="font-bold" lines="one">
-        <VListSubheader class="bg-transparent"> 更多 </VListSubheader>
-        <VListItem
-          v-for="(menu, index) in moreMemus"
-          :key="index"
-          :prepend-icon="menu.icon"
-          nav
-          :to="menu.to"
-          :base-color="currentPath === menu.to ? 'primary' : undefined"
-        >
-          <VListItemTitle>
-            <span class="text-lg">{{ menu.title }}</span>
-          </VListItemTitle>
-        </VListItem>
-      </VList>
-    </VBottomSheet>
   </div>
 </template>