选项卡轮播新增页面显示

src/components/model-tabs-carousel/index.vue

@@ -18,6 +18,9 @@
 <script setup lang="ts">
 import { common_styles_computer, common_img_computer, padding_computer, gradient_computer, background_computer, margin_computer, radius_computer, box_shadow_computer, border_computer } from '@/utils';
 import { cloneDeep, isEmpty } from 'lodash';
+import { commonStore } from '@/store';
+const common_store = commonStore();
+
 const props = defineProps({
     value: {
         type: Object,
@@ -39,7 +42,7 @@ watch(
     props.value,
     (val) => {
         let new_data = cloneDeep(val);
-        const { home_data } = new_data.content;
+        const { home_data, is_tabs_safe_distance = '0' } = new_data.content;
         const new_style = new_data?.style;
         // 选项卡背景设置
         const tabs_data = {
@@ -48,8 +51,14 @@ watch(
             background_img_style: new_style.tabs_bg_background_img_style,
             background_img: new_style.tabs_bg_background_img,
         }
-        tabs_container.value = gradient_computer(tabs_data) + radius_computer(new_style.tabs_radius) + margin_computer(new_style.tabs_margin) + box_shadow_computer(new_style.tabs_content) + border_computer(new_style.tabs_content);
+        // 选项卡是否开启了安全距离
-        tabs_img_container.value = background_computer(tabs_data) + padding_computer(new_style.tabs_padding);
+        const is_general_safe_distance = common_store.is_general_safe_distance && is_tabs_safe_distance == '1';
+        const new_tabs_padding = {
+            ...new_style.tabs_padding,
+            padding_top: (new_style.tabs_padding?.padding_top || 0) + (is_general_safe_distance ? common_store.header_height : 0),
+        }
+        tabs_container.value = gradient_computer(tabs_data) + radius_computer(new_style.tabs_radius) + margin_computer(new_style.tabs_margin) + box_shadow_computer(new_style.tabs_content) + border_computer(new_style.tabs_content) + `margin-top: ${ new_style.tabs_margin.margin_top - (is_general_safe_distance ? common_store.header_height : 0) }px;`;
+        tabs_img_container.value = background_computer(tabs_data) + padding_computer(new_tabs_padding);
         // 轮播区域背景设置
         const carousel_content_data = {
             color_list: new_style.carousel_content_color_list,

src/components/model-tabs/model-tabs-content.vue

@@ -23,6 +23,12 @@
                         <icon name="miaosha-hdgz" size="12" color="#999"></icon>
                     </el-tooltip>
                 </el-form-item>
+                <el-form-item v-if="is_general_safe_distance && !isCommon" label="安全距离">
+                    <el-switch v-model="form.is_tabs_safe_distance" class="mr-10" 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>
+                </el-form-item>
             </card-container>
             <div class="divider-line"></div>
             <card-container>
@@ -151,13 +157,13 @@ const on_sort = (new_list: nav_group[]) => {
 const tabs_theme_change = (val: string | number | boolean | undefined): void => {
     styles.value.tabs_color_checked = tabs_style(styles.value.tabs_color_checked, val);
 };
-// // 选项卡是否可以滑动置顶
+// 选项卡是否设置安全距离
-// const is_immersion_model = computed(() => common_store.is_immersion_model);
+const is_general_safe_distance = computed(() => common_store.is_general_safe_distance);
-// watchEffect(() => {
+watchEffect(() => {
-//     if (is_immersion_model.value) {
+    if (!is_general_safe_distance.value) {
-//         form.value.tabs_top_up = '0';
+        form.value.is_tabs_safe_distance = '0';
-//     }
+    }
-// });
+});
 </script>
 <style lang="scss" scoped>
 .cursor-move {

src/components/page-settings/page-styles.vue

@@ -38,7 +38,7 @@
                 </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-switch v-model="form.general_safe_distance_value" active-value="1" inactive-value="0" @change="general_safe_distance_value_change"></el-switch>
                         <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>
@@ -170,6 +170,7 @@ const header_background_type_change_event = (val: any) => {
         form.value.immersive_style = '0';
         // 沉浸模式关闭的时候，安全距离关闭
         form.value.general_safe_distance_value = '0';
+        common_store.set_is_general_safe_distance(false);
         // common_store.set_is_immersion_model(false);
     } else {
         // 没有tabs的情况下，默认开启沉浸模式
@@ -200,14 +201,23 @@ const change_immersive_style = (val: string | number | boolean) => {
     if (val === '0') {
         // 沉浸模式关闭的时候，安全距离关闭
         form.value.general_safe_distance_value = '0';
+        common_store.set_is_general_safe_distance(false);
         // common_store.set_is_immersion_model(false);
-        return;
     } else {
         // 沉浸模式开启的时候，安全距离打开
-            form.value.general_safe_distance_value = '1';
+        form.value.general_safe_distance_value = '1';
+        common_store.set_is_general_safe_distance(true);
     }
     // common_store.set_is_immersion_model(true);
 };
+
+const general_safe_distance_value_change = (val: string | number | boolean) => {
+    if (val === '0') {
+        common_store.set_is_general_safe_distance(false);
+        return;
+    }
+    common_store.set_is_general_safe_distance(true);
+}
 </script>
 <style lang="scss" scoped>
 .styles {

src/config/const/tabs-carousel.ts

@@ -35,6 +35,7 @@ interface defaultTabs {
         tabs_adorn_icon: string;
         tabs_adorn_img: uploadList[];
         tabs_top_up: string;
+        is_tabs_safe_distance: string;
         home_data: tabs_page;
         tabs_list: tabs_page[];
         carousel_type: string;
@@ -130,6 +131,8 @@ const defaultTabs: defaultTabs = {
         tabs_adorn_img: [],
         // 是否置顶
         tabs_top_up: '0',
+        // 是否支持安全距离
+        is_tabs_safe_distance: '0',
         // 选项卡数据
         home_data: { id: get_math(), tabs_type: '0', tabs_img: [], tabs_icon: '', title: '首页', desc: '简介', data_type: '0', classify: {}, micro_page: '', micro_page_list: {}, category_list: {} },
         tabs_list: [

src/store/modules/common.ts

@@ -4,6 +4,7 @@ export const commonStore = defineStore('common', () => {
     // 链接是否需要调接口判断
     const is_common_api = ref(false);
     const is_immersion_model = ref(false);
+    const is_general_safe_distance = ref(false);
     const is_tabs_0_up = ref(false);
     const header_height = ref(0);
     const common = ref({
@@ -49,6 +50,10 @@ export const commonStore = defineStore('common', () => {
         is_immersion_model.value = bool;
     };
     
+    const set_is_general_safe_distance =  (bool: boolean) => {
+        is_general_safe_distance.value = bool;
+    };
+
     const set_is_tabs_0_up = (bool: boolean) => {
         is_tabs_0_up.value = bool;
     };
@@ -63,9 +68,11 @@ export const commonStore = defineStore('common', () => {
         is_immersion_model,
         is_tabs_0_up,
         header_height,
+        is_general_safe_distance,
         set_common,
         set_is_common_api,
         set_is_immersion_model,
+        set_is_general_safe_distance,
         set_is_tabs_0_up,
         set_header_height,
     };

src/views/layout/index.vue

@@ -126,6 +126,7 @@ const clear_data_event = () => {
     form.value.diy_data = [];
     // 数据清空之后，将公共沉浸模式判断为false
     // common_store.set_is_immersion_model(false);
+    common_store.set_is_general_safe_distance(false);
     diy_data_item.value = new_tem_form.header;
 };
 //#region 页面初始化数据 ---------------------start
@@ -146,10 +147,10 @@ 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') {
+                if (data.header.com_data.style.immersive_style == '1' && data.header.com_data.style.general_safe_distance_value == '1') {
-                //     common_store.set_is_immersion_model(true);
+                    common_store.set_is_general_safe_distance(true);
-                // }
+                }
                 form.value = data;
             } else {
                 is_empty.value = true;