优维低代码：构件编辑器开发

Posted 2023-03-17

优维低代码技术专栏，是一个全新的、技术为主的专栏，由优维技术委员会成员执笔，基于优维7年低代码技术研发及运维成果，主要介绍低代码相关的技术原理及架构逻辑，目的是给广大运维人提供一个技术交流与学习的平台。

---

连载第四十一期

《高级指引：构件编辑器开发》

▽

构件编辑器是用于可视化编排中，实时展示特定构件的低保真线框图的构件。每个构件对应一个构件编辑器，没有编写编辑器的构件则将使用一个默认的基本编辑器。

本文以basic-bricks.general-button 的构件编辑器的开发为例，介绍一个构件编辑器的开发过程。

# 新增一个构件编辑器

1. 在相关的构件仓库中运行 yarn yo；
2. 选择 a new editor brick ；
3. 选择对应的构件包 basic-bricks（可按关键字搜索）；
4. 选择对应的构件 general-button（可按关键字搜索）。

该构件编辑器的相关初始代码就已生成。

# 启动本地打包和服务

1. 启动构建编辑器的开发模式打包：lerna run start:editors --scope @next-bricks/basic-bricks；
2. 启动本地服务：yarn serve --local-editors basic-bricks；
3. 打开本地调试页面：​​http://localhost:8081/​​。

⊙ NOTE

注意：虽然构件和构件编辑器都在构件包中维护，但它们的打包是相互独立的，因此不要试图在构件和构件编辑器之间共享代码。

# 开发

初始化的构件编辑器仅展示一个非常原始的方框和构件别名，而一个好的构件编辑器应该能通过读取它的属性配置来展示该构件的关键 UI 特征。

对于 general-button 这个构件来说，它的关键特征有两个：按钮显示的文本和按钮的类型样式。

因此我们修改 general-button.editor.tsx：

export function GeneralButtonEditor(
  nodeUid,
  brick,
: EditorComponentProps): React.ReactElement 
  const node = useBuilderNode<GeneralButtonProperties>( nodeUid );
  // 通过 `node.$$parsedProperties` 读取构件的属性配置。
  const  buttonName, buttonType  = node.$$parsedProperties;


  return (
    <EditorContainer nodeUid=nodeUid brick=brick>
      <div
        className=classNames(styles.button, 
          [styles.primary]: buttonType === "primary",
        )
      >
        buttonName || node.alias
      </div>
    </EditorContainer>
  );

代码修改后，本地调试页面会自动刷新，这时试试在编排中修改该构件的相关属性配置，看看效果。

⊙ NOTE

注意：构件编辑器和普通构件一样使用 CSS Modules 编写样式。另外，别忘了编写单元测试。

优维低代码：构件 slot 说明

导语

优维低代码技术专栏，是一个全新的、技术为主的专栏，由优维技术委员会成员执笔，基于优维7年低代码技术研发及运维成果，主要介绍低代码相关的技术原理及架构逻辑，目的是给广大运维人提供一个技术交流与学习的平台。

---

在上一篇《优维低代码：构件事件传递》的技术分享中，我们分享了构件间传递事件常见的业务场景，以及分布调用的方式。下面，我们来讲讲有关容器构件的slot机制。

  "brick": "basic-bricks.micro-view",
  "injectDeep": true,
  "slots": 
    "titleBar": 
      "type": "bricks",
      "bricks": [
        
          "brick": "basic-bricks.page-title",
          "injectDeep": true,
          "properties": 
            "pageTitle": "APP 管理"
          
        
      ]
    ,
    "content": 
      "type": "bricks",
      "bricks": [
        ...
      ]
    
  

有些容器构件是提供了 slot 机制的，也即是构件的插槽。插槽的意思是这个构件提供了子构件插入的能力，但插入点的位置会由父构件决定，插槽点用名称来表示。比如 basic-bricks.micro-view 就提供了 3 个插槽：titleBar、toolbar、content，表示左上角标题位置，右上角工具栏位置，内容位置，具体可查看说明文档。

如下为 basic-bricks.micro-view 的插槽示意图：

# div 也有 slot

  "brick": "div",
  "slots": 
    "": 
      "type": "routes",
      "routes": [
        ...
      ]
    
  

大伙在 demo 示例中会看到有不少上述写法，也会有疑问：

• div 为啥可以有 slots
• slot 的 key 为啥可以是 ""

解释：其实任何构件都可以有 slot ，如果 slot 名字在构件中找不到定义的话，框架也一样会渲染，按 html 流式布局（从左往右从上往下）排布。因为之前我们 storyboard 编排时候不支持“路由直接嵌套子路由”，所以为了一些代码的复用（比如 sidebar）和路由层级更好，故会特意新增一个 div 的层级，而 slot 一般就写成了 ""

另外：“路由直接嵌套子路由”在新的版本支持了，具体见：RouteConf

  "path": "/xxx",
  "type": "routes",
  "routes": [
    
      "path": "/xxxx/a",
      "bricks": []
    ,
    
      "path": "/xxxx/b",
      "bricks": []
    
  ]

以上就是今天关于优维低代码的分享，希望对你有所收获！