From a70b8cca3cd822d6994cf2a99a860ff5df46b5e7 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, 7 Feb 2025 11:52:51 +0800
Subject: [PATCH] =?UTF-8?q?=E6=95=B0=E6=8D=AE=E9=80=89=E9=A1=B9=E5=8D=A1?=
 =?UTF-8?q?=E9=97=AE=E9=A2=98=E4=BF=AE=E5=A4=8D=EF=BC=8C=E6=96=B0=E5=A2=9E?=
 =?UTF-8?q?=E5=86=85=E5=AE=B9=E5=8C=BA=E5=9F=9F=E5=AD=97=E6=AE=B5?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../data-tabs-common/data-article-content.vue | 195 ------------------
 .../data-tabs-common/data-custom-content.vue  |   1 -
 .../data-tabs-common/data-goods-content.vue   | 168 ---------------
 src/components/model-data-tabs/index.vue      |  24 ++-
 .../model-data-tabs-content.vue               |  20 +-
 src/config/const/data-tabs.ts                 |  68 +++++-
 src/views/layout/index.vue                    |  43 +---
 7 files changed, 107 insertions(+), 412 deletions(-)
 delete mode 100644 src/components/common/data-tabs-common/data-article-content.vue
 delete mode 100644 src/components/common/data-tabs-common/data-goods-content.vue

