Merge remote-tracking branch 'origin/dev-yxl' into dev-sws

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

@@ -4,7 +4,12 @@
             <card-container>
                 <div class="mb-12">展示设置</div>
                 <el-form-item label="选项卡置顶">
-                    <el-switch v-model="form.tabs_top_up" active-value="1" inactive-value="0" />
+                    <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>开启沉浸样式时，选项卡置顶功能禁用</span>" raw-content placement="top">
+                            <icon name="tips" size="16"></icon>
+                        </el-tooltip>
+                    </div>
                 </el-form-item>
                 <el-form-item label="选项卡风格">
                     <el-radio-group v-model="form.tabs_theme" @change="tabs_theme_change">
@@ -254,6 +259,12 @@ 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';
+    }
+})
 </script>
 <style lang="scss" scoped>
 .content {

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

@@ -4,7 +4,12 @@
             <card-container>
                 <div class="mb-12">展示设置</div>
                 <el-form-item label="选项卡置顶">
-                    <el-switch v-model="form.tabs_top_up" active-value="1" inactive-value="0" />
+                    <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>开启沉浸样式时，选项卡置顶功能禁用</span>" raw-content placement="top">
+                            <icon name="tips" size="16"></icon>
+                        </el-tooltip>
+                    </div>
                 </el-form-item>
                 <el-form-item label="选项卡风格">
                     <el-radio-group v-model="form.tabs_theme" @change="tabs_theme_change">
@@ -272,6 +277,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';
+    }
+})
 </script>
 <style lang="scss" scoped>
 .content {

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

@@ -41,15 +41,20 @@
                         <el-radio value="white">白色</el-radio>
                     </el-radio-group>
                 </el-form-item>
+                <el-form-item v-if="['1', '2'].includes(search_content.theme)" label="标题名称">
+                    <color-text-size-group v-model:color="form.header_background_title_color" v-model:typeface="form.header_background_title_typeface" v-model:size="form.header_background_title_size" default-color="#000000"></color-text-size-group>
+                </el-form-item>
                 <el-form-item v-if="form.header_background_type == 'transparent'" label="沉浸样式">
-                    <el-switch v-model="form.immersive_style" active-value="1" inactive-value="0"></el-switch>
+                    <div class="flex-row align-c gap-10">
+                        <el-switch v-model="form.immersive_style" active-value="1" inactive-value="0" :disabled="is_have_tabs" @change="change_immersive_style"></el-switch>
+                        <el-tooltip effect="dark" :show-after="200" :hide-after="200" content="<span>开启沉浸样式时，不可添加选项卡和选项卡轮播。<br/>并且商品选项卡和文章选项卡的选项卡置顶功能禁用</span>" raw-content placement="top">
+                            <icon name="tips" size="16"></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>
-                <el-form-item v-if="['1', '2'].includes(search_content.theme)" label="标题名称">
-                    <color-text-size-group v-model:color="form.header_background_title_color" v-model:typeface="form.header_background_title_typeface" v-model:size="form.header_background_title_size" default-color="#000000"></color-text-size-group>
-                </el-form-item>
             </card-container>
             <div class="bg-f5 divider-line" />
             <card-container>
@@ -79,6 +84,8 @@
     </div>
 </template>
 <script setup lang="ts">
+import { commonStore } from '@/store';
+const common_store = commonStore();
 const props = defineProps({
     value: {
         type: Object,
@@ -91,6 +98,10 @@ const props = defineProps({
         default: () => {},
     },
 });
+const is_have_tabs = computed(() => {
+    return common_store.is_have_tabs;
+});
+
 const emit = defineEmits(['update:value']);
 const state = reactive({
     form: props.value,
@@ -102,8 +113,13 @@ const { form, search_content } = toRefs(state);
 const header_background_type_change_event = (val: any) => {
     if (val === 'color_image') {
         form.value.immersive_style = '0';
+        common_store.set_is_immersion_model(false);
     } else {
-        form.value.immersive_style = '1';
+        // 没有tabs的情况下，默认开启沉浸模式
+        if (!common_store.is_have_tabs) {
+            form.value.immersive_style = '1';
+            common_store.set_is_immersion_model(true);
+        }
     }
 };
 
@@ -114,6 +130,13 @@ const mult_color_picker_event = (arry: color_list[], type: number) => {
     form.value.header_background_color_list = arry;
     form.value.header_background_direction = type.toString();
 };
+const change_immersive_style = (val: string | number | boolean) => {
+    if (val === '0') {
+        common_store.set_is_immersion_model(false);
+        return;
+    }
+    common_store.set_is_immersion_model(true);
+}
 </script>
 <style lang="scss" scoped>
 .styles {

src/store/modules/common.ts

@@ -3,6 +3,8 @@ import { defineStore } from 'pinia';
 export const commonStore = defineStore('common', () => {
     // 链接是否需要调接口判断
     const is_common_api = ref(false);
+    const is_immersion_model = ref(false);
+    const is_have_tabs = ref(false);
     const common = ref({
         article_category: [] as any[], //---- 文章分类
         attachment_category: [] as any[], //---- 附件分类
@@ -34,10 +36,22 @@ export const commonStore = defineStore('common', () => {
         is_common_api.value = bool;
     };
 
+    const set_is_immersion_model = (bool: boolean) => {
+        is_immersion_model.value = bool;
+    };
+
+    const set_is_have_tabs = (bool: boolean) => {
+        is_have_tabs.value = bool;
+    };
+
     return {
         common,
         is_common_api,
+        is_immersion_model,
+        is_have_tabs,
         set_common,
         set_is_common_api,
+        set_is_immersion_model,
+        set_is_have_tabs,
     };
 });

src/views/layout/components/main/index.vue

@@ -208,6 +208,12 @@ const show_model_border = ref(true);
 // 点击添加tabs组件
 const draggable_click = (item: componentsData) => {
     const type_data = ['tabs', 'tabs-carousel'];
+    
+    if (common_store.is_immersion_model) {
+        ElMessage.error('开启沉浸样式下不可以添加该组件');
+        return;
+    }
+
     if (type_data.includes(item.key) && isEmpty(tabs_data.value)) {
         // 添加tabs组件
         tabs_data.value.push({
@@ -219,6 +225,7 @@ const draggable_click = (item: componentsData) => {
             key: item.key,
             com_data: cloneDeep((defaultSettings as any)[item.key.replace(/-/g, '_')]),
         });
+        common_store.set_is_have_tabs(true);
         set_tabs_event(true);
     } else if (type_data.includes(item.key) && !isEmpty(tabs_data.value)) {
         if (tabs_data.value[0].key == item.key) {
@@ -228,6 +235,12 @@ const draggable_click = (item: componentsData) => {
         }
     }
 };
+watchEffect(() => {
+    if (tabs_data.value.length <= 0) {
+        common_store.set_is_have_tabs(false);
+    }
+});
+
 // 复制
 const clone_item_com_data = (item: commonComponentData) => {
     return {