lowcode-engine IPublicModelEditorView:窗口编辑视图模型、类型结构与多视图实现机制

发布时间:2026/11/11 3:49:12

lowcode-engine IPublicModelEditorView:窗口编辑视图模型、类型结构与多视图实现机制 lowcode-engine IPublicModelEditorView窗口编辑视图模型、类型结构与多视图实现机制【免费下载链接】lowcode-engineAn enterprise-class low-code technology stack with scale-out design / 一套面向扩展设计的企业级低代码技术体系项目地址: https://gitcode.com/GitHub_Trending/lo/lowcode-engineIPublicModelEditorView是 lowcode-engine Workspace 多视图体系中的核心模型 API自 v1.1.7 引入标注为实验性它把「窗口中的一个编辑视图」抽象为独立的插件上下文既有完整插件上下文能力又携带viewName、viewType两个视图级标识。读完本篇你能理解该模型的类型结构、它在源码中的运行时实现内部 Context 与 Proxy 模型以及如何在工作区插件中获取并使用 EditorView 上下文来支持「编辑器 / Webview」双视图切换场景。一、API 参考定位一个带视图标识的插件上下文官方文档 editor-view.md 对该 API 的元信息定义如下状态experimental实验性 API类型文件IPublicModelEditorView版本since v1.1.7语义窗口编辑视图文档中给出的类型定义为import { IPublicModelPluginContext } from ./plugin-context; export interface IPublicModelEditorView extends IPublicModelPluginContext {};需要注意的是仓库中实际的类型声明比文档片段多出了两个字段以 packages/types/src/shell/model/editor-view.ts 为准import { IPublicModelPluginContext } from ./plugin-context; export interface IPublicModelEditorView extends IPublicModelPluginContext { viewName: string; viewType: editor | webview; }即IPublicModelEditorView的本质是IPublicModelPluginContext的扩展额外暴露视图名viewName与视图类型viewType取值为editor | webview。二、基座类型 IPublicModelPluginContextEditorView 继承的全部能力文档明确将 IPublicModelPluginContext 列为相关类型定义。从 plugin-context.ts 的源码看EditorView 上下文继承了以下成员均为 getter 或字段成员类型说明preferenceIPluginPreferenceMananger读取插件初始化配置skeletonIPublicApiSkeleton布局骨架 APIhotkeyIPublicApiHotkey快捷键 APIsettersIPublicApiSetters属性设置器 APIconfigIPublicModelEngineConfig引擎配置 APImaterialIPublicApiMaterial物料 APIeventIPublicApiEvent全局事件总线插件与引擎之间通信projectIPublicApiProject项目/画布文档 APIcommonIPublicApiCommon通用工具 APIpluginsIPublicApiPlugins插件管理 APIloggerIPublicApiLogger日志 APIpluginEventIPublicApiEvent插件内部局部事件不跨插件广播canvasIPublicApiCanvas画布 APIworkspaceIPublicApiWorkspace工作区 APIcommonUIIPublicApiCommonUI公共 UI APIcommandIPublicApiCommand命令 APIregisterLevelIPublicEnumPluginRegisterLevel插件注册层级since v1.1.7isPluginRegisteredInWorkspaceboolean是否注册在工作区层级editorWindowIPublicModelWindow所属窗口模型这也解释了 EditorView 的定位它不是一个新的能力集合而是把插件上下文的作用域收窄到某个具体视图使得该视图内注册的插件只拿到这一个上下文实例。三、viewName 与 viewType区分视图的两个字段3.1 viewType 的两种取值viewType只能是editor或webview默认值为editor。这一默认行为在源码中有多处印证内部视图上下文构造时执行this.viewType editorView.viewType || editor;view-context.tsWorkspace API 在枚举资源类型下的视图列表时同样做了viewType: d.viewType || editor的兜底api/workspace.ts 的resourceTypeList。两者的运行时行为差异体现在视图初始化流程中view-context.tsinit flow(function* (this: Context) { if (this.viewType webview) { // webview先取 url 钩子返回的地址再注册内置 webview 插件 const url yield this.instance?.url?.(); yield this.plugins.register(getWebviewPlugin(url, this.viewName)); } else { // editor注册内部插件骨架、模拟器等标准编辑器组件 yield this.registerInnerPlugins(); } yield this.instance?.init?.(); yield this.innerPlugins.init(); this.isInit true; });从源码结构看editor视图走标准编辑器装配注册内部插件而webview视图则退化为一个由url决定内容的内嵌页面viewName会作为 webview 插件的参数传入。3.2 viewName 与视图工厂类型viewName是视图在资源内的唯一名字资源层用它建立索引资源类维护editorViewMap: Mapstring, IPublicTypeEditorView初始化时把资源类型声明的每个editorViews项按viewName写入 Map并提供getEditorView(name)精确查找resource.ts资源的viewName属性解析顺序为resourceData.viewName → resourceData.viewType → defaultViewNameresource.ts其中defaultViewName又回退到资源类型的defaultViewName || defaultViewType用于决定窗口打开后默认展示哪个视图。viewName与viewType的组合还以「工厂函数」的形式暴露给资源类型声明侧即 IPublicTypeEditorViewexport interface IPublicTypeEditorView { /** 资源名字 */ viewName: string; /** 资源类型 */ viewType?: editor | webview; (ctx: any, options: any): IPublicEditorViewConfig; }它是一个「带元信息的函数」调用后返回 IPublicEditorViewConfig包含三个可选钩子export interface IPublicEditorViewConfig { /** 视图初始化钩子 */ init?: () Promisevoid; /** 资源保存时会调用视图的钩子 */ save?: () Promisevoid; /** viewType 类型为 webview 时渲染的地址 */ url?: () Promisestring; }其中url钩子仅在viewType为webview时生效对应上文 init 流程中的取值init/save则会在视图初始化与窗口save()调用链中被触发视图上下文的save()即return await this.instance?.save?.()见 view-context.ts。四、运行时实现内部 Context 与公开的 EditorView 模型4.1 内部ContextIViewContext真正的状态容器是 workspace 包中的 Context 类实现IViewContext它基于 mobx 的obx/computed/flow管理激活状态_activate/active与初始化标记isInit构造时以IPublicEnumPluginRegisterLevel.EditorView作为注册层级并调用视图工厂函数拿到instance即IPublicEditorViewConfig。setActivate还会联动innerHotkey.activate()保证快捷键只在激活的视图中生效——从源码结构看这是「每个视图拥有独立快捷键作用域」的实现基础。4.2 公开模型EditorView 类与 toProxy对外暴露的模型实现见 packages/shell/src/model/editor-view.tsexport class EditorView { [editorViewSymbol]: IViewContext; [pluginContextSymbol]: IPublicModelPluginContext; constructor(editorView: IViewContext) { this[editorViewSymbol] editorView; this[pluginContextSymbol] this[editorViewSymbol].innerPlugins._getLowCodePluginContext({ pluginName: editorView.editorWindow editorView.viewName, }); } toProxy() { return new Proxy(this, { get(target, prop, receiver) { if ((target[pluginContextSymbol] as any)[prop as string]) { return Reflect.get(target[pluginContextSymbol], prop, receiver); } return Reflect.get(target, prop, receiver); }, }); } get viewName() { return this[editorViewSymbol].viewName; } get viewType() { return this[editorViewSymbol].viewType; } }三个关键点上下文来源构造时用「窗口标识 viewName」拼出唯一的pluginName从内部插件系统取出对应的低代码插件上下文保证 EditorView 上下文与视图内注册的插件一一对应Proxy 代理策略toProxy()生成的代理在属性访问时优先委托给pluginContextSymbol只有插件上下文上不存在该属性时才回落到 EditorView 自身即viewName、viewType这两个视图级字段。这正是「IPublicModelEditorView extends IPublicModelPluginContext」在运行时的落地方式——一个对象同时满足两个接口的读取字段只读性viewName、viewType只暴露 getter视图标识由声明侧决定运行时不可改写。五、与 Window 模型的配合多视图切换的入口IPublicModelEditorView的挂载点在 IPublicModelWindow同为 v1.1.7 引入export interface IPublicModelWindowResource IPublicModelResource { /** 窗口当前视图 */ currentEditorView: IPublicModelEditorView | null; /** 窗口全部视图实例 */ editorViews: IPublicModelEditorView[]; /** 修改当前窗口视图类型 */ changeViewType(viewName: string): void; /** 调用当前窗口视图保存钩子 */ save(): Promiseany; /** 窗口视图变更事件 */ onChangeViewType(fn: (viewName: string) void): IPublicTypeDisposable; /** 窗口视图保存事件 since 1.1.7 */ onSave(fn: () void): IPublicTypeDisposable; // ...id / title / icon / resource / importSchema }据此窗口是「视图的宿主」editorViews持有该窗口资源声明的所有视图实例currentEditorView指向当前激活视图未就绪时为nullchangeViewType(viewName)完成切换save()触发当前视图的save钩子onChangeViewType/onSave则提供可订阅、可dispose的事件通道。视图声明本身则来自资源体系——resourceTypeList API 会把每个资源类型的editorViews以{ viewName, viewType }列表形式对外暴露可作为枚举「某资源支持哪些视图」的入口窗口打开由workspace.openEditorWindow系列方法驱动api/workspace.ts。六、实战在插件中获取并使用 EditorView 上下文lowcode-utils 提供了专门的高阶组件 ProvideViewPluginContext用于把「当前视图」的 EditorView 上下文注入到 React 组件中// packages/utils/src/workspace.tsx 核心逻辑简化 const getPluginContextFun (editorWindow?) { if (!editorWindow?.currentEditorView) return null; if (viewName) { // 按字符串或字符串数组过滤特定视图 const items editorWindow?.editorViews.filter(d d.viewName viewName || (Array.isArray(viewName) viewName.includes(d.viewName))); return items[0]; } return editorWindow.currentEditorView; };其工作方式有三个值得注意的细节均见源码支持传入viewName字符串或字符串数组来锁定特定视图的上下文不传则跟随currentEditorView通过workspace.onChangeActiveEditorView监听视图切换并自动更新注入的上下文workspace.tsx仅当宿主组件的registerLevel为IPublicEnumPluginRegisterLevel.Workspace时才注入否则原样渲染避免非工作区插件误用视图上下文。基于这些 API一个典型的视图状态组件可以写成import { ProvideViewPluginContext } from alilc/lowcode-utils; import { IPublicModelEditorView } from alilc/lowcode-types; function ViewStatus({ pluginContext }: { pluginContext: IPublicModelEditorView }) { return ( span {pluginContext.viewName} / {pluginContext.viewType} /span ); } // 将名为 custom-view 的视图上下文注入组件 export default ProvideViewPluginContext(ViewStatus, custom-view);对于非组件场景如命令、事件处理可直接经由窗口模型操作// 工作区层级插件中 const win pluginContext.workspace.window; console.log(win.currentEditorView?.viewName, win.currentEditorView?.viewType); const disposable win.onChangeViewType((viewName) { // 当前窗口视图切换时回调 }); // 不再需要时 disposable.dispose();若声明自定义视图则在资源类型模型中提供editorViews数组每项遵循 IPublicTypeEditorView 的形状例如一个 webview 预览视图示例{ viewName: preview-webview, viewType: webview, (ctx, options) { return { url: async () options.url, // 仅 webview 视图生效 }; }, },资源初始化时会将其登记进editorViewMapresource.ts随后窗口即可通过changeViewType(preview-webview)切入该视图。七、限制与注意事项实验性 API文档页明确标注experimental且viewType/currentEditorView/editorViews均要求v1.1.7 及以上在旧版本或非 Workspace 模式下registerLevel非Workspace这些字段与ProvideViewPluginContext的注入行为不可用。文档与源码的差异editor-view.md 中的接口体是空的extends IPublicModelPluginContext {}而仓库类型声明实际包含viewName、viewType两个字段引用类型时以 editor-view.ts 的源码为准。null 安全currentEditorView的类型为IPublicModelEditorView | null视图尚未初始化或窗口无资源时可能为空使用前应判空ProvideViewPluginContext内部即如此处理。适用场景该模型服务于「一个窗口、多个视图」的资源化工作区如同时提供设计器视图与 webview 预览视图。单画布、单视图的普通编辑器接入不需要直接接触 EditorView 模型。参考文件API 文档docs/docs/api/model/editor-view.md类型声明packages/types/src/shell/model/editor-view.ts、packages/types/src/shell/model/plugin-context.ts、packages/types/src/shell/model/window.ts、packages/types/src/shell/type/editor-view.ts、packages/types/src/shell/type/editor-view-config.ts运行时实现packages/shell/src/model/editor-view.ts、packages/workspace/src/context/view-context.ts、packages/workspace/src/resource.ts、packages/shell/src/api/workspace.ts视图上下文注入工具packages/utils/src/workspace.tsx【免费下载链接】lowcode-engineAn enterprise-class low-code technology stack with scale-out design / 一套面向扩展设计的企业级低代码技术体系项目地址: https://gitcode.com/GitHub_Trending/lo/lowcode-engine创作声明:本文部分内容由AI辅助生成(AIGC),仅供参考
延伸阅读

