From 5708d439bed08da13c35de07cd4584f3e6c8cede Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E4=BA=8E=E8=82=96=E7=A3=8A?= <18851179580@163.com>
Date: Mon, 24 Feb 2025 18:48:55 +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=E6=9B=B4=E6=96=B0?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../custom-module/custom-location/index.vue   | 21 ++---
 .../custom-module/data-rendering/index.vue    | 69 ++++++++++++++--
 .../model-custom-group/index.vue              |  2 +-
 .../model-custom-group-style.vue              |  8 +-
 .../model-icon/model-icon-style.vue           |  8 +-
 .../model-image/model-image-style.vue         |  8 +-
 .../model-lines/model-lines-style.vue         |  8 +-
 .../model-panel/model-panel-style.vue         |  8 +-
 .../common/custom-module/model-text/index.vue |  9 ++-
 .../model-text/model-text-style.vue           | 18 +++--
 .../components/custom-config/index.vue        | 22 ++++--
 .../model-custom/components/index-default.ts  | 20 +++--
 .../model-custom/components/index.vue         | 78 ++++++++++---------
 .../model-goods-list-content.vue              |  4 +-
 src/config/const/article-list.ts              |  4 +-
 src/config/const/article-tabs.ts              |  4 +-
 src/config/const/goods-list.ts                |  4 +-
 src/config/const/goods-tabs.ts                |  4 +-
 src/utils/index.ts                            | 69 ++++++++++++++++
 19 files changed, 266 insertions(+), 102 deletions(-)

diff --git a/src/components/common/custom-module/custom-location/index.vue b/src/components/common/custom-module/custom-location/index.vue
index d948cf25..17103951 100644
--- a/src/components/common/custom-module/custom-location/index.vue
+++ b/src/components/common/custom-module/custom-location/index.vue
@@ -1,7 +1,7 @@
 <template>
     <card-container>
         <div class="mb-12">定位设置</div>
-        <el-form-item label="跟随组件">
+        <el-form-item v-if="isFollow" label="跟随组件">
             <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>
@@ -33,6 +33,10 @@ const props = defineProps({
         type: Array<any>,
         default: () => [],
     },
+    isFollow: {
+        type: Boolean,
+        default: true
+    }
 });
 // 跟随内容
 const data_follow = defineModel('follow', { type: Object, default: { follow_type: 'none', follow_id: '', follow_spacing: 0, is_disable_x: false, is_disable_y: false }});
@@ -49,39 +53,28 @@ 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发生变化时的处理
 watch(() => data_follow.value, (val) => {
-    const { spacing = 0, type = 'left', id = '' } = data_follow.value;
+    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为可以拖动
+            // // 先解除不可移动的处理 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);
             }
         }
     });
diff --git a/src/components/common/custom-module/data-rendering/index.vue b/src/components/common/custom-module/data-rendering/index.vue
index 907d660a..284cea7e 100644
--- a/src/components/common/custom-module/data-rendering/index.vue
+++ b/src/components/common/custom-module/data-rendering/index.vue
@@ -1,7 +1,7 @@
 <template>
     <div class="w h re custom-other">
