refactor: 重构后台设置页面布局与样式设计

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

@@ -63,8 +63,8 @@
 
 <div class="settings-container">
 	{#if activeTab === 'basic'}
-		<div class="basic-top-row">
+		<div class="settings-card full-width">
-			<div class="settings-card">
+			<div class="settings-section">
 				<h3>站点基础信息</h3>
 
 				<form
@@ -122,39 +122,43 @@
 						</div>
 					</div>
 
-					<div class="form-actions">
+					<div class="form-actions" style="justify-content: flex-start;">
 						<Button type="submit" variant="primary">保存</Button>
 					</div>
 				</form>
 			</div>
 
-			<div class="settings-card">
+			<hr class="section-divider" />
+
+			<div class="settings-section">
 				<h3>系统与安全环境</h3>
-				<div class="info-row">
+				<div class="info-grid">
+					<div class="info-item">
 						<span class="label">驱动框架</span>
 						<span class="value">SvelteKit 5 + Cloudflare</span>
 					</div>
-				<div class="info-row">
+					<div class="info-item">
 						<span class="label">当前管理员</span>
 						<span class="value">{data.user?.email || '未知用户'}</span>
 					</div>
-				<div class="info-row">
+					<div class="info-item">
 						<span class="label">数据库绑定</span>
 						<span class="value"><span class="badge">{data.platformEnv}</span></span>
 					</div>
-				<div class="info-row">
+					<div class="info-item">
 						<span class="label">R2存储绑定</span>
 						<span class="value"><span class="badge">{data.r2Env}</span></span>
 					</div>
-				<div class="info-row">
+					<div class="info-item">
 						<span class="label">鉴权模式</span>
 						<span class="value">Cloudflare Access (Zero Trust)</span>
 					</div>
 				</div>
 			</div>
 
-		<div class="two-columns-row">
+			<hr class="section-divider" />
-			<div class="settings-card">
+
+			<div class="settings-section">
 				<h3>图片上传</h3>
 				<form
 					method="POST"
@@ -175,13 +179,15 @@
 						WebP，保持原尺寸及透明背景。GIF、动态 PNG 和已有 WebP 保持原格式。
 						仅影响新上传图片；直接调用上传 API 的客户端需自行转换。
 					</p>
-					<div class="form-actions" style="margin-top: auto;">
+					<div class="form-actions" style="justify-content: flex-start;">
 						<Button type="submit" variant="primary">保存上传设置</Button>
 					</div>
 				</form>
 			</div>
 
-			<div class="settings-card">
+			<hr class="section-divider" />
+
+			<div class="settings-section">
 				<h3>API 与 AI 集成</h3>
 				<p class="desc">
 					配置允许 AI 或第三方工具直接管理文章的 API 访问令牌 (Token)。请求 API 时请在 HTTP Header
@@ -197,9 +203,8 @@
 						};
 					}}
 					class="alias-form"
-					style="height: 100%; display: flex; flex-direction: column;"
 				>
-					<div class="form-group">
+					<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
@@ -225,14 +230,15 @@
 							>
 						</div>
 					</div>
-					<div class="form-actions" style="margin-top: auto;">
+					<div class="form-actions" style="justify-content: flex-start;">
 						<Button type="submit" variant="primary">保存 Token</Button>
 					</div>
 				</form>
 			</div>
-		</div>
 
-		<div class="settings-card full-width" style="margin-top: 25px;">
+			<hr class="section-divider" />
+
+			<div class="settings-section">
 				<h3>Cloudflare Web Analytics</h3>
 				<p class="desc">
 					填写 Cloudflare Web Analytics 统计脚本中的 token，用于采集页面浏览量和访问次数。 请勿填写
@@ -264,10 +270,12 @@
 					</div>
 				</form>
 			</div>
