跳到主要内容

内置面板详解

本页逐个介绍 @ydesign/react-editor 自带的 10 个 Section。内容基于 packages/react-editor/src/side-panel/ 的真实实现，每项都会给出：

  • 对应源码
  • 常见定制切入点
  • 接后端的推荐做法

templates · 模板中心​

源码：side-panel/templates-panel.tsx 导出：TemplatesSection / TemplatesPanel

默认的模板面板会从 setBaseURL + setAPI('templateList', …) 配置的后端接口拉取模板列表，用户点选后调用 store.loadJSON(data) 把模板灌入画布。

接入自己的模板库：

import { setAPI } from '@ydesign/react-editor';

setAPI('templateList', () => ({
  url: 'https://your-api.com/templates',
}));

setAPI('templateDetail', (id: string) => ({
  url: `https://your-api.com/templates/${id}`,
}));

接口返回格式参考 packages/react-editor/src/utils/api.ts 中 URLS.templateList / URLS.templateDetail 的默认实现。

text · 文字面板​

源码：side-panel/text-panel.tsx 导出：TextSection / TextPanel

功能：

  • 添加默认文字（标题 / 副标题 / 正文）
  • 字体库（搭配 addGlobalFont 注册的全局字体，以及 Google Fonts）
  • 文字预设样式

定制建议：

  • 想接企业/团队字体库 → 用 addGlobalFont 注册、或替换 setAPI('teamFontList', …)
  • 不想要 Google Fonts → setGoogleFontsVariants('400') 减少请求，或通过 addGlobalFont 把常用字体预注册好

详见 编辑器配置 · 字体管理。

photos · 图片素材库​

源码：side-panel/photos-panel.tsx 导出：PhotosSection / PhotosPanel

默认展示你后端 API 返回的图片列表，支持搜索、分页（使用 <ImagesGrid />）。

想对接 Unsplash / Pexels / 自家图床，最干净的做法是整段替换这个 Section：

const MyPhotosSection: Section = {
  name: 'photos',
  Tab: /* ... */,
  Panel: observer(({ store }) => (
    <MyPhotosGrid store={store} />
  )),
};

const sections = DEFAULT_SECTIONS.map(s =>
  s.name === 'photos' ? MyPhotosSection : s
);

完整替换示例：自定义 Section · 场景 2。

shapes · 形状面板​

源码：side-panel/shapes-panel.tsx 导出：ShapesSection / ShapesPanel

形状清单来自 @ydesign/react-editor 的 config.ts 里 PathShapeLibs（矩形 / 基础形状 / 常规 / 常用 / 异形多边形等几个分类），以及 PathLineLibs（直线、折线、曲线、带箭头）。

扩展内置形状：直接 push PathShapeLibs 即可，但推荐改为写一个自定义 Section 来放你的品牌形状，不要改框架源码。

upload · 上传面板​

源码：side-panel/upload-panel.tsx 导出：UploadSection / UploadPanel

默认实现把本地文件转 base64 塞进 JSON —— 能跑，但产物会膨胀。生产环境请接入你自己的 OSS / S3 / COS。

详细做法见 Upload 面板。

background · 背景面板​

源码：side-panel/background-panel.tsx 导出：BackgroundSection / BackgroundPanel

提供：

  • 纯色选色 + 预设色板
  • 渐变色
  • 透明

修改预设色板：

import { setBackgroundColorsPreset } from '@ydesign/react-editor/side-panel/background-panel';

setBackgroundColorsPreset([
  '#ffffff', '#000000', '#f5f5f5',
  '#ff4d4f', '#1677ff', '#52c41a',
]);

设置背景色（供自定义面板调用）：

store.setBackgroundColor('#ff6a00');
store.setBackgroundColor({
  type: 'linear',
  coords: { x1: 0, y1: 0, x2: 1, y2: 1 },
  colorStops: [
    { offset: 0, color: '#ff6a00' },
    { offset: 1, color: '#2253eb' },
  ],
});
store.setBackgroundColor('transparent'); // 会自动显示棋盘格

layers · 图层面板​

源码：side-panel/layers-panel.tsx 导出：LayersSection / LayersPanel

用列表的形式展示画布所有对象（按层级自上而下），支持：

  • 拖拽排序
  • 选中元素定位到画布
  • 锁定 / 隐藏
  • 重命名（element.set({ name })）

底层调用 store.editor.layerHandler 的方法，可以自己调这些方法做一个不同样式的图层列表。

size · 尺寸面板​

源码：side-panel/size-panel.tsx 导出：SizeSection / SizePanel

提供常用画布尺寸预设（社交媒体封面 / 名片 / 海报等）和自定义宽高输入。

想要自己的预设列表（比如企业专用物料尺寸）：

👉 自定义尺寸面板

idphoto · 证件照面板 🔒​

源码：side-panel/idphoto-panel.tsx 导出：IdphotoSection / IdphotoPanel

面向证件照业务场景的特殊面板，特点：

  • visibleInList: false（不出现在常驻 Tab 列表）
  • 打开后进入"证件照排版工作流"（尺寸预设、底色切换、衣服生成等）

触发：

store.openSidePanel('idphoto');

如果你的产品不涉及证件照业务，直接不注册它即可（从 sections 数组中去掉）。

inpaint · AI 消除笔 🔒​

源码：side-panel/inpaint-panel.tsx 导出：InpaintSection / InpaintPanel

和 idphoto 一样是 visibleInList: false 的按需面板。触发方式通常是：用户选中一张图片 → 点工具栏的"消除笔"按钮 → 进入消除笔模式。

内部调用 @ydesign/core 的 InpaintHandler：

const h = store.editor?.inpaintHandler;

h?.activate('brush');   // 涂抹模式
h?.activate('rect');    // 框选模式
h?.activate('lasso');   // 圈选模式

h?.setBrushSize(20);

// 导出 mask + 底图给后端 AI 处理
const { maskBlob, imageBlob } = await h!.exportMaskAndImage();

配合 setAPI('inpaint', …) 对接你自己的 AI 推理接口。

选用建议​

你的场景推荐开启的 Section
轻量海报 / 封面工具templates, text, photos, shapes, upload, background
印刷 / 名片templates, text, shapes, upload, background, layers, size
带 AI 能力的专业设计全部（含 inpaint）
证件照专项text, upload, background, size, idphoto
企业内部物料生产用自定义 Section 替换 photos / templates，对接内部素材库

下一步​