为component添加id，并增加点击获取组件id的功能

src/components/DynamicComponent.vue

@@ -1,19 +1,16 @@
-<!-- DynamicComponent.vue -->
 <template>
-  <component :is="componentType" v-bind="componentProps" :class="componentClass" :style="componentStyle">
-    {{ componentText }}
-    <template v-for="child in componentChildren" :key="child.id">
-      <DynamicComponent :component-data="child" />
-    </template>
-
-    <template v-for="(slot,key, index) in componentSlots" :key="index" v-slot:[key]>
-      <DynamicComponent :component-data="slot" />
-    </template>
-
-  </component>
-
+  <div :id="componentId" @click="handleClick">
+    <component :is="componentType" v-bind="componentProps" :class="componentClass" :style="componentStyle">
+      {{ componentText }}
+      <template v-for="child in componentChildren" :key="child.id">
+        <DynamicComponent :component-data="child" />
+      </template>
+      <template v-for="(slot, key, index) in componentSlots" :key="index" v-slot:[key]>
+        <DynamicComponent :component-data="slot" />
+      </template>
+    </component>
+  </div>
 </template>
-
 <script setup lang="ts">
 import { defineProps, computed, onMounted } from 'vue';
 import { componentMapping } from './componentMapping';
@@ -25,6 +22,8 @@ const props = defineProps({
 onMounted(() => {
   console.log(props.componentData)
 })
+
+const componentId = computed(() => props.componentData?.id || '');
 const componentType = computed(() => componentMapping[props.componentData?.type] || 'div');
 const componentProps = computed(() => props.componentData?.props || {});
 const componentChildren = computed(() => props.componentData?.children || []);
@@ -33,6 +32,8 @@ const componentClass = computed(() => props.componentData?.class || []);
 const componentStyle = computed(() => props.componentData?.style || []);
 const componentSlots = computed(() => props.componentData?.slots || []);
 
-
-
+const handleClick = () => {
+  console.log(`Div with id ${componentId.value} was clicked.`);
+  // 你可以在这里执行更多的逻辑，例如发出一个事件或调用一个方法
+};
 </script>

src/components/MainView.vue

@@ -78,7 +78,8 @@ useDraggable(el2, componentsList, {
   },
   clone(element: Record<'id' | 'name' | 'type' | 'children' | 'props' | 'text' | 'class' | 'style' | 'slots', any>) {
     return {
-      id: `${element.id}-${uuid()}`,
+      // id: `${element.id}-${uuid()}`,
+      id: uuid(),
       name: element.name,
       type: element.type,
       props: element.props,

src/components/NestedFunction.vue

@@ -11,7 +11,7 @@
 <script setup lang="ts">
 import { useDraggable} from 'vue-draggable-plus'
 import { computed, ref } from 'vue'
-import { IPageComponent } from '../type/IComponent'
+import { IPageComponent } from '../type/IPageComponent'
 
 interface Props {
   modelValue: IPageComponent[]
@@ -37,7 +37,7 @@ useDraggable(el, list, {
   onUpdate() {
     console.log('update list1')
   },
-  onAdd: (e) => {
+  onAdd: () => {
     // console.log(e)
     console.log('add list1')
   },

src/schemes/components/Card.json

@@ -12,7 +12,7 @@
   "visible": "",
   "slots": {
     "extra":{
-      "id": "avatar-9f8289a12910000",
+      "id": "9f8289a12910000",
       "name": "avatar",
       "type": "Avatar",
       "props": {},

src/type/IComponent.js

@@ -0,0 +1,2 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });