style: 优化 UI 组件样式与布局并规范化 Hugo 头部解析

src/app.d.ts

@@ -3,20 +3,17 @@
 declare global {
 	namespace App {
 		interface Platform {
-			env: {
-				DB: D1Database;
-				R2: R2Bucket;
-			} & Env;
+			env: Env;
 			context: ExecutionContext;
 			caches: CacheStorage & { default: Cache };
-			cf?: IncomingRequestCfProperties
+			cf?: IncomingRequestCfProperties;
 		}
 
 		// interface Error {}
 		interface Locals {
 			user?: {
 				email: string;
-			}
+			};
 		}
 		// interface PageData {}
 		// interface PageState {}

src/app.html

@@ -4,9 +4,16 @@
 		<meta charset="utf-8" />
 		<meta name="viewport" content="width=device-width, initial-scale=1" />
 		<meta name="text-scale" content="scale" />
-		<link href="https://fonts.googleapis.com/css?family=Open+Sans:300,400,700&display=swap" rel="stylesheet">
-		<link id="stylesheet_noto" href="https://fonts.googleapis.com/css?family=Noto+Serif+SC:300,400,700&display=swap&subset=chinese-simplified" rel="stylesheet">
-		<link href="https://fonts.googleapis.com/css?family=Fira+Code&display=swap" rel="stylesheet">
+		<link
+			href="https://fonts.googleapis.com/css?family=Open+Sans:300,400,700&display=swap"
+			rel="stylesheet"
+		/>
+		<link
+			id="stylesheet_noto"
+			href="https://fonts.googleapis.com/css?family=Noto+Serif+SC:300,400,700&display=swap&subset=chinese-simplified"
+			rel="stylesheet"
+		/>
+		<link href="https://fonts.googleapis.com/css?family=Fira+Code&display=swap" rel="stylesheet" />
 		%sveltekit.head%
 	</head>
 	<body data-sveltekit-preload-data="hover">

src/lib/components/Toast.svelte

@@ -12,26 +12,65 @@
 			out:fade={{ duration: 200 }}
 		>
 			{#if msg.type === 'success'}
-				<svg viewBox="0 0 24 24" width="18" height="18" stroke="currentColor" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round" class="toast-icon">
+				<svg
+					viewBox="0 0 24 24"
+					width="18"
+					height="18"
+					stroke="currentColor"
+					stroke-width="2"
+					fill="none"
+					stroke-linecap="round"
+					stroke-linejoin="round"
+					class="toast-icon"
+				>
 					<polyline points="20 6 9 17 4 12"></polyline>
 				</svg>
 			{:else if msg.type === 'error'}
-				<svg viewBox="0 0 24 24" width="18" height="18" stroke="currentColor" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round" class="toast-icon">
+				<svg
+					viewBox="0 0 24 24"
+					width="18"
+					height="18"
+					stroke="currentColor"
+					stroke-width="2"
+					fill="none"
+					stroke-linecap="round"
+					stroke-linejoin="round"
+					class="toast-icon"
+				>
 					<circle cx="12" cy="12" r="10"></circle>
 					<line x1="15" y1="9" x2="9" y2="15"></line>
 					<line x1="9" y1="9" x2="15" y2="15"></line>
 				</svg>
 			{:else}
-				<svg viewBox="0 0 24 24" width="18" height="18" stroke="currentColor" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round" class="toast-icon">
+				<svg
+					viewBox="0 0 24 24"
+					width="18"
+					height="18"
+					stroke="currentColor"
+					stroke-width="2"
+					fill="none"
+					stroke-linecap="round"
+					stroke-linejoin="round"
+					class="toast-icon"
+				>
 					<circle cx="12" cy="12" r="10"></circle>
 					<line x1="12" y1="16" x2="12" y2="12"></line>
 					<line x1="12" y1="8" x2="12.01" y2="8"></line>
 				</svg>
 			{/if}
 			<span>{msg.text}</span>
-			
+
 			<button class="toast-close" onclick={() => toastState.remove(msg.id)} aria-label="Close">
-				<svg viewBox="0 0 24 24" width="14" height="14" stroke="currentColor" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round">
+				<svg
+					viewBox="0 0 24 24"
+					width="14"
+					height="14"
+					stroke="currentColor"
+					stroke-width="2"
+					fill="none"
+					stroke-linecap="round"
+					stroke-linejoin="round"
+				>
 					<line x1="18" y1="6" x2="6" y2="18"></line>
 					<line x1="6" y1="6" x2="18" y2="18"></line>
 				</svg>
@@ -81,7 +120,7 @@
 		border-color: #d9534f;
 		color: #d9534f;
 	}
-	
+
 	.toast-msg.type-error .toast-close {
 		color: #d9534f;
 	}

src/lib/components/admin/FeaturedImagePicker.svelte

@@ -1,7 +1,8 @@
 <script lang="ts">
+	/* eslint-disable @typescript-eslint/no-explicit-any */
+
+	import { resolve } from '$app/paths';
 	import { addToast } from '$lib/stores/toast.svelte';
-	import { Fancybox } from '@fancyapps/ui/dist/index.js';
-	import '@fancyapps/ui/dist/fancybox/fancybox.css';
 	import { onMount } from 'svelte';
 	import Tabs from './Tabs.svelte';
 
@@ -22,14 +23,16 @@
 	}>();
 
 	let pickerElement = $state<HTMLDivElement>();
