AI-News/frontend/app/components/home/UTabsPro.vue

<template>
  <div
    class="u-tabspro"
    :class="[
      `u-variant-${variant}`,
      `u-align-${align}`,
      compact ? 'u-compact' : '',
      wrap ? 'u-wrap' : 'u-nowrap'
    ]"
  >
    <div
      class="u-track"
      ref="trackRef"
      role="tablist"
      :aria-label="ariaLabel"
      @wheel.passive="onWheelScroll"
    >
      <button
        v-for="(t, i) in tabsArr"
        :key="(t.value ?? t.label ?? i) as any"
        class="u-tab"
        :class="{
          active: i === currentIndex,
          disabled: !!t.disabled,
          'u-tab--rec': isRecTab(t)              // 仅标记“推荐类”
        }"
        role="tab"
        :aria-selected="i === currentIndex"
        :tabindex="t.disabled ? -1 : (i === currentIndex ? 0 : -1)"
        :disabled="!!t.disabled"
        @click="!t.disabled && setActive(i)"
        @keydown.left.prevent="focusPrev"
        @keydown.right.prevent="focusNext"
        :ref="(el) => assignTabRef(el, i)"
      >
        <slot name="tab" :tab="t" :index="i">
          {{ t.label }}
        </slot>
      </button>

      <!-- 下划线风格：活动指示线（仅当活动且为推荐类时炫彩） -->
      <span
        v-if="variant === 'underline'"
        class="u-underline"
        :class="{ 'u-underline--rec': isActiveRec }"
        :style="{ width: underline.w + 'px', transform: `translateX(${underline.x}px)` }"
        aria-hidden="true"
      />
    </div>
  </div>
</template>

<script setup lang="ts">
import {
  ref, computed, watch, onMounted, nextTick, onBeforeUnmount,
  type ComponentPublicInstance
} from 'vue'

type Align = 'left' | 'center' | 'between'
type Variant = 'pills' | 'underline'
type TabItem = Readonly<{
  label: string
  value?: string | number
  disabled?: boolean
}>

interface Props {
  tabs: ReadonlyArray<TabItem>
  modelValue?: string | number | null
  defaultIndex?: number
  variant?: Variant
  align?: Align
  compact?: boolean
  wrap?: boolean
  ariaLabel?: string
}

const props = withDefaults(defineProps<Props>(), {
  modelValue: null,
  defaultIndex: 0,
  variant: 'pills',
  align: 'left',
  compact: false,
  wrap: true,
  ariaLabel: ''
})

const emit = defineEmits<{
  (e: 'update:modelValue', v: string | number): void
  (e: 'change', payload: { index: number; tab: TabItem }): void
}>()

const tabsArr = computed(() => props.tabs ?? [])

const tabRefs = ref<Array<HTMLButtonElement | null>>([])
function assignTabRef(
  el: Element | ComponentPublicInstance | null,
  i: number
) {
  tabRefs.value[i] = (el as HTMLButtonElement) ?? null
}

const trackRef = ref<HTMLElement | null>(null)
const currentIndex = ref(0)

function valueToIndex(v: string | number | null) {
  return tabsArr.value.findIndex(t => (t?.value ?? t?.label) === v)
}

/* -------- 推荐类判定（label/value 命中以下任一关键词即可） -------- */
function isRecTab(tab?: TabItem | null) {
  if (!tab) return false
  const raw = String(tab.value ?? tab.label ?? '').trim().toLowerCase()
  const keys = ['推荐', '精选', '热门', '置顶', 'rec']
  return keys.some(k => raw === k.toLowerCase() || raw.includes(k.toLowerCase()))
}
const isActiveRec = computed(() => isRecTab(tabsArr.value[currentIndex.value]))

/* -------- underline 位置 -------- */
const underline = ref({ x: 0, w: 0 })
function updateUnderline() {
  if (props.variant !== 'underline') return
  const el = tabRefs.value[currentIndex.value]
  const track = trackRef.value
  if (!el || !track) return
  const trackRect = track.getBoundingClientRect()
  const rect = el.getBoundingClientRect()
  underline.value = { x: rect.left - trackRect.left, w: rect.width }
}

function scrollActiveIntoView() {
  if (props.wrap) return
  const el = tabRefs.value[currentIndex.value]
  const track = trackRef.value
  if (!el || !track) return
  const padding = 24
  const left = el.offsetLeft - padding
  const right = left + el.offsetWidth + padding * 2
  if (left < track.scrollLeft) {
    track.scrollTo({ left, behavior: 'smooth' })
  } else if (right > track.scrollLeft + track.clientWidth) {
    track.scrollTo({ left: right - track.clientWidth, behavior: 'smooth' })
  }
}

function onWheelScroll(e: WheelEvent) {
  if (props.wrap) return
  const track = trackRef.value
  if (!track) return
  track.scrollLeft += e.deltaY
}

/* -------- 交互 -------- */
function setActive(i: number) {
  if (i < 0 || i >= tabsArr.value.length) return
  const tab = tabsArr.value[i]
  if (!tab || tab.disabled) return
  currentIndex.value = i
  nextTick(() => {
    updateUnderline()
    scrollActiveIntoView()
  })
  const v = (tab.value ?? tab.label) as string | number
  emit('update:modelValue', v)
  emit('change', { index: i, tab })
}

function focusPrev() {
  const len = tabsArr.value.length
  if (!len) return
  let i = (currentIndex.value - 1 + len) % len
  while (tabsArr.value[i]?.disabled && i !== currentIndex.value) {
    i = (i - 1 + len) % len
  }
  setActive(i)
  tabRefs.value[i]?.focus?.()
}
function focusNext() {
  const len = tabsArr.value.length
  if (!len) return
  let i = (currentIndex.value + 1) % len
  while (tabsArr.value[i]?.disabled && i !== currentIndex.value) {
    i = (i + 1) % len
  }
  setActive(i)
  tabRefs.value[i]?.focus?.()
}

