From 5f1825c164436dc2eaf8dd0a43821ca6a48ddfd5 Mon Sep 17 00:00:00 2001
From: lhj <403133128@qq.com>
Date: Mon, 18 Nov 2024 00:44:22 +0800
Subject: [PATCH] =?UTF-8?q?fix:=E5=B7=A5=E5=85=B7=E6=A0=8F=E7=BB=98?=
 =?UTF-8?q?=E5=88=B6=E4=BD=8D=E7=BD=AE=E8=AE=A1=E7=AE=97=EF=BC=8C=E7=BB=84?=
 =?UTF-8?q?=E4=BB=B6=E5=AE=BD=E5=BA=A6=EF=BC=8C=E9=AB=98=E5=BA=A6=E8=87=AA?=
 =?UTF-8?q?=E5=8A=A8=E5=8D=A0=E6=BB=A1?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 components.d.ts                     |  1 +
 src/components/AdaptivePage.vue     | 17 +----------------
 src/components/DynamicComponent.vue | 19 ++++++++++++-------
 src/modules/previewScheme.json      | 19 -------------------
 src/views/Designer.vue              |  5 ++---
 5 files changed, 16 insertions(+), 45 deletions(-)

diff --git a/components.d.ts b/components.d.ts
index d1be826..7e385fe 100644
--- a/components.d.ts
+++ b/components.d.ts
@@ -8,6 +8,7 @@ export {}
 declare module 'vue' {
   export interface GlobalComponents {
     AdaptivePage: typeof import('./src/components/AdaptivePage.vue')['default']
+    ComponentHeader: typeof import('./src/components/DynamicComponent/ComponentHeader.vue')['default']
     DynamicComponent: typeof import('./src/components/DynamicComponent.vue')['default']
     NestedFunction: typeof import('./src/components/NestedFunction.vue')['default']
     PropertyEditor: typeof import('./src/components/PropertyEditor.vue')['default']
diff --git a/src/components/AdaptivePage.vue b/src/components/AdaptivePage.vue
index c31c3a7..8a2f887 100644
--- a/src/components/AdaptivePage.vue
+++ b/src/components/AdaptivePage.vue
@@ -1,5 +1,5 @@
 <template>
-  <div :style="headerStyle">
+  <div style="height:100%;width:100%;">
     <div style="width: 100%;">
       <slot name="header"></slot>
     </div>
@@ -18,23 +18,8 @@
 
 <script setup>
 import {ref} from 'vue';
-
 const dataSources = ref({})
 
-const headerStyle = ref({});
-
-
-const fitRect = function () {
-  const containerEl = document.getElementById('renderArea');
-  if (!containerEl) return;
-  const containerRect = containerEl.getBoundingClientRect();
-  headerStyle.value = {
-    overflowY: scroll,
-    width: `${containerRect.width}px`,
-    height: `${containerRect.height}px`,
-  };
-}
 onMounted(() => {
-  fitRect();
 })
 </script>
\ No newline at end of file
diff --git a/src/components/DynamicComponent.vue b/src/components/DynamicComponent.vue
index 0ef1c72..7071c1f 100644
--- a/src/components/DynamicComponent.vue
+++ b/src/components/DynamicComponent.vue
@@ -10,7 +10,7 @@
       @mouseover="isHovered = true"
       @mouseleave="isHovered = false"
   >
-    <div v-if="isHovered && store.designerMode" class="component-header">
+    <div v-if="isHovered && store.designerMode" id="header" class="component-header">
       <span>{{ componentName }}</span>
     </div>
     <div v-if="componentSelected && store.designerMode&&isComponent" class="component-header" :style="headerStyle">
@@ -83,8 +83,8 @@ const componentSelected = computed(() => store.nowComponentsData?.id && props.co
 const componentMove = computed(() => props.componentData?.designer?.move | false);
 const componentMoveSibling = computed(() => props.componentData?.designer?.moveSibling | false);
 const componentSelect = computed(() => props.componentData?.designer?.select | false);
-const componentDel= computed(() => props.componentData?.designer?.del | false);
-const componentDynamic= computed(() => props.componentData?.designer?.dynamic | false);
+const componentDel = computed(() => props.componentData?.designer?.del | false);
+const componentDynamic = computed(() => props.componentData?.designer?.dynamic | false);
 
 onMounted(() => {
   isComponent.value = props.componentData?.type != 'AdaptivePage';
@@ -125,6 +125,7 @@ const isHovered = ref(false);
 
 const handleClick = () => {
   const currentComponent = getCurrentSchemeObj();
+  adjustHeaderPosition()
   if (currentComponent) {
     store.updateNowScheme(currentComponent);
     console.log(`Component with id ${currentComponent?.id} was clicked.`);
@@ -145,18 +146,20 @@ const adjustHeaderPosition = () => {
   const componentEl = document.getElementById(componentId.value);
   if (!componentEl) return;
 
-  const headerEl = componentEl.querySelector('.component-header');
+  const headerEl = document.getElementById('header')
   if (!headerEl) return;
 
   const componentRect = componentEl.getBoundingClientRect();
   const headerRect = headerEl.getBoundingClientRect();
+  headerRect.height=headerRect.height+12
+  headerRect.width=headerRect.width+9
 
   let top = 0;
   let left = 0;
   let justification = '';
 
   // 获取最外层组件渲染区域的边界
-  const containerEl = document.getElementById('renderArea');
+  const containerEl = document.getElementById('root');
   if (!containerEl) return;
 
   const containerRect = containerEl.getBoundingClientRect();
@@ -171,8 +174,8 @@ const adjustHeaderPosition = () => {
   } else if (bottomSpace >= headerRect.height) {
     top = componentRect.height - 2;
   }
-
-  if (headerRect.width > componentRect.width) {
+  debugger
+  if (headerRect.width > (componentRect.width+11)) {
     left = -2;
     justification = 'flex-start';
   } else {
@@ -255,9 +258,11 @@ watch(() => componentSelected.value, () => {
   width: 100%;
   height: 100%;
 }
+
 .ghost {
   background-color: #f2f3f5 !important;
 }
+
 .chosen {
   box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
   background-color: #f0f0f0;
diff --git a/src/modules/previewScheme.json b/src/modules/previewScheme.json
index d2196e4..50f162f 100644
--- a/src/modules/previewScheme.json
+++ b/src/modules/previewScheme.json
@@ -20,24 +20,5 @@
     "orchestrations": {},
     "footer": [],
     "meta": {}
-  },
-  {
-    "type": "AdaptivePage",
-    "name": "AdaptivePage",
-    "id": "718b3e933910000",
-    "version": "2.0",
-    "props": {},
-    "class": "",
-    "style": "",
-    "variables": {},
-    "dataSources": {},
-    "functions": {},
-    "orchestrations": {},
-    "events": {},
-    "slots": {},
-    "header": {},
-    "footer": {},
-    "children": [],
-    "meta": {}
   }
 ]
\ No newline at end of file
diff --git a/src/views/Designer.vue b/src/views/Designer.vue
index 204a9df..9df726c 100644
--- a/src/views/Designer.vue
+++ b/src/views/Designer.vue
@@ -37,7 +37,7 @@
           </div>
         </VueDraggable>
       </div>
-      <div ref="targetContent" id="renderArea" class="center">
+      <div ref="targetContent" class="center"  id="renderArea">
         <VueDraggable
             v-model="store.previewScheme"
             :sort="true"
@@ -50,7 +50,7 @@
             @stop="onPreviewStop"
             @add="onPreViewAdd"
         >
-          <DynamicComponent v-for="component in store.previewScheme" :key="component.id" :componentData="component">
+          <DynamicComponent   id="root" style="height: 100%;width: 100%" v-for="component in store.previewScheme" :key="component.id" :componentData="component">
             {{ component.id }}
           </DynamicComponent>
         </VueDraggable>
@@ -63,7 +63,6 @@
 </template>
 
 <script setup lang="ts">
-import { RadioGroup, Radio } from '@arco-design/web-vue';
 import { onMounted, ref, watch } from 'vue';
 import { uuid } from 'lsp-uuid';
 import { componentScheme } from '@/schemes/scheme.ts';