From bce7b5966fea427b99b6492d51f3666b862b98fd 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, 11 Dec 2024 18:50:30 +0800
Subject: [PATCH] =?UTF-8?q?=E4=BF=AE=E6=94=B9=E9=80=89=E9=A1=B9=E5=8D=A1?=
 =?UTF-8?q?=E5=86=85=E5=AE=B9=E6=98=BE=E7=A4=BA?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../common/custom-module/model-text/index.vue |  6 +--
 src/components/common/data-filter/index.vue   | 42 ++++++++-----------
 src/components/common/tabs-view/index.vue     | 37 +++++++++++++++-
 .../model-article-tabs-content.vue            | 15 ++++++-
 .../model-article-tabs-styles.vue             | 21 ++++++++++
 .../model-custom/model-custom-content.vue     |  6 +--
 .../model-goods-tabs-content.vue              | 15 ++++++-
 .../model-goods-tabs-styles.vue               | 21 ++++++++++
 .../model-tabs/model-tabs-content.vue         | 32 +++++++++++---
 .../model-tabs/model-tabs-styles.vue          | 25 ++++++++++-
 src/config/const/article-tabs.ts              | 36 +++++++++++++---
 src/config/const/goods-tabs.ts                | 31 ++++++++++++--
 src/config/const/tabs-carousel.ts             | 31 ++++++++++++--
 src/config/const/tabs.ts                      | 31 ++++++++++++--
 src/utils/index.ts                            |  4 +-
 15 files changed, 290 insertions(+), 63 deletions(-)

diff --git a/src/components/common/custom-module/model-text/index.vue b/src/components/common/custom-module/model-text/index.vue
index 1a204ddb..2e7f8b5d 100644
--- a/src/components/common/custom-module/model-text/index.vue
+++ b/src/components/common/custom-module/model-text/index.vue
@@ -93,7 +93,7 @@ const text_title = computed(() => {
                     });
                     text_title += (sourceList?.first || '') + (text == '' && !props.isDisplayPanel ? sourceList?.name || '请在此输入文字' : text ) + (sourceList?.last || '');
                 } else {
-                    text_title += (sourceList?.first || '') + (data_handling(source_id) == '' && !props.isDisplayPanel ? sourceList?.name || '请在此输入文字' : data_handling(source_id) ) + (sourceList?.last || '');
+                    text_title += (sourceList?.first || '') + (data_handling(source_id) === '' && !props.isDisplayPanel ? sourceList?.name || '请在此输入文字' : data_handling(source_id) ) + (sourceList?.last || '');
                 }
             });
         }
@@ -105,8 +105,8 @@ const text_title = computed(() => {
         }
     }
     // 确定最终返回的文本，优先使用表单值中的文本标题，如果为空则使用之前获取的标题或默认文本