-        <div v-for="(item, index) in list" :key="item.id" :class="`main-content flex-row ${ animation_class(item.com_data) }`" :style="{'left': percentage_count(item.location.x) , 'top': percentage_count(item.location.y), 'width': percentage_count(item.com_data.com_width), 'height': percentage_count(item.com_data.com_height), 'z-index': (customList.length - 1) - index}">
-            <template v-if="item.key == 'text'">
+        <div v-for="(item, index) in list" :key="item.id" ref="signList" :data-id="item.id" :data-location-x="item.location.x" :data-location-y="item.location.y" :class="`main-content flex-row ${ animation_class(item.com_data) }`" :style="`left: ${ percentage_count(item.location.x, item.com_data.data_follow, 'left') }; top: ${ percentage_count(item.location.y, item.com_data.data_follow, 'top') }; width: ${ percentage_count(item.com_data.com_width, item.com_data.data_follow, 'width', item.com_data.is_width_auto, item.com_data.max_width) }; height: ${ percentage_count(item.com_data.com_height, item.com_data.data_follow, 'height', item.com_data.is_height_auto, item.com_data.max_height) };z-index: ${ (list.length - 1) - index};`">
+        <template v-if="item.key == 'text'">
                 <model-text :key="item.id" :value="item.com_data" :scale="scale" :source-list="sourceList" :config-loop="configLoop" :is-custom="isCustom" :custom-group-field-id="customGroupFieldId" :is-custom-group="isCustomGroup" :title-params="showData?.data_name || 'name'" :is-display-panel="true"></model-text>
             </template>
             <template v-else-if="item.key == 'img'">
@@ -93,9 +93,68 @@ const props = defineProps({
     }
 });
 
-const list = computed(() => props.customList);
-const percentage_count = (val: number) => {
-    return val * props.scale + 'px';
+const list = ref(props.customList);
+const signList = ref<HTMLElement[] | null>(null);
+watch(() => props.customList, async (val) => {
+    list.value = val;
+    const follow_list = val.filter(item => item.com_data?.data_follow?.id !== '');
+    if (follow_list.length > 0) {
+        await nextTick();
+        if (signList.value && signList.value.length > 0) {
+            // 使用双重for循环确保每个组件都进行了刷新
+            signList.value.forEach((item) => {
+                follow_list.forEach((item1) => {
+                    const { data_follow } = item1.com_data;
+                    if (data_follow?.id === item.dataset.id) {
+                        if (data_follow?.type == 'left') {
+                            if (item1.location && item.dataset.locationX) {
+                                const locationX = parseFloat(item.dataset.locationX);
+                                if (!isNaN(locationX)) {
+                                    item1.location.x = ((locationX + data_follow.spacing) * props.scale) + item.clientWidth;
+                                }
+                            }
+                        } else if (data_follow?.type == 'top') {
+                            if (item1.location && item.dataset.locationY) {
+                                const locationY = parseFloat(item.dataset.locationY);
+                                if (!isNaN(locationY)) {
+                                    item1.location.y = ((locationY + data_follow.spacing) * props.scale) + item.clientWidth;
+                                }
+                            }
+                        }
+                    }
+                })
+            });
+        }
+    }
+}, { immediate: true, deep: true });
+
+const percentage_count = (val: number, data_follow: { id: string, type: string }, type: string, is_auto?: string, max_size?: number) => {
+    if (['left', 'top'].includes(type)) {
+        const { id = '', type: follow_type = 'left' } = data_follow;
+        if (id !== '' && follow_type == type) {
+            return val + 'px';
+        } else {
+            return val * props.scale + 'px';
+        }
+    } else {
+        if (is_auto == '1') {
+            if (type === 'width') {
+                if (max_size !== undefined && max_size > 0) {
+                    return `auto; max-width:${max_size * props.scale}px;`;
+                } else {
+                    return 'auto;';
+                }
+            } else if (type === 'height') {
+                if (max_size !== undefined && max_size > 0) {
+                    return `auto; max-height:${max_size * props.scale}px;`;
+                } else {
+                    return 'auto;';
+                }
+            }
+        } else {
+            return val * props.scale + 'px';
+        }   
+    }
 };
 
 const custom_height = computed(() => props.dataHeight * props.scale + 'px');
diff --git a/src/components/common/custom-module/model-custom-group/index.vue b/src/components/common/custom-module/model-custom-group/index.vue
index aedb4837..43a75683 100644
--- a/src/components/common/custom-module/model-custom-group/index.vue
+++ b/src/components/common/custom-module/model-custom-group/index.vue
@@ -36,7 +36,7 @@
                         </div>
                     </div>
                     <template v-else>
-                        <div class="w h" :style="style_chunk_container">
+                        <div :style="style_chunk_container">
                             <div class="w h oh" :style="style_chunk_img_container">
                                 <data-rendering :custom-list="form.custom_list" :data-height="dataHeight" :scale="custom_scale" :is-custom-group="true" :is-custom="isCustom" :config-loop="configLoop !== '1' ? form.is_use_parent_data : '1'"></data-rendering>
                             </div>
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 716847d1..99ac24ad 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" v-model:follow="form.data_follow" :component-options="componentOptions" @operation_end="operation_end"></custom-location>
+            <custom-location v-model="diy_data.location" v-model:follow="form.data_follow" :is-follow="!followName.includes(diy_data.id)" :component-options="componentOptions" @operation_end="operation_end"></custom-location>
             <div class="bg-f5 divider-line" />
             <card-container>
                 <div class="mb-12">容器设置</div>
@@ -49,7 +49,11 @@ const props = defineProps({
     componentOptions: {
         type: Array<any>,
         default: () => [],
-    }
+    },
+    followName: {
+        type: Array<string>,
+        default: [],
+    },
 });
 // 默认值
 const tabs_name = ref('content');
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 76939df9..0cb3b08c 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" v-model:follow="form.data_follow" :component-options="componentOptions" @operation_end="operation_end"></custom-location>
+            <custom-location v-model="diy_data.location" v-model:follow="form.data_follow" :is-follow="!followName.includes(diy_data.id)" :component-options="componentOptions" @operation_end="operation_end"></custom-location>
             <div class="bg-f5 divider-line" />
             <card-container>
                 <div class="mb-12">文本设置</div>
