From 0bbf7c564394a56bb6c99572240bba23b4e2919d Mon Sep 17 00:00:00 2001
From: roymondchen <roymondchen@tencent.com>
Date: Thu, 25 Jul 2024 17:49:40 +0800
Subject: [PATCH] =?UTF-8?q?feat(editor):=20=E6=B7=BB=E5=8A=A0component-lis?=
 =?UTF-8?q?t=20slot=EF=BC=8C=E7=94=A8=E4=BA=8E=E8=87=AA=E5=AE=9A=E4=B9=89?=
 =?UTF-8?q?=E7=BB=84=E4=BB=B6=E5=88=97=E8=A1=A8?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

re #621
---
 packages/editor/src/Editor.vue                |  4 ++
 .../layouts/sidebar/ComponentListPanel.vue    | 57 ++++++++++---------
 .../editor/src/layouts/sidebar/Sidebar.vue    | 12 ++++
 packages/editor/src/type.ts                   |  1 +
 4 files changed, 47 insertions(+), 27 deletions(-)

diff --git a/packages/editor/src/Editor.vue b/packages/editor/src/Editor.vue
index 15c34a36..47fa237c 100644
--- a/packages/editor/src/Editor.vue
+++ b/packages/editor/src/Editor.vue
@@ -33,6 +33,10 @@
             <slot name="layer-node-tool" :data="data"></slot>
           </template>
 
+          <template #component-list="{ componentGroupList }">
+            <slot name="component-list" :component-group-list="componentGroupList"></slot>
+          </template>
+
           <template #component-list-panel-header>
             <slot name="component-list-panel-header"></slot>
           </template>
diff --git a/packages/editor/src/layouts/sidebar/ComponentListPanel.vue b/packages/editor/src/layouts/sidebar/ComponentListPanel.vue
index db899a14..33cc2b9f 100644
--- a/packages/editor/src/layouts/sidebar/ComponentListPanel.vue
+++ b/packages/editor/src/layouts/sidebar/ComponentListPanel.vue
@@ -2,31 +2,34 @@
   <TMagicScrollbar>
     <slot name="component-list-panel-header"></slot>
 
-    <TMagicCollapse class="ui-component-panel" :model-value="collapseValue">
-      <SearchInput @search="filterTextChangeHandler"></SearchInput>
-      <template v-for="(group, index) in list">
-        <TMagicCollapseItem v-if="group.items && group.items.length" :key="index" :name="`${index}`">
-          <template #title><MIcon :icon="Grid"></MIcon>{{ group.title }}</template>
-          <div
-            v-for="item in group.items"
-            class="component-item"
-            draggable="true"
-            :key="item.type"
-            @click="appendComponent(item)"
-            @dragstart="dragstartHandler(item, $event)"
-            @dragend="dragendHandler"
-            @drag="dragHandler"
-          >
-            <slot name="component-list-item" :component="item">
-              <TMagicTooltip placement="right" :disabled="!Boolean(item.desc)" :content="item.desc">
-                <MIcon :icon="item.icon"></MIcon>
-              </TMagicTooltip>
-              <span :title="item.text">{{ item.text }}</span>
-            </slot>
-          </div>
-        </TMagicCollapseItem>
-      </template>
-    </TMagicCollapse>
+    <SearchInput @search="filterTextChangeHandler"></SearchInput>
+
+    <slot name="component-list" :component-group-list="list">
+      <TMagicCollapse class="ui-component-panel" :model-value="collapseValue">
+        <template v-for="(group, index) in list">
+          <TMagicCollapseItem v-if="group.items && group.items.length" :key="index" :name="`${index}`">
+            <template #title><MIcon :icon="Grid"></MIcon>{{ group.title }}</template>
+            <div
+              v-for="item in group.items"
+              class="component-item"
+              draggable="true"
+              :key="item.type"
+              @click="appendComponent(item)"
+              @dragstart="dragstartHandler(item, $event)"
+              @dragend="dragendHandler"
+              @drag="dragHandler"
+            >
+              <slot name="component-list-item" :component="item">
+                <TMagicTooltip placement="right" :disabled="!Boolean(item.desc)" :content="item.desc">
+                  <MIcon :icon="item.icon"></MIcon>
+                </TMagicTooltip>
+                <span :title="item.text">{{ item.text }}</span>
+              </slot>
+            </div>
+          </TMagicCollapseItem>
+        </template>
+      </TMagicCollapse>
+    </slot>
   </TMagicScrollbar>
 </template>
 
@@ -65,8 +68,8 @@ const services = inject<Services>('services');
 const stageOptions = inject<StageOptions>('stageOptions');
 
 const stage = computed(() => services?.editorService.get('stage'));
-const list = computed(() =>
-  services?.componentListService.getList().map((group: ComponentGroup) => ({
+const list = computed<ComponentGroup[]>(() =>
+  (services?.componentListService.getList() || []).map((group: ComponentGroup) => ({
     ...group,
     items: group.items.filter((item: ComponentItem) => item.text.includes(searchText.value)),
   })),
diff --git a/packages/editor/src/layouts/sidebar/Sidebar.vue b/packages/editor/src/layouts/sidebar/Sidebar.vue
index c6c6675e..581c7968 100644
--- a/packages/editor/src/layouts/sidebar/Sidebar.vue
+++ b/packages/editor/src/layouts/sidebar/Sidebar.vue
@@ -29,6 +29,18 @@
         v-bind="config.props || {}"
         v-on="config?.listeners || {}"
       >
+        <template
+          #component-list="{ componentGroupList }"
+          v-if="config.$key === 'component-list' || config.slots?.componentList"
+        >
+          <slot
+            v-if="config.$key === 'component-list'"
+            name="component-list"
+            :component-group-list="componentGroupList"
+          ></slot>
+          <component v-else-if="config.slots?.componentList" :is="config.slots.componentList" />
+        </template>
+
         <template
           #component-list-panel-header
           v-if="config.$key === 'component-list' || config.slots?.componentListPanelHeader"
diff --git a/packages/editor/src/type.ts b/packages/editor/src/type.ts
index 35176a6e..028d1e35 100644
--- a/packages/editor/src/type.ts
+++ b/packages/editor/src/type.ts
@@ -81,6 +81,7 @@ export interface WorkspaceSlots {
 
 export interface ComponentListPanelSlots {
   'component-list-panel-header'(props: {}): any;
+  'component-list'(props: { componentGroupList: ComponentGroup[] }): any;
   'component-list-item'(props: { component: ComponentItem }): any;
 }