添加订阅事件监听

src/components/DynamicComponent.vue

@@ -13,7 +13,9 @@
 <script setup lang="ts">
 import { defineProps, computed, onMounted } from 'vue';
 import { componentMapping } from './componentMapping';
+import { useSchemeStore } from '../stores/useSchemeStore'
 
+const store = useSchemeStore()
 const props = defineProps({
   componentData: Object
 });
@@ -31,11 +33,16 @@ const componentClass = computed(() => props.componentData?.class || []);
 const componentStyle = computed(() => props.componentData?.style || []);
 const componentSlots = computed(() => props.componentData?.slots || []);
 
+// @ts-ignore
 const updateScheme = () => {
 
 }
+
+const getCurrentSchemeObj = () => {
+  return store.getSchemeObj(componentId.value)
+}
 const handleClick = () => {
-  console.log(`Div with id ${componentId.value} was clicked.`);
+  console.log(`Div with id ${JSON.stringify(getCurrentSchemeObj())} was clicked.`);
   // 你可以在这里执行更多的逻辑，例如发出一个事件或调用一个方法
 };
 </script>

src/components/MainView.vue

@@ -23,6 +23,9 @@
         </a-col>
         <a-col flex="20%">
           <div class="property-editor">属性编辑器</div>
+          <div>
+            {{ store.scheme }}
+          </div>
         </a-col>
       </a-row>
 
@@ -36,14 +39,12 @@
       <!-- 测试区域 -->
       <div class="test-area">
         {{ store.scheme }}
-        <!-- <TestComponent></TestComponent> -->
       </div>
     </div>
   </div>
 </template>
 
 <script setup lang="ts">
-import TestComponent from './TestComponent.vue';
 import { onMounted, ref } from 'vue';
 import NestedFunction from './NestedFunction.vue';
 import DynamicComponent from './DynamicComponent.vue';
@@ -70,7 +71,7 @@ const baseScheme =
   "slots": {},
   "header": {},
   "footer": {},
-  "children": {},
+  "children": [],
   "meta": {}
 }
 const componentsList = ref<any[]>([]);
@@ -78,11 +79,47 @@ const list = ref<IPageComponent[]>([]);
 const el2 = ref();
 const store = useSchemeStore()
 
+//初始化scheme
 const initScheme = () => {
-
+  store.initScheme([baseScheme])
-  store.initScheme(baseScheme)
 }
 
+const unsubscribe = store.$onAction(
+  ({
+    name, // action 名称
+    store, // store 实例，类似 `someStore`
+    args, // 传递给 action 的参数数组
+    after, // 在 action 返回或解决后的钩子
+    onError, // action 抛出或拒绝的钩子
+  }) => {
+    // 为这个特定的 action 调用提供一个共享变量
+    const startTime = Date.now()
+    // 这将在执行 "store "的 action 之前触发。
+    console.log(`Start "${name}" with params [${args.join(', ')}].`)
+
+    // 这将在 action 成功并完全运行后触发。
+    // 它等待着任何返回的 promise
+    after((result) => {
+      console.log(
+        `Finished "${name}" after ${
+          Date.now() - startTime
+        }ms.\nResult: ${JSON.stringify(result) }.`
+      )
+    })
+
+    // 如果 action 抛出或返回一个拒绝的 promise，这将触发
+    onError((error) => {
+      console.warn(
+        `Failed "${name}" after ${Date.now() - startTime}ms.\nError: ${error}.`
+      )
+    })
+  }
+)
+
+// 手动删除监听器
+// unsubscribe()
+
+
 onMounted(() => {
   const loadedComponents = Object.values(componentScheme);
   componentsList.value = loadedComponents;

src/components/NestedFunction.vue

@@ -35,14 +35,14 @@ useDraggable(el, list, {
     console.log('start')
   },
   onUpdate() {
-    console.log('update list1')
+    console.log('update list')
   },
   onAdd: () => {
     // console.log(e)
-    console.log('add list1')
+    console.log('add list')
   },
   onRemove: () => {
-    console.log('remove list1')
+    console.log('remove list')
   }
 },)
 </script>

src/schemes/components/AdaptivePage.json

@@ -14,6 +14,6 @@
     "slots":{},
     "header":{},
     "footer":{},
-    "children":{},
+    "children":[],
     "meta":{}
 }

src/schemes/scheme.json

@@ -15,7 +15,7 @@
     "slots": {},
     "header": {},
     "footer": {},
-    "children": {},
+    "children": [],
     "meta": {}
   },
   "Affix": {
@@ -259,7 +259,7 @@
     "visible": "",
     "slots": {
       "extra": {
-        "id": "avatar-9f8289a12910000",
+        "id": "9f8289a12910000",
         "name": "avatar",
         "type": "Avatar",
         "props": {},

src/schemes/scheme.ts

@@ -15,7 +15,7 @@ export const componentScheme = {
     "slots": {},
     "header": {},
     "footer": {},
-    "children": {},
+    "children": [],
     "meta": {}
   },
   "Affix": {
@@ -259,7 +259,7 @@ export const componentScheme = {
     "visible": "",
     "slots": {
       "extra": {
-        "id": "avatar-9f8289a12910000",
+        "id": "9f8289a12910000",
         "name": "avatar",
         "type": "Avatar",
         "props": {},

src/stores/useSchemeStore.ts

@@ -1,22 +1,33 @@
 import { defineStore } from 'pinia'
 import { IPageComponent } from '../type/IPageComponent';
-import { ref,computed } from 'vue';
+import { ref } from 'vue';
 
-export const useSchemeStore = defineStore('counter', () => {
+function findObjectById(obj, targetId) {
-  const count = ref(0)
+  if (Array.isArray(obj)) {
-  const scheme=ref<IPageComponent>()
+    for (let item of obj) {
-  const doubleCount = computed(() => count.value * 2)
+      let found = findObjectById(item, targetId);
-  function increment() {
+      if (found) return found;
-    count.value++
     }
-  function decrement() {
+  } else if (typeof obj === 'object' && obj !== null) {
-    count.value--
+    if (obj.id === targetId) {
+      return obj;
     }
-  function initScheme(value)
+    for (let key in obj) {
-  {
+      if (obj.hasOwnProperty(key)) {
+        let found = findObjectById(obj[key], targetId);
+        if (found) return found;
+      }
+    }
+  }
+  return null; // 如果没有找到，则返回null
+}
+export const useSchemeStore = defineStore('scheme', () => {
+  const scheme = ref<IPageComponent[]>()
+  function initScheme(value) {
     scheme.value = value
   }
-
+  function getSchemeObj(id) {
-
+    return findObjectById(scheme.value, id)
-  return { count,scheme, doubleCount, increment,decrement,initScheme }
+  }
+  return { scheme, initScheme, getSchemeObj }
 })