From 002451dcd9d0ac008baf2e0d58a6e66bf1a1d5aa Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E4=BA=8E=E8=82=96=E7=A3=8A?= <18851179580@163.com>
Date: Fri, 17 Jan 2025 16:34:19 +0800
Subject: [PATCH] =?UTF-8?q?=E9=80=89=E9=A1=B9=E5=8D=A1=E8=BD=AE=E6=92=AD?=
 =?UTF-8?q?=E9=80=BB=E8=BE=91=E4=BF=AE=E6=94=B9?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/common/tabs-view/index.vue     | 17 +++++++++---
 .../model-article-tabs-content.vue            |  3 +++
 .../model-article-tabs-styles.vue             | 20 ++++++++++++++
 .../model-goods-tabs-content.vue              |  3 +++
 .../model-goods-tabs-styles.vue               | 20 ++++++++++++++
 .../model-tabs/model-tabs-content.vue         |  3 +++
 .../model-tabs/model-tabs-setting.vue         |  2 +-
 .../model-tabs/model-tabs-styles.vue          | 27 ++++++++++++++++++-
 src/config/const/article-tabs.ts              | 19 +++++++++++++
 src/config/const/goods-tabs.ts                | 19 +++++++++++++
 src/config/const/header-nav.ts                |  2 +-
 src/config/const/search.ts                    |  2 +-
 src/config/const/tabs.ts                      | 19 +++++++++++++
 13 files changed, 149 insertions(+), 7 deletions(-)

diff --git a/src/components/common/tabs-view/index.vue b/src/components/common/tabs-view/index.vue
index 663d41f4..c6f15d34 100644
--- a/src/components/common/tabs-view/index.vue
+++ b/src/components/common/tabs-view/index.vue
@@ -25,7 +25,14 @@
                         <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>
+                    <template v-if="tabs_theme_index == '3' && index == activeIndex">
+                        <template v-if="!isEmpty(form.tabs_adorn_icon)">
+                            <icon :name="form.tabs_adorn_icon" class="icon" :style="tabs_theme_index == '3' ? icon_tabs_check() : ''" :size="new_style.tabs_adorn_icon_size + ''"></icon>
+                        </template>
+                        <template v-else>
+                            <image-empty v-model="form.tabs_adorn_img[0]" fit="contain" :style="tabs_theme_index == '3' ? tabs_adorn_img_style : ''" error-img-style="width: 2rem;height: 2rem;" />
+                        </template>
+                    </template>
                     <div class="bottom_line" :class="tabs_bottom_line_theme" :style="tabs_check"></div>
                 </div>
             </template>
@@ -82,6 +89,10 @@ const tabs_theme_1_style = computed(() => {
     return new_style.value.tabs_one_theme == '1';
 });
 
+const tabs_adorn_img_style = computed(() => {
+    return radius_computer(new_style.value.tabs_adorn_img_radius) + `height: ${new_style.value.tabs_adorn_img_height}px;${ new_style.value.is_tabs_adorn_img_background == '1' ? tabs_check.value : ''}`;
+});
+
 const tabs_height = computed(() => {
     const DEFAULT_HEIGHT_THEME_2 = 12;
     const DEFAULT_HEIGHT_THEME_4 = 4;
@@ -182,7 +193,7 @@ const padding_bottom = computed(() => {
             bottom = 3;
         }
     } else if (form.value.tabs_theme == '3') {
-        bottom = 10;
+        bottom = !isEmpty(form.value.tabs_adorn_icon) ? new_style.value.tabs_adorn_icon_size : new_style.value.tabs_adorn_img_height;
     }
     return ['1', '2', '4'].includes(form.value.tabs_theme) ? '' : `padding-bottom: ${(new_style.value?.tabs_sign_spacing || 0) + bottom}px;`;
 });
