From a90b267b9ba2b3c5ed18b9bd95fdbdfe9c0a2e2e Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E4=BA=8E=E8=82=96=E7=A3=8A?= <18851179580@163.com>
Date: Sat, 19 Oct 2024 11:33:06 +0800
Subject: [PATCH] =?UTF-8?q?=E6=B7=BB=E5=8A=A0=E5=AE=89=E5=85=A8=E8=B7=9D?=
 =?UTF-8?q?=E7=A6=BB=E9=80=BB=E8=BE=91?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/model-article-list/index.vue   |  1 -
 src/components/model-custom/index.vue         |  1 +
 .../model-custom/model-custom-content.vue     |  2 ++
 src/components/model-data-magic/index.vue     |  5 ---
 .../model-data-magic-content.vue              |  1 +
 src/components/model-float-window/index.vue   |  2 --
 src/components/page-settings/page-styles.vue  | 12 +++++++
 src/config/const/header-nav.ts                |  4 +++
 src/config/const/index.ts                     |  1 +
 src/store/modules/common.ts                   |  7 ++++
 src/types/global.d.ts                         |  1 +
 src/utils/index.ts                            | 12 +++++--
 src/views/layout/components/main/index.vue    | 36 +++++++++++++++++--
 src/views/layout/index.vue                    |  5 ++-
 14 files changed, 77 insertions(+), 13 deletions(-)

diff --git a/src/components/model-article-list/index.vue b/src/components/model-article-list/index.vue
index b3d39677..aed3ce8f 100644
--- a/src/components/model-article-list/index.vue
+++ b/src/components/model-article-list/index.vue
@@ -135,7 +135,6 @@ const carousel_key = ref('0');
 const interval_time = ref(2000);
 // 轮播图是否滚动
 const is_roll = ref(1);
-
 // 内容
 const new_content = computed(() => props.value?.content || {});
 // 样式
diff --git a/src/components/model-custom/index.vue b/src/components/model-custom/index.vue
index 40c698a4..a0bc2a86 100644
--- a/src/components/model-custom/index.vue
+++ b/src/components/model-custom/index.vue
@@ -46,6 +46,7 @@ const custom_height = computed(() => form.value.height + 'px');
 const container = ref<HTMLElement | null>(null);
 const div_width = ref(0);
 const scale = ref(1);
