vue-desktop/PROJECT_SUMMARY.md

Vue Desktop

一个基于 Vue 3 + TypeScript + Vite 的现代化桌面环境模拟器

🎯 项目目标

构建一个轻量级、模块化的桌面环境，支持：

• 内置应用（计算器、记事本、待办事项等）
• 外置应用加载（通过 iframe 沙箱）
• 窗口管理（创建、移动、缩放、最小化等）
• 资源管理（存储、权限控制）
• 应用生命周期管理
• 安全沙箱机制

🏗️ 架构实现

核心服务层

• WindowFormService - 窗体管理服务，支持完整的窗体生命周期
• ResourceService - 资源管理服务，提供权限控制和资源访问
• ApplicationSandboxEngine - 应用沙箱引擎，多层安全隔离
• ApplicationLifecycleManager - 应用生命周期管理
• SystemServiceIntegration - 系统服务集成层

SDK接口层

• SystemSDK - 统一SDK接口，为应用提供系统能力访问

事件系统

• IEventBuilder - 事件总线接口
• EventBuilderImpl - 事件总线实现

应用管理

• AppRegistry - 应用注册中心
• ExternalAppDiscovery - 外置应用发现服务

📁 项目结构

.
├── public\apps
│   ├── music-player
│   │   ├── README.md
│   │   ├── app.js
│   │   ├── index.html
│   │   ├── manifest.json
│   │   └── style.css
│   └── README.md
├── src
│   ├── apps
│   │   ├── calculator
│   │   │   └── Calculator.vue
│   │   ├── components
│   │   │   └── BuiltInApp.vue
│   │   ├── notepad
│   │   │   └── Notepad.vue
│   │   ├── todo
│   │   │   └── Todo.vue
│   │   ├── types
│   │   │   └── AppManifest.ts
│   │   ├── AppRegistry.ts
│   │   └── index.ts
│   ├── common
│   │   ├── hooks
│   │   │   ├── useClickFocus.ts
│   │   │   └── useObservableVue.ts
│   │   ├── naive-ui
│   │   │   ├── components.ts
│   │   │   ├── discrete-api.ts
│   │   │   └── theme.ts
│   │   └── types
│   │       ├── IDestroyable.ts
│   │       └── IVersion.ts
│   ├── css
│   │   └── basic.css
│   ├── events
│   │   ├── impl
│   │   │   └── EventBuilderImpl.ts
│   │   └── IEventBuilder.ts
│   ├── sdk
│   │   ├── index.ts
│   │   └── types.ts
│   ├── services
│   │   ├── ApplicationLifecycleManager.ts
│   │   ├── ApplicationSandboxEngine.ts
│   │   ├── ExternalAppDiscovery.ts
│   │   ├── ResourceService.ts
│   │   ├── SystemServiceIntegration.ts
│   │   └── WindowFormService.ts
│   ├── stores
│   │   └── counter.ts
│   ├── ui
│   │   ├── components
│   │   │   ├── AppRenderer.vue
│   │   │   └── WindowManager.vue
│   │   ├── desktop-container
│   │   │   ├── AppIcon.vue
│   │   │   ├── DesktopContainer.vue
│   │   │   ├── useDesktopContainerInit.ts
│   │   │   └── useDynamicAppIcons.ts
│   │   ├── types
│   │   │   ├── IDesktopAppIcon.ts
│   │   │   ├── IGridTemplateParams.ts
│   │   │   └── WindowFormTypes.ts
│   │   └── App.vue
│   └── main.ts
├── PRETTIER_CONFIG_GUIDE.md
├── PROJECT_SUMMARY.md
├── README.md
├── env.d.ts
├── index.html
├── package.json
├── pnpm-lock.yaml
├── tsconfig.app.json
├── tsconfig.json
├── tsconfig.node.json
├── uno.config.ts
└── vite.config.ts

🚀 快速开始

环境要求

• Node.js >= 16.0.0
• pnpm >= 7.0.0

安装依赖

pnpm install

开发模式

pnpm dev

构建生产版本

pnpm build

预览生产构建

pnpm preview

🛠️ 开发指南

添加内置应用

1. 在 src/apps/ 目录下创建应用文件夹
2. 创建 Vue 组件文件（如 MyApp.vue）
3. 在 src/apps/AppRegistry.ts 中注册应用

添加外置应用

1. 在 public/apps/ 目录下创建应用文件夹
2. 添加 manifest.json 应用清单文件
3. 添加应用的 HTML/CSS/JS 文件
4. 系统会自动发现并加载该应用

系统服务使用

通过依赖注入获取系统服务：

import type { SystemServiceIntegration } from '@/services/SystemServiceIntegration'
const systemService = inject<SystemServiceIntegration>('systemService')

可用服务：

• getWindowFormService() - 窗体服务
• getResourceService() - 资源服务
• getSandboxEngine() - 沙箱引擎
• getLifecycleManager() - 生命周期管理器

📖 技术文档

窗体系统

窗体系统支持完整的生命周期管理，包括创建、移动、缩放、最小化、最大化等操作。

资源管理

资源服务提供安全的存储访问和权限控制机制。

沙箱安全

应用沙箱引擎提供多层安全隔离，防止恶意代码访问系统资源。

应用生命周期

应用生命周期管理器负责应用的安装、启动、停止、卸载等操作。

🧪 测试

单元测试

pnpm test

端到端测试

pnpm test:e2e

📦 部署

构建产物可直接部署到任何静态文件服务器上。