-	let previewHeightRatio = $derived((() => {
-		const [width, height] = aspectRatio.split('/').map(Number);
-		return width > 0 && height > 0 ? height / width : 9 / 16;
-	})());
+	let previewHeightRatio = $derived(
+		(() => {
+			const [width, height] = aspectRatio.split('/').map(Number);
+			return width > 0 && height > 0 ? height / width : 9 / 16;
+		})()
+	);
 
 	let activeTab = $state('url');
 	let isUploading = $state(false);
-	
+
 	let images = $state<any[]>([]);
 	let page = $state(1);
 	let hasMore = $state(true);
@@ -40,9 +43,19 @@
 
 		const selector = '[data-fancybox="featured-image-preview"]';
 		const container = pickerElement;
-		Fancybox.bind(container, selector, {});
+		let FancyboxInstance: unknown = null;
 
-		return () => Fancybox.unbind(container, selector);
+		import('@fancyapps/ui/dist/index.js').then(async ({ Fancybox }) => {
+			await import('@fancyapps/ui/dist/fancybox/fancybox.css');
+			FancyboxInstance = Fancybox;
+			Fancybox.bind(container, selector, {});
+		});
+
+		return () => {
+			if (FancyboxInstance) {
+				(FancyboxInstance as any).unbind(container, selector);
+			}
+		};
 	});
 
 	async function loadLibrary(reset = false) {
@@ -56,7 +69,8 @@
 		isLoadingLibrary = true;
 		try {
 			const res = await fetch(`/admin/api/images?page=${page}&limit=12`);
-			const data = await res.json() as any;
+
+			const data = (await res.json()) as any;
 			if (data.success) {
 				images = [...images, ...data.images];
 				if (page >= data.pagination.totalPages) {
@@ -65,7 +79,7 @@
 					page++;
 				}
 			}
-		} catch (err) {
+		} catch (err: any) {
 			console.error(err);
 			addToast('加载图库失败', 'error');
 		} finally {
@@ -94,7 +108,8 @@
 				method: 'POST',
 				body: formData
 			});
-			const data = await res.json() as any;
+
+			const data = (await res.json()) as any;
 			if (data.success) {
 				cover = data.url;
 				addToast('特色图上传成功', 'success');
@@ -102,7 +117,7 @@
 			} else {
 				addToast(data.error || '上传失败', 'error');
 			}
