feat: designer turbo

[BoBoooooo]

基础组件库

NetEase/tango-components#6

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

设计器/引擎

Feat

Core

// Workspace 新增 menuData 属性
const workspace = new Workspace({
  entry: '/src/index.js',
  files: sampleFiles,
  prototypes,
  menuData, // 初始化注入菜单信息
});

// 新增 defaultActiveView，支持声明默认视图
const engine = createEngine({
  workspace,
  defaultActiveView: 'design'
});

新增快捷键

• cmd + z 撤销
• cmd + shift + z 回退

组件 UI & 添加组件重构

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

表达式弹窗改为可拖拽 Panel

范围：ExpressionSetter & EventSetter

IconFont 新增图标

add 2 icons

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

WBEIDE

• 升级至 1.3.11

Fix

• 【Demo】 修复本地示例 Prototype 代码片段配置 Bug
• 【UI】修复 Setting Form Title 文本过长溢出
• 【Core】修复历史记录回退数组越界
• 【Core】修复 prototype2code bug，兼容 props undefined 场景
• 【Core】修复代码片段 import 多余导入 Bug
  

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>

[BoBoooooo]

已拆分 PR 合并，关闭。