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

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>