From 37929a80fcd06e5d9d97e33a7cdd625f5619fa39 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E4=BA=8E=E8=82=96=E7=A3=8A?= <18851179580@163.com>
Date: Mon, 30 Dec 2024 13:33:15 +0800
Subject: [PATCH] =?UTF-8?q?=E4=BF=AE=E6=94=B9=E9=A1=B5=E9=9D=A2=E5=A4=84?=
 =?UTF-8?q?=E7=90=86=E9=80=BB=E8=BE=91?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/model-article-list/index.vue   |  14 +--
 .../model-article-list-styles.vue             |   7 ++
 src/components/model-article-tabs/index.vue   |   6 +-
 .../model-article-tabs-styles.vue             |  18 +++
 src/components/model-goods-tabs/index.vue     |   6 +-
 .../model-goods-tabs-styles.vue               |  18 +++
 src/config/const/article-list.ts              |  35 ++++++
 src/config/const/article-tabs.ts              |  83 ++++++++++++++
 src/config/const/goods-list.ts                |  38 +++----
 src/config/const/goods-tabs.ts                | 105 ++++++++++++++++--
 10 files changed, 287 insertions(+), 43 deletions(-)

diff --git a/src/components/model-article-list/index.vue b/src/components/model-article-list/index.vue
index 7b3c5319..82fea007 100644
--- a/src/components/model-article-list/index.vue
+++ b/src/components/model-article-list/index.vue
@@ -76,7 +76,7 @@
     </div>
 </template>
 <script setup lang="ts">
-import { common_styles_computer, padding_computer, radius_computer, get_math, is_obj_empty, common_img_computer, background_computer, gradient_handle, gradient_computer, margin_computer } from '@/utils';
+import { common_styles_computer, padding_computer, radius_computer, get_math, is_obj_empty, common_img_computer, background_computer, gradient_handle, gradient_computer, margin_computer, box_shadow_computer, border_computer } from '@/utils';
 import { isEmpty, cloneDeep } from 'lodash';
 import ArticleAPI from '@/api/article';
 import { Swiper, SwiperSlide } from 'swiper/vue';
@@ -337,16 +337,16 @@ watch(
             background_img: new_style.article_background_img,
         }
         style.value = '';
