Merge branch 'main' of https://github.com/jxxghp/MoviePilot-Frontend

src/@layouts/components/VerticalNav.vue

@@ -15,16 +15,9 @@ const props = withDefaults(defineProps<Props>(), {
 })
 
 const { mdAndDown } = useDisplay()
-
 const refNav = ref()
-
-const menuShow = ref(false)
-
-/*
-  ℹ️ Close overlay side when route is changed
-  Close overlay vertical nav when link is clicked
-*/
 const route = useRoute()
+const menuShow = ref(false)
 
 watch(
   () => route.path,
@@ -33,15 +26,36 @@ watch(
   },
 )
 
+// 是否滚动
 const isVerticalNavScrolled = ref(false)
 const updateIsVerticalNavScrolled = (val: boolean) => (isVerticalNavScrolled.value = val)
 
+// 滚动响应
 function handleNavScroll(evt: Event) {
   isVerticalNavScrolled.value = (evt.target as HTMLElement).scrollTop > 0
 }
 
+// 是否LG大屏幕
+const isLargeScreen = ref(false)
+// 检测屏幕大小
+function checkScreenSize() {
+  const screenWidth = window.innerWidth
+  isLargeScreen.value = screenWidth >= 1024
+}
+
+// 在组件挂载时执行检查
 onMounted(() => {
-  menuShow.value = true
+  checkScreenSize()
+  if (!isLargeScreen.value) {
+    // 1秒后显示菜单
+    setTimeout(() => {
+      menuShow.value = true
+    }, 1000)
+  }
+  else {
+    // 立即显示菜单
+    menuShow.value = true
+  }
 })
 </script>
 
@@ -60,7 +74,9 @@ onMounted(() => {
     ]"
   >
     <!-- 👉 Header -->
-    <div class="nav-header">
+    <div
+      class="nav-header"
+    >
       <slot name="nav-header">
         <RouterLink to="/" class="app-logo d-flex align-center app-title-wrapper">
           <div class="d-flex" v-html="logo" />
@@ -77,13 +93,15 @@ onMounted(() => {
     <slot name="nav-items" :update-is-vertical-nav-scrolled="updateIsVerticalNavScrolled">
       <PerfectScrollbar
         tag="ul"
-        class="nav-items d-none d-lg-block"
+        class="d-none d-lg-block nav-items"
         :options="{ wheelPropagation: false }"
         @ps-scroll-y="handleNavScroll"
       >
         <slot />
       </PerfectScrollbar>
-      <ul class="nav-items d-lg-none overflow-auto">
+      <ul
+        class="d-lg-none overflow-auto nav-items"
+      >
         <slot />
       </ul>
     </slot>