fix ui

src/@layouts/components/VerticalNav.vue

@@ -33,25 +33,6 @@ const updateIsVerticalNavScrolled = (val: boolean) => (isVerticalNavScrolled.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(() => {
-  checkScreenSize()
-  window.addEventListener('resize', checkScreenSize)
-})
-
-// 在组件销毁前移除窗口大小变化监听器
-onBeforeUnmount(() => {
-  window.removeEventListener('resize', checkScreenSize)
-})
 </script>
 
 <template>
@@ -86,7 +67,6 @@ onBeforeUnmount(() => {
     </slot>
     <slot name="nav-items" :update-is-vertical-nav-scrolled="updateIsVerticalNavScrolled">
       <PerfectScrollbar
-        v-if="isLargeScreen"
         tag="ul"
         class="nav-items"
         :options="{ wheelPropagation: false }"
@@ -95,7 +75,6 @@ onBeforeUnmount(() => {
         <slot />
       </PerfectScrollbar>
       <ul
-        v-if="!isLargeScreen"
         class="nav-items"
       >
         <slot />

src/App.vue

@@ -10,6 +10,9 @@ globalTheme.name.value = localStorage.getItem('theme') || 'light'
 // 提示框
 const $toast = useToast()
 
+// 是否加载完成
+const isLoaded = ref(false)
+
 // SSE持续接收消息
 function startSSEMessager() {
   const token = store.state.auth.token
@@ -30,14 +33,42 @@ function startSSEMessager() {
   }
 }
 
+// 是否LG大屏幕
+const isLargeScreen = ref(false)
+// 检测屏幕大小
+function checkScreenSize() {
+  const screenWidth = window.innerWidth
+  isLargeScreen.value = screenWidth >= 1024
+}
+
 // 页面加载时，加载当前用户数据
 onBeforeMount(async () => {
+  checkScreenSize()
   startSSEMessager()
+  // 如果是小屏幕，1秒后才显示界面
+  if (!isLargeScreen.value) {
+    setTimeout(() => {
+      isLoaded.value = true
+    }, 1000)
+  }
+  else {
+    isLoaded.value = true
+  }
 })
 </script>
 
 <template>
-  <VApp>
+  <div
+    v-if="!isLoaded"
+    class="mt-12 w-full text-center text-gray-500 text-sm flex flex-col items-center"
+  >
+    <VProgressCircular
+      size="48"
+      indeterminate
+      color="primary"
+    />
+  </div>
+  <VApp v-show="isLoaded">
     <RouterView />
   </VApp>
 </template>