# 设计器扩展概览

主要介绍如何扩展 tango 设计器。tango 设计器提供了三个部位的自定义扩展能力，分别是标题栏，工具栏，和侧边栏。可以通过下面这张图进行简要的了解：

<img src="https://p5.music.126.net/obj/wonDlsKUwrLClGjCm8Kx/13359732115/c5ca/c5ae/bbd4/852daf849ac39162baf3bc3a985de6de.png" />

## 标题栏扩展

`DesignerPanel` 提供了 logo, description, actions 三个扩展点，分别对应于 平台标识、应用描述、行动点区域，开发者可以按照需求进行扩展。例如：

```jsx
<DesignerPanel logo={<Logo />} description={<ProjectDetail />} actions={<Box>新版沙箱</Box>}>
</SidebarPanel>
```

## 工具栏扩展

工具栏面板支持任意组合和设置渲染的位置，开发者可以通过 `ToolbarPanel.Item` 添加自定义的工具栏选项，例如下面的代码扩展了一个 newPage 按钮，用于支持在设计器中创建新页面的需求。

```jsx
<ToolbarPanel>
  <ToolbarPanel.Item key="history" />
  <ToolbarPanel.Item key="viewportRefresh" />
  <ToolbarPanel.Item key="preview" />
  <ToolbarPanel.Item key="routeSwitch" />
  <ToolbarPanel.Item key="newPage">
    <Button
      onClick={() => {
        const { name, code } = genDefaultPage(index);
        engine.workspace.addViewPage(`${name}${index++}`, code);
        message.success('页面新建成功');
      }}
    >
      添加新页面
    </Button>
  </ToolbarPanel.Item>
  <ToolbarPanel.Item key="modeSwitch" placement="center" />
  <ToolbarPanel.Item key="viewportSwitch" placement="right" />
</ToolbarPanel>
```

## 侧边栏扩展

侧边栏面板支持任意组合和调换顺序，用户可以通过 `SidebarPanel.Item` 组件进行自定义扩展，默认情况下根据一些内置的 key 标识，设计器会自动渲染对应的面板，用户也可以根据自己的需求采用自定义渲染子节点的方案进行扩展。
例如，下面的示例代码中扩展了一个 “自定义面板”。

```jsx
<SidebarPanel>
  <SidebarPanel.Item key="components" />
  <SidebarPanel.Item key="outline" />
  <SidebarPanel.Item key="dataSource" />
  <SidebarPanel.Item key="dependency" />
  <SidebarPanel.Item key="history" />
  <SidebarPanel.Item key="custom" title="自定义面板" icon={<BulbOutlined />}>
    <Box p="m">这里是一个自定义的面板，你可以任意添加</Box>
  </SidebarPanel.Item>
</SidebarPanel>
```
