From f156491ae2bdfa1b7285aa82ef1a6e8c4b1e2590 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 14:37:06 +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=BF=AE=E6=94=B9?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../custom-module/custom-location/index.vue   |  10 +-
 .../custom-module/data-rendering/index.vue    | 140 +++++++++++++-----
 .../common/custom-module/model-text/index.vue |  37 ++---
 .../model-text/model-text-style.vue           |   1 -
 .../common/subscript/subscript-content.vue    |   3 +
 .../common/subscript/subscript-styles.vue     |   3 +
 .../model-article-tabs-content.vue            |  25 +++-
 .../components/custom-config/index.vue        |   2 +-
 .../model-custom/components/index.vue         |  62 +++++---
 .../model-data-tabs-content.vue               |  24 ++-
 .../model-goods-tabs-content.vue              |  23 ++-
 src/components/page-settings/page-styles.vue  |   8 +-
 src/config/const/article-tabs.ts              |   2 +
 src/config/const/data-tabs.ts                 |   2 +
 src/config/const/goods-tabs.ts                |   2 +
 src/utils/index.ts                            |   2 -
 src/views/layout/index.vue                    |  12 +-
 17 files changed, 247 insertions(+), 111 deletions(-)

diff --git a/src/components/common/custom-module/custom-location/index.vue b/src/components/common/custom-module/custom-location/index.vue
index 17103951..17e30357 100644
--- a/src/components/common/custom-module/custom-location/index.vue
+++ b/src/components/common/custom-module/custom-location/index.vue
@@ -2,7 +2,7 @@
     <card-container>
         <div class="mb-12">定位设置</div>
         <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-select v-model="data_follow.id" clearable filterable placeholder="请选择跟随的组件" size="default" class="flex-1" @change="data_follow_id_change">
                 <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>
@@ -56,6 +56,14 @@ const location_y_change = (val: number) => {
     data_location.value.record_y = val;
     data_location.value.staging_y = val
 };
+// 数据源id变化时，更新记录的数据，避免出现清空之后为undefined的情况
+const data_follow_id_change = (val: string) => {
+    if (!isEmpty(val)) {
+        data_follow.value.id = val;
+    } else {
+        data_follow.value.id = '';
+    }
+};
 
 // 跟随id发生变化时的处理
 watch(() => data_follow.value, (val) => {
diff --git a/src/components/common/custom-module/data-rendering/index.vue b/src/components/common/custom-module/data-rendering/index.vue
index 284cea7e..e9677e73 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 ref="allSignList" class="w h re custom-other">
         <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'">
+            <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'">
@@ -23,6 +23,8 @@
     </div>
 </template>
 <script lang="ts" setup>
+import { cloneDeep } from 'lodash';
+import { location_compute } from '@/utils';
 // 定义 customList 中每个元素的结构
 interface CustomItem {
     id: string | number;
@@ -93,69 +95,125 @@ const props = defineProps({
     }
 });
 
-const list = ref(props.customList);
+const updateLocation = (targetItem: HTMLElement, data_follow: { spacing: number }, scale: number, isX: boolean): number => {
+    try {
+        const locationValueStr = targetItem.dataset[`location${isX ? 'X' : 'Y'}`];
+        if (locationValueStr == null) {
+            return 0;
+        }
+        const locationValue = parseFloat(locationValueStr);
+        if (isNaN(locationValue) || scale <= 0 || (isX ? targetItem.clientWidth < 0 : targetItem.clientHeight < 0)) return 0;
+
+        return ((locationValue + data_follow.spacing) * scale) + (isX ? targetItem.clientWidth : targetItem.clientHeight);
+    } catch (error) {
+        return 0;
+    }
+};
+
+const list = ref<CustomItem[]>([]);
+const allSignList = ref<HTMLElement | null>(null);
 const signList = ref<HTMLElement[] | null>(null);
+const custom_width = ref(0);
+
 watch(() => props.customList, async (val) => {
-    list.value = val;
-    const follow_list = val.filter(item => item.com_data?.data_follow?.id !== '');
+    // 第一次渲染先渲染全部数据
+    const new_val = cloneDeep(val);
+    list.value = new_val;
+    // 判断是否有跟随的数据
+    const follow_list = new_val.filter(item => item.com_data?.data_follow?.id !== '');
     if (follow_list.length > 0) {
         await nextTick();
+        // 获取当前容器的宽度
+        if (allSignList.value) {
+            custom_width.value = allSignList.value.clientWidth;
+        }
+        // 第二次如果有跟随数据，更新对应数据的内容， 如果有超出容器范围的数据，限制其超出容器范围
         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;
-                                }
+            const idMap = new Map(signList.value.map(item => [item.dataset.id, item]));
+            list.value.forEach((item1) => {
+                const { data_follow } = item1.com_data;
+                const targetItem = idMap.get(data_follow?.id);
+                if (targetItem) {
+                    // 获取自身的id信息
+                    const text_item = item1.key == 'text' ? idMap.get((item1?.id || '')+ '') : undefined;
+                    if (data_follow?.type === 'left') {
+                        try {
+                            // 更新位置信息 
+                            const location_x = updateLocation(targetItem, data_follow, props.scale, true);
+                            // 获取组件的宽度，如果是宽度自适应，则需要重新计算位置
+                            let item_width = item1.com_data.com_width;
+                            // 如果是宽度自适应,需要重新判断一下处理逻辑
+                            if (item1.com_data?.is_width_auto === '1' && text_item) {
+                                item_width = text_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;
-                                }
+                            // 根据容器信息更新位置信息
+                            item1.location.x = location_compute(item_width, location_x, custom_width.value);
+                        } catch (error) {
+                            console.log(error);
+                        }
+                    } else if (data_follow?.type === 'top') {
+                        try {
+                            // 更新位置信息 
+                            const location_y = updateLocation(targetItem, data_follow, props.scale, false);
+                            // 获取组件的宽度，如果是宽度自适应，则需要重新计算位置
+                            let item_height = item1.com_data.com_height;
+                            // 如果是高度自适应,需要重新判断一下处理逻辑
+                            if (item1.com_data?.is_height_auto === '1' && text_item) {
+                                item_height = text_item.clientHeight;
                             }
+                            // 根据容器信息更新位置信息
+                            item1.location.y = location_compute(item_height, location_y, props.dataHeight * props.scale);
+                        } catch (error) {
+                            console.log(error);
                         }
                     }
-                })
+                }
             });
         }
     }
 }, { immediate: true, deep: true });
 
