Upload 439 files

src/components/admin/AdminApp.svelte

@@ -140,7 +140,14 @@
 	];
 
 	function cloneData<T>(value: T): T {
-		return structuredClone(value);
+		if (value === null || value === undefined || typeof value !== "object") {
+			return value;
+		}
+		try {
+			return structuredClone(value);
+		} catch {
+			return JSON.parse(JSON.stringify(value)) as T;
+		}
 	}
 
 	function prettyJson(value: unknown) {
@@ -282,11 +289,13 @@
 		};
 	}
 
-	let sessionLoading = false;
+	let sessionLoading = true;
 	let sessionRefreshing = false;
+	let sessionResolved = false;
 	let authenticated = false;
 	let configured = true;
 	let username = "";
+	let loginSubmitting = false;
 	let activeNav: NavKey = "overview";
 	let toast: ToastState | null = null;
 	let loginForm = { username: "", password: "" };
@@ -430,7 +439,8 @@
 	}
 
 	async function refreshSession() {
-		sessionRefreshing = true;
+		sessionLoading = true;
+		sessionRefreshing = sessionResolved;
 		try {
 			const data = await api<any>("/api/admin/session");
 			authenticated = Boolean(data.authenticated);
@@ -445,6 +455,7 @@
 				error instanceof Error ? error.message : "后台会话检查失败",
 			);
 		} finally {
+			sessionResolved = true;
 			sessionLoading = false;
 			sessionRefreshing = false;
 		}
@@ -584,12 +595,15 @@
 
 	async function handleLogin(event?: SubmitEvent) {
 		event?.preventDefault();
+		loginSubmitting = true;
 		try {
 			const response = await api<any>("/api/admin/login", {
 				method: "POST",
 				body: JSON.stringify(loginForm),
 			});
 			authenticated = Boolean(response.authenticated);
+			configured = response.configured !== false;
+			sessionResolved = true;
 			username = String(response.username || loginForm.username || "");
 			loginForm.password = "";
 			applyBuild(response);
@@ -597,6 +611,8 @@
 			showToast("success", "登录成功");
 		} catch (error) {
 			showToast("error", error instanceof Error ? error.message : "\u767b\u5f55\u5931\u8d25");
+		} finally {
+			loginSubmitting = false;
 		}
 	}
 
@@ -604,6 +620,8 @@
 		await api("/api/admin/logout", { method: "POST", body: JSON.stringify({}) });
 		authenticated = false;
 		username = "";
+		sessionResolved = true;
+		loginForm.password = "";
 		showToast("info", "已退出后台");
 	}
 
@@ -789,23 +807,75 @@
 		<div class={`admin-toast ${toast.tone}`}>{toast.text}</div>
 	{/if}
 
