From 4a554f9258b1ca56ed5d5dcca720b08e7cdc1f8d Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E4=BA=8E=E8=82=96=E7=A3=8A?= <18851179580@163.com>
Date: Wed, 30 Oct 2024 17:35:36 +0800
Subject: [PATCH] =?UTF-8?q?=E4=BF=AE=E6=94=B9=E6=95=B0=E6=8D=AE=E9=AD=94?=
 =?UTF-8?q?=E6=96=B9=E5=A4=84=E7=90=86?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../components/magic-carousel.vue             |  64 +++++--
 .../components/product-list-show.vue          | 161 ++++++++++++------
 .../components/tabs-content.vue               |   2 +-
 .../components/tabs-styles.vue                |  91 +++++++++-
 src/components/model-data-magic/index.vue     |  20 +--
 .../model-data-magic-content.vue              |  42 +++++
 src/components/model-title/index.vue          |   4 +-
 src/components/page-settings/index.vue        |   5 +-
 src/config/const/title.ts                     |   2 +
 9 files changed, 307 insertions(+), 84 deletions(-)

diff --git a/src/components/model-data-magic/components/magic-carousel.vue b/src/components/model-data-magic/components/magic-carousel.vue
index 561de9ad..81e96968 100644
--- a/src/components/model-data-magic/components/magic-carousel.vue
+++ b/src/components/model-data-magic/components/magic-carousel.vue
@@ -1,17 +1,23 @@
 <template>
-    <el-carousel :key="form.data_style.carouselKey" indicator-position="none" :interval="form.data_style.interval_time * 1000" arrow="never" :direction="form.data_style.rotation_direction" :autoplay="form.data_style.is_roll == '1' ? true : false" @change="carousel_change">
-        <el-carousel-item v-for="(item1, index1) in form.data_content.list" :key="index1">
-            <template v-if="props.type === 'img'">
-                <image-empty v-model="item1.carousel_img[0]" :style="form.data_style.get_img_radius" :fit="form.data_content.img_fit"></image-empty>
-            </template>
-            <template v-else>
-                <product-list-show :outerflex="form.outerflex" :flex="form.flex" :num="form.num" :actived="props.actived" :is-show="form.data_content.is_show" :chunk-padding="form.data_style.chunk_padding" :value="item1.split_list" :good-style="props.goodStyle" :content-img-radius="form.data_style.get_img_radius"></product-list-show>
-            </template>
-        </el-carousel-item>
-    </el-carousel>
+    <div class="w h oh" :style="props.type === 'img' ? '' : style_container(form.data_style)">
+        <div class="w h" :style="props.type === 'img' ? '' : style_img_container(form.data_style)">
+            <el-carousel :key="form.data_style.carouselKey" indicator-position="none" :interval="form.data_style.interval_time * 1000" arrow="never" :direction="form.data_style.rotation_direction" :autoplay="form.data_style.is_roll == '1' ? true : false" @change="carousel_change">
+                <el-carousel-item v-for="(item1, index1) in form.data_content.list" :key="index1">
+                    <template v-if="props.type === 'img'">
+                        <image-empty v-model="item1.carousel_img[0]" :style="form.data_style.get_img_radius" :fit="form.data_content.img_fit"></image-empty>
+                    </template>
+                    <template v-else>
+                        <product-list-show :outerflex="form.outerflex" :flex="form.flex" :num="form.num" :actived="props.actived" :is-show="form.data_content.is_show" :chunk-padding="form.data_style.chunk_padding" :value="item1.split_list" :good-style="props.goodStyle" :content-img-radius="form.data_style.get_img_radius"></product-list-show>
+                    </template>
+                </el-carousel-item>
+            </el-carousel>
+        </div>
+    </div>
 </template>
 
 <script setup lang="ts">
