feat(editor): 添加component-list slot，用于自定义组件列表

re #621

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>

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

@@ -2,8 +2,10 @@
   <TMagicScrollbar>
     <slot name="component-list-panel-header"></slot>
 
-    <TMagicCollapse class="ui-component-panel" :model-value="collapseValue">
     <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>
@@ -27,6 +29,7 @@
           </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(() =>
+const list = computed<ComponentGroup[]>(() =>
-  services?.componentListService.getList().map((group: ComponentGroup) => ({
+  (services?.componentListService.getList() || []).map((group: ComponentGroup) => ({
     ...group,
     items: group.items.filter((item: ComponentItem) => item.text.includes(searchText.value)),
   })),

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"

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;
 }