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 componentId = ref(props.componentData?.id || '');
-const componentType = computed(() => componentMapping[props.componentData?.type] || 'div');
+const componentType = ref(markRaw(componentMapping[props.componentData?.type]) || 'div'); // 使用 markRaw
-const componentProps = computed(() => props.componentData?.props || {});
+const componentProps = ref(props.componentData?.props || {});
-const componentDisable = computed(() => props.componentData?.disable || false);
+const componentDisable = ref(props.componentData?.disable || false);
-const componentVisible = computed(() => props.componentData?.visible || true);
+const componentVisible = ref(props.componentData?.visible || true);
-const componentChildren = computed(() => props.componentData?.children || []);
+const componentChildren = ref(props.componentData?.children || []);
-const componentText = computed(() => props.componentData?.text || '');
+const componentText = ref(props.componentData?.text || '');
-const componentClass = computed(() => props.componentData?.class || []);
+const componentClass = ref(props.componentData?.class || []);
-const componentStyle = computed(() => props.componentData?.style || []);
+const componentStyle = ref(props.componentData?.style || []);
-const componentSlots = computed(() => props.componentData?.slots || []);
+const componentSlots = ref(props.componentData?.slots || {});
 
-console.log("disabled", componentDisable.value);
+// 确保 componentProps 包含 disabled 属性
-componentProps.value['disabled'] = componentDisable.value
+watch(componentDisable, (newDisable) => {
-
+  componentProps.value['disabled'] = newDisable;
-// @ts-ignore
+});
-const updateScheme = () => {
-
-}
 
+// 获取当前组件的最新数据
 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 { watch, defineProps, computed, ref, onMounted } from 'vue';
-import { IPageComponent } from '../type/IPageComponent';
+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 selectedOption = ref('property');
-const scheme = computed(() => props.scheme || '');
+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>

src/stores/useSchemeStore.ts

@@ -53,10 +53,14 @@ export const useSchemeStore = defineStore('scheme', {
             return obj;
         },
         updateScheme(id, updates) {
+            console.log("更新数据",JSON.stringify(updates));
             const obj = this.getSchemeObj(id);
+            console.log("更新目标",JSON.stringify(obj));
+
             if (obj) {
                 // 更新对象属性
                 Object.assign(obj, updates);
+                console.log("更新后目标",JSON.stringify(obj));
             }
         }
     }

src/utils/buildScheme.cjs

