From e424ea63ec0a4de8150202caa353f11356d954f6 Mon Sep 17 00:00:00 2001
From: lhj <403133128@qq.com>
Date: Sun, 17 Nov 2024 01:44:42 +0800
Subject: [PATCH] =?UTF-8?q?add:=E5=AE=8C=E5=96=84=E5=B7=A5=E5=85=B7?=
 =?UTF-8?q?=E6=A0=8Fcss=E8=A1=A8=E7=8E=B0?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/DynamicComponent.vue | 60 ++++++++++++++++-------------
 src/stores/useSchemeStore.ts        |  4 +-
 2 files changed, 36 insertions(+), 28 deletions(-)

diff --git a/src/components/DynamicComponent.vue b/src/components/DynamicComponent.vue
index fee2fbf..7dd5a55 100644
--- a/src/components/DynamicComponent.vue
+++ b/src/components/DynamicComponent.vue
@@ -13,9 +13,12 @@
       @mouseleave="isHovered = false"
   >
     <div v-if="componentSelected" class="component-header" :style="headerStyle">
-      <span>{{ componentName }}</span>
-      <button style="color: #1057CC" @click="handleEditFunc">编辑</button>
-      <button style="color: #1057CC" @click="handleDeleteFunc">删除</button>
+      <div  style="background-color:#3457cc;color: #ffffff;padding: 5px ;margin-right: 2px">{{ componentName }}</div>
+      <div v-if="componentSelected" style="background-color:#3457cc;color:#ffffff;padding: 6px 5px 5px 5px;display: flex;width: fit-content;flex-wrap: nowrap">
+        <icon-copy class="clickable" size="20" />
+        <icon-edit class="clickable" @click="handleEditFunc" size="20"/>
+        <icon-delete class="clickable" @click="handleDeleteFunc" size="20"/>
+      </div>
     </div>
     <div class="component-content">
       <component
@@ -103,6 +106,7 @@ const adjustHeaderPosition = () => {
 
   let top = 0;
   let left = 0;
+  let justification='';
 
   // 获取最外层组件渲染区域的边界
   const containerEl = document.getElementById('renderArea');
@@ -110,34 +114,35 @@ const adjustHeaderPosition = () => {
 
   const containerRect = containerEl.getBoundingClientRect();
 
+  debugger
   // 计算上下左右的可用空间
   const topSpace = componentRect.top - containerRect.top;
   const bottomSpace = containerRect.bottom - componentRect.bottom;
-  const leftSpace = componentRect.left - containerRect.left;
-  const rightSpace = containerRect.right - componentRect.right;
-
   // 检查上方是否有足够的空间
   if (topSpace >= headerRect.height) {
-    top = -headerRect.height - 10;
-    left = rightSpace >= headerRect.width ? componentRect.width - headerRect.width : 0;
-  } else if (bottomSpace >= headerRect.height) {
-    top = componentRect.height + 10;
-    left = rightSpace >= headerRect.width ? componentRect.width - headerRect.width : 0;
-  } else if (leftSpace >= headerRect.width) {
-    left = -headerRect.width - 10;
-    top = 0;
-  } else if (rightSpace >= headerRect.width) {
-    left = componentRect.width + 10;
-    top = 0;
-  }
+    top = -headerRect.height+2;
 
+  } else if (bottomSpace >= headerRect.height) {
+    top = componentRect.height-2;
+  }
+  if (headerRect.width>componentRect.width)
+  {
+    left=-2;
+    justification='flex-start';
+  }else
+  {
+    left=componentRect.width-headerRect.width-2;
+    justification='flex-end';
+  }
   headerStyle.value = {
     top: `${top}px`,
-    left: `${left}px`
+    left: `${left}px`,
+    justifyContent: justification
   };
 };
 
 onMounted(() => {
+  adjustHeaderPosition()
   // console.log("组件挂载后",props.componentData);
 });
 
@@ -159,21 +164,20 @@ watch(() => componentSelected.value, () => {
 }
 
 .dynamic-component.hover-state {
-  border: 1px dashed #1057CC; /* 悬停时浅蓝色虚线框 */
+  border: 1px dashed #3457cc; /* 悬停时浅蓝色虚线框 */
 }
 
 .dynamic-component.click-state {
-  border: 2px solid #1057CC; /* 点击时深蓝色实线框 */
+  border: 2px solid #3457cc; /* 点击时深蓝色实线框 */
 }
 
 .component-header {
   position: absolute;
-  color: #1057CC;
-  padding: 5px;
+  color: #3457cc;
   display: flex;
+  flex-wrap: nowrap; /* 禁止换行 */
+  align-content: center;
   align-items: center;
-  justify-content: space-between;
-  width: 100%;
   z-index: 1000;
   background-color: transparent; /* 确保没有背景颜色 */
   box-sizing: border-box; /* 确保内边距不会影响宽度 */
@@ -186,7 +190,7 @@ watch(() => componentSelected.value, () => {
 .component-header button {
   background-color: transparent;
   border: none;
-  color: #1057CC;
+  color: #3457cc;
   cursor: pointer;
   margin-left: 10px;
 }
@@ -200,4 +204,8 @@ watch(() => componentSelected.value, () => {
   position: relative;
   z-index: 1;
 }
+
+.clickable {
+  cursor: pointer; /* 当鼠标悬停在此元素上时，鼠标指针变为手形 */
+}
 </style>
\ No newline at end of file
diff --git a/src/stores/useSchemeStore.ts b/src/stores/useSchemeStore.ts
index 1317a64..251eb1b 100644
--- a/src/stores/useSchemeStore.ts
+++ b/src/stores/useSchemeStore.ts
@@ -80,7 +80,7 @@ export const useSchemeStore = defineStore('scheme', {
         },
 
         updateNowScheme(updates: Partial<IPageComponent>) {
-            debugger;
+            // debugger;
             this.nowComponentsData = updates;
             pushToStack(this.selectedComponentStack, this.nowComponentsData.id);
 
@@ -89,7 +89,7 @@ export const useSchemeStore = defineStore('scheme', {
             return this.nowComponentsData;
         },
         deleteScheme(id: string) {
-            debugger;
+            // debugger;
             console.log("删除前,组件id", id);
             const currentStateHash = this.currentHash;
             const objToDelete = findObjectById(this.previewScheme, id);