120 lines
5.3 KiB
Markdown
120 lines
5.3 KiB
Markdown
# 窗口还原事件
|
||
|
||
<cite>
|
||
**本文档引用的文件**
|
||
- [WindowFormEventManager.ts](file://src/events/WindowFormEventManager.ts)
|
||
- [EventBuilderImpl.ts](file://src/events/impl/EventBuilderImpl.ts)
|
||
- [WindowFormTypes.ts](file://src/ui/types/WindowFormTypes.ts)
|
||
</cite>
|
||
|
||
## 目录
|
||
1. [简介](#简介)
|
||
2. [核心设计与运行机制](#核心设计与运行机制)
|
||
3. [事件协同关系分析](#事件协同关系分析)
|
||
4. [Vue组件中的实践应用](#vue组件中的实践应用)
|
||
5. [在窗口状态机中的角色](#在窗口状态机中的角色)
|
||
|
||
## 简介
|
||
`windowFormRestore` 事件是桌面应用中用于处理窗口从最大化或最小化状态恢复为正常尺寸的关键事件。该事件通过传递窗口唯一标识符（id）来定位目标窗口实例，并触发相应的UI布局重置逻辑。结合 `windowFormDataUpdate` 事件，可实现窗口位置与尺寸信息的同步更新，确保用户界面状态的一致性。
|
||
|
||
**Section sources**
|
||
- [WindowFormEventManager.ts](file://src/events/WindowFormEventManager.ts#L22-L22)
|
||
|
||
## 核心设计与运行机制
|
||
`windowFormRestore` 事件定义于 `IWindowFormEvent` 接口中，其函数签名接受一个字符串类型的 `id` 参数，用以标识被操作的窗口实例。当用户点击“还原”按钮或通过快捷键执行还原操作时，系统将调用事件管理器 `wfem` 的 `notifyEvent` 方法，广播该事件。
|
||
|
||
事件的实际通知行为由通用事件构建器 `EventBuilderImpl` 实现，它维护了一个基于 `Map` 的监听器集合，支持动态添加、移除和触发事件回调。整个流程具备良好的解耦性和扩展性。
|
||
|
||
```mermaid
|
||
flowchart TD
|
||
A[用户触发窗口还原] --> B[调用 wfem.notifyEvent("windowFormRestore", id)]
|
||
B --> C{是否存在监听器?}
|
||
C --> |是| D[遍历执行所有注册的 handler]
|
||
C --> |否| E[无操作]
|
||
D --> F[各组件响应还原逻辑]
|
||
```
|
||
|
||
**Diagram sources**
|
||
- [WindowFormEventManager.ts](file://src/events/WindowFormEventManager.ts#L22-L22)
|
||
- [EventBuilderImpl.ts](file://src/events/impl/EventBuilderImpl.ts#L7-L95)
|
||
|
||
**Section sources**
|
||
- [WindowFormEventManager.ts](file://src/events/WindowFormEventManager.ts#L7-L60)
|
||
- [EventBuilderImpl.ts](file://src/events/impl/EventBuilderImpl.ts#L7-L95)
|
||
|
||
## 事件协同关系分析
|
||
`windowFormRestore` 通常与 `windowFormDataUpdate` 事件协同工作。前者仅通知“还原”动作的发生，而后者负责携带具体的窗口状态数据（包括坐标 x/y 和宽高 width/height），实现精确的状态同步。
|
||
|
||
例如，在窗口还原过程中：
|
||
1. 首先触发 `windowFormRestore(id)`，通知所有监听者窗口即将还原；
|
||
2. 紧接着发送 `windowFormDataUpdate({ id, state: 'default', x, y, width, height })`，提供新的布局参数；
|
||
3. UI 组件接收到数据后，更新 DOM 元素的位置与尺寸。
|
||
|
||
这种分离设计提高了系统的灵活性和可维护性。
|
||
|
||
```mermaid
|
||
sequenceDiagram
|
||
participant User as 用户
|
||
participant WM as 窗口管理器
|
||
participant EM as 事件管理器(wfem)
|
||
participant UI as UI组件
|
||
User->>WM : 执行还原操作
|
||
WM->>EM : notifyEvent("windowFormRestore", id)
|
||
EM->>UI : 执行所有 windowFormRestore 回调
|
||
WM->>EM : notifyEvent("windowFormDataUpdate", {id, state, x, y, width, height})
|
||
EM->>UI : 执行所有 windowFormDataUpdate 回调
|
||
UI->>UI : 更新DOM样式与位置
|
||
```
|
||
|
||
**Diagram sources**
|
||
- [WindowFormEventManager.ts](file://src/events/WindowFormEventManager.ts#L37-L37)
|
||
- [WindowFormTypes.ts](file://src/ui/types/WindowFormTypes.ts#L5-L9)
|
||
|
||
**Section sources**
|
||
- [WindowFormEventManager.ts](file://src/events/WindowFormEventManager.ts#L37-L37)
|
||
- [WindowFormTypes.ts](file://src/ui/types/WindowFormTypes.ts#L5-L9)
|
||
|
||
## Vue组件中的实践应用
|
||
在 Vue 组件中，可通过 `wfem.addEventListener` 监听 `windowFormRestore` 事件，并结合响应式数据重置 UI 布局。建议使用 CSS 过渡动画提升用户体验。
|
||
|
||
```mermaid
|
||
classDiagram
|
||
class WindowComponent {
|
||
+windowId : string
|
||
+position : WindowFormPos
|
||
+size : {width : number, height : number}
|
||
+mounted()
|
||
+beforeUnmount()
|
||
}
|
||
class EventManager {
|
||
+addEventListener(event, handler)
|
||
+removeEventListener(event, handler)
|
||
+notifyEvent(event, ...args)
|
||
}
|
||
WindowComponent --> EventManager : 使用 wfem
|
||
note right of WindowComponent
|
||
在 mounted 中注册事件监听，
|
||
在 beforeUnmount 中清理资源
|
||
end note
|
||
```
|
||
|
||
**Diagram sources**
|
||
- [WindowFormEventManager.ts](file://src/events/WindowFormEventManager.ts#L60-L60)
|
||
- [WindowFormTypes.ts](file://src/ui/types/WindowFormTypes.ts#L1-L5)
|
||
|
||
**Section sources**
|
||
- [WindowFormEventManager.ts](file://src/events/WindowFormEventManager.ts#L60-L60)
|
||
- [WindowFormTypes.ts](file://src/ui/types/WindowFormTypes.ts#L1-L10)
|
||
|
||
## 在窗口状态机中的角色
|
||
`windowFormRestore` 是窗口状态机中从 `maximized` 或 `minimized` 转换至 `default` 状态的关键触发点。它标志着窗口生命周期中的一个重要转变节点，常伴随以下行为：
|
||
- 恢复原始位置与尺寸
|
||
- 重新激活窗口焦点
|
||
- 触发内容区域重渲染
|
||
- 更新任务栏图标状态
|
||
|
||
该事件与其他窗口控制事件（如 `windowFormMinimize`, `windowFormMaximize`）共同构成了完整的状态转换网络，支撑起复杂的桌面交互体验。
|
||
|
||
**Section sources**
|
||
- [WindowFormEventManager.ts](file://src/events/WindowFormEventManager.ts#L7-L42)
|
||
- [WindowFormTypes.ts](file://src/ui/types/WindowFormTypes.ts#L5-L9) |