From 782b903ac8e41c3f67f7b0c7ec1d5910ab97f40e Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E4=BA=8E=E8=82=96=E7=A3=8A?= <18851179580@163.com>
Date: Fri, 8 Aug 2025 16:14:12 +0800
Subject: [PATCH] =?UTF-8?q?=E4=BF=AE=E6=94=B9=E5=AE=9A=E4=BD=8D=E6=98=BE?=
 =?UTF-8?q?=E7=A4=BA=E5=A4=84=E7=90=86?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../tabs-magic-common-style.vue               | 42 ++++++++
 .../tabs-magic-config/tabs-magic-common.vue   | 21 ----
 src/components/model-tabs-magic/index.vue     |  4 +-
 .../model-tabs-magic-content.vue              | 99 +++++++++++--------
 src/config/const/tabs-magic.ts                | 38 +++++--
 5 files changed, 131 insertions(+), 73 deletions(-)
 create mode 100644 src/components/common/tabs-magic-config/tabs-magic-common-style.vue

diff --git a/src/components/common/tabs-magic-config/tabs-magic-common-style.vue b/src/components/common/tabs-magic-config/tabs-magic-common-style.vue
new file mode 100644
index 00000000..eb1f3f34
--- /dev/null
+++ b/src/components/common/tabs-magic-config/tabs-magic-common-style.vue
@@ -0,0 +1,42 @@
+<template>
+    <card-container class="card-container">
+        <el-form-item label="是否启用">
+            <div class="flex-row gap-10">
+                <el-switch v-model="form.magic_common.is_show" active-value="1" inactive-value="0"></el-switch>
+                <tooltip content="启用则覆盖选项卡魔方->样式->通用样式"></tooltip>
+            </div>
+        </el-form-item>
+        <template v-if="form.magic_common.is_show == '1'">
+            <el-form-item label="内容背景">
+                <background-common v-model:color_list="form.magic_common.color_list" v-model:direction="form.magic_common.direction" v-model:img_style="form.magic_common.background_img_style" v-model:img="form.magic_common.background_img" @mult_color_picker_event="magic_common_mult_color_picker_event" />
+            </el-form-item>
+        </template>
+    </card-container>
+</template>
+
+<script lang="ts" setup>
+const props = defineProps({
+    value: {
+        type: Object,
+        default: () => {},
+    }
+});
+
+// 魔方独立的内容背景设置
+const magic_common_mult_color_picker_event = (arry: color_list[], type: number) => {
+    form.value.magic_common.color_list = arry;
+    form.value.magic_common.direction = type.toString();
+};
+
+const form = ref(props.value);
+watch(() => props.value, (newVal) => {
+    form.value = newVal;
+}, {immediate: true, deep: true});
+</script>
+
+<style scoped lang="scss">
+.card-container {
+    padding: 1rem !important;
+}
+</style>
+
diff --git a/src/components/common/tabs-magic-config/tabs-magic-common.vue b/src/components/common/tabs-magic-config/tabs-magic-common.vue
index a55496ae..d08ff663 100644
--- a/src/components/common/tabs-magic-config/tabs-magic-common.vue
+++ b/src/components/common/tabs-magic-config/tabs-magic-common.vue
@@ -20,21 +20,6 @@
         <!-- 阴影配置 -->
         <shadow-config v-model="form.magic_content"></shadow-config>
     </card-container>
-    <div class="divider-line"></div>
-    <card-container class="card-container">
-        <div class="mb-12">通用样式</div>
-        <el-form-item label="是否启用">
-            <div class="flex-row gap-10">
-                <el-switch v-model="form.magic_common.is_show" active-value="1" inactive-value="0"></el-switch>
-                <tooltip content="启用则覆盖选项卡魔方->样式->通用样式"></tooltip>
-            </div>
-        </el-form-item>
-        <template v-if="form.magic_common.is_show == '1'">
-            <el-form-item label="内容背景">
-                <background-common v-model:color_list="form.magic_common.color_list" v-model:direction="form.magic_common.direction" v-model:img_style="form.magic_common.background_img_style" v-model:img="form.magic_common.background_img" @mult_color_picker_event="magic_common_mult_color_picker_event" />
-            </el-form-item>
-        </template>
-    </card-container>
 </template>
 
 <script lang="ts" setup>
@@ -50,12 +35,6 @@ const magic_content_mult_color_picker_event = (arry: color_list[], type: number)
     form.value.magic_content.color_list = arry;
     form.value.magic_content.direction = type.toString();
 };
