1038 lines
34 KiB
Svelte
1038 lines
34 KiB
Svelte
<script lang="ts">
|
||
import { onMount, tick } from 'svelte';
|
||
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 * as Dialog from '$lib/components/ui/dialog/index.js';
|
||
import * as Tooltip from '$lib/components/ui/tooltip/index.js';
|
||
import PasswordInput from '$lib/components/custom/password-input.svelte';
|
||
import QrLogin from '$lib/components/custom/qr-login.svelte';
|
||
import NotifierDialog from './NotifierDialog.svelte';
|
||
import { InfoIcon, QrCodeIcon } from '@lucide/svelte/icons';
|
||
import api from '$lib/api';
|
||
import { toast } from 'svelte-sonner';
|
||
import { setBreadcrumb } from '$lib/stores/breadcrumb';
|
||
import type { Config, ApiError, Notifier, Credential } from '$lib/types';
|
||
|
||
let frontendToken = ''; // 前端认证token
|
||
let config: Config | null = null;
|
||
let formData: Config | null = null;
|
||
let saving = false;
|
||
let loading = false;
|
||
|
||
let intervalInput: string = '1200';
|
||
|
||
// Notifier 管理相关
|
||
let showNotifierDialog = false;
|
||
let editingNotifier: Notifier | null = null;
|
||
let editingNotifierIndex: number | null = null;
|
||
let isEditing = false;
|
||
|
||
// QR 登录 Dialog 相关
|
||
let showQrLoginDialog = false;
|
||
let qrLoginComponent: QrLogin;
|
||
|
||
function openAddNotifierDialog() {
|
||
editingNotifier = null;
|
||
editingNotifierIndex = null;
|
||
isEditing = false;
|
||
showNotifierDialog = true;
|
||
}
|
||
|
||
function openEditNotifierDialog(notifier: Notifier, index: number) {
|
||
editingNotifier = { ...notifier };
|
||
editingNotifierIndex = index;
|
||
isEditing = true;
|
||
showNotifierDialog = true;
|
||
}
|
||
|
||
function closeNotifierDialog() {
|
||
showNotifierDialog = false;
|
||
editingNotifier = null;
|
||
editingNotifierIndex = null;
|
||
isEditing = false;
|
||
}
|
||
|
||
function addNotifier(notifier: Notifier) {
|
||
if (!formData) return;
|
||
if (!formData.notifiers) {
|
||
formData.notifiers = [];
|
||
}
|
||
formData.notifiers = [...formData.notifiers, notifier];
|
||
closeNotifierDialog();
|
||
}
|
||
|
||
function updateNotifier(index: number, notifier: Notifier) {
|
||
if (!formData?.notifiers) return;
|
||
const newNotifiers = [...formData.notifiers];
|
||
newNotifiers[index] = notifier;
|
||
formData.notifiers = newNotifiers;
|
||
closeNotifierDialog();
|
||
}
|
||
|
||
function deleteNotifier(index: number) {
|
||
if (!formData?.notifiers) return;
|
||
formData.notifiers = formData.notifiers.filter((_, i) => i !== index);
|
||
}
|
||
|
||
async function testNotifier(notifier: Notifier) {
|
||
try {
|
||
await api.testNotifier(notifier);
|
||
toast.success('测试通知发送成功');
|
||
} catch (error) {
|
||
console.error('测试通知失败:', error);
|
||
toast.error('测试通知失败', {
|
||
description: (error as ApiError).message
|
||
});
|
||
}
|
||
}
|
||
|
||
async function loadConfig() {
|
||
loading = true;
|
||
try {
|
||
const response = await api.getConfig();
|
||
config = response.data;
|
||
formData = { ...config };
|
||
|
||
// 根据 interval 的类型初始化输入框
|
||
if (typeof formData.interval === 'number') {
|
||
intervalInput = String(formData.interval);
|
||
} else {
|
||
intervalInput = formData.interval;
|
||
}
|
||
} catch (error) {
|
||
console.error('加载配置失败:', error);
|
||
toast.error('加载配置失败', {
|
||
description: (error as ApiError).message
|
||
});
|
||
throw error;
|
||
} finally {
|
||
loading = false;
|
||
}
|
||
}
|
||
|
||
async function authenticateFrontend() {
|
||
if (!frontendToken.trim()) {
|
||
toast.error('请输入前端认证Token');
|
||
return;
|
||
}
|
||
|
||
try {
|
||
api.setAuthToken(frontendToken.trim());
|
||
await loadConfig();
|
||
toast.success('前端认证成功');
|
||
} catch (error) {
|
||
console.error('前端认证失败:', error);
|
||
toast.error('认证失败，请检查Token是否正确', {
|
||
description: (error as ApiError).message
|
||
});
|
||
}
|
||
}
|
||
|
||
async function saveConfig() {
|
||
if (!formData) {
|
||
toast.error('配置未加载');
|
||
return;
|
||
}
|
||
|
||
// 保存前根据输入内容判断类型
|
||
const trimmed = intervalInput.trim();
|
||
const asNumber = Number(trimmed);
|
||
|
||
if (!isNaN(asNumber) && trimmed !== '') {
|
||
// 纯数字，作为 Interval
|
||
formData.interval = asNumber;
|
||
} else {
|
||
// 非数字，作为 Cron 表达式
|
||
formData.interval = trimmed;
|
||
}
|
||
|
||
saving = true;
|
||
try {
|
||
let resp = await api.updateConfig(formData);
|
||
formData = resp.data;
|
||
config = { ...formData };
|
||
|
||
// 更新输入框显示
|
||
if (typeof formData.interval === 'number') {
|
||
intervalInput = String(formData.interval);
|
||
} else {
|
||
intervalInput = formData.interval;
|
||
}
|
||
|
||
toast.success('配置已保存');
|
||
} catch (error) {
|
||
console.error('保存配置失败:', error);
|
||
toast.error('保存配置失败', {
|
||
description: (error as ApiError).message
|
||
});
|
||
} finally {
|
||
saving = false;
|
||
}
|
||
}
|
||
|
||
function handleQrLoginSuccess(credential: Credential) {
|
||
if (!formData) return;
|
||
|
||
// 自动填充凭证到 formData
|
||
formData.credential = credential;
|
||
|
||
toast.success('扫码登录成功，已填充凭据');
|
||
|
||
// 自动保存配置
|
||
saveConfig();
|
||
|
||
// 关闭弹窗
|
||
showQrLoginDialog = false;
|
||
}
|
||
|
||
onMount(() => {
|
||
setBreadcrumb([{ label: '设置' }]);
|
||
frontendToken = api.getAuthToken() || '';
|
||
loadConfig();
|
||
});
|
||
</script>
|
||
|
||
<svelte:head>
|
||
<title>设置 - Bili Sync</title>
|
||
</svelte:head>
|
||
|
||
<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">
|
||
<PasswordInput bind:value={frontendToken} placeholder="输入认证Token" />
|
||
<Button onclick={authenticateFrontend} disabled={!frontendToken.trim()}>认证</Button>
|
||
</div>
|
||
{:else}
|
||
<div class="flex items-center gap-3">
|
||
<div class="flex items-center gap-2">
|
||
<div class="h-2 w-2 rounded-full bg-emerald-500"></div>
|
||
<span class="text-sm text-emerald-600">已认证</span>
|
||
</div>
|
||
<Button
|
||
variant="outline"
|
||
size="sm"
|
||
onclick={() => {
|
||
formData = null;
|
||
config = null;
|
||
api.clearAuthToken();
|
||
frontendToken = '';
|
||
}}
|
||
>
|
||
退出认证
|
||
</Button>
|
||
</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-6">
|
||
<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="notifiers">通知设置</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">
|
||
<div class="flex items-center gap-1">
|
||
<Label for="interval">任务触发条件</Label>
|
||
<Tooltip.Root>
|
||
<Tooltip.Trigger>
|
||
<InfoIcon class="text-muted-foreground h-3.5 w-3.5" />
|
||
</Tooltip.Trigger>
|
||
<Tooltip.Content>
|
||
<p class="text-xs">
|
||
视频下载任务的触发条件，支持两种格式：<br />
|
||
1. 输入数字表示间隔秒数，例如 1200 表示每隔 20 分钟触发一次； <br />
|
||
2. 输入 Cron 表达式，格式为“秒 分 时 日 月 周”，例如“0 0 2 * * *”表示每天凌晨2点触发一次。
|
||
</p>
|
||
</Tooltip.Content>
|
||
</Tooltip.Root>
|
||
</div>
|
||
<Input
|
||
id="interval"
|
||
type="text"
|
||
bind:value={intervalInput}
|
||
placeholder="1200 或 0 0 2 * * *"
|
||
/>
|
||
</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>
|
||
|
||
<div class="space-y-4">
|
||
<div class="space-y-2">
|
||
<Label for="backend-auth-token">后端 API 认证Token</Label>
|
||
<PasswordInput
|
||
id="backend-auth-token"
|
||
placeholder="设置后端 API 认证Token"
|
||
bind:value={formData.auth_token}
|
||
/>
|
||
<p class="text-muted-foreground text-xs">
|
||
修改此Token后，前端需要使用新Token重新认证才能访问API
|
||
</p>
|
||
</div>
|
||
</div>
|
||
|
||
<Separator />
|
||
|
||
<div class="grid grid-cols-1 gap-6 lg:grid-cols-2">
|
||
<div class="space-y-2">
|
||
<Label for="favorite-default-path">收藏夹快捷订阅路径模板</Label>
|
||
<Input id="favorite-default-path" bind:value={formData.favorite_default_path} />
|
||
</div>
|
||
<div class="space-y-2">
|
||
<Label for="collection-default-path">合集快捷订阅路径模板</Label>
|
||
<Input id="collection-default-path" bind:value={formData.collection_default_path} />
|
||
</div>
|
||
<div class="space-y-2">
|
||
<Label for="submission-default-path">UP 主投稿快捷订阅路径模板</Label>
|
||
<Input id="submission-default-path" bind:value={formData.submission_default_path} />
|
||
</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 class="flex items-center space-x-2">
|
||
<Switch id="try-upower-anyway" bind:checked={formData.try_upower_anyway} />
|
||
<div class="flex items-center gap-1">
|
||
<Label for="try-upower-anyway">尝试下载未充电视频</Label>
|
||
<Tooltip.Root>
|
||
<Tooltip.Trigger>
|
||
<InfoIcon class="text-muted-foreground h-3.5 w-3.5" />
|
||
</Tooltip.Trigger>
|
||
<Tooltip.Content>
|
||
<p class="text-xs">
|
||
当关闭该开关时，程序仅会下载已充电的视频，未充电的视频直接跳过；开启后不再检查充电状态，一律尝试下载。<br
|
||
/>
|
||
这可以帮助下载未充电视频的封面等元数据，也应该可以下载未充电视频的试看部分（如果存在的话）。
|
||
</p>
|
||
</Tooltip.Content>
|
||
</Tooltip.Root>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</Tabs.Content>
|
||
|
||
<!-- B站认证 -->
|
||
<Tabs.Content value="auth" class="mt-6 space-y-6">
|
||
<div class="flex items-center justify-between">
|
||
<div class="space-y-1">
|
||
<Label class="text-base font-semibold">快速登录</Label>
|
||
<p class="text-muted-foreground text-sm">使用哔哩哔哩 APP 扫码登录，自动填充凭据</p>
|
||
</div>
|
||
<Button
|
||
onclick={() => {
|
||
showQrLoginDialog = true;
|
||
tick().then(() => {
|
||
qrLoginComponent!.init();
|
||
});
|
||
}}
|
||
>
|
||
<QrCodeIcon class="mr-2 h-4 w-4" />
|
||
扫码登录
|
||
</Button>
|
||
</div>
|
||
|
||
<Separator />
|
||
|
||
<!-- 原有的手动输入 Cookie 表单 -->
|
||
<div class="space-y-4">
|
||
<div class="space-y-2">
|
||
<Label for="sessdata">SESSDATA</Label>
|
||
<PasswordInput
|
||
id="sessdata"
|
||
placeholder="请输入SESSDATA"
|
||
bind:value={formData.credential.sessdata}
|
||
/>
|
||
</div>
|
||
<div class="space-y-2">
|
||
<Label for="bili-jct">bili_jct</Label>
|
||
<PasswordInput
|
||
id="bili-jct"
|
||
placeholder="请输入bili_jct"
|
||
bind:value={formData.credential.bili_jct}
|
||
/>
|
||
</div>
|
||
<div class="space-y-2">
|
||
<Label for="buvid3">buvid3</Label>
|
||
<PasswordInput
|
||
id="buvid3"
|
||
placeholder="请输入buvid3"
|
||
bind:value={formData.credential.buvid3}
|
||
/>
|
||
</div>
|
||
<div class="space-y-2">
|
||
<Label for="dedeuserid">dedeuserid</Label>
|
||
<PasswordInput
|
||
id="dedeuserid"
|
||
placeholder="请输入dedeuserid"
|
||
bind:value={formData.credential.dedeuserid}
|
||
/>
|
||
</div>
|
||
<div class="space-y-2">
|
||
<Label for="ac-time-value">ac_time_value</Label>
|
||
<PasswordInput
|
||
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">
|
||
<Label>特殊流排除选项</Label>
|
||
<p class="text-muted-foreground text-sm">排除某些类型的特殊流</p>
|
||
<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>
|
||
|
||
<Separator />
|
||
|
||
<div class="space-y-4">
|
||
<Label>处理跳过选项</Label>
|
||
<p class="text-muted-foreground text-sm">在视频处理部分跳过某些执行环节</p>
|
||
<div class="flex items-center space-x-2">
|
||
<Switch id="skip-poster" bind:checked={formData.skip_option.no_poster} />
|
||
<Label for="skip-poster">跳过视频封面</Label>
|
||
</div>
|
||
<div class="flex items-center space-x-2">
|
||
<Switch id="skip-video-nfo" bind:checked={formData.skip_option.no_video_nfo} />
|
||
<Label for="skip-video-nfo">跳过视频 NFO</Label>
|
||
</div>
|
||
<div class="flex items-center space-x-2">
|
||
<Switch id="skip-upper-info" bind:checked={formData.skip_option.no_upper} />
|
||
<Label for="skip-upper-info">跳过 Up 主头像、信息</Label>
|
||
</div>
|
||
<div class="flex items-center space-x-2">
|
||
<Switch id="skip-danmaku" bind:checked={formData.skip_option.no_danmaku} />
|
||
<Label for="skip-danmaku">跳过弹幕</Label>
|
||
</div>
|
||
<div class="flex items-center space-x-2">
|
||
<Switch id="skip-subtitle" bind:checked={formData.skip_option.no_subtitle} />
|
||
<Label for="skip-subtitle">跳过字幕</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="notifiers" class="mt-6 space-y-6">
|
||
<div class="space-y-4">
|
||
<div class="flex items-center justify-between">
|
||
<div>
|
||
<h3 class="text-lg font-semibold">通知器管理</h3>
|
||
<p class="text-muted-foreground text-sm">
|
||
配置通知器，在下载任务出现错误时发送通知
|
||
</p>
|
||
</div>
|
||
<Button onclick={openAddNotifierDialog}>+ 添加通知器</Button>
|
||
</div>
|
||
|
||
{#if !formData.notifiers || formData.notifiers.length === 0}
|
||
<div class="rounded-lg border-2 border-dashed py-12 text-center">
|
||
<p class="text-muted-foreground">暂无通知器配置</p>
|
||
<Button class="mt-4" variant="outline" onclick={openAddNotifierDialog}>
|
||
添加第一个通知器
|
||
</Button>
|
||
</div>
|
||
{:else}
|
||
<div class="space-y-3">
|
||
{#each formData.notifiers as notifier, index (index)}
|
||
<div class="flex items-center justify-between rounded-lg border p-4">
|
||
<div class="flex-1">
|
||
{#if notifier.type === 'telegram'}
|
||
<div class="flex items-center gap-2">
|
||
<Badge variant="secondary">Telegram</Badge>
|
||
<span class="text-muted-foreground text-sm">
|
||
Chat ID: {notifier.chat_id}
|
||
</span>
|
||
</div>
|
||
{:else if notifier.type === 'webhook'}
|
||
<div class="flex items-center gap-2">
|
||
<Badge variant="secondary">Webhook</Badge>
|
||
<span class="text-muted-foreground text-sm">
|
||
{notifier.url}
|
||
</span>
|
||
</div>
|
||
{/if}
|
||
</div>
|
||
<div class="flex gap-2">
|
||
<Button
|
||
size="sm"
|
||
variant="outline"
|
||
onclick={() => openEditNotifierDialog(notifier, index)}
|
||
>
|
||
编辑
|
||
</Button>
|
||
<Button size="sm" variant="secondary" onclick={() => testNotifier(notifier)}>
|
||
测试
|
||
</Button>
|
||
<Button size="sm" variant="destructive" onclick={() => deleteNotifier(index)}>
|
||
删除
|
||
</Button>
|
||
</div>
|
||
</div>
|
||
{/each}
|
||
</div>
|
||
{/if}
|
||
</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>
|
||
|
||
<Separator />
|
||
|
||
<div class="space-y-4">
|
||
<div class="mb-4 flex items-center space-x-2">
|
||
<Switch
|
||
id="rate-limit-enable"
|
||
checked={formData.concurrent_limit.rate_limit !== null &&
|
||
formData.concurrent_limit.rate_limit !== undefined}
|
||
onCheckedChange={(checked) => {
|
||
if (checked) {
|
||
formData!.concurrent_limit.rate_limit = { limit: 4, duration: 250 };
|
||
} else {
|
||
formData!.concurrent_limit.rate_limit = undefined;
|
||
}
|
||
}}
|
||
/>
|
||
<Label for="rate-limit-enable">启用请求频率限制</Label>
|
||
</div>
|
||
{#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>
|
||
</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>
|
||
</div>
|
||
</div>
|
||
{/if}
|
||
</div>
|
||
|
||
<Dialog.Root bind:open={showNotifierDialog}>
|
||
<Dialog.Portal>
|
||
<Dialog.Overlay class="bg-background/80 fixed inset-0 z-50 backdrop-blur-sm" />
|
||
<Dialog.Content
|
||
class="bg-background fixed top-[50%] left-[50%] z-50 grid w-full max-w-lg translate-x-[-50%] translate-y-[-50%] gap-4 border p-6 shadow-lg duration-200 sm:rounded-lg"
|
||
>
|
||
<Dialog.Header>
|
||
<Dialog.Title>
|
||
{isEditing ? '编辑通知器' : '添加通知器'}
|
||
</Dialog.Title>
|
||
<Dialog.Description>配置通知器类型和参数</Dialog.Description>
|
||
</Dialog.Header>
|
||
|
||
{#if showNotifierDialog}
|
||
<NotifierDialog
|
||
notifier={editingNotifier}
|
||
onSave={(notifier) => {
|
||
if (isEditing && editingNotifierIndex !== null) {
|
||
updateNotifier(editingNotifierIndex, notifier);
|
||
} else {
|
||
addNotifier(notifier);
|
||
}
|
||
}}
|
||
onCancel={closeNotifierDialog}
|
||
/>
|
||
{/if}
|
||
</Dialog.Content>
|
||
</Dialog.Portal>
|
||
</Dialog.Root>
|
||
|
||
<!-- QR 登录弹窗 -->
|
||
<Dialog.Root bind:open={showQrLoginDialog}>
|
||
<Dialog.Portal>
|
||
<Dialog.Overlay class="bg-background/80 fixed inset-0 z-50 backdrop-blur-sm" />
|
||
<Dialog.Content
|
||
class="bg-background fixed top-[50%] left-[50%] z-50 grid w-full max-w-md translate-x-[-50%] translate-y-[-50%] gap-4 border p-6 shadow-lg duration-200 sm:rounded-lg"
|
||
>
|
||
<Dialog.Header>
|
||
<Dialog.Title>扫码登录</Dialog.Title>
|
||
<Dialog.Description>使用哔哩哔哩 APP 扫描二维码登录</Dialog.Description>
|
||
</Dialog.Header>
|
||
|
||
<QrLogin bind:this={qrLoginComponent} onSuccess={handleQrLoginSuccess} />
|
||
</Dialog.Content>
|
||
</Dialog.Portal>
|
||
</Dialog.Root>
|