185 lines
6.1 KiB
Markdown
185 lines
6.1 KiB
Markdown
|
# 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应用拥有桌面应用的体验 🚀
|