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