feat: support add components with popover

[BoBoooooo]

基础组件库

NetEase/tango-components#6

• tango-event-button & addComponent event
• Columns & Column 组件 add defineComponent HOC

设计器/引擎

Feat

Core

// designer 新增 menuData 属性
const engine = createEngine({
  workspace,
  menuData: 'design'
});

组件 UI & 添加组件重构

• 组件侧边栏面板 UI 2.0 (样式调整，自适应宽度)
• 新增 ComponentsPopover 组件
• 画布支持快捷添加子组件 & 兄弟组件
  • prototype.hasChildren !== false 默认显示添加子元素按钮
  • prototype.childrenName & prototype.siblingNames 声明为 推荐组件 / 代码片段 (默认显示在基础组件顶部)
    

IconFont 新增图标

add 2 icons

// newUrl
at.alicdn.com/t/c/font_2891794_cxbtmzehxyi.js

WBEIDE

• 升级至 1.3.11

UI Component

• Popover
• DragPanel

interface DragPanelProps extends PopoverProps {
  // 标题
  title?: React.ReactNode | string;
  // 内容
  body?: React.ReactNode | string;
  // 底部
  footer?: ((close: () => void) => React.ReactNode) | React.ReactNode | string;
  // 宽度
  width?: number | string;
  // 右上角区域
  extra?: React.ReactNode | string;
}

<DragPanel
  title="标题"
  extra="右上角内容"
  width={700}
  body={
    <Box>
      内容
    </Box>
  }
  footer={
    <Text>
      底部信息
    </Text>
  }
>
  <Action tooltip="打开表达式变量选择面板" icon={<ExpandAltOutlined />} size="small" />
</DragPanel>