chore: 前端支持取消视频来源筛选（点击来源两次），调整 API TOKEN 填写位置 (#264)

web/src/lib/components/Header.svelte

@@ -0,0 +1,15 @@
+<script lang="ts">
+	import { Input } from '$lib/components/ui/input';
+	let apiToken: string = localStorage.getItem('auth_token') || '';
+	function updateToken() {
+		localStorage.setItem('auth_token', apiToken);
+	}
+</script>
+
+<header class="flex items-center justify-between bg-gray-100 p-4">
+	<h1 class="text-xl font-bold">bili-sync 管理页</h1>
+	<div>
+		<Input placeholder="API Token" bind:value={apiToken} on:change={updateToken} />
+	</div>
+</header>
+<slot />

web/src/routes/+page.svelte

@@ -5,6 +5,7 @@
 	import VideoItem from '$lib/components/VideoItem.svelte';
 	import { listVideos, getVideoSources } from '$lib/api';
 	import type { VideoInfo, VideoSourcesResponse } from '$lib/types';
+	import Header from '$lib/components/Header.svelte';
 
 	// API Token 管理
 	let apiToken: string = localStorage.getItem('auth_token') || '';
@@ -105,8 +106,13 @@
 
 	// 点击侧边栏项时更新 activeCategory 和全局选中模型 id
 	function selectModel(category: keyof VideoSourcesResponse, id: number) {
-		activeCategory = category;
+		// 如果当前已选中的模型和点击的一致，则取消筛选
+		if (selectedModel && selectedModel.category === category && selectedModel.id === id) {
+			selectedModel = null;
+		} else {
 			selectedModel = { category, id };
+		}
+		activeCategory = category;
 		currentPage = 0;
 		videoCollapseSignal = !videoCollapseSignal;
 		fetchVideos();
@@ -118,14 +124,11 @@
 	<title>bili-sync 管理页</title>
 </svelte:head>
 
-<div class="my-4">
+<Header>
-	<Input placeholder="API Token" bind:value={apiToken} on:change={updateToken} />
-</div>
-
 	<div class="flex">
 		<!-- 左侧侧边栏 -->
 		<aside class="w-1/4 border-r p-4">
-		<h2 class="mb-4 text-xl font-bold">视频列表模型</h2>
+			<h2 class="mb-4 text-xl font-bold">视频来源</h2>
 			{#each categories as cat}
 				<div class="mb-4">
 					<!-- 点击标题切换折叠状态 -->
@@ -179,3 +182,4 @@
 			</div>
 		</main>
 	</div>
+</Header>