@@ -110,7 +110,11 @@ const props = defineProps({
     componentOptions: {
         type: Array<any>,
         default: () => [],
-    }
+    },
+    followName: {
+        type: Array<string>,
+        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 59199aec..685b7be1 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" v-model:follow="form.data_follow" :component-options="componentOptions" @operation_end="operation_end"></custom-location>
+            <custom-location v-model="diy_data.location" v-model:follow="form.data_follow" :is-follow="!followName.includes(diy_data.id)" :component-options="componentOptions" @operation_end="operation_end"></custom-location>
             <div class="bg-f5 divider-line" />
             <card-container>
                 <div class="mb-12">图片设置</div>
@@ -84,7 +84,11 @@ const props = defineProps({
     componentOptions: {
         type: Array<any>,
         default: () => [],
-    }
+    },
+    followName: {
+        type: Array<string>,
+        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 84deaf3a..5b08ea2e 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" v-model:follow="form.data_follow" :component-options="componentOptions" @operation_end="operation_end"></custom-location>
+            <custom-location v-model="diy_data.location" v-model:follow="form.data_follow" :is-follow="!followName.includes(diy_data.id)" :component-options="componentOptions" @operation_end="operation_end"></custom-location>
             <div class="bg-f5 divider-line" />
             <card-container class="">
                 <div class="mb-12">线条设置</div>
@@ -60,7 +60,11 @@ const props = defineProps({
     componentOptions: {
         type: Array<any>,
         default: () => [],
-    }
+    },
+    followName: {
+        type: Array<string>,
+        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 c76d8dbc..835bb2f3 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" v-model:follow="form.data_follow" :component-options="componentOptions" @operation_end="operation_end"></custom-location>
+            <custom-location v-model="diy_data.location" v-model:follow="form.data_follow" :is-follow="!followName.includes(diy_data.id)" :component-options="componentOptions" @operation_end="operation_end"></custom-location>
             <div class="bg-f5 divider-line" />
             <card-container>
                 <div class="mb-12">容器设置</div>
@@ -82,7 +82,11 @@ const props = defineProps({
     componentOptions: {
         type: Array<any>,
         default: () => [],
-    }
+    },
+    followName: {
+        type: Array<string>,
+        default: [],
+    },
 });
 // 默认值
 const state = reactive({
diff --git a/src/components/common/custom-module/model-text/index.vue b/src/components/common/custom-module/model-text/index.vue
index 2befca40..3e798200 100644
--- a/src/components/common/custom-module/model-text/index.vue
+++ b/src/components/common/custom-module/model-text/index.vue
@@ -205,7 +205,7 @@ const set_count = () => {
     if (props.isDisplayPanel) {
         return '';
     } else {
-        const { com_width = 0, com_height = 0, is_width_auto = '0', is_height_auto = '0', max_width = 0, max_height = 0} = form.value;
+        const { com_width = 0, com_height = 0, is_width_auto = '0', is_height_auto = '0', max_width = 0, max_height = 0 } = form.value;
         const new_max_width = max_width > 0 ? `max-width: ${ max_width }px;` : 'white-space: nowrap;';
         const new_max_height = max_height > 0 ? `max-height: ${ max_height }px;` : '';
         return `${ is_width_auto == '1' ? `width:100%;${ new_max_width }` : `width:${ com_width }px;`}${ is_height_auto == '1' ? `height:100%;${ new_max_height }` : `height: ${ com_height }px;` }`;
@@ -214,8 +214,9 @@ const set_count = () => {
 const emits = defineEmits(['container_change']);
 // 开启自定义的时候重新计算高度和宽度
 const modelText = ref<HTMLElement | null>(null);
-watch(() => form.value, (value) => {
+watch(() => form.value, async (value) => {
     const { is_width_auto = '0', is_height_auto = '0', max_width = 0, max_height = 0 , com_width = 0, com_height = 0} = form.value;
+    await nextTick();
     let new_width = com_width;
     let new_height = com_height;
     // 宽度自适应时 获取当前容器的宽度
@@ -227,10 +228,10 @@ watch(() => form.value, (value) => {
         new_height = modelText.value?.clientHeight || 0;
     }
     // 如果跟历史的宽度或者高度不同，则更新
-    if (new_width !== com_width && new_height !== com_height) {
+    if (new_width !== com_width || new_height !== com_height) {
         emits('container_change', new_width, new_height)
     }
-}, { deep: true });
+}, { immediate: true, deep: true });
 
 </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 ca681066..e9e6903e 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" v-model:follow="form.data_follow" :component-options="componentOptions" @operation_end="operation_end"></custom-location>
+            <custom-location v-model="diy_data.location" v-model:follow="form.data_follow" :is-follow="!followName.includes(diy_data.id)" :component-options="componentOptions" @operation_end="operation_end"></custom-location>
             <div class="bg-f5 divider-line" />
             <card-container>
                 <div class="mb-12">文本设置</div>
@@ -156,7 +156,11 @@ const props = defineProps({
     componentOptions: {
         type: Array<any>,
         default: () => [],
-    }
+    },
+    followName: {
+        type: Array<string>,
+        default: [],
+    },
 });
 // 默认值
 const state = reactive({
@@ -237,11 +241,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 f6bbd0b6..a7afc512 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" :component-options='all_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" :follow-name="follow_name" :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" :component-options='all_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" :follow-name="follow_name" :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" :component-options='all_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" :follow-name="follow_name" :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" :component-options='all_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" :follow-name="follow_name" :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" :component-options='all_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" :follow-name="follow_name" :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" :component-options='all_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" :follow-name="follow_name" :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">
@@ -126,12 +126,20 @@ const diy_data = ref<diy>({
 // 唯一标识
 const key = ref('');
 const all_diy_data = ref<Array<any>>([]);
+const follow_name = ref<Array<string>>([]);
 const right_update = (item: any, all_diy: Array<any>) => {
     diy_data.value = item;
     // 生成随机id
     key.value = Math.random().toString(36).substring(2);
+    // 筛选出所有已经被跟随过的组件
+    all_diy.forEach(item1 => {
+        if (item1.com_data?.data_follow?.id && item1.com_data.data_follow.id !== '' && !follow_name.value.includes(item1.com_data.data_follow.id)) {
+            follow_name.value.push(item1.com_data.data_follow.id);
+        }
+    });
     // 不是当前组件，并且没有跟随过其他组件的可以被跟随
-    all_diy_data.value = all_diy.filter(item1 => item.id !== item1.id && item1.com_data.data_follow.id == '');
+    all_diy_data.value = all_diy.filter(item1 => item.id !== item1.id && item1.com_data?.data_follow?.id == '');
+    console.log(all_diy_data.value);
 };
 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 748ac2ea..4773d292 100644
--- a/src/components/model-custom/components/index-default.ts
+++ b/src/components/model-custom/components/index-default.ts
@@ -25,7 +25,8 @@ const text_com_data = {
     is_height_auto: '0',
     max_width: 150,
     max_height: 17,
-    data_follow: { type: 'left', id: '', spacing: 0, is_disable_x: false, is_disable_y: false },
+    data_follow: { type: 'left', id: '', spacing: 0 },
+    is_data_update: false,
     is_rich_text: '0',
     is_up_down: '1',
     text_color: '#000',
@@ -82,7 +83,8 @@ const img_com_data = {
         id: '',
         option: {}
     },
-    data_follow: { type: 'left', id: '', spacing: 0, is_disable_x: false, is_disable_y: false },
+    data_follow: { type: 'left', id: '', spacing: 0 },
+    is_data_update: false,
     img_radius: {
         radius: 0,
         radius_top_left: 0,
@@ -131,7 +133,8 @@ const line_com_data = {
         type: '', // 条件类型
         value: '', // 值
     },
-    data_follow: { type: 'left', id: '', spacing: 0, is_disable_x: false, is_disable_y: false },
+    data_follow: { type: 'left', id: '', spacing: 0 },
+    is_data_update: false,
     animation_style: {
         type: 'none',
         number: 'infinite',
@@ -154,7 +157,8 @@ const icon_com_data = {
         id: '',
         option: {}
     },
-    data_follow: { type: 'left', id: '', spacing: 0, is_disable_x: false, is_disable_y: false },
+    data_follow: { type: 'left', id: '', spacing: 0 },
+    is_data_update: false,
     is_rich_icon: '0',
     is_up_down: '1',
     icon_color: '#000',
@@ -205,7 +209,8 @@ const panel_com_data = {
         id: '',
         option: {}
     },
-    data_follow: { type: 'left', id: '', spacing: 0, is_disable_x: false, is_disable_y: false },
+    data_follow: { type: 'left', id: '', spacing: 0 },
+    is_data_update: false,
     icon_rotate: 0,
     background_img_style: '2',
     background_img: [],
@@ -233,7 +238,7 @@ const panel_com_data = {
         number: 'infinite',
     }
 }
-
+// 自定义组件的默认值
 const custom_group_com_data = {
     // 容器高度
     com_width: 100,
@@ -243,7 +248,8 @@ const custom_group_com_data = {
         id: '',
         option: []
     },
-    data_follow: { type: 'left', id: '', spacing: 0, is_disable_x: false, is_disable_y: false },
+    data_follow: { type: 'left', id: '', spacing: 0 },
+    is_data_update: false,
     // 条件判断
     condition: {
         field: '', // 字段id
diff --git a/src/components/model-custom/components/index.vue b/src/components/model-custom/components/index.vue
index 3fefc407..eb78063b 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 + 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')">
+                                <Vue3DraggableResizable v-for="(item, index) in diy_data" :key="item.id + item.com_data.is_data_update" 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>
@@ -112,11 +112,10 @@
 </template>
 <script setup lang="ts">
 import { cloneDeep, isEmpty, property, isEqual } from 'lodash';
-import { get_math, adjustPosition, getPlatform, get_history_name } from '@/utils';
+import { get_math, adjustPosition, getPlatform, get_history_name, diy_data_handle, new_location_handle } from '@/utils';
 import { defaultComData, isRectangleIntersecting } from "./index-default";
 import { SortableEvent, VueDraggable } from 'vue-draggable-plus';
 import { commonStore, DataSourceStore } from '@/store';
-import { ItemProps } from 'element-plus';
 const common_store = commonStore();
 // 删除
 const app = getCurrentInstance();
@@ -311,6 +310,13 @@ const del = (index: null | number) => {
             });
             const show_tabs_index = diy_data.value.findIndex((item: any) => item.show_tabs == '1');
             const new_name = get_history_name(cloneDeep(diy_data.value[show_tabs_index == -1 ? 0 : show_tabs_index]));
+            // 删除的时候修改跟随组件的内容显示内容
+            const old_id = diy_data.value[index].id;
+            diy_data.value.forEach(item => {
+                if (item.com_data?.data_follow?.id === old_id) {
+                    item.com_data.data_follow.id = '';
+                }
+            });
             // 删除的是当前的这个数据
             if (show_tabs_index == index) {
                 // 调用删除接口，然后，更新数据
@@ -431,13 +437,15 @@ const cancel = () => {
 };
 //#endregion
 //#region 文本开启自适应时的处理
-const container_change = (width: number, height: number, index: number,) => {
+const container_change = (width: number, height: number, index: number) => {
+    console.log('1454545');
     diy_data.value.forEach((item, index1) => {
         if (index == index1) {
             item.com_data.com_width = width;
             item.com_data.com_height = height;
         }
     });
+    console.log(diy_data.value, '12145');
 }
 //#endregion
 //#region 容器高度发生变化时的处理，拖拽组件高度变化时数据需要重新赋值，避免拖拽不到新高度的区域
@@ -470,7 +478,7 @@ watch(() => center_height.value, () => {
             },
             com_data: {
                 // 规整历史数据，避免有新增字段不存在导致报错
-                ...Object.assign({}, cloneDeep((defaultComData as any)[`${item.key}_com_data`]), item.com_data),
+                ...Object.assign({}, cloneDeep((defaultComData as any)[`${ ['custom-group', 'auxiliary-line'].includes(item.key) ? (item.key == 'custom-group'? 'custom_group' : 'line'): item.key }_com_data`]), item.com_data),
                 com_height: item.com_data.staging_height,
                 ...(item.key == 'text' ? { max_height:item.com_data.staging_height } : {}),
                 data_source_field: {
@@ -551,50 +559,46 @@ const drop = (event: any) => {
 };
 //#endregion
 //#region 区域内拖拽显示
-const dragEndHandle = (item: any, index: number) => {
-    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;
+const dragEndHandle = (new_val: any, index: number) => {
+    const { location: old_location, com_data, id: old_id } = cloneDeep(diy_data.value[index])
+    const { data_follow = {}, com_width, com_height, is_data_update } = com_data;
+    // 处理后的x、y坐标
+    const { new_x, new_y } = new_location_handle(old_location, data_follow, new_val);
+    if (data_follow?.id == '') {
+        // 如果有跟随的模版，则需要更新跟随的模版的位置
+        const index = diy_data.value.findIndex(item => old_id == item.com_data?.data_follow?.id);
+        if (index != -1) {
+            diy_data.value = diy_data_handle(diy_data.value, old_id, new_val, com_width, com_height);
         }
-    } 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;
+    // 拖拽结束的时候组件不会更新xy，需要添加一个唯一key值，避免出现没更新的问题
+    diy_data.value[index].com_data.is_data_update = !is_data_update;
     // 对数组进行比较，确定跟之前的是否有变化
     if (!isEqual(old_location, new_location)) {
         operation_end(get_history_name(diy_data.value[index]));
     }
 };
-// 拖拽结束时触发的事件 {x: number, y: number, w: number, h: number}
+// 拖拽放大缩小结束时触发的事件 {x: number, y: number, w: number, h: number}
 const resizingHandle = (new_location: any, key: string, index: number, type: string) => {
-    const { x, y, w, h } = new_location;
-    // 对应位置的定位修改为当前更新的位置
-    diy_data.value[index].location = { x, y, record_x: x, record_y: y, staging_y: y };
+    const { location: old_location, id: old_id } = cloneDeep(diy_data.value[index]);
     // 获取到当前更新的内容
     const com_data = diy_data.value[index].com_data;
+    const { data_follow } = com_data;
+    const { w, h } = new_location;
+    // 处理后的x、y坐标
+    const { new_x, new_y } = new_location_handle(old_location, data_follow, new_location);
+    if (data_follow.id == '') {
+        // 如果有跟随的模版，则需要更新跟随的模版的位置
+        const index = diy_data.value.findIndex(item => old_id == item.com_data.data_follow.id);
+        if (index != -1) {
+            diy_data.value = diy_data_handle(diy_data.value, old_id, new_location, w, h);
+        }
+    }
+    // 对应位置的定位修改为当前更新的位置
+    diy_data.value[index].location = { x: new_x, y: new_y, record_x: new_x, record_y: new_y, staging_y: new_y };
+    // const com_data = diy_data.value[index].com_data;
     // 更新组件的宽高
     com_data.com_width = w;
     com_data.com_height = h;
diff --git a/src/components/model-goods-list/model-goods-list-content.vue b/src/components/model-goods-list/model-goods-list-content.vue
index 491f841d..60a4bc17 100644
--- a/src/components/model-goods-list/model-goods-list-content.vue
+++ b/src/components/model-goods-list/model-goods-list-content.vue
@@ -169,8 +169,8 @@ const change_style = (val: string | number | boolean | undefined): void => {
     const list = base_list.product_style_list.filter(item => item.value == form.value.theme);
     if (list.length > 0) {
         // emits('theme_change', list[0].width, list[0].height);
-        data.value.shop_img_width = list[0].width;
-        data.value.shop_img_height = list[0].height;
+        data.value.content_img_width = list[0].width;
+        data.value.content_img_height = list[0].height;
     }
 };
 const is_revise = ref(false);
diff --git a/src/config/const/article-list.ts b/src/config/const/article-list.ts
index 917bb11d..b30f32ca 100644
--- a/src/config/const/article-list.ts
+++ b/src/config/const/article-list.ts
@@ -200,8 +200,8 @@ const defaultArticleList: DefaultArticleList = {
         content_spacing: 10, // 内容间距
         article_spacing: 10, // 文章间距
         article_height: 155, // 文章高度
-        content_img_width: undefined,
-        content_img_height: undefined,
+        content_img_width: 110,
+        content_img_height: 83,
         interval_time: 3, //滚动时间
         is_roll: 1, // 是否轮播
         rolling_fashion: 'translation', // 滚动方式  translation 平移 cut-screen 切屏
diff --git a/src/config/const/article-tabs.ts b/src/config/const/article-tabs.ts
index 3c41194e..ca49daa2 100644
--- a/src/config/const/article-tabs.ts
+++ b/src/config/const/article-tabs.ts
@@ -389,8 +389,8 @@ const defaultArticleTabs: DefaultArticleTabs = {
         content_spacing: 10, // 内容间距
         article_spacing: 10, // 文章间距
         article_height: 155, // 文章高度
-        content_img_width: undefined,
-        content_img_height: undefined,
+        content_img_width: 110,
+        content_img_height: 83,
         interval_time: 3, //滚动时间
         is_roll: 1, // 是否轮播
         rolling_fashion: 'translation', // 滚动方式  translation 平移 cut-screen 切屏
diff --git a/src/config/const/goods-list.ts b/src/config/const/goods-list.ts
index 47c03621..5566c1a5 100644
--- a/src/config/const/goods-list.ts
+++ b/src/config/const/goods-list.ts
@@ -200,8 +200,8 @@ const defaultProductList: DefaultProductList = {
         content_spacing: 10,
         // 商品高度
         content_outer_height: 232,
-        content_img_width: undefined,
-        content_img_height: undefined,
+        content_img_width: 110,
+        content_img_height: 120,
         // 是否滚动
         is_roll: '1',
         interval_time: 3,
diff --git a/src/config/const/goods-tabs.ts b/src/config/const/goods-tabs.ts
index 7f4d3163..9d60b283 100644
--- a/src/config/const/goods-tabs.ts
+++ b/src/config/const/goods-tabs.ts
@@ -398,8 +398,8 @@ const defaultProductList: DefaultProductList = {
         // 商品高度
         content_outer_height: 232,
         // 商品图片宽度和高度, 为了确保历史数据显示正常，这里设置为undefined
-        content_img_width: undefined,
-        content_img_height: undefined,
+        content_img_width: 110,
+        content_img_height: 120,
         // 轮播处理
         is_roll: '1',
         interval_time: 3,
diff --git a/src/utils/index.ts b/src/utils/index.ts
index 762e0571..a497f225 100644
--- a/src/utils/index.ts
+++ b/src/utils/index.ts
@@ -879,4 +879,73 @@ export function formatDate(format: string = 'YYYY-MM-DD HH:mm:ss'): string {
         .replace('HH', hours)
         .replace('mm', minutes)
         .replace('ss', seconds);
+}
+
+type Location = {
+    x: number;
+    y: number;
+}
+type DataFollow = {
+    id: string;
+    type: string;
+}
+export const new_location_handle = (old_location: Location, data_follow: DataFollow, location: Location) => {
+    let new_x = old_location.x;
+    let new_y = old_location.y;
+    const { x, y } = location;
+    // 如果是跟随的模版,根据选中的内容 x或者y不变
+    if (data_follow.id != '') {
+        if (data_follow.type == 'left') {
+            if (old_location.x !== x) {
+                ElMessage.info('当前组件已经左跟随其他组件，x轴不允许修改');
+            }
+            new_y = y;
+        } else if (data_follow.type == 'top') {
+            if (old_location.y !== y) {
+                ElMessage.info('当前组件已经上跟随其他组件，y轴不允许修改');
+            }
+            new_x = x;
+        }
+    } else {
+        new_x = x;
+        new_y = y;
+    }
+    return { new_x, new_y }
+}
+
+/**
+ * 自定义数据处理函数
+ * 该函数用于处理组件数据，根据旧组件的ID更新新组件的位置
+ * @param data 组件数据数组
+ * @param old_id 旧组件的ID
+ * @param new_val 新组件的值，包含位置信息
+ * @param com_width 组件宽度
+ * @param com_height 组件高度
+ * @returns 返回更新后的新组件数据数组
+ */
+export const diy_data_handle = (data: any, old_id: string, new_val: any, com_width: number, com_height: number): any => {
+    // 遍历每个组件项
+    data.forEach((item: any) => {
+        // 解构获取组件跟随的配置信息，如果没有则使用默认值
+        const { id = '', type = 'left', spacing = 0 } = item?.com_data?.data_follow || { id: '', type: 'left', spacing: 0 };
+        // 判断当前组件是否被其他组件跟随
+        if (old_id == id && id !== '') {
+            // 根据新组件的位置和尺寸计算新的跟随位置
+            const new_location_x = new_val.x + com_width + spacing;
+            const new_location_y = new_val.y + com_height + spacing;
+            // 根据跟随类型更新组件位置
+            if (type =='left') {
+                // 更新组件的横向位置
+                item.location.x = new_location_x;
+                item.location.record_x = new_location_x;
+            } else if (type =='top') {
+                // 更新组件的纵向位置
+                item.location.y = new_location_y;
+                item.location.record_y = new_location_y;
+                item.location.staging_y = new_location_y;
+            }
+        }
+    });
+    // 返回更新后的组件数据数组
+    return data;
 }
\ No newline at end of file