From aba27dd593c2812dab153fcf83a7c9f6435f95ac 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, 13 Dec 2024 16:53:16 +0800
Subject: [PATCH] =?UTF-8?q?=E4=BF=AE=E6=94=B9=E8=BD=AE=E6=92=AD=E5=92=8C?=
 =?UTF-8?q?=E9=80=89=E9=A1=B9=E5=8D=A1=E6=B5=8B=E8=AF=95=E9=97=AE=E9=A2=98?=
 =?UTF-8?q?=E4=BF=AE=E5=A4=8D?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/common/tabs-view/index.vue     | 68 ++++++++++++++-----
 .../model-article-tabs-content.vue            |  3 +
 .../model-carousel/model-carousel-styles.vue  |  1 +
 .../model-goods-tabs-content.vue              |  3 +
 .../model-tabs/model-tabs-content.vue         |  3 +
 src/utils/index.ts                            |  2 +-
 src/views/layout/components/main/index.vue    |  2 +-
 7 files changed, 62 insertions(+), 20 deletions(-)

diff --git a/src/components/common/tabs-view/index.vue b/src/components/common/tabs-view/index.vue
index e02da25d..663d41f4 100644
--- a/src/components/common/tabs-view/index.vue
+++ b/src/components/common/tabs-view/index.vue
@@ -1,8 +1,8 @@
 <template>
     <div class="flex-row gap-10 jc-sb align-c">
-        <div class="tabs flex-row oh" :style="`column-gap: ${new_style.tabs_spacing}px;`">
+        <div class="tabs flex-row oh" :style="`column-gap: ${new_style.tabs_spacing}px;height: ${tabs_height}`">
             <template v-for="(item, index) in form.tabs_list" :key="index">
-                <div class="item nowrap flex-col jc-c" :class="tabs_theme + (index == activeIndex ? ' active' : '') + ((tabs_theme_index == '0' && tabs_theme_1_style) || tabs_theme_index == '1' || tabs_theme_index == '2' ? ' pb-0' : '')" :style="`row-gap: ${new_style.tabs_sign_spacing}px;`">
+                <div class="item nowrap flex-col jc-c" :class="tabs_theme + (index == activeIndex ? ' active' : '') + ((tabs_theme_index == '0' && tabs_theme_1_style) || tabs_theme_index == '1' || tabs_theme_index == '2' ? ' pb-0' : '')" :style="`flex:0 0 auto;row-gap: ${new_style.tabs_sign_spacing}px;`">
                     <template v-if="!isEmpty(item.img)">
                         <image-empty v-model="item.img[0]" class="img" :style="top_img_style('data')" fit="contain" error-img-style="width:3.9rem;height:3.9rem;"></image-empty>
                     </template>
@@ -11,10 +11,14 @@
                     </template>
                     <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)" />
+                            <div class="title" :style="index == activeIndex ? ['2', '4'].includes(tabs_theme_index) ? tabs_check : '' : padding_bottom">
+                                <el-icon :class="`iconfont ${ 'icon-' + item.tabs_icon}`" :style="icon_style(index)" />
+                            </div>
                         </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;" />
+                            <div class="title" :style="index == activeIndex ? new_style.is_tabs_img_background == '1' && ['2', '4'].includes(tabs_theme_index) ? tabs_check : '' : padding_bottom">
+                                <image-empty v-model="item.tabs_img[0]" fit="contain" :style="img_style()" error-img-style="width: 2rem;height: 2rem;" />
+                            </div>
                         </template>
                     </template>
                     <template v-else>
@@ -78,6 +82,46 @@ const tabs_theme_1_style = computed(() => {
     return new_style.value.tabs_one_theme == '1';
 });
 
