From 1d57d21d509e026f06b81c1c20d36164bd817cd9 Mon Sep 17 00:00:00 2001
From: lhj <403133128@qq.com>
Date: Sun, 10 Nov 2024 01:41:40 +0800
Subject: [PATCH] =?UTF-8?q?refactor:=E5=A2=9E=E5=8A=A0=E7=BB=84=E4=BB=B6?=
 =?UTF-8?q?=E5=9C=A8=E5=B1=9E=E6=80=A7=E7=BC=96=E8=BE=91=E5=99=A8=E6=9B=B4?=
 =?UTF-8?q?=E6=96=B0=E5=90=8E=E5=90=8C=E6=AD=A5=E7=8A=B6=E6=80=81=E5=88=B0?=
 =?UTF-8?q?=E7=9B=B8=E5=BA=94=E7=9A=84=E7=BB=84=E4=BB=B6=E4=B8=AD?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/DynamicComponent.vue | 77 +++++++++++++++---------
 src/components/PropertyEditor.vue   | 29 ++++++---
 src/stores/useSchemeStore.ts        |  4 ++
 src/utils/buildScheme.cjs           | 92 ++++++++++++++++++++++++-----
 4 files changed, 152 insertions(+), 50 deletions(-)

diff --git a/src/components/DynamicComponent.vue b/src/components/DynamicComponent.vue
index e66073b..3f1054e 100644
--- a/src/components/DynamicComponent.vue
+++ b/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>
\ No newline at end of file
diff --git a/src/components/PropertyEditor.vue b/src/components/PropertyEditor.vue
index d585373..614b355 100644
--- a/src/components/PropertyEditor.vue
+++ b/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>
diff --git a/src/stores/useSchemeStore.ts b/src/stores/useSchemeStore.ts
index 219d352..46df15e 100644
--- a/src/stores/useSchemeStore.ts
+++ b/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));
             }
         }
     }
diff --git a/src/utils/buildScheme.cjs b/src/utils/buildScheme.cjs
index 804e6b1..ad1f12a 100644
--- a/src/utils/buildScheme.cjs
+++ b/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();
-                    console.error("Error writing file:", error_2);
-                    throw error_2;
+                    error_3 = _a.sent();
+                    console.error("Error writing file:", error_3);
+                    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);
-                    return [4 /*yield*/, writeMergedScheme(mergedScheme)];
+                    if (!exportModifiedComponents) return [3 /*break*/, 3];
+                    return [4 /*yield*/, writeModifiedComponents(components)];
                 case 2:
                     _a.sent();
-                    return [3 /*break*/, 4];
+                    _a.label = 3;
                 case 3:
-                    error_3 = _a.sent();
-                    console.error('Error:', error_3);
-                    return [3 /*break*/, 4];
-                case 4: return [2 /*return*/];
+                    mergedScheme = mergeComponents(components);
+                    return [4 /*yield*/, writeMergedScheme(mergedScheme)];
+                case 4:
+                    _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*/];
             }
         });
     });