blog-v3 友圈：聚合友链文章

<script setup lang="ts">
interface CircleArticle {
  title: string
  created: string
  link: string
  author: string
  avatar: string
}

interface CircleAll {
  statistical_data: { article_num: number }
  article_data: CircleArticle[]
}

interface CircleLinkData {
  statistical_data: {
    link_total_num: number
    link_reachable_num: number
    link_unreachable_num: number
    crawl_allowed_num: number
    link_last_checked_time: string
  }
}

const origin = 'https://fc.moodlog.cn'
const allData = ref<CircleAll>()
const linkData = ref<CircleLinkData>()
const loading = ref(false)
const error = ref('')
const page = ref(1)
const pageSize = 6

useSeoMeta({ title: '友圈', description: '朋友们的新文章与友链状态。' })

const sortedArticles = computed(() => {
  return [...(allData.value?.article_data ?? [])].sort((a, b) => {
    const difference = new Date(b.created.replace(' ', 'T')).getTime()
    	- new Date(a.created.replace(' ', 'T')).getTime()
    return difference || a.link.localeCompare(b.link)
  })
})
const pageCount = computed(() => Math.ceil(sortedArticles.value.length / pageSize))
const articles = computed(() => {
  const start = (page.value - 1) * pageSize
  return sortedArticles.value.slice(start, start + pageSize)
})
const metrics = computed(() => {
  const stats = linkData.value?.statistical_data
  return stats
    ? [
        { label: '友链总数', value: stats.link_total_num },
        { label: '正常运行', value: stats.link_reachable_num },
        { label: '暂时异常', value: stats.link_unreachable_num },
        { label: '允许抓取', value: stats.crawl_allowed_num },
      ]
    : []
})

async function readJson<T>(path: string) {
  const response = await fetch(`${origin}/${path}?_=${Date.now()}`, {
    cache: 'no-store',
  })
  if (!response.ok)
    throw new Error(`HTTP ${response.status}`)
  return await response.json() as T
}

async function loadData() {
  if (loading.value)
    return
  loading.value = true
  error.value = ''
  try {
    const [all, links] = await Promise.all([
      readJson<CircleAll>('all.json'),
      readJson<CircleLinkData>('link.json'),
    ])
    allData.value = all
    linkData.value = links
    page.value = 1
  }
  catch {
    error.value = '暂时无法获取友圈数据，请检查网络后刷新重试。'
  }
  finally {
    loading.value = false
  }
}

onMounted(loadData)
</script>

<template>
<div class="circle-content">
	<h1>友圈</h1>
	<Alert v-if="error" type="warning" title="数据获取失败">
		<p>{{ error }}</p>
	</Alert>
	<p v-else-if="loading">
		正在加载友圈…
	</p>

	<template v-else-if="allData && linkData">
		<h2>友链状态</h2>
		<p>最后检查于 {{ linkData.statistical_data.link_last_checked_time }}</p>
		<dl class="circle-stats">
			<div v-for="metric in metrics" :key="metric.label" class="circle-stat card">
				<dt>{{ metric.label }}</dt>
				<dd>{{ metric.value }}</dd>
			</div>
		</dl>

		<h2>朋友们的新文章</h2>
		<p>共收录 {{ allData.statistical_data.article_num }} 篇文章</p>
		<div class="circle-articles">
			<LinkCard
				v-for="article in articles"
				:key="article.link"
				:link="article.link"
				:title="article.title"
				:description="`${article.author} · ${article.created}`"
				:icon="article.avatar"
			/>
		</div>
		<p v-if="!articles.length">
			暂时还没有收录文章。
		</p>
		<nav v-if="pageCount > 1" class="circle-pagination" aria-label="文章分页">
			<button type="button" :disabled="page <= 1" @click="page--">
				上一页
			</button>
			<span>{{ page }} / {{ pageCount }}</span>
			<button type="button" :disabled="page >= pageCount" @click="page++">
				下一页
			</button>
		</nav>
	</template>
</div>
</template>

<style scoped>
.circle-content { min-width: 0; margin: 1rem; }
.circle-stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0.75rem; }
.circle-stat { min-width: 0; padding: 1rem; border: 1px solid var(--c-border); }
.circle-stat dt { color: var(--c-text-2); font-size: 0.85rem; }
.circle-stat dd { margin: 0.6rem 0 0; font-size: 1.8rem; font-variant-numeric: tabular-nums; }
.circle-articles { display: grid; gap: 0.75rem; }
.circle-articles :deep(.link-card) { width: auto; min-width: 0; margin: 0; }
.circle-pagination { display: flex; flex-wrap: wrap; justify-content: center; gap: 0.75rem; margin-top: 1rem; }
@media (max-width: 600px) {
  .circle-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
</style>