feat: 支持前端编辑、提交 Config (#370)

web/src/lib/api.ts

@@ -16,7 +16,8 @@ import type {
 	UpsertCollectionRequest,
 	UpsertSubmissionRequest,
 	VideoSourcesDetailsResponse,
-	UpdateVideoSourceRequest
+	UpdateVideoSourceRequest,
+	Config
 } from './types';
 
 // API 基础配置
@@ -49,43 +50,21 @@ class ApiClient {
 		}
 	}
 
-	// 通用请求方法
-	private async request<T>(endpoint: string, options: RequestInit = {}): Promise<ApiResponse<T>> {
-		const url = `${this.baseURL}${endpoint}`;
-
-		const config: RequestInit = {
-			headers: {
-				...this.defaultHeaders,
-				...options.headers
-			},
-			...options
-		};
-
-		try {
-			const response = await fetch(url, config);
-
-			if (!response.ok) {
-				throw new Error(`HTTP error! status: ${response.status}`);
-			}
-
-			const data: ApiResponse<T> = await response.json();
-			return data;
-		} catch (error) {
-			const apiError: ApiError = {
-				message: error instanceof Error ? error.message : 'Unknown error occurred',
-				status: error instanceof TypeError ? undefined : (error as { status?: number }).status
-			};
-			throw apiError;
-		}
+	// 清除认证 token
+	clearAuthToken() {
+		delete this.defaultHeaders['Authorization'];
+		localStorage.removeItem('authToken');
 	}
 
-	// GET 请求
-	private async get<T>(
-		endpoint: string,
-		params?: VideosRequest | Record<string, unknown>
+	// 通用请求方法
+	private async request<T>(
+		url: string,
+		method: string = 'GET',
+		body?: unknown,
+		params?: Record<string, unknown>
 	): Promise<ApiResponse<T>> {
-		let queryString = '';
-
+		// 构建完整的 URL
+		let fullUrl = `${this.baseURL}${url}`;
 		if (params) {
 			const searchParams = new URLSearchParams();
 			Object.entries(params).forEach(([key, value]) => {
@@ -93,83 +72,86 @@ class ApiClient {
 					searchParams.append(key, String(value));
 				}
 			});
-			queryString = searchParams.toString();
+			const queryString = searchParams.toString();
+			if (queryString) {
+				fullUrl += `?${queryString}`;
+			}
 		}
 
-		const finalEndpoint = queryString ? `${endpoint}?${queryString}` : endpoint;
-		return this.request<T>(finalEndpoint, {
-			method: 'GET'
-		});
+		const config: RequestInit = {
+			method,
+			headers: this.defaultHeaders
+		};
+
+		if (body && method !== 'GET') {
+			config.body = JSON.stringify(body);
+		}
+
+		try {
+			const response = await fetch(fullUrl, config);
+
+			if (!response.ok) {
+				const errorText = await response.text();
+				let errorMessage: string;
+				try {
+					const errorJson = JSON.parse(errorText);
+					errorMessage = errorJson.message || errorJson.error || '请求失败';
+				} catch {
+					errorMessage = errorText || `HTTP ${response.status}: ${response.statusText}`;
+				}
+				throw {
+					message: errorMessage,
+					status: response.status
+				} as ApiError;
+			}
+
+			return await response.json();
+		} catch (error) {
+			if (error && typeof error === 'object' && 'status' in error) {
+				throw error;
+			}
+			throw {
+				message: error instanceof Error ? error.message : '网络请求失败',
+				status: 0
+			} as ApiError;
+		}
+	}
+
+	// GET 请求
+	private async get<T>(url: string, params?: Record<string, unknown>): Promise<ApiResponse<T>> {
+		return this.request<T>(url, 'GET', undefined, params);
 	}
 
 	// POST 请求
-	private async post<T>(endpoint: string, data?: unknown): Promise<ApiResponse<T>> {
-		return this.request<T>(endpoint, {
-			method: 'POST',
-			body: data ? JSON.stringify(data) : undefined
-		});
+	private async post<T>(url: string, data?: unknown): Promise<ApiResponse<T>> {
+		return this.request<T>(url, 'POST', data);
 	}
 
 	// PUT 请求
-	private async put<T>(endpoint: string, data?: unknown): Promise<ApiResponse<T>> {
-		return this.request<T>(endpoint, {
-			method: 'PUT',
-			body: data ? JSON.stringify(data) : undefined
-		});
+	private async put<T>(url: string, data?: unknown): Promise<ApiResponse<T>> {
+		return this.request<T>(url, 'PUT', data);
 	}
 
-	// DELETE 请求
-	private async delete<T>(endpoint: string): Promise<ApiResponse<T>> {
-		return this.request<T>(endpoint, {
-			method: 'DELETE'
-		});
-	}
-
-	// API 方法
-
-	/**
-	 * 获取所有视频来源
-	 */
 	async getVideoSources(): Promise<ApiResponse<VideoSourcesResponse>> {
 		return this.get<VideoSourcesResponse>('/video-sources');
 	}
 
-	/**
-	 * 获取视频列表
-	 * @param params 查询参数
-	 */
 	async getVideos(params?: VideosRequest): Promise<ApiResponse<VideosResponse>> {
-		return this.get<VideosResponse>('/videos', params);
+		return this.get<VideosResponse>('/videos', params as Record<string, unknown>);
 	}
 
-	/**
-	 * 获取单个视频详情
-	 * @param id 视频 ID
-	 */
 	async getVideo(id: number): Promise<ApiResponse<VideoResponse>> {
 		return this.get<VideoResponse>(`/videos/${id}`);
 	}
 
-	/**
-	 * 重置视频下载状态
-	 * @param id 视频 ID
-	 */
 	async resetVideo(id: number): Promise<ApiResponse<ResetVideoResponse>> {
 		return this.post<ResetVideoResponse>(`/videos/${id}/reset`);
 	}
 
-	/**
-	 * 重置所有视频下载状态
-	 */
 	async resetAllVideos(): Promise<ApiResponse<ResetAllVideosResponse>> {
 		return this.post<ResetAllVideosResponse>('/videos/reset-all');
 	}
 
-	/**
-	 * 重置视频状态位
-	 * @param id 视频 ID
-	 * @param request 重置请求参数
-	 */
 	async updateVideoStatus(
 		id: number,
 		request: UpdateVideoStatusRequest
@@ -177,17 +159,10 @@ class ApiClient {
 		return this.post<UpdateVideoStatusResponse>(`/videos/${id}/update-status`, request);
 	}
 
-	/**
-	 * 获取我的收藏夹
-	 */
 	async getCreatedFavorites(): Promise<ApiResponse<FavoritesResponse>> {
 		return this.get<FavoritesResponse>('/me/favorites');
 	}
 
-	/**
-	 * 获取关注的合集
-	 * @param page 页码
-	 */
 	async getFollowedCollections(
 		pageNum?: number,
 		pageSize?: number
@@ -196,13 +171,9 @@ class ApiClient {
 			page_num: pageNum,
 			page_size: pageSize
 		};
-		return this.get<CollectionsResponse>('/me/collections', params);
+		return this.get<CollectionsResponse>('/me/collections', params as Record<string, unknown>);
 	}
 
-	/**
-	 * 获取关注的UP主
-	 * @param page 页码
-	 */
 	async getFollowedUppers(
 		pageNum?: number,
 		pageSize?: number
@@ -211,46 +182,25 @@ class ApiClient {
 			page_num: pageNum,
 			page_size: pageSize
 		};
-		return this.get<UppersResponse>('/me/uppers', params);
+		return this.get<UppersResponse>('/me/uppers', params as Record<string, unknown>);
 	}
 
-	/**
-	 * 订阅收藏夹
-	 * @param request 订阅请求参数
-	 */
 	async upsertFavorite(request: UpsertFavoriteRequest): Promise<ApiResponse<boolean>> {
 		return this.post<boolean>('/video-sources/favorites', request);
 	}
 
-	/**
-	 * 订阅合集
-	 * @param request 订阅请求参数
-	 */
 	async upsertCollection(request: UpsertCollectionRequest): Promise<ApiResponse<boolean>> {
 		return this.post<boolean>('/video-sources/collections', request);
 	}
 
-	/**
-	 * 订阅UP主投稿
-	 * @param request 订阅请求参数
-	 */
 	async upsertSubmission(request: UpsertSubmissionRequest): Promise<ApiResponse<boolean>> {
 		return this.post<boolean>('/video-sources/submissions', request);
 	}
 
-	/**
-	 * 获取所有视频源的详细信息
-	 */
 	async getVideoSourcesDetails(): Promise<ApiResponse<VideoSourcesDetailsResponse>> {
 		return this.get<VideoSourcesDetailsResponse>('/video-sources/details');
 	}
 
-	/**
-	 * 更新视频源
-	 * @param type 视频源类型
-	 * @param id 视频源 ID
-	 * @param request 更新请求
-	 */
 	async updateVideoSource(
 		type: string,
 		id: number,
@@ -258,92 +208,43 @@ class ApiClient {
 	): Promise<ApiResponse<boolean>> {
 		return this.put<boolean>(`/video-sources/${type}/${id}`, request);
 	}
+
+	async getConfig(): Promise<ApiResponse<Config>> {
+		return this.get<Config>('/config');
+	}
+
+	async updateConfig(config: Config): Promise<ApiResponse<Config>> {
+		return this.put<Config>('/config', config);
+	}
 }
 
 // 创建默认的 API 客户端实例
 export const apiClient = new ApiClient();
 
 // 导出 API 方法的便捷函数
-export const api = {
-	/**
-	 * 获取所有视频来源
-	 */
+const api = {
 	getVideoSources: () => apiClient.getVideoSources(),
-
-	/**
-	 * 获取视频列表
-	 */
 	getVideos: (params?: VideosRequest) => apiClient.getVideos(params),
-
-	/**
-	 * 获取单个视频详情
-	 */
 	getVideo: (id: number) => apiClient.getVideo(id),
-
-	/**
-	 * 重置视频下载状态
-	 */
 	resetVideo: (id: number) => apiClient.resetVideo(id),
-
-	/**
-	 * 重置所有视频下载状态
-	 */
 	resetAllVideos: () => apiClient.resetAllVideos(),
-
-	/**
-	 * 重置视频状态位
-	 */
 	updateVideoStatus: (id: number, request: UpdateVideoStatusRequest) =>
 		apiClient.updateVideoStatus(id, request),
-
-	/**
-	 * 获取我的收藏夹
-	 */
 	getCreatedFavorites: () => apiClient.getCreatedFavorites(),
-
-	/**
-	 * 获取关注的合集
-	 */
 	getFollowedCollections: (pageNum?: number, pageSize?: number) =>
 		apiClient.getFollowedCollections(pageNum, pageSize),
-
-	/**
-	 * 获取关注的UP主
-	 */
 	getFollowedUppers: (pageNum?: number, pageSize?: number) =>
 		apiClient.getFollowedUppers(pageNum, pageSize),
-
-	/**
-	 * 订阅收藏夹
-	 */
 	upsertFavorite: (request: UpsertFavoriteRequest) => apiClient.upsertFavorite(request),
-
-	/**
-	 * 订阅合集
-	 */
 	upsertCollection: (request: UpsertCollectionRequest) => apiClient.upsertCollection(request),
-
-	/**
-	 * 订阅UP主投稿
-	 */
 	upsertSubmission: (request: UpsertSubmissionRequest) => apiClient.upsertSubmission(request),
-
-	/**
-	 * 获取所有视频源的详细信息
-	 */
 	getVideoSourcesDetails: () => apiClient.getVideoSourcesDetails(),
-
-	/**
-	 * 更新视频源
-	 */
 	updateVideoSource: (type: string, id: number, request: UpdateVideoSourceRequest) =>
 		apiClient.updateVideoSource(type, id, request),
-
-	/**
-	 * 设置认证 token
-	 */
-	setAuthToken: (token: string) => apiClient.setAuthToken(token)
+	getConfig: () => apiClient.getConfig(),
+	updateConfig: (config: Config) => apiClient.updateConfig(config),
+	setAuthToken: (token: string) => apiClient.setAuthToken(token),
+	clearAuthToken: () => apiClient.clearAuthToken()
 };
 
-// 默认导出
 export default api;

web/src/lib/types.ts

@@ -153,6 +153,7 @@ export interface UpsertFavoriteRequest {
 export interface UpsertCollectionRequest {
 	sid: number;
 	mid: number;
+	collection_type?: number;
 	path: string;
 }
 
@@ -182,3 +183,61 @@ export interface UpdateVideoSourceRequest {
 	path: string;
 	enabled: boolean;
 }
+
+// 配置相关类型
+export interface Credential {
+	sessdata: string;
+	bili_jct: string;
+	buvid3: string;
+	dedeuserid: string;
+	ac_time_value: string;
+}
+
+export interface FilterOption {
+	video_max_quality: string;
+	video_min_quality: string;
+	audio_max_quality: string;
+	audio_min_quality: string;
+	codecs: string[];
+	no_dolby_video: boolean;
+	no_dolby_audio: boolean;
+	no_hdr: boolean;
+	no_hires: boolean;
+}
+
+export interface DanmakuOption {
+	duration: number;
+	font: string;
+	font_size: number;
+	width_ratio: number;
+	horizontal_gap: number;
+	lane_size: number;
+	float_percentage: number;
+	bottom_percentage: number;
+	opacity: number;
+	bold: boolean;
+	outline: number;
+	time_offset: number;
+}
+
+export interface ConcurrentLimit {
+	video: number;
+	page: number;
+}
+
+export interface Config {
+	auth_token: string;
+	bind_address: string;
+	credential: Credential;
+	filter_option: FilterOption;
+	danmaku_option: DanmakuOption;
+	video_name: string;
+	page_name: string;
+	interval: number;
+	upper_path: string;
+	nfo_time_type: string;
+	concurrent_limit: ConcurrentLimit;
+	time_format: string;
+	cdn_sorting: boolean;
+	version: number;
+}

web/src/routes/me/collections/+page.svelte

@@ -67,10 +67,6 @@
 
 <div>
 	<div class="mb-6 flex items-center justify-between">
-		<div>
-			<h1 class="text-2xl font-bold">关注的合集</h1>
-			<p class="text-muted-foreground mt-1">管理您在B站关注的合集订阅</p>
-		</div>
 		<div class="text-muted-foreground text-sm">
 			{#if !loading}
 				共 {totalCount} 个合集

web/src/routes/me/favorites/+page.svelte

@@ -52,10 +52,6 @@
 
 <div>
 	<div class="mb-6 flex items-center justify-between">
-		<div>
-			<h1 class="text-2xl font-bold">我的收藏夹</h1>
-			<p class="text-muted-foreground mt-1">管理您在B站创建的收藏夹订阅</p>
-		</div>
 		<div class="text-muted-foreground text-sm">
 			{#if !loading}
 				共 {favorites.length} 个收藏夹

web/src/routes/me/uppers/+page.svelte

@@ -65,10 +65,6 @@
 
 <div>
 	<div class="mb-6 flex items-center justify-between">
-		<div>
-			<h1 class="text-2xl font-bold">关注的UP主</h1>
-			<p class="text-muted-foreground mt-1">管理您在B站关注的UP主投稿订阅</p>
-		</div>
 		<div class="text-muted-foreground text-sm">
 			{#if !loading}
 				共 {totalCount} 个UP主

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

@@ -3,28 +3,72 @@
 	import { Button } from '$lib/components/ui/button/index.js';
 	import { Input } from '$lib/components/ui/input/index.js';
 	import { Label } from '$lib/components/ui/label/index.js';
+	import { Switch } from '$lib/components/ui/switch/index.js';
+	import * as Tabs from '$lib/components/ui/tabs/index.js';
+	import { Separator } from '$lib/components/ui/separator/index.js';
+	import { Badge } from '$lib/components/ui/badge/index.js';
 	import api from '$lib/api';
 	import { toast } from 'svelte-sonner';
 	import { setBreadcrumb } from '$lib/stores/breadcrumb';
 	import { goto } from '$app/navigation';
 	import { appStateStore, ToQuery } from '$lib/stores/filter';
+	import type { Config, ApiError } from '$lib/types';
 
-	let apiToken = '';
+	let frontendToken = ''; // 前端认证token
+	let config: Config | null = null;
+	let formData: Config | null = null;
 	let saving = false;
+	let loading = false;
 
-	async function saveApiToken() {
-		if (!apiToken.trim()) {
-			toast.error('请输入有效的API Token');
+	async function loadConfig() {
+		loading = true;
+		try {
+			const response = await api.getConfig();
+			config = response.data;
+			formData = { ...config };
+		} catch (error) {
+			console.error('加载配置失败:', error);
+			toast.error('加载配置失败', {
+				description: (error as ApiError).message
+			});
+		} finally {
+			loading = false;
+		}
+	}
+
+	async function authenticateFrontend() {
+		if (!frontendToken.trim()) {
+			toast.error('请输入前端认证Token');
 			return;
 		}
 
+		try {
+			api.setAuthToken(frontendToken.trim());
+			localStorage.setItem('authToken', frontendToken.trim());
+			toast.success('前端认证成功');
+			loadConfig(); // 认证成功后加载配置
+		} catch (error) {
+			console.error('前端认证失败:', error);
+			toast.error('认证失败，请检查Token是否正确');
+		}
+	}
+
+	async function saveConfig() {
+		if (!formData) {
+			toast.error('配置未加载');
+			return;
+		}
 		saving = true;
 		try {
-			api.setAuthToken(apiToken.trim());
-			toast.success('API Token 已保存');
+			let resp = await api.updateConfig(formData);
+			formData = resp.data;
+			config = { ...formData };
+			toast.success('配置已保存');
 		} catch (error) {
-			console.error('保存API Token失败:', error);
-			toast.error('保存失败，请重试');
+			console.error('保存配置失败:', error);
+			toast.error('保存配置失败', {
+				description: (error as ApiError).message
+			});
 		} finally {
 			saving = false;
 		}
@@ -40,10 +84,14 @@
 			},
 			{ label: '设置', isActive: true }
 		]);
+
 		const savedToken = localStorage.getItem('authToken');
 		if (savedToken) {
-			apiToken = savedToken;
+			frontendToken = savedToken;
+			api.setAuthToken(savedToken);
 		}
+
+		loadConfig();
 	});
 </script>
 
@@ -51,31 +99,570 @@
 	<title>设置 - Bili Sync</title>
 </svelte:head>
 
-<div class="max-w-4xl">
-	<div class="space-y-8">
-		<!-- API Token 配置 -->
-		<div class="border-border border-b pb-6">
-			<div class="grid grid-cols-1 gap-6 lg:grid-cols-3">
-				<div class="lg:col-span-1">
-					<Label class="text-base font-semibold">API Token</Label>
-					<p class="text-muted-foreground mt-1 text-sm">用于身份验证的API令牌</p>
+<div class="space-y-6">
+	<!-- 前端认证状态栏 -->
+	<div class="bg-card rounded-lg border p-4">
+		<div class="flex items-center justify-between">
+			<div class="space-y-1">
+				<h2 class="font-semibold">前端认证状态</h2>
+				<p class="text-muted-foreground text-sm">
+					{formData ? '已认证 - 可以正常加载数据' : '未认证 - 请输入 Token 进行鉴权'}
+				</p>
+			</div>
+			{#if !formData}
+				<div class="flex gap-3">
+					<Input
+						type="password"
+						placeholder="输入认证Token"
+						bind:value={frontendToken}
+						class="w-64"
+					/>
+					<Button onclick={authenticateFrontend} disabled={!frontendToken.trim()}>认证</Button>
 				</div>
-				<div class="space-y-4 lg:col-span-2">
-					<div class="space-y-2">
-						<Input
-							id="api-token"
-							type="password"
-							placeholder="请输入API Token"
-							bind:value={apiToken}
-							class="max-w-lg"
-						/>
-						<p class="text-muted-foreground text-xs">请确保令牌的安全性，不要与他人分享</p>
+			{:else}
+				<div class="flex items-center gap-3">
+					<div class="flex items-center gap-2">
+						<div class="h-2 w-2 rounded-full bg-green-500"></div>
+						<span class="text-sm text-green-600">已认证</span>
 					</div>
-					<Button onclick={saveApiToken} disabled={saving} size="sm">
-						{saving ? '保存中...' : '保存'}
+					<Button
+						variant="outline"
+						size="sm"
+						onclick={() => {
+							formData = null;
+							config = null;
+							localStorage.removeItem('authToken');
+							api.clearAuthToken();
+							frontendToken = '';
+						}}
+					>
+						退出认证
 					</Button>
 				</div>
-			</div>
+			{/if}
 		</div>
 	</div>
+
+	<!-- 应用配置 -->
+	{#if loading}
+		<div class="flex items-center justify-center py-16">
+			<div class="space-y-2 text-center">
+				<div
+					class="border-primary mx-auto h-6 w-6 animate-spin rounded-full border-2 border-t-transparent"
+				></div>
+				<p class="text-muted-foreground">加载配置中...</p>
+			</div>
+		</div>
+	{:else if formData}
+		<div class="space-y-6">
+			<Tabs.Root value="basic" class="w-full">
+				<Tabs.List class="grid w-full grid-cols-5">
+					<Tabs.Trigger value="basic">基本设置</Tabs.Trigger>
+					<Tabs.Trigger value="auth">B站认证</Tabs.Trigger>
+					<Tabs.Trigger value="filter">视频质量</Tabs.Trigger>
+					<Tabs.Trigger value="danmaku">弹幕渲染</Tabs.Trigger>
+					<Tabs.Trigger value="advanced">高级设置</Tabs.Trigger>
+				</Tabs.List>
+
+				<!-- 基本设置 -->
+				<Tabs.Content value="basic" class="mt-6 space-y-6">
+					<div class="grid grid-cols-1 gap-6 lg:grid-cols-2">
+						<div class="space-y-2">
+							<Label for="bind-address">绑定地址</Label>
+							<Input
+								id="bind-address"
+								placeholder="127.0.0.1:9999"
+								bind:value={formData.bind_address}
+							/>
+						</div>
+						<div class="space-y-2">
+							<Label for="interval">同步间隔（秒）</Label>
+							<Input id="interval" type="number" min="60" bind:value={formData.interval} />
+						</div>
+						<div class="space-y-2">
+							<Label for="video-name">视频名称模板</Label>
+							<Input id="video-name" bind:value={formData.video_name} />
+						</div>
+						<div class="space-y-2">
+							<Label for="page-name">分页名称模板</Label>
+							<Input id="page-name" bind:value={formData.page_name} />
+						</div>
+						<div class="space-y-2">
+							<Label for="upper-path">UP主头像保存路径</Label>
+							<Input
+								id="upper-path"
+								placeholder="/path/to/upper/faces"
+								bind:value={formData.upper_path}
+							/>
+						</div>
+						<div class="space-y-2">
+							<Label for="time-format">时间格式</Label>
+							<Input
+								id="time-format"
+								placeholder="%Y-%m-%d %H:%M:%S"
+								bind:value={formData.time_format}
+							/>
+						</div>
+					</div>
+
+					<Separator />
+
+					<div class="space-y-4">
+						<div class="space-y-2">
+							<Label for="backend-auth-token">后端API认证Token</Label>
+							<Input
+								id="backend-auth-token"
+								type="password"
+								placeholder="设置后端API认证Token"
+								bind:value={formData.auth_token}
+							/>
+							<p class="text-muted-foreground text-xs">
+								修改此Token后，前端需要使用新Token重新认证才能访问API
+							</p>
+						</div>
+					</div>
+
+					<Separator />
+
+					<div class="space-y-4">
+						<div class="flex items-center space-x-2">
+							<Switch id="cdn-sorting" bind:checked={formData.cdn_sorting} />
+							<Label for="cdn-sorting">启用CDN排序</Label>
+						</div>
+					</div>
+				</Tabs.Content>
+
+				<!-- B站认证 -->
+				<Tabs.Content value="auth" class="mt-6 space-y-6">
+					<div class="space-y-4">
+						<div class="space-y-2">
+							<Label for="sessdata">SESSDATA</Label>
+							<Input
+								id="sessdata"
+								type="password"
+								placeholder="请输入SESSDATA"
+								bind:value={formData.credential.sessdata}
+							/>
+						</div>
+						<div class="space-y-2">
+							<Label for="bili-jct">bili_jct</Label>
+							<Input
+								id="bili-jct"
+								type="password"
+								placeholder="请输入bili_jct"
+								bind:value={formData.credential.bili_jct}
+							/>
+						</div>
+						<div class="space-y-2">
+							<Label for="buvid3">buvid3</Label>
+							<Input
+								id="buvid3"
+								placeholder="请输入buvid3"
+								bind:value={formData.credential.buvid3}
+							/>
+						</div>
+						<div class="space-y-2">
+							<Label for="dedeuserid">dedeuserid</Label>
+							<Input
+								id="dedeuserid"
+								placeholder="请输入dedeuserid"
+								bind:value={formData.credential.dedeuserid}
+							/>
+						</div>
+						<div class="space-y-2">
+							<Label for="ac-time-value">ac_time_value</Label>
+							<Input
+								id="ac-time-value"
+								placeholder="请输入ac_time_value"
+								bind:value={formData.credential.ac_time_value}
+							/>
+						</div>
+					</div>
+				</Tabs.Content>
+
+				<!-- 过滤规则 -->
+				<Tabs.Content value="filter" class="mt-6 space-y-6">
+					<div class="grid grid-cols-1 gap-6 lg:grid-cols-2">
+						<div class="space-y-2">
+							<Label for="video-max-quality">最高视频质量</Label>
+							<select
+								id="video-max-quality"
+								class="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:ring-2 focus-visible:ring-offset-2 focus-visible:outline-none disabled:cursor-not-allowed disabled:opacity-50"
+								bind:value={formData.filter_option.video_max_quality}
+							>
+								<option value="Quality360p">360p</option>
+								<option value="Quality480p">480p</option>
+								<option value="Quality720p">720p</option>
+								<option value="Quality1080p">1080p</option>
+								<option value="Quality1080pPLUS">1080p+</option>
+								<option value="Quality1080p60">1080p60</option>
+								<option value="Quality4k">4K</option>
+								<option value="QualityHdr">HDR</option>
+								<option value="QualityDolby">杜比视界</option>
+								<option value="Quality8k">8K</option>
+							</select>
+						</div>
+						<div class="space-y-2">
+							<Label for="video-min-quality">最低视频质量</Label>
+							<select
+								id="video-min-quality"
+								class="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:ring-2 focus-visible:ring-offset-2 focus-visible:outline-none disabled:cursor-not-allowed disabled:opacity-50"
+								bind:value={formData.filter_option.video_min_quality}
+							>
+								<option value="Quality360p">360p</option>
+								<option value="Quality480p">480p</option>
+								<option value="Quality720p">720p</option>
+								<option value="Quality1080p">1080p</option>
+								<option value="Quality1080pPLUS">1080p+</option>
+								<option value="Quality1080p60">1080p60</option>
+								<option value="Quality4k">4K</option>
+								<option value="QualityHdr">HDR</option>
+								<option value="QualityDolby">杜比视界</option>
+								<option value="Quality8k">8K</option>
+							</select>
+						</div>
+						<div class="space-y-2">
+							<Label for="audio-max-quality">最高音频质量</Label>
+							<select
+								id="audio-max-quality"
+								class="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:ring-2 focus-visible:ring-offset-2 focus-visible:outline-none disabled:cursor-not-allowed disabled:opacity-50"
+								bind:value={formData.filter_option.audio_max_quality}
+							>
+								<option value="Quality64k">64k</option>
+								<option value="Quality132k">132k</option>
+								<option value="Quality192k">192k</option>
+								<option value="QualityDolby">杜比全景声</option>
+								<option value="QualityHiRES">Hi-RES</option>
+							</select>
+						</div>
+						<div class="space-y-2">
+							<Label for="audio-min-quality">最低音频质量</Label>
+							<select
+								id="audio-min-quality"
+								class="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:ring-2 focus-visible:ring-offset-2 focus-visible:outline-none disabled:cursor-not-allowed disabled:opacity-50"
+								bind:value={formData.filter_option.audio_min_quality}
+							>
+								<option value="Quality64k">64k</option>
+								<option value="Quality132k">132k</option>
+								<option value="Quality192k">192k</option>
+								<option value="QualityDolby">杜比全景声</option>
+								<option value="QualityHiRES">Hi-RES</option>
+							</select>
+						</div>
+					</div>
+
+					<Separator />
+
+					<div class="space-y-4">
+						<Label>视频编码格式偏好（按优先级排序）</Label>
+						<p class="text-muted-foreground text-sm">排在前面的编码格式优先级更高</p>
+						<div class="space-y-2">
+							{#each formData.filter_option.codecs as codec, index (index)}
+								<div class="flex items-center space-x-2 rounded-lg border p-3">
+									<Badge variant="secondary">{index + 1}</Badge>
+									<span class="flex-1 font-medium">{codec}</span>
+									<div class="flex space-x-1">
+										<Button
+											type="button"
+											size="sm"
+											variant="outline"
+											disabled={index === 0}
+											onclick={() => {
+												if (formData && index > 0) {
+													const newCodecs = [...formData.filter_option.codecs];
+													[newCodecs[index - 1], newCodecs[index]] = [
+														newCodecs[index],
+														newCodecs[index - 1]
+													];
+													formData.filter_option.codecs = newCodecs;
+												}
+											}}
+										>
+											↑
+										</Button>
+										<Button
+											type="button"
+											size="sm"
+											variant="outline"
+											disabled={index === formData.filter_option.codecs.length - 1}
+											onclick={() => {
+												if (formData && index < formData.filter_option.codecs.length - 1) {
+													const newCodecs = [...formData.filter_option.codecs];
+													[newCodecs[index], newCodecs[index + 1]] = [
+														newCodecs[index + 1],
+														newCodecs[index]
+													];
+													formData.filter_option.codecs = newCodecs;
+												}
+											}}
+										>
+											↓
+										</Button>
+										<Button
+											type="button"
+											size="sm"
+											variant="destructive"
+											onclick={() => {
+												if (formData) {
+													formData.filter_option.codecs = formData.filter_option.codecs.filter(
+														(_, i) => i !== index
+													);
+												}
+											}}
+										>
+											×
+										</Button>
+									</div>
+								</div>
+							{/each}
+
+							{#if formData.filter_option.codecs.length < 3}
+								<div class="space-y-2">
+									<Label>添加编码格式</Label>
+									<div class="flex gap-2">
+										{#each ['AV1', 'HEV', 'AVC'] as codec (codec)}
+											{#if !formData.filter_option.codecs.includes(codec)}
+												<Button
+													type="button"
+													size="sm"
+													variant="outline"
+													onclick={() => {
+														if (formData) {
+															formData.filter_option.codecs = [
+																...formData.filter_option.codecs,
+																codec
+															];
+														}
+													}}
+												>
+													+ {codec}
+												</Button>
+											{/if}
+										{/each}
+									</div>
+								</div>
+							{/if}
+						</div>
+					</div>
+
+					<Separator />
+
+					<div class="space-y-4">
+						<div class="flex items-center space-x-2">
+							<Switch id="no-dolby-video" bind:checked={formData.filter_option.no_dolby_video} />
+							<Label for="no-dolby-video">排除杜比视界视频</Label>
+						</div>
+						<div class="flex items-center space-x-2">
+							<Switch id="no-dolby-audio" bind:checked={formData.filter_option.no_dolby_audio} />
+							<Label for="no-dolby-audio">排除杜比全景声音频</Label>
+						</div>
+						<div class="flex items-center space-x-2">
+							<Switch id="no-hdr" bind:checked={formData.filter_option.no_hdr} />
+							<Label for="no-hdr">排除HDR视频</Label>
+						</div>
+						<div class="flex items-center space-x-2">
+							<Switch id="no-hires" bind:checked={formData.filter_option.no_hires} />
+							<Label for="no-hires">排除Hi-RES音频</Label>
+						</div>
+					</div>
+				</Tabs.Content>
+
+				<!-- 弹幕设置 -->
+				<Tabs.Content value="danmaku" class="mt-6 space-y-6">
+					<div class="grid grid-cols-1 gap-6 lg:grid-cols-2">
+						<div class="space-y-2">
+							<Label for="danmaku-duration">弹幕持续时间（秒）</Label>
+							<Input
+								id="danmaku-duration"
+								type="number"
+								min="1"
+								step="0.1"
+								bind:value={formData.danmaku_option.duration}
+							/>
+						</div>
+						<div class="space-y-2">
+							<Label for="danmaku-font">字体</Label>
+							<Input
+								id="danmaku-font"
+								placeholder="黑体"
+								bind:value={formData.danmaku_option.font}
+							/>
+						</div>
+						<div class="space-y-2">
+							<Label for="danmaku-font-size">字体大小</Label>
+							<Input
+								id="danmaku-font-size"
+								type="number"
+								min="8"
+								max="72"
+								bind:value={formData.danmaku_option.font_size}
+							/>
+						</div>
+						<div class="space-y-2">
+							<Label for="danmaku-width-ratio">宽度比例</Label>
+							<Input
+								id="danmaku-width-ratio"
+								type="number"
+								min="0.1"
+								max="3"
+								step="0.1"
+								bind:value={formData.danmaku_option.width_ratio}
+							/>
+						</div>
+						<div class="space-y-2">
+							<Label for="danmaku-horizontal-gap">水平间距</Label>
+							<Input
+								id="danmaku-horizontal-gap"
+								type="number"
+								min="0"
+								step="1"
+								bind:value={formData.danmaku_option.horizontal_gap}
+							/>
+						</div>
+						<div class="space-y-2">
+							<Label for="danmaku-lane-size">轨道大小</Label>
+							<Input
+								id="danmaku-lane-size"
+								type="number"
+								min="8"
+								max="128"
+								bind:value={formData.danmaku_option.lane_size}
+							/>
+						</div>
+						<div class="space-y-2">
+							<Label for="danmaku-float-percentage">滚动弹幕高度百分比</Label>
+							<Input
+								id="danmaku-float-percentage"
+								type="number"
+								min="0"
+								max="1"
+								step="0.01"
+								bind:value={formData.danmaku_option.float_percentage}
+							/>
+						</div>
+						<div class="space-y-2">
+							<Label for="danmaku-bottom-percentage">底部弹幕高度百分比</Label>
+							<Input
+								id="danmaku-bottom-percentage"
+								type="number"
+								min="0"
+								max="1"
+								step="0.01"
+								bind:value={formData.danmaku_option.bottom_percentage}
+							/>
+						</div>
+						<div class="space-y-2">
+							<Label for="danmaku-opacity">透明度 (0-255)</Label>
+							<Input
+								id="danmaku-opacity"
+								type="number"
+								min="0"
+								max="255"
+								bind:value={formData.danmaku_option.opacity}
+							/>
+						</div>
+						<div class="space-y-2">
+							<Label for="danmaku-outline">描边宽度</Label>
+							<Input
+								id="danmaku-outline"
+								type="number"
+								min="0"
+								max="5"
+								step="0.1"
+								bind:value={formData.danmaku_option.outline}
+							/>
+						</div>
+						<div class="space-y-2">
+							<Label for="danmaku-time-offset">时间偏移（秒）</Label>
+							<Input
+								id="danmaku-time-offset"
+								type="number"
+								step="0.1"
+								bind:value={formData.danmaku_option.time_offset}
+							/>
+						</div>
+					</div>
+
+					<Separator />
+
+					<div class="space-y-4">
+						<div class="flex items-center space-x-2">
+							<Switch id="danmaku-bold" bind:checked={formData.danmaku_option.bold} />
+							<Label for="danmaku-bold">粗体显示</Label>
+						</div>
+					</div>
+				</Tabs.Content>
+
+				<!-- 高级设置 -->
+				<Tabs.Content value="advanced" class="mt-6 space-y-6">
+					<div class="grid grid-cols-1 gap-6 lg:grid-cols-2">
+						<div class="space-y-2">
+							<Label for="video-concurrent">视频并发数</Label>
+							<Input
+								id="video-concurrent"
+								type="number"
+								min="1"
+								max="20"
+								bind:value={formData.concurrent_limit.video}
+							/>
+						</div>
+						<div class="space-y-2">
+							<Label for="page-concurrent">分页并发数</Label>
+							<Input
+								id="page-concurrent"
+								type="number"
+								min="1"
+								max="20"
+								bind:value={formData.concurrent_limit.page}
+							/>
+						</div>
+						<div class="space-y-2">
+							<Label for="nfo-time-type">NFO时间类型</Label>
+							<select
+								id="nfo-time-type"
+								class="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:ring-2 focus-visible:ring-offset-2 focus-visible:outline-none disabled:cursor-not-allowed disabled:opacity-50"
+								bind:value={formData.nfo_time_type}
+							>
+								<option value="FavTime">收藏时间</option>
+								<option value="PubTime">发布时间</option>
+							</select>
+						</div>
+					</div>
+				</Tabs.Content>
+
+				<!-- Token管理 -->
+				<Tabs.Content value="token" class="mt-6 space-y-6">
+					<div class="space-y-4">
+						<div class="space-y-2">
+							<Label for="backend-auth-token">后端认证Token</Label>
+							<Input
+								id="backend-auth-token"
+								type="password"
+								placeholder="设置后端API认证Token"
+								bind:value={formData.auth_token}
+							/>
+							<p class="text-muted-foreground text-xs">
+								用于保护后端API的认证令牌，修改后需要重新进行前端认证
+							</p>
+						</div>
+					</div>
+				</Tabs.Content>
+			</Tabs.Root>
+
+			<div class="flex justify-end pt-6">
+				<Button onclick={saveConfig} disabled={saving} size="lg">
+					{saving ? '保存中...' : '保存配置'}
+				</Button>
+			</div>
+		</div>
+	{:else}
+		<div class="flex items-center justify-center py-16">
+			<div class="space-y-4 text-center">
+				<p class="text-muted-foreground">请先进行前端认证以加载配置</p>
+				<Button onclick={() => frontendToken && authenticateFrontend()} disabled={!frontendToken}>
+					重新加载配置
+				</Button>
+			</div>
+		</div>
+	{/if}
 </div>