221 lines
5.8 KiB
Markdown
221 lines
5.8 KiB
Markdown
# Vue Desktop
|
||
|
||
一个基于 Vue 3 + TypeScript + Vite 的现代化桌面环境模拟器
|
||
|
||
## 🎯 项目目标
|
||
|
||
构建一个轻量级、模块化的桌面环境，支持：
|
||
|
||
- 内置应用（计算器、记事本、待办事项等）
|
||
- 外置应用加载（通过 iframe 沙箱）
|
||
- 窗口管理（创建、移动、缩放、最小化等）
|
||
- 资源管理（存储、权限控制）
|
||
- 应用生命周期管理
|
||
- 安全沙箱机制
|
||
|
||
## 🏗️ 架构实现
|
||
|
||
### 核心服务层
|
||
|
||
- **[WindowFormService](src/services/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
|
||
```
|
||
|
||
## 📦 部署
|
||
|
||
构建产物可直接部署到任何静态文件服务器上。
|