fix

src/components/DynamicComponent.vue

@@ -1,6 +1,6 @@
 <template>
-  <div onclick="handleClick">
+  <div v-if="componentVisible||store.designerMode" :id="componentId" @click="handleClick">
-    <component v-if="componentVisible" :id="componentId" :is="componentType" v-bind="componentPropsWithDisabled"
+    <component :is="componentType" v-bind="componentPropsWithDisabled"
                :class="componentClass" :style="componentStyle">
       {{ componentText }}
       <template v-for="child in componentChildren" :key="child.id">
@@ -26,6 +26,7 @@ const props = defineProps({
 onMounted(() => {
   console.log(props.componentData);
 });
+
 const componentId = computed(() => props.componentData?.id || '');
 const componentType = computed(() => markRaw(componentMapping[props.componentData?.type]) || 'div');
 const componentProps = computed(() => props.componentData?.props || {});
@@ -54,7 +55,8 @@ const getCurrentSchemeObj = () => {
 // }, { 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: {},