From 49c9e87d6e1c1491d71ce7c804c0d7ccdfad5b4b Mon Sep 17 00:00:00 2001
From: roymondchen <roymondchen@tencent.com>
Date: Thu, 7 Jul 2022 19:42:26 +0800
Subject: [PATCH] =?UTF-8?q?feat(editor):=20=E6=B7=BB=E5=8A=A0layer-panel/c?=
 =?UTF-8?q?omponent-list-panel=20slot?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 packages/editor/src/Editor.vue                     | 14 +++++++++++---
 packages/editor/src/layouts/Framework.vue          |  2 +-
 .../src/layouts/sidebar/ComponentListPanel.vue     |  1 +
 packages/editor/src/layouts/sidebar/LayerPanel.vue |  2 ++
 packages/editor/src/layouts/sidebar/Sidebar.vue    | 10 +++++++++-
 packages/editor/src/layouts/sidebar/TabPane.vue    |  8 ++++++++
 6 files changed, 32 insertions(+), 5 deletions(-)

diff --git a/packages/editor/src/Editor.vue b/packages/editor/src/Editor.vue
index 9d28b893..05d40ee1 100644
--- a/packages/editor/src/Editor.vue
+++ b/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>
diff --git a/packages/editor/src/layouts/Framework.vue b/packages/editor/src/layouts/Framework.vue
index ebe0f66c..0766089d 100644
--- a/packages/editor/src/layouts/Framework.vue
+++ b/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>
diff --git a/packages/editor/src/layouts/sidebar/ComponentListPanel.vue b/packages/editor/src/layouts/sidebar/ComponentListPanel.vue
index cc5ff5ac..9ee962e5 100644
--- a/packages/editor/src/layouts/sidebar/ComponentListPanel.vue
+++ b/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"
diff --git a/packages/editor/src/layouts/sidebar/LayerPanel.vue b/packages/editor/src/layouts/sidebar/LayerPanel.vue
index 69d60578..4d68de22 100644
--- a/packages/editor/src/layouts/sidebar/LayerPanel.vue
+++ b/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"
diff --git a/packages/editor/src/layouts/sidebar/Sidebar.vue b/packages/editor/src/layouts/sidebar/Sidebar.vue
index bb727cf2..38b78d80 100644
--- a/packages/editor/src/layouts/sidebar/Sidebar.vue
+++ b/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>
 
diff --git a/packages/editor/src/layouts/sidebar/TabPane.vue b/packages/editor/src/layouts/sidebar/TabPane.vue
index 91e53171..3c7b6256 100644
--- a/packages/editor/src/layouts/sidebar/TabPane.vue
+++ b/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>