-const percentage_count = (val: number, data_follow: { id: string, type: string }, type: string, is_auto?: string, max_size?: number) => {
+/**
+ * 根据给定的值、跟随数据、类型等参数计算并返回一个表示百分比或特定值的字符串
+ * 主要用于计算CSS样式中的尺寸属性值
+ * 
+ * @param {number} val - 需要转换为百分比或特定值的原始数值
+ * @param {Object} data_follow - 包含跟随信息的对象，用于确定是否需要跟随其他元素
+ * @param {string} type - 尺寸类型，可以是'left'、'top'、'width'或'height'
+ * @param {string} [is_auto] - 可选参数，如果设置为'1'，则根据type和max_size计算自动样式
+ * @param {number} [max_size] - 可选参数，用于计算最大宽度或高度
+ * @returns {string} - 返回一个表示百分比或特定值的字符串，用于CSS样式
+ */
+ const percentage_count = (val: number, data_follow: { id: string, type: string }, type: string, is_auto?: string, max_size?: number) => {
+    // 检查类型是否为'left'或'top'，如果是，则根据跟随数据计算样式
     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';
+        // 如果id不为空且follow_type与type匹配，则返回原始值的字符串表示
+        if (id !== '' && follow_type === type) {
+            return `${val}px`;
         }
+        // 如果条件不满足，则根据比例缩放val并返回
+        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;`;
+        // 如果is_auto设置为'1'，则根据type和max_size计算自动样式
+        if (is_auto === '1') {
+            if (type === 'width' || type === 'height') {
+                if (typeof max_size === 'number' && max_size >= 0) {
+                    const scaledMaxSize = max_size * props.scale;
+                    const autoStyle = 'auto;';
+                    const maxSizeStyle = ` max-${type}: ${scaledMaxSize}px;`;
+                    const whiteSpaceStyle = type === 'width' ? ' white-space:nowrap;' : '';
+                    return `${ autoStyle }${ maxSizeStyle }${ whiteSpaceStyle }`;
                 } else {
                     return 'auto;';
                 }
             }
         } else {
-            return val * props.scale + 'px';
-        }   
+            // 如果is_auto未设置或条件不满足，则根据比例缩放val并返回
+            return `${val * props.scale}px`;
+        }
     }
-};
+}
 
 const custom_height = computed(() => props.dataHeight * props.scale + 'px');
 
diff --git a/src/components/common/custom-module/model-text/index.vue b/src/components/common/custom-module/model-text/index.vue
index 3e798200..8fe3c845 100644
--- a/src/components/common/custom-module/model-text/index.vue
+++ b/src/components/common/custom-module/model-text/index.vue
@@ -214,24 +214,27 @@ const set_count = () => {
 const emits = defineEmits(['container_change']);
 // 开启自定义的时候重新计算高度和宽度
 const modelText = ref<HTMLElement | null>(null);
-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;
-    // 宽度自适应时 获取当前容器的宽度
-    if (is_width_auto == '1') {
-        new_width = modelText.value?.clientWidth || 0;
+watch(() => props.value, (value) => {
+    if (!props.isDisplayPanel) {
+        const { is_width_auto = '0', is_height_auto = '0', max_width = 0, max_height = 0, com_width = 0, com_height = 0 } = value;
+        nextTick(() => {
+            let new_width = com_width;
+            let new_height = com_height;
+            // 宽度自适应时 获取当前容器的宽度
+            if (is_width_auto == '1') {
+                new_width = modelText.value?.clientWidth || 0;
+            }
+            // 高度自适应时时 获取当前容器的高度
+            if (is_height_auto == '1') {
+                new_height = modelText.value?.clientHeight || 0;
+            }
+            // 如果跟历史的宽度或者高度不同，则更新
+            // if (new_width !== com_width || new_height !== com_height) {
+            emits('container_change', new_width, new_height);
+            // }
+        });
     }
-    // 高度自适应时时 获取当前容器的高度
-    if (is_height_auto == '1') {
-        new_height = modelText.value?.clientHeight || 0;
-    }
-    // 如果跟历史的宽度或者高度不同，则更新
-    if (new_width !== com_width || new_height !== com_height) {
-        emits('container_change', new_width, new_height)
-    }
-}, { immediate: true, deep: 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 e9e6903e..167cb7b8 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
@@ -143,7 +143,6 @@
 </template>
 <script setup lang="ts">
 import { location_compute, get_data_fields, get_history_name } from '@/utils';
-import { isEmpty } from 'lodash';
 const props = defineProps({
     value: {
         type: Object,
diff --git a/src/components/common/subscript/subscript-content.vue b/src/components/common/subscript/subscript-content.vue
index 6079555a..03ddd22c 100644
--- a/src/components/common/subscript/subscript-content.vue
+++ b/src/components/common/subscript/subscript-content.vue
@@ -31,5 +31,8 @@ const props = defineProps({
     }
 });
 const form = ref(props.value);
+watch(() => props.value, (val) => {
+    form.value = val;
+}, {immediate: true, deep: true});
 const is_text = computed(() => form.value.subscript_type == 'text');
 </script>
\ No newline at end of file
diff --git a/src/components/common/subscript/subscript-styles.vue b/src/components/common/subscript/subscript-styles.vue
index cb993984..46a89666 100644
--- a/src/components/common/subscript/subscript-styles.vue
+++ b/src/components/common/subscript/subscript-styles.vue
@@ -110,6 +110,9 @@ const props = defineProps({
 });
 
 const form = ref(props.value);
+watch(() => props.value, (val) => {
+    form.value = val;
+}, {immediate: true, deep: true});
 let clone_form = cloneDeep(props.value);
 
 const base_list = {
diff --git a/src/components/model-article-tabs/model-article-tabs-content.vue b/src/components/model-article-tabs/model-article-tabs-content.vue
index bae71c87..5550c768 100644
--- a/src/components/model-article-tabs/model-article-tabs-content.vue
+++ b/src/components/model-article-tabs/model-article-tabs-content.vue
@@ -20,6 +20,16 @@
                         </el-tooltip>
                     </div>
                 </el-form-item>
+                <template v-if="form.tabs_top_up == '1' && !is_not_general_safe_distance">
+                    <el-form-item label="安全距离">
+                        <div class="flex-row align-c gap-10">
+                            <el-switch v-model="form.is_general_safe_distance" active-value="1" inactive-value="0" />
+                            <el-tooltip effect="dark" :show-after="200" :hide-after="200" content="<span>选项卡置顶是否需要安全距离</span>" raw-content placement="top">
+                                <icon name="miaosha-hdgz" size="12" color="#999"></icon>
+                            </el-tooltip>
+                        </div>
+                    </el-form-item>
+                </template>
                 <el-form-item label="选项卡风格">
                     <el-radio-group v-model="form.tabs_theme" @change="tabs_theme_change">
                         <el-radio v-for="item in base_list.tabs_theme_list" :key="item.value" :value="item.value">{{ item.name }}</el-radio>
@@ -343,14 +353,13 @@ const styles = reactive(props.tabStyle);
 const tabs_theme_change = (val: string | number | boolean | undefined): void => {
     styles.tabs_color_checked = tabs_style(styles.tabs_color_checked, val);
 };
-// // 监听是否开启沉浸式
-// const is_immersion_model = computed(() => common_store.is_immersion_model);
-// // 监听沉浸式开启
-// watchEffect(() => {
-//     if (is_immersion_model.value) {
-//         form.tabs_top_up = '0';
-//     }
-// });
+// 沉浸模式下是否设置安全距离
+const is_not_general_safe_distance = computed(() => common_store.is_immersion_model && !common_store.is_general_safe_distance);
+watchEffect(() => {
+    if (is_not_general_safe_distance.value) {
+        form.value.is_general_safe_distance = '0';
+    }
+});
 // 标题浮起之后文章标题的颜色和字体更新
 const switch_chage = (val: string | number | boolean) => {
     if (val == '1') {
diff --git a/src/components/model-custom/components/custom-config/index.vue b/src/components/model-custom/components/custom-config/index.vue
index a7afc512..3b77770a 100644
--- a/src/components/model-custom/components/custom-config/index.vue
+++ b/src/components/model-custom/components/custom-config/index.vue
@@ -132,6 +132,7 @@ const right_update = (item: any, all_diy: Array<any>) => {
     // 生成随机id
     key.value = Math.random().toString(36).substring(2);
     // 筛选出所有已经被跟随过的组件
+    follow_name.value = [];
     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);
@@ -139,7 +140,6 @@ const right_update = (item: any, all_diy: Array<any>) => {
     });
     // 不是当前组件，并且没有跟随过其他组件的可以被跟随
     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.vue b/src/components/model-custom/components/index.vue
index eb78063b..c8c75414 100644
--- a/src/components/model-custom/components/index.vue
+++ b/src/components/model-custom/components/index.vue
@@ -71,7 +71,7 @@
                                 <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>
+                                            <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, item.id)"></model-text>
                                         </template>
                                         <template v-else-if="item.key == 'img'">
                                             <model-image :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" :img-params="showData?.data_logo || ''"></model-image>
@@ -112,7 +112,7 @@
 </template>
 <script setup lang="ts">
 import { cloneDeep, isEmpty, property, isEqual } from 'lodash';
-import { get_math, adjustPosition, getPlatform, get_history_name, diy_data_handle, new_location_handle } from '@/utils';
+import { get_math, adjustPosition, getPlatform, get_history_name, diy_data_handle, new_location_handle, location_compute } from '@/utils';
 import { defaultComData, isRectangleIntersecting } from "./index-default";
 import { SortableEvent, VueDraggable } from 'vue-draggable-plus';
 import { commonStore, DataSourceStore } from '@/store';
@@ -437,15 +437,26 @@ const cancel = () => {
 };
 //#endregion
 //#region 文本开启自适应时的处理
-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;
+const container_change = (width: number, height: number, index: number, id: string) => {
+    let location = { x: 0, y: 0 };
+    // 确保 index 是有效的
+    if (index >= 0 && index < diy_data.value.length) {
+        // 使用 for 循环并在找到目标索引后立即退出
+        for (let i = 0; i < diy_data.value.length; i++) {
+            if (i === index) {
+                diy_data.value[i].com_data.com_width = width;
+                diy_data.value[i].com_data.com_height = height;
+                location = diy_data.value[i].location;
+                break; // 找到目标索引后退出循环
+            }
         }
-    });
-    console.log(diy_data.value, '12145');
+    }
+    setTimeout(() => {
+        const filter_index = diy_data.value.findIndex(item => id == item.com_data?.data_follow?.id);
+        if (filter_index != -1) {
+            diy_data_handle(diy_data.value, id, location, width, height);
+        }
+    }, 0);
 }
 //#endregion
 //#region 容器高度发生变化时的处理，拖拽组件高度变化时数据需要重新赋值，避免拖拽不到新高度的区域
@@ -456,7 +467,20 @@ const drag_area_height = computed(() => center_height.value + 'px');
 const drag_area_width = computed(() => center_width.value + 'px');
 // 头部页面显示内容
 const drag_area_top_width = computed(() => center_width.value > 170 ? center_width.value + 'px' : '170px');
-
+// 跟随的x，y重新计算
+const location_handle = (item: any, location: number, type: string) => {
+    if (item?.com_data?.data_follow?.id != '') {
+        let size = item.com_data.com_height;
+        let max_size = center_height.value;
+        if (type == 'width') {
+            size = item.com_data.com_width;
+            max_size = center_width.value;
+        }
+        return location_compute(size, location, max_size);
+    } else {
+        return location;
+    }
+};
 const draggable_container = ref(true);
 let data = reactive<diy_content[]>([]);
 // 拖拽组件高度变化时数据需要重新赋值，避免拖拽不到新高度的区域
@@ -466,15 +490,15 @@ watch(() => center_height.value, () => {
     draggable_container.value = false;
     nextTick(() => {
         // 在 DOM 中添加组件
-        diy_data.value = data.map((item, index) => ({
+        diy_data.value = data.map((item) => ({
             ...item,
             show_tabs: '0',
             location: {
-                x: item.location.x,
-                y: item.location.staging_y,
-                record_x: item.location.x,
-                record_y: item.location.staging_y,
-                staging_y: item.location.staging_y,
+                x: location_handle(item, item.location.x, 'width'),
+                y: location_handle(item, item.location.staging_y, 'height'),
+                record_x: location_handle(item, item.location.x, 'width'),
+                record_y: location_handle(item, item.location.staging_y, 'height'),
+                staging_y: location_handle(item, item.location.staging_y, 'height'),
             },
             com_data: {
                 // 规整历史数据，避免有新增字段不存在导致报错
@@ -568,7 +592,7 @@ const dragEndHandle = (new_val: any, index: number) => {
         // 如果有跟随的模版，则需要更新跟随的模版的位置
         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);
+            diy_data_handle(diy_data.value, old_id, new_val, com_width, com_height);
         }
     }
     const new_location = { x: new_x, y: new_y, record_x: new_x, record_y: new_y, staging_y: new_y };
@@ -593,7 +617,7 @@ const resizingHandle = (new_location: any, key: string, index: number, type: str
         // 如果有跟随的模版，则需要更新跟随的模版的位置
         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_handle(diy_data.value, old_id, new_location, w, h);
         }
     }
     // 对应位置的定位修改为当前更新的位置
diff --git a/src/components/model-data-tabs/model-data-tabs-content.vue b/src/components/model-data-tabs/model-data-tabs-content.vue
index bcbe013a..21ae7c3b 100644
--- a/src/components/model-data-tabs/model-data-tabs-content.vue
+++ b/src/components/model-data-tabs/model-data-tabs-content.vue
@@ -20,6 +20,16 @@
                         </el-tooltip>
                     </div>
                 </el-form-item>
+                <template v-if="form.tabs_top_up == '1' && !is_not_general_safe_distance">
+                    <el-form-item label="安全距离">
+                        <div class="flex-row align-c gap-10">
+                            <el-switch v-model="form.is_general_safe_distance" active-value="1" inactive-value="0" />
+                            <el-tooltip effect="dark" :show-after="200" :hide-after="200" content="<span>选项卡置顶是否需要安全距离</span>" raw-content placement="top">
+                                <icon name="miaosha-hdgz" size="12" color="#999"></icon>
+                            </el-tooltip>
+                        </div>
+                    </el-form-item>
+                </template>
                 <el-form-item label="风格">
                     <el-radio-group v-model="form.tabs_theme" @change="tabs_theme_change">
                         <el-radio v-for="item in base_list.tabs_style_list" :key="item.value" :value="item.value">{{ item.name }}</el-radio>
@@ -334,13 +344,13 @@ const tabs_theme_change = (val: string | number | boolean | undefined): void =>
     }
 }
 // #endregion
-// const is_immersion_model = computed(() => common_store.is_immersion_model);
-
-// watchEffect(() => {
-//     if (is_immersion_model.value) {
-//         form.value.tabs_top_up = '0';
-//     }
-// });
+// 沉浸模式下是否设置安全距离
+const is_not_general_safe_distance = computed(() => common_store.is_immersion_model && !common_store.is_general_safe_distance);
+watchEffect(() => {
+    if (is_not_general_safe_distance.value) {
+        form.value.is_general_safe_distance = '0';
+    }
+});
 </script>
 <style lang="scss" scoped>
 .content {
diff --git a/src/components/model-goods-tabs/model-goods-tabs-content.vue b/src/components/model-goods-tabs/model-goods-tabs-content.vue
index e817b2a2..83c0429c 100644
--- a/src/components/model-goods-tabs/model-goods-tabs-content.vue
+++ b/src/components/model-goods-tabs/model-goods-tabs-content.vue
@@ -20,6 +20,16 @@
                         </el-tooltip>
                     </div>
                 </el-form-item>
+                <template v-if="form.tabs_top_up == '1' && !is_not_general_safe_distance">
+                    <el-form-item label="安全距离">
+                        <div class="flex-row align-c gap-10">
+                            <el-switch v-model="form.is_general_safe_distance" active-value="1" inactive-value="0" />
+                            <el-tooltip effect="dark" :show-after="200" :hide-after="200" content="<span>选项卡置顶是否需要安全距离</span>" raw-content placement="top">
+                                <icon name="miaosha-hdgz" size="12" color="#999"></icon>
+                            </el-tooltip>
+                        </div>
+                    </el-form-item>
+                </template>
                 <el-form-item label="选项卡风格">
                     <el-radio-group v-model="form.tabs_theme" @change="tabs_theme_change">
                         <el-radio v-for="item in base_list.tabs_style_list" :key="item.value" :value="item.value">{{ item.name }}</el-radio>
@@ -316,12 +326,13 @@ const is_revise = ref(false);
 const change_shop_type = () => {
     is_revise.value = true;
 };
-// const is_immersion_model = computed(() => common_store.is_immersion_model);
-// watchEffect(() => {
-//     if (is_immersion_model.value) {
-//         form.value.tabs_top_up = '0';
-//     }
-// });
+// 是否设置安全距离
+const is_not_general_safe_distance = computed(() => common_store.is_immersion_model && !common_store.is_general_safe_distance);
+watchEffect(() => {
+    if (is_not_general_safe_distance.value) {
+        form.value.is_general_safe_distance = '0';
+    }
+});
 </script>
 <style lang="scss" scoped>
 .content {
diff --git a/src/components/page-settings/page-styles.vue b/src/components/page-settings/page-styles.vue
index 402a2540..45c98f72 100644
--- a/src/components/page-settings/page-styles.vue
+++ b/src/components/page-settings/page-styles.vue
@@ -171,12 +171,12 @@ const header_background_type_change_event = (val: any) => {
         // 沉浸模式关闭的时候，安全距离关闭
         form.value.general_safe_distance_value = '0';
         common_store.set_is_general_safe_distance(false);
-        // common_store.set_is_immersion_model(false);
+        common_store.set_is_immersion_model(false);
     } else {
         // 没有tabs的情况下，默认开启沉浸模式
         // if (!common_store.is_have_tabs) {
         form.value.immersive_style = '1';
-        // common_store.set_is_immersion_model(true);
+        common_store.set_is_immersion_model(true);
         // }
     }
 };
@@ -202,13 +202,13 @@ const change_immersive_style = (val: string | number | boolean) => {
         // 沉浸模式关闭的时候，安全距离关闭
         form.value.general_safe_distance_value = '0';
         common_store.set_is_general_safe_distance(false);
-        // common_store.set_is_immersion_model(false);
+        common_store.set_is_immersion_model(false);
     } else {
         // 沉浸模式开启的时候，安全距离打开
         form.value.general_safe_distance_value = '1';
         common_store.set_is_general_safe_distance(true);
     }
-    // common_store.set_is_immersion_model(true);
+    common_store.set_is_immersion_model(true);
 };
 
 const general_safe_distance_value_change = (val: string | number | boolean) => {
diff --git a/src/config/const/article-tabs.ts b/src/config/const/article-tabs.ts
index ca49daa2..c21041da 100644
--- a/src/config/const/article-tabs.ts
+++ b/src/config/const/article-tabs.ts
@@ -33,6 +33,7 @@ interface DefaultArticleTabs {
         tabs_theme: string;
         tabs_adorn_icon: string;
         tabs_adorn_img: uploadList[];
+        is_general_safe_distance: string;
         tabs_top_up: string;
         article_theme: string;
         article_carousel_col: string;
@@ -143,6 +144,7 @@ const defaultArticleTabs: DefaultArticleTabs = {
         // 对齐方式
         justification: 'left',
         tabs_theme: '0',
+        is_general_safe_distance: '0',
         // 选中装饰图标
         tabs_adorn_icon: 'checked-smooth',
         tabs_adorn_img: [],
diff --git a/src/config/const/data-tabs.ts b/src/config/const/data-tabs.ts
index bcea15ca..861cb87f 100644
--- a/src/config/const/data-tabs.ts
+++ b/src/config/const/data-tabs.ts
@@ -28,6 +28,7 @@ interface DefaultProductList {
         tabs_theme: string;
         tabs_adorn_icon: string;
         tabs_adorn_img: uploadList[];
+        is_general_safe_distance: string;
         tabs_top_up: string;
         tabs_list: articleTabsList[];
         tabs_active_index: number;
@@ -148,6 +149,7 @@ const defaultProductList: DefaultProductList = {
         tabs_theme: '0',
         // 选中装饰图标
         tabs_adorn_icon: 'checked-smooth',
+        is_general_safe_distance: '0',
         tabs_adorn_img: [],
         // 是否置顶
         tabs_top_up: '0',
diff --git a/src/config/const/goods-tabs.ts b/src/config/const/goods-tabs.ts
index 9d60b283..0064841b 100644
--- a/src/config/const/goods-tabs.ts
+++ b/src/config/const/goods-tabs.ts
@@ -30,6 +30,7 @@ interface DefaultProductList {
         tabs_theme: string;
         tabs_adorn_icon: string;
         tabs_adorn_img: uploadList[];
+        is_general_safe_distance: string;
         tabs_top_up: string;
         theme: string;
         carousel_col: number;
@@ -161,6 +162,7 @@ const defaultProductList: DefaultProductList = {
         tabs_theme: '0',
         // 选中装饰图标
         tabs_adorn_icon: 'checked-smooth',
+        is_general_safe_distance: '0',
         tabs_adorn_img: [],
         // 是否置顶
         tabs_top_up: '0',
diff --git a/src/utils/index.ts b/src/utils/index.ts
index a497f225..d9bf758c 100644
--- a/src/utils/index.ts
+++ b/src/utils/index.ts
@@ -946,6 +946,4 @@ export const diy_data_handle = (data: any, old_id: string, new_val: any, com_wid
             }
         }
     });
-    // 返回更新后的组件数据数组
-    return data;
 }
\ No newline at end of file
diff --git a/src/views/layout/index.vue b/src/views/layout/index.vue
index 8dd69804..c170889c 100644
--- a/src/views/layout/index.vue
+++ b/src/views/layout/index.vue
@@ -125,7 +125,7 @@ const clear_data_event = () => {
     form.value.tabs_data = [];
     form.value.diy_data = [];
     // 数据清空之后，将公共沉浸模式判断为false
-    // common_store.set_is_immersion_model(false);
+    common_store.set_is_immersion_model(false);
     common_store.set_is_general_safe_distance(false);
     diy_data_item.value = new_tem_form.header;
 };
@@ -147,9 +147,13 @@ const init = () => {
                 
                 data.diy_data = data_merge(data.diy_data);
                 data.tabs_data = data_merge(data.tabs_data);
-                // 判断默认数据是否开启沉浸式,并且开启了安全距离
-                if (data.header.com_data.style.immersive_style == '1' && data.header.com_data.style.general_safe_distance_value == '1') {
-                    common_store.set_is_general_safe_distance(true);
+                // 判断默认数据是否开启沉浸式
+                if (data.header.com_data.style.immersive_style === '1') {
+                    common_store.set_is_immersion_model(true);
+                    // 判断默认数据是否开启沉浸式,并且开启了安全距离
+                    if (data.header.com_data.style.general_safe_distance_value == '1') {
+                        common_store.set_is_general_safe_distance(true);
+                    }
                 }
                 form.value = data;
             } else {