优化调整

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"

src/components/layout/Sidebar.vue

@@ -36,7 +36,7 @@ const displayModules = computed(() => {
                 'bg-primary text-primary-foreground shadow-md': activeModule === module.id,
                 'hover:bg-secondary/50': activeModule !== module.id
               }"
-              @click="emit('change', module.id)"
+              @click="activeModule !== module.id && emit('change', module.id)"
             >
               <component :is="getModuleIcon(module.icon)" class="size-4" />
             </Button>
@@ -60,7 +60,7 @@ const displayModules = computed(() => {
             'bg-primary text-primary-foreground shadow-md': activeModule === 'settings',
             'hover:bg-secondary/50': activeModule !== 'settings'
           }"
-          @click="emit('change', 'settings')"
+          @click="activeModule !== 'settings' && emit('change', 'settings')"
         >
           <Settings class="size-4" />
         </Button>

src/components/ui/empty/Empty.vue

@@ -0,0 +1,20 @@
+<script setup lang="ts">
+import type { HTMLAttributes } from "vue"
+import { cn } from "@/lib/utils"
+
+const props = defineProps<{
+  class?: HTMLAttributes["class"]
+}>()
+</script>
+
+<template>
+  <div
+    data-slot="empty"
+    :class="cn(
+      'flex min-w-0 flex-1 flex-col items-center justify-center gap-6 text-balance rounded-lg border-dashed p-6 text-center md:p-12',
+      props.class,
+    )"
+  >
+    <slot />
+  </div>
+</template>

src/components/ui/empty/EmptyContent.vue

@@ -0,0 +1,20 @@
+<script setup lang="ts">
+import type { HTMLAttributes } from "vue"
+import { cn } from "@/lib/utils"
+
+const props = defineProps<{
+  class?: HTMLAttributes["class"]
+}>()
+</script>
+
+<template>
+  <div
+    data-slot="empty-content"
+    :class="cn(
+      'flex w-full min-w-0 max-w-sm flex-col items-center gap-4 text-balance text-sm',
+      props.class,
+    )"
+  >
+    <slot />
+  </div>
+</template>

src/components/ui/empty/EmptyDescription.vue

@@ -0,0 +1,20 @@
+<script setup lang="ts">
+import type { HTMLAttributes } from "vue"
+import { cn } from "@/lib/utils"
+
+defineProps<{
+  class?: HTMLAttributes["class"]
+}>()
+</script>
+
+<template>
+  <p
+    data-slot="empty-description"
+    :class="cn(
+      'text-muted-foreground [&>a:hover]:text-primary text-sm/relaxed [&>a]:underline [&>a]:underline-offset-4',
+      $attrs.class ?? '',
+    )"
+  >
+    <slot />
+  </p>
+</template>

src/components/ui/empty/EmptyHeader.vue

@@ -0,0 +1,20 @@
+<script setup lang="ts">
+import type { HTMLAttributes } from "vue"
+import { cn } from "@/lib/utils"
+
+const props = defineProps<{
+  class?: HTMLAttributes["class"]
+}>()
+</script>
+
+<template>
+  <div
+    data-slot="empty-header"
+    :class="cn(
+      'flex max-w-sm flex-col items-center gap-2 text-center',
+      props.class,
+    )"
+  >
+    <slot />
+  </div>
+</template>

src/components/ui/empty/EmptyMedia.vue

@@ -0,0 +1,21 @@
+<script setup lang="ts">
+import type { HTMLAttributes } from "vue"
+import type { EmptyMediaVariants } from "."
+import { cn } from "@/lib/utils"
+import { emptyMediaVariants } from "."
+
+const props = defineProps<{
+  class?: HTMLAttributes["class"]
+  variant?: EmptyMediaVariants["variant"]
+}>()
+</script>
+
+<template>
+  <div
+    data-slot="empty-icon"
+    :data-variant="variant"
+    :class="cn(emptyMediaVariants({ variant }), props.class)"
+  >
+    <slot />
+  </div>
+</template>

src/components/ui/empty/EmptyTitle.vue

@@ -0,0 +1,17 @@
+<script setup lang="ts">
+import type { HTMLAttributes } from "vue"
+import { cn } from "@/lib/utils"
+
+const props = defineProps<{
+  class?: HTMLAttributes["class"]
+}>()
+</script>
+
+<template>
+  <div
+    data-slot="empty-title"
+    :class="cn('text-lg font-medium tracking-tight', props.class)"
+  >
+    <slot />
+  </div>
+</template>

src/components/ui/empty/index.ts

@@ -0,0 +1,26 @@
+import type { VariantProps } from "class-variance-authority"
+import { cva } from "class-variance-authority"
+
+export { default as Empty } from "./Empty.vue"
+export { default as EmptyContent } from "./EmptyContent.vue"
+export { default as EmptyDescription } from "./EmptyDescription.vue"
+export { default as EmptyHeader } from "./EmptyHeader.vue"
+export { default as EmptyMedia } from "./EmptyMedia.vue"
+export { default as EmptyTitle } from "./EmptyTitle.vue"
+
+export const emptyMediaVariants = cva(
+  "mb-2 flex shrink-0 items-center justify-center [&_svg]:pointer-events-none [&_svg]:shrink-0",
+  {
+    variants: {
+      variant: {
+        default: "bg-transparent",
+        icon: "bg-muted text-foreground flex size-10 shrink-0 items-center justify-center rounded-lg [&_svg:not([class*='size-'])]:size-6",
+      },
+    },
+    defaultVariants: {
+      variant: "default",
+    },
+  },
+)
+
+export type EmptyMediaVariants = VariantProps<typeof emptyMediaVariants>

src/components/ui/skeleton/Skeleton.vue

@@ -0,0 +1,15 @@
+<script setup lang="ts">
+import type { HTMLAttributes } from "vue"
+import { cn } from "@/lib/utils"
+
+const props = defineProps<{
+  class?: HTMLAttributes["class"]
+}>()
+</script>
+
+<template>
+  <div
+    data-slot="skeleton"
+    :class="cn('animate-pulse rounded-md bg-muted', props.class)"
+  />
+</template>

src/components/ui/skeleton/index.ts

@@ -0,0 +1 @@
+export { default as Skeleton } from "./Skeleton.vue"