refactor: 调整部分页面的布局和样式 (#729)

crates/bili_sync/build.rs

@@ -1,3 +1,4 @@
 fn main() {
+    println!("cargo::rerun-if-changed=../../web/build");
     built::write_built_file().expect("Failed to acquire build-time information");
 }

web/src/lib/components/filter-option-editor.svelte

@@ -10,8 +10,12 @@
 		$props();
 </script>
 
+<div class="space-y-6">
 	<div class="space-y-4">
 		<Label>流质量过滤</Label>
+		<p class="text-muted-foreground text-sm">
+			根据质量过滤视频音频流，条件过于严苛可能导致视频无可用流
+		</p>
 		<div class="grid grid-cols-1 gap-6 lg:grid-cols-2">
 			<div class="space-y-2">
 				<Label for="video-max-quality">最高视频质量</Label>
@@ -181,3 +185,4 @@
 			<Label for="no-hires">排除Hi-RES音频</Label>
 		</div>
 	</div>
+</div>

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

@@ -609,17 +609,6 @@
 				<!-- 通知设置 -->
 				<Tabs.Content value="notifiers" class="mt-6 space-y-6">
 					<div class="space-y-4">
-						<div class="flex items-center justify-between rounded-lg border p-4">
-							<div class="space-y-1">
-								<Label for="ignore-common-errors">忽略常见错误</Label>
-								<p class="text-muted-foreground text-sm">
-									b 站接口频繁出现 -503
-									服务暂不可用，在通知器内通知容易刷屏，开启该选项以忽略此错误通知
-								</p>
-							</div>
-							<Switch id="ignore-common-errors" bind:checked={formData.ignore_common_errors} />
-						</div>
-
 						<div class="flex items-center justify-between">
 							<div>
 								<h3 class="text-lg font-semibold">通知器管理</h3>
@@ -678,6 +667,19 @@
 							</div>
 						{/if}
 					</div>
+
+					<Separator />
+
+					<div class="flex items-center justify-between rounded-lg border p-4">
+						<div class="space-y-1">
+							<Label for="ignore-common-errors">忽略常见错误</Label>
+							<p class="text-muted-foreground text-sm">
+								接口偶发 -503 服务暂不可用或 -504
+								服务调用超时，在通知器内容易刷屏，开启该选项以忽略此类错误通知
+							</p>
+						</div>
+						<Switch id="ignore-common-errors" bind:checked={formData.ignore_common_errors} />
+					</div>
 				</Tabs.Content>
 
 				<!-- 高级设置 -->

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

@@ -607,23 +607,22 @@
 					</div>
 				{/if}
 
-				<div class="space-y-4">
-					<div class="flex items-center space-x-2">
-						<Switch bind:checked={useCustomFilterOption} />
-						<div>
-							<Label class="text-sm font-medium">使用自定义流过滤设置</Label>
-							<p class="text-muted-foreground text-sm">关闭时继承全局过滤设置</p>
-						</div>
-					</div>
-					{#if editFilterOption}
-						<FilterOptionEditor bind:value={editFilterOption} disabled={!useCustomFilterOption} />
-					{/if}
-				</div>
-
 				<!-- 规则编辑器 -->
 				<div>
 					<RuleEditor rule={editForm.rule} onRuleChange={(rule) => (editForm.rule = rule)} />
 				</div>
+
+				<div class="space-y-4">
+					<div class="flex items-center space-x-2">
+						<Switch bind:checked={useCustomFilterOption} />
+						<Label class="text-sm font-medium">覆盖全局流设置</Label>
+					</div>
+					{#if editFilterOption}
+						<div class="border-muted ml-3 border-l-2 pl-6">
+							<FilterOptionEditor bind:value={editFilterOption} disabled={!useCustomFilterOption} />
+						</div>
+					{/if}
+				</div>
 			</div>
 			<div class="mt-8 flex justify-end gap-3">
 				<Button variant="outline" onclick={() => (showEditDialog = false)} disabled={saving}>