diff --git a/src/components/common/data-tabs-common/data-article-content.vue b/src/components/common/data-tabs-common/data-article-content.vue
deleted file mode 100644
index 426cb762..00000000
--- a/src/components/common/data-tabs-common/data-article-content.vue
+++ /dev/null
@@ -1,195 +0,0 @@
-<template>
-    <card-container class="card-container">
-        <div class="mb-12">展示设置</div>
-        <el-form-item label="选择风格">
-            <el-radio-group v-model="form.theme" @change="theme_change">
-                <el-radio v-for="item in base_list.theme_list" :key="item.value" :value="item.value">{{ item.name }}</el-radio>
-            </el-radio-group>
-        </el-form-item>
-        <el-form-item v-if="form.theme == '4'" label="轮播列数">
-            <el-radio-group v-model="form.carousel_col">
-                <el-radio v-for="item in base_list.carousel_col_list" :key="item.value" :value="item.value">{{ item.name }}</el-radio>
-            </el-radio-group>
-        </el-form-item>
-    </card-container>
-    <div class="divider-line data-tabs-line"></div>
-    <card-container class="card-container">
-        <div class="mb-12">列表设置</div>
-        <el-form-item label="是否显示">
-            <el-checkbox-group v-model="form.field_show">
-                <el-checkbox v-for="item in base_list.field_show_list" :key="item.value" :value="item.value">{{ item.name }}</el-checkbox>
-            </el-checkbox-group>
-        </el-form-item>
-        <el-form-item v-if="form.field_show.includes('2')" label="描述行数">
-            <el-radio-group v-model="form.field_desc_row">
-                <el-radio v-for="item in base_list.field_desc_row" :key="item.value" :value="item.value">{{ item.name }}</el-radio>
-            </el-radio-group>
-        </el-form-item>
-        <template v-if="form.theme == '4'">
-            <el-form-item label="标题浮起">
-                <el-switch v-model="form.name_float" active-value="1" inactive-value="0" @change="switch_chage"></el-switch>
-            </el-form-item>
-        </template>
-    </card-container>
-    <div class="divider-line data-tabs-line"></div>
-    <card-container class="card-container">
-        <div class="mb-12">角标设置</div>
-        <!-- 角标设置 -->
-        <subscript-content :value="form"></subscript-content>
-    </card-container>
-    <div class="divider-line data-tabs-line"></div>
-    <!-- 数据筛选组件, 根据数据源类型显示不同的筛选组件 -->
-    <data-filter type="article" :value="form" :list="form.data_list" :base-list="base_list" @add="add" @data_list_replace="data_list_replace" @data_list_remove="data_list_remove" @data_list_sort="data_list_sort"></data-filter>
-    <url-value-dialog v-model:dialog-visible="url_value_dialog_visible" :type="['article']" :multiple="url_value_multiple_bool" @update:model-value="url_value_dialog_call_back"></url-value-dialog>
-</template>
-
-<script lang="ts" setup>
-import { get_math } from '@/utils';
-
-const props = defineProps({
-    value: {
-        type: Object,
-        default: () => ({}),
-    },
-    tabStyle: {
-        type: Object,
-        default: () => ({}),
-    },
-    defaultConfig: {
-        type: Object,
-        default: () => ({
-            // 图片不同风格下的圆角
-            img_radius_0: 4,
-            img_radius_1: 0,
-        }),
-    },
-});
-
-const base_list = reactive({
-    theme_list: [
-        { name: '单列展示', value: '0', width:110, height: 83 },
-        { name: '两列展示（纵向）', value: '1', width:180, height: 180 },
-        { name: '大图展示', value: '2', width:0, height: 180 },
-        { name: '无图模式', value: '3', width:0, height: 0 },
-        { name: '左右滑动展示', value: '4', width:0, height: 0 },
-    ],
-    carousel_col_list: [
-        { name: '单列展示', value: '0' },
-        { name: '两列展示', value: '1' },
-        { name: '三列展示', value: '2' },
-        { name: '四列展示', value: '3' },
-    ],
-    data_type_list: [
-        { name: '选择文章', value: '0' },
-        { name: '筛选文章', value: '1' },
-    ],
-    field_show_list: [
-        { name: '文章标题', value: '3' },
-        { name: '日期时间', value: '0' },
-        { name: '浏览量', value: '1' },
-        { name: '描述', value: '2' },
-    ],
-    field_desc_row: [
-        { name: '一行', value: '1' },
-        { name: '两行', value: '2' }
-    ]
-});
-
-// 默认值
-const state = reactive({
-    form: props.value,
-    data: props.tabStyle,
-});
-// 如果需要解构，确保使用toRefs
-const { form, data } = toRefs(state);
-watch(() => props.value, (value) => {
-    form.value = value;
-},{deep: true, immediate: true });
-
-watch(() => props.tabStyle, (value) => {
-    data.value = value;
-},{deep: true, immediate: true });
-// 主题改变
-const theme_change = (val: any) => {
-    if (val == '3' || val == '4') {
-        form.value.field_show = ['1', '3'];
-    } else {
-        form.value.field_show = ['0', '1', '3'];
-    }
-    if (val == '0') {
-        if (data.value.img_radius.radius == props.defaultConfig.img_radius_0 || (data.value.img_radius.radius_bottom_left == props.defaultConfig.img_radius_1 && data.value.img_radius.radius_bottom_right == props.defaultConfig.img_radius_1 && data.value.img_radius.radius_top_left == props.defaultConfig.img_radius_1 && data.value.img_radius.radius_top_right == props.defaultConfig.img_radius_1)) {
-            data.value.img_radius.radius = props.defaultConfig.img_radius_0;
-            data.value.img_radius.radius_bottom_left = props.defaultConfig.img_radius_0;
-            data.value.img_radius.radius_bottom_right = props.defaultConfig.img_radius_0;
-            data.value.img_radius.radius_top_left = props.defaultConfig.img_radius_0;
-            data.value.img_radius.radius_top_right = props.defaultConfig.img_radius_0;
-        }
-    } else {
-        if (data.value.img_radius.radius == props.defaultConfig.img_radius_0 || (data.value.img_radius.radius_bottom_left == props.defaultConfig.img_radius_1 && data.value.img_radius.radius_bottom_right == props.defaultConfig.img_radius_1 && data.value.img_radius.radius_top_left == props.defaultConfig.img_radius_1 && data.value.img_radius.radius_top_right == props.defaultConfig.img_radius_1)) {
-            data.value.img_radius.radius = props.defaultConfig.img_radius_1;
-            data.value.img_radius.radius_bottom_left = props.defaultConfig.img_radius_1;
-            data.value.img_radius.radius_bottom_right = props.defaultConfig.img_radius_1;
-            data.value.img_radius.radius_top_left = props.defaultConfig.img_radius_1;
-            data.value.img_radius.radius_top_right = props.defaultConfig.img_radius_1;
-        }
-    }
-    // 切换风格时，将对应图片的默认值宽度和高度赋值
-    const list = base_list.theme_list.filter(item => item.value == form.value.theme);
-    if (list.length > 0) {
-        data.value.style.content_img_width = list[0].width;
-        data.value.style.content_img_height = list[0].height;
-    }
-};
-// 移除
-const data_list_remove = (index: number) => {
-    form.value.data_list.splice(index, 1);
-};
-const url_value_multiple_bool = ref(true);
-const data_list_replace_index = ref(0);
-// 替换
-const data_list_replace = (index: number) => {
-    data_list_replace_index.value = index;
-    url_value_multiple_bool.value = false;
-    url_value_dialog_visible.value = true;
-};
-// 拖动排序
-const data_list_sort = (item: any) => {
-    form.value.data_list = item;
-};
-//  新增
-const add = () => {
-    url_value_multiple_bool.value = true;
-    url_value_dialog_visible.value = true;
-};
-// 开启关闭链接
-const url_value_dialog_visible = ref(false);
-const url_value_dialog_call_back = (item: any[]) => {
-    if (url_value_multiple_bool.value) {
-        item.forEach((child: any) => {
-            form.value.data_list.push({
-                id: get_math(),
-                new_title: '',
-                new_cover: [],
-                data: child,
-            });
-        });
-    } else {
-        form.value.data_list[data_list_replace_index.value] = {
-            id: get_math(),
-            new_title: '',
-            new_cover: form.value.data_list[data_list_replace_index.value]?.new_cover || [],
-            data: item[0],
-        };
-    }
-};
-// 标题浮起之后文章标题的颜色和字体更新
-const switch_chage = (val: string | number | boolean) => {
-    if (val == '1') {
-        data.value.name_color = '#fff';
-        data.value.name_weight = '400';
-    } else {
-        data.value.name_color = '#333';
-        data.value.name_weight = 'bold';
-    }
-};
-</script>
\ No newline at end of file
diff --git a/src/components/common/data-tabs-common/data-custom-content.vue b/src/components/common/data-tabs-common/data-custom-content.vue
index 58375cd5..d2087f31 100644
--- a/src/components/common/data-tabs-common/data-custom-content.vue
+++ b/src/components/common/data-tabs-common/data-custom-content.vue
@@ -68,7 +68,6 @@
                     </card-container>
                 </template>
             </template>
