前端桌面应用AI 应用MCP 服务【免费下载链接】open-pencilAI-native design editor. Open-source Figma alternative.项目地址https://gitcode.com/gh_mirrors/op/open-pencil点击查看免费下载本文以open-pencil/vue的官方 API 参考索引为主线系统梳理 OpenPencilAI-native 设计编辑器、开源 Figma 替代品Vue SDK 的三层公开 API无样式组件Components、编辑器 ComposableComposables与面向深度集成的高级 APIAdvanced。读完本文你将掌握如何为自定义编辑器界面挑选正确的 API 层级、如何通过 Vue 依赖注入接入编辑器上下文以及每个板块下核心导出项在 packages/vue/src/index.ts 中的真实对应关系从而独立搭建属于自己的编辑器外壳、属性面板与导航面板。一、Vue SDK 与 API 参考的整体定位open-pencil/vue允许把 OpenPencil 从独立设计应用变成可嵌入的编辑器能力你可以将其集成进自有产品、内部工具或专用编辑器中而不必沿用应用默认界面。OpenPencil 官方应用本身只是用这套工具实现的众多界面之一SDK 的价值正在于允许你创建自己的界面见 packages/docs/programmable/sdk/index.md。SDK 提供的能力包括通过 Vue 依赖注入dependency injection提供编辑器上下文基于 CanvasKit 的工作区渲染面向选择、命令、菜单、属性面板与变量系统的 composable无样式结构组件如PageListRoot、PropertyListRoot、ToolbarRoot菜单、面板、对话框的本地化i18n以及语言选择组件。官方 SDK 索引页将其 API 参考/programmable/sdk/api/划分为三个板块Components无样式结构原语、Composables面向编辑器的状态与动作、Advanced低层辅助函数与专门 API。这正是 packages/docs/programmable/sdk/api/index.md 一页的核心骨架。设计原则SDK 索引页明确列出了四条设计原则也是理解 API 分层的关键无样式是刻意的选择SDK 只提供逻辑与结构不强制应用外观一个 composable 胜过多余的 wrapper只要不需要协调界面结构一个 composable 就足够公开 API 经过精心设计稳定功能统一从packages/vue/src/index.ts导出与 Vue 紧密集成SDK 把 Vue 与open-pencil/core的能力绑定在一起。两层 API 模型SDK 由两个主要层级组成Composable提供编辑器状态与相关操作Components定义有意义的界面结构。如果只需要编辑器的状态与操作从 composable 入手如果正在构建可复用的界面部件则从组件入手。这也是下方从哪开始一节推荐路径的依据。二、Components无样式结构原语组件板块为工作区、导航、属性面板与专门输入字段提供无样式组件。原始参考页packages/docs/programmable/sdk/api/components/index.md按用途将其分为四组。工作区CanvasRoot提供画布上下文的结构根组件CanvasSurfaceCanvasKit 渲染表面负责实际绘制场景。从源码看二者统一从#vue/canvas导出export { CanvasRoot, CanvasSurface, useCanvasContext } from #vue/canvas并配套导出CanvasContext类型供子组件读取画布上下文。导航PageListRoot页面列表与页面操作LayerTreeRoot图层面板图层树LayerTreeItem图层树中的单行ToolbarRoot工具栏容器ToolbarItem单个工具项。LayerTree模块还额外导出了buildLayerTreeModel、indexLayerNodes、layerSelectionForTarget、patchLayerNode、visibleLayerRows等辅助函数用于构建与修补图层树模型并定义了LayerNode、LayerRow、LayerTreeContext、LayerTreeVirtualizer等类型Toolbar模块则配套导出useToolbar与ToolbarContext见 packages/vue/src/index.ts。属性面板PropertyListRoot受控的属性列表PropertyListItem填充、描边或效果条目PositionControlsRoot位置与变换LayoutControlsRoot自动布局Auto LayoutAppearanceControlsRoot不透明度、可见性与圆角TypographyControlsRoot字体与文本格式化。PropertyList系列是属性面板的核心源码中一并导出PropertyListAdd、PropertyListRemove、PropertyListVisibility及usePropertyList并给出PropertyListRootProps、PropertyListRootSlotProps、PropertyListItemSlotProps等完整槽位/属性类型LayoutControlsRoot配套useLayoutControlsContext与LayoutControlsContext类型。这些都说明该板块是根组件 组合式逻辑成对设计的。颜色、渐变与字体ColorInputRootColorPickerRootGradientEditorRootGradientEditorBarGradientEditorStopFontPickerRootFontPickerRoot导出FontFamilyOption与FontPickerUI类型GradientEditor系列导出GradientEditorStopActions、GradientEditorStopProps等类型ColorInputRoot与ColorPickerRoot则与ChannelSliderRoot/Thumb/Track一同从#vue/primitives/ColorPicker与#vue/primitives/ChannelSlider导出。它们都属于无样式原语 槽位协议模式外观完全由使用方决定。三、Composable编辑器状态与动作Composable 板块为基于 OpenPencil 的界面提供通用状态与动作见 packages/docs/programmable/sdk/api/composables/index.md按功能分为四组。编辑器与工作区provideEditor把编辑器实例注入 Vue 子树useEditor从注入上下文读回编辑器useCanvas画布接线useCanvasInput画布输入事件useTextEdit文本编辑状态。provideEditor、useEditor与EDITOR_KEY一起从#vue/editor/context导出是让编辑器对 Vue 子树可见、并在 composable 与无样式原语中读回的主要入口见 packages/vue/src/index.ts。useCanvas对应UseCanvasOptions选项类型useCanvasInput配套导出CanvasLabelEdit、CanvasLabelKind等类型用于处理画布上的标签编辑。选择与命令useSelectionState当前选择状态useSelectionCapabilities选择对象的能力集useEditorCommands命令面板与编辑器命令useMenuModel菜单模型菜单栏/上下文菜单。useSelectionState由createSelectedNodeState支撑后者构造SelectedNodeState命令体系非常完整EDITOR_COMMAND_METADATA、editorCommandMetadata提供命令元数据注册表formatShortcut/shortcutPlatform负责快捷键格式化与平台差异ShortcutPlatform类型EditorCommand/EditorCommandId定义命令签名useMenuModel配套MenuActionNode、MenuEntry、MenuSeparatorNode等菜单节点类型。若需自建命令面板还可直接使用CommandPaletteRoot原语及其CommandPaletteGroup、CommandPaletteItem、CommandPaletteUI等类型。属性面板useAppearance外观不透明度、可见性、圆角usePosition位置与变换useLayout自动布局配套LayoutAxis、SizeLimitProp类型useTypography字体与文本useFillControls填充控制useStrokeControls描边控制配套isStrokeCapValue校验useEffectsControls效果阴影等。这组 composable 是自建属性面板的逻辑层与上一节的无样式属性组件一一对应逻辑与结构分离正是 SDK 两层 API 设计的直接体现。文档usePageList页面列表useVariablesEditor设计变量编辑useExport导出ExportFormatId、ExportFormatOption、ExportSetting类型useI18n国际化与语言切换。useI18n在源码中通过export * from #vue/i18n整体暴露与 SDK 的本地化承诺一致useExport则为自定义导出流程如导出为 PNG/PDF/其他格式提供统一入口。四、Advanced低层辅助与专门 API高级 API 板块支撑公开组件与 composable适用于自定义界面超出高层控件能力范围的场景见 packages/docs/programmable/sdk/api/advanced/index.md同样分为四组。工作区与工具toolCursor工具光标按当前工具切换光标样式useCanvasContext读取画布上下文useCanvasDrop画布拖放配套extractImageFilesFromClipboard可从剪贴板提取图片文件useToolbar工具栏逻辑useToolbarState工具栏工具选中状态配套getToolbarToolSelection、isToolbarToolActiveuseViewportKind视口类型如桌面/移动端。属性与颜色useNodeProps节点属性读写配套MIXED常量与MixedValue类型用于表示多选时混合值usePropScrub属性拖拽微调scrubusePropertyList受控属性列表逻辑useColorVariableBinding颜色与设计变量绑定useGradientStops渐变停止点useOkHCLOKHCL 颜色空间控制源码中为useOkHCL文件为 use-okhcl.md。颜色体系不止于此源码还从#vue/controls/color-model导出applySolidFillColor、applySolidStrokeColor、BUILT_IN_COLOR_FORMATS、useColorModel等并定义BuiltInColorFormat、OkHCLControls类型变量绑定侧还有useVariableBinding、useNumberVariableBinding以及BindingProvider/BindingTarget等绑定抽象。导航与编辑useLayerTree图层树逻辑useLayerDrag图层拖拽重排底层依赖atlaskit/pragmatic-drag-and-dropuseInlineRename图层/节点行内重命名useFontPicker字体选择逻辑基于 Fuse.js 模糊搜索useNodeFontStatus节点字体加载状态useSceneComputed场景派生状态响应式计算。变量与语言useVariables设计变量全局状态useVariablesDialogState变量对话框状态useVariablesTable变量表格基于tanstack/vue-table构建Locale APIs本地化 API。五、从哪开始推荐的入门路径官方 API 索引页给出了三条明确建议见 packages/docs/programmable/sdk/api/index.md 的 Suggested path 一节在构建可复用的编辑器 UI 原语时从Components入手在接线编辑器状态与动作时从Composables入手仅当需要低层辅助函数或原语上下文时才使用Advanced。结合 SDK 索引页packages/docs/programmable/sdk/index.md完整的学习路径是先阅读 getting-started.md 安装包并创建编辑器实例再看 architecture.md 理解 composable、组件与编辑器上下文的交互方式然后依据 custom-editor-shell.md、property-panels.md、navigation-panels.md 三篇指南动手搭建最后回到本 API 参考逐项查证。六、安装与运行前提open-pencil/vue的版本与依赖声明见 packages/vue/package.json值得注意peerDependenciesopen-pencil/coreworkspace 版本核心编辑器引擎vue^3.5.41要求 Vue 3.5canvaskit-wasm0.41.1可选未安装时画布相关能力受限关键 dependenciesatlaskit/pragmatic-drag-and-drop及其 hitbox 扩展图层拖拽tanstack/vue-table变量表格vueuse/core、nanostores与nanostores/vue响应式状态、nanostores/i18n国际化reka-ui底层 UI 原语fuse.js字体模糊搜索。构建命令为bunx tsdown --config tsdown.config.ts产物通过exports映射到dist/index.js与dist/index.d.ts属于sideEffects: false的纯 ESM 包便于 tree-shaking。注意canvaskit-wasm为可选 peer 依赖如果不需要画布渲染能力可以跳过安装。七、继续深入三大板块完整索引Components、Composables、Advanced公开 API 的权威出处packages/vue/src/index.ts稳定功能均由此导出SDK 架构与设计原则architecture.md实战指南custom-editor-shell.md、property-panels.md、navigation-panels.md。一句话总结需要结构就用组件需要逻辑就用 composable需要深度定制就下探高级 API——三者共同构成open-pencil/vue从官方应用走向任意自定义编辑器的完整工具箱。赞分享前端桌面应用AI 应用MCP 服务【免费下载链接】open-pencilAI-native design editor. Open-source Figma alternative.项目地址https://gitcode.com/gh_mirrors/op/open-pencil点击查看免费下载相关推荐OpenPencil Vue SDK API 参考open-pencil/vue 组件、Composables 与高级 API 完全指南OpenPencil Vue SDK API 参考 open pencil/vue 组件、Composables 与高级 API 完全指南 OpenPenc前端桌面应用AI 应用MCP 服务Peppermint API完全参考从基础调用到高级集成指南Peppermint API完全参考从基础调用到高级集成指南 Peppermint是一款开源的工单管理与客服平台解决方案提供完整的RESTful API接口OpenPencil Vue SDK 响应式视图判定指南useViewportKind 组合式 API 详解OpenPencil Vue SDK 响应式视图判定指南useViewportKind 组合式 API 详解 useViewportKind 是 OpenPe前端桌面应用AI 应用MCP 服务上一篇NCM转MP3教程ncmdump 本地拖拽批量转换指南三分钟跑通下一篇给 Word 文档加一个自己的选项卡Office Custom UI Editor 上手指南创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考