From e901ad4dd00d5e93b42721e4fed6f5ccdee5f8f9 Mon Sep 17 00:00:00 2001
From: roymondchen <roymondchen@tencent.com>
Date: Fri, 8 Jul 2022 17:35:08 +0800
Subject: [PATCH] =?UTF-8?q?feat(editor):=20=E6=B7=BB=E5=8A=A0props-panel-h?=
 =?UTF-8?q?eader=20slot;=E4=BF=AE=E6=94=B9layer-panel,component-list-panel?=
 =?UTF-8?q?=20slot=E5=90=8D=E7=A7=B0=EF=BC=8C=E5=8A=A0=E4=B8=8A-header?=
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/PropsPanel.vue    | 21 ++---
 .../layouts/sidebar/ComponentListPanel.vue    |  3 +-
 .../editor/src/layouts/sidebar/LayerPanel.vue |  2 +-
 .../editor/src/layouts/sidebar/Sidebar.vue    |  8 +-
 .../editor/src/layouts/sidebar/TabPane.vue    | 10 ++-
 runtime/vue2/package-lock.json                | 76 +++++++++----------
 7 files changed, 72 insertions(+), 62 deletions(-)

diff --git a/packages/editor/src/Editor.vue b/packages/editor/src/Editor.vue
index 05d40ee1..d001133a 100644
--- a/packages/editor/src/Editor.vue
+++ b/packages/editor/src/Editor.vue
@@ -7,12 +7,12 @@
     <template #sidebar>
       <slot name="sidebar" :editorService="editorService">
         <sidebar :data="sidebar">
-          <template #layer-panel>
-            <slot name="layer-panel"></slot>
+          <template #layer-panel-header>
+            <slot name="layer-panel-header"></slot>
           </template>
 
-          <template #component-list-panel>
-            <slot name="component-list-panel"></slot>
+          <template #component-list-panel-header>
+            <slot name="component-list-panel-header"></slot>
           </template>
         </sidebar>
       </slot>
@@ -30,7 +30,11 @@
 
     <template #props-panel>
       <slot name="props-panel">
-        <props-panel ref="propsPanel" @mounted="(instance) => $emit('props-panel-mounted', instance)"></props-panel>
+        <props-panel ref="propsPanel" @mounted="(instance) => $emit('props-panel-mounted', instance)">
+          <template #props-panel-header>
+            <slot name="props-panel-header"></slot>
+          </template>
+        </props-panel>
       </slot>
     </template>
 
diff --git a/packages/editor/src/layouts/PropsPanel.vue b/packages/editor/src/layouts/PropsPanel.vue
index 57ed231e..ec9b7bfb 100644
--- a/packages/editor/src/layouts/PropsPanel.vue
+++ b/packages/editor/src/layouts/PropsPanel.vue
@@ -1,13 +1,16 @@
 <template>
-  <m-form
-    :class="`m-editor-props-panel ${propsPanelSize}`"
-    :popper-class="`m-editor-props-panel-popper ${propsPanelSize}`"
-    ref="configForm"
-    :size="propsPanelSize"
-    :init-values="values"
-    :config="curFormConfig"
-    @change="submit"
-  ></m-form>
+  <div class="`m-editor-props-panel">
+    <slot name="props-panel-header"></slot>
+    <m-form
+      :class="`m-editor-props-panel ${propsPanelSize}`"
+      :popper-class="`m-editor-props-panel-popper ${propsPanelSize}`"
+      ref="configForm"
+      :size="propsPanelSize"
+      :init-values="values"
+      :config="curFormConfig"
+      @change="submit"
+    ></m-form>
+  </div>
 </template>
 
 <script lang="ts">
diff --git a/packages/editor/src/layouts/sidebar/ComponentListPanel.vue b/packages/editor/src/layouts/sidebar/ComponentListPanel.vue
index 9ee962e5..a366b521 100644
--- a/packages/editor/src/layouts/sidebar/ComponentListPanel.vue
+++ b/packages/editor/src/layouts/sidebar/ComponentListPanel.vue
@@ -1,6 +1,7 @@
 <template>
   <el-scrollbar>
