Thing init

src/components/layout/ModuleContainer.vue

@@ -0,0 +1,56 @@
+<script setup lang="ts">
+import { computed } from 'vue'
+import { ScrollArea } from '@/components/ui/scroll-area'
+
+const props = defineProps<{
+  modules: Array<{ id: string; name: string; icon: string; component: unknown }>
+  activeModule: string
+}>()
+
+const activeComponent = computed(() => {
+  const module = props.modules.find(m => m.id === props.activeModule)
+  return module?.component || null
+})
+</script>
+
+<template>
+  <main 
+    class="flex-1"
+    :style="{ backgroundColor: 'var(--effect-bg)', backdropFilter: 'var(--effect-blur)' }"
+  >
+    <ScrollArea class="h-full w-full">
+      <Transition name="fade-slide" mode="out-in">
+        <div 
+          v-if="activeComponent" 
+          :key="activeModule"
+          class="min-h-full w-full"
+        >
+          <component :is="activeComponent" />
+        </div>
+        <div 
+          v-else
+          class="h-full w-full flex items-center justify-center text-muted-foreground"
+        >
+          <p>未找到模块</p>
+        </div>
+      </Transition>
+    </ScrollArea>
+  </main>
+</template>
+
+<style scoped>
+.fade-slide-enter-active,
+.fade-slide-leave-active {
+  transition: all 0.3s ease;
+}
+
+.fade-slide-enter-from {
+  opacity: 0;
+  transform: translateX(20px);
+}
+
+.fade-slide-leave-to {
+  opacity: 0;
+  transform: translateX(-20px);
+}
+</style>