fix:完善根据id查询并修改对应组件的数据

preview/views/MainView.vue

@@ -36,7 +36,7 @@
             @update="onPreviewUpdate"
             @stop="onPreviewStop"
         >
-          {{store.previewScheme}}
+<!--          {{store.previewScheme}}-->
           <DynamicComponent v-for="component in store.previewScheme" :key="component.id" :componentData="component">
             {{ component.id }}
           </DynamicComponent>
@@ -51,6 +51,7 @@
 </template>
 
 <script setup lang="ts">
+import {RadioGroup,Radio} from '@arco-design/web-vue'
 import {onMounted, ref, watch} from 'vue';
 import {uuid} from 'lsp-uuid';
 import {componentScheme} from "@/schemes/scheme";
@@ -58,7 +59,7 @@ import {useSchemeStore} from '@/stores/useSchemeStore';
 import {IComponent} from "@/type/IComponent";
 import DynamicComponent from "@/components/DynamicComponent.vue";
 import PropertyEditor from "@/components/PropertyEditor.vue";
-import {VueDraggable} from "vue-draggable-plus";
+import {DraggableEvent, VueDraggable} from "vue-draggable-plus";
 
 let list0 = ref([])
 
@@ -132,7 +133,7 @@ onMounted(() => {
   // @ts-ignore
 });
 
-function clone(element: Record<'name' | 'id' | 'type' | 'props' | 'class' | 'text' | 'style' | 'slots'|'visible'|'disable', IComponent>) {
+function clone(element: Record<'name' | 'id' | 'type' | 'props' | 'class' | 'text' | 'style' | 'slots'|'visible'|'disable'|'children', IComponent>) {
   console.log("clone", element)
   return {
     id: `${element.type}-${uuid()}`,
@@ -142,7 +143,7 @@ function clone(element: Record<'name' | 'id' | 'type' | 'props' | 'class' | 'tex
     class: element.class,
     designer: '',
     text: element.text,
-    children: [],
+    children: element.children||[],
     style: element.style,
     visible: element.visible,
     slots: element.slots,
@@ -154,6 +155,7 @@ function clone(element: Record<'name' | 'id' | 'type' | 'props' | 'class' | 'tex
 
 const onEnd = (event: DraggableEvent) => {
   console.log("onEnd", event)
+  store.nowComponentsData=event.clonedData
   // const {oldDraggableIndex} = obj;
   // store.previewData(store.component[oldDraggableIndex]);
   // store.nowComponentsData(store.component[oldDraggableIndex]);

src/schemes/components/RadioGroup.json

@@ -4,7 +4,26 @@
   "id": "radiogroup",
   "designer": {},
   "text": "",
-  "props": {},
+  "props": {
+    "type": "button"
+  },
+  "style": "",
+  "class": "",
+  "visible": "",
+  "slots": {},
+  "disable": "",
+  "events": {},
+  "loop": {},
+  "children": [
+    {
+      "type": "Radio",
+      "name": "radio",
+      "id": "radio",
+      "designer": {},
+      "text": "广州",
+      "props": {
+        "value": "guangzhou"
+      },
       "style": "",
       "class": "",
       "visible": "",
@@ -13,4 +32,24 @@
       "events": {},
       "loop": {},
       "children": []
+    },
+    {
+      "type": "Radio",
+      "name": "radio",
+      "id": "radio",
+      "designer": {},
+      "text": "深圳",
+      "props": {
+        "value": "shenzhen"
+      },
+      "style": "",
+      "class": "",
+      "visible": "",
+      "slots": {},
+      "disable": "",
+      "events": {},
+      "loop": {},
+      "children": []
+    }
+  ]
 }

src/schemes/scheme.json

@@ -1051,7 +1051,26 @@
     "id": "radiogroup",
     "designer": {},
     "text": "",
-    "props": {},
+    "props": {
+      "type": "button"
+    },
+    "style": "",
+    "class": "",
+    "visible": "",
+    "slots": {},
+    "disable": "",
+    "events": {},
+    "loop": {},
+    "children": [
+      {
+        "type": "Radio",
+        "name": "radio",
+        "id": "radio",
+        "designer": {},
+        "text": "广州",
+        "props": {
+          "value": "guangzhou"
+        },
         "style": "",
         "class": "",
         "visible": "",
@@ -1061,6 +1080,26 @@
         "loop": {},
         "children": []
       },
+      {
+        "type": "Radio",
+        "name": "radio",
+        "id": "radio",
+        "designer": {},
+        "text": "深圳",
+        "props": {
+          "value": "shenzhen"
+        },
+        "style": "",
+        "class": "",
+        "visible": "",
+        "slots": {},
+        "disable": "",
+        "events": {},
+        "loop": {},
+        "children": []
+      }
+    ]
+  },
   "Rate": {
     "type": "Rate",
     "name": "rate",

src/schemes/scheme.ts

@@ -1051,7 +1051,26 @@ export const componentScheme = {
     "id": "radiogroup",
     "designer": {},
     "text": "",
-    "props": {},
+    "props": {
+      "type": "button"
+    },
+    "style": "",
+    "class": "",
+    "visible": "",
+    "slots": {},
+    "disable": "",
+    "events": {},
+    "loop": {},
+    "children": [
+      {
+        "type": "Radio",
+        "name": "radio",
+        "id": "radio",
+        "designer": {},
+        "text": "广州",
+        "props": {
+          "value": "guangzhou"
+        },
         "style": "",
         "class": "",
         "visible": "",
@@ -1061,6 +1080,26 @@ export const componentScheme = {
         "loop": {},
         "children": []
       },
+      {
+        "type": "Radio",
+        "name": "radio",
+        "id": "radio",
+        "designer": {},
+        "text": "深圳",
+        "props": {
+          "value": "shenzhen"
+        },
+        "style": "",
+        "class": "",
+        "visible": "",
+        "slots": {},
+        "disable": "",
+        "events": {},
+        "loop": {},
+        "children": []
+      }
+    ]
+  },
   "Rate": {
     "type": "Rate",
     "name": "rate",

src/stores/useSchemeStore.ts

@@ -1,5 +1,8 @@
-import {defineStore} from 'pinia'
+import { defineStore } from 'pinia';
-import {IPageComponent} from '@/type/IPageComponent';
+import { IPageComponent } from '@/type/IPageComponent';
+
+// 缓存对象
+const idToObjectCache = new Map<string, IPageComponent>();
 
 function findObjectById(obj, targetId) {
     if (Array.isArray(obj)) {
@@ -27,21 +30,34 @@ export const useSchemeStore = defineStore('scheme', {
         previewScheme: [],
         nowComponentsData: {}
     }),
-    actions:
+    actions: {
-        {
         initPreviewScheme(value) {
-                this.previewScheme = value
+            this.previewScheme = value;
-                this.nowComponentsData = value[0]
+            this.nowComponentsData = value[0];
+            // 清空缓存
+            idToObjectCache.clear();
         },
         initComponents(value) {
-                this.components = value
+            this.components = value;
         },
         getSchemeObj(id) {
-                return findObjectById(this.previewScheme, id)
+            // 检查缓存
+            if (idToObjectCache.has(id)) {
+                return idToObjectCache.get(id);
+            }
+            // 查找并缓存
+            const obj = findObjectById(this.previewScheme, id);
+            if (obj) {
+                idToObjectCache.set(id, obj);
+            }
+            return obj;
         },
-            updateScheme() {
+        updateScheme(id, updates) {
-
+            const obj = this.getSchemeObj(id);
+            if (obj) {
+                // 更新对象属性
+                Object.assign(obj, updates);
             }
-
         }
-})
+    }
+});