From fa38d81ab56343e2df46df52076598e317fcdf29 Mon Sep 17 00:00:00 2001
From: seaHi <me@seahi.me>
Date: Thu, 24 Sep 2026 11:55:29 +0800
Subject: [PATCH] =?UTF-8?q?refactor:=20=E5=B0=86=E7=BB=84=E4=BB=B6?=
 =?UTF-8?q?=E4=B8=AD=E7=9A=84=20onMount=20=E6=9B=BF=E6=8D=A2=E4=B8=BA=20Sv?=
 =?UTF-8?q?elte=205=20=E7=9A=84=20$effect?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/lib/components/ConfirmDialog.svelte             | 10 +++-------
 src/lib/components/admin/ContentEditor.svelte       |  4 ++--
 src/lib/components/admin/DatePicker.svelte          |  3 +--
 src/lib/components/admin/EditorSidebarTabs.svelte   |  3 +--
 src/lib/components/admin/FeaturedImagePicker.svelte |  4 ++--
 src/routes/+layout.svelte                           |  3 +--
 src/routes/admin/+layout.svelte                     |  4 ++--
 7 files changed, 12 insertions(+), 19 deletions(-)

diff --git a/src/lib/components/ConfirmDialog.svelte b/src/lib/components/ConfirmDialog.svelte
index 74c5537..c155e48 100644
--- a/src/lib/components/ConfirmDialog.svelte
+++ b/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>
 
diff --git a/src/lib/components/admin/ContentEditor.svelte b/src/lib/components/admin/ContentEditor.svelte
index 91ce6b4..b7e8079 100644
--- a/src/lib/components/admin/ContentEditor.svelte
+++ b/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;
 		};
diff --git a/src/lib/components/admin/DatePicker.svelte b/src/lib/components/admin/DatePicker.svelte
index 54e3060..5889c5c 100644
--- a/src/lib/components/admin/DatePicker.svelte
+++ b/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);
 	});
diff --git a/src/lib/components/admin/EditorSidebarTabs.svelte b/src/lib/components/admin/EditorSidebarTabs.svelte
index 947a8af..cf6e4fe 100644
--- a/src/lib/components/admin/EditorSidebarTabs.svelte
+++ b/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;
diff --git a/src/lib/components/admin/FeaturedImagePicker.svelte b/src/lib/components/admin/FeaturedImagePicker.svelte
index 703737f..7faecb6 100644
--- a/src/lib/components/admin/FeaturedImagePicker.svelte
+++ b/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"]';
diff --git a/src/routes/+layout.svelte b/src/routes/+layout.svelte
index 3f581bb..b56d9d9 100644
--- a/src/routes/+layout.svelte
+++ b/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;
 		};
diff --git a/src/routes/admin/+layout.svelte b/src/routes/admin/+layout.svelte
index d2aaff8..9ef3e5c 100644
--- a/src/routes/admin/+layout.svelte
+++ b/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;
 		};