+const tabs_height = computed(() => {
+    const DEFAULT_HEIGHT_THEME_2 = 12;
+    const DEFAULT_HEIGHT_THEME_4 = 4;
+
+    let default_height = 0;
+    const { tabs_size_checked, tabs_size, tabs_icon_size_checked = 0, tabs_icon_size = 0, tabs_img_height = 0, tabs_top_img_height = 0, tabs_sign_spacing = 0 } = new_style.value || {};
+
+    if (form.value?.tabs_theme === '2') {
+        default_height = DEFAULT_HEIGHT_THEME_2; // 选中的时候,风格二的内间距
+    } else if (form.value?.tabs_theme === '4') {
+        default_height = DEFAULT_HEIGHT_THEME_4 + tabs_top_img_height + tabs_sign_spacing; // 选中的时候,风格二的内间距 加上上边图片的大小和上边图片之间的间距
+    }
+
+    // 筛选出所有的icon
+    const is_icon = form.value?.tabs_list?.findIndex((item: { tabs_type: string, tabs_icon: string }) => item.tabs_type === '1' && !isEmpty(item.tabs_icon)) ?? -1;
+
+    // 如果有icon，则取选中的icon大小和未选中的icon大小取最大值，作为图标的高度
+    let icon_height = 0;
+    if (is_icon > -1) {
+        icon_height = Math.max(tabs_icon_size_checked + default_height, tabs_icon_size);
+    }
+
+    // 筛选出所有的图片, 没有选择图标的时候默认是图片
+    const is_img = form.value?.tabs_list?.findIndex((item: { tabs_type: string, tabs_icon: string }) => item.tabs_type === '1' && isEmpty(item.tabs_icon)) ?? -1;
+
+    // 选项卡高度 五个值，作为判断依据，因为图片没有未选中的大小设置，所以高度判断的时候只取选中的高度, 其余的icon和标题都分别取选中和未选中的大小对比，取出最大的值，作为选项卡的高度，避免选项卡切换时会出现抖动问题
+    const height = Math.max(
+        tabs_size_checked + default_height,
+        tabs_size,
+        icon_height,
+        is_img > -1 ? (tabs_img_height + default_height) : 0
+    );
+
+    try {
+        return ['2', '4'].includes(form.value?.tabs_theme) ? `${height}px;` : '100%;';
+    } catch (error) {
+        return '100%;';
+    }
+});
+
 // 选中的背景渐变色样式
 const tabs_check = computed(() => {
     const new_gradient_params = {
@@ -114,21 +158,13 @@ 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;
+        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};`;
     }
     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;
+    return `height: ${new_style.value.tabs_img_height}px;` + radius_computer(new_style.value.tabs_img_radius);
 };
 
 const top_img_style = (type: string) => {
@@ -238,7 +274,6 @@ const icon_tabs_check = () => {
         &.tabs-style-3 {
             &.active {
                 .title {
-                    background: #ff2222;
                     border-radius: 2rem;
                     padding: 0.6rem 1.2rem;
                     color: #fff;
@@ -261,11 +296,8 @@ const icon_tabs_check = () => {
             align-items: center;
             &.active {
                 .title {
-                    font-size: 1.1rem;
-                    background: #ff5e5e;
                     border-radius: 2rem;
                     padding: 0.2rem 0.7rem;
-                    color: #fff;
                 }
                 .img {
                     border-color: #ff5e5e;
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 7786818a..7a083230 100644
--- a/src/components/model-article-tabs/model-article-tabs-content.vue
+++ b/src/components/model-article-tabs/model-article-tabs-content.vue
@@ -234,6 +234,9 @@ const tabs_list_sort = (item: any) => {
 const tabs_add = () => {
     form.tabs_list.push({
         id: get_math(),
+        tabs_type: '0', 
+        tabs_img: [], 
+        tabs_icon: '',
         title: '',
         desc: '',
         data_type: '0',
diff --git a/src/components/model-carousel/model-carousel-styles.vue b/src/components/model-carousel/model-carousel-styles.vue
index cd4316a7..1503df3d 100644
--- a/src/components/model-carousel/model-carousel-styles.vue
+++ b/src/components/model-carousel/model-carousel-styles.vue
@@ -26,6 +26,7 @@
                     </el-form-item>
                 </card-container>
             </template>
+            <div class="divider-line"></div>
             <card-container>
                 <div class="mb-12">图片设置</div>
                 <el-form-item label="圆角">
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 c2102ad1..38b398f2 100644
--- a/src/components/model-goods-tabs/model-goods-tabs-content.vue
+++ b/src/components/model-goods-tabs/model-goods-tabs-content.vue
@@ -194,6 +194,9 @@ const tabs_list_sort = (item: any) => {
 const tabs_add = () => {
     form.value.tabs_list.push({
         id: get_math(),
+        tabs_type: '0', 
+        tabs_img: [], 
+        tabs_icon: '',
         title: '',
         img: [],
         desc: '',
diff --git a/src/components/model-tabs/model-tabs-content.vue b/src/components/model-tabs/model-tabs-content.vue
index 0f3e1ace..c615ae75 100644
--- a/src/components/model-tabs/model-tabs-content.vue
+++ b/src/components/model-tabs/model-tabs-content.vue
@@ -102,6 +102,9 @@ const { form, styles } = toRefs(state);
 const add = () => {
     form.value.tabs_list.push({
         id: get_math(),
+        tabs_type: '0', 
+        tabs_img: [], 
+        tabs_icon: '',
         title: '',
         desc: '',
         data_type: '0',
diff --git a/src/utils/index.ts b/src/utils/index.ts
index 3ab02585..8fe698ee 100644
--- a/src/utils/index.ts
+++ b/src/utils/index.ts
@@ -43,7 +43,7 @@ export function get_nested_property(obj: any, path: string): string {
 
     // 使用reduce方法遍历属性键数组，逐层访问对象属性
     // 如果当前对象存在且拥有下一个属性键，则继续访问；否则返回空字符串
-    return keys.reduce((o, key) => (o != undefined && o[key] != undefined ? o[key] : ''), obj) ?? '';
+    return keys.reduce((o, key) => (o != null && o[key] != null ? o[key] : ''), obj) ?? '';
 }
 
 /**
diff --git a/src/views/layout/components/main/index.vue b/src/views/layout/components/main/index.vue
index 248fc3f0..a3c8b575 100644
--- a/src/views/layout/components/main/index.vue
+++ b/src/views/layout/components/main/index.vue
@@ -6,7 +6,7 @@
                 <el-collapse-item v-if="com.data.length > 0" :key="i" :title="com.name" :name="com.key">
                     <VueDraggable v-model="com.data" :animation="400" ghost-class="ghost" handle=".is-drag" :group="{ name: 'people', pull: 'clone', put: false }" class="component flex-row flex-wrap" :clone="clone_item_com_data" :sort="false" :force-fallback="true">
                         <template v-for="item in com.data" :key="item.key">
-                            <el-tooltip effect="dark" :show-after="200" :hide-after="200" content="<span>该组件只可以点击添加, 并且只能添加一次。<br/>如果页面设置开启沉浸模式, 则不可添加</span>" raw-content placement="top" :disabled="!['tabs', 'tabs-carousel'].includes(item.key)">
+                            <el-tooltip effect="dark" :show-after="200" :hide-after="200" content="该组件只可以点击添加, 并且只能添加一次" raw-content placement="top" :disabled="!['tabs', 'tabs-carousel'].includes(item.key)">
                                 <div :class="['item', { 'is-drag': !['tabs', 'tabs-carousel'].includes(item.key) }]" @click.stop="draggable_click(item)">
                                     <div class="main-border siderbar-hidden main-show tc">释放鼠标将组件添加到此处</div>
                                     <div class="siderbar-show main-hidden flex-col jc-c align-c gap-4">