feat(editor): 添加layer-panel/component-list-panel slot

packages/editor/src/Editor.vue

@@ -6,7 +6,15 @@
 
     <template #sidebar>
       <slot name="sidebar" :editorService="editorService">
-        <sidebar :data="sidebar"></sidebar>
+        <sidebar :data="sidebar">
+          <template #layer-panel>
+            <slot name="layer-panel"></slot>
+          </template>
+
+          <template #component-list-panel>
+            <slot name="component-list-panel"></slot>
+          </template>
+        </sidebar>
       </slot>
     </template>
 
@@ -20,8 +28,8 @@
       </slot>
     </template>
 
-    <template #propsPanel>
-      <slot name="propsPanel">
+    <template #props-panel>
+      <slot name="props-panel">
         <props-panel ref="propsPanel" @mounted="(instance) => $emit('props-panel-mounted', instance)"></props-panel>
       </slot>
     </template>

packages/editor/src/layouts/Framework.vue

@@ -26,7 +26,7 @@
 
         <div class="m-editor-framework-right" :style="`width: ${columnWidth?.right}px`">
           <el-scrollbar>
-            <slot name="propsPanel"></slot>
+            <slot name="props-panel"></slot>
           </el-scrollbar>
         </div>
       </template>

packages/editor/src/layouts/sidebar/ComponentListPanel.vue

@@ -1,5 +1,6 @@
 <template>
   <el-scrollbar>
+    <slot name="component-list-panel"></slot>
     <el-collapse class="ui-component-panel" :model-value="collapseValue">
       <el-input
         prefix-icon="el-icon-search"

packages/editor/src/layouts/sidebar/LayerPanel.vue

@@ -1,5 +1,7 @@
 <template>
   <el-scrollbar class="magic-editor-layer-panel">
+    <slot name="layer-panel"></slot>
+
     <el-input
       class="filterInput"
       size="small"

packages/editor/src/layouts/sidebar/Sidebar.vue

@@ -6,7 +6,15 @@
     type="card"
     tab-position="left"
   >
-    <tab-pane v-for="(item, index) in data.items" :key="index" :data="item"></tab-pane>
+    <tab-pane v-for="(item, index) in data.items" :key="index" :data="item">
+      <template #layer-panel v-if="item === 'layer'">
+        <slot name="layer-panel"></slot>
+      </template>
+
+      <template #component-list-panel v-if="item === 'component-list'">
+        <slot name="component-list-panel"></slot>
+      </template>
+    </tab-pane>
   </el-tabs>
 </template>
 

packages/editor/src/layouts/sidebar/TabPane.vue

@@ -8,6 +8,14 @@
     </template>
 
     <component :is="config.component" v-bind="config.props || {}" v-on="config?.listeners || {}">
+      <template #layer-panel v-if="data === 'layer'">
+        <slot name="layer-panel"></slot>
+      </template>
+
+      <template #component-list-panel v-if="data === 'component-list'">
+        <slot name="component-list-panel"></slot>
+      </template>
+
       <template #layer-node-content="{ data, node }" v-if="config.slots?.layerNodeContent">
         <component :is="config.slots?.layerNodeContent" :data="data" :node="node" />
       </template>