src/components/common/CoverImage.astro

---
import { Picture } from "astro:assets";
import * as path from "node:path";
import type { ImageMetadata } from "astro";
import { coverImageConfig } from "@/config/coverImageConfig";
import type { ImageFormat, ResponsiveImageLayout } from "@/types/config";
import {
	getFallbackFormat,
	getImageFormats,
	getImageQuality,
} from "@/utils/image-utils";
import { url } from "@/utils/url-utils";

interface Props {
	id?: string;
	src: string;
	class?: string;
	alt?: string;
	position?: string;
	basePath?: string;
	preview?: boolean;
	layout?: ResponsiveImageLayout;
	formats?: ImageFormat[];
	loading?: "lazy" | "eager";
}

const {
	id,
	src,
	alt,
	position = "center",
	basePath = "/",
	preview = false,
	layout = "constrained",
	formats = getImageFormats(),
	loading = "lazy",
} = Astro.props;

const configQuality = getImageQuality();
const fallbackFormat = getFallbackFormat();
const className = Astro.props.class;

// 判断图片类型
const isLocal = !(
	src.startsWith("/") ||
	src.startsWith("http") ||
	src.startsWith("https") ||
	src.startsWith("data:")
);
const isPublic = src.startsWith("/");

// 动态导入本地图片
let img: ImageMetadata | null = null;
if (isLocal) {
	const files = import.meta.glob<ImageMetadata>(
		"../../**/*.{png,jpg,jpeg,webp,avif}",
		{
			import: "default",
		},
	);
	const normalizedPath = path
		.normalize(path.join("../../", basePath, src))
		.replace(/\\/g, "/");
	const file = files[normalizedPath];
	if (file) {
		img = await file();
	} else {
		console.error(
			`[ERROR] Image not found: ${normalizedPath.replace("../../", "src/")}`,
		);
	}
}

// 加载回退图片
let fallbackImg: ImageMetadata | null = null;
const fallbackPath = coverImageConfig.randomCoverImage.fallback;
if (fallbackPath && !isLocal) {
	const files = import.meta.glob<ImageMetadata>(
		"../../**/*.{png,jpg,jpeg,webp,avif}",
		{
			import: "default",
		},
	);
	const normalizedFallbackPath = path
		.normalize(path.join("../../", fallbackPath))
		.replace(/\\/g, "/");
	const file = files[normalizedFallbackPath];
	if (file) {
		fallbackImg = await file();
	}
}

// 图片样式
const imageClass = "w-full h-full object-cover";
const imageStyle = `object-position: ${position};`;

// 响应式配置
const widths = preview ? [320, 480, 640, 960] : [800, 1200, 1600, 2000];
const sizes = preview
	? "(max-width: 640px) 100vw, (max-width: 1024px) 50vw, 320px"
	: "(max-width: 768px) 100vw, (max-width: 1200px) 90vw, 1200px";
const quality = preview ? Math.round(configQuality * 0.9) : configQuality;

// 是否显示加载动画
const showLoading = coverImageConfig.randomCoverImage.showLoading ?? true;
---

<div
	id={id}
	class:list={[className, "cover-image-container overflow-hidden relative"]}
	data-loading={showLoading ? "true" : "false"}
>
	<!-- 加载动画 -->
	{showLoading && (
		<div class="loading-spinner absolute inset-0 flex items-center justify-center z-10" style="background-color: var(--card-bg);">
			<div class="spinner"></div>
		</div>
	)}

	<!-- 错误提示（覆盖在回退图片上） -->
	<div class="error-message absolute inset-0 flex items-center justify-center z-20 hidden pointer-events-none">
		<span class="text-white text-sm px-3 py-1 rounded bg-black/50">Image API Error</span>
	</div>

	<!-- 回退图片（错误时显示） -->
	{fallbackImg && (
		<div class="fallback-image absolute inset-0 hidden">
			<Picture
				src={fallbackImg}
				alt="Fallback cover"
				class={imageClass}
				style={imageStyle}
				width={preview ? 400 : 1200}
				height={preview ? 300 : 800}
				loading="lazy"
				formats={formats}
				fallbackFormat={fallbackFormat}
				quality={quality}
				widths={widths}
				sizes={sizes}
				layout={layout}
			/>
		</div>
	)}

	<!-- 本地图片 -->
	{isLocal && img && (
		<Picture
			src={img}
			alt={alt || ""}
			class={imageClass}
			style={imageStyle}
			width={preview ? 400 : 1200}
			height={preview ? 300 : 800}
			loading={loading}
			formats={formats}
			fallbackFormat={fallbackFormat}
			quality={quality}
			widths={widths}
			sizes={sizes}
			layout={layout}
			data-cover-img
		/>
	)}

	<!-- 远程图片 -->
	{!isLocal && (
		<img
			src={isPublic ? url(src) : src}
			alt={alt || ""}
			class={imageClass}
			style={imageStyle}
			loading={loading}
			decoding="async"
			data-cover-img
			data-remote="true"
		/>
	)}
</div>

<style>
	.cover-image-container {
		min-height: 150px;
	}

	@media (min-width: 768px) {
		.cover-image-container {
			min-height: 0;
		}
	}

	/* 加载动画容器 */
	.loading-spinner {
		transition: opacity 0.3s ease-out;
	}

	/* 加载完成后隐藏 */
	.cover-image-container[data-loading="false"] .loading-spinner {
		opacity: 0;
		pointer-events: none;
	}

	/* 错误状态隐藏加载动画 */
	.cover-image-container[data-error="true"] .loading-spinner {
		display: none;
	}

	/* 错误状态显示错误信息和回退图片 */
	.cover-image-container[data-error="true"] .error-message {
		display: flex;
	}

	.cover-image-container[data-error="true"] .fallback-image {
		display: block;
	}

	/* 错误状态隐藏失败的远程图片 */
	.cover-image-container[data-error="true"] img[data-remote="true"] {
		display: none;
	}

	/* 旋转加载动画 */
	.spinner {
		width: 40px;
		height: 40px;
		border: 3px solid oklch(0.9 0.05 var(--hue));
		border-top-color: oklch(0.6 0.15 var(--hue));
		border-radius: 50%;
		animation: spin 0.8s linear infinite;
	}

	@keyframes spin {
		to {
			transform: rotate(360deg);
		}
	}

	/* 图片样式 */
	.cover-image-container img {
		width: 100%;
		height: 100%;
		object-fit: cover;
	}
</style>

<script>
	function initCoverImages() {
		// 处理所有封面图容器，无论是否显示加载动画
		const containers = document.querySelectorAll('.cover-image-container');
		containers.forEach((container) => {
			// 跳过已处理过的容器
			if (container.hasAttribute('data-initialized')) return;
			container.setAttribute('data-initialized', 'true');

			const img = container.querySelector('img[data-cover-img]') as HTMLImageElement | null;
			if (!img) return;

			const hideLoading = () => {
				container.setAttribute('data-loading', 'false');
			};

			const showError = () => {
				container.setAttribute('data-loading', 'false');
				container.setAttribute('data-error', 'true');
			};

			if (img.complete) {
				if (img.naturalWidth > 0) {
					hideLoading();
				} else if (img.dataset.remote === 'true') {
					showError();
				}
			} else {
				img.addEventListener('load', hideLoading, { once: true });
				img.addEventListener('error', () => {
					if (img.dataset.remote === 'true') {
						showError();
					}
				}, { once: true });
			}
		});
	}

	// 初始化
	initCoverImages();

	// 支持 Swup 等页面切换
	document.addEventListener('astro:page-load', initCoverImages);
</script>