From e984ec501ad81db10f4d62378f8c5c65a3bb9f85 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E4=BA=8E=E8=82=96=E7=A3=8A?= <18851179580@163.com>
Date: Tue, 27 Aug 2024 10:42:09 +0800
Subject: [PATCH] =?UTF-8?q?=E9=80=89=E9=A1=B9=E5=8D=A1=E8=83=8C=E6=99=AF?=
 =?UTF-8?q?=E8=89=B2=E8=B0=83=E6=95=B4?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/common/tabs-view/index.vue     | 70 ++++++++++++++-----
 .../model-tabs/model-tabs-styles.vue          | 18 ++---
 2 files changed, 60 insertions(+), 28 deletions(-)

diff --git a/src/components/common/tabs-view/index.vue b/src/components/common/tabs-view/index.vue
index feb86220..0efad1be 100644
--- a/src/components/common/tabs-view/index.vue
+++ b/src/components/common/tabs-view/index.vue
@@ -1,6 +1,6 @@
 <template>
     <div class="tabs flex-row oh">
-        <template v-for="(item, index) in tabs.content.tabs_list" :key="index">
+        <template v-for="(item, index) in form.tabs_list" :key="index">
             <div class="item nowrap flex-col jc-c gap-4" :class="tabs_theme + (index == 0 ? ' active' : '')">
                 <template v-if="!isEmpty(item.img)">
                     <image-empty v-model="item.img[0]" class="img" error-img-style="width:2rem;height:2rem;"></image-empty>
@@ -8,10 +8,10 @@
                 <template v-else>
                     <image-empty class="img" error-img-style="width:2rem;height:2rem;"></image-empty>
                 </template>
-                <div class="title" :style="index == 0 ? tabs_theme_style.tabs_title_checked : tabs_theme_style.tabs_title">{{ item.title }}</div>
-                <div class="desc">{{ item.desc }}</div>
-                <icon name="checked-1" class="icon"></icon>
-                <div class="bottom_line" :style="tabs_theme_style.tabs_check"></div>
+                <div class="title" :style="title_style(index)">{{ item.title }}</div>
+                <div class="desc" :style="tabs_theme_index == '1' && index == 0 ? tabs_check : ''">{{ item.desc }}</div>
+                <icon name="checked-1" class="icon" :style="tabs_theme_index == '3' ? icon_tabs_check() : ''"></icon>
+                <div class="bottom_line" :style="tabs_check"></div>
             </div>
         </template>
     </div>
@@ -26,34 +26,66 @@ const props = defineProps({
         default: () => ({}),
     },
 });