+import { gradient_computer, radius_computer, padding_computer, background_computer } from "@/utils";
+import { isEmpty } from "lodash";
 interface Props {
     value: any;
     type: string;
@@ -24,6 +30,44 @@ const props = withDefaults(defineProps<Props>(), {
 });
 
 const form = computed(() => props.value);
+interface new_style {
+    data_color_list: color_list[];
+    data_direction: string; 
+    data_radius: radiusStyle;
+    data_chunk_padding: paddingStyle;
+    data_background_img: uploadList[];
+    data_background_img_style: string;
+}
+
+// 用于样式显示
+const style_container = computed(() => {
+    return (val: new_style) => {
+        if (!isEmpty(val)) {
+            const { data_color_list = [], data_direction = '180deg', data_radius = { radius: 0, radius_top_left: 0, radius_top_right: 0, radius_bottom_left: 0, radius_bottom_right: 0 }} = val;
+            const data = {
+                color_list: data_color_list,
+                direction: data_direction,
+            }
+            return gradient_computer(data) + radius_computer(data_radius);
+        } else {
+            return '';
+        }
+    }
+});
+const style_img_container = computed(() => {
+    return (val: new_style) => {
+        if (!isEmpty(val)) {
+            const { data_background_img = [], data_background_img_style = '2', data_chunk_padding = { padding: 0, padding_top: 0, padding_bottom: 0, padding_left: 0, padding_right: 0 }} = val;
+            const data = {
+                background_img: data_background_img,
+                background_img_style: data_background_img_style,
+            }
+            return padding_computer(data_chunk_padding) + background_computer(data);
+        } else {
+            return '';
+        }
+    }
+});
 
 const emits = defineEmits(['carousel_change']);
 const carousel_change = (index: number) => {
diff --git a/src/components/model-data-magic/components/product-list-show.vue b/src/components/model-data-magic/components/product-list-show.vue
index 9c97764d..993cdf5b 100644
--- a/src/components/model-data-magic/components/product-list-show.vue
+++ b/src/components/model-data-magic/components/product-list-show.vue
@@ -2,58 +2,70 @@
     <template v-if="props.outerflex == 'row'">
         <div class="flex-row gap-10 align-c w h">
             <template v-if="props.flex === 'row'">
-                <div v-for="(item, index) in split_list" :key="index" class="flex-row gap-10 half-width h">
-                    <template v-if="!isEmpty(item.new_cover)">
-                        <image-empty v-model="item.new_cover[0]" :style="contentImgRadius"></image-empty>
-                    </template>
-                    <template v-else>
-                        <image-empty v-model="item.images" class="img" :style="contentImgRadius"></image-empty>
-                    </template>
-                    <div v-if="!isEmpty(isShow)" class="flex-col w h tl jc-sb">
-                        <div v-if="isShow.includes('title')" class="text-line-2 size-14" :style="goodStyle.goods_title_style">{{ item.title }}</div>
-                        <div v-if="isShow.includes('price')" class="identifying" :style="goodStyle.goods_price_style">
-                            <span class="num">{{ item.show_price_symbol }}</span>{{ item.min_price }}
-                            <template v-if="isShow.includes('price_unit')">
-                                <span class="num">{{ item.show_price_unit }}</span>
+                <div v-for="(item, index) in split_list" :key="index" class="half-width h">
+                    <div class="w h oh" :style="style_container(goodStyle)">
+                        <div class="w h flex-row gap-10" :style="style_img_container(goodStyle)">
+                            <template v-if="!isEmpty(item.new_cover)">
+                                <image-empty v-model="item.new_cover[0]" :style="contentImgRadius"></image-empty>
                             </template>
+                            <template v-else>
+                                <image-empty v-model="item.images" class="img" :style="contentImgRadius"></image-empty>
+                            </template>
+                            <div v-if="!isEmpty(isShow)" class="flex-col w h tl jc-sb">
+                                <div v-if="isShow.includes('title')" class="text-line-2 size-14" :style="goodStyle.goods_title_style">{{ item.title }}</div>
+                                <div v-if="isShow.includes('price')" class="identifying" :style="goodStyle.goods_price_style">
+                                    <span class="num">{{ item.show_price_symbol }}</span>{{ item.min_price }}
+                                    <template v-if="isShow.includes('price_unit')">
+                                        <span class="num">{{ item.show_price_unit }}</span>
+                                    </template>
+                                </div>
+                            </div>
                         </div>
                     </div>
                 </div>
             </template>
             <template v-else-if="actived != 7 || props.num != 1">
-                <div v-for="(item, index) in split_list" :key="index" :class="['flex-col gap-10 h', { 'half-width': props.num != 1, 'w': props.num == 1 }]">
-                    <div class="w h re">
-                        <template v-if="!isEmpty(item.new_cover)">
-                            <image-empty v-model="item.new_cover[0]" :style="contentImgRadius"></image-empty>
-                        </template>
-                        <template v-else>
-                            <image-empty v-model="item.images" class="img" :style="contentImgRadius"></image-empty>
-                        </template>
-                        <div v-if="isShow.includes('price')" class="price-suspension text-line-1" :style="goodStyle.goods_price_style">
-                            {{ item.show_price_symbol }}{{ item.min_price }}
-                            <template v-if="isShow.includes('price_unit')">
-                                {{ item.show_price_unit }}
-                            </template>
+                <div v-for="(item, index) in split_list" :key="index" :class="['h', { 'half-width': props.num != 1, 'w': props.num == 1 }]">
+                    <div class="w h oh" :style="style_container(goodStyle)">
+                        <div class="w h flex-col gap-10" :style="style_img_container(goodStyle)">
+                            <div class="w h re flex-1">
+                                <template v-if="!isEmpty(item.new_cover)">
+                                    <image-empty v-model="item.new_cover[0]" :style="contentImgRadius"></image-empty>
+                                </template>
+                                <template v-else>
+                                    <image-empty v-model="item.images" class="img" :style="contentImgRadius"></image-empty>
+                                </template>
+                                <div v-if="isShow.includes('price')" class="price-suspension text-line-1" :style="goodStyle.goods_price_style">
+                                    {{ item.show_price_symbol }}{{ item.min_price }}
+                                    <template v-if="isShow.includes('price_unit')">
+                                        {{ item.show_price_unit }}
+                                    </template>
+                                </div>
+                            </div>
+                            <div v-if="isShow.includes('title')" class="text-line-1 size-14 tl w" :style="goodStyle.goods_title_style">{{ item.title }}</div>
                         </div>
                     </div>
-                    <div v-if="isShow.includes('title')" class="text-line-1 size-14 tl w" style="overflow: inherit;" :style="goodStyle.goods_title_style">{{ item.title }}</div>
                 </div>
             </template>
             <template v-else>
-                <div v-for="(item, index) in split_list" :key="index" class="flex-col w h">
-                    <template v-if="!isEmpty(item.new_cover)">
-                        <image-empty v-model="item.new_cover[0]" :style="contentImgRadius"></image-empty>
-                    </template>
-                    <template v-else>
-                        <image-empty v-model="item.images" class="img" :style="contentImgRadius"></image-empty>
-                    </template>
-                    <div v-if="!isEmpty(isShow)" class="flex-col w tl jc-sb" :style="`${ padding_computer(props.chunkPadding) }`">
-                        <div v-if="isShow.includes('title')" class="text-line-2 size-14" :style="goodStyle.goods_title_style">{{ item.title }}</div>
-                        <div v-if="isShow.includes('price')" class="identifying" :style="goodStyle.goods_price_style">
-                            <span class="num">{{ item.show_price_symbol }}</span>{{ item.min_price }}
-                            <template v-if="isShow.includes('price_unit')">
-                                <span class="num">{{ item.show_price_unit }}</span>
+                <div v-for="(item, index) in split_list" :key="index" class="w h">
+                    <div class="w h oh" :style="style_container(goodStyle)">
+                        <div class="w h flex-col" :style="style_img_container(goodStyle)">
+                            <template v-if="!isEmpty(item.new_cover)">
+                                <image-empty v-model="item.new_cover[0]" :style="contentImgRadius"></image-empty>
                             </template>
+                            <template v-else>
+                                <image-empty v-model="item.images" class="img" :style="contentImgRadius"></image-empty>
+                            </template>
+                            <div v-if="!isEmpty(isShow)" class="flex-col w tl jc-sb" :style="`${ padding_computer(props.chunkPadding) }`">
+                                <div v-if="isShow.includes('title')" class="text-line-2 size-14" :style="goodStyle.goods_title_style">{{ item.title }}</div>
+                                <div v-if="isShow.includes('price')" class="identifying" :style="goodStyle.goods_price_style">
+                                    <span class="num">{{ item.show_price_symbol }}</span>{{ item.min_price }}
+                                    <template v-if="isShow.includes('price_unit')">
+                                        <span class="num">{{ item.show_price_unit }}</span>
+                                    </template>
+                                </div>
+                            </div>
                         </div>
                     </div>
                 </div>
@@ -63,20 +75,24 @@
     <template v-else>
         <div class="flex-col gap-10 align-c w h">
             <template v-if="props.flex === 'row'">
-                <div v-for="(item, index) in split_list" :key="index" class="flex-row gap-10 align-c w h shop-max-height">
-                    <template v-if="!isEmpty(item.new_cover)">
-                        <image-empty v-model="item.new_cover[0]" :style="contentImgRadius"></image-empty>
-                    </template>
-                    <template v-else>
-                        <image-empty v-model="item.images" class="img" :style="contentImgRadius"></image-empty>
-                    </template>
-                    <div v-if="!isEmpty(isShow)" class="flex-col w h tl jc-sb">
-                        <div v-if="isShow.includes('title')" class="text-line-2 size-14" :style="goodStyle.goods_title_style">{{ item.title }}</div>
-                        <div v-if="isShow.includes('price')" class="identifying" :style="goodStyle.goods_price_style">
-                            <span class="num">{{ item.show_price_symbol }}</span>{{ item.min_price }}
-                            <template v-if="isShow.includes('price_unit')">
-                                <span class="num">{{ item.show_price_unit }}</span>
+                <div v-for="(item, index) in split_list" :key="index" class="w h shop-max-height">
+                    <div class="w h oh" :style="style_container(goodStyle)">
+                        <div class="w h flex-row gap-10 align-c" :style="style_img_container(goodStyle)">
+                            <template v-if="!isEmpty(item.new_cover)">
+                                <image-empty v-model="item.new_cover[0]" :style="contentImgRadius"></image-empty>
                             </template>
+                            <template v-else>
+                                <image-empty v-model="item.images" class="img" :style="contentImgRadius"></image-empty>
+                            </template>
+                            <div v-if="!isEmpty(isShow)" class="flex-col w h tl jc-sb">
+                                <div v-if="isShow.includes('title')" class="text-line-2 size-14" :style="goodStyle.goods_title_style">{{ item.title }}</div>
+                                <div v-if="isShow.includes('price')" class="identifying" :style="goodStyle.goods_price_style">
+                                    <span class="num">{{ item.show_price_symbol }}</span>{{ item.min_price }}
+                                    <template v-if="isShow.includes('price_unit')">
+                                        <span class="num">{{ item.show_price_unit }}</span>
+                                    </template>
+                                </div>
+                            </div>
                         </div>
                     </div>
                 </div>
@@ -87,7 +103,7 @@
 
 <script setup lang="ts">
 import { isEmpty } from 'lodash';
-import { padding_computer } from '@/utils';
+import { gradient_computer, radius_computer, padding_computer, background_computer } from "@/utils";
 
 interface Props {
     value: Array<any>;
@@ -106,7 +122,44 @@ const props = withDefaults(defineProps<Props>(), {
     outerflex: 'row',
     flex: 'row',
 });
+interface new_style {
+    goods_color_list: color_list[];
+    goods_direction: string; 
+    goods_radius: radiusStyle;
+    goods_chunk_padding: paddingStyle;
+    goods_background_img: uploadList[];
+    goods_background_img_style: string;
+}
 
+// 用于样式显示
+const style_container = computed(() => {
+    return (val: new_style) => {
+        if (!isEmpty(val)) {
+            const { goods_color_list = [], goods_direction = '180deg', goods_radius = { radius: 0, radius_top_left: 0, radius_top_right: 0, radius_bottom_left: 0, radius_bottom_right: 0 } } = val;
+            const data = {
+                color_list: goods_color_list,
+                direction: goods_direction,
+            }
+            return gradient_computer(data) + radius_computer(goods_radius);
+        } else {
+            return '';
+        }
+    }
+});
+const style_img_container = computed(() => {
+    return (val: new_style) => {
+        if (!isEmpty(val)) {
+            const { goods_background_img = [], goods_background_img_style = '2', goods_chunk_padding = { padding: 0, padding_top: 0, padding_bottom: 0, padding_left: 0, padding_right: 0 }} = val;
+            const data = {
+                background_img: goods_background_img,
+                background_img_style: goods_background_img_style,
+            }
+            return padding_computer(goods_chunk_padding) + background_computer(data);
+        } else {
+            return '';
+        }
+    }
+});
 const split_list = computed(() => props.value || {});
 const gap_height = computed(() => 20 / 3 + 'px');
 </script>
diff --git a/src/components/model-data-magic/components/tabs-content.vue b/src/components/model-data-magic/components/tabs-content.vue
index bd245dd0..cdad8845 100644
--- a/src/components/model-data-magic/components/tabs-content.vue
+++ b/src/components/model-data-magic/components/tabs-content.vue
@@ -82,7 +82,7 @@ const props = defineProps({
     isShowTitle: {
         type: Boolean,
         default: true,
-    },
+    }
 });
 
 const list_show_list = [
diff --git a/src/components/model-data-magic/components/tabs-styles.vue b/src/components/model-data-magic/components/tabs-styles.vue
index 9815b5cf..d96f4538 100644
--- a/src/components/model-data-magic/components/tabs-styles.vue
+++ b/src/components/model-data-magic/components/tabs-styles.vue
@@ -56,16 +56,56 @@
             </el-form-item>
         </card-container>
     </template>
+    <template v-if="tabs_content.data_type === 'goods'">
+        <div class="bg-f5 divider-line" />
+        <card-container>
+            <div class="mb-12">数据样式</div>
+            <el-form-item label="背景">
+                <div class="flex-col gap-10 w">
+                    <div class="size-12">背景色</div>
+                    <mult-color-picker :key="form.carouselKey" :value="form.data_color_list" :type="form.data_direction" @update:value="data_mult_color_picker_event"></mult-color-picker>
+                    <div class="flex-row jc-sb align-c">
+                        <div class="size-12">背景图</div>
+                        <bg-btn-style v-model="form.data_background_img_style"></bg-btn-style>
+                    </div>
+                    <upload v-model="form.data_background_img" :limit="1"></upload>
+                </div>
+            </el-form-item>
+            <el-form-item label="内间距">
+                <padding :key="form.carouselKey" :value="form.data_chunk_padding" @update:value="data_chunk_padding_change"></padding>
+            </el-form-item>
+            <el-form-item label="圆角">
+                <radius :key="form.carouselKey" :value="form.data_radius" @update:value="data_radius_change"></radius>
+            </el-form-item>
+        </card-container>
+    </template>
     <template v-if="tabs_content.data_type === 'goods'">
         <div class="bg-f5 divider-line" />
         <card-container>
             <div class="mb-12">商品样式</div>
-            <el-form-item label="商品名称">
+            <el-form-item label="名称">
                 <color-text-size-group v-model:color="form.goods_title_color" v-model:typeface="form.goods_title_typeface" v-model:size="form.goods_title_size" default-color="#000000"></color-text-size-group>
             </el-form-item>
-            <el-form-item label="商品价格">
+            <el-form-item label="价格">
                 <color-text-size-group v-model:color="form.goods_price_color" v-model:typeface="form.goods_price_typeface" v-model:size="form.goods_price_size" default-color="#000000"></color-text-size-group>
             </el-form-item>
+            <el-form-item label="背景">
+                <div class="flex-col gap-10 w">
+                    <div class="size-12">背景色</div>
+                    <mult-color-picker :key="form.carouselKey" :value="form.goods_color_list" :type="form.goods_direction" @update:value="goods_mult_color_picker_event"></mult-color-picker>
+                    <div class="flex-row jc-sb align-c">
+                        <div class="size-12">背景图</div>
+                        <bg-btn-style v-model="form.goods_background_img_style"></bg-btn-style>
+                    </div>
+                    <upload v-model="form.goods_background_img" :limit="1"></upload>
+                </div>
+            </el-form-item>
+            <el-form-item label="内间距">
+                <padding :key="form.carouselKey" :value="form.goods_chunk_padding" @update:value="goods_chunk_padding_change"></padding>
+            </el-form-item>
+            <el-form-item label="圆角">
+                <radius :key="form.carouselKey" :value="form.goods_radius" @update:value="goods_radius_change"></radius>
+            </el-form-item>
         </card-container>
     </template>
     <div class="bg-f5 divider-line" />
@@ -74,7 +114,7 @@
     </card-container>
 </template>
 <script setup lang="ts">
-import { pick, isEmpty } from 'lodash';
+import { pick, isEmpty, cloneDeep } from 'lodash';
 const props = defineProps({
     value: {
         type: Object,
@@ -87,7 +127,7 @@ const props = defineProps({
     isShowTitle: {
         type: Boolean,
         default: true,
-    },
+    }
 });
 
 const form = ref(props.value);
@@ -97,11 +137,11 @@ const mult_color_picker_event = (arry: string[], type: number) => {
     form.value.color_list = arry;
     form.value.direction = type.toString();
 };
-const chunk_padding_change = (padding: any) => {
+const chunk_padding_change = (padding: paddingStyle) => {
     form.value.chunk_padding = Object.assign(form.value.chunk_padding, pick(padding, ['padding', 'padding_top', 'padding_bottom', 'padding_left', 'padding_right']));
 };
 // 内容圆角
-const img_radius_change = (radius: any) => {
+const img_radius_change = (radius: radiusStyle) => {
     const data = !isEmpty(form.value.img_radius) ? form.value.img_radius : { radius: 4, radius_top_left: 4, radius_top_right: 4, radius_bottom_left: 4, radius_bottom_right: 4 };
     form.value.img_radius = Object.assign(data, pick(radius, [
         'radius',
@@ -111,6 +151,45 @@ const img_radius_change = (radius: any) => {
         'radius_bottom_right',
     ]));
 }
+// 数据底板颜色
+const data_mult_color_picker_event = (arry: string[], type: number) => {
+    form.value.data_color_list = arry;
+    form.value.data_direction = type.toString();
+}
+const data_chunk_padding_change = (padding: paddingStyle) => {
+    form.value.data_chunk_padding = Object.assign(form.value.data_chunk_padding, pick(padding, ['padding', 'padding_top', 'padding_bottom', 'padding_left', 'padding_right']));
+};
+// 内容圆角
+const data_radius_change = (radius: radiusStyle) => {
+    const data = !isEmpty(form.value.data_radius) ? form.value.data_radius : { radius: 4, radius_top_left: 4, radius_top_right: 4, radius_bottom_left: 4, radius_bottom_right: 4 };
+    form.value.data_radius = Object.assign(data, pick(radius, [
+        'radius',
+        'radius_top_left',
+        'radius_top_right',
+        'radius_bottom_left',
+        'radius_bottom_right',
+    ]));
+}
+
+// 商品底板颜色
+const goods_mult_color_picker_event = (arry: string[], type: number) => {
+    form.value.goods_color_list = arry;
+    form.value.goods_direction = type.toString();
+}
+const goods_chunk_padding_change = (padding: paddingStyle) => {
+    form.value.goods_chunk_padding = Object.assign(form.value.goods_chunk_padding, pick(padding, ['padding', 'padding_top', 'padding_bottom', 'padding_left', 'padding_right']));
+};
+// 内容圆角
+const goods_radius_change = (radius: radiusStyle) => {
+    const data = !isEmpty(form.value.goods_radius) ? form.value.goods_radius : { radius: 4, radius_top_left: 4, radius_top_right: 4, radius_bottom_left: 4, radius_bottom_right: 4 };
+    form.value.goods_radius = Object.assign(data, pick(radius, [
+        'radius',
+        'radius_top_left',
+        'radius_top_right',
+        'radius_bottom_left',
+        'radius_bottom_right',
+    ]));
+}
 
 watchEffect(() => {
     form.value = props.value;
diff --git a/src/components/model-data-magic/index.vue b/src/components/model-data-magic/index.vue
index 92940d28..40224872 100644
--- a/src/components/model-data-magic/index.vue
+++ b/src/components/model-data-magic/index.vue
@@ -10,14 +10,14 @@
                                 <template v-if="item.data_content.data_type == 'goods'">
                                     <div :class="`w h flex-col ${ 'gap-' + item.title_text_gap }`" :style="`${ [0, 1].includes(index) ? padding_computer(item.data_style.chunk_padding) : '' }`">
                                         <div v-if="(!isEmpty(item.data_content.heading_title) || !isEmpty(item.data_content.subtitle)) && [0, 1].includes(index)" :class="'tl' + (item.data_style.title_line == '1' ? ' flex-row align-c gap-10' : ' flex-col gap-5')">
-                                            <template v-if="item.data_content.heading_title_type == 'text'">
-                                                <p class="ma-0 w text-word-break text-line-1 flex-basis-shrink" :style="trends_config(item.data_style, 'heading')">{{ item.data_content.heading_title || '' }}</p>
-                                            </template>
-                                            <template v-else-if="item.data_content.heading_title_img.length > 0">
-                                                <div class="re" :style="`height: ${ item.data_style?.heading_img_height || 0 }px`">
+                                            <template v-if="item.data_content.heading_title_type && item.data_content.heading_title_type == 'image'">
+                                                <div v-if="item.data_content.heading_title_img.length > 0" class="re" :style="`height: ${ item.data_style?.heading_img_height || 0 }px`">
                                                     <img :style="`height: ${ item.data_style?.heading_img_height || 0 }px`" :src="item.data_content.heading_title_img[0].url" fit="contain" />
                                                 </div>
                                             </template>
+                                            <template v-else>
+                                                <p class="ma-0 w text-word-break text-line-1 flex-basis-shrink" :style="trends_config(item.data_style, 'heading')">{{ item.data_content.heading_title || '' }}</p>
+                                            </template>
                                             <p class="ma-0 w text-word-break text-line-1 flex-basis-shrink" :style="trends_config(item.data_style, 'subtitle')">{{ item.data_content.subtitle || '' }}</p>
                                         </div>
                                         <div class="w h">
@@ -48,14 +48,14 @@
                             <template v-if="item.data_content.data_type == 'goods'">
                                 <div :class="`w h flex-col ${ 'gap-' + item.title_text_gap }`" :style="`${ padding_computer(item.data_style.chunk_padding) }`">
                                     <div v-if="!isEmpty(item.data_content.heading_title) || !isEmpty(item.data_content.subtitle)" :class="'gap-5 tl' + (item.data_style.title_line == '1' ? ' flex-row align-c gap-10' : ' flex-col gap-5')">
-                                        <template v-if="item.data_content.heading_title_type == 'text'">
-                                            <p class="ma-0 w text-word-break text-line-1 flex-basis-shrink" :style="trends_config(item.data_style, 'heading')">{{ item.data_content.heading_title || '' }}</p>
-                                        </template>
-                                        <template v-else-if="item.data_content.heading_title_img.length > 0">
-                                            <div class="re" :style="`height: ${ item.data_style?.heading_img_height || 0 }px`">
+                                        <template v-if="item.data_content.heading_title_type && item.data_content.heading_title_type == 'image'">
+                                            <div v-if="item.data_content.heading_title_img.length > 0" class="re" :style="`height: ${ item.data_style?.heading_img_height || 0 }px`">
                                                 <img :style="`height: ${ item.data_style?.heading_img_height || 0 }px`" :src="item.data_content.heading_title_img[0].url" fit="contain" />
                                             </div>
                                         </template>
+                                        <template v-else>
+                                            <p class="ma-0 w text-word-break text-line-1 flex-basis-shrink" :style="trends_config(item.data_style, 'heading')">{{ item.data_content.heading_title || '' }}</p>
+                                        </template>
                                         <p class="ma-0 w text-word-break text-line-1 flex-basis-shrink" :style="trends_config(item.data_style, 'subtitle')">{{ item.data_content.subtitle || '' }}</p>
                                     </div>
                                     <div class="w h">
diff --git a/src/components/model-data-magic/model-data-magic-content.vue b/src/components/model-data-magic/model-data-magic-content.vue
index 4e4f78f8..d7838fcb 100644
--- a/src/components/model-data-magic/model-data-magic-content.vue
+++ b/src/components/model-data-magic/model-data-magic-content.vue
@@ -81,6 +81,24 @@ const data_style = {
     goods_price_typeface: '500',
     goods_price_size: 18,
     goods_price_color: "#EA3323;",
+    goods_color_list: [{ color: '', color_percentage: undefined }],
+    goods_direction: '180deg',
+    goods_background_img_style: '2',
+    goods_background_img: [],
+    goods_chunk_padding: {
+        padding: 0,
+        padding_top: 0, 
+        padding_bottom: 0, 
+        padding_left: 0,
+        padding_right: 0,
+    },
+    goods_radius: {
+        radius: 4,
+        radius_top_left: 4,
+        radius_top_right: 4,
+        radius_bottom_left: 4,
+        radius_bottom_right: 4,
+    },
     chunk_padding: {
         padding: 0,
         padding_top: 20, 
@@ -97,6 +115,24 @@ const data_style = {
         radius_bottom_right: 4,
     },
     is_show: '1',
+    data_color_list: [{ color: '', color_percentage: undefined }],
+    data_direction: '180deg',
+    data_background_img_style: '2',
+    data_background_img: [],
+    data_chunk_padding: {
+        padding: 0,
+        padding_top: 0, 
+        padding_bottom: 0, 
+        padding_left: 0,
+        padding_right: 0,
+    },
+    data_radius: {
+        radius: 4,
+        radius_top_left: 4,
+        radius_top_right: 4,
+        radius_bottom_left: 4,
+        radius_bottom_right: 4,
+    },
     indicator_style: 'dot',
     indicator_location: 'center',
     indicator_size: 5,
@@ -156,6 +192,12 @@ const style_height = computed(() => cubeHeight.value + 'px');
 onBeforeMount(() => {
     if (isEmpty(form.value.data_magic_list)) {
         form.value.data_magic_list = magic_list(0);
+    } else {
+        // 历史数据处理一下，避免有新增字段导致报错
+        form.value.data_magic_list.forEach((item: any) => {
+            item.data_style = Object.assign({}, cloneDeep(data_style), item.data_style);
+            item.data_content = Object.assign({}, cloneDeep(data_content), item.data_content);
+        });
     }
 })
 onMounted(() => {
diff --git a/src/components/model-title/index.vue b/src/components/model-title/index.vue
index 683392e7..446fe2d2 100644
--- a/src/components/model-title/index.vue
+++ b/src/components/model-title/index.vue
@@ -11,7 +11,7 @@
                             <icon :name="form.icon_class" :size="new_style.icon_size + ''" :color="new_style.icon_color"></icon>
                         </template>
                         <div v-if="!isEmpty(form.title)" class="nowrap" :style="title_style">{{ form.title }}</div>
-                        <div v-if="!isEmpty(form.subtitle)" class="text-word-break" :style="subtitle_style">{{ form.subtitle }}</div>
+                        <div v-if="!isEmpty(form.subtitle) && new_style.title_line == '1'" class="text-word-break nowrap" :style="subtitle_style">{{ form.subtitle }}</div>
                     </div>
                     <div class="flex-row gap-10 align-c right-0 abs">
                         <template v-if="form.keyword_show == '1'">
@@ -22,7 +22,7 @@
                         <div v-if="form.right_show == '1'" class="nowrap" :style="right_style">{{ form.right_title }}<el-icon class="iconfont icon-arrow-right" :color="new_style.right_color || '#999'"></el-icon></div>
                     </div>
                 </div>
-                <div v-if="!isEmpty(form.subtitle)" class="text-word-break" :style="subtitle_style">{{ form.subtitle }}</div>
+                <div v-if="!isEmpty(form.subtitle) && new_style.title_line == '0'" class="text-word-break" :style="subtitle_style">{{ form.subtitle }}</div>
             </div>
         </div>
     </div>
diff --git a/src/components/page-settings/index.vue b/src/components/page-settings/index.vue
index da968f77..baaffa6c 100644
--- a/src/components/page-settings/index.vue
+++ b/src/components/page-settings/index.vue
@@ -5,7 +5,7 @@
                 <div class="w h abs up_slide_bg" :style="up_slide_style">
                     <div class="w h" :style="up_slide_img_style"></div>
                 </div>
-                <div class="pt-15 pl-18 pr-22 w pb-6">
+                <div class="pt-15 pl-18 pr-22 w pb-6 status-bar">
                     <img class="img" :style="`Filter: brightness(${new_style.function_buttons_type == '0' ? 0 : 100})`" :src="main_top_img" />
                 </div>
                 <div class="model-head tc re mlr-12 mt-6">
@@ -192,6 +192,9 @@ const position_class = computed(() => (form.value?.indicator_location == 'center
         width: 34rem;
     }
 }
+.status-bar {
+    height: 4.2rem;
+}
 .model-head {
     // height: 3.2rem;
     overflow: hidden;
diff --git a/src/config/const/title.ts b/src/config/const/title.ts
index aed8edea..8536a16a 100644
--- a/src/config/const/title.ts
+++ b/src/config/const/title.ts
@@ -31,6 +31,7 @@ interface defaultSearch {
         subtitle_color: string;
         subtitle_size: number;
         subtitle_weight: string;
+        title_line: string;
         keyword_color: string;
         keyword_size: number;
         right_color: string;
@@ -80,6 +81,7 @@ const defaultSearch: defaultSearch = {
         subtitle_color: '#999',
         subtitle_size: 12,
         subtitle_weight: 'normal',
+        title_line: '0',
         // 关键字设置
         keyword_color: '#000',
         keyword_size: 12,