From 4dcd59f1d421fc4e290846fb4395bb39161dbe1a Mon Sep 17 00:00:00 2001
From: wangqiao <wangqiao@58hn.cn>
Date: Thu, 4 Sep 2025 22:09:23 +0800
Subject: [PATCH] =?UTF-8?q?refactor:=20=E6=9B=B4=E6=96=B0=E6=A0=87?=
 =?UTF-8?q?=E7=AD=BE=E6=A0=8F=E7=BB=84=E4=BB=B6=E5=B9=B6=E5=BC=95=E5=85=A5?=
 =?UTF-8?q?v3=E7=89=88=E6=9C=AC?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../drawe-components/RecommendedColumnsV2.vue |  2 +-
 components/kl-tab-bar/index.vue               |  2 +-
 components/kl-tab-bar/v3/index.vue            | 47 +++++++++++++++++++
 3 files changed, 49 insertions(+), 2 deletions(-)
 create mode 100644 components/kl-tab-bar/v3/index.vue

diff --git a/components/drawe-components/RecommendedColumnsV2.vue b/components/drawe-components/RecommendedColumnsV2.vue
index 2aebacb..2c5159e 100644
--- a/components/drawe-components/RecommendedColumnsV2.vue
+++ b/components/drawe-components/RecommendedColumnsV2.vue
@@ -17,7 +17,7 @@
 </template>
 
 <script lang="ts" setup>
-  import KlTabBar from '~/components/kl-tab-bar/index.vue'
+  import KlTabBar from '~/components/kl-tab-bar/v3/index.vue'
   import CardPicture from '~/components/kl-card-picture/index.vue'
   import { ref } from 'vue'
   import type { pageRes, pageReq } from '~/api/upnew/types'
diff --git a/components/kl-tab-bar/index.vue b/components/kl-tab-bar/index.vue
index ec8261a..e13f6c7 100644
--- a/components/kl-tab-bar/index.vue
+++ b/components/kl-tab-bar/index.vue
@@ -7,7 +7,7 @@
   >
     <el-tab-pane v-for="(item, index) in data" :key="index" :label="item.label" :name="item.value">
       <template v-if="showNum" #label>
-        <img v-if="item.value === tabActive && showIcon" src="~/assets/images/2.png" alt="" srcset="" class="mr-7px" />
+        <img v-if="item.value === tabActive && showIcon" src="~/assets/images/2.png" alt="" srcset="" class="mr-[7px]" />
         <span>{{ item.label }}</span>
         <el-badge :value="item.num" class="item" :max="9999999999999" :hidden="!item.num" />
       </template>
diff --git a/components/kl-tab-bar/v3/index.vue b/components/kl-tab-bar/v3/index.vue
new file mode 100644
index 0000000..918bfa5
--- /dev/null
+++ b/components/kl-tab-bar/v3/index.vue
@@ -0,0 +1,47 @@
+<template>
+  <div class="flex items-center gap-[50px]">
+    <el-link
+      v-for="(item, index) in props.data"
+      :key="index"
+      class="text-[15px]!"
+      :underline="modelValue === item.value ? 'always' : 'never'"
+      :type="modelValue === item.value ? 'primary' : 'info'"
+      @click="handleChange(item)"
+    >
+      {{ item.label }}
+    </el-link>
+  </div>
+</template>
+
+<script lang="ts" setup>
+  import type { PropType } from 'vue'
+  const props = defineProps({
+    data: {
+      type: Array as PropType<{ num?: number; label: string; value: string | number; [key: string]: any }[]>,
+      default: () => [],
+    },
+  })
+
+  const emits = defineEmits(['change'])
+
+  const modelValue = defineModel<any>('modelValue', {
+    required: true,
+  }) // 双向绑定的value
+
+  const handleChange = (value: { value: string | number; [key: string]: any }) => {
+    modelValue.value = value.value
+    emits('change', value)
+  }
+</script>
+
+<style lang="scss" scoped>
+  :deep(.el-link.is-underline) {
+    &::hover {
+      color: #1a65ff !important; // 鼠标悬停时的颜色
+    }
+    &::after {
+      bottom: -3px;
+      border-bottom: 2px solid #1a65ff; // 去掉下划线
+    }
+  }
+</style>