page.loadCompleted 事件逻辑说明文档

# page.loadCompleted 事件逻辑说明文档

## 概述

`page.loadCompleted` 是一个页面加载完成事件，用于处理客户端或云渲染模式下的页面数据加载完成后的回调处理。该事件主要用于同步和存储页面加载数据，特别是世界对象（worldObjects）数据。

## 事件注册位置

**文件**: `src/store/modules/hybridStore/hybridStore.ts`

**方法**: `initHybridData()` (第114-297行)

**注册代码** (第127-146行):```typescriptpiclient.on('page.loadCompleted', '', (data:any) => { // 如果是云渲染模式则执行 const hybridCloudStore = useHybridCloudStore() if (hybridCloudStore.isCloud && data.params) { hybridCloudStore.setPageLoadData(data) } else if (hybridCloudStore.isCloud && data.params02){ hybridCloudStore.setWorldObjects(data) } if (data.params02) { if (!this.piclient.worldObjects) { this.piclient.worldObjects = data.params02.worldObjects } else { this.piclient.worldObjects = [ ...this.piclient.worldObjects, ...data.params02.worldObjects, ] } } return})```

## 事件触发位置

### 1. 云渲染初始化完成时触发

**文件**: `src/store/modules/hybridStore/hybridStore.ts`

**方法**: `initCloudrender()` (第387-630行)

#### 预览模式触发 (第593行)```typescriptif (preview) { useCustomEventHandler().initPageEvent() this.initHybridData() this.piclient.emit('mode.enterPlayMode') this.piclient.emit('object.GetScreenInfo', { target: 'SceneObject_8', }) this.piclient.emit('page.loadCompleted', {}) // 触发事件 // ...}```

#### 编辑模式触发 (第619行)```typescriptelse { this.initHybridData() this.piclient.emit('page.loadCompleted', {}) // 触发事件}```

### 2. Mock 客户端模拟触发

**文件**: `src/views/editor/MockClient/index.vue`

**方法**: `eventHandler()` (第103-143行)

```typescriptif (param.action === 'page.loadCompleted') { const mockBigWorldObjs = Array.from({ length: 100000 }).map( (i, idx) => ({ name: 'SceneCamera_mock_' + idx, displayName: genId() + '_mock_' + idx, class: 'SceneCamera', }) )

cbParam.params = { ...baseDb, worldObjects: [...baseDb.worldObjects, ...mockBigWorldObjs], }}```

## 事件处理流程

### 流程图

```page.loadCompleted 事件触发 ↓检查是否为云渲染模式 (hybridCloudStore.isCloud) ↓┌─────────────────────────────────────┐│ 分支判断： ││ ││ 1. 云渲染模式 && data.params ││ → setPageLoadData(data) ││ ││ 2. 云渲染模式 && data.params02 ││ → setWorldObjects(data) ││ ││ 3. 存在 data.params02 ││ → 更新 piclient.worldObjects │└─────────────────────────────────────┘```

### 详细处理逻辑

#### 1. 云渲染模式 - 处理 params 数据

**条件**: `hybridCloudStore.isCloud && data.params`

**操作**: 调用 `hybridCloudStore.setPageLoadData(data)`

**实现位置**: `src/store/modules/hybridCloudStore/hybridCloudStore.ts` (第14-16行)

```typescriptsetPageLoadData(data: any) { this.pageLoadData = data this.setWorldObjects(data)}```

**作用**: - 存储完整的页面加载数据到 `pageLoadData`- 同时调用 `setWorldObjects` 处理世界对象数据

#### 2. 云渲染模式 - 处理 params02 数据

**条件**: `hybridCloudStore.isCloud && data.params02`

**操作**: 调用 `hybridCloudStore.setWorldObjects(data)`

**实现位置**: `src/store/modules/hybridCloudStore/hybridCloudStore.ts` (第18-46行)

```typescriptsetWorldObjects(data: any) { if (data.params02) { if (!this.pageLoadData.params.worldObjects) { this.pageLoadData.params.worldObjects = data.params02.worldObjects } else { this.pageLoadData.params.worldObjects = [ ...this.pageLoadData.params.worldObjects, ...data.params02.worldObjects, ] } }}```

**作用**: - 合并世界对象数据到 `pageLoadData.params.worldObjects`- 如果已存在数据，则追加；否则直接赋值

#### 3. 更新 piclient.worldObjects

**条件**: `data.params02` 存在

**操作**: 更新 `this.piclient.worldObjects`

**逻辑**:```typescriptif (data.params02) { if (!this.piclient.worldObjects) { // 首次赋值 this.piclient.worldObjects = data.params02.worldObjects } else { // 追加数据 this.piclient.worldObjects = [ ...this.piclient.worldObjects, ...data.params02.worldObjects, ] }}```

**作用**: - 在 `piclient` 实例上维护世界对象列表- 支持增量更新（追加模式）

## 数据结构