更多相关文章

2026/11/8 14:47:11

CC2530与ZStack协议栈实现PAJ7620手势识别无线传输

简介:ZStack-2.5.1a_paj7620_zigbeecc2530_是一套基于CC2530微控制器与Paj7620手势传感器的Zigbee短地址组网工程示例,面向物联网及嵌入式开发者,旨在演示如何借助ZStack协议栈完成节点自动组网、传感数据采集与无线传输。压缩包共1372个文件…

2026/10/27 15:48:47

基于ERC-1155的链上优惠券:从发行到防重复核销的智能合约实现

简介:一套基于以太坊的通用电子优惠券系统项目资料,面向区块链方向学习者、高校相关专业学生及开发者,适配毕业设计、课程设计、作业演示与二次开发等场景。压缩包共485个文件,大小约8.17MB,以Java源文件(1…

2026/11/11 3:47:44

巴中电工证怎么办理在哪考 3天搞定考试复审全流程

巴中电工证怎么办理在哪考 3天搞定考试复审全流程 工地太忙根本没时间复习考试,你不是一个人。每天从早上六点干到晚上十点,连吃饭都在工地上解决,谁还有心思去看书?但你必须知道, 巴中电工证怎么办理…

2026/11/11 3:47:44

工地太忙根本没时间复习考试?吉安井冈山电工证官方报名入口全攻略

工地太忙根本没时间复习考试?吉安井冈山电工证官方报名入口全攻略 工地太忙根本没时间复习考试,这是很多电工从业者的共同痛点。特别是像吉安井冈山这样的地区,工程项目密集,电工证到期换证成了不少人的燃眉之急。很多人因为工作强度大,根本没有精力去备…

2026/11/11 3:47:44

正规电工证什么样 2026河南最新政策实操考试避坑指南

正规电工证什么样 2026河南最新政策实操考试避坑指南 实操考试心里没底怕挂科?别慌,2026河南最新政策已经明确了电工证报考流程、实操考试标准和合格率,掌握这些关键信息,你就能顺利拿证。 电工证到底值不值?先看它能干啥…

2026/11/11 3:42:44

商丘电工转岗进商场施工的电工证多久拿证?证书过期了怎么办?

商丘电工转岗进商场施工的电工证多久拿证?证书过期了怎么办? 证书过期了不知道怎么复审延期?你不是一个人,商丘的张师傅就是典型的例子。他原本是建筑工地的电工,后来转岗到了商场施工项目,结果发现自己的电工证早已过期,想继续干活却因为证书问题被项…

2026/11/10 8:12:38

电工证丢失还能补吗?千万别踩坑,丢了证等于失业

电工证丢失还能补吗?千万别踩坑,丢了证等于失业 你正在找工作,但手里的电工证突然丢了,这下怎么办?别急,先别慌, 电工证丢失还能补吗 ?答案是肯定的,但 千万别踩坑 ,补办流程如果不了解,可能会耽误你上岗、甚至影响到你的收入。…

2026/11/11 0:02:26

考低压电工证通过率考试真题与备考技巧

低压电工证通过率高不高?学历不高也能考,值不值得考? 你是不是总听说电工证能帮你找高薪工作,但又担心自己学历不够,考不上?其实,低压电工证考试门槛并没有你想象中那么高,关键是方法对不对。这篇文章就告诉你, 考低压电工证通过率到底有多高 ,…

2026/11/11 0:02:26

低压电工证学时千万别踩坑,濮阳毕业生怎么避坑报名

低压电工证学时千万别踩坑,濮阳毕业生怎么避坑报名 你是不是也和我一样,刚毕业就听说低压电工证学时必须达标才能上岗?可一打听,发现报名机构五花八门,价格参差不齐, 不知道去哪报名怕被中介坑…

2026/11/10 20:08:15

面向复杂光照与角度的宠物面部识别鲁棒性增强策略

在智慧养宠时代,基于视觉的宠物身份识别技术正逐步从实验室走向家庭应用。然而,与配合度高的人类不同,宠物是典型的“非合作生物识别对象”——它们不会主动配合摄像头调整姿态,更无法控制光照环境。实际应用中,我们常…

2026/11/10 10:29:37

SSM电子书店源码全解析:结构、原理、部署与排错实战

/* MD / 富文本中的 .toc(含博客园搬家等嵌套结构);.toc-box 在侧栏,不受影响 */#content_views .toc,/* 编辑器常在目录前后插入空 p(:empty 仍占 20px),一并去掉避免顶空隙 */#content_views.markdown_views > p:empty:has(+ .toc),#content_views.markdown_views …

还想了解更多?直接咨询顾问

免费诊断 + 免费方案 + 透明报价。

全国咨询热线400-8866-253
免费获取方案
☎咨询二维码 ☎ ↑