-    let text = formValue.text_title || text_title || '';
-    if (text == '' && !props.isDisplayPanel) {
+    let text = formValue.text_title || text_title;
+    if (text === '' && !props.isDisplayPanel) {
         text = '请在此输入文字';
     }
     return text;
diff --git a/src/components/common/data-filter/index.vue b/src/components/common/data-filter/index.vue
index 8146098b..44f7bf02 100644
--- a/src/components/common/data-filter/index.vue
+++ b/src/components/common/data-filter/index.vue
@@ -5,13 +5,11 @@
                 <el-radio v-for="item in baseList.product_list" :key="item.value" :value="item.value">{{ item.name }}</el-radio>
             </el-radio-group>
         </el-form-item>
-        <template v-if="form.data_type === '0'">
-            <div class="nav-list">
-                <drag-group :list="drag_list" img-params="images" @onsort="data_list_sort" @remove="data_list_remove" @replace="data_list_replace"></drag-group>
-                <el-button class="mt-20 w" @click="add">+添加</el-button>
-            </div>
-        </template>
-        <template v-else>
+        <div v-show="form.data_type === '0'" class="nav-list">
+            <drag-group :list="drag_list" img-params="images" @onsort="data_list_sort" @remove="data_list_remove" @replace="data_list_replace"></drag-group>
+            <el-button class="mt-20 w" @click="add">+添加</el-button>
+        </div>
+        <div v-show="form.data_type === '1'" class="w h">
             <el-form-item label="关键字">
                 <el-input v-model="keyword" placeholder="请输入商品关键字" clearable @blur="keyword_blur"></el-input>
             </el-form-item>
@@ -38,7 +36,7 @@
                     <el-radio v-for="item in common_store.common.data_order_by_rule_list" :key="item.index" :value="item.index">{{ item.name }}</el-radio>
                 </el-radio-group>
             </el-form-item>
-        </template>
+        </div>
     </template>
     <template v-else-if="type === 'article'">
         <el-form-item label="读取方式">
@@ -46,13 +44,11 @@
                 <el-radio v-for="item in baseList.data_type_list" :key="item.value" :value="item.value">{{ item.name }}</el-radio>
             </el-radio-group>
         </el-form-item>
-        <template v-if="form.data_type === '0'">
-            <div class="nav-list">
-                <drag-group :list="drag_list" img-params="cover" @onsort="data_list_sort" @remove="data_list_remove" @replace="data_list_replace"></drag-group>
-                <el-button class="mtb-20 w" @click="add">+添加</el-button>
-            </div>
-        </template>
-        <template v-else>
+        <div v-show="form.data_type === '0'" class="nav-list">
+            <drag-group :list="drag_list" img-params="cover" @onsort="data_list_sort" @remove="data_list_remove" @replace="data_list_replace"></drag-group>
+            <el-button class="mtb-20 w" @click="add">+添加</el-button>
+        </div>
+        <div v-show="form.data_type === '1'" class="w h">
             <el-form-item label="关键字">
                 <el-input v-model="keyword" placeholder="请输入文章关键字" clearable @blur="keyword_blur"></el-input>
             </el-form-item>
@@ -77,7 +73,7 @@
             <el-form-item label="封面图片">
                 <el-switch v-model="form.is_cover" active-value="1" inactive-value="0" />
             </el-form-item>
-        </template>
+        </div>
     </template>
     <template v-else>
         <el-form-item label="读取方式">
@@ -85,13 +81,11 @@
                 <el-radio v-for="item in baseList.brand_data_type_list" :key="item.value" :value="item.value">{{ item.name }}</el-radio>
             </el-radio-group>
         </el-form-item>
-        <template v-if="form.data_type === '0'">
-            <div class="nav-list">
-                <drag-group :list="drag_list" img-params="logo" @onsort="data_list_sort" @remove="data_list_remove" @replace="data_list_replace"></drag-group>
-                <el-button class="mt-20 w" @click="add">+添加</el-button>
-            </div>
-        </template>
-        <template v-else>
+        <div v-show="form.data_type === '0'" class="nav-list">
+            <drag-group :list="drag_list" img-params="logo" @onsort="data_list_sort" @remove="data_list_remove" @replace="data_list_replace"></drag-group>
+            <el-button class="mt-20 w" @click="add">+添加</el-button>
+        </div>
+        <div v-show="form.data_type === '1'" class="w h">
             <el-form-item label="关键字">
                 <el-input v-model="keyword" placeholder="请输入品牌关键字" clearable @blur="keyword_blur"></el-input>
             </el-form-item>
@@ -113,7 +107,7 @@
                     <el-radio v-for="item in common_store.common.data_order_by_rule_list" :key="item.index" :value="item.index">{{ item.name }}</el-radio>
                 </el-radio-group>
             </el-form-item>
-        </template>
+        </div>
     </template>
 </template>
 
diff --git a/src/components/common/tabs-view/index.vue b/src/components/common/tabs-view/index.vue
index a772161e..030fd902 100644
--- a/src/components/common/tabs-view/index.vue
+++ b/src/components/common/tabs-view/index.vue
@@ -9,7 +9,17 @@
                     <template v-else>
                         <image-empty class="img" error-img-style="width:2rem;height:2rem;"></image-empty>
                     </template>
-                    <div class="title" :style="title_style(index) + (index == activeIndex ? '' : padding_bottom)">{{ item.title }}</div>
+                    <template v-if="item.tabs_type == '1'">
+                        <template v-if="!isEmpty(item.tabs_icon)">
+                            <el-icon :class="`iconfont ${ 'icon-' + item.tabs_icon}`" class="title" :style="icon_style(index) + (index == activeIndex ? '' : padding_bottom)" />
+                        </template>
+                        <template v-else>
+                            <image-empty v-model="item.tabs_img[0]" fit="contain" class="title" :style="img_style() + (index == activeIndex ? '' : padding_bottom)" error-img-style="width: 2rem;height: 2rem;" />
+                        </template>
+                    </template>
+                    <template v-else>
+                        <div class="title" :style="title_style(index) + (index == activeIndex ? '' : padding_bottom)">{{ item.title }}</div>
+                    </template>
                     <div class="desc" :style="tabs_theme_index == '1' && index == activeIndex ? tabs_check : ''">{{ item.desc }}</div>
                     <icon name="checked-smooth" class="icon" :style="tabs_theme_index == '3' ? icon_tabs_check() : ''"></icon>
                     <div class="bottom_line" :class="tabs_bottom_line_theme" :style="tabs_check"></div>
@@ -21,7 +31,7 @@
 </template>
 
 <script lang="ts" setup>
-import { gradient_computer } from '@/utils';
+import { gradient_computer, radius_computer } from '@/utils';
 import { isEmpty } from 'lodash';
 const props = defineProps({
     value: {
@@ -98,6 +108,29 @@ const title_style = (index: number) => {
     }
     return style;
 };
+
+const icon_style = (index: number) => {
+    // 默认是未选中的状态
+    let style = `font-size: ${new_style.value.tabs_icon_size}px;line-height: ${new_style.value.tabs_icon_size}px;color:${new_style.value.tabs_icon_color};`;
+    // 选中的状态
+    if (index == props.activeIndex) {
+        let checked_style = `font-size: ${new_style.value.tabs_icon_size_checked}px;line-height: ${new_style.value.tabs_icon_size_checked}px;color:${new_style.value.tabs_icon_color_checked};`;
+        if (['2', '4'].includes(tabs_theme_index.value)) {
+            checked_style += tabs_check.value;
+        }
+        style = checked_style;
+    }
+    return style;
+};
+
+const img_style = () => {
+    let style = `height: ${new_style.value.tabs_img_height}px;` + radius_computer(new_style.value.tabs_img_radius);
+    if (new_style.value.is_tabs_img_background == '1' && ['2', '4'].includes(tabs_theme_index.value)) {
+        style += tabs_check.value;
+    }
+    return style;
+};
+
 const padding_bottom = computed(() => {
     let bottom = 0;
     if (form.value.tabs_theme == '0') {
diff --git a/src/components/model-article-tabs/model-article-tabs-content.vue b/src/components/model-article-tabs/model-article-tabs-content.vue
index a397e292..7786818a 100644
--- a/src/components/model-article-tabs/model-article-tabs-content.vue
+++ b/src/components/model-article-tabs/model-article-tabs-content.vue
@@ -34,8 +34,19 @@
                     <drag :data="form.tabs_list" type="card" icon-position="top" :space-col="20" @click="tabs_list_click" @remove="tabs_list_remove" @on-sort="tabs_list_sort">
                         <template #default="{ row, index }">
                             <div class="flex-col w">
-                                <el-form-item label="显示标题">
-                                    <el-input v-model="row.title" placeholder="请输入标题文字" clearable />
+                                <el-form-item label="数据类型" class="w mb-10">
+                                    <div class="flex-col gap-10 w h">
+                                        <el-radio-group v-model="row.tabs_type">
+                                            <el-radio value="0">文本</el-radio>
+                                            <el-radio value="1">图片/图标</el-radio>
+                                        </el-radio-group>
+                                        <template v-if="row.tabs_type == '1'">
+                                            <upload v-model="row.tabs_img" v-model:icon-value="row.tabs_icon" is-icon :limit="1" size="50"></upload>
+                                        </template>
+                                        <template v-else>
+                                            <el-input v-model="row.title" placeholder="请输入标题文字" clearable />
+                                        </template>
+                                    </div>
                                 </el-form-item>
                                 <template v-if="form.tabs_active_index == index">
                                     <el-form-item v-if="form.tabs_theme == '1'" label="简介配置">
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 1c29460a..d7fd06f9 100644
--- a/src/components/model-article-tabs/model-article-tabs-styles.vue
+++ b/src/components/model-article-tabs/model-article-tabs-styles.vue
@@ -16,6 +16,27 @@
                 <el-form-item label="未选文字">
                     <color-text-size-group v-model:color="form.tabs_color" v-model:typeface="form.tabs_weight" v-model:size="form.tabs_size" default-color="rgba(51,51,51,1)"></color-text-size-group>
                 </el-form-item>
+                <el-form-item label="选中图标">
+                    <color-text-size-group v-model:color="form.tabs_icon_color_checked" v-model:size="form.tabs_icon_size_checked" default-color="rgba(51,51,51,1)" slider-name="大小" :type-list="['color', 'size']"  />
+                </el-form-item>
+                <el-form-item label="未选图标">
+                    <color-text-size-group v-model:color="form.tabs_icon_color" v-model:size="form.tabs_icon_size" default-color="rgba(51,51,51,1)" slider-name="大小" :type-list="['color', 'size']" />
+                </el-form-item>
+                <el-form-item label="图片设置">
+                    <div class="flex-col gap-10 w">
+                        <template v-if="['2', '4'].includes(data.tabs_theme)">
+                            <el-form-item label="背景" label-width="40">
+                                <el-switch v-model="form.is_tabs_img_background" active-value="1" inactive-value="0" />
+                            </el-form-item>
+                        </template>
+                        <el-form-item label="圆角" label-width="40">
+                            <radius :value="form.tabs_img_radius"></radius>
+                        </el-form-item>
+                        <el-form-item label="高度" label-width="40">
+                            <slider v-model="form.tabs_img_height" :max="200"></slider>
+                        </el-form-item>
+                    </div>
+                </el-form-item>
                 <el-form-item label="上下间距">
                     <slider v-model="form.tabs_sign_spacing" :max="50"></slider>
                 </el-form-item>
diff --git a/src/components/model-custom/model-custom-content.vue b/src/components/model-custom/model-custom-content.vue
index a5ea2bc5..70a4bc0b 100644
--- a/src/components/model-custom/model-custom-content.vue
+++ b/src/components/model-custom/model-custom-content.vue
@@ -46,7 +46,7 @@
                                 </div>
                             </template>
                             <template v-else>
-                                <filter-form :filter-data="default_type_data?.filter_config?.filter_form_config || {}" direction="vertical" :title-width="70" :data-interface="form.data_source_content" @form-change="filter_form_change"></filter-form>
+                                <filter-form :filter-data="default_type_data?.filter_config?.filter_form_config || {}" direction="vertical" :title-width="58" :data-interface="form.data_source_content" @form-change="filter_form_change"></filter-form>
                             </template>
                         </div>
                     </card-container>
@@ -332,10 +332,10 @@ const changeDataSource = (key: string) => {
     form.value.data_source_direction = 'vertical';
     // 如果存在默认数据类型的时候，就直接赋值给data_list
     if (type_data.length > 0 && !isEmpty(type_data[0].appoint_data)) {
-        emits('data_source_change', type_data[0].name)
+        emits('data_source_change', type_data[0].name);
         form.value.data_source_content.data_list = [ type_data[0].appoint_data ];
     } else if (type_data.length > 0 && !isEmpty(type_data[0].custom_config)) {
-        emits('data_source_change', type_data[0].name)
+        emits('data_source_change', type_data[0].name);
         // 是自定义数据类型
         form.value.is_custom_data = '1';
         // 自定义数据取值
diff --git a/src/components/model-goods-tabs/model-goods-tabs-content.vue b/src/components/model-goods-tabs/model-goods-tabs-content.vue
index 5bca3b52..c2102ad1 100644
--- a/src/components/model-goods-tabs/model-goods-tabs-content.vue
+++ b/src/components/model-goods-tabs/model-goods-tabs-content.vue
@@ -37,8 +37,19 @@
                     <drag :data="form.tabs_list" type="card" icon-position="top" :space-col="20" @click="tabs_list_click" @remove="tabs_list_remove" @on-sort="tabs_list_sort">
                         <template #default="{ row, index }">
                             <div class="flex-col w">
-                                <el-form-item label="显示标题">
-                                    <el-input v-model="row.title" placeholder="请输入标题文字" clearable />
+                                <el-form-item label="数据类型" class="w mb-10">
+                                    <div class="flex-col gap-10 w h">
+                                        <el-radio-group v-model="row.tabs_type">
+                                            <el-radio value="0">文本</el-radio>
+                                            <el-radio value="1">图片/图标</el-radio>
+                                        </el-radio-group>
+                                        <template v-if="row.tabs_type == '1'">
+                                            <upload v-model="row.tabs_img" v-model:icon-value="row.tabs_icon" is-icon :limit="1" size="50"></upload>
+                                        </template>
+                                        <template v-else>
+                                            <el-input v-model="row.title" placeholder="请输入标题文字" clearable />
+                                        </template>
+                                    </div>
                                 </el-form-item>
                                 <template v-if="form.tabs_active_index == index">
                                     <el-form-item v-if="form.tabs_theme == '4'" label="上传图片">
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 e6beaa64..74f39173 100644
--- a/src/components/model-goods-tabs/model-goods-tabs-styles.vue
+++ b/src/components/model-goods-tabs/model-goods-tabs-styles.vue
@@ -16,6 +16,27 @@
                 <el-form-item label="未选文字">
                     <color-text-size-group v-model:color="form.tabs_color" v-model:typeface="form.tabs_weight" v-model:size="form.tabs_size" default-color="rgba(51,51,51,1)"></color-text-size-group>
                 </el-form-item>
+                <el-form-item label="选中图标">
+                    <color-text-size-group v-model:color="form.tabs_icon_color_checked" v-model:size="form.tabs_icon_size_checked" default-color="rgba(51,51,51,1)" slider-name="大小" :type-list="['color', 'size']"  />
+                </el-form-item>
+                <el-form-item label="未选图标">
+                    <color-text-size-group v-model:color="form.tabs_icon_color" v-model:size="form.tabs_icon_size" default-color="rgba(51,51,51,1)" slider-name="大小" :type-list="['color', 'size']" />
+                </el-form-item>
+                <el-form-item label="图片设置">
+                    <div class="flex-col gap-10 w">
+                        <template v-if="['2', '4'].includes(data.tabs_theme)">
+                            <el-form-item label="背景" label-width="40">
+                                <el-switch v-model="form.is_tabs_img_background" active-value="1" inactive-value="0" />
+                            </el-form-item>
+                        </template>
+                        <el-form-item label="圆角" label-width="40">
+                            <radius :value="form.tabs_img_radius"></radius>
+                        </el-form-item>
+                        <el-form-item label="高度" label-width="40">
+                            <slider v-model="form.tabs_img_height" :max="200"></slider>
+                        </el-form-item>
+                    </div>
+                </el-form-item>
                 <el-form-item label="上下间距">
                     <slider v-model="form.tabs_sign_spacing" :max="50"></slider>
                 </el-form-item>
diff --git a/src/components/model-tabs/model-tabs-content.vue b/src/components/model-tabs/model-tabs-content.vue
index c3ad0adf..6739812d 100644
--- a/src/components/model-tabs/model-tabs-content.vue
+++ b/src/components/model-tabs/model-tabs-content.vue
@@ -23,17 +23,39 @@
                 <div class="flex-col gap-x-20">
                     <div class="card-background box-shadow-sm ptb-25 flex gap-y-16 re align-c">
                         <el-icon class="iconfont icon-jinzhi size-16 cursor-move" />
-                        <el-form-item label="显示标题" class="w mb-0">
-                            <el-input v-model="form.home_data.title" placeholder="请输入标题文字" clearable />
+                        <el-form-item label="数据类型" class="w mb-0">
+                            <div class="flex-col gap-10 w h">
+                                <el-radio-group v-model="form.home_data.tabs_type">
+                                    <el-radio value="0">文本</el-radio>
+                                    <el-radio value="1">图片/图标</el-radio>
+                                </el-radio-group>
+                                <template v-if="form.home_data.tabs_type == '1'">
+                                    <upload v-model="form.home_data.tabs_img" v-model:icon-value="form.home_data.tabs_icon" is-icon :limit="1" size="50"></upload>
+                                </template>
+                                <template v-else>
+                                    <el-input v-model="form.home_data.title" placeholder="请输入标题文字" clearable />
+                                </template>
+                            </div>
                         </el-form-item>
                     </div>
                     <drag :data="form.tabs_list" type="card" :space-col="25" @remove="remove" @on-sort="on_sort">
                         <template #default="scoped">
                             <div class="flex-col align-c jc-s gap-20 flex-1 w">
-                                <el-form-item label="显示标题" class="w mb-0">
-                                    <el-input v-model="scoped.row.title" placeholder="请输入标题文字" clearable />
-                                </el-form-item>
                                 <el-form-item label="数据类型" class="w mb-0">
+                                    <div class="flex-col gap-10 w h">
+                                        <el-radio-group v-model="scoped.row.tabs_type">
+                                            <el-radio value="0">文本</el-radio>
+                                            <el-radio value="1">图片/图标</el-radio>
+                                        </el-radio-group>
+                                        <template v-if="scoped.row.tabs_type == '1'">
+                                            <upload v-model="scoped.row.tabs_img" v-model:icon-value="scoped.row.tabs_icon" is-icon :limit="1" size="50"></upload>
+                                        </template>
+                                        <template v-else>
+                                            <el-input v-model="scoped.row.title" placeholder="请输入标题文字" clearable />
+                                        </template>
+                                    </div>
+                                </el-form-item>
+                                <el-form-item label="链接类型" class="w mb-0">
                                     <el-radio-group v-model="scoped.row.data_type">
                                         <el-radio value="0">DIY页面</el-radio>
                                         <el-radio value="1">商品分类</el-radio>
diff --git a/src/components/model-tabs/model-tabs-styles.vue b/src/components/model-tabs/model-tabs-styles.vue
index 4220df0a..acd379aa 100644
--- a/src/components/model-tabs/model-tabs-styles.vue
+++ b/src/components/model-tabs/model-tabs-styles.vue
@@ -11,10 +11,31 @@
                     <mult-color-picker :value="form.tabs_checked" :type="form.tabs_direction" @update:value="tabs_checked_event"></mult-color-picker>
                 </el-form-item>
                 <el-form-item label="选中标题">
-                    <color-text-size-group v-model:color="form.tabs_color_checked" v-model:typeface="form.tabs_weight_checked" v-model:size="form.tabs_size_checked" default-color="rgba(51,51,51,1)"></color-text-size-group>
+                    <color-text-size-group v-model:color="form.tabs_color_checked" v-model:typeface="form.tabs_weight_checked" v-model:size="form.tabs_size_checked" default-color="rgba(51,51,51,1)" />
                 </el-form-item>
                 <el-form-item label="未选标题">
-                    <color-text-size-group v-model:color="form.tabs_color" v-model:typeface="form.tabs_weight" v-model:size="form.tabs_size" default-color="rgba(51,51,51,1)"></color-text-size-group>
+                    <color-text-size-group v-model:color="form.tabs_color" v-model:typeface="form.tabs_weight" v-model:size="form.tabs_size" default-color="rgba(51,51,51,1)" />
+                </el-form-item>
+                <el-form-item label="选中图标">
+                    <color-text-size-group v-model:color="form.tabs_icon_color_checked" v-model:size="form.tabs_icon_size_checked" default-color="rgba(51,51,51,1)" slider-name="大小" :type-list="['color', 'size']"  />
+                </el-form-item>
+                <el-form-item label="未选图标">
+                    <color-text-size-group v-model:color="form.tabs_icon_color" v-model:size="form.tabs_icon_size" default-color="rgba(51,51,51,1)" slider-name="大小" :type-list="['color', 'size']" />
+                </el-form-item>
+                <el-form-item label="图片设置">
+                    <div class="flex-col gap-10 w">
+                        <template v-if="['2', '4'].includes(tabsStyle)">
+                            <el-form-item label="背景" label-width="40">
+                                <el-switch v-model="form.is_tabs_img_background" active-value="1" inactive-value="0" />
+                            </el-form-item>
+                        </template>
+                        <el-form-item label="圆角" label-width="40">
+                            <radius :value="form.tabs_img_radius"></radius>
+                        </el-form-item>
+                        <el-form-item label="高度" label-width="40">
+                            <slider v-model="form.tabs_img_height" :max="200"></slider>
+                        </el-form-item>
+                    </div>
                 </el-form-item>
                 <el-form-item label="上下间距">
                     <slider v-model="form.tabs_sign_spacing" :max="50"></slider>
diff --git a/src/config/const/article-tabs.ts b/src/config/const/article-tabs.ts
index b7aadc20..2b0a7969 100644
--- a/src/config/const/article-tabs.ts
+++ b/src/config/const/article-tabs.ts
@@ -9,6 +9,9 @@ interface ArticleList {
 }
 interface articleTabsList {
     id: string;
+    tabs_type: string;
+    tabs_img: uploadList[];
+    tabs_icon: string;
     title: string;
     desc: string;
     data_type: string;
@@ -48,6 +51,13 @@ interface DefaultArticleTabs {
         tabs_weight: string;
         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_img_radius: radiusStyle,
+        tabs_img_height: number,
         tabs_spacing: number;
         tabs_bg_direction: string,
         tabs_bg_color_list: color_list[],
@@ -107,12 +117,12 @@ const defaultArticleTabs: DefaultArticleTabs = {
         article_theme: '0',
         article_carousel_col: '2',
         tabs_list: [
-            { id: '1', title: '热门推荐', desc: '简介', data_type: '0', keyword: '', category_ids: defaultSetting.category_ids, data_ids: '', number: defaultSetting.page_size, order_by_type: defaultSetting.order_by_type, order_by_rule: defaultSetting.order_by_rule, is_cover: defaultSetting.is_cover, data_list: [], data_auto_list: [] },
-            { id: '2', title: '测试一', desc: '简介', data_type: '0', keyword: '', category_ids: defaultSetting.category_ids, data_ids: '', number: defaultSetting.page_size, order_by_type: defaultSetting.order_by_type, order_by_rule: defaultSetting.order_by_rule, is_cover: defaultSetting.is_cover, data_list: [], data_auto_list: [] },
-            { id: '3', title: '测试二', desc: '简介', data_type: '0', keyword: '', category_ids: defaultSetting.category_ids, data_ids: '', number: defaultSetting.page_size, order_by_type: defaultSetting.order_by_type, order_by_rule: defaultSetting.order_by_rule, is_cover: defaultSetting.is_cover, data_list: [], data_auto_list: [] },
-            { id: '4', title: '测试三', desc: '简介', data_type: '0', keyword: '', category_ids: defaultSetting.category_ids, data_ids: '', number: defaultSetting.page_size, order_by_type: defaultSetting.order_by_type, order_by_rule: defaultSetting.order_by_rule, is_cover: defaultSetting.is_cover, data_list: [], data_auto_list: [] },
-            { id: '5', title: '测试四', desc: '简介', data_type: '0', keyword: '', category_ids: defaultSetting.category_ids, data_ids: '', number: defaultSetting.page_size, order_by_type: defaultSetting.order_by_type, order_by_rule: defaultSetting.order_by_rule, is_cover: defaultSetting.is_cover, data_list: [], data_auto_list: [] },
-            { id: '6', title: '测试五', desc: '简介', data_type: '0', keyword: '', category_ids: defaultSetting.category_ids, data_ids: '', number: defaultSetting.page_size, order_by_type: defaultSetting.order_by_type, order_by_rule: defaultSetting.order_by_rule, is_cover: defaultSetting.is_cover, data_list: [], data_auto_list: [] },
+            { id: '1', tabs_type: '0', tabs_img: [], tabs_icon: '', title: '热门推荐', desc: '简介', data_type: '0', keyword: '', category_ids: defaultSetting.category_ids, data_ids: '', number: defaultSetting.page_size, order_by_type: defaultSetting.order_by_type, order_by_rule: defaultSetting.order_by_rule, is_cover: defaultSetting.is_cover, data_list: [], data_auto_list: [] },
+            { id: '2', tabs_type: '0', tabs_img: [], tabs_icon: '', title: '测试一', desc: '简介', data_type: '0', keyword: '', category_ids: defaultSetting.category_ids, data_ids: '', number: defaultSetting.page_size, order_by_type: defaultSetting.order_by_type, order_by_rule: defaultSetting.order_by_rule, is_cover: defaultSetting.is_cover, data_list: [], data_auto_list: [] },
+            { id: '3', tabs_type: '0', tabs_img: [], tabs_icon: '', title: '测试二', desc: '简介', data_type: '0', keyword: '', category_ids: defaultSetting.category_ids, data_ids: '', number: defaultSetting.page_size, order_by_type: defaultSetting.order_by_type, order_by_rule: defaultSetting.order_by_rule, is_cover: defaultSetting.is_cover, data_list: [], data_auto_list: [] },
+            { id: '4', tabs_type: '0', tabs_img: [], tabs_icon: '', title: '测试三', desc: '简介', data_type: '0', keyword: '', category_ids: defaultSetting.category_ids, data_ids: '', number: defaultSetting.page_size, order_by_type: defaultSetting.order_by_type, order_by_rule: defaultSetting.order_by_rule, is_cover: defaultSetting.is_cover, data_list: [], data_auto_list: [] },
+            { id: '5', tabs_type: '0', tabs_img: [], tabs_icon: '', title: '测试四', desc: '简介', data_type: '0', keyword: '', category_ids: defaultSetting.category_ids, data_ids: '', number: defaultSetting.page_size, order_by_type: defaultSetting.order_by_type, order_by_rule: defaultSetting.order_by_rule, is_cover: defaultSetting.is_cover, data_list: [], data_auto_list: [] },
+            { id: '6', tabs_type: '0', tabs_img: [], tabs_icon: '', title: '测试五', desc: '简介', data_type: '0', keyword: '', category_ids: defaultSetting.category_ids, data_ids: '', number: defaultSetting.page_size, order_by_type: defaultSetting.order_by_type, order_by_rule: defaultSetting.order_by_rule, is_cover: defaultSetting.is_cover, data_list: [], data_auto_list: [] },
         ],
         tabs_active_index: 0,
         field_show: ['0', '1', '3'],
@@ -137,6 +147,20 @@ const defaultArticleTabs: DefaultArticleTabs = {
         tabs_weight: '500',
         tabs_size: 14,
         tabs_color: 'rgba(51,51,51,1)',
+        // 选项卡图标和图片设置
+        tabs_icon_color_checked: 'rgba(51,51,51,1)',
+        tabs_icon_size_checked: 14,
+        tabs_icon_color: 'rgba(51,51,51,1)',
+        tabs_icon_size: 14,
+        is_tabs_img_background: '0',
+        tabs_img_radius: {
+            radius: 0,
+            radius_top_left: 0,
+            radius_top_right: 0,
+            radius_bottom_left: 0,
+            radius_bottom_right: 0,
+        },
+        tabs_img_height: 20,
         tabs_spacing: 20,
         tabs_sign_spacing: 4,
         // 选项卡背景设置
diff --git a/src/config/const/goods-tabs.ts b/src/config/const/goods-tabs.ts
index c3b82362..0d6cb9c9 100644
--- a/src/config/const/goods-tabs.ts
+++ b/src/config/const/goods-tabs.ts
@@ -5,6 +5,9 @@ import { online_url } from '@/utils';
 const new_url = await online_url('/static/app/common/').then((res) => res);
 interface articleTabsList {
     id: string;
+    tabs_type: string;
+    tabs_img: uploadList[];
+    tabs_icon: string;
     title: string;
     img: uploadList[];
     desc: string;
@@ -51,6 +54,13 @@ interface DefaultProductList {
         tabs_weight: string;
         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_img_radius: radiusStyle,
+        tabs_img_height: number,
         tabs_spacing: number;
         tabs_sign_spacing: number;
         tabs_bg_direction: string,
@@ -126,10 +136,10 @@ const defaultProductList: DefaultProductList = {
         carousel_col: 3,
         // 选项卡数据
         tabs_list: [
-            { id: '1', title: '热门推荐', img: [], desc: '简介', data_type: '0', keyword: '', category_ids: defaultSetting.category_ids, brand_ids: defaultSetting.brand_ids, data_ids: [], number: defaultSetting.page_size, order_by_type: defaultSetting.order_by_type, order_by_rule: defaultSetting.order_by_type, data_list: [], data_auto_list: [] },
-            { id: '2', title: '测试一', img: [], desc: '简介', data_type: '0', keyword: '', category_ids: defaultSetting.category_ids, brand_ids: defaultSetting.brand_ids, data_ids: [], number: defaultSetting.page_size, order_by_type: defaultSetting.order_by_type, order_by_rule: defaultSetting.order_by_type, data_list: [], data_auto_list: [] },
-            { id: '3', title: '测试二', img: [], desc: '简介', data_type: '0', keyword: '', category_ids: defaultSetting.category_ids, brand_ids: defaultSetting.brand_ids, data_ids: [], number: defaultSetting.page_size, order_by_type: defaultSetting.order_by_type, order_by_rule: defaultSetting.order_by_type, data_list: [], data_auto_list: [] },
-            { id: '4', title: '测试三', img: [], desc: '简介', data_type: '0', keyword: '', category_ids: defaultSetting.category_ids, brand_ids: defaultSetting.brand_ids, data_ids: [], number: defaultSetting.page_size, order_by_type: defaultSetting.order_by_type, order_by_rule: defaultSetting.order_by_type, data_list: [], data_auto_list: [] },
+            { id: '1', tabs_type: '0', tabs_img: [], tabs_icon: '', title: '热门推荐', img: [], desc: '简介', data_type: '0', keyword: '', category_ids: defaultSetting.category_ids, brand_ids: defaultSetting.brand_ids, data_ids: [], number: defaultSetting.page_size, order_by_type: defaultSetting.order_by_type, order_by_rule: defaultSetting.order_by_type, data_list: [], data_auto_list: [] },
+            { id: '2', tabs_type: '0', tabs_img: [], tabs_icon: '', title: '测试一', img: [], desc: '简介', data_type: '0', keyword: '', category_ids: defaultSetting.category_ids, brand_ids: defaultSetting.brand_ids, data_ids: [], number: defaultSetting.page_size, order_by_type: defaultSetting.order_by_type, order_by_rule: defaultSetting.order_by_type, data_list: [], data_auto_list: [] },
+            { id: '3', tabs_type: '0', tabs_img: [], tabs_icon: '', title: '测试二', img: [], desc: '简介', data_type: '0', keyword: '', category_ids: defaultSetting.category_ids, brand_ids: defaultSetting.brand_ids, data_ids: [], number: defaultSetting.page_size, order_by_type: defaultSetting.order_by_type, order_by_rule: defaultSetting.order_by_type, data_list: [], data_auto_list: [] },
+            { id: '4', tabs_type: '0', tabs_img: [], tabs_icon: '', title: '测试三', img: [], desc: '简介', data_type: '0', keyword: '', category_ids: defaultSetting.category_ids, brand_ids: defaultSetting.brand_ids, data_ids: [], number: defaultSetting.page_size, order_by_type: defaultSetting.order_by_type, order_by_rule: defaultSetting.order_by_type, data_list: [], data_auto_list: [] },
         ],
         // 选中的内容索引
         tabs_active_index: 0,
@@ -167,6 +177,19 @@ const defaultProductList: DefaultProductList = {
         tabs_weight: '500',
         tabs_size: 14,
         tabs_color: 'rgba(51,51,51,1)',
+        tabs_icon_color_checked: 'rgba(51,51,51,1)',
+        tabs_icon_size_checked: 14,
+        tabs_icon_color: 'rgba(51,51,51,1)',
+        tabs_icon_size: 14,
+        is_tabs_img_background: '0',
+        tabs_img_radius: {
+            radius: 0,
+            radius_top_left: 0,
+            radius_top_right: 0,
+            radius_bottom_left: 0,
+            radius_bottom_right: 0,
+        },
+        tabs_img_height: 20,
         // tabs间距
         tabs_spacing: 20,
         tabs_sign_spacing: 4,
diff --git a/src/config/const/tabs-carousel.ts b/src/config/const/tabs-carousel.ts
index 16f22de6..abace3e2 100644
--- a/src/config/const/tabs-carousel.ts
+++ b/src/config/const/tabs-carousel.ts
@@ -2,6 +2,9 @@ import { get_math } from '@/utils';
 import defaultCommon from './index';
 interface tabs_page {
     id: string;
+    tabs_type: string;
+    tabs_img: uploadList[];
+    tabs_icon: string;
     title: string;
     desc: string;
     data_type: string;
@@ -39,6 +42,13 @@ interface defaultTabs {
         tabs_weight: string;
         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_img_radius: radiusStyle,
+        tabs_img_height: number,
         tabs_spacing: number;
         tabs_sign_spacing: number;
         tabs_bg_direction: string,
@@ -96,11 +106,11 @@ const defaultTabs: defaultTabs = {
         // 是否置顶
         tabs_top_up: '1',
         // 选项卡数据
-        home_data: { id: get_math(), title: '首页', desc: '简介', data_type: '0', classify: {}, micro_page: '', micro_page_list: {}, category_list: {} },
+        home_data: { id: get_math(), tabs_type: '0', tabs_img: [], tabs_icon: '', title: '首页', desc: '简介', data_type: '0', classify: {}, micro_page: '', micro_page_list: {}, category_list: {} },
         tabs_list: [
-            { id: get_math(), title: '热门推荐', desc: '简介', data_type: '0', classify: {}, micro_page: '', micro_page_list: {}, category_list: {} },
-            { id: get_math(), title: '测试一', desc: '简介', data_type: '0', classify: {}, micro_page: '', micro_page_list: {}, category_list: {} },
-            { id: get_math(), title: '测试二', desc: '简介', data_type: '0', classify: {}, micro_page: '', micro_page_list: {}, category_list: {} },
+            { id: get_math(), tabs_type: '0', tabs_img: [], tabs_icon: '', title: '热门推荐', desc: '简介', data_type: '0', classify: {}, micro_page: '', micro_page_list: {}, category_list: {} },
+            { id: get_math(), tabs_type: '0', tabs_img: [], tabs_icon: '', title: '测试一', desc: '简介', data_type: '0', classify: {}, micro_page: '', micro_page_list: {}, category_list: {} },
+            { id: get_math(), tabs_type: '0', tabs_img: [], tabs_icon: '', title: '测试二', desc: '简介', data_type: '0', classify: {}, micro_page: '', micro_page_list: {}, category_list: {} },
         ],
         // 轮播类型
         carousel_type: 'inherit',
@@ -147,6 +157,19 @@ const defaultTabs: defaultTabs = {
         tabs_weight: '500',
         tabs_size: 14,
         tabs_color: 'rgba(51,51,51,1)',
+        tabs_icon_color_checked: 'rgba(51,51,51,1)',
+        tabs_icon_size_checked: 14,
+        tabs_icon_color: 'rgba(51,51,51,1)',
+        tabs_icon_size: 14,
+        is_tabs_img_background: '0',
+        tabs_img_radius: {
+            radius: 0,
+            radius_top_left: 0,
+            radius_top_right: 0,
+            radius_bottom_left: 0,
+            radius_bottom_right: 0,
+        },
+        tabs_img_height: 20,
         tabs_spacing: 20,
         tabs_sign_spacing: 4,
         // 选项卡背景设置
diff --git a/src/config/const/tabs.ts b/src/config/const/tabs.ts
index cd66f085..efeec766 100644
--- a/src/config/const/tabs.ts
+++ b/src/config/const/tabs.ts
@@ -2,6 +2,9 @@ import { get_math } from '@/utils';
 import defaultCommon from './index';
 interface tabs_page {
     id: string;
+    tabs_type: string;
+    tabs_img: uploadList[];
+    tabs_icon: string;
     title: string;
     desc: string;
     data_type: string;
@@ -27,6 +30,13 @@ interface defaultTabs {
         tabs_weight: string;
         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_img_radius: radiusStyle,
+        tabs_img_height: number,
         tabs_spacing: number;
         tabs_sign_spacing: number;
         tabs_padding: paddingStyle;
@@ -40,11 +50,11 @@ const defaultTabs: defaultTabs = {
     content: {
         tabs_theme: '0',
         tabs_top_up: '1',
-        home_data: { id: get_math(), title: '首页', desc: '简介', data_type: '0', classify: {}, micro_page: '', micro_page_list: {}, category_list: {} },
+        home_data: { id: get_math(), tabs_type: '0', tabs_img: [], tabs_icon: '', title: '首页', desc: '简介', data_type: '0', classify: {}, micro_page: '', micro_page_list: {}, category_list: {} },
         tabs_list: [
-            { id: get_math(), title: '热门推荐', desc: '简介', data_type: '0', classify: {}, micro_page: '', micro_page_list: {}, category_list: {} },
-            { id: get_math(), title: '测试一', desc: '简介', data_type: '0', classify: {}, micro_page: '', micro_page_list: {}, category_list: {} },
-            { id: get_math(), title: '测试二', desc: '简介', data_type: '0', classify: {}, micro_page: '', micro_page_list: {}, category_list: {} },
+            { id: get_math(), tabs_type: '0', tabs_img: [], tabs_icon: '', title: '热门推荐', desc: '简介', data_type: '0', classify: {}, micro_page: '', micro_page_list: {}, category_list: {} },
+            { id: get_math(), tabs_type: '0', tabs_img: [], tabs_icon: '', title: '测试一', desc: '简介', data_type: '0', classify: {}, micro_page: '', micro_page_list: {}, category_list: {} },
+            { id: get_math(), tabs_type: '0', tabs_img: [], tabs_icon: '', title: '测试二', desc: '简介', data_type: '0', classify: {}, micro_page: '', micro_page_list: {}, category_list: {} },
         ],
     },
     style: {
@@ -60,6 +70,19 @@ const defaultTabs: defaultTabs = {
         tabs_weight: '500',
         tabs_size: 14,
         tabs_color: 'rgba(51,51,51,1)',
+        tabs_icon_color_checked: 'rgba(51,51,51,1)',
+        tabs_icon_size_checked: 14,
+        tabs_icon_color: 'rgba(51,51,51,1)',
+        tabs_icon_size: 14,
+        is_tabs_img_background: '0',
+        tabs_img_radius: {
+            radius: 0,
+            radius_top_left: 0,
+            radius_top_right: 0,
+            radius_bottom_left: 0,
+            radius_bottom_right: 0,
+        },
+        tabs_img_height: 20,
         tabs_spacing: 20,
         tabs_sign_spacing: 4,
         tabs_padding: {
diff --git a/src/utils/index.ts b/src/utils/index.ts
index 6e007791..6d322220 100644
--- a/src/utils/index.ts
+++ b/src/utils/index.ts
@@ -40,10 +40,10 @@ export function get_nested_property(obj: any, path: string): string {
     
     // 将属性路径字符串拆分为属性键数组
     const keys = path.split('.');
-    
+
     // 使用reduce方法遍历属性键数组，逐层访问对象属性
     // 如果当前对象存在且拥有下一个属性键，则继续访问；否则返回空字符串
-    return keys.reduce((o, key) => (o && o[key] ? o[key] : ''), obj) || '';
+    return keys.reduce((o, key) => (o != undefined && o[key] != undefined ? o[key] : ''), obj) ?? '';
 }
 
 /**