azure/vue-desktop

Fork 0

Files

Azure 9dbc054483 保存

2025-09-24 16:43:10 +08:00

6.1 KiB

Raw Blame History

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

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

🎯 项目概述

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

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

🏗️ 架构实现

核心服务层

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

SDK接口层

SDK类型定义 - 完整的TypeScript接口定义
SDK实现 - 统一的SDK实现，提供标准化API

应用层

内置应用：计算器、记事本、系统状态监控
第三方应用：待办事项应用示例

🚀 快速开始

环境要求

Node.js >= 20.19.0
pnpm

安装与运行

# 安装依赖
pnpm install

# 启动开发服务器
pnpm dev

# 构建生产版本
pnpm build

访问应用

开发环境：http://localhost:5174/
生产环境：部署后的域名

🎮 使用说明

桌面交互

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

内置应用

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

窗体操作

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

🔧 技术特性

系统架构特性

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

开发特性

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或提出功能建议！

开发流程

Fork项目
创建功能分支 (git checkout -b feature/AmazingFeature)
提交更改 (git commit -m 'Add some AmazingFeature')
推送到分支 (git push origin feature/AmazingFeature)
创建Pull Request

代码规范

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

📄 许可证

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

🙏 致谢

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

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

6.1 KiB Raw Blame History Unescape Escape