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,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)),
   })),

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