lowcode-engine 设计器窗口模型IPublicModelWindow完全指南属性、方法、事件与源码剖析【免费下载链接】lowcode-engineAn enterprise-class low-code technology stack with scale-out design / 一套面向扩展设计的企业级低代码技术体系项目地址: https://gitcode.com/GitHub_Trending/lo/lowcode-engine低代码设计器窗口Window是 lowcode-engine 工作台Workspace体系中承载资源编辑的核心模型每个打开的窗口对应一个资源Resource并可在多个编辑视图EditorView之间切换。本文基于 window.md 官方 API 文档结合packages/types、packages/shell、packages/workspace三个包的源码实现系统讲解窗口模型的全部属性、方法、事件及其底层调用链帮助你掌握在插件与扩展代码中操作窗口、导入 schema、切换视图与监听保存的完整实战能力。该模型标记为experimental自v1.1.0起提供currentEditorView、editorViews、onSave等成员自v1.1.7起提供。类型定义见 packages/types/src/shell/model/window.tsShell 层实现见 packages/shell/src/model/window.ts。窗口模型在架构中的位置要理解 Window 模型先要看清它所在的调用层级。lowcode-engine 的公开 API 采用「Shell 壳层 内部实现」的分层设计类型层packages/types/src/shell/model/window.ts定义IPublicModelWindow接口是面向插件与扩展作者的稳定契约Shell 壳层packages/shell/src/model/window.ts将内部IEditorWindow实例包装为公开模型只暴露类型层声明的能力工作台实现层packages/workspace/src/window.tsEditorWindow类负责窗口的创建、视图初始化、schema 导入与保存等真实逻辑。窗口模型与另外两个模型紧密关联关联模型说明类型定义IPublicModelResource窗口对应资源承载资源元数据与import/save钩子packages/types/src/shell/model/resource.tsIPublicModelEditorView窗口下的编辑视图editor或webview类型packages/types/src/shell/model/editor-view.ts对应文档见 Resource 模型 与 EditorView 模型。窗口实例由工作台统一管理在 packages/workspace/src/workspace.ts 中openEditorWindowByResource/openEditorWindow会创建EditorWindow并维护windows列表与当前激活窗口window同时通过onChangeWindows、onChangeActiveWindow等事件对外广播变化。属性详解IPublicModelWindow共暴露 6 个属性其中resource是窗口的核心关联currentEditorView与editorViews是 v1.1.7 新增的视图访问入口。id窗口唯一标识id: string;每个窗口在创建时由内部实现生成唯一 id。从源码看EditorWindow使用uniqueId(window)生成前缀为window见 packages/workspace/src/window.ts#L48。Shell 层直接透传内部值packages/shell/src/model/window.ts#L10-L12。title窗口标题title?: string;窗口标题在打开窗口时由调用方传入或取资源默认标题。EditorWindow构造函数将config.title赋给this.title而在Workspace.initWindow()中创建默认窗口时标题取resource.titlepackages/workspace/src/workspace.ts#L149-L151Resource.title的取值优先级为resourceData.title || resourceTypeInstance.defaultTitle见 packages/workspace/src/resource.ts#L59-L61。icon窗口图标icon?: ReactElement;窗口图标为 React 元素通常直接复用资源图标。EditorWindow构造函数中执行this.icon resource.iconpackages/workspace/src/window.ts#L75而Resource.icon的取值优先级为resourceData.icon || resourceTypeInstance?.icon见 packages/workspace/src/resource.ts#L51-L53。resource窗口对应资源resource?: IPublicModelResource;这是窗口模型中最关键的关联属性。资源定义了窗口的类型、标题、图标、分类、选项以及import、save、url三个生命周期钩子。Shell 层在访问时会实时构造ShellResource包装对象packages/shell/src/model/window.ts#L22-L24。从 packages/workspace/src/resource.ts 可见资源还提供editorViews资源声明的全部视图配置viewNameviewTypedefaultViewName默认视图名取defaultViewName || defaultViewTypegetEditorView(name)按名取视图配置import(schema)/save(value)分别转发到资源类型实例的import/save钩子。currentEditorView窗口当前视图currentEditorView: IPublicModelEditorView | null;since v1.1.7。返回窗口当前激活的编辑视图。Shell 实现中若内部_editorView存在则包装为EditorView代理对象否则返回nullpackages/shell/src/model/window.ts#L50-L55。IPublicModelEditorView扩展自IPublicModelPluginContext额外提供viewName与viewType取值为editor | webview两个字段见 packages/types/src/shell/model/editor-view.ts。editorViews窗口所有视图editorViews: IPublicModelEditorView[];since v1.1.7。返回窗口下全部编辑视图实例的数组。Shell 实现遍历内部editorViewsMap 的值并逐个包装packages/shell/src/model/window.ts#L57-L59。方法详解importSchema导入 schemafunction importSchema(schema: IPublicTypeNodeSchema): void向当前窗口导入 schema底层会调用当前窗口对应资源的import钩子。完整调用链如下Shell 层调用this[windowSymbol].importSchema(schema)packages/shell/src/model/window.ts#L30-L32EditorWindow.importSchema先执行this.resource.import(schema)得到转换后的newSchemapackages/workspace/src/window.ts#L95-L106Resource.import转发到资源类型实例的import钩子packages/workspace/src/resource.ts#L107-L109若返回的newSchema为空则直接返回否则按 key 找到对应编辑视图调用view.project.importSchema(newSchema[key])真正写入项目。也就是说importSchema允许资源在导入前对 schema 做加工例如补齐默认配置、拆分多视图数据加工结果再分发到各视图的项目中。changeViewType修改当前视图类型function changeViewType(viewName: string): void切换窗口到指定名称的视图。Shell 层将其转为内部方法调用this[windowSymbol].changeViewName(viewName, false)packages/shell/src/model/window.ts#L34-L36第二个参数false表示需要广播事件。changeViewName内部执行packages/workspace/src/window.ts#L199-L216将当前视图setActivate(false)置为非激活从editorViewsMap 中取出目标视图并设为当前视图将新视图setActivate(true)激活广播window.change.view.type事件触发onChangeViewType订阅者若当前窗口是工作台激活窗口还会触发emitChangeActiveEditorView()通知全局「激活编辑视图已变更」。save保存窗口function save(): Promisevoid保存当前窗口内容会调用当前窗口对应资源的save钩子。内部实现packages/workspace/src/window.ts#L108-L123遍历resource.editorViews中声明的每个视图名逐个调用this.editorViews.get(name)?.save()收集各视图的保存结果到value对象以视图名为 key将汇总结果传给this.resource.save(value)由资源类型实例的save钩子统一落盘广播handle.save事件触发onSave订阅者并返回结果。Shell 层为异步透传async save() { return await this[windowSymbol].save(); }packages/shell/src/model/window.ts#L42-L44。事件详解两个事件方法都返回IPublicTypeDisposable即取消订阅函数在组件卸载或插件销毁时调用即可解除监听。内部均通过createModuleEventBus创建的事件总线实现。onChangeViewType窗口视图变更事件onChangeViewType(fn: (viewName: string) void): IPublicTypeDisposable;订阅窗口视图切换事件回调参数为切换后的视图名viewName。注册于window.change.view.type事件packages/workspace/src/window.ts#L162-L168由changeViewName在非忽略广播的切换即通过changeViewType公开方法调用时触发。典型用法const dispose window.onChangeViewType((viewName) { console.log(视图已切换为:, viewName); }); // 不再需要时 dispose();onSave窗口保存事件onSave(fn: () void): IPublicTypeDisposable;since v1.1.7。订阅窗口保存事件回调无参数。注册于handle.save事件packages/workspace/src/window.ts#L125-L131由save()在资源save钩子执行完毕后触发适合用于保存成功后的提示、刷新列表等联动逻辑。实战如何获取窗口并操作窗口对象可通过工作台 APIworkspace.window获取当前激活窗口或从workspace.windows获取全部窗口列表。Shell 层在 packages/shell/src/api/workspace.ts#L31-L36 与 packages/shell/src/api/workspace.ts#L100-L102 中分别将内部窗口包装为ShellWindow后暴露。组合使用示例在插件中import { workspace } from alilc/lowcode-engine; // 获取当前激活窗口 const window workspace.window; if (window) { // 读取窗口信息 console.log(window.id, window.title, window.resource?.type); // 导入 schema触发资源 import 钩子 window.importSchema(schema); // 切换到指定视图 window.changeViewType(preview); // 监听视图切换 const disposeView window.onChangeViewType((viewName) { // viewName: 切换后的视图名 }); // 监听保存 const disposeSave window.onSave(() { // 保存完成后的联动逻辑 }); // 手动保存触发资源 save 钩子 await window.save(); }需要注意该模型整体标记为experimental且currentEditorView、editorViews、onSave依赖 v1.1.7 及以上版本使用前请确认引擎版本并做好能力降级例如通过typeof window.onSave function判断。小结IPublicModelWindow是 lowcode-engine 工作台多窗口能力在公开 API 层的抽象resource属性将窗口与其资源类型解耦importSchema/save通过资源的import/save钩子完成数据进出changeViewType与onChangeViewType支撑多视图切换onSave则为保存后的联动提供统一入口。理解这一模型及其与 Resource、EditorView 的关系是开发多资源、多视图工作台扩展的基础。【免费下载链接】lowcode-engineAn enterprise-class low-code technology stack with scale-out design / 一套面向扩展设计的企业级低代码技术体系项目地址: https://gitcode.com/GitHub_Trending/lo/lowcode-engine创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考 lowcode-engine 设计器窗口模型（IPublicModelWindow）完全指南：属性、方法、事件与源码剖析
lowcode-engine 设计器窗口模型IPublicModelWindow完全指南属性、方法、事件与源码剖析【免费下载链接】lowcode-engineAn enterprise-class low-code technology stack with scale-out design / 一套面向扩展设计的企业级低代码技术体系项目地址: https://gitcode.com/GitHub_Trending/lo/lowcode-engine低代码设计器窗口Window是 lowcode-engine 工作台Workspace体系中承载资源编辑的核心模型每个打开的窗口对应一个资源Resource并可在多个编辑视图EditorView之间切换。本文基于 window.md 官方 API 文档结合packages/types、packages/shell、packages/workspace三个包的源码实现系统讲解窗口模型的全部属性、方法、事件及其底层调用链帮助你掌握在插件与扩展代码中操作窗口、导入 schema、切换视图与监听保存的完整实战能力。该模型标记为experimental自v1.1.0起提供currentEditorView、editorViews、onSave等成员自v1.1.7起提供。类型定义见 packages/types/src/shell/model/window.tsShell 层实现见 packages/shell/src/model/window.ts。窗口模型在架构中的位置要理解 Window 模型先要看清它所在的调用层级。lowcode-engine 的公开 API 采用「Shell 壳层 内部实现」的分层设计类型层packages/types/src/shell/model/window.ts定义IPublicModelWindow接口是面向插件与扩展作者的稳定契约Shell 壳层packages/shell/src/model/window.ts将内部IEditorWindow实例包装为公开模型只暴露类型层声明的能力工作台实现层packages/workspace/src/window.tsEditorWindow类负责窗口的创建、视图初始化、schema 导入与保存等真实逻辑。窗口模型与另外两个模型紧密关联关联模型说明类型定义IPublicModelResource窗口对应资源承载资源元数据与import/save钩子packages/types/src/shell/model/resource.tsIPublicModelEditorView窗口下的编辑视图editor或webview类型packages/types/src/shell/model/editor-view.ts对应文档见 Resource 模型 与 EditorView 模型。窗口实例由工作台统一管理在 packages/workspace/src/workspace.ts 中openEditorWindowByResource/openEditorWindow会创建EditorWindow并维护windows列表与当前激活窗口window同时通过onChangeWindows、onChangeActiveWindow等事件对外广播变化。属性详解IPublicModelWindow共暴露 6 个属性其中resource是窗口的核心关联currentEditorView与editorViews是 v1.1.7 新增的视图访问入口。id窗口唯一标识id: string;每个窗口在创建时由内部实现生成唯一 id。从源码看EditorWindow使用uniqueId(window)生成前缀为window见 packages/workspace/src/window.ts#L48。Shell 层直接透传内部值packages/shell/src/model/window.ts#L10-L12。title窗口标题title?: string;窗口标题在打开窗口时由调用方传入或取资源默认标题。EditorWindow构造函数将config.title赋给this.title而在Workspace.initWindow()中创建默认窗口时标题取resource.titlepackages/workspace/src/workspace.ts#L149-L151Resource.title的取值优先级为resourceData.title || resourceTypeInstance.defaultTitle见 packages/workspace/src/resource.ts#L59-L61。icon窗口图标icon?: ReactElement;窗口图标为 React 元素通常直接复用资源图标。EditorWindow构造函数中执行this.icon resource.iconpackages/workspace/src/window.ts#L75而Resource.icon的取值优先级为resourceData.icon || resourceTypeInstance?.icon见 packages/workspace/src/resource.ts#L51-L53。resource窗口对应资源resource?: IPublicModelResource;这是窗口模型中最关键的关联属性。资源定义了窗口的类型、标题、图标、分类、选项以及import、save、url三个生命周期钩子。Shell 层在访问时会实时构造ShellResource包装对象packages/shell/src/model/window.ts#L22-L24。从 packages/workspace/src/resource.ts 可见资源还提供editorViews资源声明的全部视图配置viewNameviewTypedefaultViewName默认视图名取defaultViewName || defaultViewTypegetEditorView(name)按名取视图配置import(schema)/save(value)分别转发到资源类型实例的import/save钩子。currentEditorView窗口当前视图currentEditorView: IPublicModelEditorView | null;since v1.1.7。返回窗口当前激活的编辑视图。Shell 实现中若内部_editorView存在则包装为EditorView代理对象否则返回nullpackages/shell/src/model/window.ts#L50-L55。IPublicModelEditorView扩展自IPublicModelPluginContext额外提供viewName与viewType取值为editor | webview两个字段见 packages/types/src/shell/model/editor-view.ts。editorViews窗口所有视图editorViews: IPublicModelEditorView[];since v1.1.7。返回窗口下全部编辑视图实例的数组。Shell 实现遍历内部editorViewsMap 的值并逐个包装packages/shell/src/model/window.ts#L57-L59。方法详解importSchema导入 schemafunction importSchema(schema: IPublicTypeNodeSchema): void向当前窗口导入 schema底层会调用当前窗口对应资源的import钩子。完整调用链如下Shell 层调用this[windowSymbol].importSchema(schema)packages/shell/src/model/window.ts#L30-L32EditorWindow.importSchema先执行this.resource.import(schema)得到转换后的newSchemapackages/workspace/src/window.ts#L95-L106Resource.import转发到资源类型实例的import钩子packages/workspace/src/resource.ts#L107-L109若返回的newSchema为空则直接返回否则按 key 找到对应编辑视图调用view.project.importSchema(newSchema[key])真正写入项目。也就是说importSchema允许资源在导入前对 schema 做加工例如补齐默认配置、拆分多视图数据加工结果再分发到各视图的项目中。changeViewType修改当前视图类型function changeViewType(viewName: string): void切换窗口到指定名称的视图。Shell 层将其转为内部方法调用this[windowSymbol].changeViewName(viewName, false)packages/shell/src/model/window.ts#L34-L36第二个参数false表示需要广播事件。changeViewName内部执行packages/workspace/src/window.ts#L199-L216将当前视图setActivate(false)置为非激活从editorViewsMap 中取出目标视图并设为当前视图将新视图setActivate(true)激活广播window.change.view.type事件触发onChangeViewType订阅者若当前窗口是工作台激活窗口还会触发emitChangeActiveEditorView()通知全局「激活编辑视图已变更」。save保存窗口function save(): Promisevoid保存当前窗口内容会调用当前窗口对应资源的save钩子。内部实现packages/workspace/src/window.ts#L108-L123遍历resource.editorViews中声明的每个视图名逐个调用this.editorViews.get(name)?.save()收集各视图的保存结果到value对象以视图名为 key将汇总结果传给this.resource.save(value)由资源类型实例的save钩子统一落盘广播handle.save事件触发onSave订阅者并返回结果。Shell 层为异步透传async save() { return await this[windowSymbol].save(); }packages/shell/src/model/window.ts#L42-L44。事件详解两个事件方法都返回IPublicTypeDisposable即取消订阅函数在组件卸载或插件销毁时调用即可解除监听。内部均通过createModuleEventBus创建的事件总线实现。onChangeViewType窗口视图变更事件onChangeViewType(fn: (viewName: string) void): IPublicTypeDisposable;订阅窗口视图切换事件回调参数为切换后的视图名viewName。注册于window.change.view.type事件packages/workspace/src/window.ts#L162-L168由changeViewName在非忽略广播的切换即通过changeViewType公开方法调用时触发。典型用法const dispose window.onChangeViewType((viewName) { console.log(视图已切换为:, viewName); }); // 不再需要时 dispose();onSave窗口保存事件onSave(fn: () void): IPublicTypeDisposable;since v1.1.7。订阅窗口保存事件回调无参数。注册于handle.save事件packages/workspace/src/window.ts#L125-L131由save()在资源save钩子执行完毕后触发适合用于保存成功后的提示、刷新列表等联动逻辑。实战如何获取窗口并操作窗口对象可通过工作台 APIworkspace.window获取当前激活窗口或从workspace.windows获取全部窗口列表。Shell 层在 packages/shell/src/api/workspace.ts#L31-L36 与 packages/shell/src/api/workspace.ts#L100-L102 中分别将内部窗口包装为ShellWindow后暴露。组合使用示例在插件中import { workspace } from alilc/lowcode-engine; // 获取当前激活窗口 const window workspace.window; if (window) { // 读取窗口信息 console.log(window.id, window.title, window.resource?.type); // 导入 schema触发资源 import 钩子 window.importSchema(schema); // 切换到指定视图 window.changeViewType(preview); // 监听视图切换 const disposeView window.onChangeViewType((viewName) { // viewName: 切换后的视图名 }); // 监听保存 const disposeSave window.onSave(() { // 保存完成后的联动逻辑 }); // 手动保存触发资源 save 钩子 await window.save(); }需要注意该模型整体标记为experimental且currentEditorView、editorViews、onSave依赖 v1.1.7 及以上版本使用前请确认引擎版本并做好能力降级例如通过typeof window.onSave function判断。小结IPublicModelWindow是 lowcode-engine 工作台多窗口能力在公开 API 层的抽象resource属性将窗口与其资源类型解耦importSchema/save通过资源的import/save钩子完成数据进出changeViewType与onChangeViewType支撑多视图切换onSave则为保存后的联动提供统一入口。理解这一模型及其与 Resource、EditorView 的关系是开发多资源、多视图工作台扩展的基础。【免费下载链接】lowcode-engineAn enterprise-class low-code technology stack with scale-out design / 一套面向扩展设计的企业级低代码技术体系项目地址: https://gitcode.com/GitHub_Trending/lo/lowcode-engine创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考