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

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>