From efd15ad94de601a84624f88bf970147f954b6426 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, 10 Feb 2025 17:55:52 +0800
Subject: [PATCH] =?UTF-8?q?=E4=BF=AE=E6=94=B9=E9=80=89=E9=A1=B9=E5=8D=A1?=
 =?UTF-8?q?=E7=9A=84=E9=80=BB=E8=BE=91=E5=A4=84=E7=90=86?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../model-article-tabs-content.vue            | 20 ++++++-------
 .../model-data-tabs-content.vue               | 16 +++++------
 .../model-goods-tabs-content.vue              | 16 +++++------
 .../model-tabs/model-tabs-content.vue         | 18 ++++++------
 src/components/page-settings/page-styles.vue  | 28 +++++++++++++------
 src/store/modules/common.ts                   | 10 +++----
 src/views/layout/components/main/index.vue    | 28 +++++++++++++++----
 7 files changed, 83 insertions(+), 53 deletions(-)

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 59159ca9..279b7285 100644
--- a/src/components/model-article-tabs/model-article-tabs-content.vue
+++ b/src/components/model-article-tabs/model-article-tabs-content.vue
@@ -7,8 +7,8 @@
                 <div class="mb-12">展示设置</div>
                 <el-form-item label="选项卡置顶">
                     <div class="flex-row align-c gap-10">
