feat: 加入塑料前端 (#262)

2025-02-19 01:47:09 +08:00
parent 59305c0bb4
commit d3b4559b2d
37 changed files with 1830 additions and 0 deletions
--- a/web/src/app.css
+++ b/web/src/app.css
@@ -0,0 +1,61 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
+@layer base {
+    :root {
+        --background: 0 0% 100%;
+        --foreground: 240 10% 3.9%;
+        --card: 0 0% 100%;
+        --card-foreground: 240 10% 3.9%;
+        --popover: 0 0% 100%;
+        ;
+        --popover-foreground: 240 10% 3.9%;
+        --primary: 240 5.9% 10%;
+        --primary-foreground: 0 0% 98%;
+        --secondary: 240 4.8% 95.9%;
+        --secondary-foreground: 240 5.9% 10%;
+        --muted: 240 4.8% 95.9%;
+        --muted-foreground: 240 3.8% 46.1%;
+        --accent: 240 4.8% 95.9%;
+        --accent-foreground: 240 5.9% 10%;
+        --destructive: 0 72.22% 50.59%;
+        --destructive-foreground: 0 0% 98%;
+        --border: 240 5.9% 90%;
+        --input: 240 5.9% 90%;
+        --ring: 240 5.9% 10%;
+        --radius: 0.5rem;
+    }
+
+    .dark {
+        --background: 240 10% 3.9%;
+        --foreground: 0 0% 98%;
+        --card: 240 10% 3.9%;
+        --card-foreground: 0 0% 98%;
+        --popover: 240 10% 3.9%;
+        --popover-foreground: 0 0% 98%;
+        --primary: 0 0% 98%;
+        --primary-foreground: 240 5.9% 10%;
+        --secondary: 240 3.7% 15.9%;
+        --secondary-foreground: 0 0% 98%;
+        --muted: 240 3.7% 15.9%;
+        --muted-foreground: 240 5% 64.9%;
+        --accent: 240 3.7% 15.9%;
+        --accent-foreground: 0 0% 98%;
+        --destructive: 0 62.8% 30.6%;
+        --destructive-foreground: 0 0% 98%;
+        --border: 240 3.7% 15.9%;
+        --input: 240 3.7% 15.9%;
+        --ring: 240 4.9% 83.9%;
+    }
+}
+
+@layer base {
+    * {
+        @apply border-border;
+    }
+
+    body {
+        @apply bg-background text-foreground;
+    }
+}
--- a/web/src/app.d.ts
+++ b/web/src/app.d.ts
@@ -0,0 +1,13 @@
+// See https://svelte.dev/docs/kit/types#app.d.ts
+// for information about these interfaces
+declare global {
+	namespace App {
+		// interface Error {}
+		// interface Locals {}
+		// interface PageData {}
+		// interface PageState {}
+		// interface Platform {}
+	}
+}
+
+export {};
--- a/web/src/app.html
+++ b/web/src/app.html
@@ -0,0 +1,12 @@
+<!doctype html>
+<html lang="en">
+	<head>
+		<meta charset="utf-8" />
+		<link rel="icon" href="%sveltekit.assets%/favicon.png" />
+		<meta name="viewport" content="width=device-width, initial-scale=1" />
+		%sveltekit.head%
+	</head>
+	<body data-sveltekit-preload-data="hover">
+		<div style="display: contents">%sveltekit.body%</div>
+	</body>
+</html>
--- a/web/src/lib/api.ts
+++ b/web/src/lib/api.ts
@@ -0,0 +1,56 @@
+import type { VideoResponse, VideoInfo, VideosResponse, VideoSourcesResponse, ResetVideoResponse } from './types';
+
+const BASE_URL = '/api';
+
+export class ApiError extends Error {
+    constructor(message: string) {
+        super(message);
+        this.name = 'ApiError';
+    }
+}
+
+async function fetchWithAuth(url: string, options: RequestInit = {}) {
+    const token = localStorage.getItem('auth_token');
+    const headers = {
+        ...options.headers,
+        'Authorization': token || ''
+    };
+
+    const response = await fetch(url, { ...options, headers });
+    if (!response.ok) {
+        throw new ApiError(`API request failed: ${response.statusText}, body: ${await response.text()}`);
+    }
+    let { data } = await response.json();
+    return data;
+}
+
+export async function getVideoSources(): Promise<VideoSourcesResponse> {
+    return fetchWithAuth(`${BASE_URL}/video-sources`);
+}
+
+export async function listVideos(params: {
+    collection?: string;
+    favorite?: string;
+    submission?: string;
+    watch_later?: string;
+    query?: string;
+    page?: number;
+    page_size?: number;
+}): Promise<VideosResponse> {
+    const searchParams = new URLSearchParams();
+    Object.entries(params).forEach(([key, value]) => {
+        if (value !== undefined) {
+            searchParams.append(key, value.toString());
+        }
+    });
+    return fetchWithAuth(`${BASE_URL}/videos?${searchParams.toString()}`);
+}
+
+
+export async function getVideo(id: number): Promise<VideoResponse> {
+    return fetchWithAuth(`${BASE_URL}/videos/${id}`);
+}
+
+export async function resetVideo(id: number): Promise<ResetVideoResponse> {
+    return fetchWithAuth(`${BASE_URL}/videos/${id}/reset`, { method: 'POST' });
+}
--- a/web/src/lib/components/VideoItem.svelte
+++ b/web/src/lib/components/VideoItem.svelte
@@ -0,0 +1,119 @@
+<script lang="ts">
+	import { onMount } from 'svelte';
+	import { Button } from '$lib/components/ui/button';
+	import { Badge } from '$lib/components/ui/badge';
+	import { getVideo, resetVideo } from '$lib/api';
+	import { toast } from 'svelte-sonner';
+	import type { VideoResponse, VideoInfo, ResetVideoResponse } from '$lib/types';
+
+	export let video: VideoInfo;
+	export let collapseSignal: boolean = false;
+
+	let showDetail = false;
+	let detail: VideoResponse | null = null;
+	let loading = false;
+
+	// 定义视频和页面各状态的名称映射
+	const videoStatusLabels = ['视频封面', '视频信息', 'Up 主头像', 'Up 主信息', '分 P 下载'];
+	const pageStatusLabels = ['视频封面', '视频内容', '视频信息', '视频弹幕', '视频字幕'];
+
+	let prevCollapseSignal = collapseSignal;
+	$: if (collapseSignal !== prevCollapseSignal) {
+		showDetail = false;
+		prevCollapseSignal = collapseSignal;
+	}
+
+	function getVariant(status: number): 'warning' | 'success' | 'destructive' {
+		if (status === 0) return 'warning';
+		if (status === 7) return 'success';
+		return 'destructive';
+	}
+
+	async function toggleDetail() {
+		showDetail = !showDetail;
+		if (showDetail && (!detail || detail.video.id !== video.id)) {
+			loading = true;
+			detail = await getVideo(video.id);
+			loading = false;
+		}
+	}
+
+	// 修改重置函数：调用 resetVideo 后重新获取视频详情
+	async function resetVideoItem() {
+		loading = true;
+		try {
+			const res: ResetVideoResponse = await resetVideo(video.id);
+			// 重置后重新加载视频详情，并更新视频信息
+			const newDetail = await getVideo(video.id);
+			detail = newDetail;
+			video = newDetail.video;
+			// 根据返回的 resetted 显示提示
+			if (res.resetted) {
+				toast.success('重置成功', {
+					description: `已重置视频与视频的 ${res.pages.length} 条 page.`
+				});
+			} else {
+				toast.info('重置无效', {
+					description: '所有任务均成功，无需重置'
+				});
+			}
+		} catch (error) {
+			console.error(error);
+			toast.error('重置失败', { description: `错误信息：${error}` });
+		}
+		loading = false;
+	}
+</script>
+
+<div class="my-2 rounded border p-4">
+	<div class="flex items-center justify-between">
+		<div>
+			<h3>{video.name}</h3>
+			<div class="flex space-x-1">
+				{#each video.download_status as status, i}
+					<Badge variant={getVariant(status)}>
+						{videoStatusLabels[i]}: {status === 0
+							? '未开始'
+							: status === 7
+								? '已完成'
+								: `失败 ${status} 次`}
+					</Badge>
+				{/each}
+			</div>
+			<p class="text-sm text-gray-500">{video.upper_name}</p>
+		</div>
+		<div class="flex space-x-2">
+			<Button onclick={toggleDetail}>
+				{showDetail ? '收起' : '展开'}
+			</Button>
+			<Button onclick={resetVideoItem}>重置</Button>
+		</div>
+	</div>
+	{#if showDetail}
+		{#if loading}
+			<p>加载详情...</p>
+		{:else if detail}
+			<div class="mt-2">
+				<h4 class="font-semibold">视频详情</h4>
+				<div>
+					{#each detail.pages as page}
+						<div class="border-t py-1">
+							<p>ID: {page.id} - 名称: {page.name}</p>
+							<div class="flex space-x-1">
+								{#each page.download_status as status, i}
+									<Badge variant={getVariant(status)}>
+										{pageStatusLabels[i]}: {status === 0
+											? '未开始'
+											: status === 7
+												? '已完成'
+												: `失败 ${status} 次`}
+									</Badge>
+								{/each}
+							</div>
+						</div>
+					{/each}
+				</div>
+			</div>
+		{/if}
+	{/if}
+</div>
--- a/web/src/lib/components/ui/badge/badge.svelte
+++ b/web/src/lib/components/ui/badge/badge.svelte
@@ -0,0 +1,18 @@
+<script lang="ts">
+	import { type Variant, badgeVariants } from "./index.js";
+	import { cn } from "$lib/utils.js";
+
+	let className: string | undefined | null = undefined;
+	export let href: string | undefined = undefined;
+	export let variant: Variant = "default";
+	export { className as class };
+</script>
+
+<svelte:element
+	this={href ? "a" : "span"}
+	{href}
+	class={cn(badgeVariants({ variant, className }))}
+	{...$$restProps}
+>
+	<slot />
+</svelte:element>
--- a/web/src/lib/components/ui/badge/index.ts
+++ b/web/src/lib/components/ui/badge/index.ts
@@ -0,0 +1,23 @@
+import { type VariantProps, tv } from "tailwind-variants";
+export { default as Badge } from "./badge.svelte";
+
+export const badgeVariants = tv({
+	base: "focus:ring-ring inline-flex select-none items-center rounded-full border px-2.5 py-0.5 text-xs font-semibold transition-colors focus:outline-none focus:ring-2 focus:ring-offset-2",
+	variants: {
+		variant: {
+			default: "bg-primary text-primary-foreground hover:bg-primary/80 border-transparent",
+			secondary:
+				"bg-secondary text-secondary-foreground hover:bg-secondary/80 border-transparent",
+			destructive:
+				"bg-destructive text-destructive-foreground hover:bg-destructive/80 border-transparent",
+			success: 'border-transparent bg-green-500 text-success-foreground',
+			warning: 'border-transparent bg-yellow-500 text-warning-foreground',
+			outline: "text-foreground",
+		},
+	},
+	defaultVariants: {
+		variant: "default",
+	},
+});
+
+export type Variant = VariantProps<typeof badgeVariants>["variant"];
--- a/web/src/lib/components/ui/button/button.svelte
+++ b/web/src/lib/components/ui/button/button.svelte
@@ -0,0 +1,74 @@
+<script lang="ts" module>
+	import type { WithElementRef } from "bits-ui";
+	import type { HTMLAnchorAttributes, HTMLButtonAttributes } from "svelte/elements";
+	import { type VariantProps, tv } from "tailwind-variants";
+
+	export const buttonVariants = tv({
+		base: "ring-offset-background focus-visible:ring-ring inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0",
+		variants: {
+			variant: {
+				default: "bg-primary text-primary-foreground hover:bg-primary/90",
+				destructive: "bg-destructive text-destructive-foreground hover:bg-destructive/90",
+				outline:
+					"border-input bg-background hover:bg-accent hover:text-accent-foreground border",
+				secondary: "bg-secondary text-secondary-foreground hover:bg-secondary/80",
+				ghost: "hover:bg-accent hover:text-accent-foreground",
+				link: "text-primary underline-offset-4 hover:underline",
+			},
+			size: {
+				default: "h-10 px-4 py-2",
+				sm: "h-9 rounded-md px-3",
+				lg: "h-11 rounded-md px-8",
+				icon: "h-10 w-10",
+			},
+		},
+		defaultVariants: {
+			variant: "default",
+			size: "default",
+		},
+	});
+
+	export type ButtonVariant = VariantProps<typeof buttonVariants>["variant"];
+	export type ButtonSize = VariantProps<typeof buttonVariants>["size"];
+
+	export type ButtonProps = WithElementRef<HTMLButtonAttributes> &
+		WithElementRef<HTMLAnchorAttributes> & {
+			variant?: ButtonVariant;
+			size?: ButtonSize;
+		};
+</script>
+
+<script lang="ts">
+	import { cn } from "$lib/utils.js";
+
+	let {
+		class: className,
+		variant = "default",
+		size = "default",
+		ref = $bindable(null),
+		href = undefined,
+		type = "button",
+		children,
+		...restProps
+	}: ButtonProps = $props();
+</script>
+
+{#if href}
+	<a
+		bind:this={ref}
+		class={cn(buttonVariants({ variant, size }), className)}
+		{href}
+		{...restProps}
+	>
+		{@render children?.()}
+	</a>
+{:else}
+	<button
+		bind:this={ref}
+		class={cn(buttonVariants({ variant, size }), className)}
+		{type}
+		{...restProps}
+	>
+		{@render children?.()}
+	</button>
+{/if}
--- a/web/src/lib/components/ui/button/index.ts
+++ b/web/src/lib/components/ui/button/index.ts
@@ -0,0 +1,17 @@
+import Root, {
+	type ButtonProps,
+	type ButtonSize,
+	type ButtonVariant,
+	buttonVariants,
+} from "./button.svelte";
+
+export {
+	Root,
+	type ButtonProps as Props,
+	//
+	Root as Button,
+	buttonVariants,
+	type ButtonProps,
+	type ButtonSize,
+	type ButtonVariant,
+};
--- a/web/src/lib/components/ui/input/index.ts
+++ b/web/src/lib/components/ui/input/index.ts
@@ -0,0 +1,29 @@
+import Root from "./input.svelte";
+
+export type FormInputEvent<T extends Event = Event> = T & {
+	currentTarget: EventTarget & HTMLInputElement;
+};
+export type InputEvents = {
+	blur: FormInputEvent<FocusEvent>;
+	change: FormInputEvent<Event>;
+	click: FormInputEvent<MouseEvent>;
+	focus: FormInputEvent<FocusEvent>;
+	focusin: FormInputEvent<FocusEvent>;
+	focusout: FormInputEvent<FocusEvent>;
+	keydown: FormInputEvent<KeyboardEvent>;
+	keypress: FormInputEvent<KeyboardEvent>;
+	keyup: FormInputEvent<KeyboardEvent>;
+	mouseover: FormInputEvent<MouseEvent>;
+	mouseenter: FormInputEvent<MouseEvent>;
+	mouseleave: FormInputEvent<MouseEvent>;
+	mousemove: FormInputEvent<MouseEvent>;
+	paste: FormInputEvent<ClipboardEvent>;
+	input: FormInputEvent<InputEvent>;
+	wheel: FormInputEvent<WheelEvent>;
+};
+
+export {
+	Root,
+	//
+	Root as Input,
+};
--- a/web/src/lib/components/ui/input/input.svelte
+++ b/web/src/lib/components/ui/input/input.svelte
@@ -0,0 +1,42 @@
+<script lang="ts">
+	import type { HTMLInputAttributes } from "svelte/elements";
+	import type { InputEvents } from "./index.js";
+	import { cn } from "$lib/utils.js";
+
+	type $$Props = HTMLInputAttributes;
+	type $$Events = InputEvents;
+
+	let className: $$Props["class"] = undefined;
+	export let value: $$Props["value"] = undefined;
+	export { className as class };
+
+	// Workaround for https://github.com/sveltejs/svelte/issues/9305
+	// Fixed in Svelte 5, but not backported to 4.x.
+	export let readonly: $$Props["readonly"] = undefined;
+</script>
+
+<input
+	class={cn(
+		"border-input bg-background ring-offset-background placeholder:text-muted-foreground focus-visible:ring-ring flex h-10 w-full rounded-md border px-3 py-2 text-sm file:border-0 file:bg-transparent file:text-sm file:font-medium focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50",
+		className
+	)}
+	bind:value
+	{readonly}
+	on:blur
+	on:change
+	on:click
+	on:focus
+	on:focusin
+	on:focusout
+	on:keydown
+	on:keypress
+	on:keyup
+	on:mouseover
+	on:mouseenter
+	on:mouseleave
+	on:mousemove
+	on:paste
+	on:input
+	on:wheel|passive
+	{...$$restProps}
+/>
--- a/web/src/lib/components/ui/sonner/index.ts
+++ b/web/src/lib/components/ui/sonner/index.ts
@@ -0,0 +1 @@
+export { default as Toaster } from "./sonner.svelte";
--- a/web/src/lib/components/ui/sonner/sonner.svelte
+++ b/web/src/lib/components/ui/sonner/sonner.svelte
@@ -0,0 +1,20 @@
+<script lang="ts">
+	import { Toaster as Sonner, type ToasterProps as SonnerProps } from "svelte-sonner";
+	import { mode } from "mode-watcher";
+
+	type $$Props = SonnerProps;
+</script>
+
+<Sonner
+	theme={$mode}
+	class="toaster group"
+	toastOptions={{
+		classes: {
+			toast: "group toast group-[.toaster]:bg-background group-[.toaster]:text-foreground group-[.toaster]:border-border group-[.toaster]:shadow-lg",
+			description: "group-[.toast]:text-muted-foreground",
+			actionButton: "group-[.toast]:bg-primary group-[.toast]:text-primary-foreground",
+			cancelButton: "group-[.toast]:bg-muted group-[.toast]:text-muted-foreground",
+		},
+	}}
+	{...$$restProps}
+/>
--- a/web/src/lib/components/ui/tabs/index.ts
+++ b/web/src/lib/components/ui/tabs/index.ts
@@ -0,0 +1,18 @@
+import { Tabs as TabsPrimitive } from "bits-ui";
+import Content from "./tabs-content.svelte";
+import List from "./tabs-list.svelte";
+import Trigger from "./tabs-trigger.svelte";
+
+const Root = TabsPrimitive.Root;
+
+export {
+	Root,
+	Content,
+	List,
+	Trigger,
+	//
+	Root as Tabs,
+	Content as TabsContent,
+	List as TabsList,
+	Trigger as TabsTrigger,
+};
--- a/web/src/lib/components/ui/tabs/tabs-content.svelte
+++ b/web/src/lib/components/ui/tabs/tabs-content.svelte
@@ -0,0 +1,21 @@
+<script lang="ts">
+	import { Tabs as TabsPrimitive } from "bits-ui";
+	import { cn } from "$lib/utils.js";
+
+	type $$Props = TabsPrimitive.ContentProps;
+
+	let className: $$Props["class"] = undefined;
+	export let value: $$Props["value"];
+	export { className as class };
+</script>
+
+<TabsPrimitive.Content
+	class={cn(
+		"ring-offset-background focus-visible:ring-ring mt-2 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2",
+		className
+	)}
+	{value}
+	{...$$restProps}
+>
+	<slot />
+</TabsPrimitive.Content>
--- a/web/src/lib/components/ui/tabs/tabs-list.svelte
+++ b/web/src/lib/components/ui/tabs/tabs-list.svelte
@@ -0,0 +1,19 @@
+<script lang="ts">
+	import { Tabs as TabsPrimitive } from "bits-ui";
+	import { cn } from "$lib/utils.js";
+
+	type $$Props = TabsPrimitive.ListProps;
+
+	let className: $$Props["class"] = undefined;
+	export { className as class };
+</script>
+
+<TabsPrimitive.List
+	class={cn(
+		"bg-muted text-muted-foreground inline-flex h-10 items-center justify-center rounded-md p-1",
+		className
+	)}
+	{...$$restProps}
+>
+	<slot />
+</TabsPrimitive.List>
--- a/web/src/lib/components/ui/tabs/tabs-trigger.svelte
+++ b/web/src/lib/components/ui/tabs/tabs-trigger.svelte
@@ -0,0 +1,23 @@
+<script lang="ts">
+	import { Tabs as TabsPrimitive } from "bits-ui";
+	import { cn } from "$lib/utils.js";
+
+	type $$Props = TabsPrimitive.TriggerProps;
+	type $$Events = TabsPrimitive.TriggerEvents;
+
+	let className: $$Props["class"] = undefined;
+	export let value: $$Props["value"];
+	export { className as class };
+</script>
+
+<TabsPrimitive.Trigger
+	class={cn(
+		"ring-offset-background focus-visible:ring-ring data-[state=active]:bg-background data-[state=active]:text-foreground inline-flex items-center justify-center whitespace-nowrap rounded-sm px-3 py-1.5 text-sm font-medium transition-all focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 data-[state=active]:shadow-sm",
+		className
+	)}
+	{value}
+	{...$$restProps}
+	on:click
+>
+	<slot />
+</TabsPrimitive.Trigger>
--- a/web/src/lib/types.ts
+++ b/web/src/lib/types.ts
@@ -0,0 +1,43 @@
+export interface VideoSource {
+    id: number;
+    name: string;
+}
+
+export interface VideoSourcesResponse {
+    collection: VideoSource[];
+    favorite: VideoSource[];
+    submission: VideoSource[];
+    watch_later: VideoSource[];
+}
+
+export interface VideoInfo {
+    id: number;
+    name: string;
+    upper_name: string;
+    download_status: number[];
+}
+
+export interface VideosResponse {
+    videos: VideoInfo[];
+    total_count: number;
+}
+
+export interface PageInfo {
+    id: number;
+    pid: number;
+    name: string;
+    download_status: number[];
+}
+
+export interface VideoResponse {
+    video: VideoInfo;
+    pages: PageInfo[];
+}
+
+export interface ResetVideoResponse {
+    resetted: boolean;
+    video: number;
+    pages: number[];
+}
+
+export type VideoCategory = 'collection' | 'favorite' | 'submission' | 'watch_later';
--- a/web/src/lib/utils.ts
+++ b/web/src/lib/utils.ts
@@ -0,0 +1,6 @@
+import { type ClassValue, clsx } from "clsx";
+import { twMerge } from "tailwind-merge";
+
+export function cn(...inputs: ClassValue[]) {
+	return twMerge(clsx(inputs));
+}
--- a/web/src/routes/+layout.svelte
+++ b/web/src/routes/+layout.svelte
@@ -0,0 +1,9 @@
+<script lang="ts">
+	import '../app.css';
+	import { Toaster } from '$lib/components/ui/sonner';
+	let { children } = $props();
+</script>
+
+<Toaster />
+
+{@render children()}
--- a/web/src/routes/+layout.ts
+++ b/web/src/routes/+layout.ts
@@ -0,0 +1,2 @@
+export const ssr = false;
+export const prerender = true;
--- a/web/src/routes/+page.svelte
+++ b/web/src/routes/+page.svelte
@@ -0,0 +1,181 @@
+<script lang="ts">
+	import { onMount } from 'svelte';
+	import { Input } from '$lib/components/ui/input';
+	import { Button } from '$lib/components/ui/button';
+	import VideoItem from '$lib/components/VideoItem.svelte';
+	import { listVideos, getVideoSources } from '$lib/api';
+	import type { VideoInfo, VideoSourcesResponse } from '$lib/types';
+
+	// API Token 管理
+	let apiToken: string = localStorage.getItem('auth_token') || '';
+	function updateToken() {
+		localStorage.setItem('auth_token', apiToken);
+	}
+
+	// 定义分类列表
+	const categories: (keyof VideoSourcesResponse)[] = [
+		'collection',
+		'favorite',
+		'submission',
+		'watch_later'
+	];
+	let activeCategory: keyof VideoSourcesResponse = 'collection';
+	let searchQuery = '';
+	let videos: VideoInfo[] = [];
+	let total = 0;
+	let currentPage = 0;
+	const pageSize = 10;
+
+	// 视频列表模型及全局选中模型（只全局允许选中一个）
+	let videoListModels: VideoSourcesResponse = {
+		collection: [],
+		favorite: [],
+		submission: [],
+		watch_later: []
+	};
+	// 移除 per 分类选中，新增全局 selectedModel
+	let selectedModel: { category: keyof VideoSourcesResponse; id: number } | null = null;
+	// 控制侧边栏各分类的折叠状态，true 为折叠
+	let collapse: { [key in keyof VideoSourcesResponse]?: boolean } = {
+		collection: false,
+		favorite: false,
+		submission: false,
+		watch_later: false
+	};
+
+	// 新增：定义 collapse 信号，用于让每个 VideoItem 收起详情
+	let videoCollapseSignal = false;
+
+	// 加载视频列表模型
+	async function fetchVideoListModels() {
+		videoListModels = await getVideoSources();
+		// 默认选中第一个有数据的模型
+		for (const key of categories) {
+			if (videoListModels[key]?.length) {
+				selectedModel = { category: key, id: videoListModels[key][0].id };
+				break;
+			}
+		}
+		// 默认使用 activeCategory 对应的选中 id 加载视频
+		fetchVideos();
+	}
+
+	// 加载视频列表，根据当前 activeCategory 对应的 selectedModel 发起请求
+	async function fetchVideos() {
+		const params: any = {};
+		if (selectedModel && selectedModel.category === activeCategory) {
+			params[`${activeCategory}`] = selectedModel.id.toString();
+		}
+		if (searchQuery) params.query = searchQuery;
+		params.page_size = pageSize;
+		params.page = currentPage;
+		const listRes = await listVideos(params);
+		videos = listRes.videos;
+		total = listRes.total_count;
+	}
+
+	onMount(fetchVideoListModels);
+
+	$: activeCategory, currentPage, searchQuery, fetchVideos();
+
+	function onSearch() {
+		currentPage = 0;
+		fetchVideos();
+	}
+
+	function prevPage() {
+		if (currentPage > 0) {
+			currentPage -= 1;
+			videoCollapseSignal = !videoCollapseSignal;
+			fetchVideos();
+			// 平滑滚动到顶部
+			window.scrollTo({ top: 0, behavior: 'smooth' });
+		}
+	}
+
+	function nextPage() {
+		if ((currentPage + 1) * pageSize < total) {
+			currentPage += 1;
+			videoCollapseSignal = !videoCollapseSignal;
+			fetchVideos();
+			// 平滑滚动到顶部
+			window.scrollTo({ top: 0, behavior: 'smooth' });
+		}
+	}
+
+	// 点击侧边栏项时更新 activeCategory 和全局选中模型 id
+	function selectModel(category: keyof VideoSourcesResponse, id: number) {
+		activeCategory = category;
+		selectedModel = { category, id };
+		currentPage = 0;
+		videoCollapseSignal = !videoCollapseSignal;
+		fetchVideos();
+		window.scrollTo({ top: 0, behavior: 'smooth' });
+	}
+</script>
+
+<svelte:head>
+	<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>
+					{/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} />
+			{/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>
				`@@ -0,0 +1 @@`
				`export { default as Toaster } from "./sonner.svelte";`