-            <div class="divider-line data-tabs-line"></div>
             <el-button class="w custom-button size-14" size="large" @click="custom_edit('custom')"><icon name="edit" size="14"></icon>自定义编辑</el-button>
         </el-form>
         <!-- 自定义内容处理 -->
diff --git a/src/components/common/data-tabs-common/data-goods-content.vue b/src/components/common/data-tabs-common/data-goods-content.vue
deleted file mode 100644
index 6a2ab5b5..00000000
--- a/src/components/common/data-tabs-common/data-goods-content.vue
+++ /dev/null
@@ -1,168 +0,0 @@
-<template>
-    <card-container class="card-container">
-        <el-form-item label="商品风格">
-            <el-radio-group v-model="form.theme" @change="change_style">
-                <el-radio v-for="item in base_list.product_style_list" :key="item.value" :value="item.value">{{ item.name }}</el-radio>
-            </el-radio-group>
-        </el-form-item>
-        <el-form-item v-if="form.theme == '5'" label="轮播列数">
-            <el-radio-group v-model="form.carousel_col">
-                <el-radio :value="1">单列展示</el-radio>
-                <el-radio :value="2">两列展示</el-radio>
-                <el-radio :value="3">三列展示</el-radio>
-                <el-radio :value="4">四列展示</el-radio>
-            </el-radio-group>
-        </el-form-item>
-    </card-container>
-    <div class="divider-line data-tabs-line"></div>
-    <!-- 商品显示的配置信息 -->
-    <product-show-config :value="form" @change_shop_type="change_shop_type"></product-show-config>
-    <div class="divider-line data-tabs-line"></div>
-    <card-container class="card-container">
-        <div class="mb-12">角标设置</div>
-        <!-- 角标设置 -->
-        <subscript-content :value="form"></subscript-content>
-    </card-container>
-    <div class="divider-line data-tabs-line"></div>
-    <!-- 数据筛选组件, 根据数据源类型显示不同的筛选组件 -->
-    <data-filter type="goods" :value="form" :list="form.data_list" :base-list="base_list" @add="product_add" @data_list_replace="data_list_replace" @data_list_remove="goods_list_remove" @data_list_sort="goods_list_sort"></data-filter>
-    <url-value-dialog v-model:dialog-visible="url_value_dialog_visible" :type="['goods']" :multiple="url_value_multiple_bool" @update:model-value="url_value_dialog_call_back"></url-value-dialog>
-</template>
-
-<script lang="ts" setup>
-import { get_math } from '@/utils';
-
-const props = defineProps({
-    value: {
-        type: Object,
-        default: () => ({}),
-    },
-    tabStyle: {
-        type: Object,
-        default: () => ({}),
-    },
-    defaultConfig: {
-        type: Object,
-        default: () => ({
-            // 图片不同风格下的圆角
-            img_radius_0: 4,
-            img_radius_1: 0,
-        }),
-    },
-});
-
-const base_list = reactive({
-    product_style_list: [
-        { name: '单列展示', value: '0', width: 110, height: 120 },
-        { name: '大图展示', value: '2', width: 166, height: 166 },
-        { name: '无图模式', value: '6', width: 0, height: 0 },
-        { name: '两列展示(纵向)', value: '1', width: 180, height: 180 },
-        { name: '两列展示(横向)', value: '4', width: 70, height: 70 },
-        { name: '三列展示', value: '3', width: 116, height: 114 },
-        { name: '左右滑动展示', value: '5', width: 0, height: 0 },
-    ],
-    product_list: [
-        { name: '指定商品', value: '0' },
-        { name: '筛选商品', value: '1' },
-    ],
-});
-const state = reactive({
-    form: props.value,
-    styles: props.tabStyle,
-});
-// 如果需要解构，确保使用toRefs
-const { form, styles } = toRefs(state);
-
-watch(() => props.value, (value) => {
-    form.value = value;
-},{deep: true, immediate: true });
-
-watch(() => props.tabStyle, (value) => {
-    styles.value = value;
-},{deep: true, immediate: true });
-const is_revise = ref(false);
-const change_shop_type = () => {
-    is_revise.value = true;
-};
-
-// 选择某些风格时， 切换到对应的按钮
-const change_style = (val: any): void => {
-    form.value.theme = val;
-    if (!is_revise.value) {
-        if (['3', '4', '5'].includes(val) && form.value.shop_type == 'text') {
-            form.value.shop_type = 'icon';
-        } else if (['0', '1', '2'].includes(val) && form.value.shop_type == 'icon') {
-            form.value.shop_type = 'text';
-        }
-    }
-    if (['0', '4'].includes(val)) {
-        if (styles.value.shop_img_radius.radius == props.defaultConfig.img_radius_0 || (styles.value.shop_img_radius.radius_bottom_left == props.defaultConfig.img_radius_1 && styles.value.shop_img_radius.radius_bottom_right == props.defaultConfig.img_radius_1 && styles.value.shop_img_radius.radius_top_left == props.defaultConfig.img_radius_1 && styles.value.shop_img_radius.radius_top_right == props.defaultConfig.img_radius_1)) {
-            styles.value.shop_img_radius.radius = props.defaultConfig.img_radius_0;
-            styles.value.shop_img_radius.radius_bottom_left = props.defaultConfig.img_radius_0;
-            styles.value.shop_img_radius.radius_bottom_right = props.defaultConfig.img_radius_0;
-            styles.value.shop_img_radius.radius_top_left = props.defaultConfig.img_radius_0;
-            styles.value.shop_img_radius.radius_top_right = props.defaultConfig.img_radius_0;
-        }
-    } else {
-        if (styles.value.shop_img_radius.radius == props.defaultConfig.img_radius_0 || (styles.value.shop_img_radius.radius_bottom_left == props.defaultConfig.img_radius_1 && styles.value.shop_img_radius.radius_bottom_right == props.defaultConfig.img_radius_1 && styles.value.shop_img_radius.radius_top_left == props.defaultConfig.img_radius_1 && styles.value.shop_img_radius.radius_top_right == props.defaultConfig.img_radius_1)) {
-            styles.value.shop_img_radius.radius = props.defaultConfig.img_radius_1;
-            styles.value.shop_img_radius.radius_bottom_left = props.defaultConfig.img_radius_1;
-            styles.value.shop_img_radius.radius_bottom_right = props.defaultConfig.img_radius_1;
-            styles.value.shop_img_radius.radius_top_left = props.defaultConfig.img_radius_1;
-            styles.value.shop_img_radius.radius_top_right = props.defaultConfig.img_radius_1;
-        }
-    }
-    // 切换风格时，将对应图片的默认值宽度和高度赋值
-    const list = base_list.product_style_list.filter(item => item.value == form.value.theme);
-    if (list.length > 0) {
-        styles.value.content_img_width = list[0].width;
-        styles.value.content_img_height = list[0].height;
-    }
-};
-const url_value_multiple_bool = ref(true);
-const data_list_replace_index = ref(0);
-const data_list_replace = (index: number) => {
-    data_list_replace_index.value = index;
-    url_value_multiple_bool.value = false;
-    url_value_dialog_visible.value = true;
-};
-const product_add = () => {
-    url_value_multiple_bool.value = true;
-    url_value_dialog_visible.value = true;
-};
-
-// 打开弹出框
-const url_value_dialog_visible = ref(false);
-// 弹出框选择的内容
-const url_value_dialog_call_back = (item: any[]) => {
-    if (url_value_multiple_bool.value) {
-        item.forEach((item: any) => {
-            form.value.data_list.push({
-                id: get_math(),
-                new_cover: [],
-                new_title: '',
-                data: item,
-            });
-        });
-    } else {
-        form.value.data_list[data_list_replace_index.value] = {
-            id: get_math(),
-            new_cover: form.value.data_list[data_list_replace_index.value]?.new_cover || [],
-            new_title: '',
-            data: item[0],
-        };
-    }
-};
-// 指定商品
-const goods_list_remove = (index: number) => {
-    form.value.data_list.splice(index, 1);
-};
-const goods_list_sort = (item: any) => {
-    form.value.data_list = item;
-};
-
-</script>
-
-<style lang="scss" scoped>
-</style>
-
diff --git a/src/components/model-data-tabs/index.vue b/src/components/model-data-tabs/index.vue
index fcef9e49..1c24b5c9 100644
--- a/src/components/model-data-tabs/index.vue
+++ b/src/components/model-data-tabs/index.vue
@@ -9,10 +9,18 @@
             <div class="oh" :style="data_container">
                 <div class="oh" :style="data_img_container">
                     <template v-if="tabs_data_type == 'goods'">
