114 lines
5.2 KiB
Markdown
114 lines
5.2 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)
|
|||
|
|
- [basic.css](file://src/css/basic.css)
|
|||
|
|
</cite>
|
|||
|
|
|
|||
|
|
## 目录
|
|||
|
|
1. [引言](#引言)
|
|||
|
|
2. [事件触发机制](#事件触发机制)
|
|||
|
|
3. [状态映射与UI响应](#状态映射与ui响应)
|
|||
|
|
4. [CSS视觉变换实现](#css视觉变换实现)
|
|||
|
|
5. [TypeScript代码范例](#typescript代码范例)
|
|||
|
|
6. [多窗口协调机制](#多窗口协调机制)
|
|||
|
|
7. [总结](#总结)
|
|||
|
|
|
|||
|
|
## 引言
|
|||
|
|
本节全面阐述`windowFormMaximize`事件的触发条件与交互逻辑。当用户点击窗口最大化按钮时，系统将广播该事件并携带窗口ID至所有订阅者，驱动UI进入全屏布局模式。此机制是桌面级应用中实现窗口管理的核心部分。
|
|||
|
|
|
|||
|
|
**Section sources**
|
|||
|
|
- [WindowFormEventManager.ts](file://src/events/WindowFormEventManager.ts#L1-L60)
|
|||
|
|
|
|||
|
|
## 事件触发机制
|
|||
|
|
`windowFormMaximize`事件定义于`IWindowFormEvent`接口中，其函数签名接受一个字符串类型的窗口ID参数：
|
|||
|
|
|
|||
|
|
```ts
|
|||
|
|
windowFormMaximize: (id: string) => void;
|
|||
|
|
```
|
|||
|
|
|
|||
|
|
该事件由全局事件管理器`wfem`（即`EventBuilderImpl<IWindowFormEvent>`实例）负责分发。当用户交互触发最大化行为时，调用`notifyEvent('windowFormMaximize', windowId)`方法，向所有监听此事件的组件广播通知。
|
|||
|
|
|
|||
|
|
事件系统基于观察者模式实现，支持动态注册和注销监听器，并可通过配置项实现立即执行、单次监听等功能。
|
|||
|
|
|
|||
|
|
**Section sources**
|
|||
|
|
- [WindowFormEventManager.ts](file://src/events/WindowFormEventManager.ts#L17-L17)
|
|||
|
|
- [EventBuilderImpl.ts](file://src/events/impl/EventBuilderImpl.ts#L7-L95)
|
|||
|
|
|
|||
|
|
## 状态映射与UI响应
|
|||
|
|
`windowFormMaximize`事件与`TWindowFormState`类型中的`maximized`状态存在直接映射关系。`TWindowFormState`定义如下：
|
|||
|
|
|
|||
|
|
```ts
|
|||
|
|
export type TWindowFormState = 'default' | 'minimized' | 'maximized';
|
|||
|
|
```
|
|||
|
|
|
|||
|
|
当事件被触发后，相关组件会更新对应窗口的状态为`maximized`，并通过响应式机制驱动视图重绘。通常结合`windowFormDataUpdate`事件同步窗口尺寸与位置信息，确保状态一致性。
|
|||
|
|
|
|||
|
|
状态变更不仅影响当前窗口的显示模式，还可能触发任务栏图标高亮、Z轴层级调整等副作用，以保证用户体验的一致性。
|
|||
|
|
|
|||
|
|
**Section sources**
|
|||
|
|
- [WindowFormTypes.ts](file://src/ui/types/WindowFormTypes.ts#L9-L9)
|
|||
|
|
- [WindowFormEventManager.ts](file://src/events/WindowFormEventManager.ts#L50-L55)
|
|||
|
|
|
|||
|
|
## CSS视觉变换实现
|
|||
|
|
窗口最大化过程中的视觉效果主要通过CSS变换实现。虽然具体样式未在核心逻辑文件中体现，但可推断其依赖以下机制：
|
|||
|
|
|
|||
|
|
- 使用`transform: scale()`或`width/height: 100%`实现尺寸扩展
|
|||
|
|
- 配合过渡动画（transition）实现平滑缩放
|
|||
|
|
- 利用`z-index`控制多窗口堆叠顺序
|
|||
|
|
- 可能结合`position: fixed`或`absolute`脱离文档流进行定位
|
|||
|
|
|
|||
|
|
基础样式文件`basic.css`提供了通用的盒模型重置、字体设置及响应式支持，为窗口动画提供稳定的样式环境。
|
|||
|
|
|
|||
|
|
**Section sources**
|
|||
|
|
- [basic.css](file://src/css/basic.css#L1-L134)
|
|||
|
|
- [WindowFormEventManager.ts](file://src/events/WindowFormEventManager.ts#L60-L60)
|
|||
|
|
|
|||
|
|
## TypeScript代码范例
|
|||
|
|
使用`wfem`监听并处理最大化行为的标准TypeScript代码范例如下：
|
|||
|
|
|
|||
|
|
```ts
|
|||
|
|
// 订阅窗口最大化事件
|
|||
|
|
wfem.addEventListener('windowFormMaximize', (id: string) => {
|
|||
|
|
// 更新窗口状态
|
|||
|
|
const window = getWindowById(id);
|
|||
|
|
if (window) {
|
|||
|
|
window.state = 'maximized';
|
|||
|
|
// 触发DOM重绘
|
|||
|
|
redrawWindow(window);
|
|||
|
|
// 持久化状态（可选）
|
|||
|
|
saveWindowState(id, 'maximized');
|
|||
|
|
}
|
|||
|
|
});
|
|||
|
|
|
|||
|
|
// 发送最大化事件
|
|||
|
|
function maximizeWindow(id: string) {
|
|||
|
|
wfem.notifyEvent('windowFormMaximize', id);
|
|||
|
|
}
|
|||
|
|
```
|
|||
|
|
|
|||
|
|
建议在状态变更后调用重绘函数，并考虑将用户偏好（如是否最大化）持久化至`localStorage`，以便页面刷新后恢复。
|
|||
|
|
|
|||
|
|
**Section sources**
|
|||
|
|
- [WindowFormEventManager.ts](file://src/events/WindowFormEventManager.ts#L60-L60)
|
|||
|
|
- [EventBuilderImpl.ts](file://src/events/impl/EventBuilderImpl.ts#L70-L75)
|
|||
|
|
|
|||
|
|
## 多窗口协调机制
|
|||
|
|
在多窗口堆叠场景下，`windowFormMaximize`事件起到关键协调作用。当某一窗口最大化时：
|
|||
|
|
|
|||
|
|
- 其他非最小化窗口应自动退至后台
|
|||
|
|
- 最大化窗口获得最高`z-index`层级
|
|||
|
|
- 任务栏对应图标处于激活状态
|
|||
|
|
- 若存在模态窗口，则需特殊处理避免遮挡
|
|||
|
|
|
|||
|
|
事件广播机制确保所有关注窗口状态的模块（如任务栏、窗口管理器、快捷键服务）能同步响应，维持系统整体状态一致。
|
|||
|
|
|
|||
|
|
**Section sources**
|
|||
|
|
- [WindowFormEventManager.ts](file://src/events/WindowFormEventManager.ts#L17-L17)
|
|||
|
|
- [DesktopContainer.vue](file://src/ui/desktop-container/DesktopContainer.vue#L1-L23)
|
|||
|
|
|
|||
|
|
## 总结
|
|||
|
|
`windowFormMaximize`事件作为窗口控制系统的重要组成部分，实现了从用户操作到UI响应的完整闭环。它通过标准化的事件总线机制解耦组件间通信，结合类型安全的状态定义与CSS视觉变换，构建出流畅且可维护的桌面级交互体验。在复杂多窗口环境中，该事件有效协调各组件行为，保障系统稳定性与一致性。
|