add:完善组件删除功能

src/components/DynamicComponent.vue

@@ -1,21 +1,21 @@
 <template>
   <div
       style="width: fit-content; display: flex; flex-direction: column; position: relative;"
-      v-if="componentVisible || store.designerMode"
+      v-if="store.nowComponentsData!==null&&(componentVisible || store.designerMode)"
       :id="componentId"
       :class="[
       'dynamic-component',
       { 'hover-state': isHovered },
-      { 'click-state': isClicked }
+      { 'click-state': componentSelected }
     ]"
       @click.stop="handleClick"
       @mouseover="isHovered = true"
       @mouseleave="isHovered = false"
   >
-    <div v-if="isClicked" class="component-header" :style="headerStyle">
+    <div v-if="componentSelected" class="component-header" :style="headerStyle">
       <span>{{ componentName }}</span>
-      <button style="color: #1057CC" @click="handleFunction('edit')">编辑</button>
-      <button style="color: #1057CC" @click="handleFunction('delete')">删除</button>
+      <button style="color: #1057CC" @click="handleEditFunc">编辑</button>
+      <button style="color: #1057CC" @click="handleDeleteFunc">删除</button>
     </div>
     <div class="component-content">
       <component
@@ -26,10 +26,10 @@
       >
         {{ componentText }}
         <template v-for="child in componentChildren" :key="child.id">
-          <DynamicComponent :componentData="child" />
+          <DynamicComponent :componentData="child"/>
         </template>
         <template v-for="(slot, key, index) in componentSlots" :key="index" v-slot:[key]>
-          <DynamicComponent :component-data="slot" />
+          <DynamicComponent :component-data="slot"/>
         </template>
       </component>
     </div>
@@ -37,9 +37,9 @@
 </template>
 
 <script setup lang="ts">
-import { defineProps, ref, computed, onMounted, watch, markRaw, nextTick } from 'vue';
-import { componentMapping } from './componentMapping';
-import { useSchemeStore } from '../stores/useSchemeStore';
+import {defineProps, ref, computed, onMounted, watch, markRaw, nextTick} from 'vue';
+import {componentMapping} from './componentMapping';
+import {useSchemeStore} from '../stores/useSchemeStore';
 
 const store = useSchemeStore();
 const props = defineProps({
@@ -57,6 +57,7 @@ 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 componentSelected = computed(() => store.nowComponentsData?.id && props.componentData?.id === store.nowComponentsData?.id);
 
 // 确保 componentProps 包含 disabled 属性
 const componentPropsWithDisabled = computed(() => ({
@@ -71,24 +72,24 @@ const getCurrentSchemeObj = () => {
 
 // 控制悬停和点击状态
 const isHovered = ref(false);
-const isClicked = ref(false);
 
 const handleClick = () => {
-  isClicked.value = !isClicked.value;
   const currentComponent = getCurrentSchemeObj();
-  console.log(`Component with id ${currentComponent.id} was clicked.`);
-  // 你可以在这里执行更多的逻辑，例如发出一个事件或调用一个方法
-};
+  if (currentComponent) {
+    store.nowComponentsData = currentComponent
+    console.log(`Component with id ${currentComponent?.id} was clicked.`);
+    // 你可以在这里执行更多的逻辑，例如发出一个事件或调用一个方法
+  }
 
-const handleFunction = (action: string) => {
-  console.log(`Action: ${action}`);
-  // 处理编辑或删除操作
+};
+const handleEditFunc = () => {
+
+};
+const handleDeleteFunc = () => {
+  store.deleteScheme(componentId.value);
 };
 
 const headerStyle = ref({});
-
-const targetContent = ref<HTMLElement | null>(null);
-
 const adjustHeaderPosition = () => {
   const componentEl = document.getElementById(componentId.value);
   if (!componentEl) return;
@@ -137,11 +138,10 @@ const adjustHeaderPosition = () => {
 
 onMounted(() => {
   console.log(props.componentData);
-  adjustHeaderPosition();
 });
 
-watch(() => isClicked.value, () => {
-  if (isClicked.value) {
+watch(() => componentSelected.value, () => {
+  if (componentSelected.value) {
     nextTick(() => {
       adjustHeaderPosition();
     });
@@ -153,7 +153,7 @@ watch(() => isClicked.value, () => {
 .dynamic-component {
   position: relative;
   border: 1px solid transparent; /* 默认透明边框 */
-  transition: border 0.3s, box-shadow 0.3s;
+  transition: box-shadow 0.1s;
   width: fit-content;
 }
 

src/components/PropertyEditor.vue

@@ -14,25 +14,25 @@
     <div style="margin-top: 16px;">
       <!-- 属性面板 -->
       <div>
-        <a-input-search placeholder="Please enter something" />
+        <a-input-search placeholder="Please enter something"/>
         <a-space direction="vertical" fill style="margin-top: 8px;">
           <div style="display: flex;justify-content: space-between;vertical-align: middle;">
             <span>组件ID</span>
-            <a-input style="width: 150px;" />
+            <a-input style="width: 150px;"/>
           </div>
           <div style="display: flex;justify-content: space-between;vertical-align: middle;">
             <span>是否可见</span>
-            <a-switch v-model="scheme.visible" />
+            <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" />
+            <a-switch v-model="scheme.disable"/>
           </div>
           <a-collapse :expand-icon-position="`right`" :default-active-key="['1', 2]">
             <a-collapse-item header="基本配置" key="1">
               <div style="display: flex;justify-content: space-between;vertical-align: middle;">
                 <span>内容</span>
-                <a-input v-model="scheme.text" style="width: 150px;" />
+                <a-input v-model="scheme.text" style="width: 150px;"/>
               </div>
             </a-collapse-item>
           </a-collapse>
@@ -60,9 +60,9 @@
 </template>
 
 <script setup lang="ts">
-import { watch, defineProps, computed, ref, onMounted } from 'vue';
-import { IPageComponent } from '@/type/IPageComponent';
-import { useSchemeStore } from '../stores/useSchemeStore'
+import {watch, defineProps, computed, ref, onMounted} from 'vue';
+import {IPageComponent} from '@/type/IPageComponent';
+import {useSchemeStore} from '../stores/useSchemeStore'
 
 import {IComponent} from "@/type/IComponent.ts";
 
@@ -79,8 +79,9 @@ const scheme = computed<IPageComponent>(() => props.scheme || {} as IPageCompone
 // 使用 deep 选项来深度监听对象的变化
 watch(scheme, (value, oldValue) => {
   console.log("scheme Changed", value);
-  store.updateScheme(value.id,value as IComponent);
-}, { deep: true });
+  if (value)
+    store.updateScheme(value.id, value as IComponent);
+}, {deep: true});
 
 onMounted(() => {
   // 初始化时的逻辑