From 37ebdb9d45c506dd037156f832e9b11111853077 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E4=BA=8E=E8=82=96=E7=A3=8A?= <18851179580@163.com>
Date: Fri, 21 Feb 2025 18:46:17 +0800
Subject: [PATCH] =?UTF-8?q?=E8=87=AA=E5=AE=9A=E4=B9=89=E8=B7=9F=E9=9A=8F?=
 =?UTF-8?q?=E9=80=BB=E8=BE=91=E4=BC=98=E5=8C=96?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../custom-module/custom-location/index.vue   | 57 ++++++++++++++-----
 .../model-custom-group-style.vue              |  6 +-
 .../model-icon/model-icon-style.vue           |  6 +-
 .../model-image/model-image-style.vue         |  6 +-
 .../model-lines/model-lines-style.vue         |  6 +-
 .../model-panel/model-panel-style.vue         |  6 +-
 .../model-text/model-text-style.vue           | 16 ++++--
 .../components/custom-config/index.vue        | 18 +++---
 .../model-custom/components/index-default.ts  | 12 ++--
 .../model-custom/components/index.ts          |  5 +-
 .../model-custom/components/index.vue         | 44 +++++++++++---
 11 files changed, 135 insertions(+), 47 deletions(-)

diff --git a/src/components/common/custom-module/custom-location/index.vue b/src/components/common/custom-module/custom-location/index.vue
index ccbb3ac4..d948cf25 100644
--- a/src/components/common/custom-module/custom-location/index.vue
+++ b/src/components/common/custom-module/custom-location/index.vue
@@ -2,40 +2,40 @@
     <card-container>
         <div class="mb-12">定位设置</div>
         <el-form-item label="跟随组件">
-            <el-select v-model="data_follow.follow_id" value-key="id" clearable filterable placeholder="请选择跟随的组件" size="default" class="flex-1" @change="follow_id_change()">
-                <el-option v-for="item in options.filter(item => item.type == 'images')" :key="item.field" :label="item.name" :value="item.field" />
+            <el-select v-model="data_follow.id" clearable filterable placeholder="请选择跟随的组件" size="default" class="flex-1" @change="operation_end">
+                <el-option v-for="item in componentOptions" :key="item.id" :label="!isEmpty(item.new_name) ? item.new_name : item.name" :value="item.id" />
             </el-select>
         </el-form-item>
-        <template v-if="data_follow.follow_id != ''">
+        <template v-if="data_follow.id != ''">
             <el-form-item label="跟随方式">
-                <el-radio-group v-model="data_follow.follow_type" @change="operation_end">
-                    <el-radio value="none">无</el-radio>
+                <el-radio-group v-model="data_follow.type" @change="operation_end">
                     <el-radio value="left">跟随左侧</el-radio>
                     <el-radio value="top">跟随上边</el-radio>
                 </el-radio-group>
             </el-form-item>
             <el-form-item label="跟随间距">
-                <slider v-model="data_follow.follow_spacing" :max="390" @operation_end="operation_end"></slider>
+                <slider v-model="data_follow.spacing" :max="390" @operation_end="operation_end"></slider>
             </el-form-item>
         </template>
-        <el-form-item v-if="data_follow.follow_type != 'left'" label="X轴">
+        <el-form-item v-if="(data_follow.id != '' && data_follow.type != 'left') || data_follow.id == ''" label="X轴">
             <slider v-model="data_location.x" :max="390" @operation_end="operation_end" @update:model-value="location_x_change"></slider>
         </el-form-item>
-        <el-form-item v-if="data_follow.follow_type != 'top'" label="Y轴">
+        <el-form-item v-if="(data_follow.id != '' && data_follow.type != 'top') || data_follow.id == ''" label="Y轴">
             <slider v-model="data_location.y" :max="1000" @operation_end="operation_end" @update:model-value="location_y_change"></slider>
         </el-form-item>
     </card-container>
 </template>
 
 <script lang="ts" setup>
