给 blog-v3 新建一个博友圈页面：聚合友链最新文章

async function fetchText(url: string) {
	const controller = new AbortController()
	const timeout = setTimeout(() => controller.abort(), FETCH_TIMEOUT)

	try {
		const response = await fetch(url, {
			headers: {
				'accept': 'application/rss+xml, application/atom+xml, application/xml, text/xml, text/html;q=0.8, */*;q=0.5',
				'user-agent': 'MoodLog Friend-Circle/1.0',
			},
			signal: controller.signal,
		})

		if (!response.ok)
			throw new Error(`${response.status} ${response.statusText}`)

		return await response.text()
	}
	finally {
		clearTimeout(timeout)
	}
}

function absolutizeUrl(url: string, base: string) {
	try {
		return new URL(url, base).toString()
	}
	catch {
		return url
	}
}

function discoverFeedUrl(html: string, baseUrl: string) {
	const alternate = html.match(/<link[^>]+(?:type=["']application\/(?:rss|atom)\+xml["'][^>]+href=["']([^"']+)["']|href=["']([^"']+)["'][^>]+type=["']application\/(?:rss|atom)\+xml["'])[^>]*>/i)
	const href = alternate?.[1] || alternate?.[2]
	if (href)
		return absolutizeUrl(href, baseUrl)

	return undefined
}

async function fetchFeedArticles(entry: typeof feeds[number]['entries'][number]) {
	const candidates = [
		entry.feed,
		`${entry.link.replace(/\/$/, '')}/feed/`,
		`${entry.link.replace(/\/$/, '')}/atom.xml`,
		`${entry.link.replace(/\/$/, '')}/index.xml`,
	]
	const uniqueCandidates = [...new Set(candidates.filter(Boolean))] as string[]
	let lastError: unknown

	for (const candidate of uniqueCandidates) {
		try {
			let text = await fetchText(candidate)

			if (!/<(?:rss|feed|item|entry)(?:\s|>)/i.test(text)) {
				const discovered = discoverFeedUrl(text, candidate)
				if (!discovered)
					throw new Error('未发现 RSS/Atom 地址')

				text = await fetchText(discovered)
			}

			const articles = parseFeed(text, entry.author, entry.avatar, DEFAULT_ARTICLE_COUNT)
			if (articles.length)
				return articles
		}
		catch (error) {
			lastError = error
		}
	}

	console.warn(`[friend-circle] ${entry.author} 抓取失败`, lastError)
	return []
}

<script setup lang="ts">
interface FriendCircleStats {
	friends_num: number
	active_num: number
	error_num: number
	article_num: number
	last_updated_time: string
}

interface FriendCircleArticle {
	title: string
	summary?: string
	created: string
	link: string
	author: string
	avatar?: string
}

interface FriendCircleData {
	statistical_data: FriendCircleStats
	article_data: FriendCircleArticle[]
}

const appConfig = useAppConfig()
const layoutStore = useLayoutStore()
layoutStore.setAside([])

const fallbackAvatar = 'https://pic.imgdb.cn/item/6695daa4d9c307b7e953ee3d.jpg'

const { data, pending, error } = await useFetch<FriendCircleData>('/all.json', {
	key: 'friend-circle-data',
	default: () => ({
		statistical_data: {
			friends_num: 0,
			active_num: 0,
			error_num: 0,
			article_num: 0,
			last_updated_time: '',
		},
		article_data: [],
	}),
})

const stats = computed(() => data.value?.statistical_data)
const articles = computed(() => data.value?.article_data ?? [])
</script>

const pageSize = 5
const currentPage = ref(1)
const totalPages = computed(() => Math.max(1, Math.ceil(articles.value.length / pageSize)))

const paginatedArticles = computed(() => {
	const start = (currentPage.value - 1) * pageSize
	return articles.value.slice(start, start + pageSize)
})

const circleStats = computed(() => [{
	label: '友链',
	value: formatNumber(stats.value?.friends_num ?? 0),
}, {
	label: '活跃',
	value: formatNumber(stats.value?.active_num ?? 0),
}, {
	label: '文章',
	value: formatNumber(stats.value?.article_num ?? 0),
}, {
	label: '异常',
	value: formatNumber(stats.value?.error_num ?? 0),
}])

watch(articles, () => {
	currentPage.value = 1
})

function formatDate(date: string) {
	return date?.slice(0, 10) || '未知日期'
}

useSeoMeta({
	title: '博友圈',
	description: `${appConfig.title}的博友圈，聚合友链站点的最新文章。`,
})

<template>
<BlogHeader class="mobile-only" to="/" suffix="博友圈" tag="h1" />

<UtilHydrateSafe>
	<div class="friend-circle">
		<header class="circle-hero card">
			<div>
				<p class="circle-kicker">
					<Icon name="tabler:circles-relation" />
					友圈动态
				</p>
				<h1 class="text-creative">博友圈</h1>
				<p class="circle-desc">
					聚合友链站点的最新文章，发现邻居们的新鲜动态。
				</p>
			</div>
			<div class="circle-sync">
				<span>上次同步</span>
				<strong>{{ stats?.last_updated_time || '—' }}</strong>
			</div>
		</header>

		<BlogWidget v-if="stats" card title="圈子统计" class="circle-stats">
			<ZDlGroup :items="circleStats" size="small" />
		</BlogWidget>

		<p v-if="pending" class="friend-circle-message card">
			<Icon name="line-md:loading-twotone-loop" />
			博友圈加载中……
		</p>

		<p v-else-if="error" class="friend-circle-message error card">
			<Icon name="tabler:cloud-x" />
			博友圈数据加载失败，请稍后重试。
		</p>

		<p v-else-if="!articles.length" class="friend-circle-message card">
			<Icon name="tabler:mood-empty" />
			暂时没有抓取到友链文章。
		</p>

		<template v-else>
			<TransitionGroup tag="menu" class="circle-list proper-height" name="float-in">
				<UtilLink
					v-for="article, index in paginatedArticles"
					:key="`${article.link}-${article.created}`"
					class="circle-article card upraise"
					:to="article.link"
					target="_blank"
					rel="noopener noreferrer"
					:style="getFixedDelay(index * 0.05)"
				>
					<img
						class="circle-avatar no-lightbox"
						:src="article.avatar || fallbackAvatar"
						:alt="article.author"
						loading="lazy"
						@error="($event.target as HTMLImageElement).src = fallbackAvatar"
					>
					<article>
						<h2 class="article-title text-creative">
							{{ article.title }}
						</h2>
						<p class="article-description">
							{{ article.summary || '这篇文章暂时没有摘要。' }}
						</p>
						<div class="article-info">
							<span>
								<Icon name="tabler:user-circle" />
								{{ article.author }}
							</span>
							<span>
								<Icon name="tabler:pencil-minus" />
								<time :datetime="article.created">{{ formatDate(article.created) }}</time>
							</span>
							<span class="read-origin">
								<Icon name="tabler:external-link" />
								阅读原文
							</span>
						</div>
					</article>
				</UtilLink>
			</TransitionGroup>

			<ZPagination
				v-if="totalPages > 1"
				v-model="currentPage"
				sticky
				avoid
				:total-pages="totalPages"
			/>
		</template>
	</div>
</UtilHydrateSafe>
</template>

<style lang="scss" scoped>
.friend-circle {
	margin: 1rem;
}

.circle-hero {
	display: flex;
	gap: 1rem;
	align-items: flex-start;
	justify-content: space-between;
	margin-block: 1rem;
	padding: 1rem;
	border-radius: 0.8em;
	color: var(--c-text);
}

.circle-kicker {
	display: flex;
	gap: 0.4em;
	align-items: center;
	margin: 0 0 0.45rem;
	color: var(--c-text-2);
	font-size: 0.82em;
}

.circle-hero h1 {
	margin: 0;
	font-size: 1.45em;
}

.circle-desc {
	margin: 0.45rem 0 0;
	color: var(--c-text-2);
	font-size: 0.92em;
	line-height: 1.7;
}

.circle-sync {
	min-width: 8rem;
	padding: 0.55rem 0.75rem;
	border-radius: 0.7rem;
	background-color: var(--c-bg-2);
	text-align: end;
	font-size: 0.82em;
}
</style>

.friend-circle-message {
	display: flex;
	gap: 0.5em;
	align-items: center;
	justify-content: center;
	margin: 1rem 0;
	padding: 1.2rem;
	color: var(--c-text-2);

	&.error {
		color: var(--c-danger, #d33);
	}
}

.circle-list {
	display: grid;
	gap: 1rem;
}

.circle-article {
	display: grid;
	grid-template-columns: 2.6rem minmax(0, 1fr);
	gap: 0.85rem;
	align-items: flex-start;
	padding: 1rem;
	border-radius: 0.8em;
	color: var(--c-text);
	animation: float-in 0.2s var(--delay) backwards;
}

.circle-avatar {
	width: 2.6rem;
	height: 2.6rem;
	margin: 0;
	border-radius: 50%;
	box-shadow: 0 0 0 1px var(--c-border);
	object-fit: cover;
}

.article-title {
	display: -webkit-box;
	margin: 0;
	overflow: hidden;
	color: var(--c-text);
	font-size: 1.1em;
	line-height: 1.5;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 2;
}

.article-description {
	display: -webkit-box;
	margin: 0;
	overflow: hidden;
	color: var(--c-text-2);
	font-size: 0.9em;
	line-height: 1.7;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 2;
}