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">
+              <el-tooltip effect="dark" placement="bottom" :content="item.text">
-              <span>{{ item.text }}</span>
+                <span>{{ item.text }}</span>
-            </el-tooltip>
+              </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,89 +48,75 @@ import { removeClassNameByClassName } from '@tmagic/utils';
 import MIcon from '../../components/Icon.vue';
 import type { ComponentGroup, ComponentItem, Services, StageOptions } from '../../type';
 
-export default defineComponent({
+const searchText = ref('');
-  name: 'ui-component-panel',
+const services = inject<Services>('services');
+const stageOptions = inject<StageOptions>('stageOptions');
 
-  components: { MIcon },
+const stage = computed(() => services?.editorService.get<StageCore>('stage'));
+const list = computed(() =>
+  services?.componentListService.getList().map((group: ComponentGroup) => ({
+    ...group,
+    items: group.items.filter((item: ComponentItem) => item.text.includes(searchText.value)),
+  })),
+);
+const collapseValue = computed(() =>
+  Array(list.value?.length)
+    .fill(1)
+    .map((x, i) => i),
+);
 
-  setup() {
+let timeout: NodeJS.Timeout | undefined;
-    const searchText = ref('');
+let clientX: number;
-    const services = inject<Services>('services');
+let clientY: number;
-    const stageOptions = inject<StageOptions>('stageOptions');
 
-    const stage = computed(() => services?.editorService.get<StageCore>('stage'));
+const appendComponent = ({ text, type, data = {} }: ComponentItem): void => {
-    const list = computed(() =>
+  services?.editorService.add({
-      services?.componentListService.getList().map((group: ComponentGroup) => ({
+    name: text,
-        ...group,
+    type,
-        items: group.items.filter((item: ComponentItem) => item.text.includes(searchText.value)),
+    ...data,
-      })),
+  });
-    );
+};
-    const collapseValue = computed(() =>
+
-      Array(list.value?.length)
+const dragstartHandler = ({ text, type, data = {} }: ComponentItem, e: DragEvent) => {
-        .fill(1)
+  if (e.dataTransfer) {
-        .map((x, i) => i),
+    e.dataTransfer.effectAllowed = 'move';
+    e.dataTransfer.setData(
+      'data',
+      serialize({
+        name: text,
+        type,
+        ...data,
+      }).replace(/"(\w+)":\s/g, '$1: '),
     );
+  }
+};
 
-    let timeout: NodeJS.Timeout | undefined;
+const dragendHandler = () => {
-    let clientX: number;
+  if (timeout) {
-    let clientY: number;
+    globalThis.clearTimeout(timeout);
+    timeout = undefined;
+  }
+  const doc = stage.value?.renderer.contentWindow?.document;
+  if (doc && stageOptions) {
+    removeClassNameByClassName(doc, stageOptions.containerHighlightClassName);
+  }
+  clientX = 0;
+  clientY = 0;
+};
 
-    return {
+const dragHandler = (e: DragEvent) => {
-      searchText,
+  if (e.clientX !== clientX || e.clientY !== clientY) {
-      collapseValue,
+    clientX = e.clientX;
-      list,
+    clientY = e.clientY;
+    if (timeout) {
+      globalThis.clearTimeout(timeout);
+      timeout = undefined;
+    }
+    return;
+  }
 
-      appendComponent({ text, type, data = {} }: ComponentItem): void {
+  if (timeout || !stage.value) return;
-        services?.editorService.add({
-          name: text,
-          type,
-          ...data,
-        });
-      },
 
-      dragstartHandler({ text, type, data = {} }: ComponentItem, e: DragEvent) {
+  timeout = stage.value.getAddContainerHighlightClassNameTimeout(e);
-        if (e.dataTransfer) {
+};
-          e.dataTransfer.effectAllowed = 'move';
-          e.dataTransfer.setData(
-            'data',
-            serialize({
-              name: text,
-              type,
-              ...data,
-            }).replace(/"(\w+)":\s/g, '$1: '),
-          );
-        }
-      },
-
-      dragendHandler() {
-        if (timeout) {
-          globalThis.clearTimeout(timeout);
-          timeout = undefined;
-        }
-        const doc = stage.value?.renderer.contentWindow?.document;
-        if (doc && stageOptions) {
-          removeClassNameByClassName(doc, stageOptions.containerHighlightClassName);
-        }
-        clientX = 0;
-        clientY = 0;
-      },
-
-      dragHandler(e: DragEvent) {
-        if (e.clientX !== clientX || e.clientY !== clientY) {
-          clientX = e.clientX;
-          clientY = e.clientY;
-          if (timeout) {
-            globalThis.clearTimeout(timeout);
-            timeout = undefined;
-          }
-          return;
-        }
-
-        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" />