# Vue Desktop - 系统与业务解耦架构

基于设计文档实现的高性能类Windows桌面前端系统，实现了系统框架与业务应用的完全解耦。

## 🎯 项目概述

本项目成功实现了设计文档中描述的**系统与业务解耦架构**，构建了一个完整的桌面环境模拟系统，包含：

- ✅ **完全隔离**：系统与应用在运行时完全隔离，应用无法直接访问系统资源
- ✅ **标准化接口**：通过统一的SDK提供标准化的系统服务接口
- ✅ **性能优先**：采用微前端沙箱、虚拟化渲染等技术确保高性能
- ✅ **框架无关**：支持任意前端框架开发的第三方应用
- ✅ **安全可控**：严格的权限控制和安全沙箱机制

## 🏗️ 架构实现

### 核心服务层
- **[WindowService](./src/services/WindowService.ts)** - 窗体管理服务，支持完整的窗体生命周期
- **[ResourceService](./src/services/ResourceService.ts)** - 资源管理服务，提供权限控制和资源访问
- **[EventCommunicationService](./src/services/EventCommunicationService.ts)** - 事件通信服务，支持跨应用消息传递
- **[ApplicationSandboxEngine](./src/services/ApplicationSandboxEngine.ts)** - 应用沙箱引擎，多层安全隔离
- **[ApplicationLifecycleManager](./src/services/ApplicationLifecycleManager.ts)** - 应用生命周期管理
- **[SystemServiceIntegration](./src/services/SystemServiceIntegration.ts)** - 系统服务集成层

### SDK接口层
- **[SDK类型定义](./src/sdk/types.ts)** - 完整的TypeScript接口定义
- **[SDK实现](./src/sdk/index.ts)** - 统一的SDK实现，提供标准化API

### 应用层
- **内置应用**：计算器、记事本、系统状态监控
- **第三方应用**：[待办事项应用](./public/apps/todo/index.html)示例

## 🚀 快速开始

### 环境要求
- Node.js >= 20.19.0
- pnpm

### 安装与运行
```bash
# 安装依赖
pnpm install

# 启动开发服务器
pnpm dev

# 构建生产版本
pnpm build
```

### 访问应用
- 开发环境：http://localhost:5174/
- 生产环境：部署后的域名

## 🎮 使用说明

### 桌面交互
1. **双击图标**启动应用
2. **拖拽图标**重新排列桌面布局
3. **右键菜单**访问系统功能（计划中）

### 内置应用
- **🧮 计算器**：基础的数学计算功能
- **📝 记事本**：文本编辑和文件保存
- **⚙️ 系统状态**：实时系统性能监控
- **✓ 待办事项**：完整的任务管理应用

### 窗体操作
- **最小化/最大化/还原**：标准窗体控制
- **拖拽移动**：通过标题栏拖拽窗体
- **调整大小**：支持窗体尺寸调整（计划中）

## 🔧 技术特性

### 系统架构特性
- **微前端架构**：每个应用运行在独立的沙箱中
- **事件驱动**：基于发布订阅模式的事件通信
- **权限控制**：细粒度的资源访问权限管理
- **性能监控**：实时的系统和应用性能监控
- **错误隔离**：应用错误不会影响系统稳定性

### 开发特性
- **TypeScript**：完整的类型安全保障
- **Vue 3**：现代化的响应式框架
- **Vite**：快速的构建工具
- **UnoCSS**：原子化CSS框架
- **Naive UI**：优雅的UI组件库

## 📁 项目结构

```
vue-desktop/
├── src/
│   ├── services/           # 核心服务层
│   │   ├── WindowService.ts
│   │   ├── ResourceService.ts
│   │   ├── EventCommunicationService.ts
│   │   ├── ApplicationSandboxEngine.ts
│   │   ├── ApplicationLifecycleManager.ts
│   │   └── SystemServiceIntegration.ts
│   ├── sdk/               # SDK接口层
│   │   ├── types.ts       # 类型定义
│   │   └── index.ts       # SDK实现
│   ├── ui/                # 用户界面
│   │   ├── desktop-container/
│   │   └── App.vue
│   ├── events/            # 事件系统
│   ├── stores/            # 状态管理
│   └── main.ts           # 应用入口
├── public/
│   └── apps/             # 第三方应用
│       └── todo/         # 待办事项应用
└── README.md
```

## 🔒 安全机制

### 沙箱隔离
- **iframe隔离**：每个应用运行在独立的iframe中
- **CSP策略**：严格的内容安全策略
- **权限控制**：基于白名单的权限管理
- **API代理**：所有系统调用通过SDK代理

### 权限模型
- **存储权限**：应用独立的存储空间
- **网络权限**：基于域名白名单的网络访问
- **通知权限**：用户确认的通知功能
- **剪贴板权限**：受控的剪贴板访问

## 📊 性能优化

### 渲染优化
- **虚拟化布局**：高效的图标网格布局
- **按需加载**：应用按需动态加载
- **内存管理**：智能的内存回收机制
- **性能监控**：实时的性能指标收集

### 系统优化
- **事件节流**：防止事件风暴
- **资源缓存**：智能的资源缓存策略
- **自动清理**：定期的系统资源清理
- **错误恢复**：优雅的错误处理和恢复

## 🔮 未来规划

### 短期计划
- [ ] 窗体拖拽和调整大小功能
- [ ] 右键菜单和快捷方式
- [ ] 更多内置应用（文件管理器、浏览器等）
- [ ] 应用商店和在线安装

### 长期计划
- [ ] 多桌面和工作区
- [ ] 插件系统和扩展机制
- [ ] 云同步和备份
- [ ] 移动端适配

## 🤝 贡献指南

欢迎贡献代码、报告bug或提出功能建议！

### 开发流程
1. Fork项目
2. 创建功能分支 (`git checkout -b feature/AmazingFeature`)
3. 提交更改 (`git commit -m 'Add some AmazingFeature'`)
4. 推送到分支 (`git push origin feature/AmazingFeature`)
5. 创建Pull Request

### 代码规范
- 使用TypeScript进行类型安全
- 遵循Vue 3组合式API最佳实践
- 使用ESLint和Prettier保持代码风格一致
- 为新功能编写测试用例

## 📄 许可证

本项目采用 MIT 许可证 - 查看 [LICENSE](LICENSE) 文件了解详情。

## 🙏 致谢

感谢所有参与项目开发和测试的贡献者，以及提供技术支持的开源社区。

---

**Vue Desktop** - 让Web应用拥有桌面应用的体验 🚀