-    <slot name="component-list-panel"></slot>
+    <slot name="component-list-panel-header"></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 4d68de22..ba5d635d 100644
--- a/packages/editor/src/layouts/sidebar/LayerPanel.vue
+++ b/packages/editor/src/layouts/sidebar/LayerPanel.vue
@@ -1,6 +1,6 @@
 <template>
   <el-scrollbar class="magic-editor-layer-panel">
-    <slot name="layer-panel"></slot>
+    <slot name="layer-panel-header"></slot>
 
     <el-input
       class="filterInput"
diff --git a/packages/editor/src/layouts/sidebar/Sidebar.vue b/packages/editor/src/layouts/sidebar/Sidebar.vue
index 38b78d80..56ae437f 100644
--- a/packages/editor/src/layouts/sidebar/Sidebar.vue
+++ b/packages/editor/src/layouts/sidebar/Sidebar.vue
@@ -7,12 +7,12 @@
     tab-position="left"
   >
     <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 #layer-panel-header v-if="item === 'layer'">
+        <slot name="layer-panel-header"></slot>
       </template>
 
-      <template #component-list-panel v-if="item === 'component-list'">
-        <slot name="component-list-panel"></slot>
+      <template #component-list-panel-header v-if="item === 'component-list'">
+        <slot name="component-list-panel-header"></slot>
       </template>
     </tab-pane>
   </el-tabs>
diff --git a/packages/editor/src/layouts/sidebar/TabPane.vue b/packages/editor/src/layouts/sidebar/TabPane.vue
index 3c7b6256..65379a0b 100644
--- a/packages/editor/src/layouts/sidebar/TabPane.vue
+++ b/packages/editor/src/layouts/sidebar/TabPane.vue
@@ -8,12 +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 #component-list-panel-header v-if="data === 'component-list' || config.slots?.componentListPanelHeader">
+        <slot v-if="data === 'component-list'" name="component-list-panel-header"></slot>
+        <component v-else-if="config.slots?.componentListPanelHeader" :is="config.slots.componentListPanelHeader" />
       </template>
 
-      <template #component-list-panel v-if="data === 'component-list'">
-        <slot name="component-list-panel"></slot>
+      <template #layer-panel-header v-if="data === 'layer' || config.slots?.layerPanelHeader">
+        <slot v-if="data === 'layer'" name="layer-panel-header"></slot>
+        <component v-else-if="config.slots?.layerPanelHeader" :is="config.slots.layerPanelHeader" />
       </template>
 
       <template #layer-node-content="{ data, node }" v-if="config.slots?.layerNodeContent">
