设计器接入

设计器为用户提供应用搭建的可视化界面。有两种方式初始化低代码设计器：

clone 官方示例代码，按照文档说明直接启动项目。
手工引入设计器的 npm 包，自定义配置、启动、运行。

通过示例代码启动设计器

你可以使用 Tango 代码仓库内的 /apps/playground 复制出来，作为基础应用并改造。你需要移除 .umirc.ts 中与 resolvePackageIndex() 方法相关的配置，具体可直接参考我们的示例应用的 .umirc.ts 文件，修改后再手动安装 @music163/tango-designer 即可启动项目。

如果上面的步骤比较繁琐，你也可以直接使用我们提供的示例应用代码，只需克隆到本地后安装并启动即可。

提示

本示例应用目前仅提供了设计器的前端基本功能，并且为了在 GitHub Pages 上运行，我们对代码进行了一些调整。后续我们将提供一个包含了低代码设计器前后端的完整项目，可以直接启动。

首先请确认本地已经安装了 Node.js 与 npm/yarn，且 Node.js 的版本大于 16。若本地没有安装 Node.js 或版本不满足需求，推荐使用 nvm 来安装并实现多版本管理。
```
curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.39.7/install.sh | bash
nvm install 16
nvm use 16
```
克隆项目仓库：
```
git clone https://github.com/NetEase/tango-playground.git --depth 1
```
也可以直接下载最新代码的压缩包并解压。
安装项目依赖：
```
cd tango-playground
npm install
```
在本地的 hosts 文件中将沙箱的同级域名指向本地，以实现沙箱与本地通信。如果你还没有部署过沙箱，可参考沙箱接入文档。
```
# 假设沙箱已经部署在了 sandbox.example.com 下，hosts 可以将任意 example.com 的子域名指向本地
127.0.0.1 local.example.com
```

修改 /src/pages/index.tsx，将 <Sandbox> 的 bundlerURL 替换为已部署的沙箱的地址。

<Sandbox
  bundlerURL="https://sandbox.example.com"
  onMessage={(e) => {
    // ...
  }}
/>

修改 /package.json，修改 dev 脚本的 HOST 环境变量，将其改为上述配置在 hosts 文件时定义的开发域名。
```
"dev": "HOST=local.example.com PORT=8001 umi dev",
```
使用脚手架的指令启动项目开始开发，启动后需要通过之前 hosts 配置的域名打开本地项目，并信任自签发的证书。
```
# 经过上述修改启动后，可通过 https://local.example.com:8001 访问项目
npm start
```
如果一切正常，现在你应该可以正常看到设计器的效果了。

配置低代码设计器

Tango 设计器是一个独立的基于 React 实现的 npm 包，你可以通过 npm 或 yarn 来安装 @music163/tango-designer 使用。

引擎初始化

Tango 引擎遵循最小内核的原则，其实现非常的精简，提供了引擎实现的基本规范，和默认的基于源码解析操纵的引擎实现。意味着，你可以快速的初始化一个基于源码解析操纵的设计器引擎。当然，也可以根据自己的需要，按照引擎的规范实现自定义的实现。

import { createEngine, Workspace } from '@music163/tango-core';
// 工作区初始化：将项目文件传入给设计器
const workspace = new Workspace({
  entry: '/src/index.js',
  files: mockFiles, // 文件参数可以参考示例应用
  prototypes: mockPrototypes, // 组件配置信息可以参考示例应用
});

// 引擎初始化：将工作区传入给设计器引擎，完成设计器的初始化
const engine = createEngine({
  workspace,
});

关于组件配置信息可以参考组件接入部分。

设计器初始化和布局

Tango 提供了基于 React 实现的开箱即用的设计器组件，你可以借助这些组件快速的组装一个基本的低代码设计器。也可以根据实际需要，开发自定义的设计器组件。

关于设计器组件的介绍和使用可以参考设计器自定义部分。

import {
  Designer,
  DesignerPanel,
  SettingPanel,
  Sidebar,
  Toolbar,
  WorkspacePanel,
  WorkspaceView,
  CodeEditor,
  Sandbox,
} from '@music163/tango-designer';

export default function App() {
  return (
    <Designer engine={engine}>
      <DesignerPanel
        logo="Your Logo"
        actions={
          <Box px="l">
            <Toolbar>
              <Toolbar.Item key="history" placement="left" />
              <Toolbar.Item key="preview" placement="left" />
              <Toolbar.Item key="modeSwitch" placement="right" />
              <Toolbar.Item key="togglePanel" placement="right" />
            </Toolbar>
          </Box>
        }>
        <Sidebar>
          <Sidebar.Item
            key="components"
            label="组件"
            icon={<AppstoreAddOutlined />}
            widgetProps={{
              menuData, // 配置设计器的组件列表
            }}
          />
          <Sidebar.Item key="outline" label="结构" icon={<BuildOutlined />} />
          <Sidebar.Item
            key="dependency"
            label="依赖"
            icon={<ClusterOutlined />}
            isFloat
            width={800}
          />
        </Sidebar>
        <WorkspacePanel>
          <WorkspaceView mode="design">
            <Sandbox />
          </WorkspaceView>
          <WorkspaceView mode="code">
            <CodeEditor />
          </WorkspaceView>
        </WorkspacePanel>
        <SettingPanel />
      </DesignerPanel>
    </Designer>
  );
}

配置设计器的组件列表

设计器的组件列表供用户快速的了解到当前应用支持的组件，可以通过 menuData 配置项传入给侧边栏的组件面板。定义格式如下：

const menuData = {
  common: [
    {
      title: '常用',
      items: ['Button', 'Section', 'Columns', 'Column', 'Box', 'Text'],
    },
    {
      title: '输入',
      items: ['Input', 'InputNumber', 'Select'],
    },
  ],
};

值得注意的是，menuData 定义的组件名，需要在引擎的 prototypes 参数中提前定义好，以便引擎能够正确的解析和渲染组件的配置参数。

通过示例代码启动设计器​

配置低代码设计器​

引擎初始化​

设计器初始化和布局​

配置设计器的组件列表​

通过示例代码启动设计器

配置低代码设计器

引擎初始化

设计器初始化和布局

配置设计器的组件列表