1
This commit is contained in:
@@ -1,185 +1,220 @@
|
||||
# Vue Desktop - 系统与业务解耦架构
|
||||
# Vue Desktop
|
||||
|
||||
基于设计文档实现的高性能类Windows桌面前端系统，实现了系统框架与业务应用的完全解耦。
|
||||
一个基于 Vue 3 + TypeScript + Vite 的现代化桌面环境模拟器
|
||||
|
||||
## 🎯 项目概述
|
||||
## 🎯 项目目标
|
||||
|
||||
本项目成功实现了设计文档中描述的**系统与业务解耦架构**，构建了一个完整的桌面环境模拟系统，包含：
|
||||
构建一个轻量级、模块化的桌面环境，支持：
|
||||
|
||||
- ✅ **完全隔离**：系统与应用在运行时完全隔离，应用无法直接访问系统资源
|
||||
- ✅ **标准化接口**：通过统一的SDK提供标准化的系统服务接口
|
||||
- ✅ **性能优先**：采用微前端沙箱、虚拟化渲染等技术确保高性能
|
||||
- ✅ **框架无关**：支持任意前端框架开发的第三方应用
|
||||
- ✅ **安全可控**：严格的权限控制和安全沙箱机制
|
||||
- 内置应用（计算器、记事本、待办事项等）
|
||||
- 外置应用加载（通过 iframe 沙箱）
|
||||
- 窗口管理（创建、移动、缩放、最小化等）
|
||||
- 资源管理（存储、权限控制）
|
||||
- 应用生命周期管理
|
||||
- 安全沙箱机制
|
||||
|
||||
## 🏗️ 架构实现
|
||||
|
||||
### 核心服务层
|
||||
|
||||
- **[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)示例
|
||||
- **[SystemSDK](./src/sdk/index.ts)** - 统一SDK接口，为应用提供系统能力访问
|
||||
|
||||
## 🚀 快速开始
|
||||
### 事件系统
|
||||
|
||||
### 环境要求
|
||||
- Node.js >= 20.19.0
|
||||
- pnpm
|
||||
- **[IEventBuilder](./src/events/IEventBuilder.ts)** - 事件总线接口
|
||||
- **[EventBuilderImpl](./src/events/impl/EventBuilderImpl.ts)** - 事件总线实现
|
||||
|
||||
### 安装与运行
|
||||
```bash
|
||||
# 安装依赖
|
||||
pnpm install
|
||||
### 应用管理
|
||||
|
||||
# 启动开发服务器
|
||||
pnpm dev
|
||||
|
||||
# 构建生产版本
|
||||
pnpm build
|
||||
```
|
||||
|
||||
### 访问应用
|
||||
- 开发环境：http://localhost:5174/
|
||||
- 生产环境：部署后的域名
|
||||
|
||||
## 🎮 使用说明
|
||||
|
||||
### 桌面交互
|
||||
1. **双击图标**启动应用
|
||||
2. **拖拽图标**重新排列桌面布局
|
||||
3. **右键菜单**访问系统功能（计划中）
|
||||
|
||||
### 内置应用
|
||||
- **🧮 计算器**：基础的数学计算功能
|
||||
- **📝 记事本**：文本编辑和文件保存
|
||||
- **⚙️ 系统状态**：实时系统性能监控
|
||||
- **✓ 待办事项**：完整的任务管理应用
|
||||
|
||||
### 窗体操作
|
||||
- **最小化/最大化/还原**：标准窗体控制
|
||||
- **拖拽移动**：通过标题栏拖拽窗体
|
||||
- **调整大小**：支持窗体尺寸调整（计划中）
|
||||
|
||||
## 🔧 技术特性
|
||||
|
||||
### 系统架构特性
|
||||
- **微前端架构**：每个应用运行在独立的沙箱中
|
||||
- **事件驱动**：基于发布订阅模式的事件通信
|
||||
- **权限控制**：细粒度的资源访问权限管理
|
||||
- **性能监控**：实时的系统和应用性能监控
|
||||
- **错误隔离**：应用错误不会影响系统稳定性
|
||||
|
||||
### 开发特性
|
||||
- **TypeScript**：完整的类型安全保障
|
||||
- **Vue 3**：现代化的响应式框架
|
||||
- **Vite**：快速的构建工具
|
||||
- **UnoCSS**：原子化CSS框架
|
||||
- **Naive UI**：优雅的UI组件库
|
||||
- **[AppRegistry](./src/apps/AppRegistry.ts)** - 应用注册中心
|
||||
- **[ExternalAppDiscovery](./src/services/ExternalAppDiscovery.ts)** - 外置应用发现服务
|
||||
|
||||
## 📁 项目结构
|
||||
|
||||
```
|
||||
vue-desktop/
|
||||
├── src/
|
||||
│ ├── services/ # 核心服务层
|
||||
│ │ ├── WindowService.ts
|
||||
│ │ ├── ResourceService.ts
|
||||
│ │ ├── EventCommunicationService.ts
|
||||
│ │ ├── ApplicationSandboxEngine.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
|
||||
│ │ └── SystemServiceIntegration.ts
|
||||
│ ├── sdk/ # SDK接口层
|
||||
│ │ ├── types.ts # 类型定义
|
||||
│ │ └── index.ts # SDK实现
|
||||
│ ├── ui/ # 用户界面
|
||||
│ │ ├── desktop-container/
|
||||
│ │ ├── ApplicationSandboxEngine.ts
|
||||
│ │ ├── ExternalAppDiscovery.ts
|
||||
│ │ ├── ResourceService.ts
|
||||
│ │ ├── SystemServiceIntegration.ts
|
||||
│ │ └── WindowService.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
|
||||
│ ├── events/ # 事件系统
|
||||
│ ├── stores/ # 状态管理
|
||||
│ └── main.ts # 应用入口
|
||||
├── public/
|
||||
│ └── apps/ # 第三方应用
|
||||
│ └── todo/ # 待办事项应用
|
||||
└── README.md
|
||||
│ └── 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
|
||||
```
|
||||
|
||||
## 🔒 安全机制
|
||||
## 🚀 快速开始
|
||||
|
||||
### 沙箱隔离
|
||||
- **iframe隔离**：每个应用运行在独立的iframe中
|
||||
- **CSP策略**：严格的内容安全策略
|
||||
- **权限控制**：基于白名单的权限管理
|
||||
- **API代理**：所有系统调用通过SDK代理
|
||||
### 环境要求
|
||||
|
||||
### 权限模型
|
||||
- **存储权限**：应用独立的存储空间
|
||||
- **网络权限**：基于域名白名单的网络访问
|
||||
- **通知权限**：用户确认的通知功能
|
||||
- **剪贴板权限**：受控的剪贴板访问
|
||||
- Node.js >= 16.0.0
|
||||
- pnpm >= 7.0.0
|
||||
|
||||
## 📊 性能优化
|
||||
### 安装依赖
|
||||
|
||||
### 渲染优化
|
||||
- **虚拟化布局**：高效的图标网格布局
|
||||
- **按需加载**：应用按需动态加载
|
||||
- **内存管理**：智能的内存回收机制
|
||||
- **性能监控**：实时的性能指标收集
|
||||
```bash
|
||||
pnpm install
|
||||
```
|
||||
|
||||
### 系统优化
|
||||
- **事件节流**：防止事件风暴
|
||||
- **资源缓存**：智能的资源缓存策略
|
||||
- **自动清理**：定期的系统资源清理
|
||||
- **错误恢复**：优雅的错误处理和恢复
|
||||
### 开发模式
|
||||
|
||||
## 🔮 未来规划
|
||||
```bash
|
||||
pnpm dev
|
||||
```
|
||||
|
||||
### 短期计划
|
||||
- [ ] 窗体拖拽和调整大小功能
|
||||
- [ ] 右键菜单和快捷方式
|
||||
- [ ] 更多内置应用（文件管理器、浏览器等）
|
||||
- [ ] 应用商店和在线安装
|
||||
### 构建生产版本
|
||||
|
||||
### 长期计划
|
||||
- [ ] 多桌面和工作区
|
||||
- [ ] 插件系统和扩展机制
|
||||
- [ ] 云同步和备份
|
||||
- [ ] 移动端适配
|
||||
```bash
|
||||
pnpm build
|
||||
```
|
||||
|
||||
## 🤝 贡献指南
|
||||
### 预览生产构建
|
||||
|
||||
欢迎贡献代码、报告bug或提出功能建议！
|
||||
```bash
|
||||
pnpm preview
|
||||
```
|
||||
|
||||
### 开发流程
|
||||
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保持代码风格一致
|
||||
- 为新功能编写测试用例
|
||||
### 添加内置应用
|
||||
|
||||
## 📄 许可证
|
||||
1. 在 `src/apps/` 目录下创建应用文件夹
|
||||
2. 创建 Vue 组件文件（如 `MyApp.vue`）
|
||||
3. 在 `src/apps/AppRegistry.ts` 中注册应用
|
||||
|
||||
本项目采用 MIT 许可证 - 查看 [LICENSE](LICENSE) 文件了解详情。
|
||||
### 添加外置应用
|
||||
|
||||
## 🙏 致谢
|
||||
1. 在 `public/apps/` 目录下创建应用文件夹
|
||||
2. 添加 `manifest.json` 应用清单文件
|
||||
3. 添加应用的 HTML/CSS/JS 文件
|
||||
4. 系统会自动发现并加载该应用
|
||||
|
||||
感谢所有参与项目开发和测试的贡献者，以及提供技术支持的开源社区。
|
||||
### 系统服务使用
|
||||
|
||||
---
|
||||
通过依赖注入获取系统服务：
|
||||
|
||||
**Vue Desktop** - 让Web应用拥有桌面应用的体验 🚀
|
||||
```typescript
|
||||
import type { SystemServiceIntegration } from '@/services/SystemServiceIntegration'
|
||||
const systemService = inject<SystemServiceIntegration>('systemService')
|
||||
```
|
||||
|
||||
可用服务：
|
||||
|
||||
- `getWindowService()` - 窗体服务
|
||||
- `getResourceService()` - 资源服务
|
||||
- `getSandboxEngine()` - 沙箱引擎
|
||||
- `getLifecycleManager()` - 生命周期管理器
|
||||
|
||||
## 📖 技术文档
|
||||
|
||||
### 窗体系统
|
||||
|
||||
窗体系统支持完整的生命周期管理，包括创建、移动、缩放、最小化、最大化等操作。
|
||||
|
||||
### 资源管理
|
||||
|
||||
资源服务提供安全的存储访问和权限控制机制。
|
||||
|
||||
### 沙箱安全
|
||||
|
||||
应用沙箱引擎提供多层安全隔离，防止恶意代码访问系统资源。
|
||||
|
||||
### 应用生命周期
|
||||
|
||||
应用生命周期管理器负责应用的安装、启动、停止、卸载等操作。
|
||||
|
||||
## 🧪 测试
|
||||
|
||||
### 单元测试
|
||||
|
||||
```bash
|
||||
pnpm test
|
||||
```
|
||||
|
||||
### 端到端测试
|
||||
|
||||
```bash
|
||||
pnpm test:e2e
|
||||
```
|
||||
|
||||
## 📦 部署
|
||||
|
||||
构建产物可直接部署到任何静态文件服务器上。
|
||||
|
||||
Reference in New Issue
Block a user