+		</div>
 	{/if}
 
 	{#if activeTab === 'appearance'}
 		<div class="settings-card full-width">
+			<div class="settings-section">
 				<h3>首页顶部主图与外观偏好</h3>
 
 				<form
@@ -295,7 +303,7 @@
 					{#if avatarEnabled}
 						<div class="form-group">
 							<label for="picker">主页显示图片</label>
-						<div class="picker-container">
+							<div class="picker-container" style="max-width: 300px;">
 								<ImagePicker
 									bind:cover={avatarUrl}
 									title=""
@@ -308,15 +316,17 @@
 						<input type="hidden" name="site_avatar_url" value={avatarUrl} />
 					{/if}
 
-				<div class="form-actions">
+					<div class="form-actions" style="justify-content: flex-start;">
 						<Button type="submit" variant="primary">保存外观偏好</Button>
 					</div>
 				</form>
 			</div>
+		</div>
 	{/if}
 
 	{#if activeTab === 'terms'}
 		<div class="settings-card full-width">
+			<div class="settings-section">
 				<h3>个性化术语设定</h3>
 				<p class="desc">
 					您可以根据部署场景（如教学系统、文档库）自定义后台各模块的显示名称，例如将“文章”改为“实验手册”。
@@ -388,11 +398,12 @@
 						</div>
 					</div>
 
-				<div class="form-actions">
+					<div class="form-actions" style="justify-content: flex-start;">
 						<Button type="submit" variant="primary">保存</Button>
 					</div>
 				</form>
 			</div>
+		</div>
 	{:else if activeTab === 'analytics'}
 		<AnalyticsPanel analyticsPromise={data.analytics} />
 	{/if}
@@ -418,34 +429,6 @@
 		width: 100%;
 	}
 
-	.basic-top-row {
-		display: grid;
-		grid-template-columns: 2fr 1fr;
-		gap: 25px;
-		align-items: stretch;
-		width: 100%;
-	}
-
-	@media (max-width: 1024px) {
-		.basic-top-row {
-			grid-template-columns: 1fr;
-		}
-	}
-
-	.two-columns-row {
-		display: grid;
-		grid-template-columns: 1fr 1fr;
-		gap: 25px;
-		align-items: stretch;
-		width: 100%;
-	}
-
-	@media (max-width: 1024px) {
-		.two-columns-row {
-			grid-template-columns: 1fr;
-		}
-	}
-
 	.full-width {
 		grid-column: 1 / -1;
 	}
@@ -458,49 +441,68 @@
 		flex-direction: column;
 	}
 
-	.settings-card h3 {
+	.settings-section {
-		margin: 0 0 12px 0;
+		display: flex;
-		font-size: 1.2rem;
+		flex-direction: column;
-		border-bottom: 1px solid var(--border-color, rgba(0, 0, 0, 0.1));
+		padding: 10px 0;
-		padding-bottom: 10px;
-		color: var(--text-color);
 	}
 
-	.settings-card .desc {
+	.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));
+	}
+
+	.info-item {
+		display: flex;
+		flex-direction: column;
+		gap: 8px;
+	}
+
+	.info-item .label {
+		color: var(--text-muted, rgba(0, 0, 0, 0.6));
+		font-size: 0.85rem;
+		font-weight: 500;
+	}
+
+	.info-item .value {
+		color: var(--text-color);
+		font-weight: 600;
+		font-size: 0.95rem;
+		word-break: break-word;
+	}
+
+	.settings-card h3 {
+		margin: 0 0 16px 0;
+		font-size: 1.2rem;
+		color: var(--text-color);
+		font-weight: 600;
+	}
+
+	.settings-section .desc {
 		font-size: 0.9rem;
 		color: var(--text-muted, rgba(0, 0, 0, 0.6));
 		margin-bottom: 24px;
 		line-height: 1.5;
 	}
 
-	.info-row {
-		display: flex;
-		justify-content: space-between;
-		align-items: center;
-		padding: 14px 0;
-		border-bottom: 1px dashed var(--border-color, rgba(0, 0, 0, 0.08));
-		font-size: 0.95rem;
-		gap: 15px;
-	}
-
-	.info-row:last-child {
-		border-bottom: none;
-	}
-
-	.info-row .label {
-		color: var(--text-muted, rgba(0, 0, 0, 0.6));
-		font-weight: 500;
-		white-space: nowrap;
-		flex-shrink: 0;
-	}
-
-	.info-row .value {
-		color: var(--text-color);
-		font-weight: 600;
-		text-align: right;
-		word-break: break-word;
-	}
-
 	.alias-form {
 		display: flex;
 		flex-direction: column;