From ca55504f60f2371ea7b05f43683de3f753462030 Mon Sep 17 00:00:00 2001
From: seaHi <me@seahi.me>
Date: Sun, 27 Sep 2026 15:36:08 +0800
Subject: [PATCH] =?UTF-8?q?refactor:=20=E4=BC=98=E5=8C=96=E5=90=8E?=
 =?UTF-8?q?=E5=8F=B0=E8=AE=BE=E7=BD=AE=E9=A1=B5=E9=9D=A2=E6=A0=B7=E5=BC=8F?=
 =?UTF-8?q?=E5=92=8C=E5=B8=83=E5=B1=80=E7=BB=93=E6=9E=84?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/routes/admin/settings/+page.svelte | 315 +++++++++++--------------
 1 file changed, 142 insertions(+), 173 deletions(-)

diff --git a/src/routes/admin/settings/+page.svelte b/src/routes/admin/settings/+page.svelte
index b78ed59..8918e50 100644
--- a/src/routes/admin/settings/+page.svelte
+++ b/src/routes/admin/settings/+page.svelte
@@ -63,9 +63,9 @@
 
 <div class="settings-container">
 	{#if activeTab === 'basic'}
-		<div class="settings-card full-width" style="margin-bottom: 25px;">
-			<h3>系统与安全环境</h3>
-			<div class="info-grid">
+		<h3 class="section-title">系统与安全环境</h3>
+		<div class="settings-card full-width" style="margin-bottom: 25px; padding: 0; border: none;">
+			<div class="info-grid" style="margin: 0;">
 				<div class="info-item">
 					<span class="label">驱动框架</span>
 					<span class="value">SvelteKit 5 + Cloudflare</span>
@@ -89,151 +89,142 @@
 			</div>
 		</div>
 
-		<div class="settings-card full-width">
-			<form
-				method="POST"
-				action="?/updateBasicSettings"
-				use:enhance={() => {
-					return async ({ update }) => {
-						update({ reset: false });
-					};
-				}}
-				class="alias-form"
-			>
-				<div class="settings-section">
-					<h3>站点基础信息</h3>
-					<div class="form-row">
-						<div class="form-group">
-							<label for="site_title">网站标题</label>
-							<TextInput
-								type="text"
-								id="site_title"
-								name="site_title"
-								value={data.settings['site.title'] || 'BlogFlare'}
-								required
-							/>
-						</div>
-						<div class="form-group">
-							<label for="site_description">站点描述</label>
-							<TextInput
-								type="text"
-								id="site_description"
-								name="site_description"
-								value={data.settings['site.description'] ||
-									'A high-performance blog powered by Cloudflare D1, R2, and KV.'}
-								required
-							/>
-						</div>
-					</div>
-
-					<div class="form-row">
-						<div class="form-group">
-							<label for="r2_public_domain">R2 自定义域名</label>
-							<TextInput
-								type="text"
-								id="r2_public_domain"
-								name="r2_public_domain"
-								value={data.settings['r2.public_domain'] || 'https://assets.yourdomain.com'}
-								placeholder="例如: https://assets.mydomain.com"
-							/>
-						</div>
-						<div class="form-group">
-							<label for="site_launch_date">建站日期</label>
-							<DatePicker
-								id="site_launch_date"
-								name="site_launch_date"
-								value={data.settings['site.launch_date'] || ''}
-							/>
-						</div>
-					</div>
-				</div>
-
-				<hr class="section-divider" />
-
-				<div class="settings-section">
-					<h3>图片上传</h3>
-					<label class="toggle-label">
-						<input type="checkbox" name="upload_auto_webp" value="true" bind:checked={autoWebp} />
-						<span class="toggle-text">上传图片时自动转换为 WebP</span>
-					</label>
-					<p class="desc" style="margin-top: 10px;">
-						默认关闭。开启后，后台各入口上传的 JPEG / PNG 图片会在浏览器中以 80% 质量转换为
-						WebP，保持原尺寸及透明背景。GIF、动态 PNG 和已有 WebP 保持原格式。
-						仅影响新上传图片；直接调用上传 API 的客户端需自行转换。
-					</p>
-				</div>
-
-				<hr class="section-divider" />
-
-				<div class="settings-section">
-					<h3>API 与 AI 集成</h3>
-					<p class="desc">
-						配置允许 AI 或第三方工具直接管理文章的 API 访问令牌 (Token)。请求 API 时请在 HTTP Header
-						中添加 <code>Authorization: Bearer &lt;Token&gt;</code>。
-					</p>
-					<div class="form-group" style="max-width: 500px;">
-						<label for="agent_api_token">API Token</label>
-						<div style="display: flex; gap: 10px; align-items: center; width: 100%;">
-							<TextInput
-								type={showApiToken ? 'text' : 'password'}
-								id="agent_api_token"
-								name="agent_api_token"
-								bind:value={apiToken}
-								placeholder="留空则禁用对外 API 访问"
-							/>
-							<Button
-								type="button"
-								variant="secondary"
-								style="white-space: nowrap;"
-								onclick={() => (showApiToken = !showApiToken)}
-							>
-								{showApiToken ? '隐藏' : '显示'}
-							</Button>
-							<Button
-								type="button"
-								variant="secondary"
-								style="white-space: nowrap;"
-								onclick={generateApiToken}>自动生成</Button
-							>
-						</div>
-					</div>
-				</div>
-
-				<hr class="section-divider" />
-
-				<div class="settings-section">
-					<h3>Cloudflare Web Analytics</h3>
-					<p class="desc">
-						填写 Cloudflare Web Analytics 统计脚本中的 token，用于采集页面浏览量和访问次数。
-						请勿填写 Site Tag；它是查询标识，不能用于浏览器采集。后台查询还需配置 CF_ACCOUNT_ID，
-						并确保 CF_API_TOKEN 具有该账户的 Account Settings Read 和 Account Analytics Read 权限。
-					</p>
-					<div class="form-group" style="max-width: 500px;">
-						<label for="web_analytics_token">Web Analytics Token</label>
+		<form
+			method="POST"
+			action="?/updateBasicSettings"
+			use:enhance={() => {
+				return async ({ update }) => {
+					update({ reset: false });
+				};
+			}}
+			class="alias-form"
+		>
+			<h3 class="section-title">站点基础信息</h3>
+			<div class="settings-card full-width">
+				<div class="form-row">
+					<div class="form-group">
+						<label for="site_title">网站标题</label>
 						<TextInput
 							type="text"
-							id="web_analytics_token"
-							name="web_analytics_token"
-							value={data.settings['site.web_analytics_token'] || ''}
-							placeholder="留空则禁用数据拉取和自动注入"
+							id="site_title"
+							name="site_title"
+							value={data.settings['site.title'] || 'BlogFlare'}
+							required
+						/>
+					</div>
+					<div class="form-group">
+						<label for="site_description">站点描述</label>
+						<TextInput
+							type="text"
+							id="site_description"
+							name="site_description"
+							value={data.settings['site.description'] ||
+								'A high-performance blog powered by Cloudflare D1, R2, and KV.'}
+							required
 						/>
 					</div>
 				</div>
 
-				<div
-					class="form-actions"
-					style="margin-top: 30px; justify-content: flex-start; border-top: 1px solid var(--border-color, rgba(0,0,0,0.1)); padding-top: 20px;"
-				>
-					<Button type="submit" variant="primary">保存基础设置</Button>
+				<div class="form-row">
+					<div class="form-group">
+						<label for="r2_public_domain">R2 自定义域名</label>
+						<TextInput
+							type="text"
+							id="r2_public_domain"
+							name="r2_public_domain"
+							value={data.settings['r2.public_domain'] || 'https://assets.yourdomain.com'}
+							placeholder="例如: https://assets.mydomain.com"
+						/>
+					</div>
+					<div class="form-group">
+						<label for="site_launch_date">建站日期</label>
+						<DatePicker
+							id="site_launch_date"
+							name="site_launch_date"
+							value={data.settings['site.launch_date'] || ''}
+						/>
+					</div>
 				</div>
-			</form>
-		</div>
+			</div>
+
+			<h3 class="section-title" style="margin-top: 25px;">图片上传</h3>
+			<div class="settings-card full-width">
+				<label class="toggle-label">
+					<input type="checkbox" name="upload_auto_webp" value="true" bind:checked={autoWebp} />
+					<span class="toggle-text">上传图片时自动转换为 WebP</span>
+				</label>
+				<p class="desc" style="margin-top: 10px; margin-bottom: 0;">
+					默认关闭。开启后，后台各入口上传的 JPEG / PNG 图片会在浏览器中以 80% 质量转换为
+					WebP，保持原尺寸及透明背景。GIF、动态 PNG 和已有 WebP 保持原格式。
+					仅影响新上传图片；直接调用上传 API 的客户端需自行转换。
+				</p>
+			</div>
+
+			<h3 class="section-title" style="margin-top: 25px;">API 与 AI 集成</h3>
+			<div class="settings-card full-width">
+				<p class="desc">
+					配置允许 AI 或第三方工具直接管理文章的 API 访问令牌 (Token)。请求 API 时请在 HTTP Header
+					中添加 <code>Authorization: Bearer &lt;Token&gt;</code>。
+				</p>
+				<div class="form-group" style="max-width: 500px;">
+					<label for="agent_api_token">API Token</label>
+					<div style="display: flex; gap: 10px; align-items: center; width: 100%;">
+						<TextInput
+							type={showApiToken ? 'text' : 'password'}
+							id="agent_api_token"
+							name="agent_api_token"
+							bind:value={apiToken}
+							placeholder="留空则禁用对外 API 访问"
+						/>
+						<Button
+							type="button"
+							variant="secondary"
+							style="white-space: nowrap;"
+							onclick={() => (showApiToken = !showApiToken)}
+						>
+							{showApiToken ? '隐藏' : '显示'}
+						</Button>
+						<Button
+							type="button"
+							variant="secondary"
+							style="white-space: nowrap;"
+							onclick={generateApiToken}>自动生成</Button
+						>
+					</div>
+				</div>
+			</div>
+
+			<h3 class="section-title" style="margin-top: 25px;">Cloudflare Web Analytics</h3>
+			<div class="settings-card full-width">
+				<p class="desc">
+					填写 Cloudflare Web Analytics 统计脚本中的 token，用于采集页面浏览量和访问次数。 请勿填写
+					Site Tag；它是查询标识，不能用于浏览器采集。后台查询还需配置 CF_ACCOUNT_ID， 并确保
+					CF_API_TOKEN 具有该账户的 Account Settings Read 和 Account Analytics Read 权限。
+				</p>
+				<div class="form-group" style="max-width: 500px;">
+					<label for="web_analytics_token">Web Analytics Token</label>
+					<TextInput
+						type="text"
+						id="web_analytics_token"
+						name="web_analytics_token"
+						value={data.settings['site.web_analytics_token'] || ''}
+						placeholder="留空则禁用数据拉取和自动注入"
+					/>
+				</div>
+			</div>
+
+			<div
+				class="form-actions"
+				style="margin-top: 30px; justify-content: flex-start; border-top: 1px solid var(--border-color, rgba(0,0,0,0.1)); padding-top: 20px;"
+			>
+				<Button type="submit" variant="primary">保存基础设置</Button>
+			</div>
+		</form>
 	{/if}
 
 	{#if activeTab === 'appearance'}
+		<h3 class="section-title">首页顶部主图与外观偏好</h3>
 		<div class="settings-card full-width">
-			<h3>首页顶部主图与外观偏好</h3>
-
 			<form
 				method="POST"
 				action="?/updateAppearance"
@@ -280,8 +271,8 @@
 	{/if}
 
 	{#if activeTab === 'terms'}
+		<h3 class="section-title">个性化术语设定</h3>
 		<div class="settings-card full-width">
-			<h3>个性化术语设定</h3>
 			<p class="desc">
 				您可以根据部署场景（如教学系统、文档库）自定义后台各模块的显示名称，例如将“文章”改为“实验手册”。
 			</p>
@@ -363,6 +354,13 @@
 </div>
 
 <style>
+	.section-title {
+		margin: 0 0 12px 0;
+		font-size: 1.15rem;
+		color: var(--text-color);
+		font-weight: 600;
+	}
+
 	.admin-page-header {
 		margin-bottom: 25px;
 		border-bottom: 2px solid var(--text-color);
@@ -387,40 +385,20 @@
 	}
 
 	.settings-card {
-		border: 2px solid var(--text-color);
-		padding: 24px;
+		border: none;
+		padding: 0 0 35px 0;
 		background: transparent;
 		display: flex;
 		flex-direction: column;
 	}
 
-	.settings-section {
-		display: flex;
-		flex-direction: column;
-		padding: 10px 0;
-	}
-
-	.settings-section h3 {
-		margin: 0 0 16px 0;
-		font-size: 1.2rem;
-		color: var(--text-color);
-		font-weight: 600;
-	}
-
-	.section-divider {
-		border: 0;
-		border-top: 1px solid var(--border-color, rgba(0, 0, 0, 0.1));
-		margin: 25px 0;
-	}
-
 	.info-grid {
 		display: grid;
 		grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
 		gap: 24px 20px;
-		background: rgba(0, 0, 0, 0.02);
-		padding: 24px;
-		border-radius: 8px;
-		border: 1px solid var(--border-color, rgba(0, 0, 0, 0.05));
+		background: transparent;
+		padding: 10px 0;
+		border: none;
 	}
 
 	.info-item {
@@ -442,16 +420,7 @@
 		word-break: break-word;
 	}
 
-	.settings-card > h3 {
-		margin: 0 0 12px 0;
-		font-size: 1.2rem;
-		border-bottom: 1px solid var(--border-color, rgba(0, 0, 0, 0.1));
-		padding-bottom: 10px;
-		color: var(--text-color);
-	}
-
-	.settings-section .desc,
-	.settings-card > .desc {
+	.settings-card .desc {
 		font-size: 0.9rem;
 		color: var(--text-muted, rgba(0, 0, 0, 0.6));
 		margin-bottom: 24px;