### 事件数据格式 (data)

```typescript{ params?: { worldObjects?: Array<WorldObject>, actions?: Array<any>, classes?: Array<any>, // ... 其他页面数据 }, params02?: { worldObjects: Array<WorldObject> }}```

### WorldObject 对象结构

```typescript{ name: string, // 对象名称，如 'SceneCamera_0' displayName: string, // 显示名称 class: string // 对象类型，如 'SceneCamera'}```

## 相关 Store 和状态

### 1. hybridStore (useHybridStore)

**状态**:- `piclient: PiClient | null` - PiClient 实例- `piclient.worldObjects` - 世界对象数组（动态添加的属性）

**方法**:- `initHybridData()` - 初始化交互数据，注册事件监听- `initCloudrender()` - 初始化云渲染，完成后触发事件

### 2. hybridCloudStore (useHybridCloudStore)

**状态**:- `isCloud: boolean` - 云渲染开关标识- `pageLoadData: any` - 页面加载数据 - `pageLoadData.params.worldObjects` - 世界对象数组

**方法**:- `setPageLoadData(data)` - 设置页面加载数据- `setWorldObjects(data)` - 设置/合并世界对象- `setIsCloud(bool)` - 设置云渲染状态

## 数据流向

```云渲染初始化完成 ↓触发 page.loadCompleted 事件 ↓┌──────────────────────────────────────┐│ 事件处理器 (hybridStore.ts:127) │└──────────────────────────────────────┘ ↓┌──────────────────────────────────────┐│ 判断云渲染模式 ││ - isCloud && params → setPageLoadData││ - isCloud && params02 → setWorldObjects│└──────────────────────────────────────┘ ↓┌──────────────────────────────────────┐│ 更新数据存储 ││ - hybridCloudStore.pageLoadData ││ - piclient.worldObjects │└──────────────────────────────────────┘ ↓┌──────────────────────────────────────┐│ 数据使用场景 ││ - 编辑器对象选择 ││ - 事件配置 ││ - 客户端交互 │└──────────────────────────────────────┘```

## 使用场景

### 1. 编辑器中的对象选择

**文件**: `src/store/modules/hybridStore/hybridStore.ts` (第679-699行)

```typescriptsetSelectedObjs(objs: []) { const worldObjs = this.getClientData(PiclientDataEnum.WORLD) // worldObjs 来自 piclient.worldObjects 或 pageLoadData.params.worldObjects // ...}```

### 2. 事件配置中的对象列表

**文件**: `src/views/editor/ContentConfigs/components/ConfigEvent/components/EventCustomHandle/EventEdit/useEventModal.ts` (第94-102行)

```typescriptconst worldObjs = computed(() => { if (hybridStore.getInClient || hybridStore.getIsCloud) { return hybridStore.getClientData(PiclientDataEnum.WORLD) || [] } else if (hybridCloudStore.isCloud) { return hybridCloudStore.pageLoadData?.params.worldObjects || [] } return hybridStore.getClientData(PiclientDataEnum.WORLD) || []})```

## 注意事项

1. **事件注册时机**: 事件在 `initHybridData()` 中注册，该方法通过 `hybridInited` 标志防止重复注册

2. **数据合并策略**: - `worldObjects` 采用追加模式，新数据会合并到现有数组中 - 首次加载时直接赋值，后续加载时追加

3. **云渲染模式判断**: - 通过 `hybridCloudStore.isCloud` 判断是否为云渲染模式 - 云渲染模式下数据存储在 `hybridCloudStore.pageLoadData` - 非云渲染模式下数据存储在 `piclient` 实例上

4. **数据获取优先级**: - 优先使用 `piclient` 上的数据 - 云渲染模式下使用 `hybridCloudStore.pageLoadData`

5. **事件触发时机**: - 云渲染初始化完成后自动触发 - 预览模式和编辑模式都会触发

## 相关文件清单

- `src/store/modules/hybridStore/hybridStore.ts` - 事件注册和处理- `src/store/modules/hybridCloudStore/hybridCloudStore.ts` - 云渲染数据存储- `src/store/modules/hybridStore/hybridStore.d.ts` - 类型定义- `src/views/editor/MockClient/index.vue` - Mock 客户端模拟- `src/views/editor/ContentConfigs/components/ConfigEvent/components/EventCustomHandle/EventEdit/useEventModal.ts` - 事件配置中使用

## 总结

`page.loadCompleted` 事件是页面加载完成后的关键回调，主要负责：

1. **数据同步**: 将客户端/云渲染的页面数据同步到前端状态管理2. **对象管理**: 维护世界对象列表，支持增量更新3. **模式适配**: 区分客户端模式和云渲染模式，采用不同的数据存储策略4. **初始化完成**: 标记页面加载完成，触发后续的交互初始化

该事件是连接客户端/云渲染与前端应用的重要桥梁，确保数据能够正确同步和使用。