优化调整

src/components/layout/ModuleContainer.vue

@@ -1,15 +1,32 @@
 <script setup lang="ts">
 import type { Component } from 'vue'
+import { ref, watch } from 'vue'
 import { ScrollArea } from '@/components/ui/scroll-area'
+import { Skeleton } from '@/components/ui/skeleton'
 
-defineProps<{
+const props = defineProps<{
   activeComponent: Component | null
   activeModule: string
+  loading: boolean
 }>()
+
+const containerRef = ref<HTMLElement | null>(null)
+
+// 切换模块时重置主滚动区位置，避免新模块沿用上一个模块的滚动距离
+watch(
+  () => props.activeModule,
+  () => {
+    const viewport = containerRef.value?.querySelector<HTMLElement>(
+      '[data-slot="scroll-area-viewport"]'
+    )
+    if (viewport) viewport.scrollTop = 0
+  }
+)
 </script>
 
 <template>
   <main
+    ref="containerRef"
     class="flex-1"
     :style="{ backgroundColor: 'var(--effect-bg)', backdropFilter: 'var(--effect-blur)' }"
   >
@@ -22,6 +39,30 @@ defineProps<{
         >
           <component :is="activeComponent" />
         </div>
+        <div
+          v-else-if="loading"
+          key="loading"
+          class="h-full w-full p-6"
+        >
+          <!-- 模块加载骨架：撑起画面，避免空白闪屏 -->
+          <div class="h-full max-w-5xl mx-auto space-y-5">
+            <div class="flex items-center gap-3">
+              <Skeleton class="h-8 w-40" />
+              <Skeleton class="h-6 w-24 ml-auto" />
+            </div>
+            <div class="grid gap-4 md:grid-cols-2">
+              <div v-for="n in 4" :key="n" class="rounded-lg border p-5 space-y-4">
+                <div class="flex items-center justify-between">
+                  <Skeleton class="h-5 w-32" />
+                  <Skeleton class="h-5 w-16" />
+                </div>
+                <Skeleton class="h-4 w-full" />
+                <Skeleton class="h-4 w-5/6" />
+                <Skeleton class="h-4 w-2/3" />
+              </div>
+            </div>
+          </div>
+        </div>
         <div
           v-else
           key="empty"