@chamn/engine 0.0.7 → 0.0.9

package/dist/style.css

@@ -1 +1 @@
-@charset "UTF-8";._workbenchContainer_1b5xq_2{width:100%;height:100%;display:flex;flex-direction:column}._workbenchContainer_1b5xq_2 ._topToolBarBox_1b5xq_8{height:64px;width:100%;border-bottom:1px solid rgb(233,233,233);display:flex}._workbenchContainer_1b5xq_2 ._topToolBarBox_1b5xq_8 ._logo_1b5xq_14{height:100%;font-size:20px;display:flex;align-items:center;margin-left:20px;font-weight:bolder}._workbenchContainer_1b5xq_2 ._topToolBarBox_1b5xq_8 ._topToolBarView_1b5xq_22{flex:1}._workbenchContainer_1b5xq_2 ._bodyContent_1b5xq_25{display:flex;width:100%;flex:1;overflow:hidden}._workbenchContainer_1b5xq_2 ._bodyContent_1b5xq_25 ._leftBox_1b5xq_31{position:relative;display:flex;background-color:#fff;z-index:100}._workbenchContainer_1b5xq_2 ._bodyContent_1b5xq_25 ._leftBox_1b5xq_31 ._pluginIconBar_1b5xq_37{width:50px;height:100%;border-right:1px solid rgb(233,233,233)}._workbenchContainer_1b5xq_2 ._bodyContent_1b5xq_25 ._leftBox_1b5xq_31 ._pluginIconBar_1b5xq_37 ._pluginIconItem_1b5xq_42{position:relative;cursor:pointer;width:50px;height:50px;display:flex;align-items:center;justify-content:center;transition:all .1s}._workbenchContainer_1b5xq_2 ._bodyContent_1b5xq_25 ._leftBox_1b5xq_31 ._pluginIconBar_1b5xq_37 ._pluginIconItem_1b5xq_42._active_1b5xq_52 :before,._workbenchContainer_1b5xq_2 ._bodyContent_1b5xq_25 ._leftBox_1b5xq_31 ._pluginIconBar_1b5xq_37 ._pluginIconItem_1b5xq_42:hover :before{transition:all .1s;display:block;content:"";width:2px;height:100%;position:absolute;left:0;top:0}._workbenchContainer_1b5xq_2 ._bodyContent_1b5xq_25 ._leftBox_1b5xq_31 ._pluginIconBar_1b5xq_37 ._pluginIconItem_1b5xq_42._active_1b5xq_52 :before{border-left:4px solid #1677ff!important}._workbenchContainer_1b5xq_2 ._bodyContent_1b5xq_25 ._leftBox_1b5xq_31 ._pluginIconBar_1b5xq_37 ._pluginIconItem_1b5xq_42:hover :before{border-left:4px solid rgba(22,119,255,.3)}._workbenchContainer_1b5xq_2 ._bodyContent_1b5xq_25 ._leftBox_1b5xq_31 ._pluginPanelBoxResizeBox_1b5xq_68{display:flex;flex-direction:column;background-color:#fff;z-index:100;border-right:1px solid rgb(233,233,233)}._workbenchContainer_1b5xq_2 ._bodyContent_1b5xq_25 ._leftBox_1b5xq_31 ._pluginPanelBoxResizeBox_1b5xq_68 ._pluginHeader_1b5xq_75{display:flex;color:#686868;height:30px;margin:10px;overflow:hidden;align-items:center}._workbenchContainer_1b5xq_2 ._bodyContent_1b5xq_25 ._leftBox_1b5xq_31 ._pluginPanelBoxResizeBox_1b5xq_68 ._pluginHeader_1b5xq_75 ._pluginNameText_1b5xq_83{font-size:16px;font-weight:700;margin-right:auto;flex-wrap:nowrap;word-break:keep-all}._workbenchContainer_1b5xq_2 ._bodyContent_1b5xq_25 ._leftBox_1b5xq_31 ._pluginPanelBoxResizeBox_1b5xq_68 ._pluginHeader_1b5xq_75 ._closeBtn_1b5xq_90,._workbenchContainer_1b5xq_2 ._bodyContent_1b5xq_25 ._leftBox_1b5xq_31 ._pluginPanelBoxResizeBox_1b5xq_68 ._pluginHeader_1b5xq_75 ._fixedBtn_1b5xq_91{color:#686868}._workbenchContainer_1b5xq_2 ._bodyContent_1b5xq_25 ._leftBox_1b5xq_31 ._pluginPanelBoxResizeBox_1b5xq_68 ._pluginHeader_1b5xq_75 ._fixedBtn_1b5xq_91>*{transition:all .1s}._workbenchContainer_1b5xq_2 ._bodyContent_1b5xq_25 ._leftBox_1b5xq_31 ._pluginPanelBoxResizeBox_1b5xq_68 ._pluginHeader_1b5xq_75 ._fixedBtn_1b5xq_91>._active_1b5xq_52{transform:rotate(-45deg)}._workbenchContainer_1b5xq_2 ._bodyContent_1b5xq_25 ._leftBox_1b5xq_31 ._pluginPanelBox_1b5xq_68{width:100%;flex:1;background-color:#f8f8ff;overflow:hidden}._workbenchContainer_1b5xq_2 ._bodyContent_1b5xq_25 ._rightResizeBox_1b5xq_106{position:relative}._workbenchContainer_1b5xq_2 ._bodyContent_1b5xq_25 ._rightResizeBox_1b5xq_106 ._arrowCursor_1b5xq_109{cursor:pointer;position:absolute;left:-18px;top:50%;transform:translateY(-50%);z-index:2;background-color:#fff;padding:10px 3px;border-radius:4px 0 0 4px;font-size:12px}._workbenchContainer_1b5xq_2 ._bodyContent_1b5xq_25 ._rightResizeBox_1b5xq_106 ._arrowCursor_1b5xq_109>._active_1b5xq_52{transform:rotate(-180deg)}._workbenchContainer_1b5xq_2 ._bodyContent_1b5xq_25 ._rightResizeBox_1b5xq_106 ._rightBox_1b5xq_124{position:relative;width:100%;height:100%;border-left:1px rgb(233,233,233) solid}._workbenchContainer_1b5xq_2 ._bodyContent_1b5xq_25 ._centerBox_1b5xq_130{display:flex;flex-direction:column;flex:1;overflow:hidden}._workbenchContainer_1b5xq_2 ._bodyContent_1b5xq_25 ._centerBox_1b5xq_130 ._subTopToolbarBox_1b5xq_136{width:100%;height:50px;background-color:#fff}._workbenchContainer_1b5xq_2 ._bodyContent_1b5xq_25 ._centerBox_1b5xq_130 ._canvasBox_1b5xq_141{width:100%;flex:1;overflow:hidden;padding:20px 30px;background-color:#edeff3}._workbenchContainer_1b5xq_2 ._bodyContent_1b5xq_25 ._centerBox_1b5xq_130 ._canvasBox_1b5xq_141 ._scrollBox_1b5xq_148{width:100%;height:100%;box-shadow:0 1px 4px #1f325821}._engineContainer_f3ly9_2{color:#686868;font-size:14px;width:100%;height:100%;overflow:hidden}._engineContainer_f3ly9_2 *{box-sizing:border-box}._container_191p3_2{width:100%;height:100%;overflow:hidden;background-color:#fff;display:flex}._container_191p3_2 .ant-tabs .ant-tabs-tab+.ant-tabs-tab{margin-left:12px}._container_191p3_2 .ant-tabs-content.ant-tabs-content-top{height:100%;overflow:auto}._container_191p3_2 .ant-tabs-tab{padding:6px 0}._container_191p3_2 .ant-tabs-nav{margin-bottom:0}._tabTitle_191p3_23{padding:0 10px;font-size:12px;font-weight:400;text-rendering:optimizeLegibility}._square_1b87f_2{user-select:none;position:relative;flex:33.3% 0}._square_1b87f_2:before{content:"";padding-top:100%;float:left}._square_1b87f_2:after{content:"";display:block;clear:both}._componentItem_1b87f_18{user-select:none;overflow:hidden;position:absolute;width:100%;height:100%;display:flex;flex-direction:column;align-items:center;justify-content:center;border-right:1px solid rgb(233,233,233);border-bottom:1px solid rgb(233,233,233);transition:all .2s}._componentItem_1b87f_18:hover{box-shadow:0 6px 16px #00000026;border-color:transparent;cursor:grab}._componentItem_1b87f_18:active{cursor:grabbing}._iconImg_1b87f_41{width:100%}._iconBox_1b87f_45{width:60%;height:60%;overflow:hidden;display:flex;align-items:center;justify-content:center}._iconText_1b87f_54{font-size:18px;font-weight:bolder;color:#686868}._ListBox_1q7zr_2{display:flex;flex-wrap:wrap}._ListBox_1q7zr_2 .ant-collapse .ant-collapse-content>.ant-collapse-content-box{padding:0}._ListBox_1q7zr_2 .ant-collapse{border:none;background-color:#fff}._ListBox_1q7zr_2 .ant-collapse-header{padding:10px 16px!important}._ListBox_1q7zr_2 .ant-collapse-expand-icon{padding-inline-end:0!important}._ListBox_1q7zr_2 .ant-collapse-item{border-color:#e9e9e9}._collapsePanel_1q7zr_23{display:flex;flex-wrap:wrap}._layoutContainer_1mubg_1{position:relative;width:100%;height:100%;box-sizing:border-box;margin:0;padding:0;overflow:hidden}._elementHighlightBox_1mubg_11{position:absolute;right:0;top:0;padding:10px}._iframeBox_1mubg_18{position:relative}._highlightBox_vl3g6_1{position:absolute;will-change:transform,width,height,left,right;border:2px solid rgb(44,115,253)}._borderDrawBox_vl3g6_7{position:absolute;left:0;height:100%;width:100%;z-index:99;pointer-events:none}._toolBox_vl3g6_16{position:absolute;width:100%;left:0;top:0;box-sizing:border-box;transform:translateY(-100%)}._highlightBox_1dlxo_1{position:absolute;will-change:transform,width,height,left,right}._borderDrawBox_1dlxo_6{position:absolute;left:0;top:0;height:100%;width:100%;z-index:99;pointer-events:none}._toolBox_1dlxo_16{position:absolute;right:0;top:-20px;border:1px solid black;box-sizing:border-box}._horizontal_1dlxo_24._before_1dlxo_24{border-left:2px solid #1890ff}._horizontal_1dlxo_24._after_1dlxo_27{border-right:2px solid #1890ff}._vertical_1dlxo_31._before_1dlxo_24{border-top:2px solid #1890ff}._vertical_1dlxo_31._after_1dlxo_27{border-bottom:2px solid #1890ff}._current_1dlxo_38{border:none!important;background-color:#0084ff6b}._toolBarBox_h5ljb_2{display:flex;margin-bottom:3px;margin-right:-2px;pointer-events:all;float:right}._item_h5ljb_10{background-color:#1677ff;color:#fff;padding:2px 3px;font-size:12px;overflow:hidden;margin-left:1px;cursor:pointer}._layoutSelectBox_h5ljb_20{position:relative;margin-right:1px;height:21px}._layoutSelectBox_h5ljb_20 ._hoverBox_h5ljb_25{transition:all .3s;position:absolute;left:0;top:0;white-space:nowrap;opacity:0;transform:translateY(-100%);pointer-events:none}._layoutSelectBox_h5ljb_20 ._hoverBox_h5ljb_25:hover,._layoutSelectBox_h5ljb_20 ._hoverBox_h5ljb_25._hoverBoxActive_h5ljb_35{opacity:1;pointer-events:all}._layoutSelectBox_h5ljb_20 ._hoverBox_h5ljb_25 ._hoverItem_h5ljb_39{background-color:#1677ff;padding:2px 3px;color:#fff;font-size:12px;margin-bottom:1px;cursor:pointer}._layoutSelectBox_h5ljb_20 ._placeholder_h5ljb_47{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;background-color:#1677ff;color:#fff;padding:2px 5px;font-size:12px;max-width:100px}._hoverTips_k3vn7_2{display:inline-block;color:#1677ff;opacity:.9;font-size:12px;margin-bottom:2px;background-color:#fff;padding:1px 3px;border-radius:2px}._contentBox_13nm8_2{background-color:#fff;height:100%;border-top:1px solid rgb(233,233,233);overflow:auto;position:relative}._contentBox_13nm8_2 *{transition:all .1s}._nodeBox_13nm8_13{cursor:pointer}._nodeBox_13nm8_13 ._toolbarBox_13nm8_16{display:none;padding-right:10px}._nodeBox_13nm8_13 ._iconItem_13nm8_20{margin-right:8px}._nodeContent_13nm8_24:hover ._toolbarBox_13nm8_16{display:flex}._nodeContent_13nm8_24{font-size:14px;cursor:pointer;display:flex;align-items:center}._nodeContent_13nm8_24._selected_13nm8_34{background-color:#dddddd3b}._nodeContent_13nm8_24 ._nodeArrow_13nm8_37{font-size:12px}._nodeContent_13nm8_24 ._nodeArrow_13nm8_37._expanded_13nm8_40{transform-origin:center;transform:rotate(90deg)}._nodeContent_13nm8_24 ._nodeRenderView_13nm8_44{padding:5px 0;flex:1;flex-wrap:nowrap;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}._nodeChildren_13nm8_53{position:relative}._nodeChildren_13nm8_53:before{display:block;position:absolute;left:13px;top:0;content:"";height:100%;width:1px;background-color:#e9e9e9}._nodeChildren_13nm8_53._selected_13nm8_34:before{background-color:#0000ff5c}._dropAnchorLine_13nm8_70{width:100px;height:2px;background-color:#1890ff;position:fixed;z-index:99;pointer-events:none}._arrowSpan_13nm8_79{position:relative}._arrowSpan_13nm8_79:after{content:"";position:absolute;top:0px;right:0;bottom:0;left:-8px}._CFromRenderBox_1vsdm_2{padding:0 20px}._CFromRenderBox_1vsdm_2 .ant-collapse .ant-collapse-content>.ant-collapse-content-box{padding-right:5px}._CFromRenderBox_1vsdm_2 .ant-collapse>.ant-collapse-item:last-child>.ant-collapse-header{padding-right:5px}._dragItem_xzliq_2{cursor:grab;border:1px solid rgb(233,233,233);background-color:#fff;padding:10px;text-align:center;margin-bottom:10px;font-size:12px;border-radius:2px}._sortModalBox_xzliq_13{padding:20px 10px 10px;overflow:auto;max-height:500px}._addOneBtn_xzliq_19{width:100%;font-size:12px!important;color:#686868}._inputAuto_gk0d2_2{border-bottom:1px solid rgba(128,128,128,.23)}._active_gk0d2_6{border-bottom:1px solid rgb(128,177,255)}._fieldBox_nltxm_3{display:flex;flex-wrap:nowrap;flex-shrink:0;flex-grow:1;min-width:250px;align-items:center}._fieldBox_nltxm_3 ._label_nltxm_11{font-size:12px;color:#686868;padding-right:10px;user-select:none;width:60px;max-height:40px;word-break:break-all;text-overflow:ellipsis;overflow:hidden;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2}._fieldBox_nltxm_3 ._tipsLabel_nltxm_25{text-decoration-line:underline;text-decoration-style:dashed;text-underline-offset:2px;cursor:help;word-break:break-all}._fieldBox_nltxm_3 ._content_nltxm_32{flex:1}._switchBtn_k17cr_2{color:#686868;font-size:12px;padding:0 5px 0 10px}._shapeFieldBox_k17cr_8,._collapseHeader_k17cr_9{color:#686868;display:flex;font-size:12px}._collapseHeader_k17cr_9{align-items:center}._CFromRenderBox_13lda_2 .ant-collapse .ant-collapse-content>.ant-collapse-content-box{padding-right:5px}._CFromRenderBox_13lda_2 .ant-collapse>.ant-collapse-item:last-child>.ant-collapse-header{padding:5px 5px 5px 10px;align-items:center}._CFromRenderBox_13lda_2 .ant-collapse>.ant-collapse-item:last-child>.ant-collapse-header .ant-collapse-expand-icon{padding-inline-end:4px}._advanceBox_9o3af_2{padding:0 20px}._advanceBox_9o3af_2 .ant-input-affix-wrapper .ant-input-prefix{margin-inline-end:0}._rightPanelContainer_1p332_2{height:100%;width:100%}._rightPanelContainer_1p332_2 .ant-tabs .ant-tabs-tab+.ant-tabs-tab{margin-left:0}._rightPanelContainer_1p332_2 .ant-tabs-content.ant-tabs-content-top{height:100%;overflow:auto}._rightPanelContainer_1p332_2 .ant-tabs .ant-tabs-tabpane{height:100%}._visualPanelBox_6q12v_2{padding:0 15px 300px}._visualPanelBox_6q12v_2 ._header_6q12v_5{color:#686868;display:flex}.ant-collapse .ant-collapse-item .ant-collapse-header{padding:5px 5px 5px 10px;align-items:center;color:#686868;font-size:12px}.ant-collapse .ant-collapse-item .ant-collapse-header .ant-collapse-expand-icon{padding-inline-end:4px}._cssFieldBox_15f2h_2{display:flex;color:#686868!important}._cssFieldBox_15f2h_2 .ant-select-selector input{color:#686868!important}._cssFieldBox_15f2h_2 ._row_15f2h_9{display:flex;padding-bottom:6px;align-items:center}._cssFieldBox_15f2h_2 ._fieldLabel_15f2h_14{display:inline-block;width:70px;flex-shrink:0;font-size:12px}._cssFieldBox_15f2h_2 ._leftBox_15f2h_20{flex:1}._cssFieldBox_15f2h_2 ._rightBox_15f2h_23{padding-left:10px}._cssFieldBox_15f2h_2 ._inputBox_15f2h_26{flex:1}._cssBox_15f2h_30{overflow-x:hidden}._cssBox_15f2h_30 .ant-collapse-borderless>.ant-collapse-item{border-bottom:1px solid #e4e4e4}._cssBox_15f2h_30 .ant-collapse-borderless>.ant-collapse-item:last-child{border-bottom:none}._cssBox_15f2h_30 .ant-collapse-content-box{padding-bottom:30px!important}._cssFieldBox_4b8an_2{display:flex;align-items:center;color:#686868!important}._cssFieldBox_4b8an_2 .ant-select-selector{padding:0!important}._cssFieldBox_4b8an_2 .ant-select-single .ant-select-selector .ant-select-selection-search{inset-inline-start:0px;inset-inline-end:0px}._cssFieldBox_4b8an_2 .ant-select-selector input{color:#686868!important}._cssFieldBox_4b8an_2 .ant-select-status-error{border-bottom:1px solid red!important}._cssFieldBox_4b8an_2 ._inputAuto_4b8an_20{border-bottom:1px solid rgba(128,128,128,.23)}._cssFieldBox_4b8an_2 ._active_4b8an_23{border-bottom:1px solid rgb(128,177,255)}._cssBox_4b8an_27{overflow-x:hidden}._cssBox_4b8an_27 .ant-collapse-borderless>.ant-collapse-item{border-bottom:1px solid #e4e4e4}._cssBox_4b8an_27 .ant-collapse-borderless>.ant-collapse-item:last-child{border-bottom:none}._cssBox_4b8an_27 .ant-collapse-content-box{padding-bottom:30px!important}._stateTag_5a8hc_2{position:relative}._stateTag_5a8hc_2 ._stateTagClose_5a8hc_5{position:absolute;right:-10px;top:-10px;background-color:#fff;color:#4d4d4d;opacity:0;font-size:20px;transform:scale(.6);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;overflow:hidden;border-radius:10px}._stateTag_5a8hc_2:hover ._stateTagClose_5a8hc_5{opacity:1}._box_tl0hm_2{height:100%;width:100%;padding-right:10px;border-top:1px solid rgb(233,233,233);padding-top:10px;background-color:#fff}
+@charset "UTF-8";._workbenchContainer_15alj_2{width:100%;height:100%;display:flex;flex-direction:column}._workbenchContainer_15alj_2 ._topToolBarBox_15alj_8{height:64px;width:100%;border-bottom:1px solid rgb(233,233,233);display:flex}._workbenchContainer_15alj_2 ._topToolBarBox_15alj_8 ._topToolBarView_15alj_14{flex:1}._workbenchContainer_15alj_2 ._bodyContent_15alj_17{display:flex;width:100%;flex:1;overflow:hidden}._workbenchContainer_15alj_2 ._bodyContent_15alj_17 ._leftBox_15alj_23{position:relative;display:flex;background-color:#fff;z-index:100}._workbenchContainer_15alj_2 ._bodyContent_15alj_17 ._leftBox_15alj_23 ._pluginIconBar_15alj_29{width:50px;height:100%;border-right:1px solid rgb(233,233,233)}._workbenchContainer_15alj_2 ._bodyContent_15alj_17 ._leftBox_15alj_23 ._pluginIconBar_15alj_29 ._pluginIconItem_15alj_34{position:relative;cursor:pointer;width:50px;height:50px;display:flex;align-items:center;justify-content:center;transition:all .1s}._workbenchContainer_15alj_2 ._bodyContent_15alj_17 ._leftBox_15alj_23 ._pluginIconBar_15alj_29 ._pluginIconItem_15alj_34._active_15alj_44 :before,._workbenchContainer_15alj_2 ._bodyContent_15alj_17 ._leftBox_15alj_23 ._pluginIconBar_15alj_29 ._pluginIconItem_15alj_34:hover :before{transition:all .1s;display:block;content:"";width:2px;height:100%;position:absolute;left:0;top:0}._workbenchContainer_15alj_2 ._bodyContent_15alj_17 ._leftBox_15alj_23 ._pluginIconBar_15alj_29 ._pluginIconItem_15alj_34._active_15alj_44 :before{border-left:4px solid #1677ff!important}._workbenchContainer_15alj_2 ._bodyContent_15alj_17 ._leftBox_15alj_23 ._pluginIconBar_15alj_29 ._pluginIconItem_15alj_34:hover :before{border-left:4px solid rgba(22,119,255,.3)}._workbenchContainer_15alj_2 ._bodyContent_15alj_17 ._leftBox_15alj_23 ._pluginPanelBoxResizeBox_15alj_60{display:flex;flex-direction:column;background-color:#fff;z-index:100;border-right:1px solid rgb(233,233,233)}._workbenchContainer_15alj_2 ._bodyContent_15alj_17 ._leftBox_15alj_23 ._pluginPanelBoxResizeBox_15alj_60 ._pluginHeader_15alj_67{display:flex;color:#686868;height:30px;margin:10px;overflow:hidden;align-items:center}._workbenchContainer_15alj_2 ._bodyContent_15alj_17 ._leftBox_15alj_23 ._pluginPanelBoxResizeBox_15alj_60 ._pluginHeader_15alj_67 ._pluginNameText_15alj_75{font-size:16px;font-weight:700;margin-right:auto;flex-wrap:nowrap;word-break:keep-all}._workbenchContainer_15alj_2 ._bodyContent_15alj_17 ._leftBox_15alj_23 ._pluginPanelBoxResizeBox_15alj_60 ._pluginHeader_15alj_67 ._closeBtn_15alj_82,._workbenchContainer_15alj_2 ._bodyContent_15alj_17 ._leftBox_15alj_23 ._pluginPanelBoxResizeBox_15alj_60 ._pluginHeader_15alj_67 ._fixedBtn_15alj_83{color:#686868}._workbenchContainer_15alj_2 ._bodyContent_15alj_17 ._leftBox_15alj_23 ._pluginPanelBoxResizeBox_15alj_60 ._pluginHeader_15alj_67 ._fixedBtn_15alj_83>*{transition:all .1s}._workbenchContainer_15alj_2 ._bodyContent_15alj_17 ._leftBox_15alj_23 ._pluginPanelBoxResizeBox_15alj_60 ._pluginHeader_15alj_67 ._fixedBtn_15alj_83>._active_15alj_44{transform:rotate(-45deg)}._workbenchContainer_15alj_2 ._bodyContent_15alj_17 ._leftBox_15alj_23 ._pluginPanelBox_15alj_60{width:100%;flex:1;background-color:#f8f8ff;overflow:hidden}._workbenchContainer_15alj_2 ._bodyContent_15alj_17 ._rightResizeBox_15alj_98{position:relative}._workbenchContainer_15alj_2 ._bodyContent_15alj_17 ._rightResizeBox_15alj_98 ._arrowCursor_15alj_101{cursor:pointer;position:absolute;left:-18px;top:50%;transform:translateY(-50%);z-index:2;background-color:#fff;padding:10px 3px;border-radius:4px 0 0 4px;font-size:12px}._workbenchContainer_15alj_2 ._bodyContent_15alj_17 ._rightResizeBox_15alj_98 ._arrowCursor_15alj_101>._active_15alj_44{transform:rotate(-180deg)}._workbenchContainer_15alj_2 ._bodyContent_15alj_17 ._rightResizeBox_15alj_98 ._rightBox_15alj_116{position:relative;width:100%;height:100%;border-left:1px rgb(233,233,233) solid}._workbenchContainer_15alj_2 ._bodyContent_15alj_17 ._centerBox_15alj_122{display:flex;flex-direction:column;flex:1;overflow:hidden}._workbenchContainer_15alj_2 ._bodyContent_15alj_17 ._centerBox_15alj_122 ._subTopToolbarBox_15alj_128{width:100%;height:50px;background-color:#fff}._workbenchContainer_15alj_2 ._bodyContent_15alj_17 ._centerBox_15alj_122 ._canvasBox_15alj_133{width:100%;flex:1;overflow:hidden;padding:20px 30px;background-color:#edeff3}._workbenchContainer_15alj_2 ._bodyContent_15alj_17 ._centerBox_15alj_122 ._canvasBox_15alj_133 ._scrollBox_15alj_140{width:100%;height:100%;box-shadow:0 1px 4px #1f325821}._engineContainer_f3ly9_2{color:#686868;font-size:14px;width:100%;height:100%;overflow:hidden}._engineContainer_f3ly9_2 *{box-sizing:border-box}._container_191p3_2{width:100%;height:100%;overflow:hidden;background-color:#fff;display:flex}._container_191p3_2 .ant-tabs .ant-tabs-tab+.ant-tabs-tab{margin-left:12px}._container_191p3_2 .ant-tabs-content.ant-tabs-content-top{height:100%;overflow:auto}._container_191p3_2 .ant-tabs-tab{padding:6px 0}._container_191p3_2 .ant-tabs-nav{margin-bottom:0}._tabTitle_191p3_23{padding:0 10px;font-size:12px;font-weight:400;text-rendering:optimizeLegibility}._square_1b87f_2{user-select:none;position:relative;flex:33.3% 0}._square_1b87f_2:before{content:"";padding-top:100%;float:left}._square_1b87f_2:after{content:"";display:block;clear:both}._componentItem_1b87f_18{user-select:none;overflow:hidden;position:absolute;width:100%;height:100%;display:flex;flex-direction:column;align-items:center;justify-content:center;border-right:1px solid rgb(233,233,233);border-bottom:1px solid rgb(233,233,233);transition:all .2s}._componentItem_1b87f_18:hover{box-shadow:0 6px 16px #00000026;border-color:transparent;cursor:grab}._componentItem_1b87f_18:active{cursor:grabbing}._iconImg_1b87f_41{width:100%}._iconBox_1b87f_45{width:60%;height:60%;overflow:hidden;display:flex;align-items:center;justify-content:center}._iconText_1b87f_54{font-size:18px;font-weight:bolder;color:#686868}._ListBox_1q7zr_2{display:flex;flex-wrap:wrap}._ListBox_1q7zr_2 .ant-collapse .ant-collapse-content>.ant-collapse-content-box{padding:0}._ListBox_1q7zr_2 .ant-collapse{border:none;background-color:#fff}._ListBox_1q7zr_2 .ant-collapse-header{padding:10px 16px!important}._ListBox_1q7zr_2 .ant-collapse-expand-icon{padding-inline-end:0!important}._ListBox_1q7zr_2 .ant-collapse-item{border-color:#e9e9e9}._collapsePanel_1q7zr_23{display:flex;flex-wrap:wrap}._layoutContainer_1mubg_1{position:relative;width:100%;height:100%;box-sizing:border-box;margin:0;padding:0;overflow:hidden}._elementHighlightBox_1mubg_11{position:absolute;right:0;top:0;padding:10px}._iframeBox_1mubg_18{position:relative}._highlightBox_vl3g6_1{position:absolute;will-change:transform,width,height,left,right;border:2px solid rgb(44,115,253)}._borderDrawBox_vl3g6_7{position:absolute;left:0;height:100%;width:100%;z-index:99;pointer-events:none}._toolBox_vl3g6_16{position:absolute;width:100%;left:0;top:0;box-sizing:border-box;transform:translateY(-100%)}._highlightBox_1dlxo_1{position:absolute;will-change:transform,width,height,left,right}._borderDrawBox_1dlxo_6{position:absolute;left:0;top:0;height:100%;width:100%;z-index:99;pointer-events:none}._toolBox_1dlxo_16{position:absolute;right:0;top:-20px;border:1px solid black;box-sizing:border-box}._horizontal_1dlxo_24._before_1dlxo_24{border-left:2px solid #1890ff}._horizontal_1dlxo_24._after_1dlxo_27{border-right:2px solid #1890ff}._vertical_1dlxo_31._before_1dlxo_24{border-top:2px solid #1890ff}._vertical_1dlxo_31._after_1dlxo_27{border-bottom:2px solid #1890ff}._current_1dlxo_38{border:none!important;background-color:#0084ff6b}._toolBarBox_h5ljb_2{display:flex;margin-bottom:3px;margin-right:-2px;pointer-events:all;float:right}._item_h5ljb_10{background-color:#1677ff;color:#fff;padding:2px 3px;font-size:12px;overflow:hidden;margin-left:1px;cursor:pointer}._layoutSelectBox_h5ljb_20{position:relative;margin-right:1px;height:21px}._layoutSelectBox_h5ljb_20 ._hoverBox_h5ljb_25{transition:all .3s;position:absolute;left:0;top:0;white-space:nowrap;opacity:0;transform:translateY(-100%);pointer-events:none}._layoutSelectBox_h5ljb_20 ._hoverBox_h5ljb_25:hover,._layoutSelectBox_h5ljb_20 ._hoverBox_h5ljb_25._hoverBoxActive_h5ljb_35{opacity:1;pointer-events:all}._layoutSelectBox_h5ljb_20 ._hoverBox_h5ljb_25 ._hoverItem_h5ljb_39{background-color:#1677ff;padding:2px 3px;color:#fff;font-size:12px;margin-bottom:1px;cursor:pointer}._layoutSelectBox_h5ljb_20 ._placeholder_h5ljb_47{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;background-color:#1677ff;color:#fff;padding:2px 5px;font-size:12px;max-width:100px}._hoverTips_k3vn7_2{display:inline-block;color:#1677ff;opacity:.9;font-size:12px;margin-bottom:2px;background-color:#fff;padding:1px 3px;border-radius:2px}._contentBox_13nm8_2{background-color:#fff;height:100%;border-top:1px solid rgb(233,233,233);overflow:auto;position:relative}._contentBox_13nm8_2 *{transition:all .1s}._nodeBox_13nm8_13{cursor:pointer}._nodeBox_13nm8_13 ._toolbarBox_13nm8_16{display:none;padding-right:10px}._nodeBox_13nm8_13 ._iconItem_13nm8_20{margin-right:8px}._nodeContent_13nm8_24:hover ._toolbarBox_13nm8_16{display:flex}._nodeContent_13nm8_24{font-size:14px;cursor:pointer;display:flex;align-items:center}._nodeContent_13nm8_24._selected_13nm8_34{background-color:#dddddd3b}._nodeContent_13nm8_24 ._nodeArrow_13nm8_37{font-size:12px}._nodeContent_13nm8_24 ._nodeArrow_13nm8_37._expanded_13nm8_40{transform-origin:center;transform:rotate(90deg)}._nodeContent_13nm8_24 ._nodeRenderView_13nm8_44{padding:5px 0;flex:1;flex-wrap:nowrap;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}._nodeChildren_13nm8_53{position:relative}._nodeChildren_13nm8_53:before{display:block;position:absolute;left:13px;top:0;content:"";height:100%;width:1px;background-color:#e9e9e9}._nodeChildren_13nm8_53._selected_13nm8_34:before{background-color:#0000ff5c}._dropAnchorLine_13nm8_70{width:100px;height:2px;background-color:#1890ff;position:fixed;z-index:99;pointer-events:none}._arrowSpan_13nm8_79{position:relative}._arrowSpan_13nm8_79:after{content:"";position:absolute;top:0px;right:0;bottom:0;left:-8px}._CFromRenderBox_1vsdm_2{padding:0 20px}._CFromRenderBox_1vsdm_2 .ant-collapse .ant-collapse-content>.ant-collapse-content-box{padding-right:5px}._CFromRenderBox_1vsdm_2 .ant-collapse>.ant-collapse-item:last-child>.ant-collapse-header{padding-right:5px}._dragItem_xzliq_2{cursor:grab;border:1px solid rgb(233,233,233);background-color:#fff;padding:10px;text-align:center;margin-bottom:10px;font-size:12px;border-radius:2px}._sortModalBox_xzliq_13{padding:20px 10px 10px;overflow:auto;max-height:500px}._addOneBtn_xzliq_19{width:100%;font-size:12px!important;color:#686868}._inputAuto_gk0d2_2{border-bottom:1px solid rgba(128,128,128,.23)}._active_gk0d2_6{border-bottom:1px solid rgb(128,177,255)}._fieldBox_nltxm_3{display:flex;flex-wrap:nowrap;flex-shrink:0;flex-grow:1;min-width:250px;align-items:center}._fieldBox_nltxm_3 ._label_nltxm_11{font-size:12px;color:#686868;padding-right:10px;user-select:none;width:60px;max-height:40px;word-break:break-all;text-overflow:ellipsis;overflow:hidden;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2}._fieldBox_nltxm_3 ._tipsLabel_nltxm_25{text-decoration-line:underline;text-decoration-style:dashed;text-underline-offset:2px;cursor:help;word-break:break-all}._fieldBox_nltxm_3 ._content_nltxm_32{flex:1}._switchBtn_k17cr_2{color:#686868;font-size:12px;padding:0 5px 0 10px}._shapeFieldBox_k17cr_8,._collapseHeader_k17cr_9{color:#686868;display:flex;font-size:12px}._collapseHeader_k17cr_9{align-items:center}._CFromRenderBox_13lda_2 .ant-collapse .ant-collapse-content>.ant-collapse-content-box{padding-right:5px}._CFromRenderBox_13lda_2 .ant-collapse>.ant-collapse-item:last-child>.ant-collapse-header{padding:5px 5px 5px 10px;align-items:center}._CFromRenderBox_13lda_2 .ant-collapse>.ant-collapse-item:last-child>.ant-collapse-header .ant-collapse-expand-icon{padding-inline-end:4px}._advanceBox_9o3af_2{padding:0 20px}._advanceBox_9o3af_2 .ant-input-affix-wrapper .ant-input-prefix{margin-inline-end:0}._rightPanelContainer_1p332_2{height:100%;width:100%}._rightPanelContainer_1p332_2 .ant-tabs .ant-tabs-tab+.ant-tabs-tab{margin-left:0}._rightPanelContainer_1p332_2 .ant-tabs-content.ant-tabs-content-top{height:100%;overflow:auto}._rightPanelContainer_1p332_2 .ant-tabs .ant-tabs-tabpane{height:100%}._visualPanelBox_6q12v_2{padding:0 15px 300px}._visualPanelBox_6q12v_2 ._header_6q12v_5{color:#686868;display:flex}.ant-collapse .ant-collapse-item .ant-collapse-header{padding:5px 5px 5px 10px;align-items:center;color:#686868;font-size:12px}.ant-collapse .ant-collapse-item .ant-collapse-header .ant-collapse-expand-icon{padding-inline-end:4px}._cssFieldBox_15f2h_2{display:flex;color:#686868!important}._cssFieldBox_15f2h_2 .ant-select-selector input{color:#686868!important}._cssFieldBox_15f2h_2 ._row_15f2h_9{display:flex;padding-bottom:6px;align-items:center}._cssFieldBox_15f2h_2 ._fieldLabel_15f2h_14{display:inline-block;width:70px;flex-shrink:0;font-size:12px}._cssFieldBox_15f2h_2 ._leftBox_15f2h_20{flex:1}._cssFieldBox_15f2h_2 ._rightBox_15f2h_23{padding-left:10px}._cssFieldBox_15f2h_2 ._inputBox_15f2h_26{flex:1}._cssBox_15f2h_30{overflow-x:hidden}._cssBox_15f2h_30 .ant-collapse-borderless>.ant-collapse-item{border-bottom:1px solid #e4e4e4}._cssBox_15f2h_30 .ant-collapse-borderless>.ant-collapse-item:last-child{border-bottom:none}._cssBox_15f2h_30 .ant-collapse-content-box{padding-bottom:30px!important}._cssFieldBox_4b8an_2{display:flex;align-items:center;color:#686868!important}._cssFieldBox_4b8an_2 .ant-select-selector{padding:0!important}._cssFieldBox_4b8an_2 .ant-select-single .ant-select-selector .ant-select-selection-search{inset-inline-start:0px;inset-inline-end:0px}._cssFieldBox_4b8an_2 .ant-select-selector input{color:#686868!important}._cssFieldBox_4b8an_2 .ant-select-status-error{border-bottom:1px solid red!important}._cssFieldBox_4b8an_2 ._inputAuto_4b8an_20{border-bottom:1px solid rgba(128,128,128,.23)}._cssFieldBox_4b8an_2 ._active_4b8an_23{border-bottom:1px solid rgb(128,177,255)}._cssBox_4b8an_27{overflow-x:hidden}._cssBox_4b8an_27 .ant-collapse-borderless>.ant-collapse-item{border-bottom:1px solid #e4e4e4}._cssBox_4b8an_27 .ant-collapse-borderless>.ant-collapse-item:last-child{border-bottom:none}._cssBox_4b8an_27 .ant-collapse-content-box{padding-bottom:30px!important}._stateTag_5a8hc_2{position:relative}._stateTag_5a8hc_2 ._stateTagClose_5a8hc_5{position:absolute;right:-10px;top:-10px;background-color:#fff;color:#4d4d4d;opacity:0;font-size:20px;transform:scale(.6);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;overflow:hidden;border-radius:10px}._stateTag_5a8hc_2:hover ._stateTagClose_5a8hc_5{opacity:1}._box_tl0hm_2{height:100%;width:100%;padding-right:10px;border-top:1px solid rgb(233,233,233);padding-top:10px;background-color:#fff}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@chamn/engine",
-  "version": "0.0.7",
+  "version": "0.0.9",
   "main": "dist/index.cjs.js",
   "module": "dist/index.es.js",
   "types": "dist/index.d.ts",
@@ -18,10 +18,11 @@
   ],
   "scripts": {
     "start": "npm run build:render && build-script",
-    "build": "build-script --build",
+    "build": "cross-env BUILD_TYPE=PKG build-script --build",
+    "build:analyze": "cross-env BUILD_TYPE=PKG  build-script --build --analyze",
     "build:app": "npm run build:render && export NODE_OPTIONS=--max-old-space-size=32768 && cross-env BUILD_TYPE=APP build-script --build",
     "build:render": "cross-env BUILD_TYPE=Render build-script --build",
-    "build:app:analyze": "cross-env BUILD_TYPE=APP ANALYZE=1 build-script --build",
+    "build:app:analyze": "cross-env BUILD_TYPE=APP build-script --build --analyze",
     "lint": "eslint --ext .tsx,.ts src/",
     "prettier": "prettier --write ./src",
     "test": "jest",
@@ -30,9 +31,9 @@
   },
   "dependencies": {
     "@ant-design/icons": "^4.8.0",
-    "@chamn/layout": "0.0.7",
-    "@chamn/model": "0.0.7",
-    "@chamn/render": "0.0.7",
+    "@chamn/layout": "0.0.9",
+    "@chamn/model": "0.0.9",
+    "@chamn/render": "0.0.9",
     "@dnd-kit/core": "^6.0.7",
     "@dnd-kit/modifiers": "^6.0.1",
     "@dnd-kit/sortable": "^7.0.2",
@@ -51,8 +52,8 @@
   },
   "devDependencies": {
     "@babel/core": "^7.21.0",
-    "@chamn/build-script": "0.0.7",
-    "@chamn/demo-page": "0.0.7",
+    "@chamn/build-script": "0.0.9",
+    "@chamn/demo-page": "0.0.9",
     "@storybook/addon-actions": "^6.5.16",
     "@storybook/addon-essentials": "^6.5.16",
     "@storybook/addon-interactions": "^6.5.16",
@@ -74,5 +75,5 @@
     "vite-plugin-monaco-editor": "^1.1.0"
   },
   "config": {},
-  "gitHead": "0c7375f745549dc8f9903c725a209165907a7833"
+  "gitHead": "f073439ea704830a6f62146c916c2f0348c2e531"
 }