-                        <el-switch v-model="form.tabs_top_up" active-value="1" inactive-value="0" :disabled="is_immersion_model" />
-                        <el-tooltip effect="dark" :show-after="200" :hide-after="200" content="<span>1.开启沉浸样式时，选项卡置顶功能禁用</span><br/><span>2.滑动置顶仅手机端有效</span>" raw-content placement="top">
+                        <el-switch v-model="form.tabs_top_up" 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>
@@ -313,14 +313,14 @@ 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_immersion_model = computed(() => common_store.is_immersion_model);
+// // 监听沉浸式开启
+// watchEffect(() => {
+//     if (is_immersion_model.value) {
+//         form.tabs_top_up = '0';
+//     }
+// });
 // 标题浮起之后文章标题的颜色和字体更新
 const switch_chage = (val: string | number | boolean) => {
     if (val == '1') {
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 79a6c0a6..172365b1 100644
--- a/src/components/model-data-tabs/model-data-tabs-content.vue
+++ b/src/components/model-data-tabs/model-data-tabs-content.vue
@@ -7,8 +7,8 @@
                 <div class="mb-12">选项卡设置</div>
                 <el-form-item label="置顶">
                     <div class="flex-row align-c gap-10">
-                        <el-switch v-model="form.tabs_top_up" active-value="1" inactive-value="0" :disabled="is_immersion_model" />
-                        <el-tooltip effect="dark" :show-after="200" :hide-after="200" content="<span>1.开启沉浸样式时，选项卡置顶功能禁用</span><br/><span>2.滑动置顶仅手机端有效</span>" raw-content placement="top">
+                        <el-switch v-model="form.tabs_top_up" 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>
@@ -303,13 +303,13 @@ const tabs_theme_change = (val: string | number | boolean | undefined): void =>
     styles.value.tabs_color_checked = tabs_style(styles.value.tabs_color_checked, val);
 };
 // #endregion
-const is_immersion_model = computed(() => common_store.is_immersion_model);
+// const is_immersion_model = computed(() => common_store.is_immersion_model);
 
-watchEffect(() => {
-    if (is_immersion_model.value) {
-        form.value.tabs_top_up = '0';
-    }
-});
+// watchEffect(() => {
+//     if (is_immersion_model.value) {
+//         form.value.tabs_top_up = '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 3e141d18..a7fe210f 100644
--- a/src/components/model-goods-tabs/model-goods-tabs-content.vue
+++ b/src/components/model-goods-tabs/model-goods-tabs-content.vue
@@ -7,8 +7,8 @@
                 <div class="mb-12">展示设置</div>
                 <el-form-item label="选项卡置顶">
                     <div class="flex-row align-c gap-10">
-                        <el-switch v-model="form.tabs_top_up" active-value="1" inactive-value="0" :disabled="is_immersion_model" />
-                        <el-tooltip effect="dark" :show-after="200" :hide-after="200" content="<span>1.开启沉浸样式时，选项卡置顶功能禁用</span><br/><span>2.滑动置顶仅手机端有效</span>" raw-content placement="top">
+                        <el-switch v-model="form.tabs_top_up" 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>
@@ -286,12 +286,12 @@ 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_immersion_model = computed(() => common_store.is_immersion_model);
+// watchEffect(() => {
+//     if (is_immersion_model.value) {
+//         form.value.tabs_top_up = '0';
+//     }
+// });
 </script>
 <style lang="scss" scoped>
 .content {
diff --git a/src/components/model-tabs/model-tabs-content.vue b/src/components/model-tabs/model-tabs-content.vue
index 47499501..8d28a6a2 100644
--- a/src/components/model-tabs/model-tabs-content.vue
+++ b/src/components/model-tabs/model-tabs-content.vue
@@ -18,8 +18,8 @@
                     <upload v-model="form.tabs_adorn_img" v-model:icon-value="form.tabs_adorn_icon" is-icon :limit="1" size="50"></upload>
                 </el-form-item>
                 <el-form-item label="滑动置顶">
-                    <el-switch v-model="form.tabs_top_up" class="mr-10" active-value="1" inactive-value="0" :disabled="is_immersion_model" />
-                    <el-tooltip effect="dark" :show-after="200" :hide-after="200" content="<span>1.开启沉浸样式时，选项卡置顶功能禁用</span><br/><span>2.滑动置顶仅手机端有效</span>" raw-content placement="top">
+                    <el-switch v-model="form.tabs_top_up" 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>
@@ -151,13 +151,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);
-watchEffect(() => {
-    if (is_immersion_model.value) {
-        form.value.tabs_top_up = '0';
-    }
-});
+// // 选项卡是否可以滑动置顶
+// const is_immersion_model = computed(() => common_store.is_immersion_model);
+// watchEffect(() => {
+//     if (is_immersion_model.value) {
+//         form.value.tabs_top_up = '0';
+//     }
+// });
 </script>
 <style lang="scss" scoped>
 .cursor-move {
diff --git a/src/components/page-settings/page-styles.vue b/src/components/page-settings/page-styles.vue
index e8e79a49..f7ec4075 100644
--- a/src/components/page-settings/page-styles.vue
+++ b/src/components/page-settings/page-styles.vue
@@ -31,15 +31,15 @@
                 <el-form-item v-if="form.header_background_type == 'transparent'" label="沉浸样式">
                     <div class="flex-row align-c gap-10">
                         <el-switch v-model="form.immersive_style" active-value="1" inactive-value="0" @change="change_immersive_style"></el-switch>
-                        <el-tooltip effect="dark" :show-after="200" :hide-after="200" content="<span>开启沉浸样式时，不可添加选项卡和选项卡轮播。<br/>并且商品选项卡和文章选项卡的选项卡置顶功能禁用</span>" raw-content placement="top">
+                        <!-- <el-tooltip effect="dark" :show-after="200" :hide-after="200" content="<span>开启沉浸样式时，不可添加选项卡和选项卡轮播。<br/>并且商品选项卡和文章选项卡的选项卡置顶功能禁用</span>" raw-content placement="top">
                             <icon name="miaosha-hdgz" size="12" color="#999"></icon>
-                        </el-tooltip>
+                        </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="dark" :show-after="200" :hide-after="200" content="开启后第一个组件上内边距将增加顶部安全距离+导航高度" placement="top">
+                        <el-switch v-model="form.general_safe_distance_value" active-value="1" inactive-value="0" :disabled="is_tabs_0_up"></el-switch>
+                        <el-tooltip effect="dark" :show-after="200" :hide-after="200" content="<span>1.第一个组件包含选项卡置顶,并开启置顶,则强制开启安全距离。<br/>2.开启后第一个组件上内边距将增加顶部安全距离+导航高度</span>" raw-content placement="top">
                             <icon name="miaosha-hdgz" size="12" color="#999"></icon>
                         </el-tooltip>
                     </div>
@@ -170,12 +170,12 @@ const header_background_type_change_event = (val: any) => {
         form.value.immersive_style = '0';
         // 沉浸模式关闭的时候，安全距离关闭
         form.value.general_safe_distance_value = '0';
-        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);
         // }
     }
 };