@@ -233,7 +244,7 @@ const icon_tabs_check = () => {
             bottom: 0;
             text-align: center;
             font-size: 2rem;
-            line-height: 1rem !important;
+            // line-height: 1rem !important;
             display: none;
         }
         .img {
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 e86a67d3..d6778217 100644
--- a/src/components/model-article-tabs/model-article-tabs-content.vue
+++ b/src/components/model-article-tabs/model-article-tabs-content.vue
@@ -18,6 +18,9 @@
                         <el-radio v-for="item in base_list.tabs_theme_list" :key="item.value" :value="item.value">{{ item.name }}</el-radio>
                     </el-radio-group>
                 </el-form-item>
+                <el-form-item v-if="form.tabs_theme == '3'" label="选中图标">
+                    <upload v-model="form.tabs_adorn_img" v-model:icon-value="form.tabs_adorn_icon" is-icon :limit="1" size="50"></upload>
+                </el-form-item>
                 <el-form-item label="文章风格">
                     <el-radio-group v-model="form.article_theme" @change="article_theme_change">
                         <el-radio v-for="item in base_list.article_theme_list" :key="item.value" :value="item.value">{{ item.name }}</el-radio>
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 b42010ec..25c9af8c 100644
--- a/src/components/model-article-tabs/model-article-tabs-styles.vue
+++ b/src/components/model-article-tabs/model-article-tabs-styles.vue
@@ -10,6 +10,25 @@
                     </el-radio-group>
                     <mult-color-picker :value="form.tabs_checked" :type="form.tabs_direction" @update:value="tabs_checked_event"></mult-color-picker>
                 </el-form-item>
+                <!-- 装饰图标设置 -->
+                <template v-if="data.tabs_theme == '3'">
+                    <el-form-item v-if="!isEmpty(data.tabs_adorn_icon)" label="装饰图标">
+                        <slider v-model="form.tabs_adorn_icon_size"></slider>
+                    </el-form-item>
+                    <el-form-item v-else label="装饰图片">
+                        <div class="flex-col gap-10 w">
+                            <el-form-item label="背景" label-width="40">
+                                <el-switch v-model="form.is_tabs_adorn_img_background" active-value="1" inactive-value="0" />
+                            </el-form-item>
+                            <el-form-item label="圆角" label-width="40">
+                                <radius :value="form.tabs_adorn_img_radius"></radius>
+                            </el-form-item>
+                            <el-form-item label="高度" label-width="40">
+                                <slider v-model="form.tabs_adorn_img_height" :max="200"></slider>
+                            </el-form-item>
+                        </div>
+                    </el-form-item>
+                </template>
                 <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>
                 </el-form-item>
@@ -195,6 +214,7 @@
     </div>
 </template>
 <script setup lang="ts">
+import { isEmpty } from 'lodash'
 /**
  * @description: 文章选项卡列表 （样式）
  * @param value{Object} 样式数据
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 313c3b2a..0607832c 100644
--- a/src/components/model-goods-tabs/model-goods-tabs-content.vue
+++ b/src/components/model-goods-tabs/model-goods-tabs-content.vue
@@ -18,6 +18,9 @@
                         <el-radio v-for="item in base_list.tabs_style_list" :key="item.value" :value="item.value">{{ item.name }}</el-radio>
                     </el-radio-group>
                 </el-form-item>
+                <el-form-item v-if="form.tabs_theme == '3'" label="选中图标">
+                    <upload v-model="form.tabs_adorn_img" v-model:icon-value="form.tabs_adorn_icon" is-icon :limit="1" size="50"></upload>
+                </el-form-item>
                 <el-form-item label="商品风格">
                     <el-radio-group v-model="form.theme" @change="change_style">
                         <el-radio v-for="item in base_list.product_style_list" :key="item.value" :value="item.value">{{ item.name }}</el-radio>
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 d9cc546c..537cf754 100644
--- a/src/components/model-goods-tabs/model-goods-tabs-styles.vue
+++ b/src/components/model-goods-tabs/model-goods-tabs-styles.vue
@@ -10,6 +10,25 @@
                     </el-radio-group>
                     <mult-color-picker :value="form.tabs_checked" :type="form.tabs_direction" @update:value="tabs_checked_event"></mult-color-picker>
                 </el-form-item>
+                <!-- 装饰图标设置 -->
+                <template v-if="data.tabs_theme == '3'">
+                    <el-form-item v-if="!isEmpty(data.tabs_adorn_icon)" label="装饰图标">
+                        <slider v-model="form.tabs_adorn_icon_size"></slider>
+                    </el-form-item>
+                    <el-form-item v-else label="装饰图片">
+                        <div class="flex-col gap-10 w">
+                            <el-form-item label="背景" label-width="40">
+                                <el-switch v-model="form.is_tabs_adorn_img_background" active-value="1" inactive-value="0" />
+                            </el-form-item>
+                            <el-form-item label="圆角" label-width="40">
+                                <radius :value="form.tabs_adorn_img_radius"></radius>
+                            </el-form-item>
+                            <el-form-item label="高度" label-width="40">
+                                <slider v-model="form.tabs_adorn_img_height" :max="200"></slider>
+                            </el-form-item>
+                        </div>
+                    </el-form-item>
+                </template>
                 <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>
                 </el-form-item>
@@ -232,6 +251,7 @@
     </div>
 </template>
 <script setup lang="ts">
+import { isEmpty } from 'lodash';
 const props = defineProps({
     value: {
         type: Object,
diff --git a/src/components/model-tabs/model-tabs-content.vue b/src/components/model-tabs/model-tabs-content.vue
index 6679778f..f99d9bb8 100644
--- a/src/components/model-tabs/model-tabs-content.vue
+++ b/src/components/model-tabs/model-tabs-content.vue
@@ -14,6 +14,9 @@
                         <el-radio value="3">样式三</el-radio>
                     </el-radio-group>
                 </el-form-item>
+                <el-form-item v-if="form.tabs_theme == '3'" label="选中图标">
+                    <upload v-model="form.tabs_adorn_img" v-model:icon-value="form.tabs_adorn_icon" is-icon :limit="1" size="50"></upload>
+                </el-form-item>
                 <el-form-item label="滑动置顶">
                     <el-switch v-model="form.tabs_top_up" class="mr-10" active-value="1" inactive-value="0" :disabled="is_immersion_model" />
                     <el-tooltip effect="dark" :show-after="200" :hide-after="200" content="<span>1.开启沉浸样式时，选项卡置顶功能禁用</span><br/><span>2.滑动置顶仅手机端有效</span>" raw-content placement="top">
diff --git a/src/components/model-tabs/model-tabs-setting.vue b/src/components/model-tabs/model-tabs-setting.vue
index d36ee28d..93b1dc06 100644
--- a/src/components/model-tabs/model-tabs-setting.vue
+++ b/src/components/model-tabs/model-tabs-setting.vue
@@ -4,7 +4,7 @@
             <model-tabs-content :value="value.content" :tab-style="value.style"></model-tabs-content>
         </template>
         <template v-if="type == '2'">
-            <model-tabs-styles :value="value.style" :tabs-style="value.content.tabs_theme"></model-tabs-styles>
+            <model-tabs-styles :value="value.style" :content="value.content" :tabs-style="value.content.tabs_theme"></model-tabs-styles>
         </template>
     </div>
 </template>
diff --git a/src/components/model-tabs/model-tabs-styles.vue b/src/components/model-tabs/model-tabs-styles.vue
index b8ba4083..f79a9b84 100644
--- a/src/components/model-tabs/model-tabs-styles.vue
+++ b/src/components/model-tabs/model-tabs-styles.vue
@@ -10,6 +10,25 @@
                     </el-radio-group>
                     <mult-color-picker :value="form.tabs_checked" :type="form.tabs_direction" @update:value="tabs_checked_event"></mult-color-picker>
                 </el-form-item>
+                <!-- 装饰图标设置 -->
+                <template v-if="data.tabs_theme == '3'">
+                    <el-form-item v-if="!isEmpty(data.tabs_adorn_icon)" label="装饰图标">
+                        <slider v-model="form.tabs_adorn_icon_size"></slider>
+                    </el-form-item>
+                    <el-form-item v-else label="装饰图片">
+                        <div class="flex-col gap-10 w">
+                            <el-form-item label="背景" label-width="40">
+                                <el-switch v-model="form.is_tabs_adorn_img_background" active-value="1" inactive-value="0" />
+                            </el-form-item>
+                            <el-form-item label="圆角" label-width="40">
+                                <radius :value="form.tabs_adorn_img_radius"></radius>
+                            </el-form-item>
+                            <el-form-item label="高度" label-width="40">
+                                <slider v-model="form.tabs_adorn_img_height" :max="200"></slider>
+                            </el-form-item>
+                        </div>
+                    </el-form-item>
+                </template>
                 <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)" />
                 </el-form-item>
@@ -83,6 +102,7 @@
     </div>
 </template>
 <script setup lang="ts">
+import { isEmpty } from 'lodash';
 const props = defineProps({
     value: {
         type: Object,
@@ -92,6 +112,10 @@ const props = defineProps({
         type: Boolean,
         default: true,
     },
+    content: {
+        type: Object,
+        default: () => {},
+    },
     tabsStyle: {
         type: String,
         default: '',
@@ -100,9 +124,10 @@ const props = defineProps({
 
 const state = reactive({
     form: props.value,
+    data: props.content,
 });
 // 如果需要解构，确保使用toRefs
-const { form } = toRefs(state);
+const { form, data } = toRefs(state);
 const common_styles_update = (val: Object) => {
     form.value.common_style = val;
 };
diff --git a/src/config/const/article-tabs.ts b/src/config/const/article-tabs.ts
index 38fe5a23..4444d0b2 100644
--- a/src/config/const/article-tabs.ts
+++ b/src/config/const/article-tabs.ts
@@ -30,6 +30,8 @@ interface DefaultArticleTabs {
     content: {
         content_top: object;
         tabs_theme: string;
+        tabs_adorn_icon: string;
+        tabs_adorn_img: uploadList[];
         tabs_top_up: string;
         article_theme: string;
         article_carousel_col: string;
@@ -47,6 +49,10 @@ interface DefaultArticleTabs {
     style: {
         tabs_one_theme: string;
         tabs_checked: color_list[];
+        is_tabs_adorn_img_background: string;
+        tabs_adorn_icon_size: number,
+        tabs_adorn_img_radius: radiusStyle,
+        tabs_adorn_img_height: number,
         tabs_direction: string;
         tabs_weight_checked: string;
         tabs_size_checked: number;
@@ -133,6 +139,9 @@ const defaultArticleTabs: DefaultArticleTabs = {
             ...commonTop,
         },
         tabs_theme: '0',
+        // 选中装饰图标
+        tabs_adorn_icon: 'checked-smooth',
+        tabs_adorn_img: [],
         tabs_top_up: '0',
         article_theme: '0',
         article_carousel_col: '2',
@@ -161,6 +170,16 @@ const defaultArticleTabs: DefaultArticleTabs = {
             { color: '#FF2222', color_percentage: undefined },
             { color: '#FF9898', color_percentage: undefined },
         ],
+        is_tabs_adorn_img_background: '0',
+        tabs_adorn_icon_size: 10,
+        tabs_adorn_img_radius: {
+            radius: 0,
+            radius_top_left: 0,
+            radius_top_right: 0,
+            radius_bottom_left: 0,
+            radius_bottom_right: 0,
+        },
+        tabs_adorn_img_height: 10,
         tabs_direction: '90deg',
         tabs_weight_checked: 'bold',
         tabs_size_checked: 14,
diff --git a/src/config/const/goods-tabs.ts b/src/config/const/goods-tabs.ts
index b69e879d..40db52ea 100644
--- a/src/config/const/goods-tabs.ts
+++ b/src/config/const/goods-tabs.ts
@@ -27,6 +27,8 @@ interface DefaultProductList {
     content: {
         content_top: object;
         tabs_theme: string;
+        tabs_adorn_icon: string;
+        tabs_adorn_img: uploadList[];
         tabs_top_up: string;
         theme: string;
         carousel_col: number;
@@ -50,6 +52,10 @@ interface DefaultProductList {
     style: {
         tabs_one_theme: string;
         tabs_checked: color_list[];
+        is_tabs_adorn_img_background: string;
+        tabs_adorn_icon_size: number,
+        tabs_adorn_img_radius: radiusStyle,
+        tabs_adorn_img_height: number,
         tabs_direction: string;
         tabs_weight_checked: string;
         tabs_size_checked: number;
@@ -150,6 +156,9 @@ const defaultProductList: DefaultProductList = {
         },
         // 选项卡风格
         tabs_theme: '0',
+        // 选中装饰图标
+        tabs_adorn_icon: 'checked-smooth',
+        tabs_adorn_img: [],
         // 是否置顶
         tabs_top_up: '0',
         // 商品风格
@@ -194,6 +203,16 @@ const defaultProductList: DefaultProductList = {
             { color: '#FF2222', color_percentage: undefined },
             { color: '#FF9898', color_percentage: undefined },
         ],
+        is_tabs_adorn_img_background: '0',
+        tabs_adorn_icon_size: 10,
+        tabs_adorn_img_radius: {
+            radius: 0,
+            radius_top_left: 0,
+            radius_top_right: 0,
+            radius_bottom_left: 0,
+            radius_bottom_right: 0,
+        },
+        tabs_adorn_img_height: 10,
         tabs_direction: '90deg',
         tabs_weight_checked: 'bold',
         tabs_size_checked: 14,
diff --git a/src/config/const/header-nav.ts b/src/config/const/header-nav.ts
index e8f94e23..680bf97e 100644
--- a/src/config/const/header-nav.ts
+++ b/src/config/const/header-nav.ts
@@ -145,7 +145,7 @@ const defaultFooterNav: DefaultFooterNav = {
         // 搜索提示信息
         tips: '请输入搜索内容',
         // 是否显示右侧icon
-        is_right_icon_show: '1',
+        is_right_icon_show: '0',
         right_icon_link: {},
         right_icon_img: [],
         right_icon_class: '',
diff --git a/src/config/const/search.ts b/src/config/const/search.ts
index 0fa904a2..a1ea1c81 100644
--- a/src/config/const/search.ts
+++ b/src/config/const/search.ts
@@ -64,7 +64,7 @@ const defaultSearch: defaultSearch = {
         is_tips_show: '1',
         tips: '请输入搜索内容',
         // 是否显示右侧icon
-        is_right_icon_show: '1',
+        is_right_icon_show: '0',
         right_icon_link: {},
         right_icon_img: [],
         right_icon_class: '',
diff --git a/src/config/const/tabs.ts b/src/config/const/tabs.ts
index c707e448..2df097c2 100644
--- a/src/config/const/tabs.ts
+++ b/src/config/const/tabs.ts
@@ -18,6 +18,8 @@ interface defaultTabs {
     content: {
         content_top: object;
         tabs_theme: string;
+        tabs_adorn_icon: string;
+        tabs_adorn_img: uploadList[];
         tabs_top_up: string;
         home_data: tabs_page;
         tabs_list: tabs_page[];
@@ -25,6 +27,10 @@ interface defaultTabs {
     style: {
         tabs_one_theme: string;
         tabs_checked: color_list[];
+        is_tabs_adorn_img_background: string;
+        tabs_adorn_icon_size: number,
+        tabs_adorn_img_radius: radiusStyle,
+        tabs_adorn_img_height: number,
         tabs_direction: string;
         tabs_weight_checked: string;
         tabs_size_checked: number;
@@ -54,6 +60,9 @@ const defaultTabs: defaultTabs = {
             ...commonTop,
         },
         tabs_theme: '0',
+        // 选中装饰图标
+        tabs_adorn_icon: 'checked-smooth',
+        tabs_adorn_img: [],
         tabs_top_up: '0',
         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: [
@@ -68,6 +77,16 @@ const defaultTabs: defaultTabs = {
             { color: '#FF2222', color_percentage: undefined },
             { color: '#FF9898', color_percentage: undefined },
         ],
+        is_tabs_adorn_img_background: '0',
+        tabs_adorn_icon_size: 10,
+        tabs_adorn_img_radius: {
+            radius: 0,
+            radius_top_left: 0,
+            radius_top_right: 0,
+            radius_bottom_left: 0,
+            radius_bottom_right: 0,
+        },
+        tabs_adorn_img_height: 10,
         tabs_direction: '90deg',
         tabs_weight_checked: 'bold',
         tabs_size_checked: 14,