vue-desktop/PROJECT_SUMMARY.md

# Vue Desktop

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

## 🎯 项目目标

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

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

## 🏗️ 架构实现

### 核心服务层

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

### SDK接口层

- **[SystemSDK](./src/sdk/index.ts)** - 统一SDK接口，为应用提供系统能力访问

### 事件系统

- **[IEventBuilder](./src/events/IEventBuilder.ts)** - 事件总线接口
- **[EventBuilderImpl](./src/events/impl/EventBuilderImpl.ts)** - 事件总线实现

### 应用管理

- **[AppRegistry](./src/apps/AppRegistry.ts)** - 应用注册中心
- **[ExternalAppDiscovery](./src/services/ExternalAppDiscovery.ts)** - 外置应用发现服务

## 📁 项目结构

```
.
├── 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

### 安装依赖

```bash
pnpm install
```

### 开发模式

```bash
pnpm dev
```

### 构建生产版本

```bash
pnpm build
```

### 预览生产构建

```bash
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. 系统会自动发现并加载该应用

### 系统服务使用

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

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

可用服务：

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

## 📖 技术文档

### 窗体系统

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

### 资源管理

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

### 沙箱安全

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

### 应用生命周期

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

## 🧪 测试

### 单元测试

```bash
pnpm test
```

### 端到端测试

```bash
pnpm test:e2e
```

## 📦 部署

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