From c02e08229d81ca6278693db65ba71d939c233c00 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E4=BA=8E=E8=82=96=E7=A3=8A?= <18851179580@163.com>
Date: Wed, 26 Feb 2025 16:28:18 +0800
Subject: [PATCH] =?UTF-8?q?=E6=9B=B4=E6=96=B0=E5=AE=BD=E5=BA=A6=E5=8F=98?=
 =?UTF-8?q?=E5=8C=96=E6=97=B6=E6=98=BE=E7=A4=BA=E7=9A=84=E4=BD=8D=E7=BD=AE?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../custom-module/custom-location/index.vue   | 23 ++-----
 .../model-custom-group-style.vue              | 41 ++++++++-----
 .../model-icon/model-icon-style.vue           | 42 ++++++++-----
 .../model-image/model-image-style.vue         | 61 +++++++++++--------
 .../model-lines/model-lines-style.vue         | 35 +++++++----
 .../model-panel/model-panel-style.vue         | 42 ++++++++-----
 .../model-text/model-text-style.vue           | 46 ++++++++------
 src/utils/index.ts                            | 50 +++++++++++++++
 8 files changed, 219 insertions(+), 121 deletions(-)

diff --git a/src/components/common/custom-module/custom-location/index.vue b/src/components/common/custom-module/custom-location/index.vue
index 17e30357..00b084f0 100644
--- a/src/components/common/custom-module/custom-location/index.vue
+++ b/src/components/common/custom-module/custom-location/index.vue
@@ -27,6 +27,7 @@
 </template>
 
 <script lang="ts" setup>
