侧面板概览

<SidePanel /> 是 Ydesign 编辑器左侧那条竖向的业务面板区。它由一列侧边 Tab 按钮和展开的内容区组成，负责承载"向画布添加内容"以及"整体属性调节"类的功能 —— 模板、文字、图片、形状、上传、背景、图层、尺寸、证件照、AI 消除笔…

和 Toolbar 的关系：Toolbar 是选中元素后调整它的属性；SidePanel 更偏从零往画布注入东西，以及画布级（尺寸、背景、图层顺序）的全局调整。

---

基本用法

import { SidePanel, createStore } from '@ydesign/react-editor';

const store = createStore({ key: 'YOUR_API_KEY' });

export default function App() {
  return (
    <div style={{ width: 420, height: '100vh' }}>
      <SidePanel store={store} />
    </div>
  );
}

<SidePanel /> 会撑满父容器的宽高，你只要给父节点一个明确尺寸即可。

Props

type SidePanelProps = {
  store: StoreType;

  /**
   * 要显示哪些面板
   * - 可以传字符串名数组：['templates', 'text', 'photos']
   * - 也可以传完整的 Section 对象数组：[TextSection, CustomSection]
   * - 不传则显示全部 DEFAULT_SECTIONS
   */
  sections?: Section[] | string[];

  /**
   * 首次打开默认停留在哪个面板（按 name 匹配）
   * 默认 'templates'
   */
  defaultSection?: string;
};

---

内置 10 个 Section

所有 Section 都从 @ydesign/react-editor/side-panel 单独导出，也都打包在 DEFAULT_SECTIONS 中：

Section	name	默认组件	大致用途
TemplatesSection	templates	TemplatesPanel	模板中心：从后端拉模板列表加载到画布
TextSection	text	TextPanel	文字：字体库、样式预设、文字效果
PhotosSection	photos	PhotosPanel	图片素材库（可对接 Unsplash / 自家图库）
ShapesSection	shapes	ShapesPanel	形状与线段
UploadSection	upload	UploadPanel	本地上传（默认 base64，推荐改为上传到你自己的 OSS）
BackgroundSection	background	BackgroundPanel	画布背景色 / 背景图
LayersSection	layers	LayersPanel	图层管理
SizeSection	size	SizePanel	画布尺寸（预设 + 自定义）
IdphotoSection	idphoto	IdphotoPanel	证件照业务场景
InpaintSection	inpaint	InpaintPanel	AI 消除笔（涂抹 / 框选 / 圈选）

裁剪要显示的面板

方式 1：传 name 数组（最省事）

<SidePanel store={store} sections={['templates', 'text', 'photos', 'shapes', 'background', 'layers']} />

方式 2：传完整 Section 数组（更灵活，能插入自定义 Section）

import { SidePanel, DEFAULT_SECTIONS, TextSection, PhotosSection, BackgroundSection } from '@ydesign/react-editor/side-panel';

const sections = [TextSection, PhotosSection, BackgroundSection];

<SidePanel store={store} sections={sections} defaultSection="photos" />;

---

关于 InpaintSection / IdphotoSection 的特殊说明

这两个 Section 在 DEFAULT_SECTIONS 里都被标记为 visibleInList: false，意味着：

• 它们不会出现在常驻的侧边 Tab 列表里
• 但当程序调用 store.openSidePanel('inpaint') 时，会被按需弹出展开

典型触发方式：

// 选中一张图片后，点击工具栏的"AI 消除笔"按钮
store.openSidePanel('inpaint');

// 进入证件照业务场景
store.openSidePanel('idphoto');

这种模式叫"按需展开的业务面板"，非常适合专业工具（消除笔、证件照排版等）—— 不干扰日常界面，又能在进入特定工作流时把相关操作集中到一个面板里。详见 自定义 Section · visibleInList。

---

常用 Store 字段 / Action

// 当前打开的面板名
store.openedSidePanel; // => 'templates' | 'text' | ...

// 切换打开的面板（传 '' 关闭）
store.openSidePanel('photos');
store.openSidePanel('');

---

下一步

• 👉 自定义 Section —— 增 / 删 / 替换 Section
• 👉 内置 10 个 Section 详解 —— 每个面板的用途与定制切入点
• 👉 ImagesGrid 组件 —— 一个自带懒加载网格，供素材面板复用
• 👉 Upload Panel —— 接自己的图床
• 👉 Size Panel —— 自定义画布尺寸清单
• 👉 定制化 · SidePanel