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

发布时间:2026/9/14 4:23:37

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/9/14 4:18:37

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

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

2026/9/14 4:18:37

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

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

2026/9/14 5:03:38

OpenClaw上云实战:广告营销团队的企业级Agent基础设施搭建

广告营销行业的团队,八成都有同一个感受:渠道后台越来越多,账户结构越来越复杂,素材需求越来越急,而人的精力就那么多。投放优化师一半时间花在拉数据、对报表、调价上,文案策划一天要赶几十条标题变体&…

2026/9/14 5:03:38

数字图像处理期末作业:OpenCV实践与算法优化

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

2026/9/14 5:03:38

微信小程序校园失物招领系统开发实践

1. 项目背景与核心价值校园失物招领一直是困扰学生和后勤管理部门的痛点问题。传统的张贴告示方式效率低下,信息传播范围有限。我在大三担任学生会生活部部长期间,每学期要处理近百起失物登记,但实际找回率不足30%。这个微信小程序项目正是为…

2026/9/14 5:03:38

STM32H7外部FLASH性能优化:全量RAM运行方案详解

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

2026/9/14 2:17:50

拯救者Y7000黑屏故障排查与维修实战指南

1. 项目概述:一台黑屏的拯救者Y7000,到底卡在哪一步? 联想拯救者Y7000系列笔记本,从2018年第一代搭载i5-8300H开始,到后来的i7-9750H、i7-10750H、i5-11400H,再到2023年款的R7-7840HS,它始终是学…

2026/9/14 0:03:22

KCF目标跟踪算法与OTB工程实现:毕业设计实战解析

简介:这是一份基于KCF核相关滤波算法、融合尺度池与抗遮挡处理的目标检测跟踪MATLAB完整源码,主要面向计算机相关专业准备毕业设计、课程设计或期末大作业的学生,也适合需要项目实战练习的初学者。源码在OTB数据集上完成验证,能够…

2026/9/14 0:03:22

语音情感识别实战:Keras实现LSTM、CNN、SVM与MLP多模型对比

简介:面向语音情感识别入门与进阶开发者,这份基于Keras的项目源码完整实现了LSTM、CNN、SVM、MLP四种模型,兼容Python3.8与Keras/TensorFlow2环境。压缩包内含49个文件,大小约70.31MB,主体包括Python脚本、yaml/json配…

2026/9/12 6:29:36

USB Type-C PCB布局分区设计:电源、高速信号与PD协议全攻略

做硬件这行,Type-C接口算是典型的“看着简单,做起来全坑”的东西。光引脚就24个,高低速信号、电源、控制线全部塞在一个小小的连接器里,如果PCB布局不做规划,打样回来基本就是“插上没反应”、“高速掉线”、“静电一打…

2026/9/12 14:32:17

系统编程学习原型如何补齐稳定性边界

系统编程学习原型如何补齐稳定性边界预算有限时&#xff0c;我先优化明显多余的复制&#xff0c;而不是猜测性地换容器。用借用传递只读数据通常就能减少分配&#xff1a; fn parse(line: &str) -> Result<Item, Error> { /* ... */ }用基准确认热点确实在分配&am…

2026/9/13 11:18:28

雨花区哪家财务公司代理记账比较好?

在雨花区&#xff0c;企业处理财税事务常常面临诸多挑战&#xff0c;选择一家靠谱的财务公司至关重要。湖南巨勤财务管理咨询有限公司就是本地正规实体财税服务机构&#xff0c;深耕本地工商财税行业多年&#xff0c;熟悉当地工商局、税务局最新政策与申报流程。主营公司注册、…

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

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

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