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

add:增加导出组件和为组件全局增加属性功能
2024-11-10 01:41:40 +08:00 · 2024-11-10 01:40:35 +08:00
5 changed files with 191 additions and 51 deletions
--- 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>
--- 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>
--- 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));
            }
        }
    }
--- 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*/];
            }
        });
    });
--- a/src/utils/buildScheme.ts
+++ b/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) {
Author	SHA1	Message	Date
lhj	1d57d21d50	refactor:增加组件在属性编辑器更新后同步状态到相应的组件中	2024-11-10 01:41:40 +08:00
lhj	991e003e20	add:增加导出组件和为组件全局增加属性功能	2024-11-10 01:40:35 +08:00