refactor:增加组件在属性编辑器更新后同步状态到相应的组件中

src/components/DynamicComponent.vue

@@ -1,53 +1,72 @@
 <template>
   <component v-if="componentVisible" @click.stop="handleClick" :id="componentId" :is="componentType" v-bind="componentProps"
-    :class="componentClass" :style="componentStyle">
+             :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 :componentData="slot" />
+      <DynamicComponent :component-data="slot" />
     </template>
   </component>
 </template>
-<script setup lang="ts">
-import { defineProps, computed, onMounted } from 'vue';
-import { componentMapping } from './componentMapping';
-import { useSchemeStore } from '../stores/useSchemeStore'
 
-const store = useSchemeStore()
+<script setup lang="ts">
+import { defineProps, ref, computed, onMounted, watch, markRaw } from 'vue';
+import { componentMapping } from './componentMapping';
+import { useSchemeStore } from '../stores/useSchemeStore';
+
+const store = useSchemeStore();
 const props = defineProps({
   componentData: Object
 });
 
 onMounted(() => {
-  console.log(props.componentData)
-})
+  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 componentDisable = computed(() => props.componentData?.disable || false);
-const componentVisible = computed(() => props.componentData?.visible || true);
-const componentChildren = computed(() => props.componentData?.children || []);
-const componentText = computed(() => props.componentData?.text || '');
-const componentClass = computed(() => props.componentData?.class || []);
-const componentStyle = computed(() => props.componentData?.style || []);
-const componentSlots = computed(() => props.componentData?.slots || []);
+const componentId = ref(props.componentData?.id || '');
+const componentType = ref(markRaw(componentMapping[props.componentData?.type]) || 'div'); // 使用 markRaw
+const componentProps = ref(props.componentData?.props || {});
+const componentDisable = ref(props.componentData?.disable || false);
+const componentVisible = ref(props.componentData?.visible || true);
+const componentChildren = ref(props.componentData?.children || []);
+const componentText = ref(props.componentData?.text || '');
+const componentClass = ref(props.componentData?.class || []);
+const componentStyle = ref(props.componentData?.style || []);
+const componentSlots = ref(props.componentData?.slots || {});
 
-console.log("disabled", componentDisable.value);
-componentProps.value['disabled'] = componentDisable.value
-
-// @ts-ignore
-const updateScheme = () => {
-
-}
+// 确保 componentProps 包含 disabled 属性
+watch(componentDisable, (newDisable) => {
+  componentProps.value['disabled'] = newDisable;
+});
 
+// 获取当前组件的最新数据
 const getCurrentSchemeObj = () => {
-  return store.getSchemeObj(componentId.value)
-}
+  return store.getSchemeObj(componentId.value);
+};
+
+// 监听 previewScheme 的变化
+watch(() => store.previewScheme, (newPreviewScheme) => {
+  // 重新获取当前组件的最新数据
+  const currentComponent = getCurrentSchemeObj();
+  console.log("currentComponent", JSON.stringify(currentComponent));
+  if (currentComponent) {
+    // 更新组件数据
+    componentProps.value = currentComponent.props ;
+    componentDisable.value = currentComponent.disable ;
+    componentVisible.value = currentComponent?.visible;
+    componentChildren.value = currentComponent.children ;
+    componentText.value = currentComponent.text;
+    componentClass.value = currentComponent.class ;
+    componentStyle.value = currentComponent.style ;
+    componentSlots.value = currentComponent.slots ;
+  }
+  console.log("store.previewScheme has changed",componentVisible.value)
+}, { deep: true });
+
 const handleClick = () => {
-  console.log(`Div with id ${JSON.stringify(getCurrentSchemeObj())} was clicked.`);
+  console.log(`Component with id ${JSON.stringify(getCurrentSchemeObj())} was clicked.`);
   // 你可以在这里执行更多的逻辑，例如发出一个事件或调用一个方法
 };
 </script>

src/components/PropertyEditor.vue

@@ -3,7 +3,7 @@
     <!-- 属性选择器 -->
     <div style="display: flex;justify-content: center;padding-top: 8px;width: 100%">
       <a-radio-group size="large" type="button" v-model="selectedOption"
-        style="width: 100%;justify-content: center;text-align: center">
+                     style="width: 100%;justify-content: center;text-align: center">
         <a-radio style="width: 100%;" value="property" default-checked>属性</a-radio>
         <a-radio style="width: 100%;" value="style">样式</a-radio>
         <a-radio style="width: 100%;" value="interaction">交互</a-radio>
@@ -22,7 +22,11 @@
           </div>
           <div style="display: flex;justify-content: space-between;vertical-align: middle;">
             <span>是否可见</span>
-            <a-switch />
+            <a-switch v-model="scheme.visible" />
+          </div>
+          <div style="display: flex;justify-content: space-between;vertical-align: middle;">
+            <span>是否禁用</span>
+            <a-switch v-model="scheme.disable" />
           </div>
           <a-collapse :expand-icon-position="`right`" :default-active-key="['1', 2]">
             <a-collapse-item header="基本配置" key="1">
@@ -56,20 +60,31 @@
 </template>
 
 <script setup lang="ts">
-import { defineProps, computed, ref, onMounted } from 'vue';
-import { IPageComponent } from '../type/IPageComponent';
+import { watch, defineProps, computed, ref, onMounted } from 'vue';
+import { IPageComponent } from '@/type/IPageComponent';
+import { useSchemeStore } from '../stores/useSchemeStore'
+
+import {IComponent} from "@/type/IComponent.ts";
 
 const props = defineProps<{
   scheme: IPageComponent
 }>();
 
 
+const store = useSchemeStore()
 
-const selectedOption = ref('property')
-const scheme = computed(() => props.scheme || '');
+const selectedOption = ref('property');
+const scheme = computed<IPageComponent>(() => props.scheme || {} as IPageComponent);
+
+// 使用 deep 选项来深度监听对象的变化
+watch(scheme, (value, oldValue) => {
+  console.log("scheme Changed", value);
+  store.updateScheme(value.id,value as IComponent);
+}, { deep: true });
 
 onMounted(() => {
-})
+  // 初始化时的逻辑
+});
 </script>
 
 <style scoped>