尧图网站建设 
前端桌面应用AI 应用MCP 服务【免费下载链接】open-pencilAI-native design editor. Open-source Figma alternative.项目地址https://gitcode.com/gh_mirrors/op/open-pencil点击查看免费下载组件Components是 OpenPencil 中最核心的复用机制把一组设计元素定义为主组件main component在画布任意位置插入其实例instance此后对主组件的任何修改都会自动传播到所有实例从而把「一处修改、全局生效」的工程化思维带入设计流程。本文以 OpenPencil 官方用户指南的组件章节为骨架结合packages/scene-graph的场景图实现与引擎测试系统讲解组件的创建、实例化、覆盖overrides、组件集与变体、实时同步以及组件库的发布与消费流程。读完本文你将掌握组件体系的完整操作路径并理解其背后「同步属性 覆盖保护 不可变修订」的底层设计原理。组件是什么可复用的设计元素模型在 OpenPencil 的场景图scene graph中与组件相关的节点类型有三种定义见 packages/scene-graph/src/types.tsCOMPONENT主组件可复用的设计对象编辑它之后所有实例自动更新COMPONENT_SET组件集用于组织多维变体的容器内部容纳多个COMPONENTINSTANCE实例主组件在画布上的一个引用副本与主组件保持实时链接。组件是可复用对象主组件的变更会通过syncInstances自动传播到它的全部实例见 packages/scene-graph/src/instances.ts。实例并非静态快照而是带有「血缘」的动态引用——这正是它与普通复制粘贴的根本区别。浏览与插入组件Assets 资源面板打开左侧面板的Assets资源标签页即可浏览本地组件与已启用的组件库资源支持网格视图 / 列表视图切换可按组件名称搜索点击选中某个资产后右侧可查看其详情插入资产有三种方式单击、按Enter或直接拖拽到画布上。本地资产按来源页面分组展示。对于已发布的组件库只要对应修订revision已下载即使远程提供方暂时离线这些资产仍可继续使用——这是离线设计工作流的关键保障。创建组件选中一个画框frame或编组group按快捷键即可将其转换为主组件macOS⌥⌘KWindows / LinuxCtrlAltK有两个值得注意的细节多选自动包裹如果一次性选中多个节点OpenPencil 会把它们整体包裹进一个新组件中新组件的位置位于这些节点的包围盒bounding box处视觉标识组件上方会显示一个紫色标签 菱形图标用于在画布上快速区分组件与其他节点。创建实例创建实例有两种途径右键菜单右键点击组件选择Create instance创建实例。新实例会出现在源组件右侧 40 px 处视觉上与组件完全相同Assets 面板插入从资源面板点击或拖入组件也会生成实例。实例创建仅存在于右键菜单中没有工具栏按钮。创建出的实例保留与主组件的链接关系——在源码层面createInstance会先复制主组件的同步属性尺寸、填充、描边、效果、布局参数等再递归克隆组件子树最终生成一个componentId指向主组件的INSTANCE节点见 packages/scene-graph/src/instances.ts。覆盖Overrides / Sustituciones实例的局部差异化覆盖是组件体系的灵魂实例可以针对特定属性做局部修改而不会切断与主组件的同步链接。在实例上修改的属性会被记录为覆盖override之后主组件的更新依然持续同步到该实例但被覆盖的属性除外——同步引擎会跳过它们。在实现上每个实例持有一份InstanceOverrideState由self实例自身属性覆盖和descendants后代节点的覆盖按节点 ID 索引两部分组成见 packages/scene-graph/src/instance-overrides.ts。同步时syncInstances对每个同步字段先检查hasInstanceOverride命中则跳过未命中才把主组件属性复制到实例见 packages/scene-graph/src/instances.ts。可覆盖的属性范围子节点级名称、文本、字号、字重、字体族视觉与布局属性填充、描边、效果、透明度、圆角、尺寸以及所有布局auto layout参数。需要特别强调的是同步属性白名单。OpenPencil 在主组件与实例之间同步的属性并非「所有字段」而是一个显式枚举的INSTANCE_SYNC_PROPS列表包括宽高与 min/max 约束、填充/描边/效果、透明度、圆角含独立四角、布局模式与方向、自动布局对齐与间距、网格布局参数、裁切内容、独立描边宽度以及变量绑定等见 packages/scene-graph/src/instances.ts。这意味着实例天然保留了非同步字段的差异空间。新子节点当你在主组件中添加新的子节点时所有已有实例都会自动获得一份克隆副本且实例内的子节点顺序永远与主组件保持一致同步流程中的sortInstanceChildren负责维持顺序见 packages/scene-graph/src/instances.ts。组件属性Component PropertiesOpenPencil 的组件属性系统允许你为组件定义可配置的属性接口然后在不分离实例的情况下直接为每个实例赋予不同值。官方文档确认支持的属性类型有四类属性类型作用文本TEXT把实例内某个文本节点的内容作为可编辑属性布尔可见性BOOLEAN / VISIBLE控制实例内某个节点的显示/隐藏实例交换INSTANCE_SWAP在实例内替换嵌套的子实例指向的组件变体VARIANT在组件集维度间切换实例的变体值使用方式是把属性关联link到组件的某个后代字段然后选中实例在右侧属性面板中编辑其分配值assigned value——全程不需要分离实例。当你选中一个实例时其所属组件或组件集定义的属性会出现在右侧面板中。在源码层面属性值的应用逻辑清晰可见文本属性通过applyTextProperty写回text字段并记录覆盖布尔属性通过applyBooleanProperty写回visible字段实例交换属性则调用swapInstanceComponent更换子实例的组件并记录sourceComponentId覆盖见 packages/scene-graph/src/components/properties.ts。属性与分配值会随.fig文件保存并在重开后保持。组件集与变体Component Sets and Variants当组件需要在多个维度如尺寸、状态、主题上提供变体时应使用组件集选中两个或更多组件按快捷键组合为组件集macOS⇧⌘KWindows / LinuxShiftCtrlK组件集是一个带虚线紫色边框的容器内部子组件四周有 40 px 的内边距。每个组件可以在多个变体维度上定义值例如SizeSmall、StateHover、ThemeDark。组件集有两条重要规则支持稀疏组合sparse combinations组件集不必覆盖所有维度的笛卡尔积组合。例如存在Primary/Small与Primary/Large、Secondary/Small但允许不存在Secondary/Large——从tests/engine/editor/components/variants.test.ts的用例可以看到切换到一个不存在的组合时引擎会返回unavailable诊断并保持当前实例不变见 tests/engine/editor/components/variants.test.ts拒绝重复组合无法在同一组件集中创建变体值完全相同的两个组件。默认变体为左上角的组件。当一次更新后某实例原来的精确组合不再存在时左上角变体将作为回退fallback方案。你可以在组件属性面板中添加、重命名、排序、删除变体维度与取值。值得一提的底层实现当组件名遵循「名称/值/值」的斜杠命名法时deriveSlashVariantProperties会自动从中推导出变体定义、各维度的取值选项与默认值见 packages/scene-graph/src/variant-properties.ts。此外变体的切换与重命名都纳入了撤销/重做体系且对实例的切换会校验组合可用性getVariantOptionAvailability。实时同步Live Sync编辑主组件时所有实例会自动更新。官方文档明确的同步属性范围包括宽与高Width / Height填充、描边与效果Fills / Strokes / Effects透明度与圆角Opacity / Corner Radii布局属性Auto Layout 相关设置裁切内容设置Clips Content同步在节点更新、移动、缩放等操作后自动触发无需手动执行。源码中的同步入口是syncInstances(componentId)它遍历instanceIndex中找到的全部实例先同步实例自身的白名单属性再递归同步子节点对已存在覆盖的字段跳过最后按组件子节点顺序重排实例子节点。整个同步过程还内置了循环防护isCyclicSync防止「实例位于组件子树内部」这类自引用场景引发无限递归见 packages/scene-graph/src/instances.ts。针对组件库场景主组件的变更会先在**审查视图review**中展示确认后才应用到实例实例的覆盖在此过程中保持完好详见下文「审查与接受更新」。实例的分离与跳转分离实例Detach instance选中实例按⌥⌘BWindows / Linux 为CtrlAltB实例即转换为一个独立的画框frame与主组件解除链接所有覆盖被「烘焙」进画框本身。源码实现会同时清理实例索引与全部覆盖记录见 packages/scene-graph/src/instances.ts转到主组件Go to main component右键实例选择该项编辑器会自动导航到并选中其主组件即使主组件位于其他页面也会自动切换页面。命中测试与视觉标识组件与实例在命中测试上是不透明容器单击其内部子元素时选中的是组件/实例本身而非子元素。双击才能进入组件内部选中子节点对应 packages/scene-graph/src/hit-test.ts 中把COMPONENT_SET等类型归入容器类节点。元素视觉表现组件标签紫色 菱形图标始终可见实例标签紫色 菱形图标始终可见组件集边框虚线紫色轮廓组件库Component Libraries发布、启用与消费组件库把可复用组件以不可变修订immutable revision的形式发布共享。每个已发布资产都拥有稳定的 library库、asset资产与 revision修订三层标识因此不同实例可以停留在不同修订版本上直到你显式更新它们——这是库机制可靠性的基石。发布组件库完整发布流程7 步创建好要共享的组件与组件集打开Assets选择Manage libraries管理库选择Publish library发布库输入稳定的库 ID 与显示名称——库 ID 在首次发布后被锁定不可再更改可选检索变更列表并填写修订说明勾选本次要包含的资产新增added、修改modified、重命名renamed或移除removed的均可选择确认目标位置点击Publish library完成发布。后续发布的行为未勾选的变更会保持 pending 状态未变化的资产沿用其此前已发布的定义已移除的定义在仍有文档引用其历史修订时依然可用。启用与插入库资产在Assets → Manage libraries中启用某个已发布库其组件便会出现在 Assets 面板中与本地组件并列展示。插入方式与本地资产一致单击、键盘操作或拖拽到画布。关键约束发布后的定义在消费文档中是只读的。要修改定义必须回到源文档编辑并发布新修订。已经链接到旧定义的实例仍可通过组件属性与覆盖继续编辑。审查与接受更新在Manage libraries → Updates中可发现更新的修订版本——发现discovery过程不会修改当前文档。你可以并排对比当前实例与更新后的实例在受影响的实例之间导航然后选择更新范围仅更新选中的实例更新某一资产的全部实例更新当前页所有实例更新所有页面所有实例。更新时OpenPencil 会保留兼容的文本、可见性与实例交换分配值如果精确变体组合已不存在审查流程会在你接受更新前明确指出左上角回退变体。应用更新会生成一条撤销记录可随时回退。本地、存储与离线使用组件库的存储有两种方式本地浏览器目录或已配置的存储提供方。远程发布使用不可变修订对象加条件式 latest 指针conditional latest pointer可防止两个发布者互相静默覆盖。已下载的修订会缓存在本地即使处于离线状态文档仍可继续渲染与插入已下载的定义。更重要的是完整性校验失败会被明确上报而不会被缓存数据掩盖——这保证了消费端数据的可信度。消费文档的保存启用库的绑定关系bindings与物化定义materialized definitions会随.fig文档一并保存。重新打开消费文件时即使其远程库不可用链接的实例与修订标识依然完整保留——这也是「远端不可用时文档依然可打开、可继续编辑」的保证。键盘快捷键速查操作macOSWindows / Linux创建组件⌥⌘KCtrlAltK创建组件集⇧⌘KShiftCtrlK分离实例⌥⌘BCtrlAltB实战建议实例内编辑文本即创建覆盖在实例内部直接改文本会记为覆盖之后主组件文本变化时不会被覆盖冲掉——这是有意的保护行为不是异常用组件集组织多维变体尺寸、状态、主题这类多维变化组件集是最佳载体稀疏组合机制让你无需为不存在的组合补建组件发布物从源文档维护发布定义在消费文档中刻意只读改动一律回到源文档重新发布避免消费端「改了个寂寞」接受更新前先审查当新修订删除了某个精确变体组合时务必先看审查视图确认左上角回退方案再决定更新范围。延伸阅读组件相关的全部右键操作可参考 上下文菜单指南组件与实例同步的完整实现见 packages/scene-graph/src/instances.ts 与 覆盖状态管理组件属性与变体行为有配套的引擎测试variants.test.ts、library-capabilities.test.ts若需要了解与组件配套的自动布局、页面图层管理能力可继续阅读 auto-layout.md 与 layers-and-pages.md。赞分享前端桌面应用AI 应用MCP 服务【免费下载链接】open-pencilAI-native design editor. Open-source Figma alternative.项目地址https://gitcode.com/gh_mirrors/op/open-pencil点击查看免费下载相关推荐OpenPencil 组件体系实战指南组件、组件集、变体与组件库全解析OpenPencil 组件体系实战指南组件、组件集、变体与组件库全解析 OpenPencil 是一款开源的 AI 原生设计编辑器Figma 替代方案。本文前端桌面应用AI 应用MCP 服务EnTT实体组件系统实战注册表、实体与组件操作EnTT实体组件系统实战注册表、实体与组件操作 本文深入探讨EnTT实体组件系统的核心功能涵盖注册表 Registry 的基本操作、实体生命周期管理、组件操Elementor Atomic Builder Components 组件体系全解析可复用组件文档、实例覆盖与嵌套约束Elementor Atomic Builder Components 组件体系全解析可复用组件文档、实例覆盖与嵌套约束 本文是 Elementorv4 ACMS前端后端低代码上一篇深入解析 blockly/fixed-edges为 Blockly 工作区灵活配置固定边缘的 MetricsManager 插件下一篇如何 10 分钟搭起自托管 AI 对话界面Open WebUI 本地部署上手创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考 OpenPencil 组件系统深度指南：组件、实例、变体覆盖与组件库实战
前端桌面应用AI 应用MCP 服务【免费下载链接】open-pencilAI-native design editor. Open-source Figma alternative.项目地址https://gitcode.com/gh_mirrors/op/open-pencil点击查看免费下载组件Components是 OpenPencil 中最核心的复用机制把一组设计元素定义为主组件main component在画布任意位置插入其实例instance此后对主组件的任何修改都会自动传播到所有实例从而把「一处修改、全局生效」的工程化思维带入设计流程。本文以 OpenPencil 官方用户指南的组件章节为骨架结合packages/scene-graph的场景图实现与引擎测试系统讲解组件的创建、实例化、覆盖overrides、组件集与变体、实时同步以及组件库的发布与消费流程。读完本文你将掌握组件体系的完整操作路径并理解其背后「同步属性 覆盖保护 不可变修订」的底层设计原理。组件是什么可复用的设计元素模型在 OpenPencil 的场景图scene graph中与组件相关的节点类型有三种定义见 packages/scene-graph/src/types.tsCOMPONENT主组件可复用的设计对象编辑它之后所有实例自动更新COMPONENT_SET组件集用于组织多维变体的容器内部容纳多个COMPONENTINSTANCE实例主组件在画布上的一个引用副本与主组件保持实时链接。组件是可复用对象主组件的变更会通过syncInstances自动传播到它的全部实例见 packages/scene-graph/src/instances.ts。实例并非静态快照而是带有「血缘」的动态引用——这正是它与普通复制粘贴的根本区别。浏览与插入组件Assets 资源面板打开左侧面板的Assets资源标签页即可浏览本地组件与已启用的组件库资源支持网格视图 / 列表视图切换可按组件名称搜索点击选中某个资产后右侧可查看其详情插入资产有三种方式单击、按Enter或直接拖拽到画布上。本地资产按来源页面分组展示。对于已发布的组件库只要对应修订revision已下载即使远程提供方暂时离线这些资产仍可继续使用——这是离线设计工作流的关键保障。创建组件选中一个画框frame或编组group按快捷键即可将其转换为主组件macOS⌥⌘KWindows / LinuxCtrlAltK有两个值得注意的细节多选自动包裹如果一次性选中多个节点OpenPencil 会把它们整体包裹进一个新组件中新组件的位置位于这些节点的包围盒bounding box处视觉标识组件上方会显示一个紫色标签 菱形图标用于在画布上快速区分组件与其他节点。创建实例创建实例有两种途径右键菜单右键点击组件选择Create instance创建实例。新实例会出现在源组件右侧 40 px 处视觉上与组件完全相同Assets 面板插入从资源面板点击或拖入组件也会生成实例。实例创建仅存在于右键菜单中没有工具栏按钮。创建出的实例保留与主组件的链接关系——在源码层面createInstance会先复制主组件的同步属性尺寸、填充、描边、效果、布局参数等再递归克隆组件子树最终生成一个componentId指向主组件的INSTANCE节点见 packages/scene-graph/src/instances.ts。覆盖Overrides / Sustituciones实例的局部差异化覆盖是组件体系的灵魂实例可以针对特定属性做局部修改而不会切断与主组件的同步链接。在实例上修改的属性会被记录为覆盖override之后主组件的更新依然持续同步到该实例但被覆盖的属性除外——同步引擎会跳过它们。在实现上每个实例持有一份InstanceOverrideState由self实例自身属性覆盖和descendants后代节点的覆盖按节点 ID 索引两部分组成见 packages/scene-graph/src/instance-overrides.ts。同步时syncInstances对每个同步字段先检查hasInstanceOverride命中则跳过未命中才把主组件属性复制到实例见 packages/scene-graph/src/instances.ts。可覆盖的属性范围子节点级名称、文本、字号、字重、字体族视觉与布局属性填充、描边、效果、透明度、圆角、尺寸以及所有布局auto layout参数。需要特别强调的是同步属性白名单。OpenPencil 在主组件与实例之间同步的属性并非「所有字段」而是一个显式枚举的INSTANCE_SYNC_PROPS列表包括宽高与 min/max 约束、填充/描边/效果、透明度、圆角含独立四角、布局模式与方向、自动布局对齐与间距、网格布局参数、裁切内容、独立描边宽度以及变量绑定等见 packages/scene-graph/src/instances.ts。这意味着实例天然保留了非同步字段的差异空间。新子节点当你在主组件中添加新的子节点时所有已有实例都会自动获得一份克隆副本且实例内的子节点顺序永远与主组件保持一致同步流程中的sortInstanceChildren负责维持顺序见 packages/scene-graph/src/instances.ts。组件属性Component PropertiesOpenPencil 的组件属性系统允许你为组件定义可配置的属性接口然后在不分离实例的情况下直接为每个实例赋予不同值。官方文档确认支持的属性类型有四类属性类型作用文本TEXT把实例内某个文本节点的内容作为可编辑属性布尔可见性BOOLEAN / VISIBLE控制实例内某个节点的显示/隐藏实例交换INSTANCE_SWAP在实例内替换嵌套的子实例指向的组件变体VARIANT在组件集维度间切换实例的变体值使用方式是把属性关联link到组件的某个后代字段然后选中实例在右侧属性面板中编辑其分配值assigned value——全程不需要分离实例。当你选中一个实例时其所属组件或组件集定义的属性会出现在右侧面板中。在源码层面属性值的应用逻辑清晰可见文本属性通过applyTextProperty写回text字段并记录覆盖布尔属性通过applyBooleanProperty写回visible字段实例交换属性则调用swapInstanceComponent更换子实例的组件并记录sourceComponentId覆盖见 packages/scene-graph/src/components/properties.ts。属性与分配值会随.fig文件保存并在重开后保持。组件集与变体Component Sets and Variants当组件需要在多个维度如尺寸、状态、主题上提供变体时应使用组件集选中两个或更多组件按快捷键组合为组件集macOS⇧⌘KWindows / LinuxShiftCtrlK组件集是一个带虚线紫色边框的容器内部子组件四周有 40 px 的内边距。每个组件可以在多个变体维度上定义值例如SizeSmall、StateHover、ThemeDark。组件集有两条重要规则支持稀疏组合sparse combinations组件集不必覆盖所有维度的笛卡尔积组合。例如存在Primary/Small与Primary/Large、Secondary/Small但允许不存在Secondary/Large——从tests/engine/editor/components/variants.test.ts的用例可以看到切换到一个不存在的组合时引擎会返回unavailable诊断并保持当前实例不变见 tests/engine/editor/components/variants.test.ts拒绝重复组合无法在同一组件集中创建变体值完全相同的两个组件。默认变体为左上角的组件。当一次更新后某实例原来的精确组合不再存在时左上角变体将作为回退fallback方案。你可以在组件属性面板中添加、重命名、排序、删除变体维度与取值。值得一提的底层实现当组件名遵循「名称/值/值」的斜杠命名法时deriveSlashVariantProperties会自动从中推导出变体定义、各维度的取值选项与默认值见 packages/scene-graph/src/variant-properties.ts。此外变体的切换与重命名都纳入了撤销/重做体系且对实例的切换会校验组合可用性getVariantOptionAvailability。实时同步Live Sync编辑主组件时所有实例会自动更新。官方文档明确的同步属性范围包括宽与高Width / Height填充、描边与效果Fills / Strokes / Effects透明度与圆角Opacity / Corner Radii布局属性Auto Layout 相关设置裁切内容设置Clips Content同步在节点更新、移动、缩放等操作后自动触发无需手动执行。源码中的同步入口是syncInstances(componentId)它遍历instanceIndex中找到的全部实例先同步实例自身的白名单属性再递归同步子节点对已存在覆盖的字段跳过最后按组件子节点顺序重排实例子节点。整个同步过程还内置了循环防护isCyclicSync防止「实例位于组件子树内部」这类自引用场景引发无限递归见 packages/scene-graph/src/instances.ts。针对组件库场景主组件的变更会先在**审查视图review**中展示确认后才应用到实例实例的覆盖在此过程中保持完好详见下文「审查与接受更新」。实例的分离与跳转分离实例Detach instance选中实例按⌥⌘BWindows / Linux 为CtrlAltB实例即转换为一个独立的画框frame与主组件解除链接所有覆盖被「烘焙」进画框本身。源码实现会同时清理实例索引与全部覆盖记录见 packages/scene-graph/src/instances.ts转到主组件Go to main component右键实例选择该项编辑器会自动导航到并选中其主组件即使主组件位于其他页面也会自动切换页面。命中测试与视觉标识组件与实例在命中测试上是不透明容器单击其内部子元素时选中的是组件/实例本身而非子元素。双击才能进入组件内部选中子节点对应 packages/scene-graph/src/hit-test.ts 中把COMPONENT_SET等类型归入容器类节点。元素视觉表现组件标签紫色 菱形图标始终可见实例标签紫色 菱形图标始终可见组件集边框虚线紫色轮廓组件库Component Libraries发布、启用与消费组件库把可复用组件以不可变修订immutable revision的形式发布共享。每个已发布资产都拥有稳定的 library库、asset资产与 revision修订三层标识因此不同实例可以停留在不同修订版本上直到你显式更新它们——这是库机制可靠性的基石。发布组件库完整发布流程7 步创建好要共享的组件与组件集打开Assets选择Manage libraries管理库选择Publish library发布库输入稳定的库 ID 与显示名称——库 ID 在首次发布后被锁定不可再更改可选检索变更列表并填写修订说明勾选本次要包含的资产新增added、修改modified、重命名renamed或移除removed的均可选择确认目标位置点击Publish library完成发布。后续发布的行为未勾选的变更会保持 pending 状态未变化的资产沿用其此前已发布的定义已移除的定义在仍有文档引用其历史修订时依然可用。启用与插入库资产在Assets → Manage libraries中启用某个已发布库其组件便会出现在 Assets 面板中与本地组件并列展示。插入方式与本地资产一致单击、键盘操作或拖拽到画布。关键约束发布后的定义在消费文档中是只读的。要修改定义必须回到源文档编辑并发布新修订。已经链接到旧定义的实例仍可通过组件属性与覆盖继续编辑。审查与接受更新在Manage libraries → Updates中可发现更新的修订版本——发现discovery过程不会修改当前文档。你可以并排对比当前实例与更新后的实例在受影响的实例之间导航然后选择更新范围仅更新选中的实例更新某一资产的全部实例更新当前页所有实例更新所有页面所有实例。更新时OpenPencil 会保留兼容的文本、可见性与实例交换分配值如果精确变体组合已不存在审查流程会在你接受更新前明确指出左上角回退变体。应用更新会生成一条撤销记录可随时回退。本地、存储与离线使用组件库的存储有两种方式本地浏览器目录或已配置的存储提供方。远程发布使用不可变修订对象加条件式 latest 指针conditional latest pointer可防止两个发布者互相静默覆盖。已下载的修订会缓存在本地即使处于离线状态文档仍可继续渲染与插入已下载的定义。更重要的是完整性校验失败会被明确上报而不会被缓存数据掩盖——这保证了消费端数据的可信度。消费文档的保存启用库的绑定关系bindings与物化定义materialized definitions会随.fig文档一并保存。重新打开消费文件时即使其远程库不可用链接的实例与修订标识依然完整保留——这也是「远端不可用时文档依然可打开、可继续编辑」的保证。键盘快捷键速查操作macOSWindows / Linux创建组件⌥⌘KCtrlAltK创建组件集⇧⌘KShiftCtrlK分离实例⌥⌘BCtrlAltB实战建议实例内编辑文本即创建覆盖在实例内部直接改文本会记为覆盖之后主组件文本变化时不会被覆盖冲掉——这是有意的保护行为不是异常用组件集组织多维变体尺寸、状态、主题这类多维变化组件集是最佳载体稀疏组合机制让你无需为不存在的组合补建组件发布物从源文档维护发布定义在消费文档中刻意只读改动一律回到源文档重新发布避免消费端「改了个寂寞」接受更新前先审查当新修订删除了某个精确变体组合时务必先看审查视图确认左上角回退方案再决定更新范围。延伸阅读组件相关的全部右键操作可参考 上下文菜单指南组件与实例同步的完整实现见 packages/scene-graph/src/instances.ts 与 覆盖状态管理组件属性与变体行为有配套的引擎测试variants.test.ts、library-capabilities.test.ts若需要了解与组件配套的自动布局、页面图层管理能力可继续阅读 auto-layout.md 与 layers-and-pages.md。赞分享前端桌面应用AI 应用MCP 服务【免费下载链接】open-pencilAI-native design editor. Open-source Figma alternative.项目地址https://gitcode.com/gh_mirrors/op/open-pencil点击查看免费下载相关推荐OpenPencil 组件体系实战指南组件、组件集、变体与组件库全解析OpenPencil 组件体系实战指南组件、组件集、变体与组件库全解析 OpenPencil 是一款开源的 AI 原生设计编辑器Figma 替代方案。本文前端桌面应用AI 应用MCP 服务EnTT实体组件系统实战注册表、实体与组件操作EnTT实体组件系统实战注册表、实体与组件操作 本文深入探讨EnTT实体组件系统的核心功能涵盖注册表 Registry 的基本操作、实体生命周期管理、组件操Elementor Atomic Builder Components 组件体系全解析可复用组件文档、实例覆盖与嵌套约束Elementor Atomic Builder Components 组件体系全解析可复用组件文档、实例覆盖与嵌套约束 本文是 Elementorv4 ACMS前端后端低代码上一篇深入解析 blockly/fixed-edges为 Blockly 工作区灵活配置固定边缘的 MetricsManager 插件下一篇如何 10 分钟搭起自托管 AI 对话界面Open WebUI 本地部署上手创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考