前端组件体系：从 GlassCard 到后台管理

前端组件体系

博客前端共 12 个核心组件，按功能分层组织在各组件目录中。

基础组件层

基础组件不依赖业务数据，可在任何页面复用。

GlassCard

最基础的容器组件——所有毛玻璃卡片的基座：

<template>
  <div class="glass glass-hover p-6">
    <slot />
  </div>
</template>

配合 Tailwind 的 mb-4、cursor-pointer 等工具类调整具体表现。ArticleCard 和首页的名片都基于它构建。

Pagination

分页组件，接收 page（当前页）和 pages（总页数）：

<NuxtLink
  v-for="p in visiblePages"
  :key="p"
  :to="{ query: { page: p } }"
>
  {{ p }}
</NuxtLink>

页码过多时自动截断，只显示首尾和当前页附近的页码：

const visiblePages = computed(() => {
  if (total <= 7) return Array.from({ length: total }, (_, i) => i + 1)
  const pages = [1]
  if (cur > 3) pages.push('...')
  for (let i = max(2, cur-1); i <= min(total-1, cur+1); i++) pages.push(i)
  if (cur < total - 2) pages.push('...')
  pages.push(total)
  return pages
})

ThemeToggle

暗色/浅色主题切换。实现逻辑：

function toggleTheme() {
  const html = document.documentElement
  html.classList.toggle('dark')
  localStorage.setItem('theme', html.classList.contains('dark') ? 'dark' : 'light')
}

默认跟随系统偏好（prefers-color-scheme），用户手动切换后覆盖。

BackToTop

滚动超过 300px 后显示，点击平滑滚动回顶部：

const show = ref(false)
onMounted(() => {
  window.addEventListener('scroll', () => {
    show.value = window.scrollY > 300
  })
})

TagBadge

标签徽章，从 6 色调色板循环配色：

const tagColors = [
  'bg-blue-500/20', 'bg-emerald-500/20', 'bg-violet-500/20',
  'bg-amber-500/20', 'bg-rose-500/20', 'bg-cyan-500/20',
]
const color = tagColors[props.index % tagColors.length]

业务组件层

业务组件依赖文章/评论等数据模型。

ArticleCard

文章摘要卡片：

<GlassCard class="mb-4 cursor-pointer" @click="navigate">
  <article>
    <h2>{{ article.title }}</h2>
    <ArticleMeta :article="article" />
    <div v-if="article.summary" class="mt-2">
      <p class="!text-sky-700">{{ article.summary }}</p>
    </div>
    <div v-if="article.tags?.length" class="flex gap-1.5 mt-3">
      <TagBadge v-for="(tag, i) in article.tags" :key="tag.id" :tag="tag" :index="i" />
    </div>
  </article>
</GlassCard>

点击事件：前端路由跳转 router.push('/p/' + slug)，无页面刷新。

ArticleMeta

元信息行：发布时间、阅读次数、分类链接：

<span>{{ timeAgo(article.published_at) }}</span>
<span>{{ article.view_count }} 次阅读</span>
<NuxtLink :to="'/c/' + article.category.slug">
  {{ article.category.name }}
</NuxtLink>

CommentSection

评论区组件，包含：

评论表单（昵称 + 邮箱 + 内容）
评论列表（按时间倒序）
提交后的待审核提示
楼中楼回复（预留，Comment.parent_id 已设计但前端暂未实现）

后台组件层

AdminSidebar

后台管理侧边栏导航，包含文章管理、评论审核、网盘管理、设置等入口。

DataTable

通用数据表格组件，用于文章列表和评论列表，支持：

标题/状态/时间排列
模糊搜索防抖（300ms）
批量操作

状态设计

每个组件覆盖以下四种状态：

状态	表现	示例
正常	渲染数据	文章列表
空数据	提示"暂无文章"	分类下无文章
加载中	显示"加载中..."	首页数据请求
错误	控制台/弹窗提示	API 返回 500

当前加载状态统一使用文本提示，后续可替换为骨架屏组件。