Vue 集成（`@ydesign/vue-editor`）

规划中

@ydesign/vue-editor 是 Ydesign 生态的第二个官方 UI 实现，基于 Vue 3 + Composition API + Pinia 构建。目前仍在开发中，计划在 @ydesign/core 与 @ydesign/react-editor 稳定后首发。

本页提前披露设计思路与预期 API，帮助 Vue 生态的朋友提前评估接入方案。

如果你现在就急需在 Vue 项目里使用编辑器，请先阅读非 React 项目集成。

为什么单独做一个 Vue 版本？

我们完全可以只维护一份 React 版 UI、让 Vue 项目通过 iframe / 独立子包方式去调用。但那种方案有几个明显缺点：

❌ 需要引入 React 运行时（~40KB gzipped），对 Vue 用户不友好
❌ 开发体验割裂：Vue 项目里突然出现 React 组件，调试困难
❌ 样式系统不统一，主题定制难度高

为此我们决定做一套体验对齐的原生 Vue 版本。对使用方来说，@ydesign/react-editor 与 @ydesign/vue-editor API 几乎一对一，只是组件的使用语法不同。核心的 @ydesign/core 两者共享，意味着：

画布能力（Handler）完全一致
数据结构、JSON schema 完全一致，React 与 Vue 版可以互相加载对方导出的设计稿
未来只维护一套画布核心，两套 UI 并行演进

架构位置

                        @ydesign/core
                   （画布渲染核心，fabric.js v6）
                              ▲
                   ┌──────────┴──────────┐
                   │                     │
            @ydesign/react-editor         @ydesign/vue-editor
         （React 18 + Antd v6）  （Vue 3 + Ant Design Vue）

预期 API

@ydesign/vue-editor 的 API 将与 React 版保持命名一致，主要差异在于 Vue 的写法：

一键创建

import { createDesignEditorApp } from '@ydesign/vue-editor';

const { store, app } = createDesignEditorApp({
  container: document.getElementById('root'),
  key: 'YOUR_API_KEY',
  sections: ['templates', 'text', 'photos', 'shapes', 'background', 'layers'],
});

在 SFC 里使用组件

<template>
  <DesignEditorContainer style="width: 100vw; height: 100vh">
    <SidePanelWrap>
      <SidePanel :store="store" />
    </SidePanelWrap>
    <WorkspaceWrap>
      <Toolbar :store="store" />
      <Workspace :store="store" />
      <ZoomButtons :store="store" />
    </WorkspaceWrap>
  </DesignEditorContainer>
</template>

<script setup lang="ts">
import { createStore, DesignEditorContainer, SidePanelWrap, WorkspaceWrap, SidePanel, Toolbar, Workspace, ZoomButtons } from '@ydesign/vue-editor';

const store = createStore({ key: 'YOUR_API_KEY' });
</script>

响应式数据

React 版使用 mobx-state-tree + observer，Vue 版会使用 Pinia + Vue 的响应式系统。对使用者来说：

// React 版
import { observer } from 'mobx-react-lite';
const Comp = observer(({ store }) => <div>{store.width}</div>);

// Vue 版（开箱即用，无需包裹）
<template>
  <div>{{ store.width }}</div>
</template>

自定义面板

与 React 版一致，依然是 { name, Tab, Panel } 三件套；差异在 Tab / Panel 是 Vue 组件：

import { defineComponent } from 'vue';
import type { Section } from '@ydesign/vue-editor';

const MyPanelSection: Section = {
  name: 'my-panel',
  Tab: defineComponent({
    /* 你的侧边按钮组件 */
  }),
  Panel: defineComponent({
    /* 展开内容 */
  }),
};

能力对照表

能力	`@ydesign/react-editor`	`@ydesign/vue-editor`（规划）
画布核心	✅ 共用 `@ydesign/core`	✅ 共用 `@ydesign/core`
JSON 导入 / 导出兼容	✅	✅（与 React 版完全互通）
侧边面板	✅ 10+ 内置面板	✅ 对齐
工具栏	✅	✅ 对齐
多语言	`setTranslations`	`setTranslations`
主题	Ant Design	Ant Design Vue
状态管理	MobX + MST	Pinia
SSR	❌（客户端渲染）	❌（客户端渲染）
打包体积	~480KB gzipped	预期 ~400KB gzipped

路线图

M1 —— 画布核心完全解耦（不含 React 依赖），从 @ydesign/core 完全剥离 UI 层 ✅
M2 —— @ydesign/vue-editor 最小可用版本（Workspace / Toolbar / SidePanel 骨架）
M3 —— 侧边面板全部对齐（模板、文字、图片、形状、上传、背景、图层、尺寸）
M4 —— 工具栏全部对齐（文本、图片、图形、多选工具栏）
M5 —— AI 能力对齐（消除笔、证件照等）
M6 —— 1.0 正式版发布

过渡期建议

在 @ydesign/vue-editor 发布之前，Vue 项目有两种选择：

非 React 项目集成 —— 把编辑器打包成独立子项目，Vue 主站以全局 createEditor({ container }) 方式消费。生产可用、体验稍有妥协。
Ydesign Button —— 用 iframe 的方式嵌入一个"弹窗式编辑器"，完全无需关心任何 React。适合营销站、电商详情页等轻量场景。

保持关注

GitHub：liaojunhao/react-fabric-editor（欢迎 Star / 跟进进度）
我们会在仓库 Discussions 里同步 @ydesign/vue-editor 的 Beta 测试入口。

如果你所在的团队强烈依赖 Vue 版本、或者愿意参与 Beta 测试，非常欢迎通过 Issue / 邮件联系我们。社区真实的使用反馈，是我们排优先级最重要的依据。

为什么单独做一个 Vue 版本？​

架构位置​

预期 API​

一键创建​

在 SFC 里使用组件​

响应式数据​

自定义面板​

能力对照表​

路线图​

过渡期建议​

保持关注​