96 lines
4.6 KiB
Markdown
96 lines
4.6 KiB
Markdown
|
# 窗口最小化事件
|
|||
|
|
|
|||
|
|
<cite>
|
|||
|
|
**本文档引用的文件**
|
|||
|
|
- [WindowFormEventManager.ts](file://src/events/WindowFormEventManager.ts)
|
|||
|
|
- [WindowFormTypes.ts](file://src/ui/types/WindowFormTypes.ts)
|
|||
|
|
- [EventBuilderImpl.ts](file://src/events/impl/EventBuilderImpl.ts)
|
|||
|
|
</cite>
|
|||
|
|
|
|||
|
|
## 目录
|
|||
|
|
1. [事件机制概述](#事件机制概述)
|
|||
|
|
2. [事件触发与参数传递](#事件触发与参数传递)
|
|||
|
|
3. [状态同步与枚举值应用](#状态同步与枚举值应用)
|
|||
|
|
4. [监听器注册与Pinia状态更新](#监听器注册与pinia状态更新)
|
|||
|
|
5. [事件解耦设计分析](#事件解耦设计分析)
|
|||
|
|
|
|||
|
|
## 事件机制概述
|
|||
|
|
|
|||
|
|
`windowFormMinimize` 事件是窗口管理系统中的核心交互事件之一，用于响应用户点击窗口最小化按钮的操作。该事件通过全局事件管理器 `wfem` 进行广播，采用发布-订阅模式实现组件间的松耦合通信。事件定义在 `IWindowFormEvent` 接口中，并由 `EventBuilderImpl` 类提供具体的事件注册与通知能力。
|
|||
|
|
|
|||
|
|
此事件机制的设计使得任意组件均可独立监听窗口最小化行为，而无需直接依赖窗口实例本身，从而提升了系统的可维护性与扩展性。
|
|||
|
|
|
|||
|
|
**Section sources**
|
|||
|
|
- [WindowFormEventManager.ts](file://src/events/WindowFormEventManager.ts#L12-L12)
|
|||
|
|
|
|||
|
|
## 事件触发与参数传递
|
|||
|
|
|
|||
|
|
当用户点击窗口的最小化按钮时，系统会调用 `wfem.notifyEvent('windowFormMinimize', id)` 方法触发该事件。其中 `id` 为窗口的唯一标识符（字符串类型），作为事件回调函数的参数传递给所有监听者。
|
|||
|
|
|
|||
|
|
事件的接口定义如下：
|
|||
|
|
```ts
|
|||
|
|
windowFormMinimize: (id: string) => void;
|
|||
|
|
```
|
|||
|
|
这确保了所有监听器都能接收到被最小化的窗口ID，进而执行相应的UI动画或逻辑处理。
|
|||
|
|
|
|||
|
|
**Section sources**
|
|||
|
|
- [WindowFormEventManager.ts](file://src/events/WindowFormEventManager.ts#L12-L12)
|
|||
|
|
|
|||
|
|
## 状态同步与枚举值应用
|
|||
|
|
|
|||
|
|
在接收到 `windowFormMinimize` 事件后，系统通常会将对应窗口的状态更新为 `'minimized'`。该状态值来源于 `TWindowFormState` 枚举类型，其定义如下：
|
|||
|
|
|
|||
|
|
```ts
|
|||
|
|
export type TWindowFormState = 'default' | 'minimized' | 'maximized';
|
|||
|
|
```
|
|||
|
|
|
|||
|
|
通过将窗口状态设置为 `'minimized'`，可以驱动视图层进行相应的渲染更新，例如隐藏窗口内容、在任务栏显示缩略图标等。这种基于枚举的状态管理模式增强了代码的可读性和类型安全性。
|
|||
|
|
|
|||
|
|
**Section sources**
|
|||
|
|
- [WindowFormTypes.ts](file://src/ui/types/WindowFormTypes.ts#L9-L9)
|
|||
|
|
|
|||
|
|
## 监听器注册与Pinia状态更新
|
|||
|
|
|
|||
|
|
在Vue组件中，可通过 `wfem.addEventListener` 方法注册对 `windowFormMinimize` 事件的监听。典型用法如下所示：
|
|||
|
|
|
|||
|
|
```ts
|
|||
|
|
wfem.addEventListener('windowFormMinimize', (id: string) => {
|
|||
|
|
// 更新Pinia store中的窗口状态
|
|||
|
|
const windowStore = useWindowStore();
|
|||
|
|
windowStore.updateState(id, 'minimized');
|
|||
|
|
});
|
|||
|
|
```
|
|||
|
|
|
|||
|
|
上述代码展示了如何在事件回调中获取窗口ID并更新Pinia状态仓库中的窗口状态字段。这种方式实现了视图与状态的分离，符合现代前端架构的最佳实践。
|
|||
|
|
|
|||
|
|
尽管当前项目中未包含 `useWindowStore` 的具体实现，但基于现有技术栈（Vue + Pinia）可合理推断其存在类似的窗口状态管理模块。
|
|||
|
|
|
|||
|
|
**Section sources**
|
|||
|
|
- [WindowFormEventManager.ts](file://src/events/WindowFormEventManager.ts#L60-L60)
|
|||
|
|
- [WindowFormTypes.ts](file://src/ui/types/WindowFormTypes.ts#L9-L9)
|
|||
|
|
|
|||
|
|
## 事件解耦设计分析
|
|||
|
|
|
|||
|
|
`windowFormMinimize` 事件体现了典型的事件驱动解耦设计。多个窗口组件可以各自注册监听器，独立响应最小化事件，而无需彼此知晓或直接通信。事件的发布者仅需调用 `notifyEvent`，由 `EventBuilderImpl` 负责遍历所有订阅者并执行回调。
|
|||
|
|
|
|||
|
|
该设计的优势包括：
|
|||
|
|
- **高内聚低耦合**：各组件专注于自身逻辑，不依赖其他窗口的状态。
|
|||
|
|
- **易于扩展**：新增窗口组件只需添加监听器即可参与事件流。
|
|||
|
|
- **便于测试**：事件监听逻辑可单独单元测试，无需完整UI环境。
|
|||
|
|
|
|||
|
|
```mermaid
|
|||
|
|
flowchart TD
|
|||
|
|
A[用户点击最小化按钮] --> B[触发 windowFormMinimize 事件]
|
|||
|
|
B --> C{通知所有监听者}
|
|||
|
|
C --> D[窗口A监听器: 执行最小化动画]
|
|||
|
|
C --> E[窗口B监听器: 更新状态为 minimized]
|
|||
|
|
C --> F[任务栏组件: 显示最小化图标]
|
|||
|
|
```
|
|||
|
|
|
|||
|
|
**Diagram sources**
|
|||
|
|
- [WindowFormEventManager.ts](file://src/events/WindowFormEventManager.ts#L12-L12)
|
|||
|
|
- [EventBuilderImpl.ts](file://src/events/impl/EventBuilderImpl.ts#L50-L75)
|
|||
|
|
|
|||
|
|
**Section sources**
|
|||
|
|
- [WindowFormEventManager.ts](file://src/events/WindowFormEventManager.ts#L60-L60)
|
|||
|
|
- [EventBuilderImpl.ts](file://src/events/impl/EventBuilderImpl.ts#L50-L75)
|