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,9 +1,9 @@
 <template>
-  <div :style="headerStyle">
+  <div style="height:100%;width:100%;">
     <div style="width: 100%;">
       <slot name="header"></slot>
     </div>
-    <div style="width: 100%;height: 100%;background-color: #f7f8fa;">
+    <div style="width: 100%;height: 100%;background-color: #f7f8fa;overflow-y: auto">
       MAIN
       <slot>
       </slot>
@@ -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

@@ -3,75 +3,112 @@
       style="width: fit-content; display: flex; flex-direction: column; position: relative;"
       v-if="store.nowComponentsData !== null && (componentVisible || store.designerMode)"
       :id="componentId"
-      :class="[
-      'dynamic-component',
-      { 'hover-state': isHovered && store.designerMode },
+      :class="['dynamic-component',{ 'hover-state': isHovered && store.designerMode },
       { 'click-state': componentSelected && store.designerMode &&isComponent }
     ]"
       @click.stop="handleClick"
       @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">
       <div style="background-color:#3457cc;color: #ffffff;padding: 5px ;margin-right: 2px">{{ componentName }}</div>
-      <div 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
+          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
-          :is="componentType"
-          v-bind="componentPropsWithDisabled"
-          :class="componentClass"
-          :style="componentStyle"
+      <VueDraggable
+          v-model="componentChildren"
+          :animation="150"
+          group="designer"
+          ghost-class="ghost"
+          chosen-class="chosen"
+          class="canvas"
+          @start="onComponentStart"
+          @update="onComponentUpdate"
+          @stop="onComponentEnd"
+          @add="onComponentAdd"
       >
-        {{ componentText }}
-        <template v-for="child in componentChildren" :key="child.id">
-          <DynamicComponent :componentData="child" />
-        </template>
-        <template v-for="(slot, key, index) in componentSlots" :key="index" v-slot:[key]>
-          <DynamicComponent :component-data="slot" />
-        </template>
-      </component>
+        <component
+            :is="componentType"
+            v-bind="componentPropsWithDisabled"
+            :class="componentClass"
+            :style="componentStyle"
+        >
+          {{ componentText }}
+          <template v-for="child in componentChildren" :key="child.id">
+            <DynamicComponent :componentData="child"/>
+          </template>
+          <template v-for="(slot, key, index) in componentSlots" :key="key" v-slot:[key]>
+            <DynamicComponent :component-data="slot"/>
+          </template>
+        </component>
+      </VueDraggable>
+
     </div>
   </div>
 </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 {ref, computed, onMounted, watch, markRaw, nextTick} from 'vue';
+import {componentMapping} from './componentMapping';
+import {useSchemeStore} from '../stores/useSchemeStore';
+import {DraggableEvent, VueDraggable} from "vue-draggable-plus";
 
 const store = useSchemeStore();
 const props = defineProps({
   componentData: Object
 });
-const isComponent=ref(true)
+const isComponent = ref(true)
 const componentId = computed(() => props.componentData?.id || '');
 const componentName = computed(() => props.componentData?.name || 'Unnamed Component');
 const componentType = computed(() => markRaw(componentMapping[props.componentData?.type]) || 'div');
 const componentProps = computed(() => props.componentData?.props || {});
-const componentDisable = computed(() => props.componentData?.disable || false);
+const componentDisable = computed(() => props.componentData?.disable);
 const componentVisible = computed(() => props.componentData?.visible);
-const componentChildren = computed(() => props.componentData?.children || []);
+const componentChildren = ref(props.componentData?.children);
 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);
 
+// 设计器控制参数
+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);
+
 onMounted(() => {
-  debugger
-  isComponent.value=props.componentData?.type!='AdaptivePage';
+  isComponent.value = props.componentData?.type != 'AdaptivePage';
   adjustHeaderPosition();
 });
 
+const onComponentStart = (event: DraggableEvent) => {
+  console.log("onComponentStart", event);
+}
 
+const onComponentEnd = (event: DraggableEvent) => {
+  console.log("onComponentEnd", event);
+
+}
+const onComponentAdd = (event: DraggableEvent) => {
+  console.log("onComponentAdd", event);
+  let obj = getCurrentSchemeObj()
+  obj.children = componentChildren.value
+  store.updateScheme(obj.id, obj)
+}
+const onComponentUpdate = (event: DraggableEvent) => {
+  console.log("onComponentUpdate", event);
+
+}
 // 确保 componentProps 包含 disabled 属性
 const componentPropsWithDisabled = computed(() => ({
   ...componentProps.value,
@@ -88,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.`);
@@ -108,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();
@@ -134,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 {
@@ -151,7 +191,6 @@ const adjustHeaderPosition = () => {
 };
 
 
-
 watch(() => componentSelected.value, () => {
   if (componentSelected.value) {
     nextTick(() => {
@@ -162,7 +201,7 @@ watch(() => componentSelected.value, () => {
 </script>
 
 
-<style scoped>
+<style>
 .dynamic-component {
   position: relative;
   width: fit-content;
@@ -213,4 +252,20 @@ watch(() => componentSelected.value, () => {
 .clickable {
   cursor: pointer; /* 当鼠标悬停在此元素上时，鼠标指针变为手形 */
 }
+
+.canvas {
+  background-color: #fff;
+  width: 100%;
+  height: 100%;
+}
+
+.ghost {
+  background-color: #f2f3f5 !important;
+}
+
+.chosen {
+  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
+  background-color: #f0f0f0;
+  z-index: 1001;
+}
 </style>

src/modules/previewScheme.json

@@ -1,22 +1,24 @@
-{
-  "type": "AdaptivePage",
-  "name": "AdaptivePage",
-  "id": "AdaptivePage",
-  "version": "2.0",
-  "props": {},
-  "class": "",
-  "style": "",
-  "variables": {},
-  "dataSources": {},
-  "functions": {},
-  "orchestrations": {},
-  "events": {},
-  "slots": {},
-  "header": [],
-  "footer": [],
-  "body": [],
-  "meta": {},
-  "visible": true,
-  "disable": false,
-  "designer": {}
-}
+[
+  {
+    "id": "AdaptivePage-b32bb7a33910000",
+    "name": "AdaptivePage",
+    "type": "AdaptivePage",
+    "props": {},
+    "class": "",
+    "children": [],
+    "style": "",
+    "visible": true,
+    "slots": {},
+    "disable": false,
+    "events": {},
+    "loop": {},
+    "body": [],
+    "designer": {},
+    "dataSources": {},
+    "functions": {},
+    "variables": {},
+    "orchestrations": {},
+    "footer": [],
+    "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';
@@ -78,7 +77,7 @@ let componentsList = [];
 const store = useSchemeStore();
 
 watch(store, (n) => {
-  console.log("store发生了变化", n);
+  // console.log("store发生了变化", n);
 });
 
 const baseScheme = {
@@ -286,7 +285,6 @@ const view = () => {
       .ghost {
         background-color: #f2f3f5 !important;
       }
-      overflow-y: auto;
     }
 
     .right {