diff --git a/runtime/vue2/package-lock.json b/runtime/vue2/package-lock.json
index 8ea88383..b2c3bb61 100644
--- a/runtime/vue2/package-lock.json
+++ b/runtime/vue2/package-lock.json
@@ -1,15 +1,15 @@
 {
   "name": "runtime-vue2",
-  "version": "1.0.3",
+  "version": "1.0.4",
   "lockfileVersion": 2,
   "requires": true,
   "packages": {
     "": {
       "name": "runtime-vue2",
-      "version": "1.0.3",
+      "version": "1.0.4",
       "dependencies": {
-        "@tmagic/schema": "1.0.3",
-        "@tmagic/stage": "1.0.3",
+        "@tmagic/schema": "1.0.4",
+        "@tmagic/stage": "1.0.4",
         "@vue/composition-api": "1.0.5",
         "vue": "^2.6.14"
       },
@@ -846,11 +846,11 @@
       }
     },
     "node_modules/@tmagic/core": {
-      "version": "1.0.3",
-      "resolved": "https://registry.npmjs.org/@tmagic/core/-/core-1.0.3.tgz",
-      "integrity": "sha512-agvOLNxXgLRD1gU/2PpJbqQETkwCakMQMDWYrFcrpgHsBB//x3lMZ75r3dwFkqNLMuoqIXUzhutqUS3e0fq3nw==",
+      "version": "1.0.4",
+      "resolved": "https://registry.npmjs.org/@tmagic/core/-/core-1.0.4.tgz",
+      "integrity": "sha512-8UiC6MRuFxMW8jmERLJsi8d2r4bXKJEbyyGtYj1mlrAYFJPYf4Vv/xPYSjcoSMbD0TmqwUJooZApz3k6gns3qw==",
       "dependencies": {
-        "@tmagic/schema": "1.0.3",
+        "@tmagic/schema": "1.0.4",
         "events": "^3.3.0"
       },
       "engines": {
@@ -858,22 +858,22 @@
       }
     },
     "node_modules/@tmagic/schema": {
-      "version": "1.0.3",
-      "resolved": "https://registry.npmjs.org/@tmagic/schema/-/schema-1.0.3.tgz",
-      "integrity": "sha512-oqc0pVqfedntyA0GWx1WQN2xMYReKqCbdKxIZgpmL68zVpgktjxpmPiq8i0+Xt9b+H086GRbKlYFwuUZjsKYVw==",
+      "version": "1.0.4",
+      "resolved": "https://registry.npmjs.org/@tmagic/schema/-/schema-1.0.4.tgz",
+      "integrity": "sha512-vatKARFKJecQrNlvW4KVYegXUD8ifH4oWgw3HYvt546LlreZdKLFdS3uobdvu5F4FSZ3aDjzJfltNXleNxmmgw==",
       "engines": {
         "node": ">=14"
       }
     },
     "node_modules/@tmagic/stage": {
-      "version": "1.0.3",
-      "resolved": "https://registry.npmjs.org/@tmagic/stage/-/stage-1.0.3.tgz",
-      "integrity": "sha512-dUJJqg7NnvAva4Je0FDJYHAzdfRXQ4wLU/LiHNVCT5jAJx3tDD2xkgYYdN6zH6D5MlHrqFpVK+wzBo9FNb2NPQ==",
+      "version": "1.0.4",
+      "resolved": "https://registry.npmjs.org/@tmagic/stage/-/stage-1.0.4.tgz",
+      "integrity": "sha512-7Neqk0Ca+/uqwA7NumUwNKosTBSiTzeq1479G9OsJ9Gx6a20zpBYNXhI2ljaJSWHCQIgMRciB/NVWrtuAfGbtg==",
       "dependencies": {
         "@scena/guides": "^0.17.0",
-        "@tmagic/core": "1.0.3",
-        "@tmagic/schema": "1.0.3",
-        "@tmagic/utils": "1.0.3",
+        "@tmagic/core": "1.0.4",
+        "@tmagic/schema": "1.0.4",
+        "@tmagic/utils": "1.0.4",
         "events": "^3.3.0",
         "lodash-es": "^4.17.21",
         "moveable": "^0.30.0",
@@ -884,11 +884,11 @@
       }
     },
     "node_modules/@tmagic/utils": {
-      "version": "1.0.3",
-      "resolved": "https://registry.npmjs.org/@tmagic/utils/-/utils-1.0.3.tgz",
-      "integrity": "sha512-xk7D2IxzpJnGy4WmYKlBwJT+UaoWj5GuP4Zr3boui/upphXJf2h4ohg7QmryeQPzZBBsyfEjWifAlH9IdD7QuA==",
+      "version": "1.0.4",
+      "resolved": "https://registry.npmjs.org/@tmagic/utils/-/utils-1.0.4.tgz",
+      "integrity": "sha512-+ggjPMsTXplOAsZ2o2P9mTNbkl8KnXAR9baUN9gJLYZZw7okr4e3fuFLsq60cp2EmQhuES7ONRIvhnA+mzja3g==",
       "dependencies": {
-        "@tmagic/schema": "1.0.3",
+        "@tmagic/schema": "1.0.4",
         "moment": "^2.29.2"
       },
       "engines": {
@@ -3415,28 +3415,28 @@
       }
     },
     "@tmagic/core": {
-      "version": "1.0.3",
-      "resolved": "https://registry.npmjs.org/@tmagic/core/-/core-1.0.3.tgz",
-      "integrity": "sha512-agvOLNxXgLRD1gU/2PpJbqQETkwCakMQMDWYrFcrpgHsBB//x3lMZ75r3dwFkqNLMuoqIXUzhutqUS3e0fq3nw==",
+      "version": "1.0.4",
+      "resolved": "https://registry.npmjs.org/@tmagic/core/-/core-1.0.4.tgz",
+      "integrity": "sha512-8UiC6MRuFxMW8jmERLJsi8d2r4bXKJEbyyGtYj1mlrAYFJPYf4Vv/xPYSjcoSMbD0TmqwUJooZApz3k6gns3qw==",
       "requires": {
-        "@tmagic/schema": "1.0.3",
+        "@tmagic/schema": "1.0.4",
         "events": "^3.3.0"
       }
     },
     "@tmagic/schema": {
-      "version": "1.0.3",
-      "resolved": "https://registry.npmjs.org/@tmagic/schema/-/schema-1.0.3.tgz",
-      "integrity": "sha512-oqc0pVqfedntyA0GWx1WQN2xMYReKqCbdKxIZgpmL68zVpgktjxpmPiq8i0+Xt9b+H086GRbKlYFwuUZjsKYVw=="
+      "version": "1.0.4",
+      "resolved": "https://registry.npmjs.org/@tmagic/schema/-/schema-1.0.4.tgz",
+      "integrity": "sha512-vatKARFKJecQrNlvW4KVYegXUD8ifH4oWgw3HYvt546LlreZdKLFdS3uobdvu5F4FSZ3aDjzJfltNXleNxmmgw=="
     },
     "@tmagic/stage": {
-      "version": "1.0.3",
-      "resolved": "https://registry.npmjs.org/@tmagic/stage/-/stage-1.0.3.tgz",
-      "integrity": "sha512-dUJJqg7NnvAva4Je0FDJYHAzdfRXQ4wLU/LiHNVCT5jAJx3tDD2xkgYYdN6zH6D5MlHrqFpVK+wzBo9FNb2NPQ==",
+      "version": "1.0.4",
+      "resolved": "https://registry.npmjs.org/@tmagic/stage/-/stage-1.0.4.tgz",
+      "integrity": "sha512-7Neqk0Ca+/uqwA7NumUwNKosTBSiTzeq1479G9OsJ9Gx6a20zpBYNXhI2ljaJSWHCQIgMRciB/NVWrtuAfGbtg==",
       "requires": {
         "@scena/guides": "^0.17.0",
-        "@tmagic/core": "1.0.3",
-        "@tmagic/schema": "1.0.3",
-        "@tmagic/utils": "1.0.3",
+        "@tmagic/core": "1.0.4",
+        "@tmagic/schema": "1.0.4",
+        "@tmagic/utils": "1.0.4",
         "events": "^3.3.0",
         "lodash-es": "^4.17.21",
         "moveable": "^0.30.0",
@@ -3444,11 +3444,11 @@
       }
     },
     "@tmagic/utils": {
-      "version": "1.0.3",
-      "resolved": "https://registry.npmjs.org/@tmagic/utils/-/utils-1.0.3.tgz",
-      "integrity": "sha512-xk7D2IxzpJnGy4WmYKlBwJT+UaoWj5GuP4Zr3boui/upphXJf2h4ohg7QmryeQPzZBBsyfEjWifAlH9IdD7QuA==",
+      "version": "1.0.4",
+      "resolved": "https://registry.npmjs.org/@tmagic/utils/-/utils-1.0.4.tgz",
+      "integrity": "sha512-+ggjPMsTXplOAsZ2o2P9mTNbkl8KnXAR9baUN9gJLYZZw7okr4e3fuFLsq60cp2EmQhuES7ONRIvhnA+mzja3g==",
       "requires": {
-        "@tmagic/schema": "1.0.3",
+        "@tmagic/schema": "1.0.4",
         "moment": "^2.29.2"
       }
     },