From bc277783667d5c21811f3435e22280ab4e959c64 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: Wed, 19 Feb 2025 02:18:20 +0800
Subject: [PATCH] =?UTF-8?q?chore:=20=E5=89=8D=E7=AB=AF=E6=94=AF=E6=8C=81?=
 =?UTF-8?q?=E5=8F=96=E6=B6=88=E8=A7=86=E9=A2=91=E6=9D=A5=E6=BA=90=E7=AD=9B?=
 =?UTF-8?q?=E9=80=89=EF=BC=88=E7=82=B9=E5=87=BB=E6=9D=A5=E6=BA=90=E4=B8=A4?=
 =?UTF-8?q?=E6=AC=A1=EF=BC=89=EF=BC=8C=E8=B0=83=E6=95=B4=20API=20TOKEN=20?=
 =?UTF-8?q?=E5=A1=AB=E5=86=99=E4=BD=8D=E7=BD=AE=20(#264)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 web/src/lib/components/Header.svelte |  15 ++++
 web/src/routes/+page.svelte          | 124 ++++++++++++++-------------
 2 files changed, 79 insertions(+), 60 deletions(-)
 create mode 100644 web/src/lib/components/Header.svelte

diff --git a/web/src/lib/components/Header.svelte b/web/src/lib/components/Header.svelte
new file mode 100644
index 0000000..76c2371
--- /dev/null
+++ b/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 />
diff --git a/web/src/routes/+page.svelte b/web/src/routes/+page.svelte
index 9192e64..ab3b008 100644
--- a/web/src/routes/+page.svelte
+++ b/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) {
+		// 如果当前已选中的模型和点击的一致，则取消筛选
+		if (selectedModel && selectedModel.category === category && selectedModel.id === id) {
+			selectedModel = null;
+		} else {
+			selectedModel = { category, id };
+		}
 		activeCategory = category;
-		selectedModel = { category, id };
 		currentPage = 0;
 		videoCollapseSignal = !videoCollapseSignal;
 		fetchVideos();
@@ -118,64 +124,62 @@
 	<title>bili-sync 管理页</title>
 </svelte:head>
 
-<div class="my-4">
-	<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>
-		{#each categories as cat}
-			<div class="mb-4">
-				<!-- 点击标题切换折叠状态 -->
-				<button
-					class="w-full text-left font-semibold"
-					on:click={() => (collapse[cat] = !collapse[cat])}
-				>
-					{cat}
-					{collapse[cat] ? '▶' : '▼'}
-				</button>
-				{#if !collapse[cat]}
-					{#if videoListModels[cat]?.length}
-						<ul class="ml-4">
-							{#each videoListModels[cat] as model}
-								<li class="mb-1">
-									<button
-										class="w-full rounded px-2 py-1 text-left hover:bg-gray-100 {selectedModel &&
-										selectedModel.category === cat &&
-										selectedModel.id === model.id
-											? 'bg-gray-200'
-											: ''}"
-										on:click={() => selectModel(cat, model.id)}
-									>
-										{model.name}
-									</button>
-								</li>
-							{/each}
-						</ul>
-					{:else}
-						<p class="ml-4 text-gray-500">无数据</p>
+<Header>
+	<div class="flex">
+		<!-- 左侧侧边栏 -->
+		<aside class="w-1/4 border-r p-4">
+			<h2 class="mb-4 text-xl font-bold">视频来源</h2>
+			{#each categories as cat}
+				<div class="mb-4">
+					<!-- 点击标题切换折叠状态 -->
+					<button
+						class="w-full text-left font-semibold"
+						on:click={() => (collapse[cat] = !collapse[cat])}
+					>
+						{cat}
+						{collapse[cat] ? '▶' : '▼'}
+					</button>
+					{#if !collapse[cat]}
+						{#if videoListModels[cat]?.length}
+							<ul class="ml-4">
+								{#each videoListModels[cat] as model}
+									<li class="mb-1">
+										<button
+											class="w-full rounded px-2 py-1 text-left hover:bg-gray-100 {selectedModel &&
+											selectedModel.category === cat &&
+											selectedModel.id === model.id
+												? 'bg-gray-200'
+												: ''}"
+											on:click={() => selectModel(cat, model.id)}
+										>
+											{model.name}
+										</button>
+									</li>
+								{/each}
+							</ul>
+						{:else}
+							<p class="ml-4 text-gray-500">无数据</p>
+						{/if}
 					{/if}
-				{/if}
-			</div>
-		{/each}
-	</aside>
-
-	<!-- 主内容区域 -->
-	<main class="flex-1 p-4">
-		<div class="mb-4">
-			<Input placeholder="搜索视频..." bind:value={searchQuery} on:change={onSearch} />
-		</div>
-		<div>
-			{#each videos as video}
-				<VideoItem {video} collapseSignal={videoCollapseSignal} />
+				</div>
 			{/each}
-		</div>
-		<div class="mt-4 flex items-center justify-between">
-			<Button onclick={prevPage} disabled={currentPage === 0}>上一页</Button>
-			<span>第 {currentPage + 1} 页，共 {Math.ceil(total / pageSize)} 页</span>
-			<Button onclick={nextPage} disabled={(currentPage + 1) * pageSize >= total}>下一页</Button>
-		</div>
-	</main>
-</div>
+		</aside>
+
+		<!-- 主内容区域 -->
+		<main class="flex-1 p-4">
+			<div class="mb-4">
+				<Input placeholder="搜索视频..." bind:value={searchQuery} on:change={onSearch} />
+			</div>
+			<div>
+				{#each videos as video}
+					<VideoItem {video} collapseSignal={videoCollapseSignal} />
+				{/each}
+			</div>
+			<div class="mt-4 flex items-center justify-between">
+				<Button onclick={prevPage} disabled={currentPage === 0}>上一页</Button>
+				<span>第 {currentPage + 1} 页，共 {Math.ceil(total / pageSize)} 页</span>
+				<Button onclick={nextPage} disabled={(currentPage + 1) * pageSize >= total}>下一页</Button>
+			</div>
+		</main>
+	</div>
+</Header>