优化

src/apps/AppRegistry.ts

@@ -23,9 +23,10 @@ export class AppRegistry {
    */
   registerApp(registration: AppRegistration): void {
     // 使用 markRaw 标记组件，避免被设为响应式
+    // 注意：对于异步组件，我们不立即标记为raw，而是在实际加载时处理
     const safeRegistration = {
       ...registration,
-      component: registration.component ? markRaw(registration.component) : registration.component
+      component: registration.component,
     }
     this.apps.set(registration.manifest.id, safeRegistration)
     console.log(`已注册内置应用: ${registration.manifest.name}`)
@@ -49,7 +50,7 @@ export class AppRegistry {
    * 获取所有内置应用
    */
   getBuiltInApps(): AppRegistration[] {
-    return Array.from(this.apps.values()).filter(app => app.isBuiltIn)
+    return Array.from(this.apps.values()).filter((app) => app.isBuiltIn)
   }
 
   /**
@@ -63,9 +64,7 @@ export class AppRegistry {
    * 按类别获取应用
    */
   getAppsByCategory(category: string): AppRegistration[] {
-    return Array.from(this.apps.values()).filter(
-      app => app.manifest.category === category
-    )
+    return Array.from(this.apps.values()).filter((app) => app.manifest.category === category)
   }
 
   /**
@@ -73,14 +72,12 @@ export class AppRegistry {
    */
   searchApps(query: string): AppRegistration[] {
     const lowercaseQuery = query.toLowerCase()
-    return Array.from(this.apps.values()).filter(app => {
+    return Array.from(this.apps.values()).filter((app) => {
       const manifest = app.manifest
       return (
         manifest.name.toLowerCase().includes(lowercaseQuery) ||
         manifest.description.toLowerCase().includes(lowercaseQuery) ||
-        manifest.keywords?.some(keyword => 
-          keyword.toLowerCase().includes(lowercaseQuery)
-        )
+        manifest.keywords?.some((keyword) => keyword.toLowerCase().includes(lowercaseQuery))
       )
     })
   }
@@ -94,4 +91,4 @@ export class AppRegistry {
 }
 
 // 导出单例实例
-export const appRegistry = AppRegistry.getInstance()
+export const appRegistry = AppRegistry.getInstance()

src/apps/index.ts

@@ -1,8 +1,5 @@
 import { appRegistry } from './AppRegistry'
 import { markRaw } from 'vue'
-import Calculator from './calculator/Calculator.vue'
-import Notepad from './notepad/Notepad.vue'
-import Todo from './todo/Todo.vue'
 
 /**
  * 注册所有内置应用
@@ -25,13 +22,17 @@ export function registerBuiltInApps() {
         minHeight: 480,
         resizable: true,
         minimizable: true,
-        maximizable: false
+        maximizable: false,
       },
       category: 'utilities',
-      keywords: ['计算器', '数学', '运算', 'calculator', 'math']
+      keywords: ['计算器', '数学', '运算', 'calculator', 'math'],
     },
-    component: markRaw(Calculator),
-    isBuiltIn: true
+    // 使用动态导入实现懒加载
+    component: async () => {
+      const { default: Calculator } = await import('./calculator/Calculator.vue')
+      return markRaw(Calculator)
+    },
+    isBuiltIn: true,
   })
 
   // 注册记事本应用
@@ -49,13 +50,17 @@ export function registerBuiltInApps() {
         height: 600,
         minWidth: 400,
         minHeight: 300,
-        resizable: true
+        resizable: true,
       },
       category: 'productivity',
-      keywords: ['记事本', '文本编辑', '笔记', 'notepad', 'text', 'editor']
+      keywords: ['记事本', '文本编辑', '笔记', 'notepad', 'text', 'editor'],
     },
-    component: markRaw(Notepad),
-    isBuiltIn: true
+    // 使用动态导入实现懒加载
+    component: async () => {
+      const { default: Notepad } = await import('./notepad/Notepad.vue')
+      return markRaw(Notepad)
+    },
+    isBuiltIn: true,
   })
 
   // 注册待办事项应用
@@ -73,13 +78,17 @@ export function registerBuiltInApps() {
         height: 700,
         minWidth: 400,
         minHeight: 500,
-        resizable: true
+        resizable: true,
       },
       category: 'productivity',
-      keywords: ['待办事项', '任务管理', 'todo', 'task', 'productivity']
+      keywords: ['待办事项', '任务管理', 'todo', 'task', 'productivity'],
     },
-    component: markRaw(Todo),
-    isBuiltIn: true
+    // 使用动态导入实现懒加载
+    component: async () => {
+      const { default: Todo } = await import('./todo/Todo.vue')
+      return markRaw(Todo)
+    },
+    isBuiltIn: true,
   })
 
   console.log('内置应用注册完成')
@@ -87,4 +96,4 @@ export function registerBuiltInApps() {
 
 // 导出应用注册中心
 export { appRegistry } from './AppRegistry'
-export type { InternalAppManifest, AppRegistration } from './types/AppManifest'
+export type { InternalAppManifest, AppRegistration } from './types/AppManifest'

src/apps/types/AppManifest.ts

@@ -1,6 +1,3 @@
-/**
- * 内置应用清单接口
- */
 /**
  * 内置应用清单接口
  */
@@ -88,9 +85,6 @@ export interface InternalAppManifest {
   keywords?: string[]
 }
 
-/**
- * 应用注册信息
- */
 /**
  * 应用注册信息
  */
@@ -100,11 +94,11 @@ export interface AppRegistration {
    */
   manifest: InternalAppManifest
   /**
-   * Vue组件
+   * Vue组件或异步加载函数
    */
-  component: any // Vue组件
+  component: any // Vue组件或返回Promise<Vue组件>的函数
   /**
    * 是否为内置应用
    */
   isBuiltIn: boolean
-}
+}