-const tabs = ref(props.value);
+// const tabs = ref(props.value);
+// 用于页面判断显示
+const state = reactive({
+    form: props.value.content,
+    new_style: props.value.style,
+});
+// 如果需要解构，确保使用toRefs
+const { form, new_style } = toRefs(state);
+
+// 选中的值
+const tabs_theme_index = computed(() => form.value.tabs_theme);
+//选中的样式
 const tabs_theme = computed(() => {
     let tabs_theme = '';
-    if (tabs.value.content.tabs_theme == '1') {
+    if (form.value.tabs_theme == '1') {
         tabs_theme = 'tabs-style-2';
-    } else if (tabs.value.content.tabs_theme == '2') {
+    } else if (form.value.tabs_theme == '2') {
         tabs_theme = 'tabs-style-3';
-    } else if (tabs.value.content.tabs_theme == '3') {
+    } else if (form.value.tabs_theme == '3') {
         tabs_theme = 'tabs-style-4';
-    } else if (tabs.value.content.tabs_theme == '4') {
+    } else if (form.value.tabs_theme == '4') {
         tabs_theme = 'tabs-style-5';
     } else {
         tabs_theme = 'tabs-style-1';
     }
     return tabs_theme;
 });
-const tabs_theme_style = computed(() => {
+// 选中的背景渐变色样式
+const tabs_check = computed(() => {
     const new_gradient_params = {
-        color_list: tabs.value.style.tabs_checked,
-        direction: tabs.value.style.tabs_direction,
+        color_list: new_style.value.tabs_checked,
+        direction: new_style.value.tabs_direction,
     };
-    const new_style = {
-        tabs_check: gradient_computer(new_gradient_params),
-        tabs_title_checked: 'font-weight:' + tabs.value.style.tabs_weight_checked + ';' + 'font-size:' + tabs.value.style.tabs_size_checked + 'px;' + 'color:' + tabs.value.style.tabs_color_checked,
-        tabs_title: 'font-weight:' + tabs.value.style.tabs_weight + ';' + 'font-size:' + tabs.value.style.tabs_size + 'px;' + 'color:' + tabs.value.style.tabs_color,
-    };
-    return new_style;
+    return gradient_computer(new_gradient_params);
 });
+
+// 选中的内部样式
+const tabs_theme_style = computed(() => {
+    return {
+        tabs_title_checked: `font-weight: ${ new_style.value.tabs_weight_checked };font-size: ${ new_style.value.tabs_size_checked}px;color:${ new_style.value.tabs_color_checked };`,
+        tabs_title: `font-weight: ${ new_style.value.tabs_weight };font-size: ${ new_style.value.tabs_size}px;color:${ new_style.value.tabs_color };`,
+    };
+});
+
+const title_style = (index: number) => {
+    // 默认是未选中的状态
+    let style = `${ tabs_theme_style.value.tabs_title }`;
+    if (index == 0) {
+        let checked_style = tabs_theme_style.value.tabs_title_checked;
+        if (['2', '4'].includes(tabs_theme_index.value)) {
+            checked_style += tabs_check.value;
+        }
+        style = checked_style;
+    }
+    return style;
+};
+// icon的渐变色处理
+const icon_tabs_check = () => {
+    return `${ tabs_check.value };display: inline-block;line-height: 1;background-clip: text;-webkit-background-clip: text;-webkit-text-fill-color: transparent;`;
+}
 </script>
 <style lang="scss" scoped>
 .tabs {
diff --git a/src/components/model-tabs/model-tabs-styles.vue b/src/components/model-tabs/model-tabs-styles.vue
index 8eb5a99b..7c94d943 100644
--- a/src/components/model-tabs/model-tabs-styles.vue
+++ b/src/components/model-tabs/model-tabs-styles.vue
@@ -6,17 +6,17 @@
                 <el-form-item label="选中装饰">
                     <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="选中文字">
-                    <text-size-type v-model:typeface="form.tabs_weight_checked" v-model:size="form.tabs_size_checked"></text-size-type>
-                </el-form-item>
-                <el-form-item label="文字色值">
-                    <color-picker v-model="form.tabs_color_checked" default-color="#000000"></color-picker>
+                <el-form-item label="选中文字" class="">
+                    <div class="flex-col w h gap-10">
+                        <color-picker v-model="form.tabs_color_checked" default-color="#000000"></color-picker>
+                        <text-size-type v-model:typeface="form.tabs_weight_checked" v-model:size="form.tabs_size_checked"></text-size-type>
+                    </div>
                 </el-form-item>
                 <el-form-item label="未选文字">
-                    <text-size-type v-model:typeface="form.tabs_weight" v-model:size="form.tabs_size"></text-size-type>
-                </el-form-item>
-                <el-form-item label="文字色值">
-                    <color-picker v-model="form.tabs_color" default-color="#000000"></color-picker>
+                    <div class="flex-col w h gap-10">
+                        <color-picker v-model="form.tabs_color" default-color="#000000"></color-picker>
+                        <text-size-type v-model:typeface="form.tabs_weight" v-model:size="form.tabs_size"></text-size-type>
+                    </div>
                 </el-form-item>
             </card-container>
         </el-form>