@@ -1,4 +1,15 @@
 "use strict";
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
 var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
     function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
     return new (P || (P = Promise))(function (resolve, reject) {
@@ -41,6 +52,8 @@ var path = require("path");
 var componentsDir = path.join(__dirname, '../schemes/components');
 var outputJsonPath = path.join(__dirname, '../schemes/scheme.json'); // 输出到当前目录
 var outputTsPath = path.join(__dirname, '../schemes/scheme.ts'); // 输出到当前目录
+var exportModifiedComponentsDir = path.join(__dirname, '../schemes/exported-components'); // 导出修改后的组件文件夹
+var exportModifiedComponents = true; // 控制是否导出修改后的组件文件
 function readComponents() {
     return __awaiter(this, void 0, void 0, function () {
         var files, jsonFiles, componentPromises;
@@ -79,13 +92,58 @@ function readComponents() {
 }
 function mergeComponents(components) {
     return components.reduce(function (acc, component) {
-        acc[component.type] = component;
+        // 设置默认属性
+        var updatedComponent = __assign(__assign({}, component), { visible: true, disable: false // 统一设置 disable 为 false
+         });
+        acc[updatedComponent.type] = updatedComponent;
         return acc;
     }, {});
 }
+function writeModifiedComponents(components) {
+    return __awaiter(this, void 0, void 0, function () {
+        var _i, components_1, component, updatedComponent, fileName, filePath, content, error_2;
+        return __generator(this, function (_a) {
+            switch (_a.label) {
+                case 0:
+                    if (!exportModifiedComponents)
+                        return [2 /*return*/];
+                    _a.label = 1;
+                case 1:
+                    _a.trys.push([1, 7, , 8]);
+                    return [4 /*yield*/, fs.mkdir(exportModifiedComponentsDir, { recursive: true })];
+                case 2:
+                    _a.sent();
+                    _i = 0, components_1 = components;
+                    _a.label = 3;
+                case 3:
+                    if (!(_i < components_1.length)) return [3 /*break*/, 6];
+                    component = components_1[_i];
+                    updatedComponent = __assign(__assign({}, component), { visible: true, disable: false // 统一设置 disable 为 false
+                     });
+                    fileName = "".concat(component.type, ".json");
+                    filePath = path.join(exportModifiedComponentsDir, fileName);
+                    content = JSON.stringify(updatedComponent, null, 2);
+                    return [4 /*yield*/, fs.writeFile(filePath, content)];
+                case 4:
+                    _a.sent();
+                    console.log("Modified component ".concat(fileName, " has been written to ").concat(filePath));
+                    _a.label = 5;
+                case 5:
+                    _i++;
+                    return [3 /*break*/, 3];
+                case 6: return [3 /*break*/, 8];
+                case 7:
+                    error_2 = _a.sent();
+                    console.error("Error writing modified components:", error_2);
+                    throw error_2;
+                case 8: return [2 /*return*/];
+            }
+        });
+    });
+}
 function writeMergedScheme(mergedScheme) {
     return __awaiter(this, void 0, void 0, function () {
-        var jsonContent, tsContent, error_2;
+        var jsonContent, tsContent, error_3;
         return __generator(this, function (_a) {
             switch (_a.label) {
                 case 0:
@@ -102,9 +160,9 @@ function writeMergedScheme(mergedScheme) {
                     console.log('Merged scheme has been written to scheme.ts');
                     return [3 /*break*/, 4];
                 case 3:
-                    error_2 = _a.sent();
+                    error_3 = _a.sent();
-                    console.error("Error writing file:", error_2);
+                    console.error("Error writing file:", error_3);
-                    throw error_2;
+                    throw error_3;
                 case 4: return [2 /*return*/];
             }
         });
@@ -112,24 +170,30 @@ function writeMergedScheme(mergedScheme) {
 }
 function main() {
     return __awaiter(this, void 0, void 0, function () {
-        var components, mergedScheme, error_3;
+        var components, mergedScheme, error_4;
         return __generator(this, function (_a) {
             switch (_a.label) {
                 case 0:
-                    _a.trys.push([0, 3, , 4]);
+                    _a.trys.push([0, 5, , 6]);
                     return [4 /*yield*/, readComponents()];
                 case 1:
                     components = _a.sent();
-                    mergedScheme = mergeComponents(components);
+                    if (!exportModifiedComponents) return [3 /*break*/, 3];
-                    return [4 /*yield*/, writeMergedScheme(mergedScheme)];
+                    return [4 /*yield*/, writeModifiedComponents(components)];
                 case 2:
                     _a.sent();
-                    return [3 /*break*/, 4];
+                    _a.label = 3;
                 case 3:
-                    error_3 = _a.sent();
+                    mergedScheme = mergeComponents(components);
-                    console.error('Error:', error_3);
+                    return [4 /*yield*/, writeMergedScheme(mergedScheme)];
-                    return [3 /*break*/, 4];
+                case 4:
-                case 4: return [2 /*return*/];
+                    _a.sent();
+                    return [3 /*break*/, 6];
+                case 5:
+                    error_4 = _a.sent();
+                    console.error('Error:', error_4);
+                    return [3 /*break*/, 6];
+                case 6: return [2 /*return*/];
             }
         });
     });

src/utils/buildScheme.ts

@@ -5,6 +5,8 @@ import { IComponent } from '../type/IComponent';
 const componentsDir = path.join(__dirname, '../schemes/components');
 const outputJsonPath = path.join(__dirname, '../schemes/scheme.json'); // 输出到当前目录
 const outputTsPath = path.join(__dirname, '../schemes/scheme.ts'); // 输出到当前目录
+const exportModifiedComponentsDir = path.join(__dirname, '../schemes/exported-components'); // 导出修改后的组件文件夹
+const exportModifiedComponents = true; // 控制是否导出修改后的组件文件
 
 async function readComponents(): Promise<IComponent[]> {
   const files = await fs.readdir(componentsDir);
@@ -26,11 +28,44 @@ async function readComponents(): Promise<IComponent[]> {
 
 function mergeComponents(components: IComponent[]): Record<string, IComponent> {
   return components.reduce((acc, component) => {
-    acc[component.type] = component;
+    // 设置默认属性
+    const updatedComponent = {
+      ...component,
+      visible: true,  // 统一设置 visible 为 true
+      disable: false  // 统一设置 disable 为 false
+    };
+
+    acc[updatedComponent.type] = updatedComponent;
     return acc;
   }, {} as Record<string, IComponent>);
 }
 
+async function writeModifiedComponents(components: IComponent[]): Promise<void> {
+  if (!exportModifiedComponents) return;
+
+  try {
+    await fs.mkdir(exportModifiedComponentsDir, { recursive: true });
+
+    for (const component of components) {
+      const updatedComponent = {
+        ...component,
+        visible: true,  // 统一设置 visible 为 true
+        disable: false  // 统一设置 disable 为 false
+      };
+
+      const fileName = `${component.type}.json`;
+      const filePath = path.join(exportModifiedComponentsDir, fileName);
+      const content = JSON.stringify(updatedComponent, null, 2);
+
+      await fs.writeFile(filePath, content);
+      console.log(`Modified component ${fileName} has been written to ${filePath}`);
+    }
+  } catch (error) {
+    console.error(`Error writing modified components:`, error);
+    throw error;
+  }
+}
+
 async function writeMergedScheme(mergedScheme: Record<string, IComponent>): Promise<void> {
   try {
     const jsonContent = JSON.stringify(mergedScheme, null, 2);
@@ -50,6 +85,9 @@ async function writeMergedScheme(mergedScheme: Record<string, IComponent>): Prom
 async function main() {
   try {
     const components = await readComponents();
+    if (exportModifiedComponents) {
+      await writeModifiedComponents(components);
+    }
     const mergedScheme = mergeComponents(components);
     await writeMergedScheme(mergedScheme);
   } catch (error) {