feat(editor): 添加compoent-list-item slot

packages/editor/src/Editor.vue

@@ -14,6 +14,10 @@
           <template #component-list-panel-header>
             <slot name="component-list-panel-header"></slot>
           </template>
+
+          <template #component-list-item="{ component }">
+            <slot name="component-list-item" :component="component"></slot>
+          </template>
         </sidebar>
       </slot>
     </template>

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

@@ -24,11 +24,13 @@
             @dragend="dragendHandler"
             @drag="dragHandler"
           >
-            <m-icon :icon="item.icon"></m-icon>
+            <slot name="component-list-item" :component="item">
+              <MIcon :icon="item.icon"></MIcon>
 
               <el-tooltip effect="dark" placement="bottom" :content="item.text">
                 <span>{{ item.text }}</span>
               </el-tooltip>
+            </slot>
           </div>
         </el-collapse-item>
       </template>
@@ -36,8 +38,8 @@
   </el-scrollbar>
 </template>
 
-<script lang="ts">
+<script lang="ts" setup>
-import { computed, defineComponent, inject, ref } from 'vue';
+import { computed, inject, ref } from 'vue';
 import serialize from 'serialize-javascript';
 
 import type StageCore from '@tmagic/stage';
@@ -46,12 +48,6 @@ import { removeClassNameByClassName } from '@tmagic/utils';
 import MIcon from '../../components/Icon.vue';
 import type { ComponentGroup, ComponentItem, Services, StageOptions } from '../../type';
 
-export default defineComponent({
-  name: 'ui-component-panel',
-
-  components: { MIcon },
-
-  setup() {
 const searchText = ref('');
 const services = inject<Services>('services');
 const stageOptions = inject<StageOptions>('stageOptions');
@@ -73,20 +69,15 @@ export default defineComponent({
 let clientX: number;
 let clientY: number;
 
-    return {
+const appendComponent = ({ text, type, data = {} }: ComponentItem): void => {
-      searchText,
-      collapseValue,
-      list,
-
-      appendComponent({ text, type, data = {} }: ComponentItem): void {
   services?.editorService.add({
     name: text,
     type,
     ...data,
   });
-      },
+};
 
-      dragstartHandler({ text, type, data = {} }: ComponentItem, e: DragEvent) {
+const dragstartHandler = ({ text, type, data = {} }: ComponentItem, e: DragEvent) => {
   if (e.dataTransfer) {
     e.dataTransfer.effectAllowed = 'move';
     e.dataTransfer.setData(
@@ -98,9 +89,9 @@ export default defineComponent({
       }).replace(/"(\w+)":\s/g, '$1: '),
     );
   }
-      },
+};
 
-      dragendHandler() {
+const dragendHandler = () => {
   if (timeout) {
     globalThis.clearTimeout(timeout);
     timeout = undefined;
@@ -111,9 +102,9 @@ export default defineComponent({
   }
   clientX = 0;
   clientY = 0;
-      },
+};
 
-      dragHandler(e: DragEvent) {
+const dragHandler = (e: DragEvent) => {
   if (e.clientX !== clientX || e.clientY !== clientY) {
     clientX = e.clientX;
     clientY = e.clientY;
@@ -127,8 +118,5 @@ export default defineComponent({
   if (timeout || !stage.value) return;
 
   timeout = stage.value.getAddContainerHighlightClassNameTimeout(e);
-      },
 };
-  },
-});
 </script>

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

@@ -14,6 +14,10 @@
       <template #component-list-panel-header v-if="item === 'component-list'">
         <slot name="component-list-panel-header"></slot>
       </template>
+
+      <template #component-list-item="{ component }" v-if="item === 'component-list'">
+        <slot name="component-list-item" :component="component"></slot>
+      </template>
     </tab-pane>
   </el-tabs>
 </template>

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

@@ -13,6 +13,18 @@
         <component v-else-if="config.slots?.componentListPanelHeader" :is="config.slots.componentListPanelHeader" />
       </template>
 
+      <template
+        #component-list-item="{ component }"
+        v-if="data === 'component-list' || config.slots?.componentListItem"
+      >
+        <slot v-if="data === 'component-list'" name="component-list-item" :component="component"></slot>
+        <component
+          v-else-if="config.slots?.componentListItem"
+          :is="config.slots.componentListItem"
+          :component="component"
+        />
+      </template>
+
       <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" />