fix:工具栏绘制位置计算，组件宽度，高度自动占满

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']

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>

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;

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": {}
   }
 ]

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';