-	{#if !configured}
+	{#if !sessionResolved}
+		<section class="admin-auth-shell admin-auth-shell-pending">
+			<div class="card-base admin-panel admin-auth-copy">
+				<div class="admin-login-badge">Firefly Admin</div>
+				<div class="admin-auth-intro">
+					<h2>正在连接后台</h2>
+					<p>正在检查管理员会话与后台启用状态，确认完成后会显示登录入口或直接进入内容管理台。</p>
+				</div>
+				<div class="admin-loading-stack" aria-hidden="true">
+					<div class="admin-loading-line"></div>
+					<div class="admin-loading-line short"></div>
+					<div class="admin-loading-line medium"></div>
+				</div>
+			</div>
+			<div class="card-base admin-login admin-login-stage admin-login-pending">
+				<div class="admin-login-badge">会话检查中</div>
+				<h2>后台准备中</h2>
+				<p class="admin-login-status">正在从当前 Space 读取后台环境变量并确认登录状态。</p>
+			</div>
+		</section>
+	{:else if !configured}
 		<div class="card-base admin-panel admin-empty">
 			<h2>后台尚未启用</h2>
 			<p>请在 Hugging Face Space 中配置环境变量 <code>ADMIN</code> 和 <code>PASSWORD</code> 后再访问管理页。</p>
 		</div>
 	{:else if !authenticated}
-		<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>
-			<input class="admin-input" name="username" autocomplete="username" placeholder="管理员账号" bind:value={loginForm.username} />
-			<input class="admin-input" name="password" autocomplete="current-password" type="password" placeholder="密码" bind:value={loginForm.password} />
-			<button class="btn-regular admin-button primary" type="submit">&#30331;&#24405;</button>
-			{#if sessionRefreshing || sessionLoading}
-				<p class="admin-login-status">正在检查当前后台会话...</p>
-			{/if}
-		</form>
+		<section class="admin-auth-shell">
+			<div class="card-base admin-panel admin-auth-copy">
+				<div class="admin-login-badge">Firefly Admin</div>
+				<div class="admin-auth-intro">
+					<h2>后台管理入口</h2>
+					<p>在这里统一管理博客标题、介绍、导航、侧栏、文章、图片素材与构建状态，界面风格与前台博客保持一致。</p>
+				</div>
+				<div class="admin-auth-facts">
+					<div class="admin-auth-fact">
+						<strong>账号来源</strong>
+						<span><code>ADMIN</code></span>
+					</div>
+					<div class="admin-auth-fact">
+						<strong>密码来源</strong>
+						<span><code>PASSWORD</code></span>
+					</div>
+					<div class="admin-auth-fact">
+						<strong>内容存储</strong>
+						<span>当前版本保存到容器本地目录</span>
+					</div>
+				</div>
+			</div>
+			<form class="card-base admin-login admin-login-stage" method="post" action={`${entryPath}/login`} on:submit|preventDefault={handleLogin}>
+				<div class="admin-login-badge">管理员登录</div>
+				<h2>输入管理员凭证</h2>
+				<p>登录成功后将进入内容工作台，可继续管理站点配置、文章与图片资源。</p>
+				<label class="admin-field">
+					<span>管理员账号</span>
+					<input class="admin-input" name="username" autocomplete="username" autocapitalize="none" placeholder="管理员账号" bind:value={loginForm.username} required />
+				</label>
+				<label class="admin-field">
+					<span>登录密码</span>
+					<input class="admin-input" name="password" autocomplete="current-password" type="password" placeholder="密码" bind:value={loginForm.password} required />
+				</label>
+				<button class="btn-regular admin-button primary" type="submit" disabled={loginSubmitting}>
+					{loginSubmitting ? "登录中..." : "登录后台"}
+				</button>
+				<p class="admin-login-status">后台凭证直接读取自 Hugging Face Space 环境变量，不写入前端代码。</p>
+				{#if sessionRefreshing || sessionLoading}
+					<p class="admin-login-status">正在刷新当前后台会话...</p>
+				{/if}
+			</form>
+		</section>
 	{:else}
 		<div class="admin-workbench">
 			<aside class="admin-sidebar">
@@ -1005,6 +1075,63 @@
 	.admin-panel, .admin-login {
 		padding: 1.2rem;
 	}
+	.admin-auth-shell {
+		display: grid;
+		grid-template-columns: minmax(0, 1.15fr) minmax(22rem, 0.85fr);
+		gap: 1rem;
+		align-items: stretch;
+	}
+	.admin-auth-copy {
+		position: relative;
+		overflow: hidden;
+		display: flex;
+		flex-direction: column;
+		justify-content: space-between;
+		gap: 1.4rem;
+		min-height: 22rem;
+		background:
+			radial-gradient(circle at top right, rgb(255 255 255 / 0.18), transparent 32%),
+			linear-gradient(145deg, color-mix(in oklch, var(--card-bg) 78%, white 22%), color-mix(in oklch, var(--card-bg) 92%, var(--btn-card-bg-hover) 8%));
+		border: 1px solid color-mix(in oklch, var(--line-divider) 72%, white 28%);
+		box-shadow: 0 28px 80px rgb(8 20 28 / 0.12);
+	}
+	.admin-auth-intro {
+		display: flex;
+		flex-direction: column;
+		gap: 0.75rem;
+	}
+	.admin-auth-intro h2 {
+		margin: 0;
+		font-size: clamp(2rem, 4vw, 3rem);
+		line-height: 1.08;
+	}
+	.admin-auth-intro p {
+		max-width: 40rem;
+	}
+	.admin-auth-facts {
+		display: grid;
+		grid-template-columns: repeat(3, minmax(0, 1fr));
+		gap: 0.8rem;
+	}
+	.admin-auth-fact {
+		display: flex;
+		flex-direction: column;
+		gap: 0.35rem;
+		padding: 0.9rem;
+		border-radius: 1rem;
+		border: 1px solid color-mix(in oklch, var(--line-divider) 74%, white 26%);
+		background: color-mix(in oklch, var(--card-bg) 82%, white 18%);
+	}
+	.admin-auth-fact strong {
+		font-size: 0.95rem;
+	}
+	.admin-auth-fact span {
+		font-size: 0.92rem;
+		color: rgba(0,0,0,.72);
+	}
+	:root.dark .admin-auth-fact span {
+		color: rgba(255,255,255,.72);
+	}
 	.admin-login {
 		max-width: 30rem;
 		margin: 0 auto;
@@ -1012,6 +1139,43 @@
 		flex-direction: column;
 		gap: 0.9rem;
 	}
+	.admin-auth-shell .admin-login {
+		max-width: none;
+		width: 100%;
+		margin: 0;
+		justify-content: center;
+	}
+	.admin-field {
+		display: flex;
+		flex-direction: column;
+		gap: 0.4rem;
+	}
+	.admin-field > span {
+		font-size: 0.88rem;
+		font-weight: 700;
+	}
+	.admin-login-pending {
+		min-height: 22rem;
+		justify-content: center;
+	}
+	.admin-loading-stack {
+		display: flex;
+		flex-direction: column;
+		gap: 0.75rem;
+	}
+	.admin-loading-line {
+		height: 0.9rem;
+		border-radius: 999px;
+		background: linear-gradient(90deg, rgb(255 255 255 / 0.28), rgb(255 255 255 / 0.62), rgb(255 255 255 / 0.22));
+		background-size: 200% 100%;
+		animation: adminPulse 1.8s ease-in-out infinite;
+	}
+	.admin-loading-line.short {
+		width: 48%;
+	}
+	.admin-loading-line.medium {
+		width: 70%;
+	}
 	.admin-login-stage {
 		position: relative;
 		z-index: 6;
@@ -1048,6 +1212,7 @@
 	.admin-quick-actions { display: flex; gap: 0.6rem; align-items: center; }
 	.admin-quick-actions.wrap { flex-wrap: wrap; }
 	.admin-button { min-height: 2.7rem; padding: 0.65rem 1rem; border-radius: 0.95rem; }
+	.admin-button[disabled] { opacity: 0.7; cursor: wait; }
 	.admin-button.ghost { border: 1px solid var(--line-divider); }
 	.admin-button.danger { color: oklch(0.62 0.2 25); }
 	.admin-nav-button, .editor-item, .overview-item {
@@ -1098,8 +1263,25 @@
 	.build-log { max-height: 22rem; overflow: auto; }
 	.danger-text { color: oklch(0.62 0.2 25); }
 	.admin-empty { padding: 2rem; text-align: center; }
+	@keyframes adminPulse {
+		0% {
+			background-position: 0% 50%;
+		}
+		100% {
+			background-position: 100% 50%;
+		}
+	}
 	@media (max-width: 1200px) {
-		.admin-workbench, .two-col, .metrics-grid, .asset-grid, .editor-layout, .posts-layout { grid-template-columns: 1fr; }
+		.admin-auth-shell,
+		.admin-auth-facts,
+		.admin-workbench,
+		.two-col,
+		.metrics-grid,
+		.asset-grid,
+		.editor-layout,
+		.posts-layout {
+			grid-template-columns: 1fr;
+		}
 	}
 	@media (max-width: 800px) {
 		.admin-login {

src/layouts/AdminLayout.astro

@@ -78,8 +78,8 @@ 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 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="absolute inset-0 admin-hero-grid gap-5 p-6 text-white md:p-8">
+						<div class="admin-hero-copy flex max-w-3xl flex-col 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))]" />
 							Firefly Admin
@@ -93,27 +93,13 @@ const isWallpaperSwitchable = backgroundWallpaper.switchable ?? true;
 								</p>
 							</div>
 						</div>
-						<div class="admin-hero-side">
-							<div class="admin-hero-chip">
-								<span>管理入口</span>
-								<strong>/admin</strong>
-							</div>
-							<div class="admin-hero-chip">
-								<span>登录方式</span>
-								<strong>ADMIN / PASSWORD</strong>
-							</div>
-							<div class="admin-hero-chip">
-								<span>内容存储</span>
-								<strong>容器本地目录</strong>
-							</div>
-						</div>
 					</div>
 				</div>
 			</div>
 		</div>
 	</section>
 
-	<main class="relative z-30 -mt-14 w-full px-2 pb-10 pt-0 md:-mt-18 md:px-4">
+	<main class="relative z-30 -mt-5 w-full px-2 pb-10 pt-0 md:-mt-6 md:px-4">
 		<div class="mx-auto max-w-(--page-width)">
 			<slot />
 		</div>
@@ -133,7 +119,7 @@ const isWallpaperSwitchable = backgroundWallpaper.switchable ?? true;
 
 	.admin-hero-frame {
 		position: relative;
-		height: clamp(18rem, 34vw, 25rem);
+		height: clamp(15rem, 26vw, 20rem);
 	}
 
 	.admin-hero-media {
@@ -158,57 +144,18 @@ const isWallpaperSwitchable = backgroundWallpaper.switchable ?? true;
 	}
 
 	.admin-hero-grid {
-		display: grid;
-		align-items: end;
-	}
-
-	.admin-hero-side {
-		display: grid;
-		gap: 0.75rem;
-		align-self: stretch;
-	}
-
-	.admin-hero-chip {
 		display: flex;
-		flex-direction: column;
-		gap: 0.2rem;
-		border: 1px solid rgb(255 255 255 / 0.14);
-		border-radius: 1rem;
-		background: rgb(255 255 255 / 0.1);
-		backdrop-filter: blur(18px);
-		padding: 0.9rem 1rem;
-	}
-
-	.admin-hero-chip span {
-		font-size: 0.8rem;
-		color: rgb(255 255 255 / 0.72);
+		align-items: flex-start;
 	}
 
-	.admin-hero-chip strong {
-		font-size: 0.98rem;
-		letter-spacing: 0.02em;
-	}
-
-	@media (min-width: 960px) {
-		.admin-hero-grid {
-			grid-template-columns: minmax(0, 1.35fr) minmax(16rem, 0.75fr);
-		}
+	.admin-hero-copy {
+		padding-top: clamp(0.5rem, 2vw, 1.25rem);
 	}
 
 	@media (max-width: 959px) {
 		.admin-hero-frame {
 			height: auto;
-			min-height: 17rem;
-		}
-
-		.admin-hero-side {
-			grid-template-columns: repeat(3, minmax(0, 1fr));
-		}
-	}
-
-	@media (max-width: 720px) {
-		.admin-hero-side {
-			grid-template-columns: 1fr;
+			min-height: 14rem;
 		}
 	}
 </style>