theme

src/App.vue

@@ -1,41 +1,76 @@
 <script setup lang="ts">
-import { ref, onMounted } from 'vue'
+import { ref, onMounted, shallowRef, markRaw, type Component } from 'vue'
 import TitleBar from '@/components/layout/TitleBar.vue'
 import Sidebar from '@/components/layout/Sidebar.vue'
 import ModuleContainer from '@/components/layout/ModuleContainer.vue'
-import ProxyModule from '@/modules/proxy/ProxyModule.vue'
-import ClipboardModule from '@/modules/clipboard/ClipboardModule.vue'
-import ScreenshotModule from '@/modules/screenshot/ScreenshotModule.vue'
-import MonitorModule from '@/modules/monitor/MonitorModule.vue'
-import DownloaderModule from '@/modules/downloader/DownloaderModule.vue'
-import FinderModule from '@/modules/finder/FinderModule.vue'
 import GeneralSettings from '@/modules/general/GeneralSettings.vue'
 import { useAppStore } from '@/stores/appStore'
 import { TooltipProvider } from '@/components/ui/tooltip'
 
 const appStore = useAppStore()
 
-const modules = [
-  { id: 'proxy', name: '代理管理', icon: 'proxy', component: ProxyModule },
-  { id: 'clipboard', name: '剪贴板', icon: 'clipboard', component: ClipboardModule },
-  { id: 'screenshot', name: '截图', icon: 'screenshot', component: ScreenshotModule },
-  { id: 'monitor', name: '硬件监控', icon: 'monitor', component: MonitorModule },
-  { id: 'downloader', name: '下载器', icon: 'downloader', component: DownloaderModule },
-  { id: 'finder', name: '文件搜索', icon: 'finder', component: FinderModule },
-  { id: 'settings', name: '常规设置', icon: 'settings', component: GeneralSettings }
+interface ModuleMeta {
+  id: string
+  name: string
+  icon: string
+  // 同步加载的模块直接传 Component；懒加载的传 import 工厂
+  loader?: () => Promise<{ default: Component }>
+  component?: Component
+}
+
+// 常规设置是默认可见且轻量的，直接同步引入
+// 其他业务模块较大且首屏不一定需要，懒加载
+const modules: ModuleMeta[] = [
+  { id: 'proxy', name: '代理管理', icon: 'proxy', loader: () => import('@/modules/proxy/ProxyModule.vue') },
+  { id: 'clipboard', name: '剪贴板', icon: 'clipboard', loader: () => import('@/modules/clipboard/ClipboardModule.vue') },
+  { id: 'screenshot', name: '截图', icon: 'screenshot', loader: () => import('@/modules/screenshot/ScreenshotModule.vue') },
+  { id: 'monitor', name: '硬件监控', icon: 'monitor', loader: () => import('@/modules/monitor/MonitorModule.vue') },
+  { id: 'downloader', name: '下载器', icon: 'downloader', loader: () => import('@/modules/downloader/DownloaderModule.vue') },
+  { id: 'finder', name: '文件搜索', icon: 'finder', loader: () => import('@/modules/finder/FinderModule.vue') },
+  { id: 'settings', name: '常规设置', icon: 'settings', component: markRaw(GeneralSettings) }
 ]
 
 const activeModule = ref('proxy')
 
+// 当前激活的组件实例（shallowRef 适合大组件）
+const activeComponent = shallowRef<Component | null>(null)
+
+// 加载模块组件
+const loadModule = async (moduleId: string) => {
+  const m = modules.find(mod => mod.id === moduleId)
+  if (!m) {
+    activeComponent.value = null
+    return
+  }
+  if (m.component) {
+    activeComponent.value = m.component
+    return
+  }
+  if (m.loader) {
+    try {
+      const mod = await m.loader()
+      // 缓存到 component，避免重复加载
+      m.component = markRaw(mod.default)
+      activeComponent.value = m.component
+    } catch (e) {
+      console.error(`Failed to load module ${moduleId}:`, e)
+    }
+  }
+}
+
 const handleModuleChange = (moduleId: string) => {
   activeModule.value = moduleId
+  loadModule(moduleId)
 }
 
 const handleSearch = (moduleId: string) => {
   activeModule.value = moduleId
+  loadModule(moduleId)
 }
 
 onMounted(() => {
+  // 首次加载默认模块
+  loadModule(activeModule.value)
   appStore.init().catch(e => console.error('App init error:', e))
 })
 </script>
@@ -50,7 +85,7 @@ onMounted(() => {
           :active-module="activeModule" 
           @change="handleModuleChange"
         />
-        <ModuleContainer :modules="modules" :active-module="activeModule" />
+        <ModuleContainer :active-component="activeComponent" :active-module="activeModule" />
       </div>
     </div>
   </TooltipProvider>