refactor: 将组件中的 onMount 替换为 Svelte 5 的 $effect

src/lib/components/ConfirmDialog.svelte

@@ -1,7 +1,6 @@
 <script lang="ts">
 	import { confirmState } from '$lib/stores/confirm.svelte';
 	import { fade, scale } from 'svelte/transition';
-	import { onMount, onDestroy } from 'svelte';
 
 	// Handle escape key to cancel
 	function handleKeydown(e: KeyboardEvent) {
@@ -10,14 +9,11 @@
 		}
 	}
 
-	onMount(() => {
+	$effect(() => {
 		window.addEventListener('keydown', handleKeydown);
-	});
-
-	onDestroy(() => {
-		if (typeof window !== 'undefined') {
+		return () => {
 			window.removeEventListener('keydown', handleKeydown);
-		}
+		};
 	});
 </script>
 

src/lib/components/admin/ContentEditor.svelte

@@ -1,5 +1,5 @@
 <script lang="ts">
-	import { onMount, tick, untrack } from 'svelte';
+	import { tick, untrack } from 'svelte';
 	import MarkdownEditor from './MarkdownEditor.svelte';
 	import MarkdownRenderer from '$lib/components/MarkdownRenderer.svelte';
 	import OutlinePopover from './OutlinePopover.svelte';
@@ -21,7 +21,7 @@
 	let preview: HTMLDivElement | undefined = $state();
 	let previewHeadings: HTMLElement[] = [];
 	let navigatingPreview = false;
-	onMount(() => {
+	$effect(() => {
 		const resume = () => {
 			navigatingPreview = false;
 		};

src/lib/components/admin/DatePicker.svelte

@@ -1,5 +1,4 @@
 <script lang="ts">
-	import { onMount } from 'svelte';
 	import { Calendar } from 'lucide-svelte';
 
 	let {
@@ -37,7 +36,7 @@
 		}
 	}
 
-	onMount(() => {
+	$effect(() => {
 		document.addEventListener('click', handleOutsideClick);
 		return () => document.removeEventListener('click', handleOutsideClick);
 	});

src/lib/components/admin/EditorSidebarTabs.svelte

@@ -1,5 +1,4 @@
 <script lang="ts">
-	import { onMount } from 'svelte';
 	import Tabs from './Tabs.svelte';
 	import ArticleOutline from './ArticleOutline.svelte';
 	import type { EditorOutline } from '$lib/editor/outline.svelte';
@@ -11,7 +10,7 @@
 	let narrow = $state(false);
 	const storageKey = 'blogflare.editor.sidebar';
 	let preferred = 'settings';
-	onMount(() => {
+	$effect(() => {
 		try {
 			const saved = localStorage.getItem(storageKey);
 			if (saved && ['settings', 'media', 'outline'].includes(saved)) preferred = saved;

src/lib/components/admin/FeaturedImagePicker.svelte

@@ -2,7 +2,7 @@
 	/* eslint-disable @typescript-eslint/no-explicit-any */
 
 	import { addToast } from '$lib/stores/toast.svelte';
-	import { onMount } from 'svelte';
+
 	import Tabs from './Tabs.svelte';
 
 	let {
@@ -37,7 +37,7 @@
 	let hasMore = $state(true);
 	let isLoadingLibrary = $state(false);
 
-	onMount(() => {
+	$effect(() => {
 		if (!previewable || !pickerElement) return;
 
 		const selector = '[data-fancybox="featured-image-preview"]';

src/routes/+layout.svelte

@@ -3,7 +3,6 @@
 	import '../app.css';
 	let { children } = $props();
 
-	import { onMount } from 'svelte';
 	import { page } from '$app/stores';
 
 	let scrolled = $state(false);
@@ -21,7 +20,7 @@
 		return `${days} 天 ${hours} 小时 ${minutes} 分钟`;
 	}
 
-	onMount(() => {
+	$effect(() => {
 		const handleScroll = () => {
 			scrolled = window.scrollY > 50;
 		};

src/routes/admin/+layout.svelte

@@ -1,7 +1,7 @@
 <script lang="ts">
 	import { resolve } from '$app/paths';
 	import { page } from '$app/stores';
-	import { onMount } from 'svelte';
+
 	import { ExternalLink } from 'lucide-svelte';
 	import Toast from '$lib/components/Toast.svelte';
 	import ConfirmDialog from '$lib/components/ConfirmDialog.svelte';
@@ -10,7 +10,7 @@
 
 	let scrolled = $state(false);
 
-	onMount(() => {
+	$effect(() => {
 		const handleScroll = () => {
 			scrolled = window.scrollY > 50;
 		};