-// 魔方独立的内容背景设置
-const magic_common_mult_color_picker_event = (arry: color_list[], type: number) => {
-    form.value.magic_common.color_list = arry;
-    form.value.magic_common.direction = type.toString();
-};
-
 const form = ref(props.value);
 watch(() => props.value, (newVal) => {
     form.value = newVal;
diff --git a/src/components/model-tabs-magic/index.vue b/src/components/model-tabs-magic/index.vue
index 457e83ae..9b5824d8 100644
--- a/src/components/model-tabs-magic/index.vue
+++ b/src/components/model-tabs-magic/index.vue
@@ -83,8 +83,8 @@ const tabs_magic_value = computed(() => active_tabs_value.value[tabs_magic_type.
 // 判断是否开启轮播图背景设置
 const is_rotating_background = computed(() => active_tabs_value.value.rotating_background == '1');
 // 选中的公共样式
-const style_active_container = computed(() => !isEmpty(tabs_magic_value.value) ? (tabs_magic_value.value.style.magic_common.is_show == '1' ? gradient_computer(tabs_magic_value.value.style.magic_common) : '') : '');
-const style_active_img_container = computed(() => !isEmpty(tabs_magic_value.value) ? (tabs_magic_value.value.style.magic_common.is_show == '1' ? background_computer(tabs_magic_value.value.style.magic_common) : '') : '');
+const style_active_container = computed(() => !isEmpty(active_tabs_value.value) ? (active_tabs_value.value.magic_common.is_show == '1' ? gradient_computer(active_tabs_value.value.magic_common) : '') : '');
+const style_active_img_container = computed(() => !isEmpty(active_tabs_value.value) ? (active_tabs_value.value.magic_common.is_show == '1' ? background_computer(active_tabs_value.value.magic_common) : '') : '');
 // 选中的内容区域样式
 const magic_container = computed(() => !isEmpty(tabs_magic_value.value) ? (common_styles_computer(tabs_magic_value.value.style.magic_content)) : '');
 const magic_img_container = computed(() => !isEmpty(tabs_magic_value.value) ? (common_img_computer(tabs_magic_value.value.style.magic_content)) : '');
diff --git a/src/components/model-tabs-magic/model-tabs-magic-content.vue b/src/components/model-tabs-magic/model-tabs-magic-content.vue
index 6bd23cab..73a3e1a4 100644
--- a/src/components/model-tabs-magic/model-tabs-magic-content.vue
+++ b/src/components/model-tabs-magic/model-tabs-magic-content.vue
@@ -57,26 +57,33 @@
                             </el-form-item>
                             <sliding-fixed v-model="form.home_data.is_sliding_fixed" @sliding_fixed_change="sliding_fixed_change($event, 0, 'home_data')"></sliding-fixed>
                             <template v-if="form.tabs_active_index == 0">
-                                <el-form-item label="魔方内容" class="w mb-0">
-                                    <el-select v-model="form.home_data.magic_type" filterable placeholder="请选择魔方内容" size="default" clearable @change="magic_type_change()">
-                                        <el-option v-for="item in magic_option" :key="item.value" :label="item.name" :value="item.value" />
-                                    </el-select>
-                                </el-form-item>
-                                <el-form-item v-if="form.home_data.magic_type == 'carousel'" label="轮播背景" class="w mb-0">
-                                    <el-switch v-model="form.home_data.rotating_background" class="mr-10" active-value="1" inactive-value="0" />
-                                    <tooltip content="1.关闭的时候,如果没有选项卡背景会使用通用背景.<br/>2.打开的时候,如果没有选项卡背景会使用轮播背景,都没有的时候会使用通用背景"></tooltip>
-                                </el-form-item>
-                                <template v-if="!isEmpty(form.home_data.magic_type)">
-                                    <!-- 魔方内容设置 -->
-                                    <el-tabs v-model="tabs_name" class="tabs-magic-content-tabs">
-                                        <el-tab-pane label="内容设置" name="content" class="tabs-magic-content">
-                                            <tabs-magic-content :magic-type="form.home_data.magic_type" :value="form.home_data[form.home_data.magic_type]"></tabs-magic-content>
-                                        </el-tab-pane>
-                                        <el-tab-pane label="样式设置" name="styles" class="tabs-magic-content">
-                                            <tabs-magic-styles :magic-type="form.home_data.magic_type" :value="form.home_data[form.home_data.magic_type]"></tabs-magic-styles>
-                                        </el-tab-pane>
-                                    </el-tabs>
-                                </template>
+                                <el-tabs v-model="tabs_name" class="content-tabs">
+                                    <el-tab-pane label="内容设置" name="content" class="content">
+                                        <el-form-item label="魔方内容" class="w mtb-10">
+                                            <el-select v-model="form.home_data.magic_type" filterable placeholder="请选择魔方内容" size="default" clearable @change="magic_type_change()">
+                                                <el-option v-for="item in magic_option" :key="item.value" :label="item.name" :value="item.value" />
+                                            </el-select>
+                                        </el-form-item>
+                                        <el-form-item v-if="form.home_data.magic_type == 'carousel'" label="轮播背景" class="w mtb-10">
+                                            <el-switch v-model="form.home_data.rotating_background" class="mr-10" active-value="1" inactive-value="0" />
+                                            <tooltip content="1.关闭的时候,如果没有选项卡背景会使用通用背景.<br/>2.打开的时候,如果没有选项卡背景会使用轮播背景,都没有的时候会使用通用背景"></tooltip>
+                                        </el-form-item>
+                                        <template v-if="!isEmpty(form.home_data.magic_type)">
+                                            <!-- 魔方内容设置 -->
+                                            <el-tabs v-model="tabs_magic_name" class="tabs-magic-content-tabs">
+                                                <el-tab-pane label="魔方内容" name="content" class="tabs-magic-content">
+                                                    <tabs-magic-content :magic-type="form.home_data.magic_type" :value="form.home_data[form.home_data.magic_type]"></tabs-magic-content>
+                                                </el-tab-pane>
+                                                <el-tab-pane label="魔方样式" name="styles" class="tabs-magic-content">
+                                                    <tabs-magic-styles :magic-type="form.home_data.magic_type" :value="form.home_data[form.home_data.magic_type]"></tabs-magic-styles>
+                                                </el-tab-pane>
+                                            </el-tabs>
+                                        </template>
+                                    </el-tab-pane>
+                                    <el-tab-pane label="通用样式" name="styles" class="tabs-magic-content">
+                                        <tabs-magic-common-style :value="form.home_data"></tabs-magic-common-style>
+                                    </el-tab-pane>
+                                </el-tabs>
                             </template>
                         </div>
                     </div>
@@ -113,27 +120,34 @@
                                             <url-value v-model="row.classify" :type="['goods-category']"></url-value>
                                         </template>
                                     </el-form-item>
-                                    <!-- 魔方内容显示页面 -->
-                                    <el-form-item label="魔方内容" class="w mb-0">
-                                        <el-select v-model="row.magic_type" filterable placeholder="请选择魔方内容" size="default" clearable @change="magic_type_change()">
-                                            <el-option v-for="item in magic_option" :key="item.value" :label="item.name" :value="item.value" />
-                                        </el-select>
-                                    </el-form-item>
-                                    <el-form-item v-if="row.magic_type == 'carousel'" label="轮播背景" class="w mb-0">
-                                        <el-switch v-model="row.rotating_background" class="mr-10" active-value="1" inactive-value="0" />
-                                        <tooltip content="1.关闭的时候,如果没有选项卡背景会使用通用背景.<br/>2.打开的时候,如果没有选项卡背景会使用轮播背景,都没有的时候会使用通用背景"></tooltip>
-                                    </el-form-item>
-                                    <template v-if="!isEmpty(row.magic_type)">
-                                        <!-- 魔方内容设置 -->
-                                        <el-tabs v-model="tabs_name" class="tabs-magic-content-tabs">
-                                            <el-tab-pane label="内容设置" name="content" class="tabs-magic-content">
-                                                <tabs-magic-content :magic-type="row.magic_type" :value="row[row.magic_type]"></tabs-magic-content>
-                                            </el-tab-pane>
-                                            <el-tab-pane label="样式设置" name="styles" class="tabs-magic-content">
-                                                <tabs-magic-styles :magic-type="row.magic_type" :value="row[row.magic_type]"></tabs-magic-styles>
-                                            </el-tab-pane>
-                                        </el-tabs>
-                                    </template>
+                                    <el-tabs v-model="tabs_name" class="content-tabs w h">
+                                        <el-tab-pane label="内容设置" name="content" class="content">
+                                            <!-- 魔方内容显示页面 -->
+                                            <el-form-item label="魔方内容" class="w mtb-10">
+                                                <el-select v-model="row.magic_type" filterable placeholder="请选择魔方内容" size="default" clearable @change="magic_type_change()">
+                                                    <el-option v-for="item in magic_option" :key="item.value" :label="item.name" :value="item.value" />
+                                                </el-select>
+                                            </el-form-item>
+                                            <el-form-item v-if="row.magic_type == 'carousel'" label="轮播背景" class="w mtb-10">
+                                                <el-switch v-model="row.rotating_background" class="mr-10" active-value="1" inactive-value="0" />
+                                                <tooltip content="1.关闭的时候,如果没有选项卡背景会使用通用背景.<br/>2.打开的时候,如果没有选项卡背景会使用轮播背景,都没有的时候会使用通用背景"></tooltip>
+                                            </el-form-item>
+                                            <template v-if="!isEmpty(row.magic_type)">
+                                                <!-- 魔方内容设置 -->
+                                                <el-tabs v-model="tabs_magic_name" class="tabs-magic-content-tabs">
+                                                    <el-tab-pane label="魔方内容" name="content" class="tabs-magic-content">
+                                                        <tabs-magic-content :magic-type="row.magic_type" :value="row[row.magic_type]"></tabs-magic-content>
+                                                    </el-tab-pane>
+                                                    <el-tab-pane label="魔方样式" name="styles" class="tabs-magic-content">
+                                                        <tabs-magic-styles :magic-type="row.magic_type" :value="row[row.magic_type]"></tabs-magic-styles>
+                                                    </el-tab-pane>
+                                                </el-tabs>
+                                            </template>
+                                        </el-tab-pane>
+                                        <el-tab-pane label="通用样式" name="styles" class="tabs-magic-content">
+                                            <tabs-magic-common-style :value="row"></tabs-magic-common-style>
+                                        </el-tab-pane>
+                                    </el-tabs>
                                 </template>
                             </div>
                         </template>
@@ -257,8 +271,9 @@ const sliding_fixed_change = (val: string | number | boolean, index: number, typ
 }
 //#region 选项卡魔方内容
 const tabs_name = ref('content');
+const tabs_magic_name = ref('content');
 const magic_type_change = () => {
-    tabs_name.value = 'content';
+    tabs_magic_name.value = 'content';
 }
 //#endregion
 // 选项卡是否设置安全距离
diff --git a/src/config/const/tabs-magic.ts b/src/config/const/tabs-magic.ts
index 5777676d..39e09824 100644
--- a/src/config/const/tabs-magic.ts
+++ b/src/config/const/tabs-magic.ts
@@ -34,6 +34,7 @@ interface tabs_page {
     micro_page_list: object;
     category_list: object;
     magic_type: string;
+    magic_common: object;
     rotating_background: string,
     carousel: object;
     video: object;
@@ -142,14 +143,6 @@ const magic_common_config = {
         box_shadow_blur: 0,
         box_shadow_spread: 0,
     },
-    // 通用样式
-    magic_common: {
-        is_show: '0',
-        direction: '90deg',
-        color_list: [{ color: '', color_percentage: undefined }],
-        background_img_style: '2',
-        background_img: [],
-    },
 }
 // 魔方配置
 export const magic_config = {
@@ -301,6 +294,14 @@ const defaultTabs: defaultTabs = {
             category_list: {},
             magic_type: 'carousel',
             rotating_background: '0',
+            // 通用样式
+            magic_common: {
+                is_show: '0',
+                direction: '90deg',
+                color_list: [{ color: '', color_percentage: undefined }],
+                background_img_style: '2',
+                background_img: [],
+            },
             ...cloneDeep(magic_config),
         },
         tabs_list: [
@@ -319,6 +320,13 @@ const defaultTabs: defaultTabs = {
                 category_list: {},
                 magic_type: '',
                 rotating_background: '0',
+                magic_common: {
+                    is_show: '0',
+                    direction: '90deg',
+                    color_list: [{ color: '', color_percentage: undefined }],
+                    background_img_style: '2',
+                    background_img: [],
+                },
                 ...cloneDeep(magic_config),
             },
             { 
@@ -336,6 +344,13 @@ const defaultTabs: defaultTabs = {
                 category_list: {},
                 magic_type: '',
                 rotating_background: '0',
+                magic_common: {
+                    is_show: '0',
+                    direction: '90deg',
+                    color_list: [{ color: '', color_percentage: undefined }],
+                    background_img_style: '2',
+                    background_img: [],
+                },
                 ...cloneDeep(magic_config),
             },
             { 
@@ -353,6 +368,13 @@ const defaultTabs: defaultTabs = {
                 category_list: {},
                 magic_type: '',
                 rotating_background: '0',
+                magic_common: {
+                    is_show: '0',
+                    direction: '90deg',
+                    color_list: [{ color: '', color_percentage: undefined }],
+                    background_img_style: '2',
+                    background_img: [],
+                },
                 ...cloneDeep(magic_config),
             },
         ],