feat(Footer): 使用 VMenu 组件替代 VBottomSheet 以优化更多菜单的展示

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,27 +54,18 @@ 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' : ''"
         />
-      </VBtn>
+        <VMenu v-model="moreMenuDialog" close-on-content-click activator="parent">
-    </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
+              class="pe-20"
               v-for="(menu, index) in moreMemus"
               :key="index"
               :prepend-icon="menu.icon"
@@ -86,7 +78,9 @@ const toggleMoreMenu = () => {
               </VListItemTitle>
             </VListItem>
           </VList>
-    </VBottomSheet>
+        </VMenu>
+      </VBtn>
+    </VBottomNavigation>
   </div>
 </template>