feat: 加入设置页里缺失的设置项，密码表单允许修改可见性 (#387)

web/src/lib/components/custom/password-input.svelte

@@ -0,0 +1,85 @@
+<script lang="ts">
+	import type { HTMLInputAttributes } from 'svelte/elements';
+	import { cn, type WithElementRef } from '$lib/utils.js';
+
+	type Props = WithElementRef<
+		HTMLInputAttributes & {
+			class?: string;
+		}
+	>;
+
+	let {
+		ref = $bindable(null),
+		value = $bindable(''),
+		class: className,
+		placeholder = '',
+		...restProps
+	}: Props = $props();
+
+	// 密码可见性状态
+	let visible = $state(false);
+
+	// 切换密码可见性
+	function toggleVisibility() {
+		visible = !visible;
+	}
+</script>
+
+<div class="relative">
+	<input
+		bind:this={ref}
+		data-slot="input"
+		class={cn(
+			'border-input bg-background selection:bg-primary dark:bg-input/30 selection:text-primary-foreground ring-offset-background placeholder:text-muted-foreground flex h-9 w-full min-w-0 rounded-md border px-3 py-1 pr-10 text-base shadow-xs transition-[color,box-shadow] outline-none disabled:cursor-not-allowed disabled:opacity-50 md:text-sm',
+			'focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px]',
+			'aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive',
+			className
+		)}
+		type={visible ? 'text' : 'password'}
+		{placeholder}
+		bind:value
+		{...restProps}
+	/>
+	<button
+		type="button"
+		class="text-muted-foreground hover:text-foreground absolute top-1/2 right-3 -translate-y-1/2"
+		onclick={toggleVisibility}
+		aria-label={visible ? '隐藏密码' : '显示密码'}
+		tabindex="-1"
+	>
+		{#if visible}
+			<svg
+				xmlns="http://www.w3.org/2000/svg"
+				width="16"
+				height="16"
+				viewBox="0 0 24 24"
+				fill="none"
+				stroke="currentColor"
+				stroke-width="2"
+				stroke-linecap="round"
+				stroke-linejoin="round"
+			>
+				<path d="M9.88 9.88a3 3 0 1 0 4.24 4.24"></path>
+				<path d="M10.73 5.08A10.43 10.43 0 0 1 12 5c7 0 10 7 10 7a13.16 13.16 0 0 1-1.67 2.68"
+				></path>
+				<path d="M6.61 6.61A13.526 13.526 0 0 0 2 12s3 7 10 7a9.74 9.74 0 0 0 5.39-1.61"></path>
+				<line x1="2" x2="22" y1="2" y2="22"></line>
+			</svg>
+		{:else}
+			<svg
+				xmlns="http://www.w3.org/2000/svg"
+				width="16"
+				height="16"
+				viewBox="0 0 24 24"
+				fill="none"
+				stroke="currentColor"
+				stroke-width="2"
+				stroke-linecap="round"
+				stroke-linejoin="round"
+			>
+				<path d="M2 12s3-7 10-7 10 7 10 7-3 7-10 7-10-7-10-7Z"></path>
+				<circle cx="12" cy="12" r="3"></circle>
+			</svg>
+		{/if}
+	</button>
+</div>

web/src/lib/types.ts

@@ -221,9 +221,22 @@ export interface DanmakuOption {
 	time_offset: number;
 }
 
+export interface RateLimit {
+	limit: number;
+	duration: number;
+}
+
+export interface ConcurrentDownloadLimit {
+	enable: boolean;
+	concurrency: number;
+	threshold: number;
+}
+
 export interface ConcurrentLimit {
 	video: number;
 	page: number;
+	rate_limit?: RateLimit;
+	download: ConcurrentDownloadLimit;
 }
 
 export interface Config {

web/src/routes/+page.svelte

@@ -191,7 +191,7 @@
 							<div class="flex items-center justify-between">
 								<div class="flex items-center gap-2">
 									<FolderIcon class="text-muted-foreground h-4 w-4" />
-									<span class="text-sm">合集</span>
+									<span class="text-sm">合集 / 列表</span>
 								</div>
 								<Badge variant="outline">{dashboardData.enabled_collections}</Badge>
 							</div>

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

@@ -7,6 +7,7 @@
 	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 PasswordInput from '$lib/components/custom/password-input.svelte';
 	import api from '$lib/api';
 	import { toast } from 'svelte-sonner';
 	import { setBreadcrumb } from '$lib/stores/breadcrumb';
@@ -101,12 +102,7 @@
 			</div>
 			{#if !formData}
 				<div class="flex gap-3">
-					<Input
+					<PasswordInput bind:value={frontendToken} placeholder="输入认证Token" />
-						type="password"
-						placeholder="输入认证Token"
-						bind:value={frontendToken}
-						class="w-64"
-					/>
 					<Button onclick={authenticateFrontend} disabled={!frontendToken.trim()}>认证</Button>
 				</div>
 			{:else}
@@ -199,11 +195,10 @@
 
 					<div class="space-y-4">
 						<div class="space-y-2">
-							<Label for="backend-auth-token">后端API认证Token</Label>
+							<Label for="backend-auth-token">后端 API 认证Token</Label>
-							<Input
+							<PasswordInput
 								id="backend-auth-token"
-								type="password"
+								placeholder="设置后端 API 认证Token"
-								placeholder="设置后端API认证Token"
 								bind:value={formData.auth_token}
 							/>
 							<p class="text-muted-foreground text-xs">
@@ -227,25 +222,23 @@
 					<div class="space-y-4">
 						<div class="space-y-2">
 							<Label for="sessdata">SESSDATA</Label>
-							<Input
+							<PasswordInput
 								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
+							<PasswordInput
 								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
+							<PasswordInput
 								id="buvid3"
 								placeholder="请输入buvid3"
 								bind:value={formData.credential.buvid3}
@@ -253,7 +246,7 @@
 						</div>
 						<div class="space-y-2">
 							<Label for="dedeuserid">dedeuserid</Label>
-							<Input
+							<PasswordInput
 								id="dedeuserid"
 								placeholder="请输入dedeuserid"
 								bind:value={formData.credential.dedeuserid}
@@ -261,7 +254,7 @@
 						</div>
 						<div class="space-y-2">
 							<Label for="ac-time-value">ac_time_value</Label>
-							<Input
+							<PasswordInput
 								id="ac-time-value"
 								placeholder="请输入ac_time_value"
 								bind:value={formData.credential.ac_time_value}
@@ -618,22 +611,88 @@
 							</select>
 						</div>
 					</div>
-				</Tabs.Content>
 
-				<!-- Token管理 -->
+					<Separator />
-				<Tabs.Content value="token" class="mt-6 space-y-6">
+
 					<div class="space-y-4">
-						<div class="space-y-2">
+						<div class="mb-4 flex items-center space-x-2">
-							<Label for="backend-auth-token">后端认证Token</Label>
+							<Switch
-							<Input
+								id="rate-limit-enable"
-								id="backend-auth-token"
+								checked={formData.concurrent_limit.rate_limit !== null &&
-								type="password"
+									formData.concurrent_limit.rate_limit !== undefined}
-								placeholder="设置后端API认证Token"
+								onCheckedChange={(checked) => {
-								bind:value={formData.auth_token}
+									if (checked) {
+										formData!.concurrent_limit.rate_limit = { limit: 4, duration: 250 };
+									} else {
+										formData!.concurrent_limit.rate_limit = undefined;
+									}
+								}}
 							/>
-							<p class="text-muted-foreground text-xs">
+							<Label for="rate-limit-enable">启用请求频率限制</Label>
-								用于保护后端API的认证令牌，修改后需要重新进行前端认证
+						</div>
-							</p>
+						{#if formData.concurrent_limit.rate_limit}
+							<div class="grid grid-cols-1 gap-6 lg:grid-cols-2">
+								<div class="space-y-2">
+									<Label for="rate-limit-duration">时间间隔（毫秒）</Label>
+									<Input
+										id="rate-limit-duration"
+										type="number"
+										min="100"
+										bind:value={formData.concurrent_limit.rate_limit.duration}
+									/>
+									<p class="text-muted-foreground text-xs">请求限制的时间窗口（毫秒）</p>
+								</div>
+								<div class="space-y-2">
+									<Label for="rate-limit-limit">限制请求数</Label>
+									<Input
+										id="rate-limit-limit"
+										type="number"
+										min="1"
+										bind:value={formData.concurrent_limit.rate_limit.limit}
+									/>
+									<p class="text-muted-foreground text-xs">每个时间间隔内允许的最大请求数</p>
+								</div>
+							</div>
+						{/if}
+					</div>
+
+					<Separator />
+					<div class="space-y-4">
+						<div class="mb-4 flex items-center space-x-2">
+							<Switch
+								id="download-enable"
+								bind:checked={formData.concurrent_limit.download.enable}
+							/>
+							<Label for="rate-limit-duration">启用单文件分块下载</Label>
+						</div>
+						<div class="grid grid-cols-1 gap-6 lg:grid-cols-2">
+							<div class="space-y-2">
+								<Label for="download-concurrency">下载分块数</Label>
+								<Input
+									id="download-concurrency"
+									type="number"
+									min="1"
+									max="16"
+									disabled={!formData.concurrent_limit.download.enable}
+									bind:value={formData.concurrent_limit.download.concurrency}
+								/>
+								<p class="text-muted-foreground text-xs">
+									单文件将分为若干大小相同的块并行下载，所有分块下载完毕后合并
+								</p>
+							</div>
+							<div class="space-y-2">
+								<Label for="download-threshold">启用分块下载的文件大小阈值（字节）</Label>
+								<Input
+									id="download-threshold"
+									type="number"
+									min="1048576"
+									disabled={!formData.concurrent_limit.download?.enable}
+									bind:value={formData.concurrent_limit.download.threshold}
+								/>
+								<p class="text-muted-foreground text-xs">
+									大于该阈值的文件才使用分块下载，文件过小时分块下载的拆分合并成本可能大于带来的增益
+								</p>
+							</div>
 						</div>
 					</div>
 				</Tabs.Content>
@@ -649,9 +708,6 @@
 		<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}

web/src/routes/video-sources/+page.svelte

@@ -216,9 +216,8 @@
 		<Tabs.Root bind:value={activeTab} class="w-full">
 			<Tabs.List class="grid w-full grid-cols-4">
 				{#each Object.entries(TAB_CONFIG) as [key, config] (key)}
-					{@const sources = getSourcesForTab(key)}
 					<Tabs.Trigger value={key} class="relative">
-						{config.label}（{sources.length}）
+						{config.label}
 					</Tabs.Trigger>
 				{/each}
 			</Tabs.List>