+import { isEmpty } from 'lodash';
 const props = defineProps({
-    options: {
+    componentOptions: {
         type: Array<any>,
         default: () => [],
     },
 });
 // 跟随内容
-const data_follow = defineModel('follow', { type: Object, default: { follow_type: 'none', follow_id: '', follow_spacing: 0 }});
+const data_follow = defineModel('follow', { type: Object, default: { follow_type: 'none', follow_id: '', follow_spacing: 0, is_disable_x: false, is_disable_y: false }});
 // x轴 Y轴设计
 const data_location = defineModel({ type: Object, default: () => ({ x: 0, y: 0, record_x: 0, record_y: 0, staging_y: 0 }) });
 const emit = defineEmits(['operation_end']);
@@ -49,12 +49,41 @@ const location_x_change = (val: number) => {
 }
 // y轴变化时，更新记录的位置
 const location_y_change = (val: number) => { 
+    console.log(val);
     data_location.value.record_y = val;
     data_location.value.staging_y = val
 };
+
 // 跟随id发生变化时的处理
-const follow_id_change = () => {
-    emit('operation_end');
-    
-}
+watch(() => data_follow.value, (val) => {
+    const { spacing = 0, type = 'left', id = '' } = data_follow.value;
+    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;
+                // setTimeout(() => {
+                // //     // 等赋值完成之后再放开定位处理
+                //     data_follow.value.is_disable_x = true;
+                //     data_follow.value.is_disable_y = false;
+                // }, 0);
+            } else if (type =='top') {
+                data_location.value.y = new_y;
+                data_location.value.record_y = new_y;
+                data_location.value.staging_y = new_y
+                // setTimeout(() => {
+                // //     // 等赋值完成之后再添加禁止移动处理
+                //     data_follow.value.is_disable_x = false;
+                //     data_follow.value.is_disable_y = true;
+                // }, 0);
+            }
+        }
+    });
+}, {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 ee250718..716847d1 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
@@ -1,7 +1,7 @@
 <template>
     <div class="w h bg-f">
         <el-form :model="form" label-width="70">
-            <custom-location v-model="diy_data.location" @operation_end="operation_end"></custom-location>
+            <custom-location v-model="diy_data.location" v-model:follow="form.data_follow" :component-options="componentOptions" @operation_end="operation_end"></custom-location>
             <div class="bg-f5 divider-line" />
             <card-container>
                 <div class="mb-12">容器设置</div>
@@ -45,6 +45,10 @@ const props = defineProps({
     configLoop: {
         type: String,
         default: '1'
+    },
+    componentOptions: {
+        type: Array<any>,
+        default: () => [],
     }
 });
 // 默认值
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 a62062ee..76939df9 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
@@ -1,7 +1,7 @@
 <template>
     <div class="w h bg-f">
         <el-form :model="form" label-width="70">
-            <custom-location v-model="diy_data.location" @operation_end="operation_end"></custom-location>
+            <custom-location v-model="diy_data.location" v-model:follow="form.data_follow" :component-options="componentOptions" @operation_end="operation_end"></custom-location>
             <div class="bg-f5 divider-line" />
             <card-container>
                 <div class="mb-12">文本设置</div>
@@ -107,6 +107,10 @@ const props = defineProps({
         type: Array<any>,
         default: () => [],
     },
+    componentOptions: {
+        type: Array<any>,
+        default: () => [],
+    }
 });
 // 默认值
 const state = reactive({
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 85ba94a9..59199aec 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
@@ -1,7 +1,7 @@
 <template>
     <div class="w h bg-f">
         <el-form :model="form" label-width="70">
-            <custom-location v-model="diy_data.location" @operation_end="operation_end"></custom-location>
+            <custom-location v-model="diy_data.location" v-model:follow="form.data_follow" :component-options="componentOptions" @operation_end="operation_end"></custom-location>
             <div class="bg-f5 divider-line" />
             <card-container>
                 <div class="mb-12">图片设置</div>
@@ -81,6 +81,10 @@ const props = defineProps({
         type: Array<any>,
         default: () => [],
     },
+    componentOptions: {
+        type: Array<any>,
+        default: () => [],
+    }
 });
 // 默认值
 const state = reactive({
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 657a4b65..84deaf3a 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
@@ -1,7 +1,7 @@
 <template>
     <div class="w h bg-f">
         <el-form :model="form" label-width="70">
-            <custom-location v-model="diy_data.location" @operation_end="operation_end"></custom-location>
+            <custom-location v-model="diy_data.location" v-model:follow="form.data_follow" :component-options="componentOptions" @operation_end="operation_end"></custom-location>
             <div class="bg-f5 divider-line" />
             <card-container class="">
                 <div class="mb-12">线条设置</div>
@@ -57,6 +57,10 @@ const props = defineProps({
         type: Array<any>,
         default: () => [],
     },
+    componentOptions: {
+        type: Array<any>,
+        default: () => [],
+    }
 });
 // 默认值
 const state = reactive({
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 22fc56a9..c76d8dbc 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
@@ -1,7 +1,7 @@
 <template>
     <div class="w h bg-f">
         <el-form :model="form" label-width="70">
-            <custom-location v-model="diy_data.location" @operation_end="operation_end"></custom-location>
+            <custom-location v-model="diy_data.location" v-model:follow="form.data_follow" :component-options="componentOptions" @operation_end="operation_end"></custom-location>
             <div class="bg-f5 divider-line" />
             <card-container>
                 <div class="mb-12">容器设置</div>
@@ -79,6 +79,10 @@ const props = defineProps({
         type: Array<any>,
         default: () => [],
     },
+    componentOptions: {
+        type: Array<any>,
+        default: () => [],
+    }
 });
 // 默认值
 const state = reactive({
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 83ddf948..ca681066 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
@@ -1,7 +1,7 @@
 <template>
     <div class="w h bg-f">
         <el-form :model="form" label-width="80">
-            <custom-location v-model="diy_data.location" @operation_end="operation_end"></custom-location>
+            <custom-location v-model="diy_data.location" v-model:follow="form.data_follow" :component-options="componentOptions" @operation_end="operation_end"></custom-location>
             <div class="bg-f5 divider-line" />
             <card-container>
                 <div class="mb-12">文本设置</div>
@@ -153,6 +153,10 @@ const props = defineProps({
         type: Array<any>,
         default: () => [],
     },
+    componentOptions: {
+        type: Array<any>,
+        default: () => [],
+    }
 });
 // 默认值
 const state = reactive({
@@ -233,11 +237,11 @@ const is_height_auto_change = (val: string | number | boolean) => {
 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);
+        // 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 }
diff --git a/src/components/model-custom/components/custom-config/index.vue b/src/components/model-custom/components/custom-config/index.vue
index e9c763e9..f6bbd0b6 100644
--- a/src/components/model-custom/components/custom-config/index.vue
+++ b/src/components/model-custom/components/custom-config/index.vue
@@ -6,22 +6,22 @@
             <!-- 右侧配置区域 -->
             <div class="settings">
                 <template v-if="diy_data.key === 'img'">
-                    <model-image-style :key="key" v-model:height="center_height" :options="configLoop == '1' ? options : []" :value="diy_data" @operation_end="operation_end"></model-image-style>
+                    <model-image-style :key="key" v-model:height="center_height" :options="configLoop == '1' ? options : []" :value="diy_data" :component-options='all_diy_data' @operation_end="operation_end"></model-image-style>
                 </template>
                 <template v-else-if="diy_data.key == 'text'">
-                    <model-text-style :key="key" v-model:height="center_height" :options="configLoop == '1' ? options : []" :value="diy_data" @operation_end="operation_end"></model-text-style>
+                    <model-text-style :key="key" v-model:height="center_height" :options="configLoop == '1' ? options : []" :value="diy_data" :component-options='all_diy_data' @operation_end="operation_end"></model-text-style>
                 </template>
                 <template v-else-if="diy_data.key == 'auxiliary-line'">
-                    <model-lines-style :key="key" v-model:height="center_height" :options="configLoop == '1' ? options : []" :value="diy_data" @operation_end="operation_end"></model-lines-style>
+                    <model-lines-style :key="key" v-model:height="center_height" :options="configLoop == '1' ? options : []" :value="diy_data" :component-options='all_diy_data' @operation_end="operation_end"></model-lines-style>
                 </template>
                 <template v-else-if="diy_data.key == 'icon'">
-                    <model-icon-style :key="key" v-model:height="center_height" :options="configLoop == '1' ? options : []" :value="diy_data" @operation_end="operation_end"></model-icon-style>
+                    <model-icon-style :key="key" v-model:height="center_height" :options="configLoop == '1' ? options : []" :value="diy_data" :component-options='all_diy_data' @operation_end="operation_end"></model-icon-style>
                 </template>
                 <template v-else-if="diy_data.key == 'panel'">
-                    <model-panel-style :key="key" v-model:height="center_height" :options="configLoop == '1' ? options : []" :value="diy_data" @operation_end="operation_end"></model-panel-style>
+                    <model-panel-style :key="key" v-model:height="center_height" :options="configLoop == '1' ? options : []" :value="diy_data" :component-options='all_diy_data' @operation_end="operation_end"></model-panel-style>
                 </template>
                 <template v-else-if="diy_data.key == 'custom-group' && configType == 'custom'">
-                    <model-custom-group-style :key="key" v-model:height="center_height" :config-loop="configLoop" :options="configLoop == '1' ? options : []" :value="diy_data" @custom_edit="custom_edit" @operation_end="operation_end"></model-custom-group-style>
+                    <model-custom-group-style :key="key" v-model:height="center_height" :config-loop="configLoop" :options="configLoop == '1' ? options : []" :value="diy_data" :component-options='all_diy_data' @custom_edit="custom_edit" @operation_end="operation_end"></model-custom-group-style>
                 </template>
                 <template v-else>
                     <div class="w h flex align-c bg-f">
@@ -113,6 +113,7 @@ const dialogVisible = defineModel('visible', { type: Boolean, default: false });
 //#region 自定义编辑的内部处理逻辑
 const diy_data = ref<diy>({
     key: '',
+    id: '',
     location: {
         x: 0,
         y: 0,
@@ -124,10 +125,13 @@ const diy_data = ref<diy>({
 });
 // 唯一标识
 const key = ref('');
-const right_update = (item: any) => {
+const all_diy_data = ref<Array<any>>([]);
+const right_update = (item: any, all_diy: Array<any>) => {
     diy_data.value = item;
     // 生成随机id
     key.value = Math.random().toString(36).substring(2);
+    // 不是当前组件，并且没有跟随过其他组件的可以被跟随
+    all_diy_data.value = all_diy.filter(item1 => item.id !== item1.id && item1.com_data.data_follow.id == '');
 };
 const draglist = ref<diy_data | null>(null);
 const emits = defineEmits(['accomplish', 'custom_edit']);
diff --git a/src/components/model-custom/components/index-default.ts b/src/components/model-custom/components/index-default.ts
index 3dadc415..748ac2ea 100644
--- a/src/components/model-custom/components/index-default.ts
+++ b/src/components/model-custom/components/index-default.ts
@@ -25,7 +25,7 @@ const text_com_data = {
     is_height_auto: '0',
     max_width: 150,
     max_height: 17,
-    data_follow: { follow_type: 'none', follow_id: '', follow_spacing: 0 },
+    data_follow: { type: 'left', id: '', spacing: 0, is_disable_x: false, is_disable_y: false },
     is_rich_text: '0',
     is_up_down: '1',
     text_color: '#000',
@@ -82,7 +82,7 @@ const img_com_data = {
         id: '',
         option: {}
     },
-    data_follow: { follow_type: 'none', follow_id: '', follow_spacing: 0 },
+    data_follow: { type: 'left', id: '', spacing: 0, is_disable_x: false, is_disable_y: false },
     img_radius: {
         radius: 0,
         radius_top_left: 0,
@@ -131,7 +131,7 @@ const line_com_data = {
         type: '', // 条件类型
         value: '', // 值
     },
-    data_follow: { follow_type: 'none', follow_id: '', follow_spacing: 0 },
+    data_follow: { type: 'left', id: '', spacing: 0, is_disable_x: false, is_disable_y: false },
     animation_style: {
         type: 'none',
         number: 'infinite',
@@ -154,7 +154,7 @@ const icon_com_data = {
         id: '',
         option: {}
     },
-    data_follow: { follow_type: 'none', follow_id: '', follow_spacing: 0 },
+    data_follow: { type: 'left', id: '', spacing: 0, is_disable_x: false, is_disable_y: false },
     is_rich_icon: '0',
     is_up_down: '1',
     icon_color: '#000',
@@ -205,7 +205,7 @@ const panel_com_data = {
         id: '',
         option: {}
     },
-    data_follow: { follow_type: 'none', follow_id: '', follow_spacing: 0 },
+    data_follow: { type: 'left', id: '', spacing: 0, is_disable_x: false, is_disable_y: false },
     icon_rotate: 0,
     background_img_style: '2',
     background_img: [],
@@ -243,7 +243,7 @@ const custom_group_com_data = {
         id: '',
         option: []
     },
-    data_follow: { follow_type: 'none', follow_id: '', follow_spacing: 0 },
+    data_follow: { type: 'left', id: '', spacing: 0, is_disable_x: false, is_disable_y: false },
     // 条件判断
     condition: {
         field: '', // 字段id
diff --git a/src/components/model-custom/components/index.ts b/src/components/model-custom/components/index.ts
index b85b707b..234bc673 100644
--- a/src/components/model-custom/components/index.ts
+++ b/src/components/model-custom/components/index.ts
@@ -7,9 +7,11 @@ interface location {
 }
 interface diy {
     key: string,
+    id: string,
     location: location,
     com_data: any,
 }
+type follow = { id: string, type: string, spacing: number }
 interface diy_content extends diy{
     com_width: number,
     com_height: number,
@@ -19,7 +21,8 @@ interface diy_content extends diy{
     is_enable: string,
     src: string,
     is_hot: string,
-    id: string
+    id: string,
+    data_follow: follow
 }
 
 interface expose {
diff --git a/src/components/model-custom/components/index.vue b/src/components/model-custom/components/index.vue
index 59c16b35..3fefc407 100644
--- a/src/components/model-custom/components/index.vue
+++ b/src/components/model-custom/components/index.vue
@@ -68,7 +68,7 @@
                         <div class="w h" @mousedown.prevent="start_drag" @mousemove.prevent="move_drag" @mouseup.prevent="end_drag">
                             <DraggableContainer v-if="draggable_container" style="z-index:0" :reference-line-visible="true" :disabled="false" reference-line-color="#f00f00" @selectstart.prevent @contextmenu.prevent @dragstart.prevent>
                                 <!-- @mouseover="on_choose(index)" -->
-                                <Vue3DraggableResizable v-for="(item, index) in diy_data" :key="item.id" v-model:w="item.com_data.com_width" v-model:h="item.com_data.com_height" :min-w="0" :min-h="0" :class="[`${ animation_class(item.com_data) } `, {'plug-in-show-component-line': is_show_component_line, 'plug-in-show-tabs': item.show_tabs == '1', 'vdr-handle-z-index': item.com_data.bottom_up == '1' }]" :style="[`${ item.com_data.is_width_auto == '1' ? 'width: auto;' : '' }${ item.com_data.is_height_auto == '1' ? 'height: auto;' : '' }`, { 'z-index': (diy_data.length - 1) - index }]" :init-w="item.com_data.com_width" :init-h="item.com_data.com_height" :x="item.location.x" :y="item.location.y" :parent="true" :draggable="is_draggable" @mousedown.stop="on_choose(index, item.show_tabs)" @click.stop="on_choose(index, item.show_tabs)" @drag-end="dragEndHandle($event, index)" @resizing="resizingHandle($event, item.key, index, 'resizing')" @resize-end="resizingHandle($event, item.key, index, 'resizeEnd')">
+                                <Vue3DraggableResizable v-for="(item, index) in diy_data" :key="item.id + item.location.x + item.location.y" v-model:w="item.com_data.com_width" v-model:h="item.com_data.com_height" :min-w="0" :min-h="0" :class="[`${ animation_class(item.com_data) } `, {'plug-in-show-component-line': is_show_component_line, 'plug-in-show-tabs': item.show_tabs == '1', 'vdr-handle-z-index': item.com_data.bottom_up == '1' }]" :style="[`${ item.com_data.is_width_auto == '1' ? 'width: auto;' : '' }${ item.com_data.is_height_auto == '1' ? 'height: auto;' : '' }`, { 'z-index': (diy_data.length - 1) - index }]" :init-w="item.com_data.com_width" :init-h="item.com_data.com_height" :x="item.location.x" :y="item.location.y" :parent="true" :draggable="is_draggable" @mousedown.stop="on_choose(index, item.show_tabs)" @click.stop="on_choose(index, item.show_tabs)" @drag-end="dragEndHandle($event, index)" @resizing="resizingHandle($event, item.key, index, 'resizing')" @resize-end="resizingHandle($event, item.key, index, 'resizeEnd')">
                                     <div :class="['main-content flex-row', { 'plug-in-border': item.show_tabs == '1' }]">
                                         <template v-if="item.key == 'text'">
                                             <model-text :key="item.id" :value="item.com_data" :source-list="props.sourceList" :config-loop="configLoop" :is-custom="isCustom" :is-custom-group="isCustomGroup" :custom-group-field-id="customGroupFieldId" :title-params="showData?.data_name || 'name'" @container_change="(...value: [number,  number]) => container_change(...value, index)"></model-text>
@@ -323,7 +323,7 @@ const del = (index: null | number) => {
                     }
                     set_show_tabs(new_index);
                 } else {
-                    emits('rightUpdate', {});
+                    emits('rightUpdate', {}, diy_data.value);
                 }
             } else {
                 diy_data.value.splice(index, 1);
@@ -391,7 +391,7 @@ const set_show_tabs = (index: number) => {
             item.show_tabs = '1';
             // 滚动到指定位置
             scroll();
-            emits('rightUpdate', item);
+            emits('rightUpdate', item, diy_data.value);
         }
     });
 };
@@ -427,7 +427,7 @@ const cancel = () => {
         item.show_tabs = '0';
     });
     select_index.value = null;
-    emits('rightUpdate', {});
+    emits('rightUpdate', {}, diy_data.value);
 };
 //#endregion
 //#region 文本开启自适应时的处理
@@ -488,7 +488,7 @@ watch(() => center_height.value, () => {
             },
         }));
         // 容器高度变化时，组件不绑定右侧数据
-        emits('rightUpdate', {});
+        emits('rightUpdate', {}, diy_data.value);
         draggable_container.value = true;
     });
 },{ immediate:true, deep: true });
@@ -552,8 +552,36 @@ const drop = (event: any) => {
 //#endregion
 //#region 区域内拖拽显示
 const dragEndHandle = (item: any, index: number) => {
-    const old_location = diy_data.value[index].location;
-    const new_location = { x: item.x, y: item.y, record_x: item.x, record_y: item.y, staging_y: item.y };
+    const old_location = cloneDeep(diy_data.value[index].location);
+    const { data_follow, com_width, com_height} = diy_data.value[index].com_data;
+    let new_x = old_location.x;
+    let new_y = old_location.y;
+    // 如果是跟随的模版,根据选中的内容 x或者y不变
+    if (data_follow.id != '') {
+        if (data_follow.type == 'left') {
+            new_y = item.y;
+        } else if (data_follow.type == 'top') {
+            new_x = item.x;
+        }
+    } else {
+        diy_data.value.forEach((item1: any) => {
+            const { id = '', type = 'left', spacing = 0 } = item1.com_data.data_follow;
+            // 判断当前组件是否被其他组件跟随
+            if (item.id == id) {
+                const new_location_x = old_location.x + com_width + spacing;
+                const new_location_y = old_location.y + com_height + spacing;
+                if (type =='left') {
+                    item1.location.x = new_location_x;
+                    item1.location.record_x = new_location_x;
+                } else if (type =='top') {
+                    item1.location.y = new_location_y;
+                    item1.location.record_y = new_location_y;
+                    item1.location.staging_y = new_location_y;
+                }
+            }
+        });
+    }
+    const new_location = { x: new_x, y: new_y, record_x: new_x, record_y: new_y, staging_y: new_y };
     diy_data.value[index].location = new_location;
     // 对数组进行比较，确定跟之前的是否有变化
     if (!isEqual(old_location, new_location)) {
@@ -658,7 +686,7 @@ const end_drag = (event: MouseEvent) => {
         });
         // 清除选中
         select_index.value = null;
-        emits('rightUpdate', {});
+        emits('rightUpdate', {}, diy_data.value);
     }
     rect_start.value = { x: 0, y: 0, width: 0, height: 0 };
     rect_end.value = { x: 0, y: 0, width: 0, height: 0 };