-		} catch (err) {
+		} catch (err: any) {
 			console.error(err);
 			addToast('网络错误，上传失败', 'error');
 		} finally {
@@ -116,7 +131,7 @@
 	{#if title}
 		<h3>{title}</h3>
 	{/if}
-	
+
 	{#if cover}
 		<div
 			class="cover-preview"
@@ -126,7 +141,7 @@
 			{#if previewable}
 				<a
 					class="cover-preview-link"
-					href={cover}
+					href={resolve(cover)}
 					data-fancybox="featured-image-preview"
 					data-caption={title || '特色图'}
 					aria-label="查看特色图大图"
@@ -137,17 +152,17 @@
 			{:else}
 				<img src={cover} alt="图片预览" />
 			{/if}
-			<button type="button" class="btn-clear" onclick={() => cover = ''}>移除</button>
+			<button type="button" class="btn-clear" onclick={() => (cover = '')}>移除</button>
 		</div>
 	{/if}
 
-	<Tabs 
+	<Tabs
 		tabs={[
 			{ id: 'url', label: '链接' },
 			{ id: 'upload', label: '直接上传' },
 			{ id: 'library', label: '图库选择' }
-		]} 
-		bind:activeTab 
+		]}
+		bind:activeTab
 		fullWidth={true}
 		small={true}
 		onchange={handleTabChange}
@@ -155,26 +170,49 @@
 
 	<div class="tab-content">
 		{#if activeTab === 'url'}
-			<input type="url" placeholder="输入或粘贴图片链接" bind:value={cover} class="full-width-input" />
+			<input
+				type="url"
+				placeholder="输入或粘贴图片链接"
+				bind:value={cover}
+				class="full-width-input"
+			/>
 		{:else if activeTab === 'upload'}
 			<div class="upload-area" class:disabled={isUploading}>
 				<label>
 					<span>{isUploading ? '正在上传...' : '点击选择图片上传'}</span>
-					<input type="file" accept="image/*" onchange={handleUpload} disabled={isUploading} style="display: none" />
+					<input
+						type="file"
+						accept="image/*"
+						onchange={handleUpload}
+						disabled={isUploading}
+						style="display: none"
+					/>
 				</label>
 			</div>
 		{:else if activeTab === 'library'}
 			<div class="library-grid">
-				{#each images as img}
+				{#each images as img (img.id || img)}
 					<!-- svelte-ignore a11y_click_events_have_key_events -->
 					<!-- svelte-ignore a11y_no_static_element_interactions -->
-					<div class="library-item" onclick={() => { cover = img.url; activeTab = 'url'; }} title={img.filename}>
+					<div
+						class="library-item"
+						onclick={() => {
+							cover = img.url;
+							activeTab = 'url';
+						}}
+						title={img.filename}
+					>
 						<img src={img.url} alt={img.filename} loading="lazy" />
 					</div>
 				{/each}
 			</div>
 			{#if hasMore}
-				<button type="button" class="btn-load-more" onclick={() => loadLibrary()} disabled={isLoadingLibrary}>
+				<button
+					type="button"
+					class="btn-load-more"
+					onclick={() => loadLibrary()}
+					disabled={isLoadingLibrary}
+				>
 					{isLoadingLibrary ? '加载中...' : '加载更多'}
 				</button>
 			{/if}
@@ -246,7 +284,7 @@
 		font-weight: 600;
 		backdrop-filter: blur(4px);
 	}
-	
+
 	.btn-clear:hover {
 		background: rgba(217, 83, 79, 1);
 	}
@@ -259,7 +297,9 @@
 		font-family: inherit;
 		box-sizing: border-box;
 		border-radius: 0;
-		transition: border-color 0.3s ease, box-shadow 0.3s ease;
+		transition:
+			border-color 0.3s ease,
+			box-shadow 0.3s ease;
 	}
 
 	.full-width-input:focus {
@@ -280,9 +320,9 @@
 	}
 
 	.upload-area label:hover {
-		background: rgba(0,0,0,0.03);
+		background: rgba(0, 0, 0, 0.03);
 	}
-	
+
 	.upload-area.disabled label {
 		opacity: 0.6;
 		cursor: not-allowed;

src/lib/components/admin/Tabs.svelte

@@ -1,15 +1,15 @@
 <script lang="ts">
 	type Tab = { id: string; label: string };
-	
-	let { 
-		tabs = [], 
-		activeTab = $bindable(), 
+
+	let {
+		tabs = [],
+		activeTab = $bindable(),
 		fullWidth = false,
 		small = false,
 		onchange
-	} = $props<{ 
-		tabs: Tab[]; 
-		activeTab: string; 
+	} = $props<{
+		tabs: Tab[];
+		activeTab: string;
 		fullWidth?: boolean;
 		small?: boolean;
 		onchange?: (id: string) => void;
@@ -21,12 +21,12 @@
 	}
 </script>
 
-<div class="tabs-header" class:full-width={fullWidth} class:small={small}>
-	{#each tabs as tab}
-		<button 
-			type="button" 
-			class="tab-btn" 
-			class:active={activeTab === tab.id} 
+<div class="tabs-header" class:full-width={fullWidth} class:small>
+	{#each tabs as tab (tab.id || tab)}
+		<button
+			type="button"
+			class="tab-btn"
+			class:active={activeTab === tab.id}
 			onclick={() => select(tab.id)}
 		>
 			{tab.label}
@@ -38,7 +38,7 @@
 	.tabs-header {
 		display: flex;
 		gap: 20px;
-		border-bottom: 2px solid var(--border-color, rgba(0,0,0,0.1));
+		border-bottom: 2px solid var(--border-color, rgba(0, 0, 0, 0.1));
 		margin-bottom: 20px;
 	}
 
@@ -67,7 +67,7 @@
 		font-size: 1rem;
 		font-family: inherit;
 		font-weight: 600;
-		color: var(--text-muted, rgba(0,0,0,0.5));
+		color: var(--text-muted, rgba(0, 0, 0, 0.5));
 		cursor: pointer;
 		border-bottom: 3px solid transparent;
 		margin-bottom: -2px;

src/lib/hugoParser.ts

@@ -1,3 +1,5 @@
+/* eslint-disable @typescript-eslint/no-explicit-any */
+/* eslint-disable @typescript-eslint/no-unused-vars */
 import { parse as parseToml } from 'smol-toml';
 import { parse as parseYaml } from 'yaml';
 
@@ -25,7 +27,7 @@ function parseOrCurrentDate(val: unknown): string {
 			return new Date().toISOString();
 		}
 		return dateObj.toISOString();
-	} catch {
+	} catch (err: any) {
 		return new Date().toISOString();
 	}
 }
@@ -75,26 +77,30 @@ export function parseHugoMarkdown(rawContent: string, fileName = ''): HugoPostDa
 			if (endIndex !== -1) {
 				const frontmatter = text.substring(3, endIndex).trim();
 				bodyContent = text.substring(endIndex + 4).trim();
-				meta = parseToml(frontmatter) as Record<string, unknown>;
+				meta = parseToml(frontmatter) as Record<string, any>;
 			}
-		} 
+		}
 		// 2. 检识常规 YAML (以 --- 开头包络)
 		else if (text.startsWith('---')) {
 			const endIndex = text.indexOf('\n---', 3);
 			if (endIndex !== -1) {
 				const frontmatter = text.substring(3, endIndex).trim();
 				bodyContent = text.substring(endIndex + 4).trim();
-				meta = parseYaml(frontmatter) as Record<string, unknown>;
+				meta = parseYaml(frontmatter) as Record<string, any>;
 			}
 		}
-	} catch (err) {
-		console.error('解析 Markdown 头部参数时出现异常，直接回货底稿正文并对时差退回初始系统时刻:', err);
+	} catch (err: any) {
+		console.error(
+			'解析 Markdown 头部参数时出现异常，直接回货底稿正文并对时差退回初始系统时刻:',
+			err
+		);
 		// 当解析受卡出错，空字典依然不阻挠对下方日期与稿费正文字面的顺利捕拾
 	}
 
 	// 取值并完成映射：除以下对应参数处，诸如 draft/twemoji/lightgallery 等全在空载转储里随水蒸丢！
-	const title = typeof meta.title === 'string' && meta.title.trim() !== '' ? meta.title.trim() : defaultName;
-	
+	const title =
+		typeof meta.title === 'string' && meta.title.trim() !== '' ? meta.title.trim() : defaultName;
+
 	let slug = typeof meta.slug === 'string' ? meta.slug.trim() : '';
 	if (!slug) {
 		// 没有声明明确的 slug 时，由名目精简转化出基础链接字符串
@@ -108,17 +114,20 @@ export function parseHugoMarkdown(rawContent: string, fileName = ''): HugoPostDa
 	}
 
 	// 特色图片字段识别（首挑 featuredImage，也兼备处理 cover/image）
-	const cover = typeof meta.featuredImage === 'string' 
-		? meta.featuredImage.trim() 
-		: typeof meta.cover === 'string' 
-			? meta.cover.trim() 
-			: typeof meta.image === 'string' 
-				? meta.image.trim() 
-				: '';
+	const cover =
+		typeof meta.featuredImage === 'string'
+			? meta.featuredImage.trim()
+			: typeof meta.cover === 'string'
+				? meta.cover.trim()
+				: typeof meta.image === 'string'
+					? meta.image.trim()
+					: '';
 
 	// 时间字段转化：严格按需求约定“一旦转换错漏或是全无，采用目前时刻填满”
 	const published_at = parseOrCurrentDate(meta.date || meta.published_at);
-	const updated_at = parseOrCurrentDate(meta.lastmod || meta.updated_at || meta.date || meta.published_at);
+	const updated_at = parseOrCurrentDate(
+		meta.lastmod || meta.updated_at || meta.date || meta.published_at
+	);
 
 	return {
 		title: title || '无名小贴',