-                        <model-goods-list :value="tabs_list" :is-common-style="false"></model-goods-list>
+                        <div class="oh" :style="data_content_container">
+                            <div class="oh" :style="data_content_img_container">
+                                <model-goods-list :value="tabs_list" :is-common-style="false"></model-goods-list>
+                            </div>
+                        </div>
                     </template>
                     <template v-else-if="tabs_data_type == 'article'">
-                        <model-article-list :value="tabs_list" :is-common-style="false"></model-article-list>
+                        <div class="oh" :style="data_content_container">
+                            <div class="oh" :style="data_content_img_container">
+                                <model-article-list :value="tabs_list" :is-common-style="false"></model-article-list>
+                            </div>
+                        </div>
                     </template>
                     <template v-else-if="tabs_data_type == 'custom'">
                         <model-custom :value="tabs_list" :outer_container_padding="outer_container_width" :is-common-style="false"></model-custom>
@@ -25,6 +33,7 @@
 <script setup lang="ts">
 import { background_computer, border_computer, box_shadow_computer, common_img_computer, common_styles_computer, gradient_computer, margin_computer, padding_computer, radius_computer } from '@/utils';
 import { cloneDeep } from 'lodash';
+import { data_content_style } from '@/config/const/data-tabs';
 
 const props = defineProps({
     value: {
@@ -48,6 +57,9 @@ const data_container = ref('');
 const data_img_container = ref('');
 // 外层容器的间距
 const outer_container_width = ref(0);
+// 数据内容样式
+const data_content_container = ref('');
+const data_content_img_container = ref('');
 watch(
     () => props.value,
     (val) => {
@@ -81,8 +93,16 @@ watch(
         tabs_data_type.value = tabs_data_list?.tabs_data_type || '';
         if (tabs_data_list.tabs_data_type === 'goods') {
             tabs_list.value = tabs_data_list.goods_config;
+            const new_style = tabs_data_list.goods_config.style;
+            // 内容样式
+            data_content_container.value = common_styles_computer(new_style?.data_content_style || data_content_style);
+            data_content_img_container.value = common_img_computer(new_style?.data_content_style || data_content_style);
         } else if (tabs_data_list.tabs_data_type === 'article') {
             tabs_list.value = tabs_data_list.article_config;
+            const new_style = tabs_data_list.article_config.style;
+            // 内容样式
+            data_content_container.value = common_styles_computer(new_style?.data_content_style || data_content_style);
+            data_content_img_container.value = common_img_computer(new_style?.data_content_style || data_content_style);
         } else if (tabs_data_list.tabs_data_type === 'custom') {
             tabs_list.value = tabs_data_list.custom_config;
         }
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 51ba838e..daaa4c6b 100644
--- a/src/components/model-data-tabs/model-data-tabs-content.vue
+++ b/src/components/model-data-tabs/model-data-tabs-content.vue
@@ -71,10 +71,10 @@
                                         </el-tab-pane>
                                         <el-tab-pane label="样式设置" name="styles">
                                             <div v-show="row.tabs_data_type == 'goods'" class="data-tabs-style">
-                                                <model-goods-list-styles :value="row.goods_config.style" :content="row.goods_config.content" :is-common-style="false"></model-goods-list-styles>
+                                                <data-goods-styles :value="row.goods_config.style" :content="row.goods_config.content"></data-goods-styles>
                                             </div>
                                             <div v-show="row.tabs_data_type == 'article'" class="data-tabs-style">
-                                                <model-article-list-styles :value="row.article_config.style" :content="row.article_config.content" :is-common-style="false" />
+                                                <data-article-styles :value="row.article_config.style" :content="row.article_config.content"></data-article-styles>
                                             </div>
                                             <div v-show="row.tabs_data_type == 'custom'" class="data-tabs-style">
                                                 <model-custom-styles :value="row.custom_config.style" :content="row.custom_config.content" :is-common-style="false"></model-custom-styles>
@@ -97,7 +97,9 @@
     </div>
 </template>
 <script setup lang="ts">
-import { isEmpty } from 'lodash';
+import { cloneDeep } from 'lodash';
+import { article_default_parameter, goods_default_parameter } from "@/config/const/data-tabs";
+import defaultCustom from '@/config/const/custom';
 import { get_math, tabs_style } from '@/utils';
 import { commonStore } from '@/store';
 const common_store = commonStore();
@@ -170,13 +172,11 @@ const tabs_add = () => {
         title: '',
         img: [],
         desc: '',
-        data_type: '0',
-        category: [],
-        data_ids: [],
-        number: 4,
-        order_by_type: '0',
-        order_by_rule: '0',
-        data_list: [],
+        tabs_data_type: 'goods',
+        tabs_name: 'content',
+        goods_config: cloneDeep(goods_default_parameter),
+        article_config: cloneDeep(article_default_parameter),
+        custom_config: cloneDeep(defaultCustom)
     });
     form.value.tabs_active_index = form.value.tabs_list.length - 1;
 };
diff --git a/src/config/const/data-tabs.ts b/src/config/const/data-tabs.ts
index 0e38b370..a83f511b 100644
--- a/src/config/const/data-tabs.ts
+++ b/src/config/const/data-tabs.ts
@@ -75,6 +75,66 @@ interface DefaultProductList {
         common_style: object;
     };
 }
+// 内容区域的参数
+export const data_content_style = {
+    color_list: [{ color: '', color_percentage: undefined }],
+    direction: '180deg',
+    background_img_style: '2',
+    background_img: [],
+    radius: 0,
+    radius_top_left: 0,
+    radius_top_right: 0,
+    radius_bottom_left: 0,
+    radius_bottom_right: 0,
+    padding: 0,
+    padding_top: 0,
+    padding_bottom: 0,
+    padding_left: 0,
+    padding_right: 0,
+    margin: 0,
+    margin_top: 0,
+    margin_bottom: 0,
+    margin_left: 0,
+    margin_right: 0,
+    // 边框样式
+    border_is_show: '0',
+    border_color: '#FF3F3F',
+    border_style: 'solid',
+    border_size: {
+        padding: 1,
+        padding_top: 1,
+        padding_right: 1,
+        padding_bottom: 1,
+        padding_left: 1,
+    },
+    // 阴影
+    box_shadow_color: '',
+    box_shadow_x: 0,
+    box_shadow_y: 0,
+    box_shadow_blur: 0,
+    box_shadow_spread: 0,
+};
+
+export const goods_default_parameter = {
+    content: {
+        ...cloneDeep(defaultGoodsList.content),
+    },
+    style: {
+        ...cloneDeep(defaultGoodsList.style),
+        data_content_style: cloneDeep(data_content_style)
+    }
+}
+
+export const article_default_parameter = {
+    content: {
+        ...cloneDeep(defaultArticleList.content),
+    },
+    style: {
+        ...cloneDeep(defaultArticleList.style),
+        data_content_style: cloneDeep(data_content_style)
+    }
+}
+
 const defaultProductList: DefaultProductList = {
     content: {
         content_top: {
@@ -89,10 +149,10 @@ const defaultProductList: DefaultProductList = {
         tabs_top_up: '0',
         // 选项卡数据
         tabs_list: [
-            { id: '1', tabs_type: '0', tabs_img: [], tabs_icon: '', title: '热门推荐', img: [], desc: '简介', data_type: '0', tabs_data_type: 'goods', tabs_name: 'content', goods_config: cloneDeep(defaultGoodsList), article_config: cloneDeep(defaultArticleList), custom_config: cloneDeep(defaultCustom) },
-            { id: '2', tabs_type: '0', tabs_img: [], tabs_icon: '', title: '测试一', img: [], desc: '简介', data_type: '0', tabs_data_type: 'goods', tabs_name: 'content', goods_config: cloneDeep(defaultGoodsList), article_config: cloneDeep(defaultArticleList), custom_config: cloneDeep(defaultCustom) },
-            { id: '3', tabs_type: '0', tabs_img: [], tabs_icon: '', title: '测试二', img: [], desc: '简介', data_type: '0', tabs_data_type: 'goods', tabs_name: 'content', goods_config: cloneDeep(defaultGoodsList), article_config: cloneDeep(defaultArticleList), custom_config: cloneDeep(defaultCustom) },
-            { id: '4', tabs_type: '0', tabs_img: [], tabs_icon: '', title: '测试三', img: [], desc: '简介', data_type: '0', tabs_data_type: 'goods', tabs_name: 'content', goods_config: cloneDeep(defaultGoodsList), article_config: cloneDeep(defaultArticleList), custom_config: cloneDeep(defaultCustom) },
+            { id: '1', tabs_type: '0', tabs_img: [], tabs_icon: '', title: '热门推荐', img: [], desc: '简介', data_type: '0', tabs_data_type: 'goods', tabs_name: 'content', goods_config: cloneDeep(goods_default_parameter), article_config: cloneDeep(article_default_parameter), custom_config: cloneDeep(defaultCustom) },
+            { id: '2', tabs_type: '0', tabs_img: [], tabs_icon: '', title: '测试一', img: [], desc: '简介', data_type: '0', tabs_data_type: 'goods', tabs_name: 'content', goods_config: cloneDeep(goods_default_parameter), article_config: cloneDeep(article_default_parameter), custom_config: cloneDeep(defaultCustom) },
+            { id: '3', tabs_type: '0', tabs_img: [], tabs_icon: '', title: '测试二', img: [], desc: '简介', data_type: '0', tabs_data_type: 'goods', tabs_name: 'content', goods_config: cloneDeep(goods_default_parameter), article_config: cloneDeep(article_default_parameter), custom_config: cloneDeep(defaultCustom) },
+            { id: '4', tabs_type: '0', tabs_img: [], tabs_icon: '', title: '测试三', img: [], desc: '简介', data_type: '0', tabs_data_type: 'goods', tabs_name: 'content', goods_config: cloneDeep(goods_default_parameter), article_config: cloneDeep(article_default_parameter), custom_config: cloneDeep(defaultCustom) },
         ],
         // 选中的内容索引
         tabs_active_index: 0,
diff --git a/src/views/layout/index.vue b/src/views/layout/index.vue
index c52ea342..78fca49c 100644
--- a/src/views/layout/index.vue
+++ b/src/views/layout/index.vue
@@ -23,6 +23,8 @@ import { Settings, AppMain } from './components/index';
 import defaultSettings from './components/main/index';
 import defaultConfigSetting from '@/config/setting';
 import defaultConfigConst from '@/config/const/index';
+import { article_default_parameter, goods_default_parameter } from '@/config/const/data-tabs';
+import defaultCustom from '@/config/const/custom';
 import { cloneDeep, isEmpty, omit } from 'lodash';
 import DiyAPI, { diyData, headerAndFooter, diyConfig } from '@/api/diy';
 import CommonAPI from '@/api/common';
@@ -326,20 +328,22 @@ const save_formmat_form_data = (data: diy_data_item, close: boolean = false, is_
         } else if (new_array_6.includes(item.key)) {
             item.com_data.content.nav_content_list = item.com_data.content.nav_content_list.map((item0: any) => ({...omit(item0, 'tabs_name') }));
         } else if (['data-tabs'].includes(item.key)) {
+            item.com_data.content.tabs_active_index = 0;
             const new_tabs_list = item?.com_data?.content?.tabs_list || [];
             new_tabs_list.forEach((item: any) => {
+                item.tabs_name = 'content';
                 if (item.tabs_data_type == 'goods' || item.tabs_data_type == 'article') {
                     const new_com_data = item.tabs_data_type == 'goods' ? item.goods_config : item.article_config;
                     // 商品或文章的数据处理
                     goods_or_article_data_processing(new_com_data.content, item.tabs_data_type == 'goods');
                     // 是商品的时候需要将其他的两个数据清楚掉，避免下次切换时出现问题
                     if (item.tabs_data_type == 'goods') {
-                        goods_or_article_data_clear(item.article_config.content, false);
-                        clear_custom_data(item.custom_config.content);
+                        item.article_config = cloneDeep(article_default_parameter);
+                        item.custom_config = cloneDeep(defaultCustom)
                     } else {
                         // 是文章时清除掉其他的内容
-                        goods_or_article_data_clear(item.goods_config.content, true);
-                        clear_custom_data(item.custom_config.content);
+                        item.goods_config = cloneDeep(goods_default_parameter);
+                        item.custom_config = cloneDeep(defaultCustom)
                     }
                 } else if (item.tabs_data_type == 'custom') {
                     const new_com_data = item.custom_config;
@@ -348,8 +352,8 @@ const save_formmat_form_data = (data: diy_data_item, close: boolean = false, is_
                     // 自定义数据处理
                     custom_data_processing(new_com_data.content);
                     // 是自定义的时候清除掉其他的内容，避免下次点击时出现问题
-                    goods_or_article_data_clear(item.goods_config.content, true);
-                    goods_or_article_data_clear(item.article_config.content, false);
+                    item.goods_config = cloneDeep(goods_default_parameter);
+                    item.article_config = cloneDeep(article_default_parameter);
                 }
             });
         }
@@ -440,32 +444,7 @@ const save_formmat_form_data = (data: diy_data_item, close: boolean = false, is_
     // 清空自动数据列表，为后续的数据处理或展示做准备
     new_com_data_content.data_auto_list = [];
 };
-// 清空其他组件的内容
-const goods_or_article_data_clear = (new_com_data_content: any, is_goods: boolean) => {
-    new_com_data_content.data_ids = '';
-    new_com_data_content.data_list = [];
-    // 清空自动数据列表，为后续的数据处理或展示做准备
-    new_com_data_content.data_auto_list = [];
-    // 设置分类ID、数量、排序规则等默认值，确保数据的一致性和完整性
-    new_com_data_content.category_ids = defaultConfigSetting.category_ids;
-    new_com_data_content.number = defaultConfigSetting.page_size;
-    new_com_data_content.order_by_rule = defaultConfigSetting.order_by_rule;
-    new_com_data_content.order_by_type = defaultConfigSetting.order_by_type;
-    
-    // 根据是否为商品，决定是否设置品牌ID或封面标志
-    if (is_goods) {
-        new_com_data_content.brand_ids = defaultConfigSetting.brand_ids;
-    } else {
-        new_com_data_content.is_cover = defaultConfigSetting.is_cover;
-    }
-}
-const clear_custom_data = (new_com_data_content: any) => {
-    // 如果数据不是自定义或数据类型不是0，清空相关数据字段
-    new_com_data_content.data_source_content.data_ids = [];
-    new_com_data_content.data_source_content.data_list = [];
-    // 自动数据清空
-    new_com_data_content.data_source_content.data_auto_list = [];
-}
+
 /**
  * 自定义数据处理函数
  * 该函数用于处理新组件数据内容，根据数据是否为自定义以及数据类型，对数据进行相应的处理和格式化