fix: 修复 svelte 升级后 status-editor 按钮无法点击的问题 (#603)

web/src/lib/components/filtered-status-editor.svelte

@@ -11,11 +11,19 @@
 	import type { StatusUpdate, UpdateFilteredVideoStatusRequest } from '$lib/types';
 	import { toast } from 'svelte-sonner';
 
-	export let open = false;
-	export let hasFilters = false;
-	export let loading = false;
-	export let filterDescriptionParts: string[] = [];
-	export let onsubmit: (request: UpdateFilteredVideoStatusRequest) => void;
+	let {
+		open = $bindable(false),
+		hasFilters = false,
+		loading = false,
+		filterDescriptionParts = [],
+		onsubmit
+	}: {
+		open?: boolean;
+		hasFilters?: boolean;
+		loading?: boolean;
+		filterDescriptionParts?: string[];
+		onsubmit: (request: UpdateFilteredVideoStatusRequest) => void;
+	} = $props();
 
 	// 视频任务名称（与后端 VideoStatus 对应）
 	const videoTaskNames = ['视频封面', '视频信息', 'UP 主头像', 'UP 主信息', '分页下载'];
@@ -27,29 +35,25 @@
 	type StatusValue = null | 0 | 7;
 
 	// 视频任务状态，默认都是 null（未选择）
-	let videoStatuses: StatusValue[] = Array(5).fill(null);
+	let videoStatuses = $state<StatusValue[]>(Array(5).fill(null));
 
 	// 分页任务状态，默认都是 null（未选择）
-	let pageStatuses: StatusValue[] = Array(5).fill(null);
+	let pageStatuses = $state<StatusValue[]>(Array(5).fill(null));
 
 	function setVideoStatus(taskIndex: number, value: StatusValue) {
 		videoStatuses[taskIndex] = value;
-		videoStatuses = [...videoStatuses];
 	}
 
 	function setPageStatus(taskIndex: number, value: StatusValue) {
 		pageStatuses[taskIndex] = value;
-		pageStatuses = [...pageStatuses];
 	}
 
 	function resetVideoStatus(taskIndex: number) {
 		videoStatuses[taskIndex] = null;
-		videoStatuses = [...videoStatuses];
 	}
 
 	function resetPageStatus(taskIndex: number) {
 		pageStatuses[taskIndex] = null;
-		pageStatuses = [...pageStatuses];
 	}
 
 	function resetAllStatuses() {
@@ -57,13 +61,16 @@
 		pageStatuses = Array(5).fill(null);
 	}
 
-	function hasAnyChanges(): boolean {
-		return (
-			videoStatuses.some((status) => status !== null) ||
-			pageStatuses.some((status) => status !== null)
-		);
+	function hasVideoChanges(): boolean {
+		return videoStatuses.some((status) => status !== null);
 	}
 
+	function hasPageChanges(): boolean {
+		return pageStatuses.some((status) => status !== null);
+	}
+
+	let hasAnyChanges = $derived(hasVideoChanges() || hasPageChanges());
+
 	function buildRequest(): UpdateFilteredVideoStatusRequest {
 		const request: UpdateFilteredVideoStatusRequest = {};
 
@@ -99,7 +106,7 @@
 	}
 
 	function handleSubmit() {
-		if (!hasAnyChanges()) {
+		if (!hasAnyChanges) {
 			toast.info('请至少选择一个状态进行修改');
 			return;
 		}
@@ -108,9 +115,11 @@
 	}
 
 	// 当 Sheet 关闭时重置状态
-	$: if (!open) {
-		resetAllStatuses();
-	}
+	$effect(() => {
+		if (!open) {
+			resetAllStatuses();
+		}
+	});
 
 	function getStatusInfo(status: StatusValue) {
 		if (status === 0) {
@@ -305,14 +314,14 @@
 			<Button
 				variant="outline"
 				onclick={resetAllStatuses}
-				disabled={!hasAnyChanges() || loading}
+				disabled={!hasAnyChanges || loading}
 				class="flex-1 cursor-pointer"
 			>
 				重置所有状态
 			</Button>
 			<Button
 				onclick={handleSubmit}
-				disabled={loading || !hasAnyChanges()}
+				disabled={loading || !hasAnyChanges}
 				class="flex-1 cursor-pointer"
 			>
 				{loading ? '提交中...' : '提交更改'}

web/src/lib/components/status-editor.svelte

@@ -12,11 +12,19 @@
 	import type { VideoInfo, PageInfo, StatusUpdate, UpdateVideoStatusRequest } from '$lib/types';
 	import { toast } from 'svelte-sonner';
 
-	export let open = false;
-	export let video: VideoInfo;
-	export let pages: PageInfo[] = [];
-	export let loading = false;
-	export let onsubmit: (request: UpdateVideoStatusRequest) => void;
+	let {
+		open = $bindable(false),
+		video,
+		pages = [],
+		loading = false,
+		onsubmit
+	}: {
+		open?: boolean;
+		video: VideoInfo;
+		pages?: PageInfo[];
+		loading?: boolean;
+		onsubmit: (request: UpdateVideoStatusRequest) => void;
+	} = $props();
 
 	// 视频任务名称（与后端 VideoStatus 对应）
 	const videoTaskNames = ['视频封面', '视频信息', 'UP 主头像', 'UP 主信息', '分页下载'];
@@ -24,28 +32,13 @@
 	// 分页任务名称（与后端 PageStatus 对应）
 	const pageTaskNames = ['视频封面', '视频内容', '视频信息', '视频弹幕', '视频字幕'];
 
-	// 重置单个视频任务到原始状态
-	function resetVideoTask(taskIndex: number) {
-		videoStatuses[taskIndex] = originalVideoStatuses[taskIndex];
-		videoStatuses = [...videoStatuses];
-	}
+	let videoStatuses = $state<number[]>([]);
+	let pageStatuses = $state<Record<number, number[]>>({});
 
-	// 重置单个分页任务到原始状态
-	function resetPageTask(pageId: number, taskIndex: number) {
-		if (!pageStatuses[pageId]) {
-			pageStatuses[pageId] = [];
-		}
-		pageStatuses[pageId][taskIndex] = originalPageStatuses[pageId]?.[taskIndex] ?? 0;
-		pageStatuses = { ...pageStatuses };
-	}
+	let originalVideoStatuses = $state<number[]>([]);
+	let originalPageStatuses = $state<Record<number, number[]>>({});
 
-	let videoStatuses: number[] = [];
-	let pageStatuses: Record<number, number[]> = {};
-
-	let originalVideoStatuses: number[] = [];
-	let originalPageStatuses: Record<number, number[]> = {};
-
-	$: {
+	$effect(() => {
 		videoStatuses = [...video.download_status];
 		originalVideoStatuses = [...video.download_status];
 
@@ -68,6 +61,19 @@
 			pageStatuses = {};
 			originalPageStatuses = {};
 		}
+	});
+
+	// 重置单个视频任务到原始状态
+	function resetVideoTask(taskIndex: number) {
+		videoStatuses[taskIndex] = originalVideoStatuses[taskIndex];
+	}
+
+	// 重置单个分页任务到原始状态
+	function resetPageTask(pageId: number, taskIndex: number) {
+		if (!pageStatuses[pageId]) {
+			pageStatuses[pageId] = [];
+		}
+		pageStatuses[pageId][taskIndex] = originalPageStatuses[pageId]?.[taskIndex] ?? 0;
 	}
 
 	function handleVideoStatusChange(taskIndex: number, newValue: number) {
@@ -108,9 +114,8 @@
 		});
 	}
 
-	function hasAnyChanges(): boolean {
-		return hasVideoChanges() || hasPageChanges();
-	}
+	// 使用 $derived 创建派生状态
+	let hasAnyChanges = $derived(hasVideoChanges() || hasPageChanges());
 
 	function buildRequest(): UpdateVideoStatusRequest {
 		const request: UpdateVideoStatusRequest = {};
@@ -151,7 +156,7 @@
 	}
 
 	function handleSubmit() {
-		if (!hasAnyChanges()) {
+		if (!hasAnyChanges) {
 			toast.info('没有状态变更需要提交');
 			return;
 		}
@@ -231,14 +236,14 @@
 			<Button
 				variant="outline"
 				onclick={resetAllStatuses}
-				disabled={!hasAnyChanges()}
+				disabled={!hasAnyChanges}
 				class="flex-1 cursor-pointer"
 			>
 				重置所有状态
 			</Button>
 			<Button
 				onclick={handleSubmit}
-				disabled={loading || !hasAnyChanges()}
+				disabled={loading || !hasAnyChanges}
 				class="flex-1 cursor-pointer"
 			>
 				{loading ? '提交中...' : '提交更改'}