refactor: 更新标签栏组件并引入v3版本

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'

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>

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>