+// 获取当前宽度 和 缩放比例
 onMounted(() => {
     if (container.value) {
         div_width.value = container.value.offsetWidth;
diff --git a/src/components/model-custom/model-custom-content.vue b/src/components/model-custom/model-custom-content.vue
index 425ca0ed..ca48ddb5 100644
--- a/src/components/model-custom/model-custom-content.vue
+++ b/src/components/model-custom/model-custom-content.vue
@@ -21,7 +21,9 @@
         </el-form>
         <Dialog ref="dialog" @accomplish="accomplish">
             <div class="flex-row h w">
+                <!-- 左侧和中间区域 -->
                 <DragIndex ref="draglist" :key="dragkey" v-model:height="center_height" :source-list="form.data_source_content" :list="custom_list" @right-update="right_update"></DragIndex>
+                <!-- 右侧配置区域 -->
                 <div class="settings">
                     <template v-if="diy_data.key === 'img'">
                         <model-image-style :key="key" v-model:height="center_height" :options="model_data_source" :value="diy_data"></model-image-style>
diff --git a/src/components/model-data-magic/index.vue b/src/components/model-data-magic/index.vue
index e2670f1e..a5a5efa7 100644
--- a/src/components/model-data-magic/index.vue
+++ b/src/components/model-data-magic/index.vue
@@ -309,11 +309,6 @@ const carousel_change = (index: number, key: number) => {
         data_magic_list.value[key].actived_index = index;
     }
 }
-
-// 不属于第9个，并且第9个的第一个和第二个
-const spacing_processing = (index: number) => {
-    return form.value.style_actived != 8 || (form.value.style_actived === 8 && [0, 1].includes(index))
-}
 // 公共样式
 const style_container = computed(() => common_styles_computer(new_style.value.common_style));
 const style_img_container = computed(() => common_img_computer(new_style.value.common_style));
diff --git a/src/components/model-data-magic/model-data-magic-content.vue b/src/components/model-data-magic/model-data-magic-content.vue
index f9fecf79..ec8badb2 100644
--- a/src/components/model-data-magic/model-data-magic-content.vue
+++ b/src/components/model-data-magic/model-data-magic-content.vue
@@ -33,6 +33,7 @@
                 </el-form-item>
             </card-container>
             <div class="bg-f5 divider-line" />
+            <!-- 内容和样式组件 -->
             <el-tabs v-model="tabs_name" class="content-tabs">
                 <el-tab-pane label="内容设置" name="content">
                     <tabs-content :value="form.data_magic_list[selected_active].data_content" :is-show-title="is_show_title"></tabs-content>
diff --git a/src/components/model-float-window/index.vue b/src/components/model-float-window/index.vue
index 3941ab95..f92089d8 100644
--- a/src/components/model-float-window/index.vue
+++ b/src/components/model-float-window/index.vue
@@ -43,8 +43,6 @@ watch(props.value, (val) => {
     }
 
     style.value = location;
-    // 60 为自身高度
-    // new_style.value.offset_number_percentage = (new_style.value.offset_number / (844 - 70)).toFixed(4);
     emits('change', { bottom: new_style.value.offset_number, location: new_style.value.display_location });
 }, {immediate: true, deep: true});
 </script>
diff --git a/src/components/page-settings/page-styles.vue b/src/components/page-settings/page-styles.vue
index b9bc6076..cd52e640 100644
--- a/src/components/page-settings/page-styles.vue
+++ b/src/components/page-settings/page-styles.vue
@@ -39,6 +39,14 @@
                         </el-tooltip>
                     </div>
                 </el-form-item>
+                <el-form-item v-if="form.header_background_type == 'transparent' && form.immersive_style === '1'" label="安全距离">
+                    <div class="flex-row align-c gap-10">
+                        <el-switch v-model="form.general_safe_distance_value" active-value="1" inactive-value="0"></el-switch>
+                        <el-tooltip effect="light" :show-after="200" :hide-after="200" content="开启后第一个组件上内边距将增加顶部安全距离+导航高度" placement="top">
+                            <icon name="miaosha-hdgz" size="12" color="#999"></icon>
+                        </el-tooltip>
+                    </div>
+                </el-form-item>
                 <el-form-item label="上滑展示">
                     <el-switch v-model="form.up_slide_display" active-value="1" inactive-value="0"></el-switch>
                 </el-form-item>
@@ -127,6 +135,8 @@ watchEffect(() => {
 const header_background_type_change_event = (val: any) => {
     if (val === 'color_image') {
         form.value.immersive_style = '0';
+        // 沉浸模式关闭的时候，安全距离关闭
+        form.value.general_safe_distance_value = '0';
         common_store.set_is_immersion_model(false);
     } else {
         // 没有tabs的情况下，默认开启沉浸模式
@@ -150,6 +160,8 @@ const up_slide_mult_color_picker_event = (arry: color_list[], type: number) => {
 };
 const change_immersive_style = (val: string | number | boolean) => {
     if (val === '0') {
+        // 沉浸模式关闭的时候，安全距离关闭
+        form.value.general_safe_distance_value = '0';
         common_store.set_is_immersion_model(false);
         return;
     }
diff --git a/src/config/const/header-nav.ts b/src/config/const/header-nav.ts
index e3939682..b2784398 100644
--- a/src/config/const/header-nav.ts
+++ b/src/config/const/header-nav.ts
@@ -51,6 +51,7 @@ interface DefaultFooterNav {
         function_buttons_type: string;
         data_alone_row_space: number;
         immersive_style: string;
+        general_safe_distance_value: string;
         up_slide_display: string;
         up_slide_background_color_list: color_list[];
         up_slide_background_direction: string;
@@ -118,7 +119,10 @@ const defaultFooterNav: DefaultFooterNav = {
         header_background_title_size: 14,
         data_alone_row_space: 5,
         function_buttons_type: '0',
+        // 沉浸样式
         immersive_style: '0',
+        // 安全距离
+        general_safe_distance_value: '0',
         up_slide_display: '1',
         up_slide_background_color_list: [{ color: '#fff', color_percentage: undefined }],
         up_slide_background_direction: '180deg',
diff --git a/src/config/const/index.ts b/src/config/const/index.ts
index f60ea230..903d0f1f 100644
--- a/src/config/const/index.ts
+++ b/src/config/const/index.ts
@@ -3,6 +3,7 @@ const defaultCommon: componentsCommonCommonStyle = {
     color_list: [{ color: '', color_percentage: undefined }],
     background_img_style: '0',
     floating_up: 0,
+    padding_top_safe_value: 0, // 安全距离值，在顶部时，需要加上安全距离，防止遮挡
     padding: 0,
     padding_top: 0,
     padding_bottom: 0,
diff --git a/src/store/modules/common.ts b/src/store/modules/common.ts
index 8b1eef7f..ac3a5c22 100644
--- a/src/store/modules/common.ts
+++ b/src/store/modules/common.ts
@@ -5,6 +5,7 @@ export const commonStore = defineStore('common', () => {
     const is_common_api = ref(false);
     const is_immersion_model = ref(false);
     const is_have_tabs = ref(false);
+    const header_height = ref(0);
     const common = ref({
         article_category: [] as any[], //---- 文章分类
         attachment_category: [] as any[], //---- 附件分类
@@ -48,14 +49,20 @@ export const commonStore = defineStore('common', () => {
         is_have_tabs.value = bool;
     };
 
+    const set_header_height = (height: number) => {
+        header_height.value = height;
+    };
+
     return {
         common,
         is_common_api,
         is_immersion_model,
         is_have_tabs,
+        header_height,
         set_common,
         set_is_common_api,
         set_is_immersion_model,
         set_is_have_tabs,
+        set_header_height,
     };
 });
diff --git a/src/types/global.d.ts b/src/types/global.d.ts
index 17242e2a..58517664 100644
--- a/src/types/global.d.ts
+++ b/src/types/global.d.ts
@@ -88,6 +88,7 @@ declare global {
         direction: string;
         background_img_style: string;
         floating_up: number;
+        padding_top_safe_value: number;
         padding: number;
         padding_top: number;
         padding_bottom: number;
diff --git a/src/utils/index.ts b/src/utils/index.ts
index e9728347..f1336e96 100644
--- a/src/utils/index.ts
+++ b/src/utils/index.ts
@@ -2,6 +2,7 @@ import { createApp } from 'vue';
 import { createPinia } from 'pinia';
 import { commonStore } from '@/store';
 import App from '@/App.vue';
+import { isEmpty } from 'element-plus/es/utils';
 const app = createApp(App);
 const pinia = createPinia();
 app.use(pinia);
@@ -152,8 +153,15 @@ export function gradient_handle(color_list: color_list[], direction: string, is_
  * @param {string[], string} path
  * @returns {string}
  */
-export function padding_computer(new_style: paddingStyle, scale: number = 1) {
-    return `padding: ${new_style.padding_top * scale || 0}px ${new_style.padding_right * scale || 0}px ${new_style.padding_bottom * scale || 0}px ${new_style.padding_left * scale || 0}px;`;
+interface newPaddingStyle extends paddingStyle {
+    padding_top_safe_value: number;
+}
+export function padding_computer(new_style: newPaddingStyle, scale: number = 1) {
+    let top = new_style.padding_top;
+    if (typeof new_style.padding_top_safe_value == 'number') {
+        top += new_style.padding_top_safe_value;
+    }
+    return `padding: ${ top * scale || 0}px ${new_style.padding_right * scale || 0}px ${new_style.padding_bottom * scale || 0}px ${new_style.padding_left * scale || 0}px;`;
 }
 
 /**
diff --git a/src/views/layout/components/main/index.vue b/src/views/layout/components/main/index.vue
index 83f984f6..53e95283 100644
--- a/src/views/layout/components/main/index.vue
+++ b/src/views/layout/components/main/index.vue
@@ -149,11 +149,23 @@ watch(
 );
 const top_padding = ref(90);
 const top_margin = ref(0);
-const model_wall_top = ref(0);
 const content_style = ref('');
 const content_img_style = ref('');
 const main_content_style = ref('');
 const bottom_navigation_show = ref(true);
+// 更新数据第一个的安全距离
+const set_padding_top_value = () => {
+    if (diy_data.value.length > 0) {
+        diy_data.value.forEach((item: any, index: number) => {
+            if (index === 0) {
+                item.com_data.style.common_style.padding_top_safe_value = common_store.header_height;
+            } else {
+                item.com_data.style.common_style.padding_top_safe_value = 0;
+            }
+        });
+    }
+};
+
 watchEffect(() => {
     const data = page_data.value.com_data;
     if (data) {
@@ -167,7 +179,7 @@ watchEffect(() => {
 
         main_content_style.value = padding_computer(new_style.common_style);
 
-        const { immersive_style, up_slide_display, data_alone_row_space } = new_style;
+        const { immersive_style, up_slide_display, data_alone_row_space, general_safe_distance_value } = new_style;
         // 不开启沉浸式 和 上滑显示
         if (immersive_style == '1' || up_slide_display != '1') {
             top_padding.value = 0;
@@ -186,6 +198,18 @@ watchEffect(() => {
         } else {
             top_margin.value = 0;
         }
+        // 开始沉浸式并且开启安全距离
+        if (immersive_style == '1' && general_safe_distance_value == '1') {
+            if (content.data_alone_row_value.length > 0) {
+                common_store.set_header_height(90 + 32 + data_alone_row_space);
+            } else {
+                common_store.set_header_height(90);
+            }
+        } else {
+            // 没有开沉浸模式或者没有开启安全距离
+            common_store.set_header_height(0);
+        }
+        set_padding_top_value();
     }
 });
 
@@ -275,6 +299,8 @@ const on_sort = (item: SortableEvent) => {
     let index = item?.newIndex || 0;
     // 设置对应的位置为显示
     set_show_tabs(index);
+    // 操作的时候更新一下数据的安全距离
+    set_padding_top_value();
 };
 // 开始拖拽时
 const on_start = () => {
@@ -340,6 +366,8 @@ const del = (index: number, is_tabs: boolean) => {
                 diy_data.value.splice(index, 1);
             }
         }
+        // 操作的时候更新一下数据的安全距离
+        set_padding_top_value();
     });
 };
 // 向上移动
@@ -355,6 +383,8 @@ const moveUp = (index: number, flag: boolean) => {
         diy_data.value.splice(index - count, 0, old_data);
         // 设置对应的位置为显示
         set_show_tabs(index - count);
+        // 操作的时候更新一下数据的安全距离
+        set_padding_top_value();
     }
 };
 // 向下移动
@@ -369,6 +399,8 @@ const moveDown = (index: number, flag: boolean) => {
         // 将数据插入下一层数据中
         diy_data.value.splice(index + count, 0, old_data);
         set_show_tabs(index + count);
+        // 操作的时候更新一下数据的安全距离
+        set_padding_top_value();
     }
 };
 
diff --git a/src/views/layout/index.vue b/src/views/layout/index.vue
index 392758a4..c18d12a6 100644
--- a/src/views/layout/index.vue
+++ b/src/views/layout/index.vue
@@ -139,7 +139,10 @@ const init = () => {
                 data.footer.com_data = default_merge(data.footer.com_data, 'footer_nav');
                 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') {
+                    common_store.set_is_immersion_model(true);
+                }
                 form.value = data;
             } else {
                 is_empty.value = true;