feat: 支持清除重置，方便分页视频刷新 (#596)

web/src/lib/api.ts

@@ -5,6 +5,7 @@ import type {
 	VideosResponse,
 	VideoResponse,
 	ResetVideoResponse,
+	ClearAndResetVideoResponse,
 	ResetFilteredVideosResponse,
 	UpdateVideoStatusRequest,
 	UpdateVideoStatusResponse,
@@ -165,6 +166,10 @@ class ApiClient {
 		return this.post<ResetVideoResponse>(`/videos/${id}/reset-status`, request);
 	}
 
+	async clearAndResetVideoStatus(id: number): Promise<ApiResponse<ClearAndResetVideoResponse>> {
+		return this.post<ClearAndResetVideoResponse>(`/videos/${id}/clear-and-reset-status`);
+	}
+
 	async resetFilteredVideoStatus(
 		request: ResetFilteredVideoStatusRequest
 	): Promise<ApiResponse<ResetFilteredVideosResponse>> {
@@ -297,6 +302,7 @@ const api = {
 	getVideo: (id: number) => apiClient.getVideo(id),
 	resetVideoStatus: (id: number, request: ResetVideoStatusRequest) =>
 		apiClient.resetVideoStatus(id, request),
+	clearAndResetVideoStatus: (id: number) => apiClient.clearAndResetVideoStatus(id),
 	resetFilteredVideoStatus: (request: ResetFilteredVideoStatusRequest) =>
 		apiClient.resetFilteredVideoStatus(request),
 	updateVideoStatus: (id: number, request: UpdateVideoStatusRequest) =>

web/src/lib/components/video-card.svelte

@@ -9,6 +9,7 @@
 	import type { VideoInfo } from '$lib/types';
 	import RotateCcwIcon from '@lucide/svelte/icons/rotate-ccw';
 	import InfoIcon from '@lucide/svelte/icons/info';
+	import BrushCleaningIcon from '@lucide/svelte/icons/brush-cleaning';
 	import UserIcon from '@lucide/svelte/icons/user';
 	import SquareArrowOutUpRightIcon from '@lucide/svelte/icons/square-arrow-out-up-right';
 	import MoreHorizontalIcon from '@lucide/svelte/icons/more-horizontal';
@@ -24,8 +25,11 @@
 	export let taskNames: string[] = []; // 自定义任务名称
 	export let showProgress: boolean = true; // 是否显示进度信息
 	export let onReset: ((forceReset: boolean) => Promise<void>) | null = null; // 自定义重置函数
+	export let onClearAndReset: (() => Promise<void>) | null = null; // 自定义清空重置函数
 	export let resetDialogOpen = false; // 导出对话框状态，让父组件可以控制
+	export let clearAndResetDialogOpen = false; // 导出清空重置对话框状态
 	export let resetting = false;
+	export let clearAndResetting = false;
 
 	let forceReset = false;
 
@@ -98,6 +102,15 @@
 		forceReset = false;
 	}
 
+	async function handleClearAndReset() {
+		clearAndResetting = true;
+		if (onClearAndReset) {
+			await onClearAndReset();
+		}
+		clearAndResetting = false;
+		clearAndResetDialogOpen = false;
+	}
+
 	function handleViewDetail() {
 		goto(`/video/${video.id}`);
 	}
@@ -112,7 +125,7 @@
 </script>
 
 <Card class={cardClasses}>
-	<CardHeader class="flex-shrink-0 pb-3">
+	<CardHeader class="shrink-0 pb-3">
 		<div class="flex min-w-0 items-start justify-between gap-3">
 			<CardTitle
 				class="line-clamp-2 min-w-0 flex-1 cursor-default {mode === 'default'
@@ -196,6 +209,17 @@
 							{/snippet}
 						</DropdownMenu.Trigger>
 						<DropdownMenu.Content align="start" class="w-48">
+							<DropdownMenu.Item class="cursor-pointer" onclick={() => (resetDialogOpen = true)}>
+								<RotateCcwIcon class="mr-2 h-4 w-4" />
+								重置
+							</DropdownMenu.Item>
+							<DropdownMenu.Item
+								class="cursor-pointer"
+								onclick={() => (clearAndResetDialogOpen = true)}
+							>
+								<BrushCleaningIcon class="mr-2 h-4 w-4" />
+								清空重置
+							</DropdownMenu.Item>
 							<DropdownMenu.Item
 								class="cursor-pointer"
 								onclick={() =>
@@ -204,10 +228,6 @@
 								<SquareArrowOutUpRightIcon class="mr-2 h-4 w-4" />
 								在 B 站打开
 							</DropdownMenu.Item>
-							<DropdownMenu.Item class="cursor-pointer" onclick={() => (resetDialogOpen = true)}>
-								<RotateCcwIcon class="mr-2 h-4 w-4" />
-								重置下载状态
-							</DropdownMenu.Item>
 						</DropdownMenu.Content>
 					</DropdownMenu.Root>
 				</div>
@@ -261,3 +281,38 @@
 		</AlertDialog.Footer>
 	</AlertDialog.Content>
 </AlertDialog.Root>
+
+<!-- 清空重置确认对话框 -->
+<AlertDialog.Root bind:open={clearAndResetDialogOpen}>
+	<AlertDialog.Content>
+		<AlertDialog.Header>
+			<AlertDialog.Title>清空重置视频</AlertDialog.Title>
+			<AlertDialog.Description>
+				确定要清空重置视频 <strong>"{displayTitle}"</strong> 吗？
+				<br />
+				<br />
+				此操作会：
+				<ul class="mt-2 ml-4 list-disc space-y-1">
+					<li>将视频状态重置为未开始</li>
+					<li>删除所有分页信息</li>
+					<li class="text-destructive font-medium">删除视频对应的文件夹</li>
+				</ul>
+				<br />
+				该功能可在多页视频变更后手动触发全量更新，执行后<span class="text-destructive font-medium"
+					>无法撤销</span
+				>。
+			</AlertDialog.Description>
+		</AlertDialog.Header>
+
+		<AlertDialog.Footer>
+			<AlertDialog.Cancel>取消</AlertDialog.Cancel>
+			<AlertDialog.Action
+				onclick={handleClearAndReset}
+				disabled={clearAndResetting}
+				class="bg-destructive hover:bg-destructive/90"
+			>
+				{clearAndResetting ? '清空重置中...' : '确认清空重置'}
+			</AlertDialog.Action>
+		</AlertDialog.Footer>
+	</AlertDialog.Content>
+</AlertDialog.Root>

web/src/lib/types.ts

@@ -57,6 +57,11 @@ export interface ResetVideoResponse {
 	pages: PageInfo[];
 }
 
+export interface ClearAndResetVideoResponse {
+	warning?: string;
+	video: VideoInfo;
+}
+
 export interface ResetFilteredVideosResponse {
 	resetted: boolean;
 	resetted_videos_count: number;

web/src/routes/video/[id]/+page.svelte

@@ -8,6 +8,7 @@
 	import type { ApiError, VideoResponse, UpdateVideoStatusRequest } from '$lib/types';
 	import RotateCcwIcon from '@lucide/svelte/icons/rotate-ccw';
 	import EditIcon from '@lucide/svelte/icons/edit';
+	import BrushCleaningIcon from '@lucide/svelte/icons/brush-cleaning';
 	import { setBreadcrumb } from '$lib/stores/breadcrumb';
 	import { appStateStore, ToQuery } from '$lib/stores/filter';
 	import VideoCard from '$lib/components/video-card.svelte';
@@ -19,6 +20,8 @@
 	let error: string | null = null;
 	let resetDialogOpen = false;
 	let resetting = false;
+	let clearAndResetDialogOpen = false;
+	let clearAndResetting = false;
 	let statusEditorOpen = false;
 	let statusEditorLoading = false;
 
@@ -87,6 +90,56 @@
 			statusEditorLoading = false;
 		}
 	}
+
+	async function handleReset(forceReset: boolean) {
+		if (!videoData) return;
+		try {
+			const result = await api.resetVideoStatus(videoData.video.id, { force: forceReset });
+			const data = result.data;
+			if (data.resetted) {
+				videoData = {
+					video: data.video,
+					pages: data.pages
+				};
+				toast.success('重置成功');
+			} else {
+				toast.info('重置无效', {
+					description: `视频「${data.video.name}」没有失败的状态，无需重置`
+				});
+			}
+		} catch (error) {
+			console.error('重置失败:', error);
+			toast.error('重置失败', {
+				description: (error as ApiError).message
+			});
+		}
+	}
+
+	async function handleClearAndReset() {
+		if (!videoData) return;
+		try {
+			const result = await api.clearAndResetVideoStatus(videoData.video.id);
+			const data = result.data;
+			videoData = {
+				video: data.video,
+				pages: []
+			};
+			if (data.warning) {
+				toast.warning('清空重置成功', {
+					description: data.warning
+				});
+			} else {
+				toast.success('清空重置成功', {
+					description: `视频「${data.video.name}」已清空重置`
+				});
+			}
+		} catch (error) {
+			console.error('清空重置失败：', error);
+			toast.error('清空重置失败', {
+				description: (error as ApiError).message
+			});
+		}
+	}
 </script>
 
 <svelte:head>
@@ -130,11 +183,21 @@
 					variant="outline"
 					class="shrink-0 cursor-pointer "
 					onclick={() => (resetDialogOpen = true)}
-					disabled={resetting}
+					disabled={resetting || clearAndResetting}
 				>
 					<RotateCcwIcon class="mr-2 h-4 w-4 {resetting ? 'animate-spin' : ''}" />
 					重置
 				</Button>
+				<Button
+					size="sm"
+					variant="outline"
+					class="shrink-0 cursor-pointer "
+					onclick={() => (clearAndResetDialogOpen = true)}
+					disabled={resetting || clearAndResetting}
+				>
+					<BrushCleaningIcon class="mr-2 h-4 w-4 {clearAndResetting ? 'animate-spin' : ''}" />
+					清空重置
+				</Button>
 				<Button
 					size="sm"
 					variant="outline"
@@ -164,28 +227,10 @@
 				taskNames={['视频封面', '视频信息', 'UP 主头像', 'UP 主信息', '分页下载']}
 				bind:resetDialogOpen
 				bind:resetting
-				onReset={async (forceReset: boolean) => {
-					try {
-						const result = await api.resetVideoStatus(videoData!.video.id, { force: forceReset });
-						const data = result.data;
-						if (data.resetted) {
-							videoData = {
-								video: data.video,
-								pages: data.pages
-							};
-							toast.success('重置成功');
-						} else {
-							toast.info('重置无效', {
-								description: `视频「${data.video.name}」没有失败的状态，无需重置`
-							});
-						}
-					} catch (error) {
-						console.error('重置失败:', error);
-						toast.error('重置失败', {
-							description: (error as ApiError).message
-						});
-					}
-				}}
+				bind:clearAndResetDialogOpen
+				bind:clearAndResetting
+				onReset={handleReset}
+				onClearAndReset={handleClearAndReset}
 			/>
 		</div>
 	</section>
@@ -226,7 +271,6 @@
 			<div class="py-12 text-center">
 				<div class="space-y-2">
 					<p class="text-muted-foreground">暂无分 P 数据</p>
-					<p class="text-muted-foreground text-sm">该视频可能为单 P 视频</p>
 				</div>
 			</div>
 		{/if}

web/src/routes/videos/+page.svelte

@@ -131,6 +131,29 @@
 		}
 	}
 
+	async function handleClearAndResetVideo(id: number) {
+		try {
+			const result = await api.clearAndResetVideoStatus(id);
+			const data = result.data;
+			if (data.warning) {
+				toast.warning('清空重置成功', {
+					description: data.warning
+				});
+			} else {
+				toast.success('清空重置成功', {
+					description: `视频「${data.video.name}」已清空重置`
+				});
+			}
+			const { query, currentPage, videoSource } = $appStateStore;
+			await loadVideos(query, currentPage, videoSource);
+		} catch (error) {
+			console.error('清空重置失败：', error);
+			toast.error('清空重置失败', {
+				description: (error as ApiError).message
+			});
+		}
+	}
+
 	async function handleResetAllVideos() {
 		resettingAll = true;
 		try {
@@ -332,6 +355,9 @@
 				onReset={async (forceReset: boolean) => {
 					await handleResetVideo(video.id, forceReset);
 				}}
+				onClearAndReset={async () => {
+					await handleClearAndResetVideo(video.id);
+				}}
 			/>
 		{/each}
 	</div>