/* -------- 同步/初始化 -------- */
watch(
  () => props.modelValue,
  (v) => {
    if (v == null) return
    const idx = valueToIndex(v)
    if (idx >= 0) {
      currentIndex.value = idx
      nextTick(() => {
        updateUnderline()
        scrollActiveIntoView()
      })
    }
  },
  { immediate: true }
)

watch(
  () => tabsArr.value.length,
  () => nextTick(updateUnderline)
)

onMounted(() => {
  if (props.modelValue == null) {
    const idx = Math.min(
      props.defaultIndex ?? 0,
      Math.max(tabsArr.value.length - 1, 0)
    )
    currentIndex.value = idx
    // 触发 update:modelValue 事件，同步父组件的状态
    const tab = tabsArr.value[idx]
    if (tab) {
      const v = (tab.value ?? tab.label) as string | number
      emit('update:modelValue', v)
    }
  }
  nextTick(() => {
    updateUnderline()
    scrollActiveIntoView()
    window.addEventListener('resize', updateUnderline)
  })
})

onBeforeUnmount(() => {
  window.removeEventListener('resize', updateUnderline)
})
</script>

<style scoped>
/* ---------- 主题变量 ---------- */
.u-tabspro {
  --gap: 12px;
  --radius: 8px;
  --font: 14px;
  --height: 30px;

  --color: #374151;       /* gray-700 */
  --muted: #6b7280;       /* gray-500 */
  --active: #111827;      /* gray-900 */
  --border: #e5e7eb;      /* gray-200 */
  --bg: #ffffff;
  --bg-muted: #f9fafb;

  /* 首页三原色系：紫 -> 靛蓝 -> 蓝 -> 青 */
  --rainbow: linear-gradient(90deg,
    #7c3aed 0%,
    #6366f1 33%,
    #60a5fa 66%,
    #22d3ee 100%);
}

/* 紧凑尺寸 */
.u-compact {
  --gap: 8px;
  --radius: 10px;
  --font: 13px;
  --height: 30px;
}

/* ---------- 布局 ---------- */
.u-track {
  display: flex;
  gap: var(--gap);
  align-items: center;
  position: relative;
  min-height: var(--height);
  width: 100%;
}

/* 排列 */
.u-align-left .u-track   { justify-content: flex-start; }
.u-align-center .u-track { justify-content: center; }
.u-align-between .u-track{ justify-content: space-between; }

/* 换行/滚动 */
.u-wrap .u-track   { flex-wrap: wrap; }
.u-nowrap .u-track { overflow-x: auto; scrollbar-width: thin; }
.u-nowrap .u-track::-webkit-scrollbar { height: 8px; }
.u-nowrap .u-track::-webkit-scrollbar-thumb {
  background: rgba(0,0,0,.12);
  border-radius: 4px;
}

/* ---------- Tab 基础 ---------- */
.u-tab {
  appearance: none;
  border: 0;
  background: transparent;
  color: var(--color);
  font-size: var(--font);
  line-height: 1;
  height: var(--height);
  padding: 0 14px;
  border-radius: var(--radius);
  cursor: pointer;
  white-space: nowrap;
  transition: all .18s ease;
  outline: none;
}
.u-tab:focus-visible {
  outline: 2px solid rgba(99,102,241,.35);
  outline-offset: 2px;
}
.u-tab.disabled {
  opacity: .45;
  cursor: not-allowed;
}

/* ---------- 变体：pills ---------- */
.u-variant-pills .u-tab { background: var(--bg-muted); }
.u-variant-pills .u-tab:hover {
  background: #eef2ff; color: var(--active);
}
.u-variant-pills .u-tab.active {
  background: var(--active); color: #fff;
  box-shadow: 0 4px 10px rgba(17,24,39,.12);
}

/* ★ 推荐：仅当选中时炫彩（整块胶囊流动） */
.u-variant-pills .u-tab.u-tab--rec.active {
  color: #fff;
  background-image: var(--rainbow);
  background-size: 220% 220%;
  animation: tabsRainbow 4s ease infinite;
  box-shadow: 0 8px 18px rgba(99,102,241,.22);
}

/* ---------- 变体：underline ---------- */
.u-variant-underline .u-track { gap: 28px; padding: 6px 2px; }
.u-variant-underline .u-tab {
  padding: 0 4px; background: transparent; border-radius: 6px; color: var(--muted);
}
.u-variant-underline .u-tab:hover { color: var(--active); }
.u-variant-underline .u-tab.active { color: var(--active); font-weight: 700; }

/* ★ 推荐：仅当选中时文字炫彩（背景裁剪到文字） */
.u-variant-underline .u-tab.u-tab--rec.active {
  background-image: var(--rainbow);
  background-size: 220% 220%;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  animation: tabsRainbow 4s ease infinite;
}

/* 指示线 */
.u-underline {
  position: absolute; bottom: 0; height: 3px; border-radius: 3px;
  background: var(--active);
  transition: transform .22s cubic-bezier(.22,1,.36,1),
              width .22s cubic-bezier(.22,1,.36,1);
  pointer-events: none;
}
/* ★ 推荐：活动且为推荐类时，指示线炫彩流动 */
.u-underline--rec {
  background-image: var(--rainbow);
  background-size: 220% 220%;
  animation: tabsRainbow 4s ease infinite;
}

/* 炫彩动画 */
@keyframes tabsRainbow {
  0%   { background-position: 0% 50%; }
  50%  { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}
</style>