package/public/component/Workbench/style.module.scss.d.ts

@@ -2,7 +2,6 @@ import globalClassNames from '../../style.d';
 declare const classNames: typeof globalClassNames & {
   readonly workbenchContainer: 'workbenchContainer';
   readonly topToolBarBox: 'topToolBarBox';
-  readonly logo: 'logo';
   readonly topToolBarView: 'topToolBarView';
   readonly bodyContent: 'bodyContent';
   readonly leftBox: 'leftBox';

package/src/_dev_/index.css

@@ -10,3 +10,13 @@ body {
   margin: 0;
   padding: 0;
 }
+
+.logo {
+  height: 100%;
+  font-size: 20px;
+  display: flex;
+  align-items: center;
+  margin-left: 20px;
+  font-weight: bolder;
+  margin-right: auto;
+}

package/src/_dev_/page/Editor/index.tsx

@@ -1,4 +1,4 @@
-import { BasePage, BasePageBClient, EmptyPage, Material } from '@chamn/demo-page';
+import { BasePage, Material } from '@chamn/demo-page';
 import { Button, message, Modal } from 'antd';
 import React, { useCallback, useEffect, useState } from 'react';
 import ReactDOM from 'react-dom';
@@ -8,86 +8,14 @@ import '../../index.css';
 import { DEFAULT_PLUGIN_LIST } from '../../../plugins';
 import { DesignerExports } from '../../../plugins/Designer';
 import { DisplaySourceSchema } from '../../../plugins/DisplaySourceSchema';
-import { AssetPackage } from '@chamn/model';
 import { InnerComponentMeta } from '../../../material/innerMaterial';
 import { RollbackOutlined } from '@ant-design/icons';
-import { collectVariable, flatObject, LayoutPropsType } from '@chamn/layout';
 
 const win = window as any;
 win.React = React;
 win.ReactDOM = ReactDOM;
 win.ReactDOMClient = ReactDOMClient;
 
-const beforeInitRender: LayoutPropsType['beforeInitRender'] = async ({ iframe }) => {
-  const subWin = iframe.getWindow();
-  if (!subWin) {
-    return;
-  }
-  subWin.React = React;
-  (subWin as any).ReactDOM = ReactDOM;
-  (subWin as any).ReactDOMClient = ReactDOMClient;
-};
-
-const customRender: LayoutPropsType['customRender'] = async ({
-  iframe: iframeContainer,
-  assets,
-  page,
-  pageModel,
-  ready,
-}) => {
-  await iframeContainer.injectJS('./render.umd.js');
-  const iframeWindow = iframeContainer.getWindow()!;
-  const iframeDoc = iframeContainer.getDocument()!;
-  const IframeReact = iframeWindow.React!;
-  const IframeReactDOM = iframeWindow.ReactDOMClient!;
-  const CRender = iframeWindow.CRender!;
-
-  // 注入组件物料资源
-  const assetLoader = new CRender.AssetLoader(assets, {
-    window: iframeContainer.getWindow()!,
-  });
-  assetLoader
-    .onSuccess(() => {
-      // 从子窗口获取物料对象
-      const componentCollection = collectVariable(assets, iframeWindow);
-      const components = flatObject(componentCollection);
-
-      const App = IframeReact?.createElement(CRender.DesignRender, {
-        adapter: CRender?.ReactAdapter,
-        page: page,
-        pageModel: pageModel,
-        components,
-        onMount: (designRenderInstance) => {
-          ready(designRenderInstance);
-        },
-      });
-
-      IframeReactDOM.createRoot(iframeDoc.getElementById('app')!).render(App);
-    })
-    .onError(() => {
-      console.log('资源加载出粗');
-    })
-    .load();
-};
-
-const assets: AssetPackage[] = [
-  {
-    package: 'antd',
-    globalName: 'antd',
-    resources: [
-      {
-        src: 'https://cdn.bootcdn.net/ajax/libs/antd/5.1.2/reset.css',
-      },
-      {
-        src: 'https://cdn.bootcdn.net/ajax/libs/dayjs/1.11.7/dayjs.min.js',
-      },
-      {
-        src: 'https://cdn.bootcdn.net/ajax/libs/antd/5.1.2/antd.js',
-      },
-    ],
-  },
-];
-
 const assetPackagesList = [
   {
     package: '@chamn/mock-material',
@@ -123,14 +51,10 @@ export const App = () => {
       setTimeout(() => {
         const designerExports = designer?.exports as DesignerExports;
         console.log('to reload');
-        designerExports.reload({
-          assets,
-        });
+        designerExports.reload();
       }, 0);
     };
 
-    reloadPage();
-
     const workbench = ctx.engine.getWorkbench();
 
     workbench?.replaceTopBarView(
@@ -144,6 +68,10 @@ export const App = () => {
           paddingRight: '10px',
         }}
       >
+        <div className="logo">Chameleon EG</div>
+        <a target="_blank" href="https://hlerenow.github.io/chameleon/documents/" rel="noreferrer">
+          <Button style={{ marginRight: '10px' }}>Documents </Button>
+        </a>
         <a target="_blank" href="https://github.com/hlerenow/chameleon" rel="noreferrer">
           <Button style={{ marginRight: '10px' }}>Github </Button>
         </a>
@@ -255,21 +183,16 @@ export const App = () => {
   if (!ready) {
     return <>loading...</>;
   }
+
   return (
     <Engine
       plugins={DEFAULT_PLUGIN_LIST}
       schema={page as any}
+      // 传入组件物料
       material={[...InnerComponentMeta, ...Material]}
-      assets={[]}
+      // 船队组件物料对应的 js 运行库，只能使用 umd 模式的 js
       assetPackagesList={assetPackagesList}
       onReady={onReady}
-      beforePluginRun={({ pluginManager }) => {
-        pluginManager.customPlugin('Designer', (pluginInstance) => {
-          pluginInstance.ctx.config.beforeInitRender = beforeInitRender;
-          pluginInstance.ctx.config.customRender = customRender;
-          return pluginInstance;
-        });
-      }}
     />
   );
 };

package/src/_dev_/page/Editor/indexCustom.tsx

@@ -0,0 +1,274 @@
+import { BasePage, BasePageBClient, EmptyPage, Material } from '@chamn/demo-page';
+import { Button, message, Modal } from 'antd';
+import React, { useCallback, useEffect, useState } from 'react';
+import ReactDOM from 'react-dom';
+import ReactDOMClient from 'react-dom/client';
+import { Engine, EnginContext } from '../../..';
+import '../../index.css';
+import { DEFAULT_PLUGIN_LIST } from '../../../plugins';
+import { DesignerExports } from '../../../plugins/Designer';
+import { DisplaySourceSchema } from '../../../plugins/DisplaySourceSchema';
+import { AssetPackage } from '@chamn/model';
+import { InnerComponentMeta } from '../../../material/innerMaterial';
+import { RollbackOutlined } from '@ant-design/icons';
+import { collectVariable, flatObject, LayoutPropsType } from '@chamn/layout';
+
+const win = window as any;
+win.React = React;
+win.ReactDOM = ReactDOM;
+win.ReactDOMClient = ReactDOMClient;
+
+const beforeInitRender: LayoutPropsType['beforeInitRender'] = async ({ iframe }) => {
+  const subWin = iframe.getWindow();
+  if (!subWin) {
+    return;
+  }
+  subWin.React = React;
+  (subWin as any).ReactDOM = ReactDOM;
+  (subWin as any).ReactDOMClient = ReactDOMClient;
+};
+
+const customRender: LayoutPropsType['customRender'] = async ({
+  iframe: iframeContainer,
+  assets,
+  page,
+  pageModel,
+  ready,
+}) => {
+  await iframeContainer.injectJS('./render.umd.js');
+  const iframeWindow = iframeContainer.getWindow()!;
+  const iframeDoc = iframeContainer.getDocument()!;
+  const IframeReact = iframeWindow.React!;
+  const IframeReactDOM = iframeWindow.ReactDOMClient!;
+  const CRender = iframeWindow.CRender!;
+
+  // 注入组件物料资源
+  const assetLoader = new CRender.AssetLoader(assets, {
+    window: iframeContainer.getWindow()!,
+  });
+  assetLoader
+    .onSuccess(() => {
+      // 从子窗口获取物料对象
+      const componentCollection = collectVariable(assets, iframeWindow);
+      const components = flatObject(componentCollection);
+
+      const App = IframeReact?.createElement(CRender.DesignRender, {
+        adapter: CRender?.ReactAdapter,
+        page: page,
+        pageModel: pageModel,
+        components,
+        onMount: (designRenderInstance) => {
+          ready(designRenderInstance);
+        },
+      });
+
+      IframeReactDOM.createRoot(iframeDoc.getElementById('app')!).render(App);
+    })
+    .onError(() => {
+      console.log('资源加载出粗');
+    })
+    .load();
+};
+
+const assets: AssetPackage[] = [
+  {
+    package: 'antd',
+    globalName: 'antd',
+    resources: [
+      {
+        src: 'https://cdn.bootcdn.net/ajax/libs/antd/5.1.2/reset.css',
+      },
+      {
+        src: 'https://cdn.bootcdn.net/ajax/libs/dayjs/1.11.7/dayjs.min.js',
+      },
+      {
+        src: 'https://cdn.bootcdn.net/ajax/libs/antd/5.1.2/antd.js',
+      },
+    ],
+  },
+];
+
+const assetPackagesList = [
+  {
+    package: '@chamn/mock-material',
+    globalName: 'antd',
+    resources: [
+      {
+        src: 'https://cdn.bootcdn.net/ajax/libs/antd/5.1.2/reset.css',
+      },
+      {
+        src: 'https://cdn.bootcdn.net/ajax/libs/dayjs/1.11.7/dayjs.min.js',
+      },
+      {
+        src: 'https://cdn.bootcdn.net/ajax/libs/antd/5.1.2/antd.js',
+      },
+    ],
+  },
+];
+
+export const App = () => {
+  const [ready, setReady] = useState(false);
+  const [page, setPage] = useState(BasePage);
+
+  useEffect(() => {
+    const localPage = localStorage.getItem('pageSchema');
+    if (localPage) {
+      setPage(JSON.parse(localPage));
+    }
+    setReady(true);
+  }, []);
+  const onReady = useCallback(async (ctx: EnginContext) => {
+    const designer = await ctx.pluginManager.onPluginReadyOk('Designer');
+    const reloadPage = async () => {
+      setTimeout(() => {
+        const designerExports = designer?.exports as DesignerExports;
+        console.log('to reload');
+        designerExports.reload({
+          assets,
+        });
+      }, 0);
+    };
+
+    reloadPage();
+
+    const workbench = ctx.engine.getWorkbench();
+
+    workbench?.replaceTopBarView(
+      <div
+        style={{
+          width: '100%',
+          height: '100%',
+          display: 'flex',
+          alignItems: 'center',
+          justifyContent: 'flex-end',
+          paddingRight: '10px',
+        }}
+      >
+        <a target="_blank" href="https://github.com/hlerenow/chameleon" rel="noreferrer">
+          <Button style={{ marginRight: '10px' }}>Github </Button>
+        </a>
+
+        <Button
+          style={{ marginRight: '10px' }}
+          onClick={async () => {
+            const res = await ctx.pluginManager.get('History');
+            res?.exports.preStep();
+          }}
+        >
+          <RollbackOutlined />
+        </Button>
+        <Button
+          style={{ marginRight: '10px' }}
+          onClick={async () => {
+            const res = await ctx.pluginManager.get('History');
+            res?.exports.nextStep();
+          }}
+        >
+          <RollbackOutlined
+            style={{
+              transform: 'rotateY(180deg)',
+            }}
+          />
+        </Button>
+
+        <DisplaySourceSchema pageModel={ctx.engine.pageModel} engineCtx={ctx}>
+          <Button style={{ marginRight: '10px' }}>Source Code</Button>
+        </DisplaySourceSchema>
+
+        <Button
+          style={{ marginRight: '10px' }}
+          onClick={() => {
+            reloadPage();
+          }}
+        >
+          Refresh Page
+        </Button>
+        <Button
+          style={{ marginRight: '10px' }}
+          onClick={() => {
+            let src = '/#/preview';
+            if (location.href.includes('hlerenow')) {
+              src = '/chameleon/#/preview';
+            }
+
+            Modal.info({
+              closable: true,
+              icon: null,
+              width: 'calc(100vw - 100px)',
+              centered: true,
+              title: (
+                <div>
+                  Preview
+                  <Button
+                    size="small"
+                    style={{
+                      float: 'right',
+                      marginRight: '30px',
+                    }}
+                    onClick={() => {
+                      window.open(src);
+                    }}
+                  >
+                    Open in new window
+                  </Button>
+                </div>
+              ),
+              content: (
+                <div
+                  style={{
+                    width: '100%',
+                    height: 'calc(100vh - 200px)',
+                  }}
+                >
+                  <iframe
+                    style={{
+                      border: '1px solid #e7e7e7',
+                      width: '100%',
+                      height: '100%',
+                      borderRadius: '4px',
+                      overflow: 'hidden',
+                    }}
+                    src={src}
+                  />
+                </div>
+              ),
+              footer: null,
+            });
+          }}
+        >
+          Preview
+        </Button>
+        <Button
+          type="primary"
+          onClick={() => {
+            const newPage = ctx.engine.pageModel.export();
+            localStorage.setItem('pageSchema', JSON.stringify(newPage));
+            message.success('Save successfully');
+          }}
+        >
+          Save
+        </Button>
+      </div>
+    );
+  }, []);
+
+  if (!ready) {
+    return <>loading...</>;
+  }
+  return (
+    <Engine
+      plugins={DEFAULT_PLUGIN_LIST}
+      schema={page as any}
+      material={[...InnerComponentMeta, ...Material]}
+      assetPackagesList={assetPackagesList}
+      onReady={onReady}
+      beforePluginRun={({ pluginManager }) => {
+        pluginManager.customPlugin('Designer', (pluginInstance) => {
+          pluginInstance.ctx.config.beforeInitRender = beforeInitRender;
+          pluginInstance.ctx.config.customRender = customRender;
+          return pluginInstance;
+        });
+      }}
+    />
+  );
+};

package/src/_dev_/page/Preview/index.tsx

@@ -1,24 +1,56 @@
+import React from 'react';
 import { useEffect, useState } from 'react';
-import { ReactAdapter, Render, useRender } from '@chamn/render';
-import * as components from 'antd';
+import { ReactAdapter, Render, useRender, AssetLoader, collectVariable, flatObject } from '@chamn/render';
+import { AssetPackage, CPageDataType } from '@chamn/model';
+
+const loadAssets = async (assets: AssetPackage[]) => {
+  // 注入组件物料资源
+  const assetLoader = new AssetLoader(assets);
+  try {
+    await assetLoader.load();
+    // 从子窗口获取物料对象
+    const componentCollection = collectVariable(assets, window);
+    const components = flatObject(componentCollection);
+    return components;
+  } catch (e) {
+    return null;
+  }
+};
 
 export const Preview = () => {
-  const [page, setPage] = useState();
+  const [page, setPage] = useState<CPageDataType>();
   const renderHandle = useRender();
   const [loading, setLoading] = useState(true);
+  const [pageComponents, setPageComponents] = useState({});
+  const loadPageAssets = async (assets: AssetPackage[]) => {
+    const components = await loadAssets(assets);
+    if (components) {
+      setPageComponents(components);
+      setLoading(false);
+    }
+  };
   useEffect(() => {
     const localPage = localStorage.getItem('pageSchema');
     if (localPage) {
-      setPage(JSON.parse(localPage));
-      setLoading(false);
+      const page: CPageDataType = JSON.parse(localPage);
+      setPage(page);
+      loadPageAssets(page.assets || []);
     }
   }, []);
+
   if (loading) {
     return <>Not find page info on local, please ensure you save it on editor</>;
   }
   return (
     <div className="App" style={{ overflow: 'auto', height: '100%' }}>
-      <Render page={page} components={components} render={renderHandle as any} adapter={ReactAdapter} />
+      <Render
+        page={page}
+        components={{
+          ...pageComponents,
+        }}
+        render={renderHandle}
+        adapter={ReactAdapter}
+      />
     </div>
   );
 };

package/src/_dev_/router.tsx

@@ -1,4 +1,3 @@
-import React from 'react';
 import { createHashRouter } from 'react-router-dom';
 import { App } from './page/Editor';
 import { Preview } from './page/Preview';

package/src/component/Workbench/index.tsx

@@ -5,7 +5,6 @@ import { Button } from 'antd';
 import { CloseOutlined, DoubleRightOutlined, PushpinOutlined } from '@ant-design/icons';
 import clsx from 'clsx';
 import mitt, { Emitter } from 'mitt';
-import { CNode } from '@chamn/model';
 import { waitReactUpdate } from '../../utils';
 
 export interface PluginContext {
@@ -234,7 +233,6 @@ export class Workbench extends React.Component<WorkbenchPropsType, WorkbenchStat
     return (
       <div className={styles.workbenchContainer}>
         <div className={styles.topToolBarBox}>
-          <div className={styles.logo}>Chameleon EG</div>
           <div className={styles.topToolBarView}>{topToolBarView}</div>
         </div>
         <div className={styles.bodyContent}>

package/src/component/Workbench/style.module.scss

@@ -10,14 +10,6 @@
     border-bottom: 1px solid $borderColor;
     display: flex;
 
-    .logo {
-      height: 100%;
-      font-size: 20px;
-      display: flex;
-      align-items: center;
-      margin-left: 20px;
-      font-weight: bolder;
-    }
     .topToolBarView {
       flex: 1;
     }

package/src/component/Workbench/style.module.scss.d.ts

@@ -2,7 +2,6 @@ import globalClassNames from '../../style.d';
 declare const classNames: typeof globalClassNames & {
   readonly workbenchContainer: 'workbenchContainer';
   readonly topToolBarBox: 'topToolBarBox';
-  readonly logo: 'logo';
   readonly topToolBarView: 'topToolBarView';
   readonly bodyContent: 'bodyContent';
   readonly leftBox: 'leftBox';