pc_nuxt/app/components/NewsSidebar.vue

<template>
  <aside class="space-y-5">
    <!-- 热门排行 -->
    <section v-if="hotList.length" class="rounded-2xl bg-[var(--c-ffffff)] p-5 shadow-[0_8px_28px_var(--sh-34-68-112-50)]">
      <h2 class="flex items-center gap-1.5 text-base font-extrabold text-[var(--c-172033)]">
        <UIcon name="i-lucide-flame" class="size-4 text-[var(--c-ff681f)]" />
        热门排行
      </h2>
      <ol class="mt-4 space-y-3">
        <li v-for="item in hotList" :key="item.id">
          <NuxtLink :to="item.url" class="group flex gap-2.5">
            <span
              class="mt-0.5 flex size-5 shrink-0 items-center justify-center rounded text-[11px] font-extrabold"
              :class="item.rank <= 3 ? 'bg-[var(--c-ff681f)] text-white' : 'bg-[var(--c-f1f5fa)] text-[var(--c-8a97a8)]'"
            >{{ item.rank }}</span>
            <span class="line-clamp-2 text-sm leading-snug text-[var(--c-4b5b70)] transition-colors group-hover:text-[var(--c-0b8cff)]">
              {{ item.title }}
            </span>
          </NuxtLink>
        </li>
      </ol>
    </section>

    <!-- 热门标签 -->
    <section v-if="tagList.length" class="rounded-2xl bg-[var(--c-ffffff)] p-5 shadow-[0_8px_28px_var(--sh-34-68-112-50)]">
      <h2 class="flex items-center gap-1.5 text-base font-extrabold text-[var(--c-172033)]">
        <UIcon name="i-lucide-tags" class="size-4 text-[var(--c-0b8cff)]" />
        热门标签
      </h2>
      <div class="mt-4 flex flex-wrap gap-2">
        <NuxtLink
          v-for="tag in tagList"
          :key="tag.id"
          :to="`/info/tag/${tag.key}.html`"
          class="rounded-full bg-[var(--c-f7f9fd)] px-3 py-1.5 text-xs font-bold text-[var(--c-5b6b80)] transition-colors hover:bg-[var(--c-eef7ff)] hover:text-[var(--c-0b8cff)]"
          :class="{ '!bg-[var(--c-eef7ff)] !text-[var(--c-0b8cff)]': tag.key === activeTag }"
        >
          {{ tag.name }}
        </NuxtLink>
      </div>
    </section>

    <!-- 工具引导（转化位） -->
    <section class="overflow-hidden rounded-2xl bg-gradient-to-br from-[var(--c-0b8cff)] to-[var(--c-20d3a2)] p-5 text-white">
      <h2 class="text-base font-extrabold">试试 AI 创作</h2>
      <p class="mt-1.5 text-xs leading-relaxed text-white/85">AI 取名、动漫头像，几秒钟出结果。</p>
      <div class="mt-4 flex flex-col gap-2">
        <NuxtLink
          to="/writing/naming/"
          class="flex h-9 items-center justify-center rounded-full bg-[var(--c-ffffff)] text-xs font-extrabold text-[var(--c-0b74ea)] transition-opacity hover:opacity-90"
        >
          AI 取名
        </NuxtLink>
        <NuxtLink
          to="/draw/anime/"
          class="flex h-9 items-center justify-center rounded-full bg-white/20 text-xs font-extrabold text-white transition-colors hover:bg-white/30"
        >
          动漫头像
        </NuxtLink>
      </div>
    </section>
  </aside>
</template>

<script setup>
defineProps({
  hotList: { type: Array, default: () => [] },
  tagList: { type: Array, default: () => [] },
  activeTag: { type: String, default: '' },
})
</script>