add app mode

src/layouts/components/DefaultLayoutWithVerticalNav.vue

@@ -19,6 +19,9 @@ const superUser = store.state.auth.superUser
 const getMenuList = (header: string) => {
   return SystemNavMenus.filter((item: NavMenu) => item.header === header && (!item.admin || superUser))
 }
+
+// APP模式
+const appMode = computed(() => localStorage.getItem('MP_APPMODE') == '1')
 </script>
 
 <template>
@@ -27,7 +30,7 @@ const getMenuList = (header: string) => {
     <template #navbar="{ toggleVerticalOverlayNavActive }">
       <div class="d-flex h-100 align-center mx-1">
         <!-- 👉 Vertical Nav Toggle -->
-        <IconBtn class="ms-n2 d-lg-none" @click="toggleVerticalOverlayNavActive(true)">
+        <IconBtn v-if="!appMode" class="ms-n2 d-lg-none" @click="toggleVerticalOverlayNavActive(true)">
           <VIcon icon="mdi-menu" />
         </IconBtn>
         <!-- 👉 Search Bar -->

src/layouts/components/Footer.vue

@@ -1,3 +1,35 @@
+<script setup lang="ts">
+import { useDisplay } from 'vuetify'
+
+const display = useDisplay()
+const appMode = computed(() => {
+  return localStorage.getItem('MP_APPMODE') == '1' && display.mdAndDown.value
+})
+</script>
+
 <template>
-  <div class="h-100 d-flex align-center justify-space-between" />
+  <div v-if="appMode" class="w-100" style="block-size: 3.5rem">
+    <VBottomNavigation grow horizontal color="primary">
+      <VBtn to="/dashboard">
+        <VIcon size="28">mdi-home-outline</VIcon>
+        <span>首页</span>
+      </VBtn>
+      <VBtn to="/ranking">
+        <VIcon size="28">mdi-star-check-outline</VIcon>
+        <span>推荐</span>
+      </VBtn>
+      <VBtn to="/subscribe-movie?tab=mysub">
+        <VIcon size="28">mdi-movie-roll</VIcon>
+        <span><span></span>电影</span>
+      </VBtn>
+      <VBtn to="/subscribe-tv?tab=mysub">
+        <VIcon size="28">mdi-television-classic</VIcon>
+        <span>电视剧</span>
+      </VBtn>
+      <VBtn to="/apps">
+        <VIcon size="28">mdi-dots-horizontal</VIcon>
+        <span>更多</span>
+      </VBtn>
+    </VBottomNavigation>
+  </div>
 </template>

src/layouts/components/UserProfile.vue

@@ -6,6 +6,9 @@ import router from '@/router'
 import avatar1 from '@images/avatars/avatar-1.png'
 import api from '@/api'
 import ProgressDialog from '@/components/dialog/ProgressDialog.vue'
+import { useDisplay } from 'vuetify'
+
+const display = useDisplay()
 
 // Vuex Store
 const store = useStore()
@@ -58,10 +61,20 @@ async function restart() {
   }
 }
 
+// 是否精简模式
+const isCompactMode = ref(localStorage.getItem('MP_APPMODE') == '1')
+
 // 从Vuex Store中获取信息
 const superUser = store.state.auth.superUser
 const userName = store.state.auth.userName
 const avatar = store.state.auth.avatar
+
+// 监听精简模式切换
+watch(isCompactMode, value => {
+  localStorage.setItem('MP_APPMODE', value ? '1' : '0')
+  //刷新页面
+  location.reload()
+})
 </script>
 
 <template>
@@ -86,6 +99,12 @@ const avatar = store.state.auth.avatar
           </VListItemTitle>
           <VListItemSubtitle>{{ userName }}</VListItemSubtitle>
         </VListItem>
+        <VListItem v-if="display.mdAndDown.value">
+          <template #prepend>
+            <VSwitch class="me-2" v-model="isCompactMode"></VSwitch>
+          </template>
+          <VListItemTitle>App模式</VListItemTitle>
+        </VListItem>
         <VDivider class="my-2" />
 
         <!-- 👉 Profile -->
@@ -105,7 +124,7 @@ const avatar = store.state.auth.avatar
         </VListItem>
 
         <!-- Divider -->
-        <VDivider class="my-2" />
+        <VDivider v-if="superUser" class="my-2" />
 
         <!-- 👉 restart -->
         <VListItem v-if="superUser" @click="restart">
@@ -115,9 +134,6 @@ const avatar = store.state.auth.avatar
           <VListItemTitle>重启</VListItemTitle>
         </VListItem>
 
-        <!-- Divider -->
-        <VDivider class="my-2" />
-
         <!-- 👉 Logout -->
         <VListItem @click="logout">
           <VBtn color="error" block>