+import { get_container_location } from '@/utils';
 import { isEmpty } from 'lodash';
 const props = defineProps({
     componentOptions: {
@@ -68,23 +69,9 @@ const data_follow_id_change = (val: string) => {
 // 跟随id发生变化时的处理
 watch(() => data_follow.value, (val) => {
     const { spacing = 0, type = 'left', id = '' } = val;
-    props.componentOptions.forEach((item: any) => {
-        if (item.id == id) {
-            const { location, com_data } = item;
-            const new_x = location.x + com_data.com_width + spacing;
-            const new_y = location.y + com_data.com_height + spacing;
-            // // 先解除不可移动的处理 is_disable_x true 为不可移动，false为可以拖动, 频繁切换会导致引用的组件报错，暂时使用当前内容
-            // data_follow.value.is_disable_x = false;
-            // data_follow.value.is_disable_y = false;
-            if (type =='left') {
-                data_location.value.x = new_x;
-                data_location.value.record_x = new_x;
-            } else if (type =='top') {
-                data_location.value.y = new_y;
-                data_location.value.record_y = new_y;
-                data_location.value.staging_y = new_y
-            }
-        }
-    });
+    // 获取新的位置
+    const { x: new_x, y: new_y } = get_container_location(props.componentOptions, id, type, spacing, data_location.value.x, data_location.value.y);
+    // 更新位置
+    data_location.value = { x: new_x, y: new_y, record_x: new_x, record_y: new_y, staging_y: new_y };
 }, {immediate: true, deep: true });
 </script>
\ No newline at end of file
diff --git a/src/components/common/custom-module/model-custom-group/model-custom-group-style.vue b/src/components/common/custom-module/model-custom-group/model-custom-group-style.vue
index 99ac24ad..4e03ec23 100644
--- a/src/components/common/custom-module/model-custom-group/model-custom-group-style.vue
+++ b/src/components/common/custom-module/model-custom-group/model-custom-group-style.vue
@@ -6,10 +6,10 @@
             <card-container>
                 <div class="mb-12">容器设置</div>
                 <el-form-item label="容器宽度">
-                    <slider v-model="form.com_width" :max="390" @operation_end="operation_end"></slider>
+                    <slider v-model="form.com_width" :max="390" @operation_end="container_size_change"></slider>
                 </el-form-item>
                 <el-form-item label="容器高度">
-                    <slider v-model="form.com_height" :max="1000" @operation_end="operation_end"></slider>
+                    <slider v-model="form.com_height" :max="1000" @operation_end="container_size_change"></slider>
                 </el-form-item>
             </card-container>
             <div class="bg-f5 divider-line" />
@@ -31,7 +31,7 @@
     </div>
 </template>
 <script setup lang="ts">
-import { get_history_name, location_compute } from '@/utils';
+import { get_container_location, get_history_name, location_compute } from '@/utils';
 import { isEmpty } from 'lodash';
 const props = defineProps({
     value: {
@@ -87,20 +87,29 @@ const operation_end = () => {
     emit('operation_end', get_history_name(diy_data.value));
 };
 //#region 位置计算
+const size_location_change = (location: { x: number, y: number, record_x: number, record_y: number, staging_y: number }) => {
+    // 容器位置计算
+    diy_data.value.location.x = location_compute(form.value.com_width, location.x, 390);
+    diy_data.value.location.y = location_compute(form.value.com_height, location.y, center_height.value);
+    diy_data.value.location.record_x = location_compute(form.value.com_width, location.record_x, 390);
+    diy_data.value.location.record_y = location_compute(form.value.com_height, location.record_y, center_height.value);
+    diy_data.value.location.staging_y = location_compute(form.value.com_height, location.staging_y, center_height.value);
+    form.value.staging_height = form.value.com_height;
+}
+// 组件大小变化触发事件
+const container_size_change = () => {
+    const { spacing = 0, type = 'left', id = '' } = form.value.data_follow;
+    // 获取新的位置
+    const { x: new_x, y: new_y } = get_container_location(props.componentOptions, id, type, spacing, diy_data.value.location.x, diy_data.value.location.y);
+    // 重新更新位置信息
+    diy_data.value.location = { x: new_x, y: new_y, record_x: new_x, record_y: new_y, staging_y: new_y };
+    size_location_change(diy_data.value.location);
+    operation_end();
+}
 // 监听数据变化
-watch(
-    diy_data,
-    (val) => {
-        // 容器位置计算
-        diy_data.value.location.x = location_compute(form.value.com_width, val.location.x, 390);
-        diy_data.value.location.y = location_compute(form.value.com_height, val.location.y, center_height.value);
-        diy_data.value.location.record_x = location_compute(form.value.com_width, val.location.record_x, 390);
-        diy_data.value.location.record_y = location_compute(form.value.com_height, val.location.record_y, center_height.value);
-        diy_data.value.location.staging_y = location_compute(form.value.com_height, val.location.staging_y, center_height.value);
-        form.value.staging_height = form.value.com_height;
-    },
-    { immediate: true, deep: true }
-);
+watch(() => diy_data.value, (val) => {
+    size_location_change(val.location);
+},{ immediate: true, deep: true });
 //#endregion
 </script>
 <style lang="scss" scoped>
diff --git a/src/components/common/custom-module/model-icon/model-icon-style.vue b/src/components/common/custom-module/model-icon/model-icon-style.vue
index 0cb3b08c..a935b27c 100644
--- a/src/components/common/custom-module/model-icon/model-icon-style.vue
+++ b/src/components/common/custom-module/model-icon/model-icon-style.vue
@@ -54,10 +54,10 @@
             <card-container>
                 <div class="mb-12">容器设置</div>
                 <el-form-item label="容器宽度">
-                    <slider v-model="form.com_width" :max="1000" @operation_end="operation_end"></slider>
+                    <slider v-model="form.com_width" :max="1000" @operation_end="container_size_change"></slider>
                 </el-form-item>
                 <el-form-item label="容器高度">
-                    <slider v-model="form.com_height" :max="1000" @operation_end="operation_end"></slider>
+                    <slider v-model="form.com_height" :max="1000" @operation_end="container_size_change"></slider>
                 </el-form-item>
                 <el-form-item label="背景颜色">
                     <mult-color-picker :value="form.color_list" :type="form.direction" @update:value="mult_color_picker_event"></mult-color-picker>
@@ -96,7 +96,7 @@
     </div>
 </template>
 <script setup lang="ts">
-import { get_data_fields, get_history_name, location_compute } from '@/utils';
+import { get_container_location, get_data_fields, get_history_name, location_compute } from '@/utils';
 import { pick, isEmpty } from 'lodash';
 const props = defineProps({
     value: {
@@ -158,20 +158,30 @@ const operation_end = () => {
     emit('operation_end', get_history_name(diy_data.value));
 };
 //#region 位置计算
-// 监听数据变化
-watch(
-    diy_data,
-    (val) => {
-        diy_data.value.location.x = location_compute(form.value.com_width, val.location.x, 390);
-        diy_data.value.location.y = location_compute(form.value.com_height, val.location.y, center_height.value);
-        diy_data.value.location.record_x = location_compute(form.value.com_width, val.location.record_x, 390);
-        diy_data.value.location.record_y = location_compute(form.value.com_height, val.location.record_y, center_height.value);
-        diy_data.value.location.staging_y = location_compute(form.value.com_height, val.location.staging_y, center_height.value);
+const size_location_change = (location: { x: number, y: number, record_x: number, record_y: number, staging_y: number }) => {
+    diy_data.value.location.x = location_compute(form.value.com_width, location.x, 390);
+    diy_data.value.location.y = location_compute(form.value.com_height, location.y, center_height.value);
+    diy_data.value.location.record_x = location_compute(form.value.com_width, location.record_x, 390);
+    diy_data.value.location.record_y = location_compute(form.value.com_height, location.record_y, center_height.value);
+    diy_data.value.location.staging_y = location_compute(form.value.com_height, location.staging_y, center_height.value);
+    form.value.staging_height = form.value.com_height;
+}
 
-        form.value.staging_height = form.value.com_height;
-    },
-    { immediate: true, deep: true }
-);
+// 组件大小变化触发事件
+const container_size_change = () => {
+    const { spacing = 0, type = 'left', id = '' } = form.value.data_follow;
+    // 获取新的位置
+    const { x: new_x, y: new_y } = get_container_location(props.componentOptions, id, type, spacing, diy_data.value.location.x, diy_data.value.location.y);
+    // 重新更新位置信息
+    diy_data.value.location = { x: new_x, y: new_y, record_x: new_x, record_y: new_y, staging_y: new_y };
+    size_location_change(diy_data.value.location);
+    operation_end();
+}
+
+// 监听数据变化
+watch(() => diy_data.value, (val) => {
+    size_location_change(val.location);
+},{ immediate: true, deep: true });
 // #endregion
 </script>
 <style lang="scss" scoped>
diff --git a/src/components/common/custom-module/model-image/model-image-style.vue b/src/components/common/custom-module/model-image/model-image-style.vue
index 685b7be1..a235a74d 100644
--- a/src/components/common/custom-module/model-image/model-image-style.vue
+++ b/src/components/common/custom-module/model-image/model-image-style.vue
@@ -25,10 +25,10 @@
                     <radius :value="form.img_radius" @operation_end="operation_end"></radius>
                 </el-form-item>
                 <el-form-item label="图片宽度">
-                    <slider v-model="form.img_width" :max="1000" @operation_end="operation_end"></slider>
+                    <slider v-model="form.img_width" :max="1000" @operation_end="img_size_change"></slider>
                 </el-form-item>
                 <el-form-item label="图片高度">
-                    <slider v-model="form.img_height" :max="1000" @operation_end="operation_end"></slider>
+                    <slider v-model="form.img_height" :max="1000" @operation_end="img_size_change"></slider>
                 </el-form-item>
                 <el-form-item label="旋转角度">
                     <slider v-model="form.img_rotate" :max="1000" @operation_end="operation_end"></slider>
@@ -62,7 +62,7 @@
                         <radius :value="form.border_radius" @operation_end="operation_end"></radius>
                     </el-form-item>
                     <el-form-item label="边框粗细">
-                        <slider v-model="form.border_size" :max="100" @operation_end="operation_end"></slider>
+                        <slider v-model="form.border_size" :max="100" @operation_end="img_size_change"></slider>
                     </el-form-item>
                 </template>
             </card-container>
@@ -70,7 +70,7 @@
     </div>
 </template>
 <script setup lang="ts">
-import { get_data_fields, get_history_name, location_compute } from '@/utils';
+import { get_container_location, get_data_fields, get_history_name, location_compute } from '@/utils';
 import { isEmpty } from 'lodash';
 const props = defineProps({
     value: {
@@ -123,30 +123,39 @@ const emit = defineEmits(['operation_end']);
 const operation_end = () => {
     emit('operation_end', get_history_name(diy_data.value));
 };
+
+const size_location_change = (location: { x: number, y: number, record_x: number, record_y: number, staging_y: number }) => {
+    let width = form.value.img_width;
+    let height = form.value.img_height;
+    if (form.value.border_show == '1') {
+        width += form.value.border_size * 2;
+        height += form.value.border_size * 2;
+    }
+    diy_data.value.location.x = location_compute(width, location.x, 390);
+    diy_data.value.location.y = location_compute(height, location.y, center_height.value);
+    diy_data.value.location.record_x = location_compute(width, location.record_x, 390);
+    diy_data.value.location.record_y = location_compute(height, location.record_y, center_height.value);
+    diy_data.value.location.staging_y = location_compute(height, location.staging_y, center_height.value);
+
+    form.value.com_width = width;
+    form.value.com_height = height;
+    form.value.staging_height = height;
+}
+
+const img_size_change = () => {
+    const { spacing = 0, type = 'left', id = '' } = form.value.data_follow;
+    // 获取新的位置
+    const { x: new_x, y: new_y } = get_container_location(props.componentOptions, id, type, spacing, diy_data.value.location.x, diy_data.value.location.y);
+    // 重新更新位置信息
+    diy_data.value.location = { x: new_x, y: new_y, record_x: new_x, record_y: new_y, staging_y: new_y };
+    size_location_change(diy_data.value.location);
+    operation_end();
+}
 //#region 位置计算
 // 监听数据变化
-watch(
-    diy_data,
-    (val) => {
-        let width = form.value.img_width;
-        let height = form.value.img_height;
-        if (form.value.border_show == '1') {
-            width += form.value.border_size * 2;
-            height += form.value.border_size * 2;
-        }
-
-        diy_data.value.location.x = location_compute(width, val.location.x, 390);
-        diy_data.value.location.y = location_compute(height, val.location.y, center_height.value);
-        diy_data.value.location.record_x = location_compute(width, val.location.record_x, 390);
-        diy_data.value.location.record_y = location_compute(height, val.location.record_y, center_height.value);
-        diy_data.value.location.staging_y = location_compute(height, val.location.staging_y, center_height.value);
-
-        form.value.com_width = width;
-        form.value.com_height = height;
-        form.value.staging_height = height;
-    },
-    { immediate: true, deep: true }
-);
+watch(() => diy_data.value, (val) => {
+    size_location_change(val.location);
+},{ immediate: true, deep: true });
 // #endregion
 </script>
 <style lang="scss" scoped>
diff --git a/src/components/common/custom-module/model-lines/model-lines-style.vue b/src/components/common/custom-module/model-lines/model-lines-style.vue
index 5b08ea2e..4e544399 100644
--- a/src/components/common/custom-module/model-lines/model-lines-style.vue
+++ b/src/components/common/custom-module/model-lines/model-lines-style.vue
@@ -25,10 +25,10 @@
                     </el-radio-group>
                 </el-form-item>
                 <el-form-item :label="form.line_settings === 'horizontal' ? '线条宽度' : '线条高度'">
-                    <slider v-model="form.line_width" :max="1000" @operation_end="operation_end"></slider>
+                    <slider v-model="form.line_width" :max="1000" @operation_end="container_size_change"></slider>
                 </el-form-item>
                 <el-form-item label="线条粗细">
-                    <slider v-model="form.line_size" :min="1" :max="100" @operation_end="operation_end"></slider>
+                    <slider v-model="form.line_size" :min="1" :max="100" @operation_end="container_size_change"></slider>
                 </el-form-item>
                 <el-form-item label="线条颜色">
                     <color-picker v-model="form.line_color" @operation_end="operation_end"></color-picker>
@@ -45,7 +45,7 @@
     </div>
 </template>
 <script setup lang="ts">
-import { get_history_name, location_compute } from '@/utils';
+import { get_container_location, get_history_name, location_compute } from '@/utils';
 import { isEmpty } from 'lodash';
 
 const props = defineProps({
@@ -83,7 +83,7 @@ const operation_end = () => {
 
 //#region 位置计算
 // 监听数据变化
-watch(diy_data, (val) => {
+const size_location_change = (location: { x: number, y: number, record_x: number, record_y: number, staging_y: number }) => {
     let width = 0;
     let height = 0;
     if (form.value.line_settings === 'horizontal') {
@@ -94,18 +94,31 @@ watch(diy_data, (val) => {
         height = form.value.line_width;
     }
 
-    diy_data.value.location.x = location_compute(width, val.location.x, 390);
-    diy_data.value.location.y = location_compute(height, val.location.y, center_height.value);
+    diy_data.value.location.x = location_compute(width, location.x, 390);
+    diy_data.value.location.y = location_compute(height, location.y, center_height.value);
 
-    diy_data.value.location.record_x = location_compute(width, val.location.record_x, 390);
-    diy_data.value.location.record_y = location_compute(height, val.location.record_y, center_height.value);
-    diy_data.value.location.staging_y = location_compute(height, val.location.staging_y, center_height.value);
+    diy_data.value.location.record_x = location_compute(width, location.record_x, 390);
+    diy_data.value.location.record_y = location_compute(height, location.record_y, center_height.value);
+    diy_data.value.location.staging_y = location_compute(height, location.staging_y, center_height.value);
 
     form.value.com_width = width;
     form.value.com_height = height;
     form.value.staging_height = height;
-
-}, {immediate: true, deep: true});
+}
+// 组件大小变化触发事件
+const container_size_change = () => {
+    const { spacing = 0, type = 'left', id = '' } = form.value.data_follow;
+    // 获取新的位置
+    const { x: new_x, y: new_y } = get_container_location(props.componentOptions, id, type, spacing, diy_data.value.location.x, diy_data.value.location.y);
+    // 重新更新位置信息
+    diy_data.value.location = { x: new_x, y: new_y, record_x: new_x, record_y: new_y, staging_y: new_y };
+    size_location_change(diy_data.value.location);
+    operation_end();
+}
+// 监听数据变化
+watch(() => diy_data.value, (val) => {
+    size_location_change(val.location);
+},{ immediate: true, deep: true });
 // #endregion
 </script>
 <style lang="scss" scoped>
diff --git a/src/components/common/custom-module/model-panel/model-panel-style.vue b/src/components/common/custom-module/model-panel/model-panel-style.vue
index 835bb2f3..bf7b2539 100644
--- a/src/components/common/custom-module/model-panel/model-panel-style.vue
+++ b/src/components/common/custom-module/model-panel/model-panel-style.vue
@@ -26,10 +26,10 @@
                     <el-switch v-model="form.bottom_up" active-value="1" inactive-value="0" />
                 </el-form-item> -->
                 <el-form-item label="容器宽度">
-                    <slider v-model="form.com_width" :max="1000" @operation_end="operation_end"></slider>
+                    <slider v-model="form.com_width" :max="1000" @operation_end="container_size_change"></slider>
                 </el-form-item>
                 <el-form-item label="容器高度">
-                    <slider v-model="form.com_height" :max="1000" @operation_end="operation_end"></slider>
+                    <slider v-model="form.com_height" :max="1000" @operation_end="container_size_change"></slider>
                 </el-form-item>
             </card-container>
             <div class="bg-f5 divider-line" />
@@ -60,7 +60,7 @@
                         </el-radio-group>
                     </el-form-item>
                     <el-form-item label="边框粗细">
-                        <slider v-model="form.border_size" :max="100" @operation_end="operation_end"></slider>
+                        <slider v-model="form.border_size" :max="100" @operation_end="container_size_change"></slider>
                     </el-form-item>
                 </template>
             </card-container>
@@ -68,7 +68,7 @@
     </div>
 </template>
 <script setup lang="ts">
-import { get_data_fields, get_history_name, location_compute } from '@/utils';
+import { get_container_location, get_data_fields, get_history_name, location_compute } from '@/utils';
 import { isEmpty } from 'lodash';
 const props = defineProps({
     value: {
@@ -119,18 +119,28 @@ const operation_end = () => {
 };
 // #region 位置计算
 // 监听数据变化
-watch(
-    diy_data,
-    (val) => {
-        diy_data.value.location.x = location_compute(form.value.com_width, val.location.x, 390);
-        diy_data.value.location.y = location_compute(form.value.com_height, val.location.y, center_height.value);
-        diy_data.value.location.record_x = location_compute(form.value.com_width, val.location.record_x, 390);
-        diy_data.value.location.record_y = location_compute(form.value.com_height, val.location.record_y, center_height.value);
-        diy_data.value.location.staging_y = location_compute(form.value.com_height, val.location.staging_y, center_height.value);
-        form.value.staging_height = form.value.com_height;
-    },
-    { immediate: true, deep: true }
-);
+const size_location_change = (location: { x: number, y: number, record_x: number, record_y: number, staging_y: number }) => {
+    diy_data.value.location.x = location_compute(form.value.com_width, location.x, 390);
+    diy_data.value.location.y = location_compute(form.value.com_height, location.y, center_height.value);
+    diy_data.value.location.record_x = location_compute(form.value.com_width, location.record_x, 390);
+    diy_data.value.location.record_y = location_compute(form.value.com_height, location.record_y, center_height.value);
+    diy_data.value.location.staging_y = location_compute(form.value.com_height, location.staging_y, center_height.value);
+    form.value.staging_height = form.value.com_height;
+}
+// 组件大小变化触发事件
+const container_size_change = () => {
+    const { spacing = 0, type = 'left', id = '' } = form.value.data_follow;
+    // 获取新的位置
+    const { x: new_x, y: new_y } = get_container_location(props.componentOptions, id, type, spacing, diy_data.value.location.x, diy_data.value.location.y);
+    // 重新更新位置信息
+    diy_data.value.location = { x: new_x, y: new_y, record_x: new_x, record_y: new_y, staging_y: new_y };
+    size_location_change(diy_data.value.location);
+    operation_end();
+}
+// 监听数据变化
+watch(() => diy_data.value, (val) => {
+    size_location_change(val.location);
+},{ immediate: true, deep: true });
 // #endregion
 </script>
 <style lang="scss" scoped>
diff --git a/src/components/common/custom-module/model-text/model-text-style.vue b/src/components/common/custom-module/model-text/model-text-style.vue
index 167cb7b8..b266f6d0 100644
--- a/src/components/common/custom-module/model-text/model-text-style.vue
+++ b/src/components/common/custom-module/model-text/model-text-style.vue
@@ -90,19 +90,19 @@
                     <el-switch v-model="form.is_width_auto" active-value="1" inactive-value="0" @change="is_width_auto_change"/>
                 </el-form-item>
                 <el-form-item v-if="form.is_width_auto == '1'" label="最大宽度">
-                    <slider v-model="form.max_width" :max="1000" @operation_end="operation_end"></slider>
+                    <slider v-model="form.max_width" :max="1000" @operation_end="container_size_change"></slider>
                 </el-form-item>
                 <el-form-item v-else label="容器宽度">
-                    <slider v-model="form.com_width" :max="1000" @operation_end="operation_end"></slider>
+                    <slider v-model="form.com_width" :max="1000" @operation_end="container_size_change"></slider>
                 </el-form-item>
                 <el-form-item label="高度自适应">
                     <el-switch v-model="form.is_height_auto" active-value="1" inactive-value="0" @change="is_height_auto_change"/>
                 </el-form-item>
                 <el-form-item v-if="form.is_height_auto == '1'" label="最大高度">
-                    <slider v-model="form.max_height" :max="1000" @operation_end="operation_end"></slider>
+                    <slider v-model="form.max_height" :max="1000" @operation_end="container_size_change"></slider>
                 </el-form-item>
                 <el-form-item v-else label="容器高度">
-                    <slider v-model="form.com_height" :max="1000" @operation_end="operation_end"></slider>
+                    <slider v-model="form.com_height" :max="1000" @operation_end="container_size_change"></slider>
                 </el-form-item>
                 <el-form-item label="背景颜色">
                     <mult-color-picker :value="form.color_list" :type="form.direction" @update:value="mult_color_picker_event"></mult-color-picker>
@@ -133,7 +133,7 @@
                         </el-radio-group>
                     </el-form-item>
                     <el-form-item label="边框粗细">
-                        <slider v-model="form.border_size" :max="100" @operation_end="operation_end"></slider>
+                        <slider v-model="form.border_size" :max="100" @operation_end="container_size_change"></slider>
                     </el-form-item>
                 </template>
             </card-container>
@@ -142,7 +142,7 @@
     </div>
 </template>
 <script setup lang="ts">
-import { location_compute, get_data_fields, get_history_name } from '@/utils';
+import { location_compute, get_data_fields, get_history_name, get_container_location } from '@/utils';
 const props = defineProps({
     value: {
         type: Object,
@@ -237,18 +237,28 @@ const is_height_auto_change = (val: string | number | boolean) => {
 };
 // #region 位置计算
 // 监听数据变化
-watch(
-    diy_data,
-    (val) => {
-        diy_data.value.location.x = location_compute(form.value.com_width, val.location.x, 390);
-        diy_data.value.location.y = location_compute(form.value.com_height, val.location.y, center_height.value);
-        diy_data.value.location.record_x = location_compute(form.value.com_width, val.location.record_x, 390);
-        diy_data.value.location.record_y = location_compute(form.value.com_height, val.location.record_y, center_height.value);
-        diy_data.value.location.staging_y = location_compute(form.value.com_height, val.location.staging_y, center_height.value);
-        form.value.staging_height = form.value.com_height;
-    },
-    { immediate: true, deep: true }
-);
+const size_location_change = (location: { x: number, y: number, record_x: number, record_y: number, staging_y: number }) => {
+    diy_data.value.location.x = location_compute(form.value.com_width, location.x, 390);
+    diy_data.value.location.y = location_compute(form.value.com_height, location.y, center_height.value);
+    diy_data.value.location.record_x = location_compute(form.value.com_width, location.record_x, 390);
+    diy_data.value.location.record_y = location_compute(form.value.com_height, location.record_y, center_height.value);
+    diy_data.value.location.staging_y = location_compute(form.value.com_height, location.staging_y, center_height.value);
+    form.value.staging_height = form.value.com_height;
+}
+// 组件大小变化触发事件
+const container_size_change = () => {
+    const { spacing = 0, type = 'left', id = '' } = form.value.data_follow;
+    // 获取新的位置
+    const { x: new_x, y: new_y } = get_container_location(props.componentOptions, id, type, spacing, diy_data.value.location.x, diy_data.value.location.y);
+    // 重新更新位置信息
+    diy_data.value.location = { x: new_x, y: new_y, record_x: new_x, record_y: new_y, staging_y: new_y };
+    size_location_change(diy_data.value.location);
+    operation_end();
+}
+// 监听数据变化
+watch(() => diy_data.value, (val) => {
+    size_location_change(val.location);
+},{ immediate: true, deep: true });
 // #endregion
 </script>
 <style lang="scss" scoped>
diff --git a/src/utils/index.ts b/src/utils/index.ts
index d9bf758c..dd339280 100644
--- a/src/utils/index.ts
+++ b/src/utils/index.ts
@@ -946,4 +946,54 @@ export const diy_data_handle = (data: any, old_id: string, new_val: any, com_wid
             }
         }
     });
+}
+
+/**
+ * 接口Item定义了具有特定属性的项的结构
+ * 包含项的唯一标识id，项的位置location，以及项的组件数据com_data
+ */
+interface Item {
+    id: string;
+    location: { x: number; y: number };
+    com_data: { com_width: number; com_height: number };
+}
+
+/**
+ * 计算容器的位置
+ * 根据提供的项列表、特定项的ID、位置类型、间距以及初始位置坐标，计算出新容器的位置
+ * 
+ * @param list 项的列表，每个项都符合Item接口的结构
+ * @param id 需要计算位置的项的ID
+ * @param type 定义了计算位置的类型，可以是'left'（计算左侧位置）或'top'（计算顶部位置）
+ * @param spacing 项之间的间距
+ * @param locationx 容器的初始x轴位置
+ * @param locationy 容器的初始y轴位置
+ * @returns 返回一个包含新x和y坐标的对象，根据type参数的不同，相应的坐标将被计算更新
+ */
+export const get_container_location = (list: Item[], id: string, type: 'left' | 'top', spacing: number, locationx: number, locationy: number) => {
+    let x = locationx;
+    let y = locationy;
+
+    // 遍历项列表，寻找匹配给定ID的项
+    for (const item of list) {
+        if (item.id === id) {
+            // 解构获取项的位置和组件数据，如果没有提供则使用默认值
+            const { location = { x: 0, y: 0 }, com_data = { com_width: 0, com_height: 0 } } = item;
+            // 计算新的x和y坐标，根据组件的宽度/高度和间距
+            const new_x = location.x + com_data.com_width + spacing;
+            const new_y = location.y + com_data.com_height + spacing;
+
+            // 根据type参数更新x或y坐标
+            if (type === 'left') {
+                x = new_x;
+            } else if (type === 'top') {
+                y = new_y;
+            }
+
+            break; // 找到匹配项后即停止遍历
+        }
+    }
+
+    // 返回更新后的坐标
+    return { x, y };
 }
\ No newline at end of file