低代碼前端【免費(fèi)下載鏈接】brick-design低代碼框架支持流式布局與自由布局拖拽編排可視化拖拽、隨意嵌套組合、實(shí)時(shí)渲染、實(shí)時(shí)輔助線(xiàn)展示、自由布局支持輔助對(duì)齊、支持自動(dòng)吸附、實(shí)時(shí)組件間距展示、實(shí)時(shí)拖拽排序、狀態(tài)域管理可視化屬性配置、可視化樣式配置、多設(shè)備適配展示支持邏輯渲染、模板字符變量、表達(dá)式、自定義方法、自定義狀態(tài)項(xiàng)目地址https://gitcode.com/gh_mirrors/br/brick-design點(diǎn)擊查看免費(fèi)下載BrickTree 是 brick-design 低代碼編輯器中的組件樹(shù)面板它以樹(shù)形結(jié)構(gòu)實(shí)時(shí)呈現(xiàn)當(dāng)前頁(yè)面的pageConfig層級(jí)并支持選中聯(lián)動(dòng)、復(fù)制、刪除以及跨組件拖拽改序等操作。本文以官方文檔 BrickTree.md 的 API 說(shuō)明為主體結(jié)合packages/components與packages/core中的真實(shí)源碼完整拆解它的渲染結(jié)構(gòu)、與 BrickDesign 畫(huà)布的同步機(jī)制以及“增、刪、改 拖拽排序”背后的 Action/Reducer 調(diào)用鏈。讀完本文你將掌握如何在BrickProvider體系內(nèi)正確接入 BrickTree并理解每一個(gè)樹(shù)上操作如何最終改寫(xiě)pageConfig狀態(tài)。一、BrickTree 的定位畫(huà)布的“結(jié)構(gòu)鏡像”官方文檔對(duì) BrickTree 的介紹可以概括為三點(diǎn)它是 brick design 編輯器的組件樹(shù)同時(shí)也是頁(yè)面結(jié)構(gòu)的可視化展示當(dāng)直接編輯畫(huà)布不方便時(shí)可以通過(guò)修改組件樹(shù)結(jié)構(gòu)來(lái)實(shí)現(xiàn)想要的效果——即樹(shù)面板是畫(huà)布編輯之外的另一條操控入口BrickTree 與 BrickDesign 實(shí)時(shí)同步并且同樣支持增、刪、改支持跨組件拖拽更改順序。在完整的編輯器外殼中BrickTree 并不單獨(dú)出現(xiàn)。從源碼 Layers 面板 可以看到它被放置在名為 Layers 的可拖拽調(diào)整寬度的側(cè)欄DragResizeBar中與頁(yè)面列表Pages上下組合DragResizeBar title{Layers} minWidth{212} icon{layersIcon} key{Layers} Pages onDelete{onDelete} / BrickTree / Tips icon{warnIcon} tip{刪除不可逆} tipTitle{注意} ... / /DragResizeBar其中Pages負(fù)責(zé)頁(yè)面Layer的增刪改名BrickTree負(fù)責(zé)當(dāng)前頁(yè)面內(nèi)組件樹(shù)的展示與編輯Tips組件則承載“刪除不可逆”的確認(rèn)彈窗。也就是說(shuō)BrickTree 的編輯對(duì)象是當(dāng)前頁(yè)面的組件結(jié)構(gòu)而頁(yè)面級(jí)的切換由同級(jí)的Pages完成。二、安裝與使用方式按 docs/react/getting-started.md 的說(shuō)明首先安裝 React 集成包yarn add brickd/react或者npm install brickd/react然后在BrickProvider內(nèi)部與BrickDesign并列掛載BrickTreeimport { createElement } from react; import { BrickDesign, BrickTree, BrickProvider, useSelector, createActions, } from brickd/react; const plugins [(vDom, componentConfig) vDom]; const customReducer (state, action) { const { type, payload } action; switch (type) { case customReducer: return { ...state }; default: return state; } }; const App () { const { componentConfigs } useSelector([componentConfigs]); return ( BrickProvider initState{{}} customReducer{customReducer} config{{ /* 你的配置 */ }} div onClick{() createActions({ type: customReducer, payload: { /* ... */ } })} 觸發(fā) action /div BrickDesign / BrickTree / /BrickProvider ); };這與 packages/components/README.md 中的用法示例一致BrickTree必須處于BrickProvider的上下文中與BrickDesign畫(huà)板/頁(yè)面編輯組件共享同一份狀態(tài)。如果你使用完整編輯器外殼示例工程 examples/react-example/src/App.tsx 直接使用了封裝好的BrickEdifice其內(nèi)部BrickEdifice/index.tsx同樣以BrickProviderBrickDesignCanvas組合呈現(xiàn)各面板Layers 面板含 BrickTree由Menus按需激活。屬性說(shuō)明className文檔明確 BrickTree 目前只有一個(gè)屬性className它作用在組件樹(shù)的最外層 div 上。從當(dāng)前源碼結(jié)構(gòu)看BrickTree/index.tsx組件樹(shù)的根容器渲染為div onMouseLeave{onMouseLeave} onWheel{(event) event.stopPropagation()} className{styles[sort-container]} SortTree disabled childNodes{[ROOT]} specialProps{{ key: ROOT, domTreeKeys: [], parentKey: }} componentName{} / /div這里有兩個(gè)實(shí)現(xiàn)細(xì)節(jié)值得注意onWheel中調(diào)用event.stopPropagation()阻止頁(yè)面滾動(dòng)事件冒泡避免樹(shù)面板內(nèi)部滾動(dòng)時(shí)干擾外層畫(huà)布交互onMouseLeave中調(diào)用setOperateState({ operateHoverKey: null, hoverNode: null })當(dāng)鼠標(biāo)離開(kāi)整個(gè)樹(shù)面板時(shí)清除畫(huà)布上殘留的 hover 高亮。樣式層面.sort-container使用 flex 布局并允許自身滾動(dòng)index.less。如果需要對(duì)樹(shù)面板做布局調(diào)整例如固定高度、寬度按文檔說(shuō)明將className作用在最外層 div 上即可。三、樹(shù)的數(shù)據(jù)來(lái)源與遞歸渲染結(jié)構(gòu)3.1 數(shù)據(jù)源pageConfig[ROOT]BrickTree 入口 通過(guò)useSelector訂閱STATE_PROPS域中的pageConfig其比較函數(shù)只在根節(jié)點(diǎn)從無(wú)到有或從有到無(wú)時(shí)才觸發(fā)刷新const { pageConfig } useSelector( [pageConfig], (prevState, nextState) { const { pageConfig } nextState; return !!(!prevState.pageConfig[ROOT] pageConfig[ROOT]); } ); if (!pageConfig[ROOT]) return null;這解釋了 BrickTree 的渲染前提頁(yè)面必須存在根節(jié)點(diǎn)ROOT樹(shù)面板才會(huì)渲染一旦整頁(yè)被清空見(jiàn)后文deleteComponent對(duì) ROOT 的處理樹(shù)面板即返回null。樹(shù)從childNodes{[ROOT]}開(kāi)始遞歸展開(kāi)specialProps攜帶key、domTreeKeys、parentKey等定位信息供深層節(jié)點(diǎn)識(shí)別自己的位置。3.2 遞歸渲染SortTree → SortItem樹(shù)的主體由 SortTree.tsx 與 SortItem.tsx 兩個(gè)組件遞歸構(gòu)成SortTree把一組childNodes渲染為可排序容器ReactSortableSortItem列表SortItem表示一個(gè)節(jié)點(diǎn)其內(nèi)部通過(guò)renderSortTree決定如何展開(kāi)子級(jí)SortItem.tsx L33-L70若childNodes是數(shù)組普通容器繼續(xù)渲染一個(gè)SortTree若childNodes不是數(shù)組且存在nodePropsConfig則按nodePropsConfig的每個(gè)屬性名渲染“屬性子樹(shù)”——也就是說(shuō)組件上配置了nodeProps的字段如 Form 的 items、List 的數(shù)據(jù)源等也會(huì)作為可嵌套子樹(shù)展示propChildNodes取get(childNodes, propName, [])。每個(gè)SortItem通過(guò)useSelector訂閱selectedInfo與pageConfigSortItem.tsx L103-L112從pageConfig[key]讀出節(jié)點(diǎn)的componentName與childNodes。此外每個(gè)節(jié)點(diǎn) DOM 上寫(xiě)入了三類(lèi)數(shù)據(jù)屬性SortItem.tsx L159-L165div className{styles[sort-item]} id{key} >onMouseOver{() { !isSelected setOperateState({ hoverNode: getSelectedNode(key), operateHoverKey: key, }); }}鼠標(biāo)懸停樹(shù)上節(jié)點(diǎn)時(shí)通過(guò)getSelectedNode(key)拿到畫(huà)布中對(duì)應(yīng)的真實(shí) DOM 節(jié)點(diǎn)寫(xiě)入operateHoverKey與hoverNode畫(huà)布側(cè)組件據(jù)此顯示 hover 輪廓onMouseLeave時(shí)再清空。Header還通過(guò)useOperate()的setSubscribe(changeStatus)訂閱操作狀態(tài)變化從而響應(yīng)畫(huà)布側(cè)發(fā)起的 hover即畫(huà)布 → 樹(shù)方向的反向高亮。2樹(shù) → 畫(huà)布點(diǎn)擊選中 滾動(dòng)定位onClick{(event) { event.stopPropagation(); if (isSelected) { clearSelectedStatus(); setOperateState({ selectedNode: null, operateSelectedKey: null }); } else { const selectedNode getSelectedNode(key); selectComponent({ ...specialProps, propName }); nodeScrollIntoView(selectedNode); setOperateState({ selectedNode, operateSelectedKey: key }); } }}點(diǎn)擊節(jié)點(diǎn)會(huì)派發(fā)selectComponentaction定義見(jiàn) produceActions/selectedComponent.ts更新全局selectedInfonodeScrollIntoView負(fù)責(zé)把畫(huà)布中對(duì)應(yīng)節(jié)點(diǎn)滾動(dòng)進(jìn)可視區(qū)域再次點(diǎn)擊已選中節(jié)點(diǎn)則取消選中。由于 BrickDesign 畫(huà)布同樣訂閱selectedInfo來(lái)渲染選中邊框樹(shù)與畫(huà)布的選中態(tài)因此始終保持一致。3畫(huà)布占位預(yù)覽placeholderBridgeStore橋這是“實(shí)時(shí)同步”中最有特色的一環(huán)。當(dāng)你在樹(shù)上拖拽節(jié)點(diǎn)時(shí)畫(huà)布側(cè)會(huì)實(shí)時(shí)渲染一個(gè)占位框GuidePlaceholder預(yù)覽組件將被放入的位置。其實(shí)現(xiàn)鏈路是dragSort.ts L14-L23 定義了全局橋?qū)ο骵xport const placeholderBridgeStore { prevRects: null, renderPlaceholder: null, changePosition(rects: PlaceholderPositionType) { if (!isEqual(this.prevRects, rects)) { this.prevRects rects; this.renderPlaceholder this.renderPlaceholder(rects); } }, };畫(huà)布側(cè) GuidePlaceholder 組件 把placeholderBridgeStore.renderPlaceholder注冊(cè)為占位框渲染函數(shù)樹(shù)上拖拽過(guò)程中SortTree的onChange調(diào)用 onDragBrickTree下文詳述實(shí)時(shí)計(jì)算node1/node2/node3三段占位矩形并changePosition推給畫(huà)布拖拽結(jié)束或無(wú)變化時(shí)changePosition({})清空占位框參見(jiàn) Container.ts 中對(duì)placeholderBridgeStore的清空調(diào)用。因此即使落點(diǎn)在畫(huà)布深處你也能在拖到一半時(shí)就直觀看到“松手后會(huì)插在哪里”。五、增、刪、改樹(shù)上操作的 Action/Reducer 實(shí)現(xiàn)文檔所說(shuō)的“支持增、刪、改支持跨組件拖拽更改順序”在 Header.tsx 中落為三個(gè)按鈕行為對(duì)應(yīng)的 action 與 reducer 均在brickd/core包內(nèi)。5.1 復(fù)制copyComponent樹(shù)節(jié)點(diǎn) hover 時(shí)顯示復(fù)制圖標(biāo)非屬性節(jié)點(diǎn)、非 ROOT 節(jié)點(diǎn)才顯示點(diǎn)擊后執(zhí)行copyComponent({ key, parentKey, parentPropName })。其 reducer 實(shí)現(xiàn)于 handleComponentSchema.ts L104-L136未選中節(jié)點(diǎn)且未傳key時(shí)warn(Please select the node you want to copy)并返回原 state禁止復(fù)制根節(jié)點(diǎn)selectedKey或key為ROOT時(shí)給出Prohibit copying root node警告合法復(fù)制時(shí)先undo.push({ pageConfig })、清空redo再通過(guò)getNewKey(pageConfig)生成新鍵用 immer 的produce update把newKey追加到父節(jié)點(diǎn)childNodes并用copyConfig深拷貝原節(jié)點(diǎn)配置——這就是文檔所述“增”的來(lái)源復(fù)制出的節(jié)點(diǎn)會(huì)即時(shí)出現(xiàn)在樹(shù)與畫(huà)布中配合 3.3 節(jié)的自動(dòng)展開(kāi)。5.2 刪除deleteComponent同樣在 handleComponentSchema.ts L184-L224未選中且無(wú)key時(shí)警告Please select the components you want to delete若刪除的是ROOT直接返回空pageConfig即刪除整個(gè)頁(yè)面樹(shù)面板隨之整體不渲染否則從父節(jié)點(diǎn)childNodes中移除引用deleteChildNodesKey若該節(jié)點(diǎn)自身還有childNodes則遞歸deleteChildNodes清掉所有子節(jié)點(diǎn)最后delete oldState[key]并重置selectedInfo: null。刪除會(huì)先壓入undo支持撤銷(xiāo)而頁(yè)面級(jí)的刪除Layers 面板的deleteLayers則在 Layers/index.tsx 中通過(guò)Tips彈窗做“刪除不可逆”的二次確認(rèn)。5.3 排序與跨組件移動(dòng)onLayoutSortChange這是 BrickTree 的核心能力。SortTree的onSortEnd回調(diào)SortTree.tsx L81-L99拿到排序后的sortKeys與拖拽事件后const layoutSortChange useCallback(function (sortKeys: string[], evt) { const dragInfo JSON.parse(evt.clone.dataset.special); // {key, parentPropName, parentKey} onLayoutSortChange({ sortKeys, parentKey: key, parentPropName: propName!, dragInfo }); setOperateState({ dropNode: null, isDropAble: false }); setNewDragKey(null); }, []);對(duì)應(yīng)的 reducerhandleComponentSchema.ts L144-L177做了兩件事本層重排把父節(jié)點(diǎn)位置的childNodes直接替換為sortKeys跨組件移動(dòng)清理若dragInfo存在且其parentKey/parentPropName與當(dāng)前落點(diǎn)不同說(shuō)明節(jié)點(diǎn)從別的父容器中被拖出于是再對(duì)原父節(jié)點(diǎn)執(zhí)行deleteChildNodesKey(childNodes, key, parentPropName)刪除舊引用。源碼注釋也明確寫(xiě)道“dragInfo 有值說(shuō)明為跨組件排序需要?jiǎng)h除拖拽組件原先父組件中的引用”。兩次update在同一個(gè)produce內(nèi)完成保證pageConfig原子更新隨后畫(huà)布按新結(jié)構(gòu)重新渲染——這就是文檔中“支持跨組件拖拽更改順序”的完整閉環(huán)。六、拖拽排序的實(shí)現(xiàn)細(xì)節(jié)ReactSortable 與落點(diǎn)規(guī)則6.1 拖拽引擎封裝樹(shù)的可排序容器基于 ReactSortable它是對(duì)sortablejs的forwardRef封裝useEffect中為onChoose/onAdd/onUpdate/onChange/onEnd五個(gè)事件統(tǒng)一注入包裝邏輯——onChoose記錄nextSibling與當(dāng)前容器onAdd/onUpdate觸發(fā)時(shí)先把evt.item插回nextSibling之前回滾 DOM 樂(lè)觀更新再取sortable.toArray()得到完整鍵序并回調(diào)onSortEnd(items, evt)由狀態(tài)層真正改寫(xiě)pageConfigonChange把實(shí)時(shí)鍵序回調(diào)給onChange(items, evt)用于拖拽過(guò)程中的畫(huà)布占位預(yù)覽。6.2 Sortable 配置與落點(diǎn)校驗(yàn)SortTree.tsx L117-L137 給出了關(guān)鍵的optionsReactSortable className{styles[sort-able]} options{{ group: { name: nested, put: (a, b, c) putItem(c, props) }, animation: 200, disabled, dataIdAttr: id, ghostClass: styles[item-background], swapThreshold: 0.5, }} onSortEnd{layoutSortChange} onChange{onChange} onEnd{onEnd} group.name: nestedput: putItem所有層級(jí)的 SortTree 同屬nested組因此節(jié)點(diǎn)天然可以跨層拖動(dòng)而putItemSortTree.tsx L50-L64是落點(diǎn)守門(mén)人const putItem (c: any, props: SortTreePropsType) { const { childNodes [], nodeProps, componentName } props; const fatherNodesRule c.dataset.farules; const dragName c.dataset.name; if (fatherNodesRule !JSON.parse(fatherNodesRule).include(componentName)) return false; if (nodeProps) { if (nodeProps.isOnlyNode childNodes.length 1) return false; if (nodeProps.childNodesRule) { return nodeProps.childNodesRule.includes(dragName); } } return true; };落點(diǎn)合法性由組件 Schema 決定fatherNodesRule聲明“哪些父級(jí)可以容納我”childNodesRule聲明“我可放入哪些子級(jí)”isOnlyNode約束“容器內(nèi)只能有一個(gè)節(jié)點(diǎn)”時(shí)禁止再插入第二個(gè)。這使磚塊設(shè)計(jì)器可以把組件的嵌套約束完全配置化。dataIdAttr: id與SortItem的id{key}配合保證toArray()返回的就是pageConfig鍵序列animation: 200、ghostClass灰色幽靈占位、swapThreshold: 0.5控制拖拽手感disabled由上層傳入根層SortTree傳disabled是因?yàn)?ROOT 本身不可被拖走復(fù)制/刪除也禁止操作 ROOT見(jiàn) 5.1、5.2。6.3 拖拽過(guò)程畫(huà)布占位框的實(shí)時(shí)計(jì)算拖拽過(guò)程中onChange會(huì)持續(xù)觸發(fā) onDragBrickTreeexport const onDragBrickTree (dragKey, sortKeys, parentKey, setOperateState, propName) { let parentNode getSelectedNode(parentKey); let childNodes get(getVNode(parentKey), childNodes, []); if (!Array.isArray(childNodes) propName) { childNodes get(childNodes, propName, []); // 屬性子樹(shù) } if (isEqual(childNodes, sortKeys)) return placeholderBridgeStore.changePosition(placeholderPosition); // ...計(jì)算 node1/node2/node3 三段占位矩形 placeholderBridgeStore.changePosition(placeholderPosition); };它會(huì)解析屬性子樹(shù)propName情形、把落點(diǎn) DOM 寫(xiě)入dropNode并置isDropAble: true供畫(huà)布側(cè)渲染投放提示、根據(jù)拖拽鍵在排序序列中的位置首/中/尾分別調(diào)用getPlaceholder1Rect/getPlaceholder3Rect計(jì)算三段式占位矩形最后推送給placeholderBridgeStore。若排序結(jié)果與原childNodes完全一致isEqual直接清空占位——這解釋了為什么“原地微動(dòng)”不會(huì)在畫(huà)布上留下多余占位框。七、使用注意事項(xiàng)小結(jié)結(jié)合文檔與源碼使用 BrickTree 時(shí)需記住必須在BrickProvider內(nèi)使用且與BrickDesign共享狀態(tài)頁(yè)面pageConfig中沒(méi)有ROOT時(shí)樹(shù)面板不渲染index.tsx L27當(dāng)前對(duì)外屬性只有className作用于組件樹(shù)最外層 div用于布局與樣式覆蓋ROOT 節(jié)點(diǎn)是保護(hù)對(duì)象不可復(fù)制、不可拖拽刪除 ROOT 等于清空整頁(yè)會(huì)觸發(fā)undo可撤銷(xiāo)但頁(yè)面級(jí)deleteLayers不可逆嵌套約束由組件配置驅(qū)動(dòng)fatherNodesRule、childNodesRule、isOnlyNode決定拖拽能否落點(diǎn)配置不當(dāng)會(huì)出現(xiàn)“拖不進(jìn)去”的現(xiàn)象排查時(shí)優(yōu)先檢查對(duì)應(yīng)組件的NodeProps配置樹(shù)操作全部走 actioncopyComponent/deleteComponent/onLayoutSortChange/selectComponent見(jiàn) actionTypes.ts 與 reducers/index.ts并自動(dòng)維護(hù)undo/redo因此撤銷(xiāo)/重做按鈕MidBottomButtons對(duì)樹(shù)操作同樣生效性能上做了針對(duì)性收斂BrickTree、SortTree、SortItem、Header均為memo組件useSelector的自定義比較函數(shù)限制了根級(jí)重渲染滾動(dòng)/懸停事件也做了stopPropagation隔離這些是樹(shù)與畫(huà)布能“實(shí)時(shí)同步”而不互相拖累的前提。至此BrickTree 從文檔描述的“組件樹(shù) 實(shí)時(shí)同步 增刪改 跨組件拖拽”到pageConfig數(shù)據(jù)流、placeholderBridgeStore占位橋、nested組拖拽規(guī)則與produce原子更新的完整實(shí)現(xiàn)路徑均已閉環(huán)。若需進(jìn)一步閱讀建議依次查看 BrickTree 面板源碼、handleComponentSchema.ts 與 dragSort.ts它們分別對(duì)應(yīng)樹(shù)渲染、狀態(tài)改寫(xiě)與拖拽預(yù)覽三個(gè)核心環(huán)節(jié)。贊分享低代碼前端【免費(fèi)下載鏈接】brick-design低代碼框架支持流式布局與自由布局拖拽編排可視化拖拽、隨意嵌套組合、實(shí)時(shí)渲染、實(shí)時(shí)輔助線(xiàn)展示、自由布局支持輔助對(duì)齊、支持自動(dòng)吸附、實(shí)時(shí)組件間距展示、實(shí)時(shí)拖拽排序、狀態(tài)域管理可視化屬性配置、可視化樣式配置、多設(shè)備適配展示支持邏輯渲染、模板字符變量、表達(dá)式、自定義方法、自定義狀態(tài)項(xiàng)目地址https://gitcode.com/gh_mirrors/br/brick-design點(diǎn)擊查看免費(fèi)下載相關(guān)推薦Brick Design拖拽編排進(jìn)階跨組件嵌套與排序技巧Brick Design拖拽編排進(jìn)階跨組件嵌套與排序技巧 Brick Design 是一款強(qiáng)大的 低代碼可視化拖拽編排框架 專(zhuān)為前端開(kāi)發(fā)者和設(shè)計(jì)師打造。通過(guò)低代碼前端Ant Design Blazor Tree 組件拖拽排序?qū)崙?zhàn)Draggable 節(jié)點(diǎn)拖放與數(shù)據(jù)同步解析Ant Design Blazor Tree 組件拖拽排序?qū)崙?zhàn)Draggable 節(jié)點(diǎn)拖放與數(shù)據(jù)同步解析 Ant Design Blazor 的 Tree 組前端UI組件設(shè)計(jì)系統(tǒng)Brick Design核心組件詳解BrickProvider、BrickDesign、BrickTreeBrick Design核心組件詳解BrickProvider、BrickDesign、BrickTree Brick Design是一款強(qiáng)大的低代碼可視化拖低代碼前端上一篇貓抓cat-catch5分鐘快速上手的瀏覽器視頻下載終極指南下一篇Quartz.NET 裁剪發(fā)布與 Native AOT 實(shí)戰(zhàn)指南從 IsAotCompatible 聲明到可運(yùn)行的持久化 JobStore創(chuàng)作聲明：本文部分內(nèi)容由AI輔助生成（AIGC），僅供參考