引言：《海馬體設計中台- 低代碼引擎》将分為兩個篇章與大家進行詳細介紹。今天我們先聚焦的是使用介紹篇，從項目背景、核心優勢、内部研發流程優化、試用Demo以及分區功能等方面與大家展開交流，讓大家更加深入地了解該項目的各項功能。在後續的篇章中，我們将進一步深入探讨項目架構、設計思想等内容。
1 海馬體設計中台項目背景
随着公司業務增長，開發階段會遇到諸多問題，如B端系統存在至少50% Crud 相似互動場景的頁面，造成重複的開發成本和疊代成本；每個系統的ui視覺不一緻，靠研發和ui設計對規範進行落地成本較高，很難讓新夥伴快速落地規範；産品針對類似功能設計出不一樣的互動，導緻互動不一緻，造成重複的研發成本。
針對以上問題，低代碼引擎應運而生。它是一種通用的開發架構，通過對低代碼平台系統常用的功能進行解構，将其劃分為多個功能子產品，并為每個子產品定義了相應的協定和開發範式，使得開發者可以根據自身的業務需求，輕松定制開發出自己的業務系統。
圖1 基于低代碼引擎的開發流程
2 核心亮點
圖2 低代碼核心引擎的亮點
設計中台低代碼引擎采用靈活的系統架構，和其出色的整體架構提供了高度的自定義自由度，使使用者能夠像搭建積木一樣選擇不同的子產品來建構自己的專屬設計器。此外，插件化的架構使得使用者可以友善地擴充與業務相關的功能。
在設計中台低代碼引擎中，插件根據位置大緻分為三類：toolbars/plugins/settings，分别對應頂部區域、左側區域和右側區域。toolbars 插件主要偏向于無需 UI 或者 UI 較為簡單的工具插件，plugins 是業務功能插件，顯示在左（或下方）抽屜頁面，可以通過點選進行展開收起或切換。
這些功能都像是獨立的積木塊，使用者可以選擇性地保留或删除。同時，使用者也可以開發自己的插件或工具，并将其安裝到對應的位置。設計中台低代碼引擎的靈活性極強，可以自由地決定他們想要開發的業務界面。
3 正常研發流程和設計中台對比
「正常前端研發」和「設計中台」流程對比，以『設計中台标準化建構』為核心，詳細介紹設計中台在業務中的使用流程，同時多元度講解在使用過程的優勢和開發體驗。
圖3 正常前端研發體系和設計中台研發體系的對比
通過對比正常前端研發體系和設計中台研發體系的4個階段，可以直覺的發現在頁面設計、上下遊協作、開發階段、建構階段都可以進行标準化、規範化和流程化。也可以發現通過設計中台完成的效率和錯誤率都大大減少。
- 提高研發效率：通過搭建平台快速搭建頁面，并産出相應的代碼。從單頁面8h提升到1h時間
- 互動視覺設計一緻性：通過搭建平台，規範了元件的視覺和互動效果，因為不能定制化開發功能，進而達到一緻性
- 産品prd一緻性：通過搭建平台，限制了産品 prd 的繪制方式，讓産品能快速産出高還原的 prd
- 團隊代碼規範：利用互動一緻、元件沉澱、标準化接口規範、直接生成代碼檔案規範化提升開發體驗
4 試用設計中台（低代碼引擎）Demo
低代碼編輯器中的區塊主要包含以下功能點：
圖4 低代碼編輯器的功能介紹
4.2 分區塊功能介紹
4.2.1 左側：面闆與操作區
- 物料面闆
可以查找元件，并在此拖動元件到編輯器畫布中
- 大綱面闆
可以調整頁面内的元件樹結構
- 源碼面闆
可以編輯頁面元件資料的配置
- 出碼
用于搭建完成的VUE3項目代碼
4.2.2 中部：可視化頁面編輯畫布區域
點選元件在右側面闆中能夠顯示出對應元件的屬性配置選項
拖拽修改元件的排列順序
4.2.3 右側：元件級别配置
- 選中的元件
從頁面開始一直到目前選中的元件位置，點選對應的名稱可以切換到對應的元件上
- 選中元件的配置
目前元件的大類目選項，根據元件類型不同，包含如下子類目：
- 屬性
元件的基礎屬性值設定
- 樣式
元件的樣式配置，如表格背景顔色
- 事件
綁定元件對外暴露的事件
- 進階
循環、條件渲染與 key 設定
4.2.4 實踐-搭建清單查詢頁
- 建立tableData
- 接口綁定tableData
5 物料建設
圖5 物料體系建設
強大的搭建能力少不了物料、元件、區塊的支援，目前支援能力如下：
- 首先，建設前端物料體系，定義和統一前端的開發标準，建設前端物料資源體系，其中包括設計和單元測試等資源；
- 第二，實行工具化管理，完善工程體系，統一前端的開發流程和技術棧，保證資源複用率；
- 第三，制定協作流程，包括多人參與的釋出流程、代碼review流程、版本号管理等
- 最後也是最重要的就是漸進式開發，因為它決定了物料完成之後能不能達到最佳的複用率。
圖6 海馬體前端物料庫文檔
圖7 海馬體物料元件工具概覽
6 總結
本文深入探讨了海馬體設計中台的低代碼引擎，一種靈活且高效的開發工具，旨在解決企業在業務發展過程中遇到的重複開發、視覺不一緻以及互動不一緻等問題。低代碼引擎通過解構常用功能并劃分為多個功能子產品，為開發者提供了定制開發業務的自由度和便捷性。
本文重點介紹了如何通過搭建平台實作互動視覺設計的一緻性和産品PRD的一緻性。通過規範元件的視覺和互動效果，限制産品PRD的繪制方式，有效提升了開發體驗。低代碼編輯器中的功能點，如物料闆、大綱闆、源碼闆和出碼等，使得開發者能更高效地搭建頁面并産出代碼。
海馬體設計中台的低代碼引擎是一種強大而靈活的開發工具，能夠顯著提高企業的研發效率和代碼品質，推動業務快速發展。随着技術的不斷進步和應用的深入，低代碼引擎将在未來發揮更加重要的作用，為企業創造更大的價值。
本文作者
墨瑞，來自缦圖網際網路中心前端團隊。
來源-微信公衆号:缦圖coder
出處:https://mp.weixin.qq.com/s/C9N8gIuR6kKFqnbrCiNPzQ