From 264de2487e8641065ead6e45765cf9e3165ffdf7 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E1=B4=80=E1=B4=8D=E1=B4=9B=E1=B4=8F=E1=B4=80=E1=B4=87?=
 =?UTF-8?q?=CA=80?= <amtoaer@gmail.com>
Date: Mon, 12 Jan 2026 11:22:48 +0800
Subject: [PATCH] =?UTF-8?q?fix:=20=E4=BF=AE=E5=A4=8D=20svelte=20=E5=8D=87?=
 =?UTF-8?q?=E7=BA=A7=E5=90=8E=20status-editor=20=E6=8C=89=E9=92=AE?=
 =?UTF-8?q?=E6=97=A0=E6=B3=95=E7=82=B9=E5=87=BB=E7=9A=84=E9=97=AE=E9=A2=98?=
 =?UTF-8?q?=20(#603)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../components/filtered-status-editor.svelte  | 53 +++++++++------
 web/src/lib/components/status-editor.svelte   | 67 ++++++++++---------
 2 files changed, 67 insertions(+), 53 deletions(-)

diff --git a/web/src/lib/components/filtered-status-editor.svelte b/web/src/lib/components/filtered-status-editor.svelte
index 18aef8a..2b22dc5 100644
--- a/web/src/lib/components/filtered-status-editor.svelte
+++ b/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 ? '提交中...' : '提交更改'}
diff --git a/web/src/lib/components/status-editor.svelte b/web/src/lib/components/status-editor.svelte
index 0466b2b..3360008 100644
--- a/web/src/lib/components/status-editor.svelte
+++ b/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 ? '提交中...' : '提交更改'}