fix

preview/views/MainView.vue

@@ -78,9 +78,9 @@ let list = ref([]);
 let componentsList = [];
 const store = useSchemeStore();
 
-watch(store, (n) => {
+// watch(store, (n) => {
-  console.log("store发生了变化", n);
+//   console.log("store发生了变化", n);
-});
+// });
 
 const baseScheme = {
   "type": "AdaptivePage",

src/components/DynamicComponent.vue

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

src/stores/useSchemeStore.ts

@@ -29,6 +29,7 @@ const HISTORY_LENGTH = 20; // 默认队列长度
 
 export const useSchemeStore = defineStore('scheme', {
     state: () => ({
+        designerMode: true,
         components: [],
         previewScheme: [],
         nowComponentsData: {},