前端桌面应用AI 应用MCP 服务【免费下载链接】open-pencilAI-native design editor. Open-source Figma alternative.项目地址https://gitcode.com/gh_mirrors/op/open-pencil点击查看免费下载open-pencil/vue是 OpenPencil 官方的 Headless Vue 3 SDK它把open-pencil/core的编辑器能力接入 Vue通过依赖注入提供编辑器上下文用无样式结构组件搭建界面骨架再用 composables 读取状态、派发动作。本文以 SDK API 参考文档为主线系统梳理组件、composables、底层 API 三个层级的全部入口并结合 packages/vue/src/index.ts 的导出边界与 packages/vue/README.md 的实战示例帮助你快速确定该用哪个 API、怎么接进自己的 Vue 应用。SDK API 参考的三大组成部分Vue SDK 的 API 参考由三个并列的分册组成分别面向不同的集成深度分册英文入口面向场景组件Componentspackages/docs/ru/programmable/sdk/api/components/index.md创建可复用的编辑器界面元素如CanvasRoot、ToolbarRoot、FontPickerRoot、NumberFieldRoot等Composablespackages/docs/ru/programmable/sdk/api/composables/index.md接入编辑器状态并对其执行操作如选择、命令、属性面板、变量底层 APIAdvancedpackages/docs/ru/programmable/sdk/api/advanced/index.md辅助函数、组件上下文与面向特殊集成场景的专业 API三个分册的完整清单见 SDK 总览页其中明确了两层 API 模型composables 提供编辑器的状态与动作组件提供有意义的结构。如果需要的是纯状态与操作从 composables 入手如果要构建可复用的界面部件从组件入手。第一层Components —— 无内置样式的结构组件open-pencil/vue的组件全部无内置样式headless by designSDK 只负责结构、状态与交互逻辑外观由你的应用完全掌控。完整清单见 组件分册按功能可分成三组。编辑器核心结构组件组件作用CanvasRoot提供画布结构与上下文详见 CanvasRoot 文档CanvasSurface与CanvasRoot绑定的 canvas 元素负责实际绘制LayerTreeRoot/LayerTreeItem无样式的图层树及其单行条目ToolbarRoot/ToolbarItem工具栏的状态、动作与单个工具项PageListRoot无样式的页面列表其中CanvasRoot是典型的结构型根组件SDK 负责与编辑器的接线注入画布上下文、接入渲染而应用负责布局与样式。其配套的 composable 有useCanvas、useCanvasInput、useTextEdit分别处理画布生命周期、指针/输入事件与文本编辑。一个最小可运行的画布组合来自 packages/vue/README.md 的 Quick Startscript setup langts import { reactive } from vue import { createDefaultEditorState, createEditor } from open-pencil/core/editor import { SceneGraph } from open-pencil/scene-graph import { CanvasRoot, CanvasSurface, provideEditor } from open-pencil/vue const graph new SceneGraph() const page graph.getPages()[0] if (!page) throw new Error(Expected an initial page) const editor createEditor({ graph, state: reactive(createDefaultEditorState(page.id)), getViewportSize: () ({ width: 1200, height: 800 }), }) editor.createShape(RECTANGLE, 100, 100, 200, 150) editor.zoomToFit() provideEditor(editor) /script template div classh-screen CanvasRoot CanvasSurface classsize-full / /CanvasRoot /div /template注意getViewportSize中的固定尺寸仅为示意可缩放的应用外壳应返回画布容器实时的实际尺寸。Scene Graph 本身保持框架中立而 Vue 响应式状态通过reactive传入。属性面板组件族属性面板类组件均以Root 子部件的形式拆分见 组件分册的属性面板一节分区与网格PropertySection可折叠分区与空状态、PropertyGrid自适应字段网格与操作区、SegmentedControl无障碍的取值/操作分段组列表PropertyListRoot重复属性列表、PropertyListItem填充、描边或效果行分项控制PositionControlsRoot位置、尺寸与变换、LayoutControlsRoot自动布局与尺寸模式、ConstraintsControlRoot子对象约束与操作、AppearanceControlsRoot透明度、可见性与圆角、TypographyControlsRoot字体、对齐与格式化这些组件把属性的展示结构与属性的底层读写解耦例如PropertyListRoot是受控且与编辑器解耦的OpenPencil 面板通过useEditorPropertyList()把它连接到选择集与撤销历史。取值与输入组件族颜色ColorPickerRoot弹层配色器、ColorInputRoot无样式颜色输入框、ChannelSliderOkHCL 通道的无障碍滑块、FillRoot填充类型与变换动作、FillSwatch支持变量绑定的填充样例渐变GradientEditorRoot、GradientEditorBar、GradientEditorStop渐变编辑器的状态、交互条与单个色标字体与数值FontPickerRoot带搜索的字体选择、NumberField支持拖拽、表达式与键盘步进绑定BindableValue通过数据提供方把值与变量/外部 token 绑定其中NumberField的表达式能力值得一提来自 packages/vue/README.md支持指针拖拽、方向键步进、混合/绑定状态属性以及安全的算术表达式例如10、*2、50%、12*84。BindableValue通过泛型BindingProvider组合字段并支持编辑即解绑、只读、编辑变量等策略聚焦已绑定的NumberField不会破坏绑定配置的策略只在首次变更数值时生效。第二层Composables —— 编辑器状态与动作Composables 是接入编辑器状态的首选方式完整列表见 Composables 分册。它们按职责分为五组上下文与画布provideEditor/useEditor注入/读取编辑器实例详见下文useEditor 详解useCanvas画布接入useCanvasInput画布输入事件useTextEdit文本编辑状态选择与命令useSelectionState当前选择集状态useSelectionCapabilities选择集可用的操作能力useEditorCommands编辑器命令useMenuModel菜单模型应用菜单、画布菜单属性面板usePosition、useLayout、useConstraints、useComponentProperties、useAppearance、useSharedStyleBinding、useColorModel、useMask、useTypography、useExport、useFillControls、useStrokeControls、useEffectsControls文档工作区useDocumentWorkspace文档工作区状态变量、导航与本地化usePageList页面列表useI18n菜单、面板与对话框的本地化useEditor 详解useEditor()返回最近一次provideEditor()注入的编辑器实例是 composables 与无样式组件的统一入口见 useEditor 文档。它必须在已经调用过provideEditor(editor)的组件子树内使用import { useEditor } from open-pencil/vue const editor useEditor() const pageId computed(() editor.state.currentPageId)常见的三类用法// 读取选中节点 const editor useEditor() const selected editor.getSelectedNodes() // 调用命令 editor.zoomToFit() editor.undoAction()错误行为方面在provideEditor()未覆盖的子树中调用useEditor()会抛出可读性明确的错误便于第一时间发现缺少编辑器上下文的问题。其类型签名是function useEditor(): Editor而Editor、EditorState、EditorOptions等类型均从open-pencil/core/editor再导出。组合使用示例选择状态可以直接解构使用来自 packages/vue/README.mdimport { useSelectionState } from open-pencil/vue const { hasSelection, selectedCount, selectedNode } useSelectionState()菜单模型同样一行接入import { useMenuModel } from open-pencil/vue const { appMenu, canvasMenu } useMenuModel()页面列表则适合与无样式组件PageListRoot的插槽配合PageListRoot v-slot{ pages, currentPageId, switchPage } ul li v-forpage in pages :keypage.id button :data-activepage.id currentPageId clickswitchPage(page.id) {{ page.name }} /button /li /ul /PageListRoot第三层底层 APIAdvanced底层 API 虽然属于公开包的一部分但面向比组件和基础 composables 更窄的专业场景完整清单见 Advanced 分册。使用原则是只有前两个层级无法满足需求时才介入这一层。选择与 SceneGraphuseNodeProps混合值mixed values与多对象属性修改的底层基础useSceneComputed场景派生计算usePropScrub属性拖拽擦除scrub其中useNodeProps()是useAppearance、useLayout、useTypography的实现基础见 useNodeProps 文档。当你的自定义面板需要识别多选对象的混合值、批量修改属性、编辑数组元素、或在带撤销支持的预修改-保存流程中工作时直接使用它。取值、变量、语言与编辑器状态useColorVariableBinding颜色与变量的绑定useGradientStops渐变停止点useFontPicker字体选择底层useOkHCLOkHCL 色彩空间工具useVariables变量系统语言 APIlocale、localeSetting、setLocale、AVAILABLE_LOCALES、LOCALE_LABELSuseToolbarState工具栏状态useNodeFontStatus节点字体加载状态自定义编辑器界面useLayerDrag图层拖拽useInlineRename行内重命名useCanvasDrop画布拖放extractImageFilesFromClipboard从剪贴板提取图片文件useViewportKind视口类型toolCursor工具光标组件上下文useCanvasContext、useLayerTree、useToolbar、usePropertyList、useNumberField这些上下文帮助器主要用于扩展 SDK 原语例如为LayerTreeRoot编写自定义子部件而不是从零组合顶层 composables。如何选择 API 层级原文档的从哪开始建议可以归纳为一条决策路径在创建可复用的编辑器界面元素画布、图层树、工具栏、属性面板时选择Components在需要接入编辑器状态并执行动作时选择Composables只有前两类无法覆盖混合值编辑、绑定提供方、原语扩展等才转向底层 API。对应源码 packages/vue/src/index.ts 也把导出按同样的语义做了分组注释#vue/editor/context上下文、#vue/canvas/*画布、#vue/controls/*属性面板控制、#vue/primitives/*无样式原语、#vue/document/*文档工作区、#vue/i18n本地化。架构原则与职责边界架构文档 给出了 SDK 与宿主应用的分工SDK 负责编辑器集成、可复用的无样式逻辑、可复用的界面结构、画布渲染接入。应用负责样式、页面整体布局、路由、文件打开/保存等文件操作、以及应用特有的通知、菜单与行为。配套的公开 API 设计原则也值得在集成时遵守逻辑与状态用 composable如果代码主要是在计算/管理状态或调用编辑器动作就做成 composable只在结构重要时才做无样式组件根组件应管理结构、子元素、插槽或上下文典型如PageListRoot、PropertyListRoot、PropertySectionRoot、SegmentedControlRoot、ToolbarRoot不要通过单个插槽传递整个上下文插槽只暴露必要属性或直接使用 composable受控组件如PropertyListRoot通过语义化事件上报动作与选择集/撤销历史的连接放在适配器或管理型 composable 中。一条简单判断规则来自架构文档如果某段代码可以在不绑定应用样式的前提下复用到另一个基于 OpenPencil 的编辑器中它就大概率属于open-pencil/vue。相关文档导航SDK 总览与设计理念packages/docs/ru/programmable/sdk/index.md安装与快速开始Getting Started架构与职责划分packages/docs/ru/programmable/sdk/architecture.md自定义编辑器外壳指南custom-editor-shell、navigation-panels、property-panels英文版 README含安装命令与全部示例packages/vue/README.md安装命令开发版要求 Vue^3.5.41可选 CanvasKit peer 为canvaskit-wasm 0.41.1bun add open-pencil/vue open-pencil/core open-pencil/scene-graph canvaskit-wasm仓库内附带示例应用可本地运行体验cd packages/vue/example bun install bun run dev赞分享前端桌面应用AI 应用MCP 服务【免费下载链接】open-pencilAI-native design editor. Open-source Figma alternative.项目地址https://gitcode.com/gh_mirrors/op/open-pencil点击查看免费下载相关推荐Open-Pencil Vue SDK API 参考全解Components、Composables 与 Advanced 三层 API 体系Open Pencil Vue SDK API 参考全解Components、Composables 与 Advanced 三层 API 体系 导读 本文以前端桌面应用AI 应用MCP 服务最短补全词最短匹配算法详解LogicStack-LeetCode 第 748 题字符频率模拟题解最短补全词最短匹配算法详解LogicStack LeetCode 第 748 题字符频率模拟题解 本文以 LogicStack LeetCode 仓库中「宫水教程文档OpenPencil Vue SDK API 参考全览组件、Composable 与高级 API 集成指南OpenPencil Vue SDK API 参考全览组件、Composable 与高级 API 集成指南 本文以 open pencil/vue 的官方前端桌面应用AI 应用MCP 服务上一篇PingFangSC字体架构方案跨平台视觉一致性实现实践下一篇如何永久保存微信聊天记录免费开源工具完全指南创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考 OpenPencil Vue SDK API 参考：Components、Composables 与底层 API 全景指南
前端桌面应用AI 应用MCP 服务【免费下载链接】open-pencilAI-native design editor. Open-source Figma alternative.项目地址https://gitcode.com/gh_mirrors/op/open-pencil点击查看免费下载open-pencil/vue是 OpenPencil 官方的 Headless Vue 3 SDK它把open-pencil/core的编辑器能力接入 Vue通过依赖注入提供编辑器上下文用无样式结构组件搭建界面骨架再用 composables 读取状态、派发动作。本文以 SDK API 参考文档为主线系统梳理组件、composables、底层 API 三个层级的全部入口并结合 packages/vue/src/index.ts 的导出边界与 packages/vue/README.md 的实战示例帮助你快速确定该用哪个 API、怎么接进自己的 Vue 应用。SDK API 参考的三大组成部分Vue SDK 的 API 参考由三个并列的分册组成分别面向不同的集成深度分册英文入口面向场景组件Componentspackages/docs/ru/programmable/sdk/api/components/index.md创建可复用的编辑器界面元素如CanvasRoot、ToolbarRoot、FontPickerRoot、NumberFieldRoot等Composablespackages/docs/ru/programmable/sdk/api/composables/index.md接入编辑器状态并对其执行操作如选择、命令、属性面板、变量底层 APIAdvancedpackages/docs/ru/programmable/sdk/api/advanced/index.md辅助函数、组件上下文与面向特殊集成场景的专业 API三个分册的完整清单见 SDK 总览页其中明确了两层 API 模型composables 提供编辑器的状态与动作组件提供有意义的结构。如果需要的是纯状态与操作从 composables 入手如果要构建可复用的界面部件从组件入手。第一层Components —— 无内置样式的结构组件open-pencil/vue的组件全部无内置样式headless by designSDK 只负责结构、状态与交互逻辑外观由你的应用完全掌控。完整清单见 组件分册按功能可分成三组。编辑器核心结构组件组件作用CanvasRoot提供画布结构与上下文详见 CanvasRoot 文档CanvasSurface与CanvasRoot绑定的 canvas 元素负责实际绘制LayerTreeRoot/LayerTreeItem无样式的图层树及其单行条目ToolbarRoot/ToolbarItem工具栏的状态、动作与单个工具项PageListRoot无样式的页面列表其中CanvasRoot是典型的结构型根组件SDK 负责与编辑器的接线注入画布上下文、接入渲染而应用负责布局与样式。其配套的 composable 有useCanvas、useCanvasInput、useTextEdit分别处理画布生命周期、指针/输入事件与文本编辑。一个最小可运行的画布组合来自 packages/vue/README.md 的 Quick Startscript setup langts import { reactive } from vue import { createDefaultEditorState, createEditor } from open-pencil/core/editor import { SceneGraph } from open-pencil/scene-graph import { CanvasRoot, CanvasSurface, provideEditor } from open-pencil/vue const graph new SceneGraph() const page graph.getPages()[0] if (!page) throw new Error(Expected an initial page) const editor createEditor({ graph, state: reactive(createDefaultEditorState(page.id)), getViewportSize: () ({ width: 1200, height: 800 }), }) editor.createShape(RECTANGLE, 100, 100, 200, 150) editor.zoomToFit() provideEditor(editor) /script template div classh-screen CanvasRoot CanvasSurface classsize-full / /CanvasRoot /div /template注意getViewportSize中的固定尺寸仅为示意可缩放的应用外壳应返回画布容器实时的实际尺寸。Scene Graph 本身保持框架中立而 Vue 响应式状态通过reactive传入。属性面板组件族属性面板类组件均以Root 子部件的形式拆分见 组件分册的属性面板一节分区与网格PropertySection可折叠分区与空状态、PropertyGrid自适应字段网格与操作区、SegmentedControl无障碍的取值/操作分段组列表PropertyListRoot重复属性列表、PropertyListItem填充、描边或效果行分项控制PositionControlsRoot位置、尺寸与变换、LayoutControlsRoot自动布局与尺寸模式、ConstraintsControlRoot子对象约束与操作、AppearanceControlsRoot透明度、可见性与圆角、TypographyControlsRoot字体、对齐与格式化这些组件把属性的展示结构与属性的底层读写解耦例如PropertyListRoot是受控且与编辑器解耦的OpenPencil 面板通过useEditorPropertyList()把它连接到选择集与撤销历史。取值与输入组件族颜色ColorPickerRoot弹层配色器、ColorInputRoot无样式颜色输入框、ChannelSliderOkHCL 通道的无障碍滑块、FillRoot填充类型与变换动作、FillSwatch支持变量绑定的填充样例渐变GradientEditorRoot、GradientEditorBar、GradientEditorStop渐变编辑器的状态、交互条与单个色标字体与数值FontPickerRoot带搜索的字体选择、NumberField支持拖拽、表达式与键盘步进绑定BindableValue通过数据提供方把值与变量/外部 token 绑定其中NumberField的表达式能力值得一提来自 packages/vue/README.md支持指针拖拽、方向键步进、混合/绑定状态属性以及安全的算术表达式例如10、*2、50%、12*84。BindableValue通过泛型BindingProvider组合字段并支持编辑即解绑、只读、编辑变量等策略聚焦已绑定的NumberField不会破坏绑定配置的策略只在首次变更数值时生效。第二层Composables —— 编辑器状态与动作Composables 是接入编辑器状态的首选方式完整列表见 Composables 分册。它们按职责分为五组上下文与画布provideEditor/useEditor注入/读取编辑器实例详见下文useEditor 详解useCanvas画布接入useCanvasInput画布输入事件useTextEdit文本编辑状态选择与命令useSelectionState当前选择集状态useSelectionCapabilities选择集可用的操作能力useEditorCommands编辑器命令useMenuModel菜单模型应用菜单、画布菜单属性面板usePosition、useLayout、useConstraints、useComponentProperties、useAppearance、useSharedStyleBinding、useColorModel、useMask、useTypography、useExport、useFillControls、useStrokeControls、useEffectsControls文档工作区useDocumentWorkspace文档工作区状态变量、导航与本地化usePageList页面列表useI18n菜单、面板与对话框的本地化useEditor 详解useEditor()返回最近一次provideEditor()注入的编辑器实例是 composables 与无样式组件的统一入口见 useEditor 文档。它必须在已经调用过provideEditor(editor)的组件子树内使用import { useEditor } from open-pencil/vue const editor useEditor() const pageId computed(() editor.state.currentPageId)常见的三类用法// 读取选中节点 const editor useEditor() const selected editor.getSelectedNodes() // 调用命令 editor.zoomToFit() editor.undoAction()错误行为方面在provideEditor()未覆盖的子树中调用useEditor()会抛出可读性明确的错误便于第一时间发现缺少编辑器上下文的问题。其类型签名是function useEditor(): Editor而Editor、EditorState、EditorOptions等类型均从open-pencil/core/editor再导出。组合使用示例选择状态可以直接解构使用来自 packages/vue/README.mdimport { useSelectionState } from open-pencil/vue const { hasSelection, selectedCount, selectedNode } useSelectionState()菜单模型同样一行接入import { useMenuModel } from open-pencil/vue const { appMenu, canvasMenu } useMenuModel()页面列表则适合与无样式组件PageListRoot的插槽配合PageListRoot v-slot{ pages, currentPageId, switchPage } ul li v-forpage in pages :keypage.id button :data-activepage.id currentPageId clickswitchPage(page.id) {{ page.name }} /button /li /ul /PageListRoot第三层底层 APIAdvanced底层 API 虽然属于公开包的一部分但面向比组件和基础 composables 更窄的专业场景完整清单见 Advanced 分册。使用原则是只有前两个层级无法满足需求时才介入这一层。选择与 SceneGraphuseNodeProps混合值mixed values与多对象属性修改的底层基础useSceneComputed场景派生计算usePropScrub属性拖拽擦除scrub其中useNodeProps()是useAppearance、useLayout、useTypography的实现基础见 useNodeProps 文档。当你的自定义面板需要识别多选对象的混合值、批量修改属性、编辑数组元素、或在带撤销支持的预修改-保存流程中工作时直接使用它。取值、变量、语言与编辑器状态useColorVariableBinding颜色与变量的绑定useGradientStops渐变停止点useFontPicker字体选择底层useOkHCLOkHCL 色彩空间工具useVariables变量系统语言 APIlocale、localeSetting、setLocale、AVAILABLE_LOCALES、LOCALE_LABELSuseToolbarState工具栏状态useNodeFontStatus节点字体加载状态自定义编辑器界面useLayerDrag图层拖拽useInlineRename行内重命名useCanvasDrop画布拖放extractImageFilesFromClipboard从剪贴板提取图片文件useViewportKind视口类型toolCursor工具光标组件上下文useCanvasContext、useLayerTree、useToolbar、usePropertyList、useNumberField这些上下文帮助器主要用于扩展 SDK 原语例如为LayerTreeRoot编写自定义子部件而不是从零组合顶层 composables。如何选择 API 层级原文档的从哪开始建议可以归纳为一条决策路径在创建可复用的编辑器界面元素画布、图层树、工具栏、属性面板时选择Components在需要接入编辑器状态并执行动作时选择Composables只有前两类无法覆盖混合值编辑、绑定提供方、原语扩展等才转向底层 API。对应源码 packages/vue/src/index.ts 也把导出按同样的语义做了分组注释#vue/editor/context上下文、#vue/canvas/*画布、#vue/controls/*属性面板控制、#vue/primitives/*无样式原语、#vue/document/*文档工作区、#vue/i18n本地化。架构原则与职责边界架构文档 给出了 SDK 与宿主应用的分工SDK 负责编辑器集成、可复用的无样式逻辑、可复用的界面结构、画布渲染接入。应用负责样式、页面整体布局、路由、文件打开/保存等文件操作、以及应用特有的通知、菜单与行为。配套的公开 API 设计原则也值得在集成时遵守逻辑与状态用 composable如果代码主要是在计算/管理状态或调用编辑器动作就做成 composable只在结构重要时才做无样式组件根组件应管理结构、子元素、插槽或上下文典型如PageListRoot、PropertyListRoot、PropertySectionRoot、SegmentedControlRoot、ToolbarRoot不要通过单个插槽传递整个上下文插槽只暴露必要属性或直接使用 composable受控组件如PropertyListRoot通过语义化事件上报动作与选择集/撤销历史的连接放在适配器或管理型 composable 中。一条简单判断规则来自架构文档如果某段代码可以在不绑定应用样式的前提下复用到另一个基于 OpenPencil 的编辑器中它就大概率属于open-pencil/vue。相关文档导航SDK 总览与设计理念packages/docs/ru/programmable/sdk/index.md安装与快速开始Getting Started架构与职责划分packages/docs/ru/programmable/sdk/architecture.md自定义编辑器外壳指南custom-editor-shell、navigation-panels、property-panels英文版 README含安装命令与全部示例packages/vue/README.md安装命令开发版要求 Vue^3.5.41可选 CanvasKit peer 为canvaskit-wasm 0.41.1bun add open-pencil/vue open-pencil/core open-pencil/scene-graph canvaskit-wasm仓库内附带示例应用可本地运行体验cd packages/vue/example bun install bun run dev赞分享前端桌面应用AI 应用MCP 服务【免费下载链接】open-pencilAI-native design editor. Open-source Figma alternative.项目地址https://gitcode.com/gh_mirrors/op/open-pencil点击查看免费下载相关推荐Open-Pencil Vue SDK API 参考全解Components、Composables 与 Advanced 三层 API 体系Open Pencil Vue SDK API 参考全解Components、Composables 与 Advanced 三层 API 体系 导读 本文以前端桌面应用AI 应用MCP 服务最短补全词最短匹配算法详解LogicStack-LeetCode 第 748 题字符频率模拟题解最短补全词最短匹配算法详解LogicStack LeetCode 第 748 题字符频率模拟题解 本文以 LogicStack LeetCode 仓库中「宫水教程文档OpenPencil Vue SDK API 参考全览组件、Composable 与高级 API 集成指南OpenPencil Vue SDK API 参考全览组件、Composable 与高级 API 集成指南 本文以 open pencil/vue 的官方前端桌面应用AI 应用MCP 服务上一篇PingFangSC字体架构方案跨平台视觉一致性实现实践下一篇如何永久保存微信聊天记录免费开源工具完全指南创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考