@@ -196,16 +196,28 @@ const location_mult_color_picker_event = (arry: color_list[], type: number) => {
     form.value.location_color_list = arry;
     form.value.location_direction = type.toString();
 };
+const is_tabs_0_up = computed(() => common_store.is_tabs_0_up );
 
 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);
+        // common_store.set_is_immersion_model(false);
         return;
+    } else {
+        // 沉浸模式开启的时候，并且第一个是选项卡置顶，安全距离打开
+        if (is_tabs_0_up.value) {
+            form.value.general_safe_distance_value = '1';
+        }
     }
-    common_store.set_is_immersion_model(true);
+    // common_store.set_is_immersion_model(true);
 };
+// 监听tabs是否置顶
+watchEffect(() => {
+    if (is_tabs_0_up.value) {
+        form.value.general_safe_distance_value = '1';
+    }
+});
 </script>
 <style lang="scss" scoped>
 .styles {
diff --git a/src/store/modules/common.ts b/src/store/modules/common.ts
index 19087785..efa42766 100644
--- a/src/store/modules/common.ts
+++ b/src/store/modules/common.ts
@@ -4,7 +4,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 is_tabs_0_up = ref(false);
     const header_height = ref(0);
     const common = ref({
         article_category: [] as any[], //---- 文章分类
@@ -49,8 +49,8 @@ export const commonStore = defineStore('common', () => {
         is_immersion_model.value = bool;
     };
 
-    const set_is_have_tabs = (bool: boolean) => {
-        is_have_tabs.value = bool;
+    const set_is_tabs_0_up = (bool: boolean) => {
+        is_tabs_0_up.value = bool;
     };
 
     const set_header_height = (height: number) => {
@@ -61,12 +61,12 @@ export const commonStore = defineStore('common', () => {
         common,
         is_common_api,
         is_immersion_model,
-        is_have_tabs,
+        is_tabs_0_up,
         header_height,
         set_common,
         set_is_common_api,
         set_is_immersion_model,
-        set_is_have_tabs,
+        set_is_tabs_0_up,
         set_header_height,
     };
 });
diff --git a/src/views/layout/components/main/index.vue b/src/views/layout/components/main/index.vue
index 0e99253d..78e9bec8 100644
--- a/src/views/layout/components/main/index.vue
+++ b/src/views/layout/components/main/index.vue
@@ -323,11 +323,29 @@ const draggable_click = (item: componentsData) => {
         }
     }
 };
-// watchEffect(() => {
-//     if (tabs_data.value.length <= 0) {
-//         common_store.set_is_have_tabs(false);
-//     }
-// });
+// 定义常量
+const TABS_TOP_UP_ENABLED = '1';
+const DEFAULT_TABS_TOP_UP = '0';
+// 判断是否是选项卡
+watchEffect(() => {
+    if (tabs_data.value.length > 0) {
+        const tabs_top_up = tabs_data.value[0]?.com_data?.content?.tabs_top_up || DEFAULT_TABS_TOP_UP;
+        if (tabs_top_up == TABS_TOP_UP_ENABLED) {
+            common_store.set_is_tabs_0_up(true);
+        } else {
+            common_store.set_is_tabs_0_up(false);
+        }
+    } else if (diy_data.value.length > 0) {
+        const tabs_top_up = diy_data.value[0]?.com_data?.content?.tabs_top_up || DEFAULT_TABS_TOP_UP;
+        if (tabs_top_up == TABS_TOP_UP_ENABLED) {
+            common_store.set_is_tabs_0_up(true);
+        } else {
+            common_store.set_is_tabs_0_up(false);
+        }
+    } else {
+        common_store.set_is_tabs_0_up(false);
+    }
+});
 
 // 复制
 const clone_item_com_data = (item: commonComponentData) => {