From 4a30d7fb374663df3afc5796f3bc71a87cbb302a Mon Sep 17 00:00:00 2001
From: lhj <403133128@qq.com>
Date: Wed, 2 Oct 2024 21:31:37 +0800
Subject: [PATCH] =?UTF-8?q?=E4=B8=BAcomponent=E6=B7=BB=E5=8A=A0id=EF=BC=8C?=
 =?UTF-8?q?=E5=B9=B6=E5=A2=9E=E5=8A=A0=E7=82=B9=E5=87=BB=E8=8E=B7=E5=8F=96?=
 =?UTF-8?q?=E7=BB=84=E4=BB=B6id=E7=9A=84=E5=8A=9F=E8=83=BD?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/DynamicComponent.vue | 33 +++++++++++++++--------------
 src/components/MainView.vue         |  3 ++-
 src/components/NestedFunction.vue   |  4 ++--
 src/schemes/components/Card.json    |  2 +-
 src/type/IComponent.js              |  2 ++
 5 files changed, 24 insertions(+), 20 deletions(-)
 create mode 100644 src/type/IComponent.js

diff --git a/src/components/DynamicComponent.vue b/src/components/DynamicComponent.vue
index 250b4ba..c7dd827 100644
--- a/src/components/DynamicComponent.vue
+++ b/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>
\ No newline at end of file
diff --git a/src/components/MainView.vue b/src/components/MainView.vue
index 3e585ce..7c4ecb3 100644
--- a/src/components/MainView.vue
+++ b/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,
diff --git a/src/components/NestedFunction.vue b/src/components/NestedFunction.vue
index f35782a..2171925 100644
--- a/src/components/NestedFunction.vue
+++ b/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')
   },
diff --git a/src/schemes/components/Card.json b/src/schemes/components/Card.json
index 84ec7d6..79b4f9b 100644
--- a/src/schemes/components/Card.json
+++ b/src/schemes/components/Card.json
@@ -12,7 +12,7 @@
   "visible": "",
   "slots": {
     "extra":{
-      "id": "avatar-9f8289a12910000",
+      "id": "9f8289a12910000",
       "name": "avatar",
       "type": "Avatar",
       "props": {},
diff --git a/src/type/IComponent.js b/src/type/IComponent.js
new file mode 100644
index 0000000..c8ad2e5
--- /dev/null
+++ b/src/type/IComponent.js
@@ -0,0 +1,2 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });