Upload 439 files

src/components/admin/AdminApp.svelte

@@ -795,7 +795,7 @@
 			<p>请在 Hugging Face Space 中配置环境变量 <code>ADMIN</code> 和 <code>PASSWORD</code> 后再访问管理页。</p>
 		</div>
 	{:else if !authenticated}
-		<form class="card-base admin-login" method="post" action={`${entryPath}/login`} on:submit|preventDefault={handleLogin}>
+		<form class="card-base admin-login admin-login-stage" method="post" action={`${entryPath}/login`} on:submit|preventDefault={handleLogin}>
 			<div class="admin-login-badge">Firefly Admin</div>
 			<h2>登录后台</h2>
 			<p>使用 Space 环境变量中的管理员账号和密码进入管理页面。</p>
@@ -1006,12 +1006,20 @@
 		padding: 1.2rem;
 	}
 	.admin-login {
-		max-width: 28rem;
+		max-width: 30rem;
 		margin: 0 auto;
 		display: flex;
 		flex-direction: column;
 		gap: 0.9rem;
 	}
+	.admin-login-stage {
+		position: relative;
+		z-index: 6;
+		border: 1px solid color-mix(in oklch, var(--line-divider) 68%, white 32%);
+		background: color-mix(in oklch, var(--card-bg) 86%, white 14%);
+		backdrop-filter: blur(18px);
+		box-shadow: 0 28px 80px rgb(8 20 28 / 0.18);
+	}
 	.admin-login-badge, .build-pill {
 		display: inline-flex;
 		align-items: center;
@@ -1094,8 +1102,12 @@
 		.admin-workbench, .two-col, .metrics-grid, .asset-grid, .editor-layout, .posts-layout { grid-template-columns: 1fr; }
 	}
 	@media (max-width: 800px) {
+		.admin-login {
+			max-width: 100%;
+		}
 		.field-grid { grid-template-columns: 1fr; }
 		.field-span-2 { grid-column: auto; }
 	}
 </style>
 
+

src/layouts/AdminLayout.astro

@@ -62,14 +62,15 @@ const isWallpaperSwitchable = backgroundWallpaper.switchable ?? true;
 	<section class="relative z-20 w-full px-2 pt-6 md:px-4 md:pt-8">
 		<div class="mx-auto max-w-(--page-width)">
 			<div class="card-base admin-hero overflow-hidden">
-				<div class="relative min-h-48 md:min-h-56">
+				<div class="admin-hero-frame">
 					{bannerImage ? (
 						<ImageWrapper
 							src={bannerImage}
 							alt="Admin banner image"
-							class="absolute inset-0 h-full w-full object-cover"
+							class="admin-hero-media absolute inset-0 h-full w-full"
 							loading="eager"
 							fetchpriority="high"
+							layout="none"
 							widths={[1280, 1920]}
 							sizes="100vw"
 						/>
@@ -77,7 +78,7 @@ const isWallpaperSwitchable = backgroundWallpaper.switchable ?? true;
 						<div class="admin-hero-fallback absolute inset-0" />
 					)}
 					<div class="absolute inset-0 admin-hero-overlay" />
-					<div class="relative admin-hero-grid min-h-48 gap-5 p-6 text-white md:min-h-56 md:p-8">
+					<div class="relative admin-hero-grid h-full gap-5 p-6 text-white md:p-8">
 						<div class="admin-hero-copy flex flex-col justify-end gap-4">
 							<div class="inline-flex w-fit items-center gap-2 rounded-full bg-white/15 px-3 py-1 text-sm font-medium backdrop-blur-md">
 							<span class="h-2.5 w-2.5 rounded-full bg-[oklch(0.75_0.14_var(--hue))]" />
@@ -112,7 +113,7 @@ const isWallpaperSwitchable = backgroundWallpaper.switchable ?? true;
 		</div>
 	</section>
 
-	<main class="relative z-30 -mt-6 w-full px-2 pb-10 pt-0 md:-mt-8 md:px-4">
+	<main class="relative z-30 -mt-14 w-full px-2 pb-10 pt-0 md:-mt-18 md:px-4">
 		<div class="mx-auto max-w-(--page-width)">
 			<slot />
 		</div>
@@ -130,6 +131,26 @@ const isWallpaperSwitchable = backgroundWallpaper.switchable ?? true;
 			linear-gradient(180deg, rgb(0 0 0 / 0.12), rgb(0 0 0 / 0.42));
 	}
 
+	.admin-hero-frame {
+		position: relative;
+		height: clamp(18rem, 34vw, 25rem);
+	}
+
+	.admin-hero-media {
+		position: absolute;
+		inset: 0;
+	}
+
+	.admin-hero :global(picture),
+	.admin-hero :global(img[data-astro-image]),
+	.admin-hero :global(img) {
+		display: block;
+		width: 100%;
+		height: 100% !important;
+		max-width: none;
+		object-fit: cover;
+	}
+
 	.admin-hero-fallback {
 		background:
 			radial-gradient(circle at top right, rgb(255 255 255 / 0.18), transparent 36%),
@@ -175,6 +196,11 @@ const isWallpaperSwitchable = backgroundWallpaper.switchable ?? true;
 	}
 
 	@media (max-width: 959px) {
+		.admin-hero-frame {
+			height: auto;
+			min-height: 17rem;
+		}
+
 		.admin-hero-side {
 			grid-template-columns: repeat(3, minmax(0, 1fr));
 		}