-        // 渐变效果
-        const gradient = gradient_handle(new_style.article_color_list, new_style.article_direction);
+        // 样式处理
+        const all_style = gradient_handle(new_style.article_color_list, new_style.article_direction) + margin_computer(new_style.margin) + box_shadow_computer(new_style) + border_computer(new_style);
         if (article_theme.value == '0') {
-            article_style.value += content_radius.value + gradient;
+            article_style.value += content_radius.value + all_style;
             article_img_style.value = content_spacing.value + content_padding.value + background_computer(article_data);
         } else if (article_theme.value == '1') {
-            article_style.value += `width: calc(50% - ${new_style.article_spacing / 2}px);` + content_radius.value + gradient;
+            article_style.value += `width: calc(50% - ${new_style.article_spacing / 2}px);` + content_radius.value + all_style;
             article_img_style.value = background_computer(article_data);
         } else if (article_theme.value == '2') {
-            article_style.value += content_radius.value + gradient;
+            article_style.value += content_radius.value + all_style;
             article_img_style.value = background_computer(article_data);
         } else if (article_theme.value == '3') {
             style.value = `padding: 0 ${new_style.content_spacing}px;background:#fff;` + content_radius.value;
@@ -370,7 +370,7 @@ watch(
             // 判断是平移还是整屏滚动
             slides_per_group.value = new_style.rolling_fashion == 'translation' ? 1 : Number(new_content.carousel_col) + 1;
             article_item_height.value = `${new_style.article_height}px`;
-            article_style.value += content_radius.value + gradient;
+            article_style.value += content_radius.value + all_style;
             article_img_style.value = background_computer(article_data);
         }
         if (new_style.common_style && props.isCommonStyle) {
diff --git a/src/components/model-article-list/model-article-list-styles.vue b/src/components/model-article-list/model-article-list-styles.vue
index d3cc3a62..57c9cec7 100644
--- a/src/components/model-article-list/model-article-list-styles.vue
+++ b/src/components/model-article-list/model-article-list-styles.vue
@@ -37,6 +37,9 @@
                 <el-form-item label="浏览量">
                     <color-text-size-group v-model:color="form.page_view_color" v-model:typeface="form.page_view_weight" v-model:size="form.page_view_size"></color-text-size-group>
                 </el-form-item>
+                <el-form-item v-if="theme != '3'" label="外间距">
+                    <margin :value="form.margin"></margin>
+                </el-form-item>
                 <el-form-item label="内间距">
                     <padding :value="form.padding"></padding>
                 </el-form-item>
@@ -62,6 +65,10 @@
                     <el-form-item label="图片圆角">
                         <radius :value="form.img_radius"></radius>
                     </el-form-item>
+                    <!-- 边框处理 -->
+                    <border-config v-model:show="form.border_is_show" v-model:color="form.border_color" v-model:style="form.border_style" v-model:size="form.border_size"></border-config>
+                    <!-- 阴影配置 -->
+                    <shadow-config v-model="form"></shadow-config>
                 </template>
                 <template v-if="!['3', '4'].includes(theme)">
                     <el-form-item v-if="['0'].includes(theme)" label="图片宽度">
diff --git a/src/components/model-article-tabs/index.vue b/src/components/model-article-tabs/index.vue
index 53e53dc6..07105166 100644
--- a/src/components/model-article-tabs/index.vue
+++ b/src/components/model-article-tabs/index.vue
@@ -15,7 +15,7 @@
     </div>
 </template>
 <script setup lang="ts">
-import { background_computer, common_img_computer, common_styles_computer, gradient_computer, margin_computer, padding_computer, radius_computer } from '@/utils';
+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';
 /**
  * @description: 文章选项卡列表 （渲染）
@@ -51,7 +51,7 @@ watch(
             background_img_style: new_style.tabs_bg_background_img_style,
             background_img: new_style.tabs_bg_background_img,
         }
-        tabs_container.value = gradient_computer(tabs_data) + radius_computer(new_style.tabs_radius);
+        tabs_container.value = gradient_computer(tabs_data) + radius_computer(new_style.tabs_radius) + margin_computer(new_style.tabs_margin) + border_computer(new_style.tabs_content) + box_shadow_computer(new_style.tabs_content);
         tabs_img_container.value = background_computer(tabs_data) + padding_computer(new_style.tabs_padding);
         // 文章区域背景设置
         const article_content_data = {
@@ -60,7 +60,7 @@ watch(
             background_img_style: new_style.article_content_background_img_style,
             background_img: new_style.article_content_background_img,
         }
-        article_container.value = gradient_computer(article_content_data) + margin_computer(new_style.article_content_margin) + radius_computer(new_style.article_content_radius);
+        article_container.value = gradient_computer(article_content_data) + margin_computer(new_style.article_content_margin) + radius_computer(new_style.article_content_radius) + border_computer(new_style.article_content) + box_shadow_computer(new_style.article_content);
         article_img_container.value = background_computer(article_content_data) + padding_computer(new_style.article_content_padding);
         //文章内容设置
         new_data.content.theme = new_data.content.article_theme;
diff --git a/src/components/model-article-tabs/model-article-tabs-styles.vue b/src/components/model-article-tabs/model-article-tabs-styles.vue
index 7fc6214b..8daabf2a 100644
--- a/src/components/model-article-tabs/model-article-tabs-styles.vue
+++ b/src/components/model-article-tabs/model-article-tabs-styles.vue
@@ -49,9 +49,16 @@
                 <el-form-item label="圆角">
                     <radius :value="form.tabs_radius"></radius>
                 </el-form-item>
+                <el-form-item label="外边距">
+                    <margin :value="form.tabs_margin"></margin>
+                </el-form-item>
                 <el-form-item label="内边距">
                     <padding :value="form.tabs_padding"></padding>
                 </el-form-item>
+                <!-- 边框处理 -->
+                <border-config v-model:show="form.tabs_content.border_is_show" v-model:color="form.tabs_content.border_color" v-model:style="form.tabs_content.border_style" v-model:size="form.tabs_content.border_size"></border-config>
+                <!-- 阴影配置 -->
+                <shadow-config v-model="form.tabs_content"></shadow-config>
             </card-container>
             <div class="divider-line"></div>
             <card-container>
@@ -71,6 +78,10 @@
                 <el-form-item label="数据间距">
                     <slider v-model="form.article_content_spacing" :max="100"></slider>
                 </el-form-item>
+                <!-- 边框处理 -->
+                <border-config v-model:show="form.article_content.border_is_show" v-model:color="form.article_content.border_color" v-model:style="form.article_content.border_style" v-model:size="form.article_content.border_size"></border-config>
+                <!-- 阴影配置 -->
+                <shadow-config v-model="form.article_content"></shadow-config>
             </card-container>
             <div class="divider-line"></div>
             <card-container>
@@ -109,6 +120,9 @@
                 <el-form-item label="浏览量">
                     <color-text-size-group v-model:color="form.page_view_color" v-model:typeface="form.page_view_weight" v-model:size="form.page_view_size"></color-text-size-group>
                 </el-form-item>
+                <template v-if="theme != '3'">
+                    <margin :value="form.margin"></margin>
+                </template>
                 <el-form-item label="内间距">
                     <padding :value="form.padding"></padding>
                 </el-form-item>
@@ -134,6 +148,10 @@
                     <el-form-item label="图片圆角">
                         <radius :value="form.img_radius"></radius>
                     </el-form-item>
+                    <!-- 边框处理 -->
+                    <border-config v-model:show="form.border_is_show" v-model:color="form.border_color" v-model:style="form.border_style" v-model:size="form.border_size"></border-config>
+                    <!-- 阴影配置 -->
+                    <shadow-config v-model="form"></shadow-config>
                 </template>
                 <template v-if="!['3', '4'].includes(theme)">
                     <el-form-item v-if="['0'].includes(theme)" label="图片宽度">
diff --git a/src/components/model-goods-tabs/index.vue b/src/components/model-goods-tabs/index.vue
index 225c358e..19e2baad 100644
--- a/src/components/model-goods-tabs/index.vue
+++ b/src/components/model-goods-tabs/index.vue
@@ -15,7 +15,7 @@
     </div>
 </template>
 <script setup lang="ts">
-import { background_computer, common_img_computer, common_styles_computer, gradient_computer, margin_computer, padding_computer, radius_computer } from '@/utils';
+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';
 
 const props = defineProps({
@@ -51,7 +51,7 @@ watch(
             background_img_style: new_style.tabs_bg_background_img_style,
             background_img: new_style.tabs_bg_background_img,
         }
-        tabs_container.value = gradient_computer(tabs_data) + radius_computer(new_style.tabs_radius);
+        tabs_container.value = gradient_computer(tabs_data) + radius_computer(new_style.tabs_radius) + margin_computer(new_style.tabs_margin) + border_computer(new_style.tabs_content) + box_shadow_computer(new_style.tabs_content);
         tabs_img_container.value = background_computer(tabs_data) + padding_computer(new_style.tabs_padding);
         // 商品区域背景设置
         const shop_content_data = {
@@ -60,7 +60,7 @@ watch(
             background_img_style: new_style.shop_content_background_img_style,
             background_img: new_style.shop_content_background_img,
         }
-        shop_container.value = gradient_computer(shop_content_data) + margin_computer(new_style.shop_content_margin) + radius_computer(new_style.shop_content_radius);
+        shop_container.value = gradient_computer(shop_content_data) + margin_computer(new_style.shop_content_margin) + radius_computer(new_style.shop_content_radius) + border_computer(new_style.shop_content) + box_shadow_computer(new_style.shop_content);
         shop_img_container.value = background_computer(shop_content_data) + padding_computer(new_style.shop_content_padding);
         // 产品的值
         new_data.content.data_type = new_data.content.tabs_list[tabs_active_index.value].data_type;
diff --git a/src/components/model-goods-tabs/model-goods-tabs-styles.vue b/src/components/model-goods-tabs/model-goods-tabs-styles.vue
index d20e2866..0033bc55 100644
--- a/src/components/model-goods-tabs/model-goods-tabs-styles.vue
+++ b/src/components/model-goods-tabs/model-goods-tabs-styles.vue
@@ -59,9 +59,16 @@
                 <el-form-item label="圆角">
                     <radius :value="form.tabs_radius"></radius>
                 </el-form-item>
+                <el-form-item label="外间距">
+                    <margin :value="form.tabs_margin"></margin>
+                </el-form-item>
                 <el-form-item label="内边距">
                     <padding :value="form.tabs_padding"></padding>
                 </el-form-item>
+                <!-- 边框处理 -->
+                <border-config v-model:show="form.tabs_content.border_is_show" v-model:color="form.tabs_content.border_color" v-model:style="form.tabs_content.border_style" v-model:size="form.tabs_content.border_size"></border-config>
+                <!-- 阴影配置 -->
+                <shadow-config v-model="form.tabs_content"></shadow-config>
             </card-container>
             <div class="divider-line"></div>
             <card-container>
@@ -81,6 +88,10 @@
                 <el-form-item label="数据间距">
                     <slider v-model="form.shop_content_spacing" :max="100"></slider>
                 </el-form-item>
+                <!-- 边框处理 -->
+                <border-config v-model:show="form.shop_content.border_is_show" v-model:color="form.shop_content.border_color" v-model:style="form.shop_content.border_style" v-model:size="form.shop_content.border_size"></border-config>
+                <!-- 阴影配置 -->
+                <shadow-config v-model="form.shop_content"></shadow-config>
             </card-container>
             <div class="divider-line"></div>
             <card-container>
@@ -126,6 +137,9 @@
                     </el-form-item>
                 </template>
                 <template v-if="theme != '6'">
+                    <el-form-item label="外间距">
+                        <margin :value="form.shop_margin"></margin>
+                    </el-form-item>
                     <el-form-item label="内间距">
                         <padding :value="form.shop_padding"></padding>
                     </el-form-item>
@@ -140,6 +154,10 @@
                     <radius :value="form.shop_radius"></radius>
                 </el-form-item>
                 <template v-if="theme != '6'">
+                    <!-- 边框处理 -->
+                    <border-config v-model:show="form.border_is_show" v-model:color="form.border_color" v-model:style="form.border_style" v-model:size="form.border_size"></border-config>
+                    <!-- 阴影配置 -->
+                    <shadow-config v-model="form"></shadow-config>
                     <template v-if="theme == '5'">
                         <el-form-item label="内容高度">
                             <slider v-model="form.content_outer_height" :max="1000"></slider>
diff --git a/src/config/const/article-list.ts b/src/config/const/article-list.ts
index 9a6f70d9..9b0966f0 100644
--- a/src/config/const/article-list.ts
+++ b/src/config/const/article-list.ts
@@ -56,7 +56,18 @@ interface DefaultArticleList {
         page_view_color: string;
         content_radius: radiusStyle;
         img_radius: radiusStyle;
+        margin: marginStyle;    
         padding: paddingStyle;
+        border_is_show: string;
+        border_color: string;
+        border_style: string;
+        border_size: paddingStyle;
+        // 阴影
+        box_shadow_color: string;
+        box_shadow_x: number;
+        box_shadow_y: number;
+        box_shadow_blur: number;
+        box_shadow_spread: number;
         article_spacing: number;
         content_spacing: number;
         article_height: number;
@@ -149,6 +160,13 @@ const defaultArticleList: DefaultArticleList = {
             radius_bottom_left: 4,
             radius_bottom_right: 4,
         },
+        margin: {
+            margin: 0,
+            margin_top: 0,
+            margin_bottom: 0,
+            margin_left: 0,
+            margin_right: 0,
+        },
         // 内间距
         padding: {
             padding: 10,
@@ -157,6 +175,23 @@ const defaultArticleList: DefaultArticleList = {
             padding_left: 10,
             padding_right: 10,
         },
+        // 边框样式
+        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,
         content_spacing: 10, // 内容间距
         article_spacing: 10, // 文章间距
         article_height: 155, // 文章高度
diff --git a/src/config/const/article-tabs.ts b/src/config/const/article-tabs.ts
index b63c809e..0e899830 100644
--- a/src/config/const/article-tabs.ts
+++ b/src/config/const/article-tabs.ts
@@ -66,7 +66,9 @@ interface DefaultArticleTabs {
         tabs_bg_background_img: string[],
         tabs_sign_spacing: number;
         tabs_radius: radiusStyle;
+        tabs_margin: marginStyle;
         tabs_padding: paddingStyle;
+        tabs_content: object;
         article_content_direction: string;
         article_content_color_list: color_list[];
         article_content_background_img_style: string;
@@ -75,6 +77,7 @@ interface DefaultArticleTabs {
         article_content_margin: marginStyle;
         article_content_padding: paddingStyle;
         article_content_spacing: number;
+        article_content: object;
         article_direction: string,
         article_color_list: color_list[],
         article_background_img_style: string,
@@ -98,7 +101,18 @@ interface DefaultArticleTabs {
         page_view_color: string;
         content_radius: radiusStyle;
         img_radius: radiusStyle;
+        margin: marginStyle;    
         padding: paddingStyle;
+        border_is_show: string;
+        border_color: string;
+        border_style: string;
+        border_size: paddingStyle;
+        // 阴影
+        box_shadow_color: string;
+        box_shadow_x: number;
+        box_shadow_y: number;
+        box_shadow_blur: number;
+        box_shadow_spread: number;
         article_spacing: number;
         content_spacing: number;
         article_height: number;
@@ -177,6 +191,13 @@ const defaultArticleTabs: DefaultArticleTabs = {
             radius_bottom_left: 0,
             radius_bottom_right: 0,
         },
+        tabs_margin: {
+            margin: 0,
+            margin_top: 0,
+            margin_bottom: 0,
+            margin_left: 0,
+            margin_right: 0,
+        },
         tabs_padding: {
             padding: 10,
             padding_top: 10,
@@ -184,6 +205,25 @@ const defaultArticleTabs: DefaultArticleTabs = {
             padding_left: 10,
             padding_right: 10,
         },
+        tabs_content: {
+            // 边框样式
+            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,
+        },
         // 文章内容设置
         article_content_direction: '90deg',
         article_content_color_list: [{ color: '', color_percentage: undefined }],
@@ -210,6 +250,25 @@ const defaultArticleTabs: DefaultArticleTabs = {
             padding_left: 10,
             padding_right: 10,
         },
+        article_content: {
+            // 边框样式
+            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,
+        },
         article_content_spacing: 0,
         // 文章背景设置
         article_direction: '90deg',
@@ -267,6 +326,13 @@ const defaultArticleTabs: DefaultArticleTabs = {
             radius_bottom_left: 4,
             radius_bottom_right: 4,
         },
+        margin: {
+            margin: 0,
+            margin_top: 0,
+            margin_bottom: 0,
+            margin_left: 0,
+            margin_right: 0,
+        },
         // 内间距
         padding: {
             padding: 10,
@@ -275,6 +341,23 @@ const defaultArticleTabs: DefaultArticleTabs = {
             padding_left: 10,
             padding_right: 10,
         },
+        // 边框样式
+        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,
         content_spacing: 10, // 内容间距
         article_spacing: 10, // 文章间距
         article_height: 155, // 文章高度
diff --git a/src/config/const/goods-list.ts b/src/config/const/goods-list.ts
index d3a53207..564eb26d 100644
--- a/src/config/const/goods-list.ts
+++ b/src/config/const/goods-list.ts
@@ -34,30 +34,30 @@ interface DefaultProductList {
         subscript_text: string;
     };
     style: {
-        shop_direction: string,
-        shop_color_list: color_list[],
-        shop_background_img_style: string,
-        shop_background_img: uploadList[],
+        shop_direction: string;
+        shop_color_list: color_list[];
+        shop_background_img_style: string;
+        shop_background_img: uploadList[];
         shop_padding: paddingStyle;
-        shop_margin: marginStyle,
-        border_is_show: string,
-        border_color: string,
-        border_style: string,
-        border_size: paddingStyle,
+        shop_margin: marginStyle;
+        border_is_show: string;
+        border_color: string;
+        border_style: string;
+        border_size: paddingStyle;
         // 阴影
-        box_shadow_color: string,
-        box_shadow_x: number,
-        box_shadow_y: number,
-        box_shadow_blur: number,
-        box_shadow_spread: number,
+        box_shadow_color: string;
+        box_shadow_x: number;
+        box_shadow_y: number;
+        box_shadow_blur: number;
+        box_shadow_spread: number;
         shop_img_radius: radiusStyle;
         shop_radius: radiusStyle;
         content_outer_spacing: number;
         content_outer_height: number;
         content_img_width: number | undefined;
         content_img_height: number | undefined;
-        is_roll: string,
-        interval_time: number,
+        is_roll: string;
+        interval_time: number;
         rolling_fashion: string;
         content_spacing: number;
         shop_title_typeface: string;
@@ -66,7 +66,7 @@ interface DefaultProductList {
         shop_simple_desc_typeface: string;
         shop_simple_desc_size: number;
         shop_simple_desc_color: string;
-        title_simple_desc_spacing: number,
+        title_simple_desc_spacing: number;
         shop_price_typeface: string;
         shop_price_size: number;
         shop_price_color: string;
@@ -85,10 +85,10 @@ interface DefaultProductList {
         shop_button_typeface:string;
         shop_button_size: number;
         shop_button_color: color_list[];
-        shop_button_text_color: string,
+        shop_button_text_color: string;
         shop_icon_size: number;
         shop_icon_color: string;
-        subscript_style: object,
+        subscript_style: object;
         common_style: object;
     };
 }
diff --git a/src/config/const/goods-tabs.ts b/src/config/const/goods-tabs.ts
index a999a29d..4e5fa65f 100644
--- a/src/config/const/goods-tabs.ts
+++ b/src/config/const/goods-tabs.ts
@@ -56,22 +56,24 @@ interface DefaultProductList {
         tabs_size: number;
         tabs_color: string;
         tabs_icon_color_checked: string;
-        tabs_icon_size_checked: number,
-        tabs_icon_color: string,
-        tabs_icon_size: number,
-        is_tabs_img_background: string,
+        tabs_icon_size_checked: number;
+        tabs_icon_color: string;
+        tabs_icon_size: number;
+        is_tabs_img_background: string;
         tabs_top_img_radius: radiusStyle;
         tabs_top_img_height: number;
-        tabs_img_radius: radiusStyle,
-        tabs_img_height: number,
+        tabs_img_radius: radiusStyle;
+        tabs_img_height: number;
         tabs_spacing: number;
         tabs_sign_spacing: number;
-        tabs_bg_direction: string,
-        tabs_bg_color_list: color_list[],
-        tabs_bg_background_img_style: string,
-        tabs_bg_background_img: string[],
+        tabs_bg_direction: string;
+        tabs_bg_color_list: color_list[];
+        tabs_bg_background_img_style: string;
+        tabs_bg_background_img: string[];
         tabs_radius: radiusStyle;
+        tabs_margin: marginStyle;
         tabs_padding: paddingStyle;
+        tabs_content: object;
         shop_content_direction: string;
         shop_content_color_list: color_list[];
         shop_content_background_img_style: string;
@@ -80,10 +82,22 @@ interface DefaultProductList {
         shop_content_margin: marginStyle;
         shop_content_padding: paddingStyle;
         shop_content_spacing: number;
+        shop_content: object;
         shop_direction: string;
         shop_color_list: color_list[];
         shop_background_img_style: string;
         shop_background_img: uploadList[];
+        border_is_show: string;
+        border_color: string;
+        border_style: string;
+        border_size: paddingStyle;
+        // 阴影
+        box_shadow_color: string;
+        box_shadow_x: number;
+        box_shadow_y: number;
+        box_shadow_blur: number;
+        box_shadow_spread: number;
+        shop_margin: marginStyle;
         shop_padding: paddingStyle;
         shop_img_radius: radiusStyle;
         shop_radius: radiusStyle;
@@ -123,7 +137,7 @@ interface DefaultProductList {
         shop_button_text_color: string;
         shop_icon_size: number;
         shop_icon_color: string;
-        subscript_style: object,
+        subscript_style: object;
         common_style: object;
     };
 }
@@ -218,6 +232,13 @@ const defaultProductList: DefaultProductList = {
             radius_bottom_left: 0,
             radius_bottom_right: 0,
         },
+        tabs_margin: {
+            margin: 0,
+            margin_top: 0,
+            margin_bottom: 0,
+            margin_left: 0,
+            margin_right: 0,
+        },
         tabs_padding: {
             padding: 10,
             padding_top: 10,
@@ -225,6 +246,25 @@ const defaultProductList: DefaultProductList = {
             padding_left: 10,
             padding_right: 10,
         },
+        tabs_content: {
+            // 边框样式
+            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,
+        },
         // 商品内容设置
         shop_content_direction: '90deg',
         shop_content_color_list: [{ color: '', color_percentage: undefined }],
@@ -252,11 +292,54 @@ const defaultProductList: DefaultProductList = {
             padding_right: 10,
         },
         shop_content_spacing: 0,
+        shop_content: {
+            // 边框样式
+            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,
+        },
         // 商品背景设置
         shop_direction: '90deg',
         shop_color_list: [{ color: '#fff', color_percentage: undefined }],
         shop_background_img_style: '0',
         shop_background_img: [],
+        // 边框样式
+        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,
+        shop_margin: {
+            margin: 0,
+            margin_top: 0,
+            margin_bottom: 0,
+            margin_left: 0,
+            margin_right: 0,
+        },
         // 商品圆角
         shop_padding: {
             padding: 10,